/* ============================================================================
   HomeOS Dubai — installable app shell
   ----------------------------------------------------------------------------
   The mobile app is this same web app, installed: standalone window, real icon,
   native-feeling bottom tab bar, safe-area aware, offline-tolerant. Everything
   here is additive so the browser experience is unchanged at desktop widths.
   ============================================================================ */

/* ---- device chrome: safe areas, tap feel, no hover-lift on touch ---- */
body.app {
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100dvh;
  overscroll-behavior-y: contain;
}
body.app .nav { padding-top: max(14px, env(safe-area-inset-top)); }
body.app .nav-in { padding-left: max(18px, env(safe-area-inset-left)); }
a, button, .chip, .tab, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* On touch devices a hover-lift sticks after a tap and looks broken. */
@media (hover: none) {
  .b-cell:hover, .card:hover, .order-card:hover, .mini-row:hover, .opt:hover, .btn:hover { transform: none; }
}
/* In the installed app there is no browser chrome, so the top bar can sit flush. */
html.standalone .nav { padding-top: max(10px, env(safe-area-inset-top)); }

/* ---- bottom tab bar (mobile only) ---- */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    background: rgba(255, 255, 255, 0.92);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 -12px 30px -22px rgba(6, 25, 35, 0.45);
  }
  .tabbar a {
    display: grid; justify-items: center; gap: 3px; padding: 8px 4px;
    font-size: 10.5px; font-weight: 560; letter-spacing: 0.01em;
    color: var(--ink-400); border-radius: var(--r-tile); text-decoration: none;
    transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tabbar a:active { transform: scale(0.94); }
  .tabbar a span { line-height: 1; }
  /* the bar owns the bottom edge, so float the page content above it */
  body.app { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.app .site-foot { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* ---- network state banner ---- */
.net-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 8px); z-index: var(--z-overlay);
  display: flex; align-items: center; gap: 8px;
  background: var(--ink-900); color: #fff; font-size: var(--t-micro); font-weight: 550;
  padding: 9px 14px; border-radius: var(--r-pill); box-shadow: var(--sh-3);
  max-width: calc(100vw - 32px);
}
.net-banner[hidden] { display: none; }
.net-banner .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--gold); }

/* ---- install affordance ---- */
.install-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap; padding: var(--s4) 0; border-top: 1px solid var(--d-line, var(--line));
  font-size: var(--t-micro); color: var(--d-muted, var(--ink-400));
}
.install-row .btn { flex: 0 0 auto; }
.ios-hint {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-tile);
  padding: 12px 14px; font-size: var(--t-micro); color: var(--ink-500); margin-top: var(--s4);
}
.ios-hint b { color: var(--ink-800); }

/* ---- app-only affordances on the marketing page ---- */
html.standalone .hide-in-app { display: none !important; }