/* ─────────────────────────────────────────────────────────────────────────────
   SEGNAV — a bottom-fixed segmented control for the three portal pages.

   WHAT IT IS FOR, and what it is deliberately NOT for.
   Overview / Crypto / Macro are PEER VIEWS: the same cycle, three lenses. A
   segmented control is the right pattern for exactly that — mutually exclusive
   views of one subject, switch and compare. It is the wrong pattern for the
   masthead (Home / Ledger / Briefing / Portal), which is HIERARCHICAL: different
   kinds of thing at different depths. Flattening those into "pick one of these
   equivalent options" would misrepresent the structure, so the masthead stays.
   Do not grow this past four items. At 390px three segments get ~118px each;
   at five they get ~70px and the labels truncate, which is the mobile-nav
   problem this exists to solve, just relocated to the bottom of the screen.

   WHY BOTTOM-FIXED, AND ONLY ON NARROW SCREENS.
   The portal nav was measurably broken on mobile: overview and macro scrolled
   sideways (599px and 627px against a 390px viewport) because .nav-links never
   wrapped, and on macro the item clipped off-screen was that page's OWN ACTIVE
   TAB — you could not see where you were. That is patched, but wrapping is a
   repair, not a design. This puts switching in the thumb zone instead.
   It is hidden at >=760px because desktop already has the masthead and there is
   no reason to spend fixed vertical space there.

   COST, stated plainly: ~52px of permanent viewport at the bottom on phones,
   plus the safe-area inset. That is a real trade on a dense page like crypto,
   which is why the body padding below is not optional — without it the control
   sits on top of the last card.

   COLOUR. The active segment uses --live, the current cycle phase's colour, which
   is the site's signature (colour as a function of live data). Note the
   consequence: the active state changes hue as the cycle moves, so it doubles as
   a status indicator. That is deliberate. If it ever reads as confusing rather
   than elegant, swap `background: var(--live)` for a fixed accent — one line.
   ───────────────────────────────────────────────────────────────────────────── */

.segnav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* env() keeps it clear of the iPhone home indicator and Safari's bottom chrome.
     The fallback 0px matters — env() is unknown on desktop Firefox, and without a
     fallback the whole calc() is invalid and the bar pins to the very bottom. */
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: none;                    /* shown by the media query below */
  align-items: stretch;
  max-width: calc(100vw - 28px);
  background: rgba(10, 10, 12, 0.94);
  border: 1px solid var(--seg-rule, rgba(237, 234, 228, 0.16));
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.segnav a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 13px vertical + ~17px line box clears the 44px minimum touch target that the
     old text-only nav links failed (they measured 9-17px tall). */
  padding: 13px 16px;
  min-height: 44px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--seg-ink, #9aa0a8);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.segnav a + a { border-left: 1px solid var(--seg-rule, rgba(237, 234, 228, 0.12)); }

.segnav a[aria-current="page"] {
  background: var(--live, #22d3ee);
  /* Near-black rather than pure #000: --live can be any of the six phase colours
     and a couple of them (green, cyan) are bright enough that pure black vibrates. */
  color: #06121a;
}

.segnav a:not([aria-current="page"]):hover,
.segnav a:not([aria-current="page"]):focus-visible { color: var(--seg-ink-hi, #fff); }

/* Visible focus ring, inset so the pill's overflow:hidden cannot clip it away. */
.segnav a:focus-visible { outline: 2px solid var(--live, #22d3ee); outline-offset: -4px; }

@media (max-width: 759px) {
  .segnav { display: flex; }

  /* The masthead must not repeat what the control now owns. Before this rule the three
     portal destinations appeared TWICE on every phone screen — once in .nav-links and
     once here — and on crypto.html that pushed the masthead to two rows, which is the
     cramped-nav problem this was meant to remove, not add to. Briefing and Calls STAY in
     the masthead: they are not peer views of the cycle, they are different destinations,
     and they are the reason this control is not allowed to grow to five segments.
     Scoped to body.has-segnav so a page that loads this stylesheet without segnav.js
     never loses its navigation. */
  body.has-segnav .nav-links a[href="/portal/overview"],
  body.has-segnav .nav-links a[href="/portal/crypto"],
  body.has-segnav .nav-links a[href="/portal/macro"] { display: none; }
  /* Reserve the space the bar occupies. Without this the control covers the last
     card / footer, which is worse than the wrapping nav it replaces. */
  body.has-segnav { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .segnav a { transition: none; }
}