/* ==========================================================================
   KSU Radar — product interface and verified-fact margin

   The interface has two voices and they never mix.

   THE RECORD is the university's: course, section, instructor, days, time,
   room, open/closed, history. It is neutral, precise and calm. Radar does not
   colour it, box it, badge it or decorate it. It is set, not styled.

   THE MARGIN is Radar's. It lives in a fixed rail on the inline-start of every
   entry and nowhere else. It is the only place the annotation colour appears,
   and it says one thing: Radar noticed something. Importance escalates by
   MASS — no mark, a thin rule, a rule with a reference mark, a block — never
   by adding hues.

   Product surfaces may use restrained elevation where hierarchy requires it;
   the margin rail remains the vocabulary for verified changes. Arabic mixed
   strings never use a monospace stack.

   Light and dark are the same product. Only the appearance changes.
   Tokens and rules are documented in DESIGN.md; change them there too.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Ground and record ------------------------------------------------ */
  --paper: #f7f5f2;
  --field: #ffffff;          /* only inputs, sheets and buttons get a surface */
  --sunken: #efece7;

  --ink: #1c1f23;            /* the record's voice */
  --ink-2: #42464b;
  --ink-3: #5c6570;          /* muted metadata */

  --rule: rgba(28, 31, 35, 0.13);
  --rule-2: rgba(28, 31, 35, 0.24);

  /* ---- KSU Radar navy — the product's own brand colour, not the
          university's. Identity, links, navigation, primary action. --------- */
  --navy: #0f2d4d;
  --navy-2: #1d4570;
  --navy-soft: rgba(15, 45, 77, 0.07);
  --on-navy: #f7f5f2;

  /* ---- Radar saffron — the annotation. The identity tone is #E9B44A; on
          paper it only reaches 1.7:1, so light uses two darker steps of the
          same hue: one that carries mass, one that can carry text. ---------- */
  --saffron: #b5822a;        /* margin mass — 3.1:1 on paper */
  --saffron-ink: #8a6410;    /* annotation text — 4.9:1 on paper */
  --saffron-soft: rgba(181, 130, 42, 0.13);
  --on-saffron: #1c1508;

  --error: #a3302b;
  --error-soft: rgba(163, 48, 43, 0.10);

  /* Elevation is flat on paper: the light theme gets its depth from rules. */
  --lift: none;
  --header-bg: color-mix(in srgb, var(--paper) 90%, transparent);
  --btn-bg: var(--navy);
  --btn-fg: var(--on-navy);
  --btn-edge: transparent;
  /* A page wash. On paper it is nothing at all. */
  --wash: transparent;
  --opp-wash: transparent;

  /* ---- Type. Arabic first, and no monospace anywhere: a mono stack has no
          Arabic, so `نال 201` falls through it and shapes badly. Numerals are
          tabular inside the text family instead. ---------------------------- */
  --font-ui: "Cairo", "SF Arabic", "Dubai", "Noto Sans Arabic", "Segoe UI Variable Text",
             "Segoe UI", Inter, system-ui, sans-serif;
  --font-display: "Rethink Sans", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  /* The wordmark's serif channel. No webfont is loaded: the board's Playfair
     is used when a machine already has it, and Georgia carries it otherwise. */
  --font-serif: "Playfair Display", "Source Serif 4", Georgia, "Times New Roman", serif;

  --t-display: clamp(1.95rem, 1.28rem + 2.85vw, 2.85rem);
  --t-title: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
  --t-head: 1rem;
  --t-body: 0.9375rem;
  --t-label: 0.8125rem;
  --t-meta: 0.75rem;

  --lh-display: 1.36;
  --lh-tight: 1.4;
  --lh-normal: 1.62;

  /* ---- Space ------------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* The rail. Wide enough to hold a reference mark, narrow enough that it
     never taxes a 390px screen — tuned optically, not from a wireframe. */
  --rail: 1.625rem;

  /* Radius exists only where something is interactive. The record is square. */
  --r: 5px;
  --r-lg: 10px;

  --shadow-sheet: 0 -10px 44px rgba(20, 18, 14, 0.20);
  --shadow-pop: 0 8px 26px rgba(20, 18, 14, 0.16);

  --content: 62rem;
  --header-h: 3.375rem;
  --nav-h: 3.75rem;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast: 130ms;
  --calm: 230ms;

  font-family: var(--font-ui);
  font-synthesis: none;
}

/* Graphite reading mode. Same product, same structure, warm paper at night —
   not a navy SaaS shell. Every token below is a sibling of the one above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Graphite carries a trace of the brand navy rather than sitting neutral,
       so the ground reads as a night reading surface instead of grey. The
       three steps are a page, an interactive plane, and a hover. */
    --paper: #11151b;
    --field: #1a212a;
    --sunken: #161c24;
    --ink: #ede9e3;
    --ink-2: #b4bac2;
    --ink-3: #9aa1aa;
    --rule: rgba(214, 225, 240, 0.13);
    --rule-2: rgba(214, 225, 240, 0.23);
    --navy: #7fa8ce;
    --navy-2: #9cbfdd;
    --navy-soft: rgba(127, 168, 206, 0.12);
    --on-navy: #0c1b2b;
    /* On graphite the identity saffron clears 9.4:1, so it needs no steps. */
    --saffron: #e9b44a;
    --saffron-ink: #e9b44a;
    --saffron-soft: rgba(233, 180, 74, 0.15);
    --on-saffron: #1a1508;
    --error: #e8837c;
    --error-soft: rgba(232, 131, 124, 0.13);
    /* Interactive planes get a one-pixel top highlight: enough to separate a
       control from the page without a shadow or a glow. */
    --lift: inset 0 1px 0 rgba(226, 236, 250, 0.055);
    --header-bg: color-mix(in srgb, #161d26 92%, transparent);
    --shadow-sheet: 0 -18px 56px rgba(0, 0, 0, 0.62);
    --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}

/* The explicit toggle. Values must stay identical to the media-query block
   above — change both together. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #11151b;
  --field: #1a212a;
  --sunken: #161c24;
  --ink: #ede9e3;
  --ink-2: #b4bac2;
  --ink-3: #9aa1aa;
  --rule: rgba(214, 225, 240, 0.13);
  --rule-2: rgba(214, 225, 240, 0.23);
  --navy: #7fa8ce;
  --navy-2: #9cbfdd;
  --navy-soft: rgba(127, 168, 206, 0.12);
  --on-navy: #0c1b2b;
  --saffron: #e9b44a;
  --saffron-ink: #e9b44a;
  --saffron-soft: rgba(233, 180, 74, 0.15);
  --on-saffron: #1a1508;
  --error: #e8837c;
  --error-soft: rgba(232, 131, 124, 0.13);
  --lift: inset 0 1px 0 rgba(226, 236, 250, 0.055);
  --header-bg: color-mix(in srgb, #161d26 92%, transparent);
  /* On graphite the primary action is a deep navy plane with light ink, not a
     pale fill: a bright button on a dark reading page shouts. */
  --btn-bg: #1e4470;
  --btn-fg: #e7eef6;
  --btn-edge: rgba(226, 236, 250, 0.14);
  /* Two washes, both at the edge of perception: the page loses a couple of
     percent of luminance as it falls, and the opportunity sits on a navy
     plane that fades out rather than a card. */
  --wash: linear-gradient(180deg, rgba(126, 160, 200, 0.045), transparent 46rem);
  /* Anchored at the rail edge (inline-start is the right in this RTL product)
     and radial, so it falls away on every side. A linear wash left a visible
     rectangle edge on a wide screen. */
  --opp-wash: radial-gradient(115% 130% at 100% 46%, rgba(126, 160, 200, 0.075), transparent 68%);
  --shadow-sheet: 0 -18px 56px rgba(0, 0, 0, 0.62);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* The mark's two colours. Navy on paper, paper on graphite; the signal is the
   identity saffron #E9B44A in both — a logotype is exempt from text-contrast
   rules, and the darkened UI step would make the light lockup muddier than the
   approved reference. Geometry never changes. */
:root { --mark-ink: var(--navy); --mark-signal: #e9b44a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --mark-ink: var(--ink); }
}
:root[data-theme="dark"] { --mark-ink: var(--ink); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* The ground is flat. If the product only looks like itself when a pattern is
   switched on, the pattern was doing the work. */
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--wash), var(--paper);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Arabic is never tracked — the letters join, and tracking fights the shaper. */
h1, h2, h3, h4 {
  margin: 0; line-height: var(--lh-tight);
  font-weight: 700; letter-spacing: 0; text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--r); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: var(--s-4); top: -4rem;
  background: var(--field); color: var(--ink); padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule-2); border-radius: var(--r); z-index: 100;
  min-height: 2.75rem;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: var(--s-3); }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.0625rem; height: 1.0625rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Every numeral that identifies or measures something: tabular, in the text
   family, with a touch of tracking so digits sit apart from Arabic. */
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.015em;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

/* The header is its own plane: a shade off the page in graphite, a precise
   hairline beneath it, and nothing else. */
.app-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  height: 100%; max-width: var(--content); margin: 0 auto;
  padding: 0 var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}

/* Brand mark. --mark-ink is the shield, palm and chevrons; --mark-signal is
   always Radar Saffron. Only those two move between themes — the geometry is
   identical everywhere the mark appears. */
.brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-mark { width: 1.63rem; height: 2.25rem; display: block; }
.brand-mark svg { width: 100%; height: 100%; display: block; }

/* Wordmark: KSU in the serif channel, Radar in the sans one, on one line,
   with the saffron rule under KSU only — as drawn on the brand board.
   `direction: ltr` because this is a Latin lockup: inside an RTL document a
   plain inline-flex renders it "Radar KSU". */
.brand-name {
  display: inline-flex; align-items: baseline; gap: 0.3em;
  direction: ltr;
  font-size: 0.9375rem; line-height: 1.1;
}
.brand-ksu {
  font-family: var(--font-serif);
  font-weight: 700; letter-spacing: 0.01em;
  border-bottom: 2px solid var(--saffron);
  padding-bottom: 2px;
}
.brand-name .brand-radar { font-weight: 500; letter-spacing: 0.005em; color: var(--ink-2); }

.header-spacer { flex: 1; }
.desktop-nav { display: none; }

/* Icon-only controls carry real actions — closing a sheet, deleting a watch —
   and an icon that reads at 17px still needs a target a thumb can hit. */
.icon-button {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; color: var(--ink-3);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.icon-button:hover { color: var(--ink); background: var(--sunken); }

.app-main { max-width: var(--content); margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-7); }

/* Bottom navigation. Five destinations, text-led. The selected one is marked
   the way Radar marks everything else: an annotation rule under the label. */
.bottom-nav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--rule);
}
.bottom-nav a {
  display: grid; place-items: center; align-content: center; gap: 0.1875rem;
  font-size: 0.6875rem; font-weight: 600; color: var(--ink-3);
  transition: color var(--fast) var(--ease);
}
.bottom-nav .icon { width: 1.0625rem; height: 1.0625rem; opacity: 0.75; }
.bottom-nav a span { position: relative; padding-bottom: 3px; }
.bottom-nav a[aria-current="page"] { color: var(--ink); }
.bottom-nav a[aria-current="page"] .icon { opacity: 1; }
.bottom-nav a[aria-current="page"] span::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0;
  height: 2px; background: var(--saffron);
}

/* --------------------------------------------------------------------------
   Type utilities
   -------------------------------------------------------------------------- */

.eyebrow { font-size: var(--t-meta); font-weight: 650; color: var(--ink-3); }
.page-title { font-size: var(--t-title); }
.display { font-size: var(--t-display); font-weight: 700; line-height: var(--lh-display); }
.display .display-soft { color: var(--ink-2); font-weight: 600; }
.lede { color: var(--ink-2); font-size: 1rem; max-width: 34ch; }
.meta { font-size: var(--t-meta); color: var(--ink-3); }
.label { font-size: var(--t-label); color: var(--ink-2); }

/* A heading and the rule that carries it to the edge of the column. This is
   the only grouping device the record needs. */
.page-head, .block-head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.page-head { margin-bottom: var(--s-5); }
.page-head::after, .block-head::after {
  content: ""; order: 1; flex: 1; height: 1px; background: var(--rule);
}
.page-head > *, .block-head > * { order: 0; }
.page-head > :not(h1):not(.page-title), .block-head > :not(h2) { order: 2; }
.block-head h2 { font-size: var(--t-head); white-space: nowrap; }

/* --------------------------------------------------------------------------
   THE MARGIN — the rail, and the marks Radar leaves in it
   -------------------------------------------------------------------------- */

/* Every row in the product is an entry: a rail, then the record. */
/* rail · record · trailing control. The third track collapses to zero when an
   entry has no control, so a plain row and a row with a pause button compose
   identically instead of the control wrapping onto a line of its own. */
.entry {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) auto;
  gap: 0 var(--s-2);
  padding: var(--s-3) 0;
  align-items: start;
  position: relative;
}
.entries > .entry + .entry { border-top: 1px solid var(--rule); }
a.entry, button.entry { cursor: pointer; text-align: start; }
a.entry:hover .rec-name, button.entry:hover .rec-name { color: var(--navy); }
/* Hover reaches just past the rail so the whole entry lights, not a boxed row. */
a.entry, .sec { transition: background var(--fast) var(--ease); }
a.entry:hover, .sec:hover { background: var(--sunken); }

/* The mark. Mass is the whole grammar:
     (nothing)  ordinary
     2px        watching
     2px + ✳/†  changed
     5px        open, actionable
    10px        the one opportunity on the screen               */
.mk {
  grid-column: 1; grid-row: 1 / -1;
  justify-self: start; align-self: stretch;
  width: 2px; min-height: 1.25rem;
  background: var(--saffron);
  border-radius: 1px;
}
.mk--open { width: 5px; }
.mk--now { width: 10px; }
/* An unmarked entry still occupies the rail. Without this the record's first
   cell falls into the rail column and every reading in a six-column section
   row shifts by one. Silence still needs its slot. */
.mk--none { background: none; min-height: 0; }
/* A reference mark rather than a rule: the timeline's grammar is scholarly,
   not a feed. ✳ is availability, † is a metadata change. */
.mk--note {
  width: auto; background: none; align-self: start;
  font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3);
  font-weight: 700;
}
.mk--note.is-major { color: var(--saffron-ink); }

/* --------------------------------------------------------------------------
   THE RECORD — the university's data, set and never decorated
   -------------------------------------------------------------------------- */

.rec { grid-column: 2; min-width: 0; display: grid; gap: 3px; }
.rec-code { font-size: var(--t-label); font-weight: 650; color: var(--ink-2); }
.rec-name { font-size: var(--t-body); font-weight: 650; color: var(--ink);
  transition: color var(--fast) var(--ease); overflow-wrap: anywhere; }
.rec-meta { font-size: var(--t-meta); color: var(--ink-3); overflow-wrap: anywhere; }
.rec-line { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }

/* Facts wrap. Nothing the student needs is ever truncated. */
.rec-facts {
  display: flex; flex-wrap: wrap; gap: 0.125rem var(--s-3);
  font-size: var(--t-meta); color: var(--ink-2); min-width: 0;
}
.rec-facts > span { display: inline-flex; align-items: center; gap: 0.3125rem; min-width: 0; }
.rec-facts .icon { width: 0.8125rem; height: 0.8125rem; color: var(--ink-3); flex: none; }
.fact-text { min-width: 0; overflow-wrap: anywhere; }

/* Status is a factual word in the record, not a badge. Open earns weight and
   the annotation tone; closed stays a quiet fact at near-zero visual cost. */
.rec-state { font-size: var(--t-label); white-space: nowrap; }
.rec-state[data-state="open"] { color: var(--saffron-ink); font-weight: 700; }
.rec-state[data-state="closed"] { color: var(--ink-3); font-weight: 450; }
.rec-state[data-state="unknown"] { color: var(--ink-3); font-weight: 450; }
.unknown-value { color: var(--ink-3); font-style: normal; }
.unknown-value::before { content: "—"; margin-inline-end: 0.25rem; }

/* A field nobody has asked the university about yet. Deliberately not the
   em-dash above: "the source published nothing" and "we have not looked" are
   different facts, and a student who cannot tell them apart is being misled. */
.pending-value { color: var(--ink-3); opacity: 0.6; }
/* A slot nobody has asked about yet. Quieter than an absence the university
   actually declared, and never an ellipsis — a permanent "…" reads as a load
   that never finished. The card carries one sentence naming the state. */
.not-fetched { color: var(--ink-3); opacity: 0.45; }
.sec-disclose { display: flex; align-items: baseline; gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
.sec-pending-note { font-size: var(--t-meta); color: var(--ink-3); order: 2; }

/* The per-section detail disclosure. One request per section per cache
   window, so it stays closed until a student actually wants it. */
.sec-more {
  appearance: none; background: none; border: 0; padding: 0;
  margin-block-start: 0.25rem;
  font: inherit; font-size: var(--t-label); color: var(--ink-2);
  text-align: start; /* a button centres by default; every other reading starts */
  text-decoration: underline; text-underline-offset: 0.2em;
  cursor: pointer; min-height: 2.75rem;
}
.sec-more:hover { color: var(--ink-1); }
.sec-panel { margin-block-start: var(--s-2); }
.sec-panel-facts { display: grid; gap: var(--s-2); font-size: var(--t-meta); }
.sec-panel-facts > div { display: grid; gap: 0.125rem; }
.sec-panel-facts dt { color: var(--ink-3); font-size: var(--t-label); }
.sec-panel-facts dd { margin: 0; color: var(--ink-1); overflow-wrap: anywhere; }
.sec-meetings { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.sec-meetings li {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.25rem var(--s-2); min-width: 0;
}
.meet-day { color: var(--ink-1); font-weight: 550; }
.quiet { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Sections — the comparison the course page exists for
   -------------------------------------------------------------------------- */

.section-head { display: none; }
.sec-head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.sec-no { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.sec-kind { font-size: 0.6875rem; color: var(--ink-3); }
/* The status word sits at the far end of the number line on a phone; in the
   table it becomes its own column instead. */
.sec-head .rec-state { margin-inline-start: auto; }
/* Open sections are separated from closed ones by a rule, not by a colour. */
.sec-split { border-top: 2px solid var(--rule-2) !important; }

/* Selection lives in the rail, where every other margin mark lives. The label
   is the touch target, not the 17px box inside it. */
.sec-pick {
  grid-column: 1; grid-row: 1 / -1; align-self: start; justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  /* The label is the target, not the box inside it. It reaches back over the
     rail's own padding rather than widening the rail, so the six-column
     section table keeps its measure. */
  min-width: 2.75rem; min-height: 2.75rem;
  margin-block-start: calc(var(--s-2) * -1);
  margin-inline-start: calc(var(--s-2) * -1);
  cursor: pointer;
}
.sec-pick input { accent-color: var(--navy); width: 1.125rem; height: 1.125rem; cursor: pointer; }
.sec-pick input:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
/* A chosen row is marked three ways — the tick, a weight change, and a rule in
   the margin — so it never depends on one of them being perceivable. */
.sec[data-selected="true"] { background: var(--navy-soft); }
.sec[data-selected="true"] .sec-no { color: var(--navy); }
.sec[data-selected="true"] .sec-pick { box-shadow: inset 2px 0 0 var(--navy); }

/* The action for what has been chosen. Above the bottom navigation, never
   across it, and it takes the safe area into account on a notched phone. */
.selection-bar[hidden] { display: none; }
.selection-bar {
  position: fixed; inset-inline: 0; z-index: 50;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  background: var(--field); border-top: 1px solid var(--rule-2);
  box-shadow: var(--shadow-pop);
  /* Opacity only. `rise` animates a transform, and a transform that has not
     finished — or never started, because the bar was display:none until the
     moment it appeared — leaves the bar sitting 12px lower than it was placed,
     which is directly on top of the bottom navigation. The one thing this bar
     must never do is cover the thing it sits above, so its geometry does not
     depend on an animation having run. */
  animation: fade var(--calm) var(--ease);
}
.selection-count { flex: 1; min-width: 6rem; font-size: var(--t-label); font-weight: 650; color: var(--ink-2); }
.selection-bar .btn { min-height: 2.75rem; }
/* The bar is fixed, so the last section would otherwise sit under it. */
body[data-selecting="true"] .app-main { padding-bottom: var(--s-8); }

/* --------------------------------------------------------------------------
   The opportunity — the one place mass reaches 10px
   -------------------------------------------------------------------------- */

/* The signature moment. Structural mass in the margin carries it; on graphite
   a navy plane fades out behind the record so the block has presence without
   becoming a card or a glow. */
.opp {
  padding: var(--s-3) var(--s-4) var(--s-5) 0;
  margin-bottom: var(--s-2);
  background: var(--opp-wash);
}
.opp .rec { gap: var(--s-1); }
.opp-eyebrow {
  font-size: var(--t-meta); font-weight: 700; color: var(--saffron-ink);
}
.opp-title { font-size: var(--t-title); margin-top: 2px; }
.opp-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }

/* Live indicator: the only perpetual motion, and it means "monitoring runs". */
.pulse { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--saffron); position: relative; flex: none; }
.pulse::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--saffron); opacity: 0;
  animation: ping 2.8s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.7; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.pulse-idle { background: var(--ink-3); }
.pulse-idle::after { animation: none; }
.freshness {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: var(--s-7); font-size: var(--t-meta); color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Timeline — scholarly reference marks, no pipe, no cards
   -------------------------------------------------------------------------- */

.tl-day {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-5) 0 var(--s-2);
  font-size: var(--t-label); font-weight: 650; color: var(--ink-2);
}
.tl-day::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.ev-head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.ev-time { font-size: var(--t-meta); color: var(--ink-3); }
.ev-kind { font-size: var(--t-body); font-weight: 650; }
.ev[data-weight="major"] .ev-kind { color: var(--saffron-ink); }
.ev-change { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; font-size: var(--t-label); }
.ev-change .from { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.ev-change .arrow { color: var(--ink-3); }
.ev-change .to { color: var(--ink); font-weight: 650; }

/* --------------------------------------------------------------------------
   Controls — the only things allowed a surface
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 2.75rem; padding: 0 var(--s-4);
  border-radius: var(--r); border: 1px solid transparent;
  font-size: var(--t-body); font-weight: 650; cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--btn-bg); color: var(--btn-fg);
  border-color: var(--btn-edge); box-shadow: var(--lift);
}
.btn-primary:hover { background: color-mix(in srgb, var(--btn-bg) 86%, var(--ink)); }
/* The opportunity's action is the only saffron fill in the product. */
.btn-open { background: var(--saffron); color: var(--on-saffron); }
.btn-open:hover { filter: brightness(1.07); }
.btn-primary:active, .btn-open:active, .btn-quiet:active { transform: translateY(1px); }
.btn-quiet { background: var(--field); border-color: var(--rule-2); color: var(--ink); box-shadow: var(--lift); }
.btn-quiet:hover { border-color: var(--ink-3); }
.btn-ghost { background: none; color: var(--ink-3); min-height: 2rem; padding: 0 var(--s-1); font-size: var(--t-label); }
.btn-ghost:hover { color: var(--navy); }
.btn-block { width: 100%; }
.btn-sm { min-height: 2.125rem; font-size: var(--t-label); padding: 0 var(--s-3); }

/* An inline text action with a rule under it — the editorial alternative to a
   second filled button. */
.act {
  font-size: var(--t-label); font-weight: 650; color: var(--navy);
  border: 0; background: none; padding: 0; cursor: pointer;
  border-bottom: 1.5px solid var(--navy-soft);
  transition: border-color var(--fast) var(--ease);
}
.act:hover { border-bottom-color: var(--navy); }

.field { display: grid; gap: var(--s-2); }
.field > span { font-size: var(--t-label); color: var(--ink-2); font-weight: 600; }
.input {
  width: 100%; min-height: 2.625rem; padding: 0 var(--s-3);
  background: var(--field); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: var(--r);
  font: inherit; box-shadow: var(--lift);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.input:hover { border-color: var(--rule-2); }
.input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); }
.input::placeholder { color: var(--ink-3); }

/* Search: a restrained field, not a command bar. */
.search-shell { position: relative; }

/* The scope sits above the query because it qualifies it. Quiet by default,
   but never hidden — a student must be able to see and change which
   specialization every result belongs to. */
.search-scope { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.search-scope-label { font-size: var(--t-meta); color: var(--ink-3); }
/* The specialization decides what every result means, so it is the one control
   on the search screen a thumb must never miss. */
.search-scope-select {
  font: inherit; font-size: var(--t-meta); color: var(--ink);
  background: var(--field); border: 1px solid var(--rule-2);
  border-radius: var(--r); padding: 0.3rem var(--s-2); min-height: 2.75rem;
  max-width: 100%; cursor: pointer;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.search-scope-select:hover { border-color: color-mix(in srgb, var(--rule-2) 70%, var(--ink-3)); }
.search-scope-select:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); }
.search-scope-state { font-size: var(--t-meta); color: var(--ink-3); }
.search-scope-hint { margin: var(--s-1) 0 var(--s-2); font-size: var(--t-meta); color: var(--ink-3); }

.search-field {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--field);
  border: 1px solid var(--rule-2); border-radius: var(--r);
  padding-inline: var(--s-3); min-height: 3rem;
  box-shadow: var(--lift);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.search-field:hover { border-color: color-mix(in srgb, var(--rule-2) 70%, var(--ink-3)); }
.search-field:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); }
.search-field .icon { color: var(--ink-3); width: 1.0625rem; height: 1.0625rem; }
.search-field:focus-within .icon { color: var(--navy); }
.search-field input {
  flex: 1; min-width: 0; border: none; background: none; font: inherit;
  font-size: 1rem; color: var(--ink); padding: 0; align-self: stretch;
}
.search-field input:focus { outline: none; }
.search-field input::placeholder { color: var(--ink-3); }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-hint { margin-top: var(--s-2); font-size: var(--t-meta); color: var(--ink-3); }

.search-examples { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--t-meta); color: var(--ink-3); }
.search-examples button {
  background: none; border: 0; border-bottom: 1px solid var(--rule-2);
  padding: 0 0 1px; cursor: pointer; color: var(--ink-2); font: inherit;
  font-variant-numeric: tabular-nums;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.search-examples button:hover { color: var(--navy); border-bottom-color: var(--navy); }

.search-busy {
  width: 0.875rem; height: 0.875rem; border-radius: 50%;
  border: 2px solid var(--rule-2); border-top-color: var(--navy);
  animation: spin 640ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.result-count { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-1); font-size: var(--t-meta); color: var(--ink-3); }
.result-count::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* --------------------------------------------------------------------------
   Notes, empty states — typography, not containers
   -------------------------------------------------------------------------- */

/* A note is Radar speaking about the record, so it is an annotation: it sits
   in the rail like everything else Radar says. Never a red banner. */
.note {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--s-2); align-items: start;
  padding: var(--s-3) 0;
  font-size: var(--t-label); color: var(--ink-2);
  border-block: 1px solid var(--rule);
}
.note .icon { color: var(--ink-3); justify-self: start; margin-top: 2px; }
.note-alert { color: var(--ink-2); }
.note-alert .icon { color: var(--error); }

/* No dashed box, no oversized glyph. An empty state is a sentence and a way
   forward. */
.empty { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-5) 0; }
/* An empty state is one component whatever its heading level. Pages whose
   quiet state is the first thing under the title use `h2` so the outline does
   not skip a level; pages where it sits inside a section keep `h3`. Both must
   look the same. */
.empty h2, .empty h3 { font-size: var(--t-head); }
.empty p { color: var(--ink-2); font-size: var(--t-label); max-width: 40ch; }
.empty-mark { display: none; }

.skeleton {
  background: linear-gradient(90deg, var(--sunken) 25%, var(--rule) 37%, var(--sunken) 63%);
  background-size: 300% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r);
}
@keyframes shimmer { to { background-position: -300% 0; } }

.form-error { color: var(--error); font-size: var(--t-label); min-height: 1.2em; }

/* --------------------------------------------------------------------------
   Sheet — an interaction, so it is allowed a surface
   -------------------------------------------------------------------------- */

.sheet[hidden] { display: none; }
.sheet {
  position: fixed; inset: 0; z-index: 60;
  display: grid; align-items: end;
  background: rgba(8, 11, 15, 0.62);
  animation: fade var(--fast) var(--ease);
}
/* The sheet is the product's one true elevated plane: the interactive surface
   tone, a hairline, and a deep soft shadow — no blur, no glass. */
.sheet-panel {
  background: var(--field);
  border-top: 1px solid var(--rule-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-sheet);
  padding: var(--s-3) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
  animation: rise var(--calm) var(--ease);
}
.sheet-grip { width: 2.25rem; height: 0.25rem; border-radius: 2px; background: var(--rule-2); margin: 0 auto var(--s-4); }
.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule);
}
.sheet-head h2 { font-size: var(--t-title); }
/* What is being watched, stated back rather than asked again. */
.sheet-scope { margin-top: 2px; font-size: var(--t-meta); color: var(--ink-3); overflow-wrap: anywhere; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }

/* Interests are ruled rows with a checkbox — not icon-plus-title-plus-subtitle
   cards. The lead interest carries a margin mark, like everything Radar
   considers primary. */
.choices { display: grid; }
/* `display` on `.choice` is an author declaration, so it beats the user agent's
   `[hidden] { display: none }`. Without this the sheet's own JS — which sets
   `hidden` on an interest that cannot apply to the chosen scope — was silently
   ignored, and a student saw a normal-looking choice that did nothing when
   tapped. The disabled input already made it unsubmittable; this makes the
   interface tell the same truth. */
.choice[hidden] { display: none; }
.choice {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) auto;
  gap: 0 var(--s-2); align-items: center; text-align: start;
  padding: var(--s-3) 0; cursor: pointer;
  border-top: 1px solid var(--rule);
  transition: color var(--fast) var(--ease);
}
/* `:last-child` still matches a `display: none` element, so the list would lose
   its closing rule whenever the final choice is the one hidden by scope. */
.choice:has(+ .choice[hidden]), .choice:last-child { border-bottom: 1px solid var(--rule); }
.choice input { grid-column: 3; accent-color: var(--navy); width: 1.0625rem; height: 1.0625rem; }
.choice-text { grid-column: 2; display: grid; gap: 1px; min-width: 0; }
.choice-text strong { font-size: var(--t-body); font-weight: 650; }
.choice-text span { font-size: var(--t-meta); color: var(--ink-3); }
.choice-lead .choice-mark { grid-column: 1; justify-self: start; align-self: stretch; width: 2px; background: var(--saffron); border-radius: 1px; }
.choice:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }

.sheet-group + .sheet-group { margin-top: var(--s-4); }
.sheet-group > .label { display: block; margin-bottom: var(--s-1); font-weight: 650; }
.disclosure { margin-top: var(--s-4); }
.disclosure > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-label); font-weight: 650; color: var(--navy); padding: var(--s-2) 0;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: ""; width: 0.4375rem; height: 0.4375rem;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--fast) var(--ease);
}
.disclosure[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.sheet-submit { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */

.toast-region {
  position: fixed; inset-inline: 0; bottom: calc(var(--nav-h) + var(--s-3));
  z-index: 70; display: grid; gap: var(--s-2); justify-items: center;
  pointer-events: none; padding: 0 var(--s-4);
}
.toast {
  background: var(--ink); color: var(--paper);
  padding: var(--s-2) var(--s-4); border-radius: var(--r);
  font-size: var(--t-label); font-weight: 650;
  box-shadow: var(--shadow-pop); animation: rise var(--calm) var(--ease); max-width: 100%;
}

/* --------------------------------------------------------------------------
   Auth — the record holds the form, the margin holds the assurances
   -------------------------------------------------------------------------- */

.auth-wrap { max-width: 22rem; margin: var(--s-6) auto var(--s-7); display: grid; gap: var(--s-5); }
.auth-intro { display: grid; gap: var(--s-2); }
.auth-form { display: grid; gap: var(--s-4); }
.auth-swap { font-size: var(--t-label); color: var(--ink-3); }
.auth-swap button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--navy); font-weight: 650; border-bottom: 1.5px solid var(--navy-soft); }
.auth-swap button:hover { border-bottom-color: var(--navy); }
.auth-notes { display: grid; gap: var(--s-2); }
.auth-notes li {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--s-2);
  font-size: var(--t-meta); color: var(--ink-3);
}
.auth-notes li::before { content: "†"; color: var(--saffron-ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   Account — destinations read as record + annotation
   -------------------------------------------------------------------------- */

.channel { align-items: center; padding-block: var(--s-4); }
/* Connecting a destination is the whole point of this screen. These two stay
   inline text actions by look, but they are sized for a thumb, not a cursor. */
.channel .act, .channel button[type="submit"] {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding-inline: var(--s-2);
}
.channel-copy { grid-column: 2; display: grid; gap: 2px; min-width: 0; }
.channel-copy strong { font-size: var(--t-body); font-weight: 650; }
.channel-copy span { font-size: var(--t-meta); color: var(--ink-3); overflow-wrap: anywhere; }
/* Connection state is a word plus margin mass — connected earns a mark, the
   rest do not, and none of them is a pill. */
.channel-state { font-size: var(--t-meta); font-weight: 650; color: var(--ink-3); }
.channel[data-connected="true"] .channel-state,
.channel[data-state="subscribed"] .channel-state { color: var(--saffron-ink); }
.channel[data-state="error"] .channel-state,
.channel[data-state="error"] [data-push-status] { color: var(--error); }
.channel-mark { display: none; }

/* --------------------------------------------------------------------------
   First visit
   -------------------------------------------------------------------------- */

.intro { padding-block: var(--s-5) var(--s-4); max-width: 32rem; }
.intro .display { margin-bottom: var(--s-4); }
.intro .lede { margin-bottom: var(--s-5); }
.search-block { max-width: 32rem; }
.intro-steps {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-3); font-size: var(--t-meta); color: var(--ink-3);
}
.intro-steps i { font-style: normal; color: var(--rule-2); }
/* Offered, not advertised: the same quiet weight as the steps above it, so a
   returning student can find the way in without it competing with the search
   field a first-time student needs. */
.intro-signin {
  margin-top: var(--s-3); font-size: var(--t-meta); color: var(--ink-3);
}
.intro-signin a { color: var(--navy); font-weight: 650; }

/* The event vocabulary, taught in the margin language before any data
   appears — the student meets the grammar here first. */
.signals { margin-top: var(--s-6); max-width: 32rem; }
.signals-head { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-meta); color: var(--ink-3); margin-bottom: var(--s-2); }
.signals-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.signals-list { display: grid; }
.signals-list li {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--s-2);
  padding: var(--s-2) 0; font-size: var(--t-label); color: var(--ink-2);
  border-top: 1px solid var(--rule);
}
.signals-list li:last-child { border-bottom: 1px solid var(--rule); }
.signals-list li::before { content: ""; width: 2px; background: var(--saffron); border-radius: 1px; align-self: stretch; }
.signals-list li[data-lead] { color: var(--ink); font-weight: 650; }
.signals-list li[data-lead]::before { width: 5px; }

/* --------------------------------------------------------------------------
   Course head
   -------------------------------------------------------------------------- */

.course-head { margin-bottom: var(--s-5); }
.course-identity { display: grid; gap: var(--s-1); }
.course-identity .rec-code { font-size: var(--t-body); }
.course-identity h1 { font-size: var(--t-title); }
.course-readout { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); font-size: var(--t-label); color: var(--ink-3); }
.course-readout .count { color: var(--ink-2); font-weight: 650; }
.course-readout .count-open { color: var(--saffron-ink); font-weight: 700; }
.course-actions { margin-top: var(--s-4); display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
/* Secondary by weight, not by size: watching the whole course is a real intent
   a thumb has to be able to hit. */
.course-actions .act { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* --------------------------------------------------------------------------
   Search workspace
   -------------------------------------------------------------------------- */

.search-workspace { display: grid; gap: var(--s-4); }
.search-band { display: grid; gap: var(--s-2); }

/* Results arrive; they do not parade. Capped so a long list never waves. */
.entries-fresh > .entry { animation: settle 240ms var(--ease) both; }
.entries-fresh > :nth-child(1) { animation-delay: 0ms; }
.entries-fresh > :nth-child(2) { animation-delay: 30ms; }
.entries-fresh > :nth-child(3) { animation-delay: 60ms; }
.entries-fresh > :nth-child(n+4) { animation-delay: 90ms; }
@keyframes settle { from { opacity: 0; transform: translateY(4px); } }

/* --------------------------------------------------------------------------
   Watches
   -------------------------------------------------------------------------- */

/* Marginalia is a desktop composition. Below that width Radar's note becomes
   an inline annotation instead, so the same truth is told once, not twice. */
.marginalia { display: none; }
.margin-note { display: grid; }

/* Monitoring and delivery are two facts, so they get two lines. Neither is
   allowed to stand in for the other, and the note stays until the gap it
   describes is actually closed. */
.delivery-note {
  display: grid; gap: var(--s-2); justify-items: start;
  padding: var(--s-4) 0; margin-bottom: var(--s-4);
  border-block: 1px solid var(--rule);
}
.delivery-note.is-fresh { border-block-color: var(--rule-2); background: var(--saffron-soft); padding-inline: var(--s-4); }
.delivery-state { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-label); font-weight: 650; color: var(--ink); }
.delivery-gap { font-size: var(--t-label); color: var(--ink-2); max-width: 46ch; }
.delivery-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.delivery-actions .btn { min-height: 2.75rem; }

.watch-actions { display: flex; gap: var(--s-1); align-self: start; }
.watch-actions .icon-button { width: 2.75rem; height: 2.75rem; color: var(--ink-3); }
.watch-actions .icon-button:hover { color: var(--ink); }
.watch-actions .icon { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 60rem) {
  :root { --content: 66rem; --rail: 2rem; }

  body { padding-bottom: var(--s-7); }
  .bottom-nav { display: none; }
  .desktop-nav { display: flex; align-items: center; gap: var(--s-4); margin-inline-start: var(--s-6); }
  .desktop-nav a {
    font-size: var(--t-label); font-weight: 600; color: var(--ink-3);
    padding-bottom: 3px; border-bottom: 2px solid transparent;
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  .desktop-nav a:hover { color: var(--ink); }
  .desktop-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--saffron); }
  .app-main { padding: var(--s-6) var(--s-5) var(--s-8); }
  .toast-region { bottom: var(--s-5); }

  /* Marginalia. The margin widens into short, ragged, unboxed notes tied to
     the rows they annotate. This is the desktop composition — not a sidebar,
     and never filled with invented content. */
  .sheet-of { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .margin-note { display: none; }
  .marginalia { display: grid; gap: var(--s-2); padding-top: var(--s-1); text-align: end; }
  .marginalia p { font-size: var(--t-meta); color: var(--ink-3); }
  .marginalia p::after { content: " ⟵"; color: var(--rule-2); }
  .marginalia .note { border: 0; padding: 0; display: block; text-align: end; }
  .marginalia .note .icon { display: none; }

  /* What you are waiting for, beside what already happened. Both columns are
     real content; neither exists to fill the canvas. */
  .board {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s-5) var(--s-7); align-items: start;
  }
  .board > section { margin-bottom: 0 !important; }
  .opp { max-width: 46rem; }
  .opp-title { font-size: 1.6rem; }
  .auth-wrap { margin-block: var(--s-8); }

  .sheet { align-items: center; justify-items: center; }
  .sheet-panel { border: 1px solid var(--rule-2); border-radius: var(--r-lg); max-width: 29rem; width: 100%; padding: var(--s-5); }
  .sheet-grip { display: none; }

  /* Nothing on the search screen legitimately fills 1400px, and one result
     spread across that width is the same failure as one floating above it.
     The query and its results stay one measured column and take the centre of
     the canvas. Width is earned on the dashboard and the section table. */
  .search-workspace { max-width: 42rem; margin-inline: auto; }
  .search-page-head { max-width: 42rem; margin-inline: auto; }
}

/* The section table: six aligned readings, which is what makes twelve
   sections comparable at all. */
@media (min-width: 64rem) {
  .sections { --cols: var(--rail) 6.5rem minmax(9rem, 1.4fr) minmax(6.5rem, 0.9fr) minmax(6.5rem, 0.8fr) minmax(7rem, 1fr) 5.5rem; }
  .section-head {
    display: grid; grid-template-columns: var(--cols); gap: var(--s-3);
    padding: 0 0 var(--s-2); font-size: var(--t-meta); color: var(--ink-3);
    border-bottom: 1px solid var(--rule-2);
  }
  .sections .entry.sec { grid-template-columns: var(--cols); gap: var(--s-3); align-items: center; padding: var(--s-3) 0; }
  .sec .rec { display: contents; }
  /* The number cell stacks its own two readings; every other fact becomes a
     cell of the row, which is what makes twelve sections comparable. */
  .sec .sec-head { display: grid; gap: 1px; align-content: center; }
  .sec .sec-kind { white-space: nowrap; }
  .sec .rec-facts { display: contents; }
  .sec .rec-facts > span { font-size: var(--t-meta); }
  .sec .rec-facts .icon { display: none; }
  .sec .sec-head .rec-state { display: none; }
  .sec .rec-state-cell { display: block; }
  /* `.rec` dissolves into the row above, so the disclosure and its panel would
     otherwise be dealt into the next free cells. They take their own rows,
     aligned under the readings rather than under the rail. */
  /* A mouse does not need a 44px target, and the rail is 2rem here — letting
     the label keep its thumb size would push every reading out of column. It
     still keeps the 24px floor a pointer is entitled to. */
  .sec .sec-pick { min-width: 1.5rem; min-height: 1.5rem; margin: 0; align-self: center; }
  .sec .sec-disclose { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
  .sec .sec-more { min-height: 0; }
  .sec .sec-panel { grid-column: 2 / -1; grid-row: 3; }
  /* Pinned explicitly: the two full-width rows above move the auto-placement
     cursor past row 1, and the status would otherwise be dealt into the rail
     three rows below its own column heading. */
  .sec .rec-state-cell { grid-column: -2 / -1; grid-row: 1; }
}
.rec-state-cell { display: none; }

@media (min-width: 84rem) { :root { --content: 72rem; } }

/* --------------------------------------------------------------------------
   Motion — only Radar's annotations move. The record is stable.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .pulse::after { display: none; }
}

/* ========================================================================
   2026 product identity + Figma-led composition
   ======================================================================== */

:root {
  --verified: #1f6b4f;
  --verified-soft: rgba(31, 107, 79, 0.11);
  --active: #1d5b8f;
  --active-soft: rgba(29, 91, 143, 0.11);
  --warning: #9a6816;
  --warning-soft: rgba(154, 104, 22, 0.12);
  --focus: #1d5b8f;
  --selection: rgba(181, 130, 42, 0.14);
  --overlay: rgba(4, 13, 24, 0.66);
  --surface-elevated: color-mix(in srgb, var(--field) 96%, var(--navy) 4%);
  --r-card: 1rem;
  --r-panel: 1.4rem;
  --shadow-card: 0 1.2rem 3.5rem rgba(10, 31, 52, 0.09);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --verified: #73d4a8;
    --verified-soft: rgba(115, 212, 168, 0.12);
    --active: #8ebce3;
    --active-soft: rgba(142, 188, 227, 0.13);
    --warning: #e9b44a;
    --warning-soft: rgba(233, 180, 74, 0.13);
    --focus: #e9b44a;
    --selection: rgba(233, 180, 74, 0.13);
    --overlay: rgba(0, 6, 14, 0.78);
    --surface-elevated: #1b232d;
    --shadow-card: 0 1.5rem 4rem rgba(0, 0, 0, 0.34);
  }
}

:root[data-theme="dark"] {
  --verified: #73d4a8;
  --verified-soft: rgba(115, 212, 168, 0.12);
  --active: #8ebce3;
  --active-soft: rgba(142, 188, 227, 0.13);
  --warning: #e9b44a;
  --warning-soft: rgba(233, 180, 74, 0.13);
  --focus: #e9b44a;
  --selection: rgba(233, 180, 74, 0.13);
  --overlay: rgba(0, 6, 14, 0.78);
  --surface-elevated: #1b232d;
  --shadow-card: 0 1.5rem 4rem rgba(0, 0, 0, 0.34);
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-wrap: anywhere; -webkit-tap-highlight-color: rgba(181, 130, 42, 0.18); }
button, a, input, select, summary { touch-action: manipulation; }
:focus-visible { outline-color: var(--focus); outline-width: 3px; }
.app-main:focus { outline: 3px solid var(--focus); outline-offset: -3px; }
.app-main:focus:not(:focus-visible) { outline: none; }
h1, h2, h3 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.num { font-family: var(--font-display), var(--font-ui); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

.app-header { height: 4.25rem; }
.header-inner { min-height: 4.25rem; position: relative; }
.brand { min-width: 3rem; min-height: 3rem; }
.brand-lockup, .brand-compact { position: relative; display: block; }
.brand-lockup { width: 10.5rem; height: 3.25rem; }
.brand-compact { display: none; width: 2.8rem; height: 2.8rem; }
.brand-art { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-lockup .brand-art { object-position: right center; }
.brand-art-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-art-light { display: none; }
  :root:not([data-theme="light"]) .brand-art-dark { display: block; }
}
:root[data-theme="dark"] .brand-art-light { display: none; }
:root[data-theme="dark"] .brand-art-dark { display: block; }
.header-wordmark {
  display: none;
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  direction: ltr;
  align-items: baseline;
  gap: 0.28em;
  white-space: nowrap;
  pointer-events: none;
  font-size: 0.9rem;
  line-height: 1;
}
.header-wordmark-ksu {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.header-wordmark-radar {
  color: var(--signal);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.005em;
}

.btn, .input, .search-scope-select, .search-field { border-radius: 0.75rem; }
.btn { min-height: 3rem; transition: transform var(--fast) var(--ease), background-color var(--calm) var(--ease), border-color var(--calm) var(--ease), color var(--calm) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.985); }
.icon-button { min-width: 2.75rem; min-height: 2.75rem; transition: background-color var(--calm) var(--ease), transform var(--fast) var(--ease); }
.icon-button:active { transform: scale(0.96); }

.entries > .entry, .delivery-note, .empty, .auth-form, .pending-recovery {
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--surface-elevated);
  box-shadow: var(--lift);
}
.entries > .entry { margin-block-end: 0.7rem; padding: 1rem; transition: border-color var(--calm) var(--ease), transform var(--calm) var(--ease), background-color var(--calm) var(--ease); }
.entries > a.entry:hover { border-color: var(--rule-2); transform: translateY(-1px); }
.empty { padding: clamp(1.5rem, 4vw, 2.5rem); }
.page-head { margin-block: 0.6rem 2rem; }
.page-title { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); font-weight: 850; }

/* Approved identity and Figma composition on the product-led landing page. */
.landing { width: min(100%, 78rem); margin-inline: auto; }
.landing > section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.landing-hero {
  min-height: min(48rem, calc(100dvh - 4.25rem));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  grid-template-areas: "copy radar" "actions radar";
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.landing-hero::before {
  content: "";
  position: absolute;
  inset: 4% 38% 4% -20%;
  z-index: -1;
  background: radial-gradient(circle, var(--saffron-soft), transparent 62%);
  opacity: 0.65;
}
.hero-copy { grid-area: copy; align-self: end; max-width: 42rem; }
.hero-actions-block { grid-area: actions; align-self: start; max-width: 42rem; }
.hero-kicker { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--saffron-ink); font-size: var(--t-label); font-weight: 750; margin-block-end: 1.25rem; }
.landing .display { font-size: clamp(2.75rem, 2rem + 4vw, 5.5rem); line-height: 1.16; font-weight: 900; max-width: 11ch; letter-spacing: -0.025em; }
.landing .display-soft { display: block; color: var(--saffron-ink); }
.landing .lede { max-width: 58ch; margin-block: 1.5rem 2rem; color: var(--ink-2); font-size: clamp(1rem, 0.92rem + 0.45vw, 1.25rem); }
.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-actions .btn { min-width: 11rem; }
.landing a:not(.btn) { min-height: 2.75rem; display: inline-flex; align-items: center; }
.intro-signin { margin-block-start: 1.25rem; color: var(--ink-3); font-size: var(--t-label); }
.intro-signin a { color: var(--navy); text-decoration: underline; text-underline-offset: 0.22em; }

.hero-radar { grid-area: radar; position: relative; min-height: 31rem; display: grid; place-items: center; }
.radar-field { width: min(27rem, 100%); aspect-ratio: 1; position: relative; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; background: radial-gradient(circle, var(--navy-soft), transparent 68%); overflow: hidden; }
.radar-ring { position: absolute; border: 1px solid var(--rule-2); border-radius: 50%; }
.radar-ring-one { inset: 17%; }
.radar-ring-two { inset: 34%; }
.radar-sweep {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  transform-origin: 50% 50%;
  background: conic-gradient(
    from 270deg,
    transparent 0deg 344deg,
    color-mix(in srgb, var(--signal) 5%, transparent) 348deg,
    color-mix(in srgb, var(--signal) 22%, transparent) 356deg,
    color-mix(in srgb, var(--signal) 46%, transparent) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 13%, #000 20% 94%, transparent 100%);
  mask: radial-gradient(circle, transparent 0 13%, #000 20% 94%, transparent 100%);
  animation: radar-sweep 9s linear infinite;
}
.radar-sweep::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal) 58%, transparent), transparent);
  box-shadow: 0 0 0.45rem color-mix(in srgb, var(--signal) 20%, transparent);
  transform: translateY(-0.5px);
  transform-origin: left center;
}
.radar-signal { position: absolute; inset-inline-start: 25%; inset-block-start: 31%; width: 0.75rem; height: 0.75rem; background: var(--verified); border-radius: 50%; box-shadow: 0 0 0 0 var(--verified-soft); animation: signal-pulse 4s ease-out infinite; }
.radar-shield { width: 43%; aspect-ratio: 1; position: relative; z-index: 1; }
.radar-shield .brand-art { position: absolute; inset: 0; }
.monitor-readout { position: absolute; inset-inline: 0; inset-block-end: 0; margin-inline: auto; width: min(23rem, 88%); padding: 1.15rem 1.3rem; display: grid; gap: 0.25rem; background: color-mix(in srgb, var(--surface-elevated) 92%, transparent); backdrop-filter: blur(18px); border: 1px solid var(--rule-2); border-radius: 1rem; box-shadow: var(--shadow-card); }
.monitor-readout > span { color: var(--verified); font-size: var(--t-label); font-weight: 750; }
.monitor-readout strong { font-size: 1rem; }
.monitor-readout small { color: var(--ink-3); }

.section-heading { max-width: 47rem; margin-block-end: clamp(2rem, 5vw, 4rem); }
.section-heading h2, .close-moment h2 { font-size: clamp(2rem, 1.55rem + 2.4vw, 3.7rem); line-height: 1.22; font-weight: 850; }
.section-heading > p:last-child, .close-moment > div > p { margin-block-start: 0.8rem; color: var(--ink-2); max-width: 62ch; }
.landing-search { border-block: 1px solid var(--rule); }
.landing-search .search-block { max-width: 56rem; }
.landing-search .search-shell { padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--rule-2); border-radius: var(--r-panel); background: var(--surface-elevated); box-shadow: var(--shadow-card); }

.journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.journey-grid li { min-width: 0; min-height: 17rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--surface-elevated); }
.journey-grid li:nth-child(2) { transform: translateY(1.5rem); }
.step-number { margin-block-end: auto; color: var(--saffron-ink); font-size: 2.6rem; font-weight: 850; opacity: 0.35; }
.journey-grid h3 { font-size: 1.25rem; margin-block-end: 0.65rem; }
.journey-grid p { color: var(--ink-3); }

.close-moment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr); align-items: center; gap: clamp(2rem, 8vw, 7rem); border-block: 1px solid var(--rule); }
.close-moment .act { display: inline-block; margin-block-start: 1.3rem; }
.notification-preview { padding: 1.5rem; border: 1px solid var(--rule-2); border-radius: var(--r-card); background: var(--surface-elevated); box-shadow: var(--shadow-card); transform: rotate(-1.4deg); }
.notification-brand { color: var(--saffron-ink); font-weight: 800; font-family: var(--font-display); }
.notification-preview strong, .notification-preview p, .notification-preview small { display: block; }
.notification-preview strong { margin-block: 1rem 0.35rem; }
.notification-preview p, .notification-preview small { color: var(--ink-3); }
.notification-preview small { margin-block-start: 1rem; }

.landing-signals { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; }
.landing-signals .signals-list { align-self: end; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.landing-signals .signals-list li { min-height: 3.5rem; display: flex; align-items: center; padding: 0.8rem 1rem; border: 1px solid var(--rule); border-radius: 0.75rem; background: var(--surface-elevated); }
.landing-signals .signals-list li[data-lead] { border-color: var(--saffron); color: var(--saffron-ink); }
.truth-statement { text-align: center; border-block: 1px solid var(--rule); }
.truth-statement h2 { color: var(--saffron-ink); font-size: clamp(2.3rem, 1.8rem + 3vw, 4.7rem); font-weight: 900; }
.truth-statement p { max-width: 54rem; margin: 1.25rem auto 0; color: var(--ink-2); font-size: 1.05rem; }
.landing-footer { padding-block: 3rem 1rem; display: flex; justify-content: space-between; gap: 1rem; border-block-start: 1px solid var(--rule); color: var(--ink-3); font-size: var(--t-meta); }

.search-examples { margin-block-start: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-radius: 0.8rem; background: var(--surface-elevated); }
.search-examples-label { flex-basis: 100%; color: var(--ink-2); font-weight: 700; }
.search-example-chip { min-height: 2.75rem; padding-inline: 0.8rem; border: 1px solid var(--rule-2) !important; border-radius: 0.6rem; background: var(--field); color: var(--navy) !important; }
.search-example-chip:hover { background: var(--navy-soft); border-color: var(--navy) !important; }

.sheet { background: var(--overlay); }
.sheet-panel { overscroll-behavior: contain; max-height: min(88dvh, 48rem); overflow-y: auto; border-radius: var(--r-panel) var(--r-panel) 0 0; }
body[data-modal-open="true"] { overflow: hidden; }
.choice { min-height: 3.25rem; }
.choice:has(input:checked) { background: var(--selection); border-color: var(--saffron); }
.pending-recovery { padding: 1.5rem; margin-block-start: 1rem; }
.pending-recovery h2 { margin-block: 0.35rem 0.6rem; }
.pending-recovery p { color: var(--ink-2); }
.pending-recovery-actions { display: flex; gap: 0.75rem; margin-block-start: 1.25rem; flex-wrap: wrap; }
.channel[data-connected="true"] .channel-state, .delivery-state { color: var(--verified); }

@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes signal-pulse { 0%, 18% { box-shadow: 0 0 0 0 var(--verified-soft); } 65%, 100% { box-shadow: 0 0 0 1.25rem transparent; } }
.reveal-stage { animation: reveal-stage 350ms var(--ease) both; }
.reveal-stage:nth-child(2) { animation-delay: 80ms; }
@keyframes reveal-stage { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 59.99rem) {
  .brand-lockup { display: none; }
  .brand-compact { display: block; }
  .header-wordmark { display: inline-flex; }
  .landing-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "radar" "actions";
    min-height: auto;
    gap: 0.6rem;
    padding-block: 2rem 3rem !important;
  }
  .hero-copy { text-align: center; margin-inline: auto; }
  .hero-actions-block { width: 100%; margin-inline: auto; text-align: center; }
  .landing .display { max-width: 12ch; margin-inline: auto; }
  .landing .lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-radar { min-height: clamp(18rem, 62vw, 27rem); }
  .radar-field { width: min(22rem, 74vw); }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-grid li { min-height: 12rem; }
  .journey-grid li:nth-child(2) { transform: none; }
  .close-moment, .landing-signals { grid-template-columns: 1fr; }
  .landing-signals .signals-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-footer { flex-direction: column; text-align: center; }
  body[data-selecting="true"] .app-main { padding-bottom: calc(9rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 30rem) {
  .app-main { padding-inline: 0.9rem; }
  .landing > section { padding-block: 4rem; }
  .landing-hero { padding-block: 1.5rem 3rem !important; }
  .landing .display { font-size: clamp(2.35rem, 12vw, 3.4rem); }
  .hero-radar { min-height: 18rem; }
  .radar-field { width: min(18rem, 78vw); }
  .monitor-readout { font-size: 0.82rem; }
  .landing-signals .signals-list { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .pending-recovery-actions { flex-direction: column; }
  .pending-recovery-actions .btn { width: 100%; }
  .selection-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
  .selection-bar .act { grid-column: 1 / -1; justify-self: center; min-height: 2.75rem; }
}

/* Wide touch devices retain mobile-grade targets; shrinking is pointer-led. */
@media (min-width: 60rem) and (pointer: coarse) {
  .btn, .icon-button, .act, .search-examples button, .bottom-nav a { min-height: 3rem; }
  .sheet-panel { max-width: 34rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .radar-sweep, .radar-signal, .reveal-stage { animation: none !important; }
  .journey-grid li:nth-child(2), .notification-preview { transform: none; }
}

/* ========================================================================
   Definitive product experience

   This layer intentionally remaps the original record/margin vocabulary to a
   complete Radar product system. Domain markup remains server-rendered; the
   visual hierarchy, themes and state language are authored here.
   ======================================================================== */

:root,
:root[data-theme="light"] {
  --canvas: #f7f5f2;
  --surface: #eeebe5;
  --surface-raised: #fffdf9;
  --surface-interactive: #f3f0ea;
  --text-primary: #102a42;
  --text-secondary: #485b6b;
  --text-muted: #6c7984;
  --border-subtle: rgba(16, 42, 66, 0.11);
  --border-strong: rgba(16, 42, 66, 0.24);
  --signal: #b47c18;
  --signal-soft: rgba(180, 124, 24, 0.13);
  --verified: #247257;
  --verified-soft: rgba(36, 114, 87, 0.12);
  --active: #174f7d;
  --warning: #956514;
  --danger: #a43d35;
  --focus: #174f7d;
  --selection: rgba(180, 124, 24, 0.12);
  --radar-grid: rgba(16, 42, 66, 0.10);
  --radar-sweep: rgba(180, 124, 24, 0.28);
  --radar-ping: rgba(180, 124, 24, 0.34);

  --paper: var(--canvas);
  --field: var(--surface-raised);
  --sunken: var(--surface);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-muted);
  --rule: var(--border-subtle);
  --rule-2: var(--border-strong);
  --navy: #123f68;
  --navy-2: #1b5b8f;
  --navy-soft: rgba(18, 63, 104, 0.09);
  --on-navy: #fffaf0;
  --saffron: var(--signal);
  --saffron-ink: #76530f;
  --saffron-soft: var(--signal-soft);
  --surface-elevated: var(--surface-raised);
  --header-bg: color-mix(in srgb, var(--canvas) 88%, transparent);
  --btn-bg: #123f68;
  --btn-fg: #fffaf0;
  --btn-edge: transparent;
  --wash:
    radial-gradient(circle at 82% -8%, rgba(180, 124, 24, 0.08), transparent 25rem),
    radial-gradient(circle at 10% 36rem, rgba(18, 63, 104, 0.045), transparent 32rem);
  --overlay: rgba(4, 13, 24, 0.62);
  --shadow-card: 0 1.25rem 3.4rem rgba(16, 42, 66, 0.08);
  --shadow-sheet: 0 -1.5rem 5rem rgba(16, 42, 66, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #060a10;
    --surface: #0b121c;
    --surface-raised: #101a27;
    --surface-interactive: #152131;
    --text-primary: #f3eee5;
    --text-secondary: #b9b8b4;
    --text-muted: #858d98;
    --border-subtle: rgba(210, 222, 235, 0.10);
    --border-strong: rgba(210, 222, 235, 0.19);
    --signal: #e7b348;
    --signal-soft: rgba(231, 179, 72, 0.13);
    --verified: #70d0a6;
    --verified-soft: rgba(112, 208, 166, 0.13);
    --active: #8dbde5;
    --warning: #e7b348;
    --danger: #ef8b82;
    --focus: #e7b348;
    --selection: rgba(231, 179, 72, 0.13);
    --radar-grid: rgba(176, 198, 220, 0.10);
    --radar-sweep: rgba(231, 179, 72, 0.26);
    --radar-ping: rgba(231, 179, 72, 0.38);

    --paper: var(--canvas);
    --field: var(--surface-raised);
    --sunken: var(--surface-interactive);
    --ink: var(--text-primary);
    --ink-2: var(--text-secondary);
    --ink-3: var(--text-muted);
    --rule: var(--border-subtle);
    --rule-2: var(--border-strong);
    --navy: #91b9dd;
    --navy-2: #bad2e8;
    --navy-soft: rgba(145, 185, 221, 0.12);
    --on-navy: #07121d;
    --saffron: var(--signal);
    --saffron-ink: #f0c66d;
    --saffron-soft: var(--signal-soft);
    --surface-elevated: var(--surface-raised);
    --header-bg: color-mix(in srgb, #08101a 89%, transparent);
    --btn-bg: #214f7c;
    --btn-fg: #f5f0e8;
    --btn-edge: rgba(208, 224, 239, 0.13);
    --wash:
      radial-gradient(circle at 78% -10%, rgba(77, 118, 157, 0.14), transparent 30rem),
      radial-gradient(circle at 5% 34rem, rgba(231, 179, 72, 0.045), transparent 28rem);
    --overlay: rgba(0, 4, 10, 0.82);
    --shadow-card: 0 1.5rem 4rem rgba(0, 0, 0, 0.34);
    --shadow-sheet: 0 -1.5rem 5rem rgba(0, 0, 0, 0.62);
  }
}

:root[data-theme="dark"] {
  --canvas: #060a10;
  --surface: #0b121c;
  --surface-raised: #101a27;
  --surface-interactive: #152131;
  --text-primary: #f3eee5;
  --text-secondary: #b9b8b4;
  --text-muted: #858d98;
  --border-subtle: rgba(210, 222, 235, 0.10);
  --border-strong: rgba(210, 222, 235, 0.19);
  --signal: #e7b348;
  --signal-soft: rgba(231, 179, 72, 0.13);
  --verified: #70d0a6;
  --verified-soft: rgba(112, 208, 166, 0.13);
  --active: #8dbde5;
  --warning: #e7b348;
  --danger: #ef8b82;
  --focus: #e7b348;
  --selection: rgba(231, 179, 72, 0.13);
  --radar-grid: rgba(176, 198, 220, 0.10);
  --radar-sweep: rgba(231, 179, 72, 0.26);
  --radar-ping: rgba(231, 179, 72, 0.38);
  --paper: var(--canvas);
  --field: var(--surface-raised);
  --sunken: var(--surface-interactive);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-muted);
  --rule: var(--border-subtle);
  --rule-2: var(--border-strong);
  --navy: #91b9dd;
  --navy-2: #bad2e8;
  --navy-soft: rgba(145, 185, 221, 0.12);
  --on-navy: #07121d;
  --saffron: var(--signal);
  --saffron-ink: #f0c66d;
  --saffron-soft: var(--signal-soft);
  --surface-elevated: var(--surface-raised);
  --header-bg: color-mix(in srgb, #08101a 89%, transparent);
  --btn-bg: #214f7c;
  --btn-fg: #f5f0e8;
  --btn-edge: rgba(208, 224, 239, 0.13);
  --wash:
    radial-gradient(circle at 78% -10%, rgba(77, 118, 157, 0.14), transparent 30rem),
    radial-gradient(circle at 5% 34rem, rgba(231, 179, 72, 0.045), transparent 28rem);
  --overlay: rgba(0, 4, 10, 0.82);
  --shadow-card: 0 1.5rem 4rem rgba(0, 0, 0, 0.34);
  --shadow-sheet: 0 -1.5rem 5rem rgba(0, 0, 0, 0.62);
}

body {
  background-color: var(--canvas);
  background-image: var(--wash);
  color: var(--text-primary);
}

.app-header { border-color: var(--border-subtle); }
.app-header.is-scrolled { box-shadow: 0 0.8rem 2.5rem rgba(4, 10, 18, 0.10); }
.app-main { width: 100%; max-width: 72rem; }
.bottom-nav { background: var(--header-bg); border-color: var(--border-subtle); }
.bottom-nav a { position: relative; }
.bottom-nav a[aria-current="page"] { color: var(--text-primary); }
.bottom-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0.38rem;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0.24rem var(--signal-soft);
}
.bottom-nav a[aria-current="page"] span::after { display: none; }

/* Returning-user product home: meaning, action, signal, then records. */
.product-home { display: grid; gap: clamp(1rem, 3vw, 1.8rem); }
.product-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 22rem;
  padding: clamp(1.35rem, 4vw, 2.6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
  grid-template-areas: "copy radar" "search radar" "journey radar";
  gap: 1rem clamp(2rem, 7vw, 6rem);
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at 83% 22%, var(--signal-soft), transparent 30%),
    linear-gradient(145deg, var(--surface-raised), color-mix(in srgb, var(--surface) 78%, transparent));
  box-shadow: var(--shadow-card);
}
.product-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: 0.45;
}
.product-hero-copy { grid-area: copy; position: relative; z-index: 2; max-width: 43rem; }
.product-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-end: 0.7rem;
  color: var(--text-muted);
  font-size: var(--t-meta);
  font-weight: 650;
}
.product-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.35rem, 1.6rem + 3.6vw, 4.8rem);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.product-hero-copy > p:last-child {
  max-width: 49ch;
  margin-block-start: 0.7rem;
  color: var(--text-secondary);
  font-size: clamp(0.92rem, 0.84rem + 0.25vw, 1.05rem);
}
.hero-search { grid-area: search; position: relative; z-index: 3; width: min(100%, 40rem); }
.hero-search .search-shell {
  padding: 0.8rem;
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  backdrop-filter: blur(14px);
}
.hero-search .search-scope-hint { display: none; }
.hero-search .search-scope { margin-block-end: 0.55rem; }
.hero-search .search-scope-select { min-height: 2.35rem; background: var(--surface-interactive); }
.hero-search .search-field { min-height: 3.45rem; border-color: var(--border-strong); background: var(--surface-interactive); }
.hero-search .search-field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.journey-line {
  grid-area: journey;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 27rem);
  position: relative;
  z-index: 2;
  color: var(--text-muted);
  font-size: 0.7rem;
}
.journey-line::before {
  content: "";
  position: absolute;
  top: 0.29rem;
  inset-inline: 9% 24%;
  height: 1px;
  background: linear-gradient(90deg, var(--border-subtle), var(--signal), var(--border-subtle));
}
.journey-line li { display: grid; justify-items: start; gap: 0.28rem; position: relative; }
.journey-dot { width: 0.58rem; height: 0.58rem; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--signal); box-shadow: 0 0 0 0.22rem var(--signal-soft); }

.product-radar {
  grid-area: radar;
  justify-self: center;
  width: min(21rem, 100%);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, var(--signal-soft), transparent 62%);
}
.product-radar-grid {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    linear-gradient(transparent calc(50% - 0.5px), var(--radar-grid) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), var(--radar-grid) 50%, transparent calc(50% + 0.5px));
}
.product-radar-ring { position: absolute; border: 1px solid var(--radar-grid); border-radius: 50%; }
.product-radar-ring-one { inset: 7%; }
.product-radar-ring-two { inset: 25%; }
.product-radar-ring-three { inset: 42%; }
.product-radar-sweep {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  transform-origin: 50% 50%;
  background: conic-gradient(
    from 270deg,
    transparent 0deg 344deg,
    color-mix(in srgb, var(--signal) 5%, transparent) 348deg,
    color-mix(in srgb, var(--signal) 22%, transparent) 356deg,
    color-mix(in srgb, var(--signal) 46%, transparent) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0 13%, #000 20% 94%, transparent 100%);
  mask: radial-gradient(circle, transparent 0 13%, #000 20% 94%, transparent 100%);
  animation: product-radar-sweep 9s linear infinite;
}
.product-radar-sweep::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal) 58%, transparent), transparent);
  box-shadow: 0 0 0.45rem color-mix(in srgb, var(--signal) 20%, transparent);
  transform: translateY(-0.5px);
  transform-origin: left center;
}
.product-radar-target {
  position: absolute;
  inset-inline-start: 23%;
  inset-block-start: 31%;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 var(--radar-ping);
  animation: product-radar-ping 4s ease-out infinite;
}
.product-radar-core { width: 26%; aspect-ratio: 1; position: relative; z-index: 2; filter: drop-shadow(0 0.75rem 1.5rem rgba(4, 10, 18, 0.18)); }
.product-radar-core .brand-art { position: absolute; inset: 0; object-fit: contain; }
@keyframes product-radar-sweep { to { transform: rotate(360deg); } }
@keyframes product-radar-ping {
  0%, 18% { box-shadow: 0 0 0 0 var(--radar-ping); }
  68%, 100% { box-shadow: 0 0 0 1.35rem transparent; }
}

.live-signal {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--border-subtle);
  border-inline-start: 3px solid var(--signal);
  border-radius: 1.1rem;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
  animation-delay: 140ms;
}
.live-signal::before,
.live-signal::after {
  content: "";
  position: absolute;
  inset-inline-end: -4.5rem;
  top: 50%;
  width: 8rem;
  height: 8rem;
  translate: 0 -50%;
  border: 1px solid var(--radar-grid);
  border-radius: 50%;
  pointer-events: none;
}
.live-signal::after { width: 5rem; height: 5rem; inset-inline-end: -3rem; }
.live-signal-head,
.live-signal-body { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; position: relative; z-index: 1; }
.live-signal-head { margin-block-end: 0.65rem; }
.signal-label,
.live-state { display: inline-flex; align-items: center; gap: 0.48rem; font-size: var(--t-meta); font-weight: 750; }
.signal-label { color: var(--saffron-ink); }
.signal-wave { width: 1rem; height: 1rem; border: 1px solid var(--signal); border-radius: 50%; box-shadow: inset 0 0 0 0.22rem var(--surface-raised); background: var(--signal); }
.live-state { color: var(--verified); }
.live-signal-body { align-items: end; }
.live-course { min-width: 0; display: grid; gap: 0.25rem; }
.live-course h2 { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.4rem); }
.live-signal-actions { display: flex; align-items: center; gap: 0.9rem; flex: none; }
.live-signal-idle { border-inline-start-color: var(--border-strong); }
.live-signal-idle .signal-wave { border-color: var(--text-muted); background: var(--text-muted); }
.live-signal-idle .live-state { color: var(--text-muted); font-weight: 500; }

.home-board { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 1rem; align-items: start; }
.home-panel {
  min-width: 0;
  padding: clamp(1rem, 3vw, 1.45rem);
  border: 1px solid var(--border-subtle);
  border-radius: 1.15rem;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.home-panel .block-head { margin-bottom: 0.75rem; }
.home-panel .entries > .entry { background: var(--surface-raised); }
.radar-empty { grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; }
.radar-empty > :not(.empty-radar) { grid-column: 2; }
.empty-radar { grid-row: 1 / span 2; width: 3.6rem; aspect-ratio: 1; border: 1px solid var(--radar-grid); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 0.7rem var(--signal-soft); }
.empty-radar span { width: 0.4rem; aspect-ratio: 1; border-radius: 50%; background: var(--signal); }

/* Secondary pages share the same instrument-panel rhythm. */
body:not([data-page="home"]) .page-head { margin-block: 1rem 2rem; }
body:not([data-page="home"]) .page-title { font-size: clamp(2rem, 1.45rem + 2.1vw, 3.25rem); font-weight: 850; }
.search-band {
  padding: clamp(1rem, 3vw, 1.45rem);
  border: 1px solid var(--border-subtle);
  border-radius: 1.2rem;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}
.search-band .search-field { min-height: 3.6rem; background: var(--surface-interactive); }
.search-examples { display: none !important; }
.entries > .entry,
.delivery-note,
.empty,
.auth-form,
.pending-recovery { border-color: var(--border-subtle); background: var(--surface-raised); }
.entries > .entry { border-radius: 0.95rem; }
.entries > .entry + .entry { border-top: 1px solid var(--border-subtle); }
.entries > a.entry:hover,
.sec:hover { background: var(--surface-interactive); }
.entry .mk { border-radius: 99px; }
.tl-day { color: var(--text-secondary); }
.ev { position: relative; }
.ev .mk--note {
  width: 0.62rem;
  min-height: 0.62rem;
  height: 0.62rem;
  margin-block-start: 0.35rem;
  border: 1px solid var(--text-muted);
  border-radius: 50%;
  color: transparent;
  font-size: 0;
  background: var(--surface-raised);
}
.ev .mk--note.is-major { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 0 0.25rem var(--signal-soft); }
.channel[data-connected="true"] { border-inline-start: 3px solid var(--verified); }
.delivery-note { border-inline-start: 3px solid var(--signal); }
.sheet-panel {
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sheet);
  transition: transform 280ms var(--ease), opacity 250ms var(--ease);
}
.sheet:not([hidden]) .sheet-panel { animation: sheet-enter 280ms var(--ease) both; }
@keyframes sheet-enter { from { transform: translateY(1.2rem); opacity: 0; } }
.sheet-grip { background: var(--border-strong); }
.choice { border-radius: 0.8rem; border-color: var(--border-subtle); background: var(--surface-interactive); transition: background 220ms var(--ease), border-color 220ms var(--ease), transform 180ms var(--ease); }
.choice:active { transform: scale(0.99); }
.choice:has(input:checked) { background: var(--selection); border-color: var(--signal); }
.selection-bar { background: var(--surface-raised); border-color: var(--border-strong); }

@media (max-width: 59.99rem) {
  .product-hero {
    min-height: 22rem;
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "search" "journey";
    gap: 0.75rem;
    padding-block: 1.45rem 1.15rem;
  }
  .product-hero-copy { padding-inline-end: min(24vw, 5.8rem); }
  .product-hero h1 { font-size: clamp(2rem, 8.8vw, 2.75rem); max-width: 12ch; }
  .product-hero-copy > p:last-child { max-width: 32ch; }
  .product-radar {
    position: absolute;
    z-index: -1;
    inset-inline-end: -2.4rem;
    top: 0.7rem;
    width: 12rem;
    opacity: 0.72;
  }
  .product-radar-core { width: 24%; }
  .hero-search { width: 100%; }
  .journey-line { width: 75%; }
  .home-board { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  .app-main { padding-top: 0.85rem; padding-inline: 0.75rem; }
  .product-home { gap: 0.75rem; }
  .product-hero { border-radius: 1.4rem; min-height: 21.5rem; }
  .product-status { max-width: 22ch; }
  .product-hero-copy { padding-inline-end: 4.5rem; }
  .product-hero h1 { font-size: clamp(1.85rem, 8.8vw, 2.35rem); line-height: 1.22; }
  .product-hero-copy > p:last-child { font-size: 0.83rem; line-height: 1.7; }
  .product-radar { width: 10.5rem; inset-inline-end: -2.7rem; top: 1rem; }
  .hero-search .search-shell { padding: 0.65rem; }
  .hero-search .search-scope { flex-wrap: nowrap; }
  .hero-search .search-scope-select { flex: 1; min-width: 0; }
  .hero-search .search-field { min-height: 3.25rem; }
  .journey-line { width: 82%; }
  .live-signal { border-radius: 1rem; }
  .live-signal-head { align-items: flex-start; }
  .live-signal-body { align-items: start; flex-direction: column; }
  .live-signal-actions { width: 100%; justify-content: space-between; }
  .live-signal-actions .btn { min-height: 2.75rem; padding-inline: 0.8rem; font-size: 0.82rem; }
  .home-panel { padding: 0.85rem; border-radius: 1rem; }
}

@media (min-width: 60rem) {
  body[data-page="home"] .app-main { padding-top: 2rem; }
  .desktop-nav { gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--border-subtle); border-radius: 0.8rem; background: color-mix(in srgb, var(--surface) 72%, transparent); }
  .desktop-nav a { border-radius: 0.58rem; }
  .desktop-nav a[aria-current="page"] { background: var(--surface-raised); box-shadow: 0 0.3rem 1rem rgba(4, 10, 18, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .product-radar-sweep,
  .product-radar-target,
  .sheet:not([hidden]) .sheet-panel { animation: none !important; }
  .product-radar-sweep { transform: rotate(24deg); }
}

/* Final restrained polish: theme interpolation, signal details and welcome. */
:root[data-theme-ready="true"] body,
:root[data-theme-ready="true"] .app-header,
:root[data-theme-ready="true"] .app-main,
:root[data-theme-ready="true"] .bottom-nav,
:root[data-theme-ready="true"] .product-hero,
:root[data-theme-ready="true"] .live-signal,
:root[data-theme-ready="true"] .home-panel,
:root[data-theme-ready="true"] .entries > .entry,
:root[data-theme-ready="true"] .delivery-note,
:root[data-theme-ready="true"] .empty,
:root[data-theme-ready="true"] .auth-form,
:root[data-theme-ready="true"] .pending-recovery,
:root[data-theme-ready="true"] .search-band,
:root[data-theme-ready="true"] .sheet-panel,
:root[data-theme-ready="true"] .choice,
:root[data-theme-ready="true"] .selection-bar,
:root[data-theme-ready="true"] .search-shell,
:root[data-theme-ready="true"] .search-field,
:root[data-theme-ready="true"] .search-scope-select,
:root[data-theme-ready="true"] .landing-search,
:root[data-theme-ready="true"] .journey-grid li,
:root[data-theme-ready="true"] .notification-preview,
:root[data-theme-ready="true"] .signals-list li,
:root[data-theme-ready="true"] .first-visit-welcome,
:root[data-theme-ready="true"] h1,
:root[data-theme-ready="true"] h2,
:root[data-theme-ready="true"] h3,
:root[data-theme-ready="true"] p,
:root[data-theme-ready="true"] a,
:root[data-theme-ready="true"] span,
:root[data-theme-ready="true"] strong,
:root[data-theme-ready="true"] small,
:root[data-theme-ready="true"] .icon {
  transition-duration: 200ms;
  transition-timing-function: var(--ease);
  transition-property: background-color, border-color, color, fill, stroke, box-shadow, filter;
}
:root[data-theme-ready="true"] .entries > .entry {
  transition-property: background-color, border-color, color, box-shadow, transform;
}
:root[data-theme-ready="true"] .choice {
  transition-property: background-color, border-color, color, box-shadow, transform;
}
:root[data-theme-ready="true"] .sheet-panel {
  transition: transform 280ms var(--ease), opacity 250ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}

.search-field {
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.search-field:focus-within,
.hero-search .search-field:focus-within {
  border-color: var(--signal);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--signal) 17%, transparent),
    0 0 1.1rem color-mix(in srgb, var(--signal) 9%, transparent);
}
.search-field:focus-within .icon { color: var(--saffron-ink); }

.bottom-nav a[aria-current="page"] .icon {
  opacity: 1;
  filter: drop-shadow(0 0 0.32rem color-mix(in srgb, var(--signal) 24%, transparent));
}

.radar-signal,
.product-radar-target {
  background: var(--signal);
  box-shadow: 0 0 0 0 var(--radar-ping);
  animation: polish-radar-ping 4.8s ease-out infinite;
}
.radar-signal-two {
  inset-inline-start: 67%;
  inset-block-start: 61%;
  width: 0.58rem;
  height: 0.58rem;
  animation-delay: 2.1s;
}
.product-radar-target-two {
  inset-inline-start: 69%;
  inset-block-start: 63%;
  width: 0.48rem;
  height: 0.48rem;
  animation-delay: 2.1s;
}
@keyframes polish-radar-ping {
  0%, 12%, 100% { box-shadow: 0 0 0 0 var(--radar-ping); opacity: 0.72; }
  38% { box-shadow: 0 0 0 0.8rem transparent; opacity: 1; }
  39%, 99% { box-shadow: 0 0 0 0 transparent; opacity: 0.72; }
}

.how-it-works-link { gap: 0.55rem; }
.scroll-cue {
  width: 0.48rem;
  height: 0.48rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: scroll-cue-nudge 700ms var(--ease) 2;
}
@keyframes scroll-cue-nudge {
  50% { translate: 0 4px; }
}

:root[data-welcome-pending="true"] .first-visit-welcome[hidden] { display: grid !important; }
:root[data-welcome-pending="true"] body { overflow: hidden; }
body[data-welcome-open="true"] { overflow: hidden; }
.first-visit-welcome {
  position: fixed;
  inset: 0;
  z-index: 1000;
  place-items: center;
  overflow-y: auto;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 24%, var(--signal-soft), transparent 24rem),
    var(--canvas);
  color: var(--text-primary);
  opacity: 1;
  transition: opacity 200ms var(--ease), visibility 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.first-visit-welcome.is-leaving { opacity: 0; visibility: hidden; }
.welcome-panel {
  width: min(100%, 28rem);
  min-height: min(47rem, calc(100dvh - 2rem));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(0.8rem, 2.2vh, 1.2rem);
  text-align: center;
}
.welcome-identity { display: flex; align-items: center; justify-content: center; gap: 0.7rem; direction: ltr; }
.welcome-mark { width: 3.35rem; height: 3.35rem; position: relative; flex: none; }
.welcome-mark .brand-art { position: absolute; inset: 0; }
.welcome-wordmark { display: flex; align-items: baseline; gap: 0.25em; font-size: 1.45rem; line-height: 1; }
.welcome-wordmark span { color: var(--text-primary); font-family: var(--font-serif); }
.welcome-wordmark b { color: var(--signal); font-family: var(--font-display); font-weight: 650; }
.welcome-radar {
  width: clamp(9.5rem, 29vh, 12.5rem);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--radar-grid);
  border-radius: 50%;
  background: radial-gradient(circle, var(--signal-soft), transparent 68%);
}
.welcome-radar-grid {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    linear-gradient(transparent calc(50% - 0.5px), var(--radar-grid) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(90deg, transparent calc(50% - 0.5px), var(--radar-grid) 50%, transparent calc(50% + 0.5px));
}
.welcome-radar-ring { position: absolute; border: 1px solid var(--radar-grid); border-radius: 50%; }
.welcome-radar-ring-one { inset: 19%; }
.welcome-radar-ring-two { inset: 36%; }
.welcome-radar-sweep {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: conic-gradient(from 270deg, transparent 0deg 347deg, color-mix(in srgb, var(--signal) 8%, transparent) 351deg, color-mix(in srgb, var(--signal) 42%, transparent) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 13%, #000 20% 94%, transparent 100%);
  mask: radial-gradient(circle, transparent 0 13%, #000 20% 94%, transparent 100%);
  animation: welcome-radar-sweep 1.65s linear 250ms 2 both;
}
.welcome-radar-sweep::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--signal) 58%, transparent), transparent);
  transform: translateY(-0.5px);
}
.welcome-radar-core { width: 0.5rem; aspect-ratio: 1; position: relative; z-index: 2; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0.3rem var(--signal-soft); }
.welcome-radar-ping { position: absolute; width: 0.46rem; aspect-ratio: 1; border-radius: 50%; background: var(--signal); opacity: 0; }
.welcome-radar-ping-one { inset-inline-start: 27%; inset-block-start: 31%; animation: welcome-radar-ping 1.55s ease-out 550ms 1 both; }
.welcome-radar-ping-two { inset-inline-start: 68%; inset-block-start: 64%; animation: welcome-radar-ping 1.55s ease-out 1.15s 1 both; }
@keyframes welcome-radar-sweep { to { transform: rotate(360deg); } }
@keyframes welcome-radar-ping {
  0% { opacity: 0; box-shadow: 0 0 0 0 var(--radar-ping); }
  22% { opacity: 1; }
  65%, 100% { opacity: 0.65; box-shadow: 0 0 0 0.7rem transparent; }
}
.welcome-headline { max-width: 17ch; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.35; font-weight: 850; }
.welcome-features { width: min(100%, 24rem); display: grid; gap: 0.55rem; text-align: start; }
.welcome-features li {
  display: grid;
  grid-template-columns: minmax(5.4rem, auto) 1fr;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.65rem 0.8rem;
  border-inline-start: 2px solid var(--signal);
  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
  opacity: 0;
  animation: welcome-feature-in 330ms var(--ease) forwards;
}
.welcome-features li:nth-child(1) { animation-delay: 350ms; }
.welcome-features li:nth-child(2) { animation-delay: 570ms; }
.welcome-features li:nth-child(3) { animation-delay: 790ms; }
.welcome-features strong { color: var(--saffron-ink); font-size: 0.86rem; }
.welcome-features span { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.6; }
@keyframes welcome-feature-in { from { opacity: 0; transform: translateY(0.35rem); } to { opacity: 1; transform: translateY(0); } }
.welcome-actions { width: min(100%, 20rem); display: grid; justify-items: stretch; gap: 0.25rem; }
.welcome-actions .btn { width: 100%; }
.welcome-skip {
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.welcome-skip:hover { color: var(--text-primary); }
.welcome-skip:focus-visible { outline: 2px solid var(--signal); outline-offset: -0.15rem; border-radius: 0.5rem; }

@media (max-width: 30rem) {
  .welcome-panel { min-height: calc(100dvh - 2rem); gap: clamp(0.65rem, 1.7vh, 0.95rem); }
  .welcome-radar { width: clamp(8.8rem, 24vh, 10.8rem); }
  .welcome-features li { padding-block: 0.52rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme-ready="true"] body,
  :root[data-theme-ready="true"] body *,
  .first-visit-welcome { transition-duration: 0.01ms !important; }
  .radar-signal,
  .product-radar-target,
  .scroll-cue,
  .welcome-radar-sweep,
  .welcome-radar-ping,
  .welcome-features li { animation: none !important; }
  .scroll-cue { translate: 0; }
  .welcome-radar-sweep { transform: rotate(24deg); }
  .welcome-radar-ping { opacity: 0.75; }
  .welcome-features li { opacity: 1; transform: none; }
}