/* ============================================================
   LEVR Facilitator Dashboard — desktop-primary, reference width 1440.
   Built against facilitator-dash-DESIGN-PLAN.md.

   The :root block below is the flywheel-v2 token block copied
   VERBATIM from facilitator-ios/src/styles.css, followed by that
   file's scoped neutral-black divergence block, also verbatim.
   Nothing here is re-derived. The three measured corrections the
   plan names (§9.2 --ink-400 banned for text, §9.4 the badge
   numeral, §9.5 the focus ring) are applied at the USE sites, not
   by editing the token values.
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  /* Brand blue (SGA #2D6FB7 — HSL 210/60/45, under 80% sat cap) */
  --blue-50:  #EEF4FB;
  --blue-100: #D9E7F5;
  --blue-200: #AECBEA;
  --blue-300: #7FAADD;
  --blue-400: #5189CB;
  --blue-500: #2D6FB7;
  --blue-600: #245C9B;
  --blue-700: #1C4A7E;
  --focus-ring: rgba(45,111,183,0.18);
  /* Monochrome focus halo — LEVR platform UI is B&W (change-brief-6) */
  --focus-ink: rgba(14,23,38,0.14);

  /* Neutrals — single cool/slate family */
  --ink-950: #0E1726;
  --ink-900: #152033;
  --ink-800: #1B2740;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E3E8EF;
  --ink-100: #EEF1F5;
  --ink-50:  #F6F8FA;
  --surface: #FFFFFF;
  --page-bg: #EEF1F4;

  /* Semantic */
  --success: #2E9A6B;
  --error:   #C2463C;
  --warn:    #B7791F;

  /* Radii — varied by context (change-brief-3 §1: doubled card, proportional inner) */
  --radius-card: 48px;
  --radius-image: 30px;
  --radius-button: 12px;
  --radius-pill: 9999px;
  --radius-badge: 12px;
  --radius-search: 20px;

  /* Shadows — soft, layered, blue-tinted (#102A48). These STAY (r2 §D1). */
  --shadow-card-rest:  0 1px 2px rgba(16,42,72,.04), 0 6px 20px rgba(16,42,72,.06);
  --shadow-card-hover: 0 2px 6px rgba(16,42,72,.06), 0 18px 44px rgba(16,42,72,.14);
  --shadow-pill:       0 1px 2px rgba(16,42,72,.10), 0 2px 8px rgba(16,42,72,.08);
  --shadow-search:     0 1px 2px rgba(16,42,72,.04), 0 4px 18px rgba(16,42,72,.07);
  --shadow-badge:      0 1px 3px rgba(16,42,72,.12);

  /* Alert accent — the one sanctioned non-monochrome chrome color, reserved
     strictly for the review-count notification badge (change-brief-9 rev). */
  --alert:     #E5484D;
  --alert-ink: #FFFFFF;

  /* Motion tokens */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-video: 450ms;
  --dur-rise: 470ms;                 /* gentle hover rise + slow zoom (change-brief-2 #3) */
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --ease-out-soft: cubic-bezier(.16,1,.3,1);
  --ease-press: cubic-bezier(.2,0,0,1);

  /* Type */
  --font-ui: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ============================================================
   ⚠ DELIBERATE DIVERGENCE — copied with facilitator-ios. SCOPED
   TO THIS APP. DO NOT propagate to flywheel-v2/ or flywheel-landing/.

   --ink-950 (#0E1726) is correct as INK but reads as DEEP BLUE when
   it fills a 318 × 382 card. Chad wants black. So every large black
   SURFACE in this app — engagement cards, the brief card, primary
   pills, the selected rail segment, the voice circles — uses the
   neutral values below. Everything else (type ink, shadows,
   hairlines, radii, Geist) still inherits from the block above.

   --card-black is #0A0A0A rather than #000 so the pressed state
   (#000) has a real darker step to move to. The rgba(255,255,255,.10)
   inset hairline reads identically on both.
   ============================================================ */
:root {
  --card-black:       #0A0A0A;
  --card-black-press: #000000;
  --card-gray:        #242424;      /* reserved; unused in this build */
  --card-gray-press:  #1B1B1B;
  --card-white:       #FFFFFF;
  --card-white-press: #F1F3F6;
  --card-white-lock:  #DFE3E8;
  --inv-1: #0A0A0A;
  --inv-2: rgba(10,10,10,.58);
  --inv-3: rgba(10,10,10,.42);
  --inv-hair: rgba(10,10,10,.12);
}

/* App-local geometry — §2.2 / §9.7 measurements given a name so the
   layout math is checkable in one place. Not new design values. */
:root {
  --track-min: 288px;          /* the grid's minmax floor */
  --grid-gap: 24px;
  --grid-max: 1680px;
  --page-pad: 48px;
  --orb-clear: 104px;          /* the orb's bottom lane */
  --detail-max: 1180px;
  --ref-col: 380px;
  --hair: rgba(16,42,72,.08);  /* w-hair — table dividers */
  --inset-hair: inset 0 0 0 1px rgba(255,255,255,.10);   /* b-hair */
  --b-1: #FFFFFF;
  --b-2: rgba(255,255,255,.62);
  --b-3: rgba(255,255,255,.50);
  --modal-shadow: 0 10px 30px rgba(16,42,72,.16), 0 40px 80px rgba(16,42,72,.28);
  --orb-shadow: 0 1px 3px rgba(14,23,38,.18), 0 6px 18px rgba(14,23,38,.20);
  --menu-shadow: 0 8px 24px rgba(16,42,72,.12), 0 30px 60px rgba(16,42,72,.20);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }        /* clip, not hidden — does not break sticky */
html, body { margin: 0; padding: 0; }
body {
  min-height: 100dvh;
  background: var(--page-bg);
  color: var(--ink-950);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select {
  font: inherit; color: inherit; margin: 0;
  background: none; border: 0; border-radius: 0;
}
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
code { font-family: var(--font-mono); }
[x-cloak] { display: none !important; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tab { font-variant-numeric: tabular-nums; }

/* ============================================================
   §9.5 FOCUS — one ring, everywhere, on every ground.
   A 2px white gap then a 2px ink ring. :focus-visible ONLY.
   ============================================================ */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-950);
}
/* On the black surfaces the same construction holds: the white gap
   separates the ring from the element, the ink ring from the page. */
.card--black:focus-visible,
.brief--ready:focus-visible,
.rail__seg[aria-selected="true"]:focus-visible {
  box-shadow: var(--inset-hair), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-950);
}
/* Menu items inside the dark zone — a white ring is the only thing
   that reads on --ink-950. */
.nav-menu__dark .nav-menu__item:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
/* Fields take the border change PLUS the ring. */
.field:focus-visible, .ta:focus-visible, .minifield:focus-visible,
.composer__input:focus-visible, .search__input:focus-visible {
  border-color: var(--ink-700);
}

/* ============================================================
   CONTROLS — every target ≥ 44 × 44; every primary 56px.
   ============================================================ */
.pill {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 56px; padding: 0 22px;
  border-radius: var(--radius-pill);
  font-size: 17px; font-weight: 600; letter-spacing: -.010em;
  transition: transform var(--dur-fast) var(--ease-press),
              background var(--dur-base) var(--ease-smooth),
              border-color var(--dur-base) var(--ease-smooth),
              box-shadow var(--dur-base) var(--ease-smooth);
}
.pill:active:not(:disabled) { transform: scale(.97); }
.pill--dark { background: var(--card-black); color: var(--b-1); box-shadow: var(--shadow-pill); }
.pill--dark:active:not(:disabled) { background: var(--card-black-press); }
.pill--light { background: var(--surface); color: var(--card-black); }
.pill--light:hover { background: rgba(255,255,255,.88); }
.pill--ghost { background: var(--surface); color: var(--ink-950); border: 1px solid var(--ink-200); }
.pill--ghost:hover:not(:disabled) { background: var(--ink-50); border-color: var(--ink-300); }
.pill--sm { height: 44px; width: auto; padding: 0 18px; font-size: 15px; }
.pill:disabled {
  background: var(--ink-200); color: var(--ink-600);
  box-shadow: none; cursor: not-allowed;
}
.pill--ghost:disabled { background: var(--ink-100); border-color: var(--ink-200); }

.ghostmono {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600);
  transition: color var(--dur-fast) var(--ease-smooth);
}
.ghostmono:hover { color: var(--ink-950); }
.ghostmono--right { align-self: flex-end; }

.linky {
  min-height: 44px; padding: 0 2px;
  font-size: 13.5px; font-weight: 400; color: var(--ink-950);
  text-decoration: underline; text-underline-offset: 4px;
}
.linky--quiet { color: var(--ink-600); text-decoration: none; }
.linky--quiet:hover { color: var(--ink-950); text-decoration: underline; text-underline-offset: 4px; }
.linky--mono {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; min-height: 44px;
}

.iconbtn {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  color: var(--ink-600);
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.iconbtn:hover { background: var(--ink-50); color: var(--ink-950); }
.iconbtn--sm { width: 40px; height: 40px; }

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--ink-200); border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 11.5px; font-weight: 500; color: var(--ink-700);
  transition: background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.chip:hover { background: var(--ink-50); border-color: var(--ink-300); }
.chip.mono { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.chip--ghost { min-height: 32px; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.chip--wide { flex: 1 1 0; }

/* fields */
.field {
  display: block; width: 100%; height: 60px; padding: 0 22px;
  border: 1px solid var(--ink-200); border-radius: var(--radius-search);
  background: var(--ink-50);
  font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-950);
  transition: border-color var(--dur-base) var(--ease-smooth),
              background var(--dur-base) var(--ease-smooth),
              box-shadow var(--dur-base) var(--ease-smooth);
}
.field::placeholder { color: var(--ink-500); }
.field:focus { outline: none; border-color: var(--ink-700); background: var(--surface); }
.field--code {
  font-family: var(--font-mono); font-size: 22px; font-weight: 500;
  letter-spacing: .40em; text-align: center; padding: 0 8px 0 22px;
}
.field--code::placeholder { color: var(--ink-300); letter-spacing: .40em; }
.field--inline { height: 48px; padding: 0 16px; font-size: 15px; }
.field--sm { height: 44px; padding: 0 12px; font-size: 14px; flex: 1 1 0; min-width: 0; }
.field.is-invalid { border-width: 1.5px; border-color: var(--ink-950); }

.ta {
  display: block; width: 100%; min-height: 120px; max-height: 320px;
  padding: 16px 18px; resize: vertical;
  border: 1px solid var(--ink-200); border-radius: var(--radius-image);
  background: var(--ink-50);
  font-size: 15px; font-weight: 450; line-height: 1.6; color: var(--ink-950);
  max-width: 66ch;
  transition: border-color var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth);
}
.ta::placeholder { color: var(--ink-500); }
.ta:focus { outline: none; border-color: var(--ink-700); background: var(--surface); }
.ta--sm { min-height: 88px; }

.minifield {
  height: 40px; min-width: 0; width: 100%; padding: 0 12px;
  border: 1px solid var(--ink-200); border-radius: var(--radius-search);
  background: var(--ink-50);
  font-size: 14px; font-weight: 500; color: var(--ink-950);
  transition: border-color var(--dur-base) var(--ease-smooth);
}
.minifield::placeholder { color: var(--ink-500); }
.minifield:focus { outline: none; border-color: var(--ink-700); background: var(--surface); }
.minifield.is-invalid { border-width: 1.5px; border-color: var(--ink-950); }
.minifield--role { max-width: 108px; }

.inline-error, .minierr {
  margin-top: 10px;
  font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--ink-950);
}
.minierr { font-size: 12px; margin-top: 6px; }

/* checkbox — 22 × 22, 44px hit area via the label */
.terms {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 44px; padding: 11px 0;
  font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--ink-950);
  cursor: pointer;
}
.cbx { position: absolute; opacity: 0; width: 22px; height: 22px; }
.cbx__box {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: var(--radius-button);
  box-shadow: inset 0 0 0 2px var(--ink-950);
  color: transparent;
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.cbx:checked + .cbx__box { background: var(--ink-950); color: var(--b-1); }
.cbx:focus-visible + .cbx__box { box-shadow: inset 0 0 0 2px var(--ink-950), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-950); }
.terms--sm { font-size: 13px; padding: 8px 0; }
.terms--inline { min-height: 44px; align-items: center; white-space: nowrap; }
.tlink { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   TYPE ROLES (§9.6)
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600);
}
.eyebrow--gap { display: block; margin-top: 24px; }
.helper { margin-top: 8px; font-size: 12.5px; font-weight: 400; color: var(--ink-600); }
.helper--wide { max-width: 66ch; }
.emptyline { padding: 16px 0; font-size: 15px; font-weight: 400; color: var(--ink-600); }
.readvalue { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink-950); max-width: 66ch; }

/* ============================================================
   §1 LOGIN
   ============================================================ */
.login { position: fixed; inset: 0; overflow: hidden; }
.login__bg {
  position: absolute; inset: 0; z-index: 0;
  background: #F4F5F6 center / cover no-repeat url("assets/levr-loop-poster.jpg");
}
/* Full-bleed, ungraded. No scrim, no tint, no filter. */
.login__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.login__plate {
  position: relative; z-index: 1;
  width: min(440px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 44px 40px 32px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card-hover), inset 0 0 0 1px rgba(16,42,72,.06);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}
.login { display: grid; place-items: center; padding: 24px; }
@media (min-width: 1024px) {
  .login { place-items: center start; padding: 24px 0; }
  .login__plate { margin-left: max(64px, 7vw); }
}
.login__mark { width: 144px; height: 144px; margin: 0 auto; }
.login__eyebrow {
  margin-top: 26px; text-align: center;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600);
}
.login__checking {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 34px; min-height: 60px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-500);
}
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--ink-200); border-top-color: var(--ink-600);
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.login__slot { margin-top: 30px; animation: fade-in 160ms var(--ease-smooth) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.login__go { margin-top: 20px; }
.login__or {
  position: relative; margin: 24px 0;
  text-align: center;
}
.login__or::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--ink-200);
}
.login__or span {
  position: relative; padding: 0 12px; background: var(--surface);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; color: var(--ink-500);
}
.login__sso { margin-top: 12px; font-size: 17px; font-weight: 600; color: var(--ink-950); }
.login__sso:first-of-type { margin-top: 0; }
.sso-mark { flex: none; width: 20px; height: 20px; }
.login__invite {
  margin-top: 24px; text-align: center;
  font-size: 13.5px; font-weight: 400; color: var(--ink-600);
}
.login__note {
  margin-bottom: 16px; text-align: center;
  font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--ink-600);
}
.login__note b { font-weight: 500; color: var(--ink-950); }
.login__expiry {
  margin-top: 14px; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500);
}
.login__links {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 20px; flex-wrap: wrap;
}

/* ============================================================
   §2 THE ENGAGEMENT GRID
   ============================================================ */
.grid-page { max-width: var(--grid-max); margin-inline: auto; padding: 0 var(--page-pad); }
.grid-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 40px 0 32px;
  background: linear-gradient(var(--page-bg) 72%, rgba(238,241,244,0));
}
.search {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 auto; max-width: 720px; height: 60px; padding: 0 16px;
  border: 1px solid var(--ink-200); border-radius: var(--radius-search);
  background: var(--surface); box-shadow: var(--shadow-search);
  transition: border-color var(--dur-base) var(--ease-smooth);
}
.search:hover { border-color: var(--ink-300); }
.search:focus-within { border-color: var(--ink-700); box-shadow: var(--shadow-search), 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-950); }
.search__ico { flex: none; color: var(--ink-500); }
.search__input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  font-size: 15px; font-weight: 450; color: var(--ink-950);
  -webkit-appearance: none; appearance: none;
}
.search__input::-webkit-search-cancel-button { display: none; }
.search__input::placeholder { color: var(--ink-500); }
.search__input:focus { outline: none; }
.kbd-pill { flex: none; display: inline-flex; gap: 3px; }
.kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 6px; background: var(--ink-100);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink-600);
}
.search__clear { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border-radius: 50%; color: var(--ink-600); }
.search__clear:hover { background: var(--ink-50); color: var(--ink-950); }
.grid-count {
  flex: none;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-600);
}

/* §2.2 — auto-fill, never a hardcoded column count. */
.eng-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--track-min), 1fr));
  gap: var(--grid-gap);
  padding-bottom: var(--orb-clear);
}
.eng-cell { min-width: 0; }
.eng-cell--strip { grid-column: 2 / -1; align-self: start; padding: 8px 0 0 8px; }
.eng-grid.is-revealed .eng-cell {
  animation: reveal 420ms var(--ease-out-soft) both;
  animation-delay: var(--d, 0ms);
}
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- the card ---- */
.card {
  position: relative; display: flex; flex-direction: column;
  width: 100%; aspect-ratio: 5 / 6; padding: 30px 28px 28px;
  border-radius: var(--radius-card);
  background: var(--card-white); box-shadow: var(--shadow-card-rest);
  overflow: hidden;
  transition: transform var(--dur-rise) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-smooth),
              background var(--dur-base) var(--ease-smooth);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); will-change: transform; }
.card:active { transform: scale(.985); transition-duration: var(--dur-fast); transition-timing-function: var(--ease-press); }
.card__status { display: flex; align-items: center; min-height: 28px; }
.card__date {
  margin-top: 18px;
  font-size: 46px; font-weight: 600; letter-spacing: -.030em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink-950);
}
.card__when {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600);
}
.card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card__co {
  font-size: 22px; font-weight: 600; letter-spacing: -.018em; line-height: 1.2;
  color: var(--ink-950);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__sub {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* black cards — the inset hairline is NOT optional */
.card--black { background: var(--card-black); box-shadow: var(--shadow-card-hover); }
.card--black::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; box-shadow: var(--inset-hair);
}
.card--black:hover { background: var(--card-black-press); }
.card--black:active { background: var(--card-black-press); }
.card--black .card__date, .card--black .card__co { color: var(--b-1); }
.card--black .card__when, .card--black .card__sub { color: var(--b-2); }
.card--black .card__status { color: var(--b-1); }
/* error: a 1.5px ink ring REPLACES the white hairline. No red. */
.card--black.is-failed::after { box-shadow: inset 0 0 0 1.5px var(--ink-950); }

/* §2.4 the New engagement card — an aperture, not a surface */
.card--new {
  order: -1;
  align-items: center; justify-content: center;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink-950);
}
.card--new:hover { box-shadow: inset 0 0 0 2px var(--ink-950), var(--shadow-card-rest); transform: none; }
.card--new:active { transform: scale(.985); }
.card__circle {
  display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--card-black); color: var(--b-1);
  transition: transform var(--dur-rise) var(--ease-out-soft), background var(--dur-base) var(--ease-smooth);
}
.card--new:hover .card__circle { transform: translateY(-4px) scale(1.06); }
.card--new:active .card__circle { background: var(--card-black-press); }
.card__circle--sm { width: 56px; height: 56px; }
.card--new .card__foot { position: absolute; left: 28px; right: 28px; bottom: 28px; }

/* skeletons — 8 tracks at the real aspect ratio, never a spinner */
.card--skel { background: var(--ink-100); box-shadow: none; }
.skel {
  display: block; position: relative; overflow: hidden;
  border-radius: 8px; background: var(--ink-200);
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 1.4s var(--ease-smooth) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skel--date { width: 52%; height: 46px; margin-top: 46px; }
.skel--subdate { width: 38%; height: 12px; margin-top: 12px; }
.skel--co { width: 64%; height: 22px; }
.skel--sub { width: 80%; height: 11px; }
.skel--h1 { width: 44%; height: 40px; margin-bottom: 14px; }
.skel--h2 { width: 30%; height: 13px; margin-bottom: 40px; }
.skel--block { width: 100%; height: 220px; border-radius: var(--radius-image); margin-top: 40px; }
.skel--short { height: 140px; }

/* the two status dots — the only colour in the application besides the
   badge. Amber is a HOLLOW ring, green is SOLID. The fill carries the
   meaning without colour. */
.dot { display: block; width: 10px; height: 10px; border-radius: 50%; }
.dot--ok { background: var(--success); }
.dot--warn { box-shadow: inset 0 0 0 1.5px var(--warn); }

.statechip { display: inline-flex; align-items: center; gap: 9px; }
.statechip .mono { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tick { flex: none; }

/* first sign-in rhythm strip */
.first-wrap { padding-bottom: var(--orb-clear); }
.eng-grid--first { padding-bottom: 0; }
.rhythm__head { max-width: 22ch; font-size: 30px; font-weight: 600; letter-spacing: -.022em; line-height: 1.14; }
.rhythm { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.rhythm li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; }
.rhythm__n { grid-row: 1 / 3; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--ink-500); padding-top: 3px; }
.rhythm__t { font-size: 16px; font-weight: 600; color: var(--ink-950); }
.rhythm__b { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--ink-600); max-width: 52ch; }

.noresult { font-size: 15px; font-weight: 400; color: var(--ink-600); }
.panel-msg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding: 80px 0 var(--orb-clear);
}
.panel-msg--flush { padding: 40px 0; }
.panel-msg__line { font-size: 22px; font-weight: 600; letter-spacing: -.018em; }

/* ============================================================
   §3 THE NAV ORB — copied from flywheel-v2/src/styles.css
   ============================================================ */
.nav-orb-wrap { position: fixed; bottom: 24px; left: 28px; z-index: 80; }
.nav-orb {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--ink-950); color: #FFFFFF;
  box-shadow: var(--orb-shadow);
  transition: box-shadow var(--dur-base) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-soft),
              background var(--dur-base) var(--ease-smooth);
}
.nav-orb:hover { background: #060B14; transform: scale(1.06); box-shadow: 0 2px 6px rgba(14,23,38,.24), 0 10px 26px rgba(14,23,38,.26); }
.nav-orb:active { transform: scale(.97); transition-duration: var(--dur-fast); }
.nav-orb:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink-950); }
.nav-orb.is-open { background: #060B14; }
.nav-orb__mark { width: 24px; height: 24px; overflow: visible; }

/* §3.5 — --alert lives here and in the My flags row count. Nowhere else.
   The numeral is --ink-950 (4.59:1), not white (3.91:1). */
.nav-orb__badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: var(--alert); color: var(--ink-950);
  font-size: 11px; font-weight: 650; line-height: 1;
  box-shadow: 0 0 0 2px var(--surface);
}
.nav-orb__label {
  position: absolute; top: 50%; left: calc(100% + 8px);
  transform: translate(-4px, -50%);
  padding: 4px 9px; white-space: nowrap;
  background: var(--ink-950); color: var(--b-1);
  font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: -.005em;
  border-radius: var(--radius-badge); box-shadow: var(--shadow-badge);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
}
.nav-orb-wrap:hover .nav-orb__label,
.nav-orb:focus-visible ~ .nav-orb__label { opacity: 1; transform: translate(0, -50%); }

.nav-menu {
  position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 90;
  width: 292px; padding: 8px;
  background: var(--surface); border: 1px solid var(--ink-200);
  border-radius: 20px; overflow: hidden;
  box-shadow: var(--menu-shadow);
  transform-origin: bottom left;
}
.nav-menu-active { transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft); }
.nav-menu__eyebrow {
  margin: 10px 10px 4px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-500);
}
.nav-menu__item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 9px 10px; border-radius: 14px;
  text-align: left; color: var(--ink-800);
  transition: background var(--dur-fast) var(--ease-smooth);
}
.nav-menu__item:hover { background: var(--ink-50); }
.nav-menu__item--back { margin-bottom: 2px; }
.nav-menu__ico {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 10px; background: var(--ink-950); color: var(--b-1);
}
.nav-menu__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-menu__name {
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-menu__desc { font-size: 12px; color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-menu__chev { flex: none; color: var(--ink-300); display: grid; place-items: center; }
.nav-menu__count {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: var(--alert); color: var(--ink-950);
  font-size: 11px; font-weight: 650; line-height: 1;
}
/* the dark zone */
.nav-menu__dark { margin: 8px -8px -8px; padding: 6px 8px 10px; background: var(--ink-950); }
.nav-menu__dark .nav-menu__eyebrow { color: var(--b-3); }
.nav-menu__dark .nav-menu__item { color: var(--b-1); }
.nav-menu__dark .nav-menu__item:hover { background: rgba(255,255,255,.09); }
.nav-menu__dark .nav-menu__name { color: var(--b-1); }
.nav-menu__dark .nav-menu__desc { color: var(--b-2); }
.nav-menu__dark .nav-menu__ico { background: rgba(255,255,255,.14); color: var(--b-1); }
.nav-menu__dark .nav-menu__chev { color: var(--b-3); }
/* the identity row is a LABEL, not a button */
.nav-menu__ident { display: flex; align-items: center; gap: 12px; padding: 8px 10px 10px; }

/* ============================================================
   §4 GUIDED SETUP — the two-pane checkout
   ============================================================ */
.setup {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px;
  max-width: 1440px; margin-inline: auto; padding: 48px;
}
.conv {
  display: flex; flex-direction: column;
  height: calc(100dvh - 96px); min-height: 520px;
  min-width: 0;
}
.conv__blank {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 28px;
}
.conv__mark { width: 88px; height: 88px; }
.conv__lead { font-size: 26px; font-weight: 600; letter-spacing: -.020em; line-height: 1.18; }

.voicebtn { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; border-radius: var(--radius-card); }
.voicebtn__circle {
  display: grid; place-items: center;
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--card-black); color: var(--b-1);
  box-shadow: var(--inset-hair);
  transition: transform var(--dur-rise) var(--ease-out-soft), background var(--dur-base) var(--ease-smooth);
}
.voicebtn:hover .voicebtn__circle { transform: translateY(-4px) scale(1.06); }
.voicebtn:active .voicebtn__circle { transform: scale(.97); transition-duration: var(--dur-fast); background: var(--card-black-press); }
.voicebtn--lg .voicebtn__circle { width: 78px; height: 78px; }
.voicebtn--md { align-self: center; margin: 4px 0 8px; }
.voicebtn--sm .voicebtn__circle { width: 44px; height: 44px; }
.voicebtn__label { font-size: 15px; font-weight: 600; color: var(--ink-950); font-variant-numeric: tabular-nums; }

.conv__live { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.strip {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 56px; border-bottom: 1px solid var(--ink-200);
}
.strip__state { display: flex; align-items: center; gap: 9px; }
.strip__state .mono { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-950); }
.strip__sep { color: var(--ink-500); }
.statedot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-950); }
.statedot.is-muted { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-950); }

.transcript {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 28px 0; scroll-behavior: smooth; overflow-anchor: auto;
}
.turn { display: flex; gap: 0; margin-bottom: 20px; }
.turn__who {
  flex: none; width: 56px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-500); padding-top: 4px;
}
.turn__txt { flex: 1 1 auto; max-width: 66ch; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--ink-950); }
.sysline {
  margin: 0 0 20px; padding-left: 14px;
  border-left: 2px solid var(--ink-950);
  font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-950);
}

.composer {
  flex: none; display: flex; align-items: center; gap: 14px;
  height: 72px; padding: 0 10px 0 8px;
  border: 1px solid var(--ink-200); border-radius: var(--radius-image);
  background: var(--surface); box-shadow: var(--shadow-search);
}
.mute {
  flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--card-black); color: var(--b-1);
  transition: background var(--dur-base) var(--ease-smooth),
              box-shadow var(--dur-base) var(--ease-smooth),
              transform var(--dur-fast) var(--ease-press),
              color var(--dur-base) var(--ease-smooth);
}
.mute:active { transform: scale(.97); }
.mute.is-muted { background: var(--surface); color: var(--ink-950); box-shadow: inset 0 0 0 1.5px var(--ink-950); }
.composer__word {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-600);
}
.composer__word.is-muted { color: var(--ink-950); }
.composer__input { flex: 1 1 auto; min-width: 0; height: 56px; font-size: 15px; font-weight: 450; color: var(--ink-950); }
.composer__input::placeholder { color: var(--ink-500); }
.composer__input:focus { outline: none; }
.composer__send {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--ink-600);
  transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.composer__send:hover { background: var(--ink-50); color: var(--ink-950); }
.composer__hint {
  margin-top: 10px; font-size: 10.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-500);
}

/* ---- the right pane ---- */
.checkout { position: sticky; top: 24px; align-self: start; max-height: calc(100dvh - 144px); }
.checkout__card {
  display: flex; flex-direction: column;
  /* §9.3 short-element rule: --radius-card is only honest above a 240px
     short axis. At `idle` the card holds two lines, so it is floored here
     rather than allowed to become a lozenge. */
  min-height: 240px;
  max-height: calc(100dvh - 144px); overflow-y: auto;
  padding: 32px 30px 30px;
  border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--shadow-card-rest);
}
.checkout__empty { margin-top: 20px; font-size: 15px; font-weight: 400; color: var(--ink-500); }
.slots { margin-top: 20px; animation: fade-in 220ms var(--ease-smooth) both; }
.slot {
  position: relative; display: flex; align-items: baseline; gap: 16px;
  padding: 10px 0 10px 12px; margin-left: -12px;
}
.slot--stack { flex-direction: column; align-items: stretch; gap: 6px; }
.slot::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--ink-950); opacity: 0; transform: scaleY(0); transform-origin: top;
  transition: opacity 600ms var(--ease-smooth), transform var(--dur-base) var(--ease-out-soft);
}
.slot.is-filled::before { opacity: 1; transform: scaleY(1); }
.slot__k {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-600);
}
.slot__k--row { display: flex; align-items: center; justify-content: space-between; }
.slot__v {
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; font-weight: 500; color: var(--ink-950);
  transition: opacity var(--dur-base) var(--ease-smooth);
}
.slot--stack > .slot__v { text-align: left; }
.slot:not(.slot--stack) > .slot__v { text-align: right; }
.slot__v--clamp {
  font-size: 14px; font-weight: 500; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.slot__v.is-empty { color: var(--ink-500); }
.slot__names { font-size: 12px; color: var(--ink-600); }

.emails {
  max-height: 216px; overflow-y: auto;
  border: 1px solid var(--ink-200); border-radius: var(--radius-search);
}
.emailrow { padding: 10px 10px; border-bottom: 1px solid var(--hair); }
.emailrow:last-child { border-bottom: 0; }
.emailrow__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.emailrow__name { font-size: 14px; font-weight: 600; color: var(--ink-950); }
.emailrow__role { font-size: 12px; font-weight: 500; color: var(--ink-600); text-transform: uppercase; letter-spacing: .06em; }
.emailrow__bot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ok { flex: none; color: var(--ink-950); }

.checkout__foot { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--ink-200); }
.feeline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-size: 15px; font-weight: 500; color: var(--ink-950);
}
.feeline .mono { font-size: 15px; font-weight: 600; }
.feeline .is-dim { color: var(--ink-500); }
.needline {
  margin: 2px 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-600);
}

/* ============================================================
   §5 THE DETAIL PAGE
   ============================================================ */
.detail__wrap, .detail .panel-msg, .sheetpage {
  max-width: var(--detail-max); margin-inline: auto;
  padding: 40px var(--page-pad) var(--orb-clear);
}
.sheetpage--narrow { max-width: 820px; }
.detail__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-600);
  transition: color var(--dur-fast) var(--ease-smooth);
}
.backlink:hover { color: var(--ink-950); }

.overflow { position: relative; }
.overflow__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 250px; padding: 8px;
  background: var(--surface); border: 1px solid var(--ink-200);
  border-radius: 20px; box-shadow: var(--menu-shadow);
}
.overflow__menu button {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px;
  border-radius: 14px; text-align: left;
  font-size: 14px; font-weight: 500; color: var(--ink-950);
  transition: background var(--dur-fast) var(--ease-smooth);
}
.overflow__menu button:hover { background: var(--ink-50); }

.detail__co { margin-top: 16px; font-size: 40px; font-weight: 600; letter-spacing: -.024em; line-height: 1.08; }
.detail__co:focus { outline: none; }
.detail__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 14px; flex-wrap: wrap;
}
.detail__dateline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail__dateline > .mono {
  font-size: 13px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-600);
}
.detail__chip { display: inline-flex; }
.statechip__inner { display: inline-flex; align-items: center; gap: 9px; }
.statechip--dark .mono { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-950); }
.movenote {
  display: flex; align-items: center; gap: 16px; margin-top: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-600);
}

/* reschedule popover */
.reschedwrap { position: relative; display: inline-flex; }
.resched {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 50;
  width: min(360px, calc(100vw - 48px)); padding: 20px;
  background: var(--surface); border-radius: var(--radius-image);
  box-shadow: var(--shadow-card-hover), inset 0 0 0 1px var(--ink-200);
}
.resched__chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* §5.6 gives the quick chips 44px; §6.1 gives the flag chips 36px. */
.resched__chips .chip { flex: 1 1 0; min-width: 72px; min-height: 44px; }
.resched__exact { display: flex; gap: 8px; }
.rule { height: 1px; border: 0; background: var(--ink-200); margin: 16px 0; }
.rule--wide { margin: 40px 0; }
.rule--mid { margin: 20px 0; background: var(--ink-300); }

/* the phase rail */
.rail {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  height: 64px; margin-top: 64px; padding: 4px;
  border-radius: var(--radius-image);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink-200);
}
.rail__block {
  position: absolute; top: 4px; left: 4px;
  width: calc((100% - 8px) / 3); height: 56px;
  border-radius: 26px; background: var(--card-black);
  box-shadow: var(--inset-hair);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform var(--dur-slow) var(--ease-out-soft);
}
.rail__seg {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 56px; padding: 0 12px; border-radius: 26px; min-width: 0;
  transition: background var(--dur-base) var(--ease-smooth);
}
.rail__seg:hover[aria-selected="false"] { background: var(--ink-50); }
.rail__n { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-950); }
.rail__s {
  font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-600);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail__seg[aria-selected="true"] .rail__n { color: var(--b-1); }
.rail__seg[aria-selected="true"] .rail__s { color: var(--b-2); }
.rail--skel { display: grid; }
.rail--skel span { border-radius: 26px; background: var(--ink-100); margin: 0 2px; }

.panel { margin-top: 40px; animation: fade-in var(--dur-base) var(--ease-smooth) both; }
.panel:focus { outline: none; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--ref-col); gap: 32px; align-items: start; }
.col-work, .col-ref { min-width: 0; display: flex; flex-direction: column; gap: 40px; }

.block { min-width: 0; }
/* §9.7 — 40px between blocks on the detail page. The two-column setup
   phase gets it from the column flex gap; the single-column build and
   access panels need it here. */
.panel > .block + .block,
.panel > .block + .adv,
.panel > .notice + .block { margin-top: 40px; }
.sheetpage > .backlink + .block { margin-top: 32px; }
.block--tight { gap: 0; }
.block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.block__meta { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.block__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.sentline { display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }

/* tables — rows of records with no hierarchy between them */
.table { border-top: 1px solid var(--hair); }
.scroll-x { overflow-x: auto; }
.trow {
  display: grid; align-items: center; gap: 16px;
  min-height: 56px; padding: 8px 12px;
  border-bottom: 1px solid var(--hair);
  transition: background var(--dur-fast) var(--ease-smooth);
}
.trow--person { grid-template-columns: minmax(120px, 1.1fr) minmax(90px, .7fr) minmax(160px, 1.3fr) auto; }
.trow--file { grid-template-columns: 20px minmax(0, 1fr) auto 40px; min-height: 56px; }
.trow--seg { grid-template-columns: 40px minmax(120px, 1fr) minmax(180px, auto) minmax(84px, auto) 64px; min-height: 60px; }
.trow--head { grid-template-columns: minmax(200px, 1fr) 110px 110px 90px 44px; min-height: 40px; }
.trow--acc { grid-template-columns: minmax(200px, 1fr) 110px 110px 90px 44px; }
.trow--add { grid-template-columns: minmax(180px, 1fr) auto auto auto; min-height: 72px; }
.trow--mcp { grid-template-columns: minmax(200px, 1fr) 90px minmax(150px, auto) auto; }
.trow--flag { grid-template-columns: 88px 150px minmax(180px, 1fr) 40px 24px; min-height: 64px; }
.trow--inv { grid-template-columns: 88px minmax(140px, 1fr) auto; min-height: 48px; }
.table > .trow:hover:not(.trow--head):not(.trow--add) { background: var(--ink-50); }
.trow--head .mono { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.ctr { display: flex; justify-content: center; }
.trow__name { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.trow__role { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600); }
.trow__mail { min-width: 0; }
.trow__mailtxt { font-size: 14px; font-weight: 450; color: var(--ink-700); word-break: break-word; }
.trow--acc .trow__mailtxt, .trow--mcp .trow__mailtxt { font-size: 15px; color: var(--ink-950); }
.trow__end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.trow__fname { font-size: 14px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.trow__size { font-size: 12px; color: var(--ink-600); }
.filico { color: var(--ink-600); }
.trow__n { font-size: 12px; font-weight: 600; color: var(--ink-500); }
.trow__title { font-size: 15px; font-weight: 500; color: var(--ink-950); }
.trow__state { font-size: 12px; font-weight: 500; color: var(--ink-600); text-transform: uppercase; letter-spacing: .06em; }
.trow__words { font-size: 12px; color: var(--ink-600); text-align: right; text-transform: uppercase; letter-spacing: .06em; }
.trow__client { font-size: 14px; font-weight: 500; }
.trow__date { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.trow__status { display: flex; align-items: center; gap: 9px; }
.trow__status .mono { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-950); }
.trow__sum { font-size: 15px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow__count { font-size: 12px; color: var(--ink-600); text-align: right; }
/* failed row — a 1.5px ink ring instead of the hairline. No red. */
.trow--seg.is-failed { box-shadow: inset 0 0 0 1.5px var(--ink-950); border-radius: var(--radius-image); border-bottom-color: transparent; }
.rowghost {
  min-height: 40px; padding: 0 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.trow:hover .rowghost, .rowghost:focus-visible, .trow--seg.is-failed .rowghost { opacity: 1; }
.rowghost:hover { color: var(--ink-950); }
.rowconfirm { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-700); }
.rowconfirm .rowghost { opacity: 1; }

.fdot {
  display: grid; place-items: center; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-300); color: var(--ink-950);
}
.fdot.is-unread { background: var(--ink-950); box-shadow: none; }
.fdot.is-done { width: 14px; height: 14px; box-shadow: none; }

.dropzone {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; margin-top: -1px;
  border: 1px dashed var(--ink-300); border-radius: var(--radius-image);
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-600); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.dropzone:hover { border-color: var(--ink-950); background: var(--ink-50); }

/* the facilitator brief card */
.brief {
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: 4 / 5; padding: 30px 28px 28px;
  border-radius: var(--radius-card);
}
.brief--ready { background: var(--card-black); box-shadow: var(--shadow-card-hover); }
.brief--ready::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; box-shadow: var(--inset-hair);
}
.brief--failed::after { box-shadow: inset 0 0 0 1.5px var(--ink-950); }
.brief__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--b-2); word-break: break-all; }
.brief__lead {
  margin-top: 22px; flex: 1 1 auto; min-height: 0;
  font-size: 19px; font-weight: 500; letter-spacing: -.008em; line-height: 1.4; color: var(--b-1);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.brief__center { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.brief__state { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--b-2); text-align: center; }
.brief__foot {
  flex: none; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex; flex-direction: column; gap: 14px;
}
.brief__foot .mono { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--b-2); }
.brief__foot .pill { width: 100%; height: 48px; }
.brief--none {
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink-950);
  align-items: center; justify-content: center; gap: 24px;
}
.brief__foot--light { border-top-color: var(--ink-200); width: 100%; align-items: stretch; }
.brief__blocked { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); text-align: center; }

/* build phase */
.buildbox {
  padding: 22px 24px; border-radius: var(--radius-image);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink-200);
}
.buildbox--failed { box-shadow: inset 0 0 0 1.5px var(--ink-950); }
.buildbox--ready {
  position: relative; background: var(--card-black);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  box-shadow: var(--inset-hair);
}
.buildbox--ready .buildbox__line { color: var(--b-2); }
.buildbox__line {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-950);
}
.buildbox__act { margin-top: 16px; display: flex; justify-content: flex-end; }
.track { position: relative; height: 3px; margin-top: 16px; background: var(--ink-200); border-radius: 2px; overflow: hidden; }
.track > span {
  display: block; height: 100%; background: var(--ink-950);
  transform-origin: left; transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out-soft);
}
.track--indet > span { width: 40%; transform: none; animation: indet 1.4s var(--ease-smooth) infinite; }
@keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

.adv { margin-top: 40px; }
.adv > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600);
}
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary::before { content: "⌄"; display: inline-block; }
.adv__body { padding: 8px 0 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.adv__row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.adv__row .field--inline { width: min(280px, 100%); }

/* access phase */
.notice {
  margin-bottom: 24px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-600);
}
.hitdot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.hitdot:hover { background: var(--ink-50); }
.accdot {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-300);
  transition: background var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.accdot.is-on { background: var(--ink-950); box-shadow: none; }
.carrylink {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink-950);
  text-decoration: underline; text-underline-offset: 4px; text-align: left;
}
.cmdrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cmd {
  flex: 1 1 340px; min-width: 0; padding: 14px 16px;
  border-radius: var(--radius-image); background: var(--ink-50);
  font-size: 13px; color: var(--ink-950);
  overflow-x: auto; white-space: nowrap;
}

/* ============================================================
   §6 FLAGS
   ============================================================ */
.promise { margin-top: 16px; font-size: 13.5px; font-weight: 400; color: var(--ink-600); }
.thread__meta { display: flex; gap: 8px; margin-top: 20px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); flex-wrap: wrap; }
.thread__h { margin-top: 10px; font-size: 30px; font-weight: 600; letter-spacing: -.022em; line-height: 1.14; max-width: 24ch; }
.thread__h:focus { outline: none; }
.thread__body { margin-top: 18px; max-width: 66ch; font-size: 15px; font-weight: 450; line-height: 1.6; color: var(--ink-950); }
.reply { margin-top: 32px; max-width: 66ch; }
.reply--levr { padding-left: 16px; border-left: 2px solid var(--ink-950); }
.reply__who { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.reply__txt { margin-top: 6px; font-size: 15px; font-weight: 450; line-height: 1.6; }
.reply__at { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-500); }
.threadcomp { margin-top: 40px; max-width: 66ch; }
.threadcomp__act { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }

/* ============================================================
   MODALS, DRAWERS, SCRIMS
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 48px;
  background: rgba(16,42,72,.46);
  animation: fade-in var(--dur-slow) var(--ease-smooth) both;
}
@supports (backdrop-filter: blur(14px)) {
  .scrim--drawer { backdrop-filter: blur(14px); }
  .scrim--modal, .scrim--hard { backdrop-filter: blur(20px); }
}
.scrim--modal, .scrim--hard { background: rgba(6,11,20,.72); }
@supports not (backdrop-filter: blur(1px)) {
  .scrim--modal, .scrim--hard { background: rgba(6,11,20,.88); }
}
.scrim--drawer { place-items: center end; padding: 0; }

.modal {
  position: relative; display: flex; flex-direction: column;
  width: min(880px, calc(100vw - 96px));
  max-height: calc(100dvh - 96px);
  border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--modal-shadow);
  animation: modal-in 260ms var(--ease-out-soft) both;
}
@keyframes modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.modal--560 { width: min(560px, calc(100vw - 48px)); }
.modal--sheet {
  width: min(420px, calc(100vw - 48px));
  padding: 40px 40px 32px; gap: 12px; text-align: left;
}
.modal__x { position: absolute; top: 16px; right: 16px; z-index: 2; }
.modal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 48px 56px 0; }
.modal__scroll--pad { padding: 40px 40px 0; }
.modal__pad { height: 32px; }
.modal__h { margin-top: 12px; font-size: 30px; font-weight: 600; letter-spacing: -.022em; line-height: 1.14; max-width: 24ch; }
.modal__h--sm { font-size: 22px; letter-spacing: -.018em; margin-top: 0; }
.modal__h--tight { margin-top: 0; }
.modal__sub { margin-top: 6px; font-size: 16px; font-weight: 400; color: var(--ink-600); }
.modal__body { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--ink-600); margin-bottom: 8px; }
.modal--sheet .pill { margin-top: 4px; }
.modal__footer {
  flex: none; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 72px; padding: 0 56px;
  border-top: 1px solid var(--ink-200); background: var(--surface);
}
.modal__footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px;
  background: linear-gradient(rgba(255,255,255,0), var(--surface)); pointer-events: none;
}
.modal__footer .mono { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.modal__acts { display: flex; gap: 10px; }

/* the one long-form reading surface — 66ch */
.prose { margin-top: 24px; max-width: 66ch; }
.prose h2 { margin-top: 32px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.prose p, .prose li { margin-top: 14px; font-size: 16px; font-weight: 400; line-height: 1.62; color: var(--ink-700); }
.prose ul { margin-top: 10px; padding-left: 0; }
.prose li { position: relative; padding-left: 18px; }
.prose li::before { content: "·"; position: absolute; left: 4px; color: var(--ink-500); }
.prose blockquote {
  margin-top: 20px; padding-left: 16px; border-left: 2px solid var(--ink-950);
  font-size: 19px; font-weight: 500; line-height: 1.45; color: var(--ink-950);
}
.prose b { font-weight: 600; color: var(--ink-950); }

/* drawer */
.drawer {
  position: relative; display: flex; flex-direction: column;
  width: min(480px, 100vw); height: 100dvh; padding: 40px 36px 36px;
  background: var(--surface);
  border-radius: var(--radius-card) 0 0 var(--radius-card);
  box-shadow: var(--modal-shadow);
  overflow-y: auto;
  animation: drawer-in var(--dur-slow) var(--ease-out-soft) both;
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.drawer__x { position: absolute; top: 16px; right: 16px; }
.drawer__body { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.drawer__body--done { justify-content: center; flex: 1 1 auto; gap: 24px; align-items: flex-start; }
.drawer__h { font-size: 26px; font-weight: 600; letter-spacing: -.020em; line-height: 1.18; }
.drawer__lede { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--ink-600); max-width: 52ch; }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.attached {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-600);
}

/* invite modal bits */
.notewrap { position: relative; margin-top: 12px; }
.notewrap .ta { max-width: none; padding-right: 64px; }
.micbtn {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--card-black); color: var(--b-1);
  transition: transform var(--dur-fast) var(--ease-press), background var(--dur-base) var(--ease-smooth);
}
.micbtn:active { transform: scale(.97); }
.sentnote { margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.refline { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); margin-bottom: 8px; }
.modal--560 .pill { margin-top: 12px; }

/* settings rows */
.setrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 56px; }
.setrow__k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.setrow__v { display: flex; align-items: center; gap: 12px; min-width: 0; }
.setrow__val { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-950); }
.setrow__val--mail { text-transform: none; letter-spacing: 0; font-size: 13px; word-break: break-all; }
.savedtag { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--ink-600); }

/* hold-to-confirm — 900ms, --ink-950 track. No colour. */
.hold {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 0; margin-top: 4px; border-radius: var(--radius-pill);
}
.hold__label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-600); }
.hold__track { display: block; width: 168px; height: 2px; background: var(--ink-200); overflow: hidden; }
.hold__track > span { display: block; height: 100%; background: var(--ink-950); transform-origin: left; }
.hold__steps { display: none; gap: 4px; }
.hold__steps i { display: block; width: 53px; height: 2px; background: var(--ink-200); }
.hold__steps i.is-on { background: var(--ink-950); }

/* ============================================================
   LIVE GLYPHS — the only perpetual animations in the app, and each
   is a truthful report of a live process (§10.2).
   ============================================================ */
.wt-levels { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; color: inherit; flex: none; }
.wt-levels i {
  display: block; width: 3px; height: 100%; border-radius: 2px;
  background: currentColor; transform: scaleY(.4); transform-origin: center bottom;
}
.wt-levels.is-live i { animation: wt-bar-live .95s var(--ease-smooth) infinite; }
.wt-levels--lg { height: 30px; gap: 4px; }
.wt-levels--lg i { width: 4px; border-radius: 2.5px; }
.wt-levels i:nth-child(1) { animation-delay: -.20s; }
.wt-levels i:nth-child(2) { animation-delay: -.55s; }
.wt-levels i:nth-child(3) { animation-delay: -.85s; }
.wt-levels i:nth-child(4) { animation-delay: -.35s; }
.wt-levels i:nth-child(5) { animation-delay: -.65s; }
.wt-levels i:nth-child(6) { animation-delay: -.10s; }
.wt-levels i:nth-child(7) { animation-delay: -.50s; }
@keyframes wt-bar-live { 0%,100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
/* the frozen silhouette — irregular, so it still reads as a meter */
.wt-levels:not(.is-live) i:nth-child(1) { transform: scaleY(.50); }
.wt-levels:not(.is-live) i:nth-child(2) { transform: scaleY(.82); }
.wt-levels:not(.is-live) i:nth-child(3) { transform: scaleY(.62); }
.wt-levels:not(.is-live) i:nth-child(4) { transform: scaleY(1); }
.wt-levels:not(.is-live) i:nth-child(5) { transform: scaleY(.75); }
.wt-levels:not(.is-live) i:nth-child(6) { transform: scaleY(.90); }
.wt-levels:not(.is-live) i:nth-child(7) { transform: scaleY(.66); }

/* the block-in glyph — 8 bars, staggered 150ms */
.blockin { display: inline-flex; align-items: center; gap: 2px; height: 12px; color: inherit; flex: none; }
.blockin i { display: block; width: 3px; height: 100%; background: currentColor; opacity: .28; }
.blockin.is-live i { animation: block-in 1.2s var(--ease-smooth) infinite; }
.blockin i:nth-child(1) { animation-delay: 0ms; }
.blockin i:nth-child(2) { animation-delay: 150ms; }
.blockin i:nth-child(3) { animation-delay: 300ms; }
.blockin i:nth-child(4) { animation-delay: 450ms; }
.blockin i:nth-child(5) { animation-delay: 600ms; }
.blockin i:nth-child(6) { animation-delay: 750ms; }
.blockin i:nth-child(7) { animation-delay: 900ms; }
.blockin i:nth-child(8) { animation-delay: 1050ms; }
@keyframes block-in { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }
.blockin--lg { height: 28px; gap: 3px; }
.blockin--lg i { width: 4px; }

/* ============================================================
   BREAKPOINTS (§2.2 ladder, used consistently on every surface)
   ============================================================ */
@media (max-width: 1599px) { .eng-grid { --track-min: 288px; } }

@media (max-width: 1279px) {
  .setup { grid-template-columns: minmax(0, 1fr) 380px; padding: 40px; }
}

/* lg and below: the detail page loses its reference column at md; the
   two-pane setup collapses at md. */
@media (max-width: 1023px) {
  :root { --page-pad: 40px; --orb-clear: 96px; }
  .grid-bar { padding-top: 32px; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .col-ref { flex-direction: column; }
  .brief { aspect-ratio: auto; min-height: 320px; }

  /* §4.8 — the checkout collapses to a fixed bottom bar + sheet */
  .setup { grid-template-columns: minmax(0, 1fr); padding: 32px 24px 96px; }
  .conv { height: calc(100dvh - 160px); }
  .checkout {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    max-height: calc(100dvh - 48px);
    background: var(--surface);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    box-shadow: var(--modal-shadow);
    overflow: hidden;
  }
  .checkout__card {
    max-height: calc(100dvh - 48px);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    box-shadow: none; padding: 24px 24px 28px;
  }
  .rail { height: 52px; margin-top: 40px; }
  .rail__block, .rail__seg { height: 44px; border-radius: 22px; }
  .rail__s { display: none; }
}

@media (max-width: 767px) {
  :root { --page-pad: 24px; --orb-clear: 88px; --track-min: 280px; }
  .detail__co { font-size: 32px; }
  .modal { width: min(880px, calc(100vw - 32px)); }
  .modal__scroll { padding: 40px 28px 0; }
  .modal__footer { padding: 0 28px; height: auto; min-height: 72px; flex-wrap: wrap; gap: 10px; }
  .trow--person { grid-template-columns: minmax(0, 1fr) auto; }
  .trow--person .trow__role { grid-row: 2; }
  .trow--person .trow__mail { grid-column: 1 / -1; }
  .setrow { grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; padding: 12px 0; }
  .scroll-x > .trow { min-width: 640px; }
  .eng-cell--strip { grid-column: 1 / -1; padding-left: 0; }
  .drawer { border-radius: var(--radius-card) var(--radius-card) 0 0; height: auto; max-height: calc(100dvh - 48px); width: 100vw; align-self: end; animation-name: sheet-in; }
  .scrim--drawer { place-items: end center; }
  @keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
}

@media (max-width: 639px) {
  .eng-grid { grid-template-columns: 1fr; max-width: 460px; }
  .first-wrap .eng-grid { max-width: none; }
  .grid-bar { flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 480px) {
  .nav-orb-wrap { left: 16px; bottom: 16px; }
  .nav-orb { width: 44px; height: 44px; }
  .nav-menu { width: min(292px, calc(100vw - 32px)); }
  .scrim { padding: 0; }
  .modal { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .modal--sheet { width: min(420px, calc(100vw - 32px)); border-radius: var(--radius-card); }
}

@media (max-width: 359px) {
  :root { --page-pad: 16px; --orb-clear: 80px; }
  .card__date { font-size: 38px; }
}

/* ============================================================
   §9.8 — forced colours. The inset hairlines are box-shadow, which
   forced-colours drops, so the surface gets a real border instead.
   ============================================================ */
@media (forced-colors: active) {
  .card, .brief, .rail, .buildbox { border: 1px solid CanvasText; }
  .dot--ok { background: CanvasText; }
  .accdot.is-on { background: CanvasText; }
}

/* ============================================================
   §10.3 THE REDUCED-MOTION CONTRACT
   Removing motion must not remove information, so each substitution
   below replaces the channel rather than deleting it.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Live mic bars freeze to the varied silhouette. The WORD does the
     live/not-live work. */
  .wt-levels i { animation: none !important; }
  .wt-levels i:nth-child(1) { transform: scaleY(.50); }
  .wt-levels i:nth-child(2) { transform: scaleY(.82); }
  .wt-levels i:nth-child(3) { transform: scaleY(.62); }
  .wt-levels i:nth-child(4) { transform: scaleY(1); }
  .wt-levels i:nth-child(5) { transform: scaleY(.75); }
  .wt-levels i:nth-child(6) { transform: scaleY(.90); }
  .wt-levels i:nth-child(7) { transform: scaleY(.66); }
  /* Building glyph frozen — the mono STEP line does the work and it
     advances on its own. */
  .blockin i { animation: none !important; opacity: .55; }
  .blockin i:nth-child(2n) { opacity: 1; }
  /* Skeleton shimmer removed; static --ink-100 blocks. */
  .skel::after { display: none; }
  .skel { background: var(--ink-100); }
  .track--indet > span { animation: none !important; width: 100%; }
  /* Grid entrance instant: no translate, no stagger. */
  .eng-grid.is-revealed .eng-cell { animation: none !important; opacity: 1; transform: none; }
  /* Card hover: shadow change only. */
  .card:hover { transform: none; }
  .card--new:hover .card__circle, .voicebtn:hover .voicebtn__circle { transform: none; }
  /* Drawers, sheets and modals appear without travel or scale. */
  .modal, .drawer { animation-name: fade-in !important; }
  /* Rail: instant block move, instant panel swap. */
  .rail__block { transition: none !important; }
  /* Hold-to-confirm becomes three stepped 53px segments. */
  .hold__track { display: none; }
  .hold__steps { display: flex; }
  .spinner { animation: none !important; border-top-color: var(--ink-600); }
}