/* ============================================================================
   nav.css — five-destination bottom tab bar (phone) / left rail (desktop)
   plus the "thumb sheet" raised by tapping the active tab. Replaces the
   wrapping .tabs strip in #topbar-tabs at every width (that markup stays in
   the DOM, hidden, so its existing click-driven navigation keeps working --
   see nav.js). Tokens only; no literal dark hex, so light mode stays correct.
   ========================================================================== */

/* the original 11-button strip is superseded everywhere by nav.js's own UI */
#topbar-tabs { display: none; }

/* ---- pager: quick prev/next within the current destination's pages ------- */
.nav-pager {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.nav-pager[hidden] { display: none; }
.nav-pager-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px;
  background: none; border: 1px solid var(--line); color: var(--dim);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.nav-pager-btn:hover { color: var(--ink); border-color: var(--dim); }
.nav-pager-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.nav-pager-label {
  min-width: 140px; text-align: center;
  font-family: var(--font-disp); font-weight: 700; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}

/* ---- bottom tab bar (phone) ------------------------------------------------ */
.nav-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 8px 4px calc(14px + env(safe-area-inset-bottom));
  /* WKWebView (the native app's webview, unlike desktop Safari) doesn't
     promote position:fixed elements to their own compositor layer by
     default -- during momentum scroll the fixed bar visibly lags/desyncs
     from the scroll offset and appears to swim or clip behind content.
     Forcing it onto the GPU layer keeps it pinned correctly. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}
.nav-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 44px; background: none; border: none; border-top: 2px solid transparent;
  color: var(--dim); font-family: var(--font-body); font-weight: 700; font-size: .74rem;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 2px; cursor: pointer;
}
.nav-tab.active { color: var(--amber); border-top-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.nav-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.nav-caret { font-size: .68em; margin-left: 2px; }

/* body content clears the fixed bottom bar (phone only -- the rail media
   query below removes this again at >=820px, where there's no bottom bar) */
.page, .footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ---- left rail (desktop, >=820px) ------------------------------------------ */
.nav-rail { display: none; }
@media (min-width: 820px) {
  .nav-tabbar { display: none; }
  .nav-rail {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; left: 0; top: 0; bottom: 0; width: 176px; z-index: 40;
    border-right: 1px solid var(--line);
    background: var(--panel);
    padding: calc(1rem + env(safe-area-inset-top)) 10px 1rem;
  }
  .nav-rail .nav-tab {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px;
    min-height: 44px; border-top: none; border-left: 3px solid transparent; border-radius: 0 6px 6px 0;
    font-size: .82rem; letter-spacing: .04em; padding: 10px 12px; text-align: left;
  }
  .nav-rail .nav-tab.active { border-left-color: var(--amber); }
  .topbar, .page, .footer { margin-left: 176px; }
  .page { padding-bottom: 1.5rem; }   /* no fixed bottom bar to clear on desktop */
}

/* ---- sheet + scrim ----------------------------------------------------------- */
.nav-scrim {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(14, 10, 18, .72);
  opacity: 0; pointer-events: none;
  transition: opacity .22s cubic-bezier(.2, .8, .2, 1);
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }
.nav-scrim[hidden] { display: none; }

.nav-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
  max-width: 480px; margin: 0 auto;
  background: color-mix(in srgb, var(--panel-2) 85%, var(--ink) 5%);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 12px 14px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .55);
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.nav-sheet.open { transform: translateY(0); }
.nav-sheet.dismissing { transition-duration: .18s; }
.nav-sheet[hidden] { display: none; }

.nav-sheet-handle { width: 38px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
.nav-sheet-label {
  font-family: var(--font-body); font-weight: 600; font-size: .59375rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  padding: 0 4px 10px;
}
.nav-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.nav-tile {
  display: flex; flex-direction: column; gap: 5px;
  min-height: 44px; border-radius: 11px; padding: 13px 12px;
  background: var(--panel); border: 1px solid var(--line);
  text-align: left; cursor: pointer;
}
.nav-tile:active { background: var(--panel-2); }
.nav-tile.current { background: color-mix(in srgb, var(--amber) 10%, transparent); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.nav-tile-title {
  font-family: var(--font-disp); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
}
.nav-tile.current .nav-tile-title { color: var(--amber); }
.nav-tile-sub {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: .625rem; color: var(--dim);
}

@media (prefers-reduced-motion: reduce) {
  .nav-scrim, .nav-sheet { transition: none !important; }
}