/* ============================================================================
   DualFare — "GLASS COCKPIT v2" design system (refined)
   Aviation instrument panel / HUD. A night flight deck over the Pacific:
   deep blue-black glass, precise hairline grids, phosphor-CYAN instrument
   light, caution-AMBER for the rare find (the master-caution moment).
   Serif narrates, mono measures: Fraunces for the calm editorial voice,
   monospace for every number, label and readout — telemetry-live.
   v2 refinements: the deck is LIT now — higher luminance panels, brighter
   phosphor signals, readable instrument type (no contrast-floor micro-caps),
   a radar sweep that owns the hero's right half, and console styling carried
   through the tables and lower sections.
   Self-hosted, no CDN, no JS, CSP-safe (inline SVG data: URIs only).
   Signature behaviour: the deck is CALM while it watches; when a critical
   (2x First) find appears the MASTER CAUTION lights up — amber annunciators,
   pulsing rails, radar locked on the destination.
   ========================================================================== */

/* ---- Self-hosted variable fonts (each file carries the full weight axis) -- */
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Night flight deck — blue-black, never brown, never gray. Lifted a stop
     from v1 so the glass reads luxe, not murky. */
  --bg-0: #04090f;
  --bg-1: #071019;
  --bg-2: #0d1925;

  /* Frosted panel glass — brighter than the sky behind it (lit from within) */
  --glass:      rgba(24, 44, 64, .78);
  --glass-deep: rgba(13, 26, 40, .86);

  /* Hairlines — the thin engraved lines of an instrument panel */
  --hairline:      rgba(132, 205, 255, .26);
  --hairline-soft: rgba(132, 205, 255, .16);
  --hairline-dim:  rgba(132, 205, 255, .10);

  /* Cool flight-deck text — all three steps clear the comfort floor */
  --text:  #f0f8fd;
  --muted: #b9cdde;
  --faint: #8aa3b8;

  /* Primary instrument light: phosphor cyan — brighter tube, hotter glow */
  --cyan:        #5fe1ff;
  --cyan-bright: #bdf2ff;
  --cyan-deep:   #2bb2e6;
  --cyan-ink:    #04222e;                 /* dark text on cyan fills */
  --cyan-glow:   rgba(95, 225, 255, .52);
  --cyan-faint:  rgba(95, 225, 255, .12);

  /* Caution amber — reserved for the find itself (master caution) */
  --amber:        #ffb95e;
  --amber-bright: #ffd99c;
  --amber-deep:   #e09433;
  --amber-ink:    #2a1a02;
  --amber-glow:   rgba(255, 185, 94, .5);
  --amber-faint:  rgba(255, 185, 94, .13);

  /* Status lights */
  --good:     #7df0ae;                    /* systems normal */
  --good-glow: rgba(125, 240, 174, .35);
  --good-bg:  rgba(125, 240, 174, .1);
  --alarm:    #ff6e64;                    /* warning red: short on points etc. */
  --alarm-bg: rgba(255, 110, 100, .12);

  --shadow:    0 30px 80px -42px rgba(0, 0, 0, .9);
  --shadow-sm: 0 18px 50px -30px rgba(0, 0, 0, .85);
  --edge-lit:  inset 0 1px 0 rgba(190, 240, 255, .13);

  --r:    10px;
  --r-sm: 6px;
  --r-lg: 14px;

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --maxw: 1560px;
}

/* ---- Reset & base -------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  font-family: var(--sans);
  font-size: 16px; line-height: 1.6;
  color: var(--text);
  background-color: var(--bg-0);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The deck at night: cold space above, a clear cyan horizon below, a whisper
   of amber instrument spill, and the engraved blueprint grid over it all.
   PERF: this used to be body { background-attachment: fixed } — which defeats
   composited scrolling and repaints all six gradient layers on the main thread
   on every scrolled frame (measured: 13x slower scrolling). A fixed-position
   element looks identical (the backdrop doesn't scroll either way) but lives
   on its own compositor layer, so scrolling never repaints it. */
.bg-deck {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(120% 80% at 50% 120%, rgba(43, 178, 230, .2), transparent 58%),
    radial-gradient(100% 60% at 50% -20%, rgba(82, 138, 192, .17), transparent 60%),
    radial-gradient(44% 36% at 88% 104%, rgba(255, 170, 70, .09), transparent 65%),
    repeating-linear-gradient(90deg, rgba(130, 198, 255, .055) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(130, 198, 255, .055) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, #0a1624 0%, #060e18 48%, #03080f 100%);
}
/* CRT scanlines + cabin vignette — one fixed overlay above everything.
   v2: dialed back so it textures the glass without eating luminance. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 75; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 30%, transparent 62%, rgba(2, 6, 11, .3) 100%),
    repeating-linear-gradient(0deg, rgba(4, 12, 19, .1) 0 1px, transparent 1px 4px);
}
/* Top status rail — a thin powered line across the windshield. Goes amber and
   breathes when a critical find is live (see body.is-alarm below). */
body::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90;
  pointer-events: none; opacity: .95;
  background: linear-gradient(90deg, transparent 4%, rgba(95, 225, 255, .22) 22%,
    rgba(95, 225, 255, .85) 50%, rgba(95, 225, 255, .22) 78%, transparent 96%);
}
body.is-alarm::after {
  background: linear-gradient(90deg, transparent 4%, rgba(255, 185, 94, .25) 22%,
    var(--amber) 50%, rgba(255, 185, 94, .25) 78%, transparent 96%);
  
}

a { color: #9deaff; text-decoration: none; transition: color .15s, text-shadow .2s; }
a:hover { color: #e2f9ff; text-shadow: 0 0 14px var(--cyan-glow); }
::selection { background: rgba(95, 225, 255, .32); color: #f4fcff; }
:focus-visible { outline: 2px solid rgba(95, 225, 255, .85); outline-offset: 2px; }

/* Cockpit scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(132, 205, 255, .26); border-radius: 6px;
  border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: rgba(132, 205, 255, .42); }
html { scrollbar-width: thin; scrollbar-color: rgba(132, 205, 255, .3) transparent; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 130px; }
@media (min-width: 760px)  { .container { padding: 52px 44px 96px; } }
@media (min-width: 1200px) { .container { padding: 64px 56px 110px; } }

/* ---- Typography: serif narrates, mono measures --------------------------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 440; line-height: 1.1;
  letter-spacing: -.012em; font-optical-sizing: auto; margin: 0; }
h1 { font-size: clamp(36px, 5.4vw, 58px); margin: 14px 0 8px; font-weight: 420; letter-spacing: -.02em; }
h2 { font-size: clamp(22px, 3vw, 28px); margin: 50px 0 20px; font-weight: 460;
  position: relative; padding-bottom: 10px; }
h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--hairline), var(--hairline-dim) 45%, transparent 80%); }
/* primed segment: a lit cyan channel at the head of every section rule */
h2::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 14px var(--cyan-glow); }
h3 { font-size: 18px; }
.display { font-family: var(--serif); }
.sub { color: var(--muted); margin: 0 0 24px; font-size: 16px; max-width: 70ch; }
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .22em;
  font-size: 12px; font-weight: 600; color: var(--cyan);
  text-shadow: 0 0 18px rgba(95, 225, 255, .4); }
.eyebrow::before { content: ""; display: inline-block; width: 20px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent); margin-right: 9px;
  vertical-align: middle; opacity: .9; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 13.5px; letter-spacing: .02em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13.5px; }

/* ---- Top bar: the glareshield --------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 40;
  background: linear-gradient(to bottom, rgba(7, 16, 26, .92), rgba(7, 16, 26, .7));
  border-bottom: 1px solid var(--hairline-soft); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 185, 94, .65) 30%,
    rgba(255, 185, 94, .65) 70%, transparent);
  opacity: 0; transition: opacity .4s; }
body.is-alarm .topbar::after { opacity: 1;  }
.topbar-inner { max-width: var(--maxw); margin: 0 auto; padding: 15px 22px;
  display: flex; align-items: center; gap: 28px; }
@media (min-width: 1200px) { .topbar-inner { padding: 15px 32px; } }

.brand { font-family: var(--mono); font-weight: 700; font-size: 15.5px;
  text-transform: uppercase; letter-spacing: .24em; color: var(--text);
  display: inline-flex; align-items: center; gap: 0; }
.brand span { color: var(--cyan); text-shadow: 0 0 20px var(--cyan-glow); }
.brand .mark { color: var(--amber); font-size: 12px; margin-right: 10px;
  text-shadow: 0 0 14px var(--amber-glow); }

/* nav links — instrument labels, lifted well off the contrast floor */
.nav-links { display: none; gap: 6px; align-items: center; }
.nav-links a { font-family: var(--mono); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  padding: 8px 12px; position: relative; border-radius: 4px;
  transition: color .15s, background .2s; }
.nav-links a:hover { color: var(--text); background: var(--cyan-faint); text-shadow: none; }
.nav-links a.active { color: var(--cyan-bright); text-shadow: 0 0 16px var(--cyan-glow); }
.nav-links a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px;
  height: 2px; background: var(--cyan); border-radius: 2px;
  box-shadow: 0 0 12px var(--cyan-glow), 0 0 26px var(--cyan-glow); }
.topbar .spacer { flex: 1; }
.who { color: var(--muted); font-size: 13px; font-family: var(--mono); letter-spacing: .03em; }
.topbar .logout { color: var(--muted); font-size: 13px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .1em; }
@media (min-width: 760px) { .nav-links { display: flex; } }

/* ---- Bottom tab bar (phone) ----------------------------------------------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: space-around; align-items: stretch;
  background: linear-gradient(to top, rgba(5, 12, 20, .97), rgba(9, 18, 28, .92));
  border-top: 1px solid var(--hairline-soft);
  padding-bottom: env(safe-area-inset-bottom, 0); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 48px; justify-content: center;
  padding: 12px 8px 13px; color: var(--muted); font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tabbar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.active { color: var(--cyan-bright); text-shadow: 0 0 12px var(--cyan-glow); }
.tabbar a.active svg { filter: drop-shadow(0 0 7px var(--cyan-glow)); }
@media (min-width: 760px) { .tabbar { display: none; } }

/* ---- Cockpit ambiance (.aurora repurposed) --------------------------------
   a1 = cyan instrument wash · a2 = amber panel spill · a3 = deep sea-night blue
   ::before = the artificial horizon, slowly banking
   ::after  = a scan band drifting down the windshield                         */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* PERF (Firefox): these blobs used filter: blur(90px) + mix-blend-mode: screen
   while drifting — Firefox re-blurs and re-blends them EVERY animation frame
   (measured ~4fps page-wide). A soft radial falloff is the same pre-blurred
   shape at zero per-frame cost, and additive 'screen' over a near-black deck
   is visually plain alpha. Same look, compositor-only. */
.aurora span { position: absolute; border-radius: 50%; will-change: transform; }
.aurora .a1 { width: 58vw; height: 58vw; left: -12vw; top: -20vh; opacity: .33;
  background: radial-gradient(closest-side, rgba(46, 172, 232, .42) 0%, rgba(46, 172, 232, .18) 45%, transparent 78%);
  /* PERF: drift retired — see PERF note above */ }
.aurora .a2 { width: 46vw; height: 46vw; right: -10vw; top: 48vh; opacity: .2;
  background: radial-gradient(closest-side, rgba(255, 158, 66, .4) 0%, rgba(255, 158, 66, .16) 45%, transparent 78%);
  /* PERF: drift retired — see PERF note above */ }
.aurora .a3 { width: 54vw; height: 54vw; left: 24vw; top: 26vh; opacity: .36;
  background: radial-gradient(closest-side, rgba(28, 104, 158, .42) 0%, rgba(28, 104, 158, .18) 45%, transparent 78%);
  /* PERF: drift retired — see PERF note above */ }
body.is-alarm .aurora .a2 { opacity: .34; }
.aurora::before { content: ""; position: absolute; top: 60vh; left: -20vw; width: 140vw; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 226, 255, .55) 35%,
    rgba(160, 240, 255, .75) 50%, rgba(120, 226, 255, .55) 65%, transparent);
  box-shadow: 0 0 28px rgba(95, 225, 255, .45); opacity: .28;
  transform: rotate(-.7deg); /* PERF: was df-horizon — static now */ }
.aurora::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24vh;
  background: linear-gradient(180deg, transparent 0%, rgba(125, 224, 255, .05) 38%,
    rgba(165, 238, 255, .11) 50%, rgba(125, 224, 255, .05) 62%, transparent 100%);
  }

/* ---- Panels: frosted instrument glass ------------------------------------ */
.card { position: relative;
  background: linear-gradient(180deg, var(--glass) 0%, var(--glass-deep) 100%);
  border: 1px solid var(--hairline-soft); border-radius: var(--r);
  padding: 24px 26px; box-shadow: var(--shadow-sm), var(--edge-lit); }
/* HUD registration ticks: one corner top-left, one bottom-right, every panel */
.card::before { content: ""; position: absolute; top: 8px; left: 8px; width: 12px; height: 12px;
  border-top: 1px solid rgba(140, 210, 255, .6); border-left: 1px solid rgba(140, 210, 255, .6);
  pointer-events: none; }
.card::after { content: ""; position: absolute; bottom: 8px; right: 8px; width: 12px; height: 12px;
  border-bottom: 1px solid rgba(140, 210, 255, .48); border-right: 1px solid rgba(140, 210, 255, .48);
  pointer-events: none; }
.card.flush { padding: 0; overflow: hidden;
  border-color: var(--hairline);
  box-shadow: var(--shadow-sm), var(--edge-lit), 0 0 56px -22px var(--cyan-glow); }
.card.flush::before, .card.flush::after { display: none; }

.grid { display: grid; gap: 18px; }
@media (min-width: 760px) {
  .grid { gap: 22px; }
  .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* ---- Stats: the instrument cluster ----------------------------------------
   Four gauges in one bezel. Mono phosphor numerals, a live caret, and a slow
   altimeter tick-tape crawling along the foot of each cell.                   */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: var(--r); overflow: hidden; margin: 6px 0 10px;
  box-shadow: var(--shadow-sm), 0 0 64px -20px rgba(95, 225, 255, .34); }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 40, 58, .92), rgba(11, 22, 34, .94));
  padding: 22px 24px 32px; }
.stat .n { font-family: var(--mono); font-weight: 620; font-size: 38px; line-height: 1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #edfbff;
  text-shadow: 0 0 24px rgba(95, 225, 255, .5), 0 0 3px rgba(95, 225, 255, .6);
  }
.stat .n::after { content: ""; display: inline-block; width: 7px; height: .56em;
  margin-left: 8px; border-radius: 1px;
  background: linear-gradient(180deg, var(--cyan), rgba(95, 225, 255, .2));
  }
.stat .l { display: block; margin-top: 12px; color: var(--muted); font-family: var(--mono);
  font-size: 12px; text-transform: uppercase; letter-spacing: .15em; font-weight: 600; }
.stat .l::before { content: ""; display: inline-block; width: 12px; height: 1px;
  background: var(--cyan-deep); margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 8px var(--cyan-glow); }
/* the crawling tick-tape */
.stat::after { content: ""; position: absolute; left: 0; right: -72px; bottom: 10px; height: 9px;
  will-change: transform;
  background:
    repeating-linear-gradient(90deg, rgba(140, 210, 255, .6) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(140, 210, 255, .32) 0 1px, transparent 1px 12px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  opacity: .58; }
.stat.hot .n { color: var(--amber-bright);
  text-shadow: 0 0 20px rgba(255, 185, 94, .55), 0 0 3px rgba(255, 185, 94, .65);
  }
.stat.hot .n::after { background: linear-gradient(180deg, var(--amber), rgba(255, 185, 94, .2)); }
.stat.hot .l::before { background: var(--amber-deep); box-shadow: 0 0 8px var(--amber-glow); }
.stat.hot::after { background:
    repeating-linear-gradient(90deg, rgba(255, 195, 110, .65) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255, 195, 110, .36) 0 1px, transparent 1px 12px); }

/* ---- Buttons: actuators ---------------------------------------------------
   Notched corners (cut glass), mono caps, luminous cyan primary. Glow rides a
   drop-shadow filter so it survives the clip-path.                            */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; border: none; border-radius: 0;
  padding: 13px 22px; color: var(--cyan-ink);
  background: linear-gradient(180deg, #a8eeff 0%, #4fd0f8 55%, #35bfec 100%);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  filter: drop-shadow(0 10px 24px rgba(79, 208, 248, .4));
  transition: transform .15s, filter .25s; }
.btn:hover { color: var(--cyan-ink); transform: translateY(-1px);
  filter: drop-shadow(0 14px 32px rgba(79, 208, 248, .55)) brightness(1.07); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: rgba(13, 26, 40, .66); color: #cdf3ff;
  box-shadow: inset 0 0 0 1px rgba(132, 205, 255, .45);
  filter: none; }
.btn.ghost:hover { color: #eefbff; background: rgba(95, 225, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(132, 205, 255, .7);
  filter: drop-shadow(0 8px 22px rgba(95, 225, 255, .25)); transform: translateY(-1px); }
.btn.sm { padding: 9px 14px; font-size: 11.5px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.btn.block { width: 100%; }
/* The booking endgame is a phone call — the call CTA is the loudest control
   in the system: master-caution amber, oversized, thumb-friendly. */
.btn.call { color: var(--amber-ink); font-size: 14px; padding: 16px 26px;
  background: linear-gradient(180deg, var(--amber-bright) 0%, var(--amber) 55%, var(--amber-deep) 100%);
  filter: drop-shadow(0 10px 26px rgba(255, 185, 94, .42)); }
.btn.call:hover { color: var(--amber-ink);
  filter: drop-shadow(0 14px 34px rgba(255, 185, 94, .58)) brightness(1.05); }

/* ---- Badges: annunciator lights ------------------------------------------- */
button.badge { border: 0; cursor: pointer; font: inherit; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 3px; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--hairline-soft); color: #d6e7f4;
  background: rgba(16, 31, 46, .66); }
.badge.crit  { color: var(--amber-bright); background: var(--amber-faint);
  border-color: rgba(224, 148, 51, .65); text-shadow: 0 0 12px var(--amber-glow);
  box-shadow: 0 0 22px -6px var(--amber-glow), inset 0 0 12px rgba(255, 185, 94, .1);
  }
.badge.high  { color: var(--cyan-bright); background: var(--cyan-faint);
  border-color: rgba(43, 178, 230, .6); text-shadow: 0 0 12px var(--cyan-glow);
  box-shadow: 0 0 18px -8px var(--cyan-glow); }
.badge.ok    { color: var(--good); background: var(--good-bg);
  border-color: rgba(125, 240, 174, .45); text-shadow: 0 0 12px var(--good-glow); }
.badge.alarm { color: var(--alarm); background: var(--alarm-bg);
  border-color: rgba(255, 110, 100, .5); }
.badge.digest, .badge.muted { color: var(--muted); background: rgba(14, 28, 42, .6);
  animation: none; }

/* ---- Watch strip: the systems-status line --------------------------------- */
.watch-strip { position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px; padding: 16px 20px;
  border: 1px solid var(--hairline-soft); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(18, 34, 50, .6), rgba(9, 18, 28, .64));
  color: var(--muted); font-size: 15px; margin: 4px 0 30px;
  box-shadow: var(--edge-lit); }
.watch-strip b { color: var(--text); }
.watch-strip .pip { width: 10px; height: 10px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 4px rgba(125, 240, 174, .14), 0 0 16px var(--good-glow); flex: none;
  }
.watch-strip.alarm { border-color: rgba(224, 148, 51, .6); color: var(--text);
  background: linear-gradient(90deg, rgba(255, 185, 94, .14), rgba(9, 18, 28, .64) 55%);
  box-shadow: var(--edge-lit), 0 0 52px -16px var(--amber-glow); }
/* caution hatching on the leading edge */
.watch-strip.alarm::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: repeating-linear-gradient(135deg, rgba(255, 185, 94, .9) 0 6px, rgba(255, 185, 94, .12) 6px 12px); }
.watch-strip.alarm .pip { background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 185, 94, .2), 0 0 18px var(--amber-glow);
  }
/* stale-data caution: amber like alarm, but quieter — a warning, not a find */
.watch-strip.stale { border-color: rgba(224, 148, 51, .45); margin-top: -18px;
  background: linear-gradient(90deg, rgba(255, 185, 94, .08), rgba(9, 18, 28, .64) 45%); }
.watch-strip.stale .pip { background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 185, 94, .14), 0 0 12px var(--amber-glow); }

/* ---- Find hero: the navigation display, target locked ---------------------
   Polar rings + crosshair centered on the destination quadrant, a glowing
   amber lock-core, a big rotating radar beam behind the dotted flight arc,
   corner brackets, an amber lock-on ping. v2: the radar is a LIT instrument —
   brighter rings, a wider hotter sweep, larger ping — so the right half of
   the hero carries real weight.                                              */
.find-hero { --rx: 74%; --ry: 52%;
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid rgba(255, 185, 94, .42);
  padding: 32px clamp(24px, 4vw, 44px) 34px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M1 10V1h9' fill='none' stroke='%23ffb95e' stroke-opacity='.85' stroke-width='1.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M25 10V1h-9' fill='none' stroke='%23ffb95e' stroke-opacity='.85' stroke-width='1.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M1 16v9h9' fill='none' stroke='%23ffb95e' stroke-opacity='.85' stroke-width='1.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M25 16v9h-9' fill='none' stroke='%23ffb95e' stroke-opacity='.85' stroke-width='1.6'/%3E%3C/svg%3E"),
    radial-gradient(circle at var(--rx) var(--ry), rgba(255, 216, 150, .6) 0 5px, rgba(255, 185, 94, .22) 12px, transparent 32px),
    linear-gradient(90deg, transparent calc(var(--rx) - .5px), rgba(140, 210, 255, .28) calc(var(--rx) - .5px), rgba(140, 210, 255, .28) calc(var(--rx) + .5px), transparent calc(var(--rx) + .5px)),
    linear-gradient(0deg, transparent calc(100% - var(--ry) - .5px), rgba(140, 210, 255, .28) calc(100% - var(--ry) - .5px), rgba(140, 210, 255, .28) calc(100% - var(--ry) + .5px), transparent calc(100% - var(--ry) + .5px)),
    repeating-radial-gradient(circle at var(--rx) var(--ry), rgba(140, 210, 255, .2) 0 1px, transparent 1px 54px),
    radial-gradient(62% 86% at var(--rx) var(--ry), rgba(95, 225, 255, .15), transparent 66%),
    radial-gradient(70% 90% at 0% 110%, rgba(255, 170, 70, .1), transparent 58%),
    linear-gradient(180deg, rgba(24, 44, 62, .84), rgba(9, 19, 31, .9));
  background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px),
    calc(100% - 14px) calc(100% - 14px), 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  box-shadow: var(--shadow), var(--edge-lit), 0 0 96px -26px var(--amber-glow);
  margin-bottom: 30px; }
/* the rotating radar beam — bigger and hotter, it owns the right half */
.find-hero::before { content: ""; position: absolute; width: 980px; height: 980px;
  left: calc(var(--rx) - 490px); top: calc(var(--ry) - 490px);
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0deg 248deg,
    rgba(125, 228, 255, .07) 288deg, rgba(155, 238, 255, .24) 330deg,
    rgba(205, 248, 255, .52) 352deg, rgba(240, 253, 255, .75) 360deg);
  -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, .95), rgba(0, 0, 0, .62) 50%, transparent 80%);
  mask: radial-gradient(closest-side, rgba(0, 0, 0, .95), rgba(0, 0, 0, .62) 50%, transparent 80%);
  will-change: transform;
  transform: rotate(0deg); }
/* the lock-on ping at the radar center — double-ring, clearly lit */
.find-hero::after { content: ""; position: absolute; width: 170px; height: 170px;
  left: calc(var(--rx) - 85px); top: calc(var(--ry) - 85px);
  border-radius: 50%; border: 1.5px solid rgba(255, 200, 120, .9);
  box-shadow: 0 0 30px rgba(255, 185, 94, .4), inset 0 0 22px rgba(255, 185, 94, .22);
  pointer-events: none; z-index: 0; will-change: transform, opacity;
  }
body.is-alarm .find-hero { animation: df-rise .7s cubic-bezier(.2, .7, .2, 1) both;
  box-shadow: var(--shadow), var(--edge-lit), 0 0 90px -22px var(--amber-glow); }
.find-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px;
  color: var(--amber-bright); text-shadow: 0 0 16px var(--amber-glow);
  }
.find-hero .eyebrow::before { background: linear-gradient(90deg, var(--amber), transparent); }
.find-hero .route { font-family: var(--mono); font-weight: 680; position: relative;
  font-size: clamp(32px, 5.6vw, 54px); line-height: 1.04; letter-spacing: .015em;
  margin: 16px 0 8px; color: #f0fcff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(95, 225, 255, .4), 0 0 3px rgba(189, 242, 255, .5); }
.find-hero .route .arrow { color: var(--amber); font-weight: 400; padding: 0 .14em;
  text-shadow: 0 0 24px var(--amber-glow); }
.find-hero .when { color: var(--muted); font-family: var(--mono); font-size: 15px;
  letter-spacing: .01em; }
.find-hero .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 20px 0 6px; }
.find-hero .price .pts { font-family: var(--mono); font-size: 31px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--amber-bright); letter-spacing: -.01em;
  text-shadow: 0 0 26px var(--amber-glow), 0 0 3px rgba(255, 217, 156, .6); }
.find-hero .price .per { color: var(--muted); font-family: var(--mono); font-size: 13.5px;
  letter-spacing: .03em; }
.find-hero .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; align-items: center; }
.find-hero .seal { position: absolute; top: 16px; right: 16px; z-index: 1;
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--amber);
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid rgba(255, 185, 94, .55); border-radius: 3px; padding: 5px 10px;
  background: rgba(11, 19, 28, .68); text-shadow: 0 0 10px var(--amber-glow); }
.find-hero .eyebrow, .find-hero .route, .find-hero .when,
.find-hero .price, .find-hero .hero-actions { position: relative; z-index: 1; }

/* ---- Flight arc: route drawn on the nav display ---------------------------
   v2: the dotted trajectory + comet + blips are full instrument brightness.  */
.find-hero .arc { position: absolute; right: -4%; top: 0; height: 100%; width: 74%;
  opacity: 1; z-index: 0; }
.arc-track { fill: none; stroke: rgba(155, 218, 255, .6); stroke-width: 1.7;
  stroke-dasharray: 4 9;
  filter: drop-shadow(0 0 4px rgba(95, 225, 255, .35)); }
.arc-spark { fill: none; stroke: #dcf9ff; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 46 900; filter: drop-shadow(0 0 11px var(--cyan));
  }
.arc-o { fill: var(--cyan); r: 4.5px; filter: drop-shadow(0 0 8px var(--cyan-glow)); }
.arc-d { fill: var(--amber-bright); r: 6px; filter: drop-shadow(0 0 16px var(--amber));
  }

/* ---- Match list cards: contact reports ------------------------------------ */
.match { border-left: 2px solid var(--hairline);
  transition: transform .18s, border-color .2s, box-shadow .25s, background .25s; }
/* missed/expired finds stay in the record but recede from attention */
.match.done { opacity: .55; filter: saturate(.6); }
.match.done:hover { opacity: 1; filter: none; }
.match:hover { transform: translateY(-2px); border-color: rgba(95, 225, 255, .45);
  border-left-color: var(--cyan);
  box-shadow: var(--shadow-sm), var(--edge-lit), 0 0 44px -14px var(--cyan-glow); }
.match.crit { border-left-color: var(--amber);
  box-shadow: var(--shadow-sm), var(--edge-lit), 0 0 40px -14px var(--amber-glow); }
.match.crit:hover { border-left-color: var(--amber-bright);
  box-shadow: var(--shadow-sm), var(--edge-lit), 0 0 52px -12px var(--amber-glow); }
.match.high { border-left-color: var(--cyan-deep); }
.headline { font-family: var(--serif); font-weight: 500; font-size: 19.5px;
  line-height: 1.3; margin: 12px 0 10px; }
.headline a { color: var(--text); } .headline a:hover { color: var(--cyan-bright); }
.meta { color: var(--muted); font-family: var(--mono); font-size: 13px;
  letter-spacing: .01em; display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; }
.meta b { color: var(--text); }

/* ---- Boarding pass: the flight-plan readout ------------------------------- */
.pass { position: relative; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M1 10V1h9' fill='none' stroke='%238cd2ff' stroke-opacity='.75' stroke-width='1.6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M25 10V1h-9' fill='none' stroke='%238cd2ff' stroke-opacity='.75' stroke-width='1.6'/%3E%3C/svg%3E"),
    radial-gradient(80% 120% at 100% -20%, rgba(95, 225, 255, .1), transparent 55%),
    linear-gradient(180deg, rgba(24, 44, 64, .78), rgba(11, 22, 34, .86));
  background-position: 12px 12px, calc(100% - 12px) 12px, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-sm), var(--edge-lit), 0 0 68px -24px var(--cyan-glow);
  overflow: hidden; }
.pass .pass-main { padding: 26px clamp(20px, 4vw, 34px) 24px; }
.pass .pass-route { font-family: var(--mono); font-weight: 660;
  font-size: clamp(26px, 4.5vw, 38px); line-height: 1.08; letter-spacing: .02em;
  color: #f0fcff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(95, 225, 255, .38), 0 0 3px rgba(189, 242, 255, .5); }
.pass .pass-route .arrow { color: var(--amber); padding: 0 .12em;
  text-shadow: 0 0 20px var(--amber-glow); }
.pass .pass-foot { border-top: 1px dashed rgba(140, 210, 255, .4);
  padding: 16px clamp(20px, 4vw, 34px);
  display: flex; gap: 12px 36px; flex-wrap: wrap; background: rgba(4, 10, 17, .55); }
.pass .pass-foot .cell .k { color: var(--faint); font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em; }
.pass .pass-foot .cell .v { color: var(--text); font-family: var(--mono); font-size: 16px;
  font-variant-numeric: tabular-nums; margin-top: 2px; }
/* perforation notches */
.pass::before, .pass::after { content: ""; position: absolute; width: 18px; height: 18px;
  border-radius: 50%; background: var(--bg-0); border: 1px solid var(--hairline);
  left: -10px; }
.pass::before { top: calc(100% - 60px); }
.pass::after { top: calc(100% - 60px); left: auto; right: -10px; }

/* ---- Playbook options: ranked procedures ---------------------------------- */
.option { position: relative; border: 1px solid var(--hairline-soft); border-radius: var(--r);
  padding: 20px 22px; margin-top: 16px;
  background: linear-gradient(180deg, var(--glass) 0%, var(--glass-deep) 100%);
  box-shadow: var(--edge-lit); transition: border-color .2s, box-shadow .25s; }
.option:hover { border-color: rgba(132, 205, 255, .38); }
.option.top { border-color: rgba(95, 225, 255, .55);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(95, 225, 255, .12), transparent 50%),
    linear-gradient(180deg, rgba(26, 48, 70, .76), rgba(11, 22, 34, .84));
  box-shadow: var(--edge-lit), 0 0 64px -20px var(--cyan-glow); }
.option.top::after { content: "PRIMARY"; position: absolute; top: 0; right: 18px;
  transform: translateY(-50%); font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; color: var(--cyan-bright); text-shadow: 0 0 10px var(--cyan-glow);
  background: #0b1a2a; border: 1px solid rgba(95, 225, 255, .55); border-radius: 3px;
  padding: 4px 9px 3px 11px; box-shadow: 0 0 22px -6px var(--cyan-glow); }
.option .o-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.option .o-title { display: flex; align-items: center; gap: 14px; }
.option .o-rank { flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--cyan-ink);
  background: linear-gradient(180deg, #a8eeff, #41c4ef);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  filter: drop-shadow(0 0 12px rgba(95, 225, 255, .4)); }
.option.top .o-rank { color: var(--amber-ink);
  background: linear-gradient(180deg, var(--amber-bright), var(--amber-deep));
  filter: drop-shadow(0 0 14px var(--amber-glow)); }
.option .o-name { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.2; }
.option .o-cost { text-align: right; font-variant-numeric: tabular-nums; }
.option .o-cost b { font-family: var(--mono); font-size: 20px; font-weight: 700;
  color: var(--amber-bright); letter-spacing: -.01em;
  text-shadow: 0 0 18px rgba(255, 185, 94, .35); }
.option .o-line { display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  margin-top: 14px; color: var(--muted); font-family: var(--mono); font-size: 13px;
  letter-spacing: .01em; }
.option .o-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.option .phone { margin-top: 14px; font-family: var(--mono); font-size: 14.5px;
  color: var(--cyan-bright); text-shadow: 0 0 12px rgba(95, 225, 255, .25);
  letter-spacing: .04em; }
.option .phone a { color: inherit; }

/* steps: the procedure checklist — 01 / 02 / 03 ... */
ol.steps { list-style: none; counter-reset: s; margin: 16px 0 0; padding: 0; }
ol.steps li { counter-increment: s; position: relative; padding: 9px 0 9px 42px;
  color: var(--text); font-size: 14.5px; border-top: 1px solid var(--hairline-dim); }
ol.steps li:first-child { border-top: none; }
ol.steps li::before { content: counter(s, decimal-leading-zero); position: absolute;
  left: 0; top: 10px; min-width: 27px; padding: 2px 0; text-align: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--cyan); border: 1px solid rgba(43, 178, 230, .6); border-radius: 3px;
  background: var(--cyan-faint); }
ul.steps { list-style: none; margin: 8px 0 0; padding: 0; color: var(--muted); font-size: 14px; }
ul.steps li { position: relative; padding: 3px 0 3px 18px; }
ul.steps li::before { content: "\25B8"; position: absolute; left: 0; top: 3px;
  color: var(--amber); font-size: 11px; }

.callout { position: relative; overflow: hidden; border: 1px solid rgba(224, 148, 51, .6);
  background: linear-gradient(90deg, rgba(255, 185, 94, .13), rgba(255, 185, 94, .04) 60%);
  border-radius: var(--r-sm); padding: 14px 16px 14px 22px; margin-top: 14px; font-size: 14.5px; }
.callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: repeating-linear-gradient(135deg, rgba(255, 185, 94, .85) 0 6px, rgba(255, 185, 94, .12) 6px 12px); }
.callout b { color: var(--amber-bright); }

/* ---- Tables: data grids as instrument readouts -----------------------------
   v2: fine cyan column gridlines, a lit header strip, faint scan-zebra rows —
   the release-window table reads as part of the console.                      */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
/* Cards clip their corners (overflow:hidden), which silently amputated table
   columns on phones — every table gets a scroll viewport instead. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 520px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline-dim); }
th + th, td + td { border-left: 1px solid var(--hairline-dim); }
th { color: #9fdcf6; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .14em; font-weight: 700; border-bottom: 1px solid var(--hairline);
  background: rgba(95, 225, 255, .06); text-shadow: 0 0 10px rgba(95, 225, 255, .2); }
td b { color: var(--text); }
tbody tr { transition: background .15s; }
tbody tr:nth-child(even) td { background: rgba(140, 210, 255, .035); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(95, 225, 255, .08); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--cyan); }
td.tnum, td .tnum { font-variant-numeric: tabular-nums; font-family: var(--mono);
  font-size: 13.5px; color: #d9efff; }
td.mono { color: var(--muted); }
/* readout framing inside flush panels */
.card.flush th:first-child, .card.flush td:first-child { padding-left: 18px; }
.card.flush th:last-child,  .card.flush td:last-child  { padding-right: 18px; }

/* ---- Forms: input consoles ------------------------------------------------- */
label { display: block; color: var(--muted); font-family: var(--mono); font-size: 12px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .13em; margin: 16px 0 7px; }
input, select, textarea { width: 100%; font-family: var(--sans); font-size: 15px;
  color: var(--text); background: rgba(6, 13, 21, .78);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); padding: 11px 13px;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .2s, background .2s; }
input::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none;
  border-color: rgba(95, 225, 255, .7); background: rgba(9, 19, 30, .88);
  box-shadow: 0 0 0 3px rgba(95, 225, 255, .16), 0 0 26px -8px var(--cyan-glow); }
select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238cd2ff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.help { color: var(--muted); font-size: 13.5px; margin-top: 7px; }
.flash { padding: 12px 16px; border-radius: var(--r-sm); margin: 16px 0;
  border: 1px solid var(--hairline-soft); border-left: 3px solid var(--cyan);
  background: rgba(16, 31, 46, .66); color: var(--muted); font-family: var(--mono); font-size: 13.5px; }

/* ---- Misc utilities -------------------------------------------------------- */
.row-between { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.kv { color: var(--muted); font-size: 15px; margin: 8px 0; }
.kv b { color: var(--text); }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.dot.on { background: var(--good);
  box-shadow: 0 0 0 3px rgba(125, 240, 174, .16), 0 0 14px var(--good-glow);
  }
.dot.off { background: var(--faint); }
hr.sep { border: none; height: 1px; margin: 24px 0;
  background: linear-gradient(90deg, var(--cyan-deep), var(--hairline) 14%,
    var(--hairline-dim) 60%, transparent); }
.login-wrap { max-width: 420px; margin: 11vh auto 0; }
.login-wrap .card { box-shadow: var(--shadow), var(--edge-lit), 0 0 100px -32px var(--cyan-glow); }
.stack-gap > * + * { margin-top: 10px; }

/* ---- Immersive desktop scale ----------------------------------------------- */
@media (min-width: 1100px) {
  .find-hero { padding: 54px clamp(40px, 4.4vw, 64px) 56px; }
  .find-hero .route { font-size: clamp(46px, 4.6vw, 66px); }
  .find-hero .price .pts { font-size: 38px; }
  .find-hero .when { font-size: 15.5px; }
  .find-hero .seal { top: 22px; right: 22px; }
  .find-hero::before { width: 1280px; height: 1280px;
    left: calc(var(--rx) - 640px); top: calc(var(--ry) - 640px); }
  .find-hero::after { width: 200px; height: 200px;
    left: calc(var(--rx) - 100px); top: calc(var(--ry) - 100px); }
  .stat { padding: 30px 32px 40px; }
  .stat .n { font-size: 48px; }
  .stat .l { margin-top: 14px; font-size: 12.5px; }
  h2 { font-size: 30px; margin-top: 58px; }
  .watch-strip { font-size: 16.5px; padding: 19px 25px; }
  .option { padding: 26px 30px; }
  .pass .pass-route { font-size: clamp(34px, 3.4vw, 44px); }
  .pass .pass-main { padding: 34px clamp(28px, 3.4vw, 44px) 30px; }
  .meta { font-size: 14px; }
  table { font-size: 15.5px; }
  th, td { padding: 13px 16px; }
}

/* ---- Entrance: the deck powers up ------------------------------------------ */
.find-hero, .watch-strip, .stats, .pass { animation: df-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.container > h2 { animation: df-rise .5s ease both; }
.grid > * { animation: df-rise .55s ease both; }
.grid > *:nth-child(2) { animation-delay: .07s; }
.grid > *:nth-child(3) { animation-delay: .14s; }
.grid > *:nth-child(4) { animation-delay: .21s; }
.grid > *:nth-child(5) { animation-delay: .28s; }
.grid > *:nth-child(n+6) { animation-delay: .34s; }
.stat:nth-child(2) { animation: df-rise .55s ease .06s both; }
.stat:nth-child(3) { animation: df-rise .55s ease .12s both; }
.stat:nth-child(4) { animation: df-rise .55s ease .18s both; }
.option { animation: df-rise .55s ease both; }
.option:nth-of-type(2) { animation-delay: .08s; }
.option:nth-of-type(3) { animation-delay: .16s; }
.option:nth-of-type(4) { animation-delay: .24s; }

/* ---- Motion ----------------------------------------------------------------- */
@keyframes df-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes df-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes df-ping { 0% { transform: scale(.1); opacity: 1; }
  70% { opacity: .18; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes df-scan { from { transform: translateY(-28vh); } to { transform: translateY(118vh); } }
@keyframes df-horizon { from { transform: rotate(-.7deg) translateY(-6px); }
  to { transform: rotate(.7deg) translateY(8px); } }
@keyframes df-drift1 { 0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 6vh) scale(1.14); } }
@keyframes df-drift2 { 0%, 100% { transform: translate(0, 0) scale(1.04); }
  50% { transform: translate(-6vw, -7vh) scale(1.18); } }
@keyframes df-drift3 { 0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5vw, -5vh) scale(1.16); } }
@keyframes df-tape { to { transform: translateX(-72px); } }
@keyframes df-caret { 0%, 100% { opacity: .65; } 50% { opacity: .12; } }
/* PERF: these used to animate text-shadow, which repaints the glyphs on the
   main thread every frame, forever. The glow is now static (the brighter mid
   value) and the 'breathing' comes from an opacity pulse — compositor-only. */
@keyframes df-phosphor { 0%, 100% { opacity: 1; } 50% { opacity: .84; } }
@keyframes df-phosphor-hot { 0%, 100% { opacity: 1; } 50% { opacity: .8; } }
@keyframes df-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes df-pip-alarm { 0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.82); } }
@keyframes df-annunciator { 0%, 100% { opacity: 1; } 50% { opacity: .68; } }
@keyframes df-rail { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes df-beacon { 0%, 86%, 100% { opacity: 1; } 91% { opacity: .25; } 96% { opacity: 1; } }
/* PERF: was a box-shadow pulse on the (huge) hero panel — a full-panel repaint
   every frame. Static glow now; the pip, rail and annunciators still breathe. */
@keyframes df-hero-pulse {
  from, to { box-shadow: var(--shadow), var(--edge-lit), 0 0 90px -22px var(--amber-glow); } }
@keyframes df-fly { from { stroke-dashoffset: 930; } to { stroke-dashoffset: 0; } }
@keyframes df-dot { 0%, 100% { r: 6px; opacity: 1; } 50% { r: 10px; opacity: .6; } }

/* ---- Reduced motion: park every instrument ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aurora::after { display: none; }          /* parked scan band would strand mid-screen */
  .find-hero::before { display: none; }      /* frozen radar beam */
  .find-hero::after { display: none; }       /* frozen ping ring */
}

/* ---- Release timeline (R14): one card per night, phone-first stacking ----- */
.timeline { display: flex; flex-direction: column; gap: 10px; }
.tl-night { display: flex; gap: 18px; align-items: center; padding: 14px 18px;
  border: 1px solid var(--hairline-soft); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(18, 34, 50, .5), rgba(9, 18, 28, .56)); }
.tl-when { flex: none; width: 92px; text-align: center;
  border-right: 1px solid var(--hairline-dim); padding-right: 16px; }
.tl-day { font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); }
.tl-date { font-family: var(--serif); font-size: 22px; color: var(--text); line-height: 1.2; }
.tl-time { font-size: 12px; color: var(--muted); }
.tl-body { min-width: 0; }
.tl-unlocks { font-size: 15px; color: var(--muted); }
.tl-unlocks b { color: var(--text); }
.tl-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
/* tonight/next night gets the powered edge; a window-hit night goes amber */
.tl-next { border-color: rgba(95, 225, 255, .4); box-shadow: var(--edge-lit); }
.tl-hit { border-color: rgba(224, 148, 51, .55);
  background: linear-gradient(90deg, rgba(255, 185, 94, .1), rgba(9, 18, 28, .56) 50%); }

/* ---- Availability history dot strips (R15) -------------------------------- */
.hist-row { display: flex; align-items: center; gap: 14px; padding: 9px 0;
  border-top: 1px solid var(--hairline-dim); }
.hist-row:first-child { border-top: 0; padding-top: 2px; }
.hist-label { flex: none; width: 120px; font-size: 12.5px; color: var(--muted); }
.hist-strip { display: flex; gap: 3px; flex-wrap: wrap; min-width: 0; }
.hist-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  background: rgba(132, 205, 255, .08); }
.hist-dot.checked { background: rgba(132, 205, 255, .22); }
.hist-dot.seen { background: var(--cyan-deep); }
.hist-dot.hit { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
.hist-count { flex: none; margin-left: auto; font-size: 12.5px; color: var(--faint); }

/* Countdown digits tick every second — tabular figures keep the width steady
   so the line never reflows (a per-second layout shift reads as "jumping"). */
[data-countdown] { font-variant-numeric: tabular-nums; }



/* ---- Ambient motion, two tiers (perf-adaptive) ----------------------------
   Measured in Firefox software compositing (VM, no real GPU):
   - SMALL animations (pips, caret, annunciators, rail, phosphor breathing)
     cost nothing now that backdrop-filter is gone -> always on, fully smooth.
   - LARGE effects (radar sweep, lock ping, scan band, aurora drift, tape) and
     the frosted backdrop blur cost 40-140ms/frame in software -> gated behind
     html.fx-rich, set by app.js after a one-time frame-rate probe (cached in
     localStorage). GPU-composited browsers get the full show; software ones
     keep the smooth essentials. prefers-reduced-motion disables both tiers. */

/* tier 1 — always on */
.dot.on, .watch-strip .pip { animation: df-breathe 3.4s ease-in-out infinite; }
.watch-strip.alarm .pip { animation: df-pip-alarm 1.6s ease-in-out infinite; }
.stat .n::after { animation: df-caret 2.8s ease-in-out infinite; }
.badge.crit, .find-hero .eyebrow { animation: df-annunciator 3.4s ease-in-out infinite; }
.brand .mark { animation: df-beacon 6s ease-in-out infinite; }
body::after, body.is-alarm .topbar::after { animation: df-rail 2.8s ease-in-out infinite; }
.stat .n { animation: df-phosphor 8s ease-in-out infinite; }
.stat.hot .n { animation: df-phosphor-hot 8s ease-in-out infinite; }

/* tier 2 — the full glass cockpit, where the compositor can afford it */
html.fx-rich { --glass: rgba(24, 44, 64, .62); --glass-deep: rgba(13, 26, 40, .72); }
html.fx-rich .find-hero::before { animation: df-sweep 13s linear infinite; }
html.fx-rich .find-hero::after { animation: df-ping 4.2s cubic-bezier(.2, .6, .3, 1) infinite; }
html.fx-rich .aurora::after { animation: df-scan 16s linear infinite; }
html.fx-rich .aurora .a1 { animation: df-drift1 26s ease-in-out infinite; }
html.fx-rich .aurora .a2 { animation: df-drift2 34s ease-in-out infinite; }
html.fx-rich .aurora .a3 { animation: df-drift3 41s ease-in-out infinite; }
html.fx-rich .aurora::before { animation: df-horizon 19s ease-in-out infinite alternate; }
html.fx-rich .stat::after { animation: df-tape 12s linear infinite; }
html.fx-rich .topbar { backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
html.fx-rich .tabbar { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
html.fx-rich .card { backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); }
html.fx-rich .btn.ghost { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html.fx-rich .watch-strip { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html.fx-rich .find-hero { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
html.fx-rich .pass { backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); }
html.fx-rich .option { backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }