/* Operant, Dashlight. The cab of a well-built truck at night: graphite surfaces, soft light, one orange
   dash-light that shows where to press. Daylight is the same cab in full sun. Orange means "this is the
   thing you can do now"; a chosen answer is ink, never orange. */

/* ── 2.2 colour ─────────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg: #17181B;  --bg-top: #1E2024;  --bg-bottom: #111214;
  --glow: rgba(240, 84, 11, .20);
  --sheen: rgba(255, 255, 255, .06);

  --glass: rgba(255, 255, 255, .06);
  --glass-solid: #232427;
  --glass-line: rgba(255, 255, 255, .10);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .08);
  --raise: rgba(255, 255, 255, .08);
  --raise-solid: #2A2B2E;
  --raise-2: rgba(255, 255, 255, .14);
  --well: rgba(0, 0, 0, .32);
  --well-solid: #101113;
  --well-inset: inset 0 2px 6px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .05);
  --rail-solid: #1B1C1F;
  --rail-glass: rgba(23, 24, 27, .72);
  /* Light caught by the glass: a sheen falling from the top left, and a lit hairline on that edge (L1). */
  --glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 45%);
  --rim: linear-gradient(155deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 42%);
  --bloom: rgba(240, 84, 11, .13);                 /* warm light behind the dial card, for its glass to frost */
  --bg-bottom-0: rgba(17, 18, 20, 0);              /* --bg-bottom, clear: the dock's scrim fades to it (plain rgba for older iPhones) */

  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .20);
  --line-focus: rgba(255, 255, 255, .62);
  --field-line: rgba(255, 255, 255, .36);          /* field and well edges: 3:1 against what is around them */

  --ink: #F4F4F2;  --ink-2: #B4B6BB;  --ink-3: #9A9DA3;
  --fill-inverse: #F4F4F2;  --ink-inverse: #17181B;

  --accent: #F0540B;
  --accent-top: #F25E16;  --accent-bottom: #E14C08;   /* white label holds 3:1 at the top of the gradient */
  --accent-deep: #C8430A;
  --accent-text: #FF7A33;
  --accent-glow: rgba(240, 84, 11, .45);
  --accent-line: rgba(255, 122, 51, .60);          /* a listening well's edge */
  --selection: rgba(240, 84, 11, .38);
  --on-accent: #FFFFFF;

  --focus: #FFFFFF;  --focus-halo: rgba(255, 255, 255, .14);

  --ok: #8BCF9F;   --ok-tint: rgba(139, 207, 159, .12);
  --warn: #F2B35B; --warn-tint: rgba(242, 179, 91, .12);
  --err: #FF8A80;  --err-tint: rgba(255, 138, 128, .12);

  /* The four progress levels. The tick COUNT carries the meaning; colour backs it up. */
  --lvl-0: #3A3C40;                                /* unlit: visible on the card (1.3:1); lit ticks hold 3:1 against the card */
  --lvl-1: #C25A28;
  --lvl-2: #F0540B;
  --lvl-3: #FF7A33;
  --lvl-3-glow: drop-shadow(0 0 4px rgba(255, 122, 51, .55));

  --shadow-1: 0 1px 1px rgba(0,0,0,.30), 0 14px 32px -16px rgba(0,0,0,.70);
  --shadow-cta: 0 12px 28px -10px rgba(240,84,11,.60), 0 2px 6px rgba(0,0,0,.35);
  /* The idle mic's face is lighter than the dock under it, as the embossed controls in reference 4 are (L2). */
  --emboss-face: linear-gradient(145deg, #34363B, #232428);
  --emboss: 6px 6px 16px rgba(0,0,0,.55), -5px -5px 14px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.10);
  --press-in: inset 4px 4px 10px rgba(0,0,0,.55), inset -3px -3px 8px rgba(255,255,255,.04);

  /* The switch: the knob holds 3:1 against its track, off and on. */
  --switch-track: var(--raise-2);  --switch-track-on: var(--well-solid);
  --switch-knob: #C9CBD0;  --switch-knob-on: var(--accent);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ECECE9;  --bg-top: #F4F4F2;  --bg-bottom: #E3E3DF;
  --glow: rgba(240, 84, 11, .10);  --sheen: rgba(255, 255, 255, .80);
  --glass: rgba(255, 255, 255, .72);  --glass-solid: #FAFAF9;  --glass-line: rgba(20, 22, 26, .08);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .95);
  --raise: rgba(20, 22, 26, .05);  --raise-solid: #E1E1DE;  --raise-2: rgba(20, 22, 26, .09);
  --well: #FFFFFF;  --well-solid: #FFFFFF;  --well-inset: inset 0 1px 3px rgba(20, 22, 26, .12);
  --rail-solid: #F2F2EF;  --rail-glass: rgba(240, 240, 237, .80);
  --glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 50%);
  --rim: linear-gradient(155deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 42%);
  --bloom: rgba(240, 84, 11, .07);
  --bg-bottom-0: rgba(227, 227, 223, 0);
  --line: rgba(20, 22, 26, .10);  --line-strong: rgba(20, 22, 26, .22);  --line-focus: #141518;
  --field-line: rgba(20, 22, 26, .50);
  --ink: #141518;  --ink-2: #474A50;  --ink-3: #5C6067;
  --fill-inverse: #141518;  --ink-inverse: #FFFFFF;
  --accent-text: #B33C00;  --accent-glow: rgba(240, 84, 11, .35);
  --accent-line: rgba(179, 60, 0, .60);  --selection: rgba(240, 84, 11, .25);
  --focus: #141518;  --focus-halo: rgba(20, 22, 26, .12);
  --ok: #1B6E3E;  --ok-tint: #DDEFE3;  --warn: #8A5300;  --warn-tint: #F6E8CF;  --err: #B3261E;  --err-tint: #F8DEDB;
  --lvl-0: #E2E2DE;  --lvl-1: #B8501F;  --lvl-2: #C8470A;  --lvl-3: #A83800;  --lvl-3-glow: none;
  --shadow-1: 0 1px 2px rgba(20,22,26,.06), 0 14px 30px -16px rgba(20,22,26,.28);
  --shadow-cta: 0 12px 26px -12px rgba(200,67,10,.55), 0 1px 2px rgba(20,22,26,.15);
  --emboss-face: linear-gradient(145deg, #F8F8F6, #E2E2DE);
  --emboss: 6px 6px 14px rgba(20,22,26,.14), -6px -6px 14px rgba(255,255,255,.95);
  --press-in: inset 3px 3px 8px rgba(20,22,26,.16), inset -3px -3px 8px rgba(255,255,255,.9);
  --switch-track: var(--raise-2);  --switch-track-on: var(--raise-2);
  --switch-knob: #6B6E74;  --switch-knob-on: var(--accent-deep);
}

@media (prefers-contrast: more) {
  :root { --line: rgba(255,255,255,.28); --glass-line: rgba(255,255,255,.28); --ink-3: var(--ink-2); }
  :root[data-theme="light"] { --line: rgba(20,22,26,.30); --glass-line: rgba(20,22,26,.30); --ink-3: var(--ink-2); }
}

/* ── 2.4 type, 2.5 space, 2.6 motion ─────────────────────────────────────────────────────── */
:root {
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-scale: 1;
  --fs-display:  calc(40px * var(--text-scale));
  --fs-question: calc(clamp(27px, 7.4vw, 32px) * var(--text-scale));
  --fs-title:    calc(22px * var(--text-scale));
  --fs-answer:   calc(19px * var(--text-scale));
  --fs-cta:      calc(19px * var(--text-scale));
  --fs-body:     calc(17px * var(--text-scale));
  --fs-button:   calc(17px * var(--text-scale));
  --fs-chip:     calc(16px * var(--text-scale));
  --fs-small:    calc(15px * var(--text-scale));
  --fs-caption:  calc(14px * var(--text-scale));
  --fs-admin-th: 13px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --gutter: 20px;
  --col: 680px; --col-wide: 1200px;
  --r-xs: 10px;  --r-field: 16px;  --r-tile: 18px;  --r-card: 28px;  --r-sheet: 36px;  --r-pill: 999px;
  --hit: 44px; --btn-h: 52px; --cta-h: 64px; --cta-icon: 48px; --mic: 64px; --rail-h: 56px;
  --dock-h: calc(var(--cta-h) + 24px);
  --z-rail: 20; --z-dock: 30; --z-sheet: 40;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-press: cubic-bezier(.2, .8, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --d-press: 120ms; --d-state: 200ms; --d-exit: 160ms; --d-enter: 320ms; --d-reveal: 600ms; --d-glow: 900ms;
}
:root[data-text="large"] { --text-scale: 1.15; }
@media (max-width: 359px) { :root { --gutter: 16px; } }
@media (min-width: 600px) { :root { --gutter: 32px; } }
@media (min-width: 768px) {
  :root { --fs-display: calc(52px * var(--text-scale)); --fs-question: calc(38px * var(--text-scale)); --fs-title: calc(24px * var(--text-scale)); --cta-h: 60px; --mic: 60px; }
}

@keyframes screen-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes screen-out { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes glow-rise  { from { opacity: 0; transform: translateY(8%); } to { opacity: 1; transform: none; } }
@keyframes chev-run   { 0%, 100% { opacity: .35; } 35% { opacity: 1; } }
@keyframes check-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes halo       { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: .85; transform: scale(1.06); } }
@keyframes tick-on    { from { stroke: var(--lvl-0); } }
@keyframes sweep      { 0%, 100% { stroke: var(--line-strong); } 20% { stroke: var(--accent-text); } }
@keyframes fade-in    { from { opacity: 0; } }
@keyframes sheet-up   { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pop-in     { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes nudge      { 0%, 100% { transform: none; } 30% { transform: scale(1.04); } 60% { transform: scale(.99); } }
@keyframes onb-autofill { from { opacity: 1; } to { opacity: 1; } }

/* ── 2.3 atmosphere and glass ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink);
  /* Transparent on purpose: html carries --bg, so the fixed light layers below paint above it. */
  background: transparent;
  font: 420 var(--fs-body)/1.5 var(--font); font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
body::before {                                   /* the cab: graphite falling off, cool light top left */
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(80% 45% at 12% -8%, var(--sheen) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 55%, var(--bg-bottom) 100%);
}
.atmos {                                         /* the dash-light glow at the foot of every screen */
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(120% 55% at 50% 108%, var(--glow) 0%, transparent 62%);
}
html.glow-in .atmos { animation: glow-rise var(--d-glow) var(--ease-out) both; }
body::after {                                    /* static grain: no banding on cheap screens */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.glass {
  position: relative;
  background-color: var(--glass-solid);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  box-shadow: var(--glass-hi), var(--shadow-1);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-glass="solid"]) .glass {
    background-color: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
            backdrop-filter: blur(20px) saturate(150%);
  }
}
/* The lit hairline: the panel's top-left edge catches the light. Masked to a 1 px ring; without mask support the
   plain border stays. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .glass::before {
    content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
    background: var(--rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
}

/* ── base ───────────────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
a, label, [role="switch"], [role="radio"] { touch-action: manipulation; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
::selection { background: var(--selection); }
.num, .saved, .counter, td.n { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.t-display  { font: 600 var(--fs-display)/1.04 var(--font); font-stretch: 86%; letter-spacing: -.025em; }
.t-question { font: 560 var(--fs-question)/1.18 var(--font); font-stretch: 92%; letter-spacing: -.015em; max-width: 24em; text-wrap: pretty; }
.t-title    { font: 600 var(--fs-title)/1.25 var(--font); font-stretch: 94%; letter-spacing: -.01em; text-wrap: balance; }
.t-answer   { font: 420 var(--fs-answer)/1.55 var(--font); }
.t-body     { font: 420 var(--fs-body)/1.5 var(--font); max-width: 62ch; text-wrap: pretty; }
.t-small    { font: 480 var(--fs-small)/1.45 var(--font); }
.t-caption  { font: 520 var(--fs-caption)/1.35 var(--font); letter-spacing: .01em; }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }

/* ── layout: rail, page, dock ─────────────────────────────────────────────────────────────── */
#app { --page-max: 100%; min-height: 100dvh; display: flex; flex-direction: column; }
@media (min-width: 600px) { #app { --page-max: calc(620px + 2 * var(--gutter)); } }
@media (min-width: 960px) {
  #app { --page-max: calc(var(--col) + 2 * var(--gutter)); }
  #app.screen-home { --page-max: calc(1040px + 2 * var(--gutter)); }
  #app.screen-admin { --page-max: calc(var(--col-wide) + 2 * var(--gutter)); }
}

.rail-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }
.rail {
  position: sticky; top: 0; z-index: var(--z-rail);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent;
}
.rail.is-scrolled { background: var(--rail-solid); border-bottom-color: var(--glass-line); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-glass="solid"]) .rail.is-scrolled {
    background: var(--rail-glass);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
            backdrop-filter: blur(24px) saturate(150%);
  }
}
.rail-inner {
  height: var(--rail-h); width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
}
.rail-left { justify-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rail-centre { justify-self: center; min-width: 0; }
.rail-right { justify-self: end; display: flex; align-items: center; gap: 8px; }

.page {
  flex: 1; width: 100%; max-width: var(--page-max); margin: 0 auto;
  padding-top: 8px;
  padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right));
  /* --dock-real is the dock's measured height (ui.js), so an error banner in it never hides the skips. */
  padding-bottom: calc(var(--dock-real, var(--dock-h)) + var(--kb, 0px) + 24px);
}
.page.no-dock { padding-bottom: 56px; }
/* Anything focused on a page scrolls clear of the rail above and the dock below. */
.page input, .page textarea, .page button { scroll-margin-top: calc(var(--rail-h) + 16px); scroll-margin-bottom: calc(var(--dock-real, var(--dock-h)) + var(--kb, 0px) + 16px); }
.enter { animation: screen-in var(--d-enter) var(--ease-out) both; }
.enter-late { animation: screen-in var(--d-enter) var(--ease-out) 120ms both; }
.is-leaving .enter, .is-leaving .enter-late { animation: screen-out var(--d-exit) var(--ease-in) both; }
.is-leaving .page { pointer-events: none; }
/* A slow next question: the loader sits between the rail and the dock while the old one has faded (ui.js). */
.inplace-loader { position: fixed; left: 0; right: 0; top: calc(var(--rail-h) + env(safe-area-inset-top)); bottom: var(--dock-real, var(--dock-h)); z-index: 5;
  display: grid; place-items: center; pointer-events: none; }
.inplace-loader .loader { min-height: 0; }

.dock {
  position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); z-index: var(--z-dock);
  padding: 12px max(var(--gutter), env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: linear-gradient(to top, var(--bg-bottom) 55%, var(--bg-bottom-0));
  display: flex; flex-direction: column; gap: 10px;
}
.dock-inner { display: flex; gap: 12px; align-items: center; width: 100%; }
.dock .banner { max-width: var(--col); width: 100%; margin: 0 auto; }
/* A banner in the dock sits over the page: its tint is laid on the page colour, so words behind never show through. */
.dock .banner.err { background: linear-gradient(var(--err-tint), var(--err-tint)), var(--bg-bottom); }
.dock .banner.warn { background: linear-gradient(var(--warn-tint), var(--warn-tint)), var(--bg-bottom); }
.dock .banner.info { background: linear-gradient(var(--raise), var(--raise)), var(--bg-bottom); }
.kb-open .dock { --cta-h: 52px; --cta-icon: 40px; --mic: 52px; padding-bottom: 8px; }
/* The keyboard hint needs room beside the pill: only on a wide window with a mouse, never squeezing the label. */
.kbd-hint { display: none; flex: none; color: var(--ink-3); font: 520 var(--fs-caption)/1.2 var(--font); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) and (min-width: 600px) { .kbd-hint { display: block; } }
/* One quiet line above the pill (the read-back: a Right about to go in). */
.dock-note { width: fit-content; max-width: min(100%, var(--col)); margin: 0 auto; padding: 7px 14px; border-radius: var(--r-pill);
  background: linear-gradient(var(--raise), var(--raise)), var(--bg-bottom); border: 1px solid var(--line);
  color: var(--ink-2); font: 480 var(--fs-small)/1.35 var(--font); text-align: center; }
@media (min-width: 960px) {
  /* The floating capsule keeps a scrim behind it, so content fades out before it reaches the capsule. */
  .dock { background: linear-gradient(to top, var(--bg-bottom) 45%, var(--bg-bottom-0)); bottom: var(--kb, 0px); padding: 40px var(--gutter) 24px; pointer-events: none; }
  .dock > * { pointer-events: auto; }
  .dock-inner {
    max-width: var(--col); margin: 0 auto; padding: 10px 10px 10px 16px; border-radius: var(--r-pill);
    background: var(--glass-solid); border: 1px solid var(--glass-line); box-shadow: var(--glass-hi), var(--shadow-1);
  }
  /* The listening ring stays inside the capsule's rim. */
  .dock-inner:not(.solo) .mic .ring { inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
  .dock-inner.solo { padding: 0; background: none; border: 0; box-shadow: none; }
  /* Sign-in, join and home put the pill inline under their content on desktop. */
  .dock.inline-desktop { position: static; padding: 0; margin-top: 24px; pointer-events: auto; background: none; }
  .dock.inline-desktop .dock-inner { max-width: none; padding: 0; background: none; border: 0; box-shadow: none; }
  .page.dock-inline-desktop { padding-bottom: 56px; }
  .page:not(.dock-inline-desktop) { padding-bottom: calc(var(--dock-real, 128px) + 16px + var(--kb, 0px)); }
  .page.no-dock { padding-bottom: 56px; }
}

.section + .section { margin-top: 32px; }
.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }
.cards > * + * { margin-top: 16px; }

/* ── wordmark and loader ──────────────────────────────────────────────────────────────────── */
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.wordmark .mark { width: 28px; height: 28px; color: var(--accent); }
.wordmark .wm-text { display: flex; flex-direction: column; min-width: 0; }
.wordmark .wm-name { font: 650 22px/1 var(--font); font-stretch: 80%; letter-spacing: .01em; }
.wordmark .wm-biz { margin-top: 3px; font: 520 var(--fs-caption)/1.15 var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }

.loader { flex: 1; display: grid; place-items: center; align-content: center; gap: 12px; min-height: 60dvh; animation: fade-in var(--d-state) both; }
.loader svg { width: 56px; height: 56px; }
.loader line { stroke: var(--line-strong); stroke-width: 2.6; stroke-linecap: round; animation: sweep 1.2s linear infinite; }
.loader .loader-label { display: none; color: var(--ink-2); font: 520 var(--fs-caption)/1 var(--font); }

/* ── 4.1 orange pill ──────────────────────────────────────────────────────────────────────── */
.cta {
  display: grid; grid-template-columns: var(--cta-icon) 1fr 28px; align-items: center; gap: 12px;
  width: 100%; height: var(--cta-h); padding: 8px 18px 8px 8px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, var(--accent-top), var(--accent) 55%, var(--accent-bottom));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--shadow-cta);
  color: var(--on-accent); font: 700 var(--fs-cta)/1 var(--font); font-stretch: 96%; letter-spacing: .005em;
  text-shadow: 0 1px 1px rgba(120,30,0,.35);
  transition: transform var(--d-press) var(--ease-press), filter var(--d-state), box-shadow var(--d-state);
  user-select: none; -webkit-user-select: none;
}
.cta-icon { width: var(--cta-icon); height: var(--cta-icon); border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-deep); box-shadow: inset 0 2px 4px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.14); }
.cta-icon svg { width: 22px; height: 22px; }
.cta-label { text-align: center; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Even the short label does not fit (ui.js fitCta): two lines, never cut off. */
.cta.wrap .cta-label { white-space: normal; text-overflow: clip; line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; }
.cta .chev { width: 28px; height: 24px; }
.cta .chev path:nth-child(1) { opacity: .4; } .cta .chev path:nth-child(2) { opacity: .7; }
@media (hover: hover) and (pointer: fine) {
  .cta:not(:disabled):not([aria-disabled="true"]):not(.is-quiet):hover { filter: brightness(1.06); }
  .cta .chev { transition: transform var(--d-state) var(--ease-out); }
  .cta:not(:disabled):not([aria-disabled="true"]):hover .chev { transform: translateX(2px); }
}
.cta:not(:disabled):not([aria-disabled="true"]):active { transform: scale(.97); filter: brightness(.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px -6px var(--accent-glow); }
.cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
/* disabled = nothing to do yet; quiet = something else is the main control right now. Never a faded orange.
   aria-disabled looks the same as disabled but still hears a tap (the question's Next shows the skips). */
.cta:disabled, .cta[aria-disabled="true"], .cta.is-quiet { background: var(--raise-solid); border-color: var(--line); box-shadow: var(--glass-hi); color: var(--ink-2); text-shadow: none; }
.cta:disabled, .cta[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.cta:disabled .cta-icon, .cta[aria-disabled="true"] .cta-icon, .cta.is-quiet .cta-icon { background: var(--raise); box-shadow: none; }
.cta[aria-busy="true"] .chev path { animation: chev-run 900ms var(--ease-out) infinite; }
.cta[aria-busy="true"] .chev path:nth-child(2) { animation-delay: 120ms; } .cta[aria-busy="true"] .chev path:nth-child(3) { animation-delay: 240ms; }
.cta.is-ready .chev path { animation: chev-run 900ms var(--ease-out) 1; }
.cta.is-ready .chev path:nth-child(2) { animation-delay: 120ms; } .cta.is-ready .chev path:nth-child(3) { animation-delay: 240ms; }
.cta.compact { --cta-h: 52px; --cta-icon: 40px; font-size: calc(19px * var(--text-scale)); }
.cta.compact.auto { width: auto; min-width: 220px; }
.draw path { stroke-dasharray: 24; animation: check-draw 220ms var(--ease-out) both; }

/* ── 4.2 secondary, text and icon buttons ─────────────────────────────────────────────────── */
.btn { min-height: var(--btn-h); padding: 0 22px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--raise); box-shadow: var(--glass-hi); color: var(--ink); font: 600 var(--fs-button)/1.2 var(--font);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap;
  transition: transform var(--d-press) var(--ease-press), background-color var(--d-state); }
.btn svg { width: 18px; height: 18px; }
.btn.small { min-height: var(--hit); padding: 0 16px; font-size: var(--fs-small); }
.btn:not(:disabled):active { transform: scale(.97); }
.btn:disabled { opacity: .45; }
.btn .ok { color: var(--ok); }
@media (hover: hover) and (pointer: fine) { .btn:not(:disabled):hover { background: var(--raise-2); } }
@media (min-width: 960px) { .btn { font-size: calc(16px * var(--text-scale)); } }
.btn-text { min-height: var(--hit); padding: 0 4px; background: none; border: 0; color: var(--ink-2); font: 550 var(--fs-body)/1.2 var(--font);
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.btn-text.small { font-size: var(--fs-small); }
.btn-text svg { width: 16px; height: 16px; }
@media (hover: hover) { .btn-text:hover { color: var(--ink); text-decoration-color: currentColor; } }
.icon-btn { width: var(--hit); height: var(--hit); flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--glass-line); background: var(--glass-solid); box-shadow: var(--glass-hi); color: var(--ink);
  transition: transform var(--d-press) var(--ease-press); text-decoration: none; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { transform: scale(.97); }
.icon-btn.plain { border-color: transparent; background: none; box-shadow: none; }
.icon-btn.expand { width: 36px; height: 36px; position: relative; }
.icon-btn.expand svg { width: 16px; height: 16px; }
.icon-btn.expand::after { content: ""; position: absolute; inset: -4px; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--raise-2); } }
.back-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); padding: 0 14px 0 8px; border-radius: var(--r-pill); white-space: nowrap;
  color: var(--ink); font: 600 var(--fs-small)/1 var(--font); text-decoration: none; border: 1px solid var(--glass-line); background: var(--glass-solid); box-shadow: var(--glass-hi); }
.back-btn svg { width: 18px; height: 18px; }

/* ── 4.3 chips ────────────────────────────────────────────────────────────────────────────── */
.chip { min-height: var(--hit); padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink-2); font: 550 var(--fs-chip)/1.2 var(--font);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: left;
  transition: transform var(--d-press) var(--ease-press), background-color var(--d-state), color var(--d-state); }
.chip.choice { min-height: var(--btn-h); color: var(--ink); background: var(--raise); }
@media (hover: hover) and (pointer: fine) { .chip:hover { background: var(--raise-2); color: var(--ink); } }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--fill-inverse); color: var(--ink-inverse); border-color: transparent; }
.chip .ic-check { display: none; width: 18px; height: 18px; }
.chip[aria-pressed="true"] .ic-check, .chip[aria-checked="true"] .ic-check { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 4.4 segmented control and icon rail ──────────────────────────────────────────────────── */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--r-pill);
  background: var(--raise); border: 1px solid var(--line); }
.seg > button { min-height: 48px; border-radius: var(--r-pill); border: 0; background: none; color: var(--ink-2);
  font: 600 var(--fs-chip)/1.2 var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  transition: background-color var(--d-state), color var(--d-state); }
.seg > button svg { width: 18px; height: 18px; }
.seg > button[aria-checked="true"] { background: var(--fill-inverse); color: var(--ink-inverse); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.seg > button:focus-visible { outline-offset: 1px; }
/* Right / Not quite: the mark shows only on the chosen side, so the choice is never colour alone. */
.seg.marks > button svg { display: none; }
.seg.marks > button[aria-checked="true"] svg { display: block; }
.seg.tiles { border-radius: var(--r-tile); }
.seg.tiles > button { min-height: 76px; border-radius: 14px; display: grid; grid-template-rows: 24px auto; justify-items: center; align-content: start; gap: 6px;
  padding: 14px 6px 10px; font-size: var(--fs-small); text-align: center; }
.seg.tiles > button svg { width: 24px; height: 24px; }

/* ── 4.5 orange-knob toggle ───────────────────────────────────────────────────────────────── */
.switch { width: 52px; height: 32px; border-radius: var(--r-pill); background: var(--switch-track); border: 1px solid var(--line-strong); position: relative; flex: none;
  transition: background-color var(--d-state); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--switch-knob); box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform var(--d-state) var(--ease-out), background-color var(--d-state); }
[aria-checked="true"] > .switch { background: var(--switch-track-on); }
[aria-checked="true"] > .switch::after { transform: translateX(20px); background: var(--switch-knob-on); box-shadow: 0 0 10px var(--accent-glow), 0 1px 3px rgba(0,0,0,.35); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 10px 0; text-align: left; color: var(--ink); }
.switch-row .sw-label { display: block; font: 600 var(--fs-body)/1.3 var(--font); }
.switch-row .sw-help { display: block; margin-top: 2px; font: 480 var(--fs-small)/1.35 var(--font); color: var(--ink-3); }

/* ── 4.6 fields and the answer well ───────────────────────────────────────────────────────── */
.field + .field { margin-top: 18px; }
.field label, .field .label { display: block; margin-bottom: 8px; font: 600 var(--fs-small)/1.3 var(--font); color: var(--ink-2); }
.input { width: 100%; height: 56px; padding: 0 16px; border-radius: var(--r-field); border: 1px solid var(--field-line);
  background: var(--well-solid); box-shadow: var(--well-inset); color: var(--ink); font: 450 18px/1.3 var(--font); caret-color: var(--accent);
  -webkit-appearance: none; appearance: none; transition: border-color var(--d-state); }
:root[data-text="large"] .input { font-size: 20px; }
.input::placeholder, .well textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:focus { outline: none; border-color: var(--line-focus); box-shadow: var(--well-inset), 0 0 0 4px var(--focus-halo); }
.input[aria-invalid="true"] { border-color: var(--err); }
.input.is-listening { border-color: var(--accent-line); }
/* Saved passwords and emails: the browser's autofill keeps the dark field and its ink (D1). */
.input:-webkit-autofill, .input:-webkit-autofill:hover {
  animation-name: onb-autofill; animation-duration: 1ms;
  -webkit-text-fill-color: var(--ink); caret-color: var(--accent);
  box-shadow: var(--well-inset), 0 0 0 1000px var(--well-solid) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); box-shadow: var(--well-inset), 0 0 0 1000px var(--well-solid) inset, 0 0 0 4px var(--focus-halo); }
.input[readonly]:not(textarea) { font-size: 16px; }
/* A one-line box that grows with what he says (the "why not?" line). */
textarea.input { display: block; height: auto; min-height: 56px; padding: 15px 16px; line-height: 1.4; resize: none; overflow: hidden; }
.field .hint { margin-top: 6px; font-size: var(--fs-caption); color: var(--ink-3); }
.field .hint.err { color: var(--err); display: flex; gap: 6px; align-items: flex-start; }
.field .hint.err svg { width: 16px; height: 16px; margin-top: 1px; }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 56px; }
.input-wrap .icon-btn { position: absolute; right: 6px; top: 6px; border: 0; background: none; box-shadow: none; color: var(--ink-2); }
.input-wrap .icon-btn[aria-pressed="true"] { color: var(--ink); }

.well { position: relative; border-radius: var(--r-card); border: 1px solid var(--field-line); background: var(--well-solid);
  box-shadow: var(--well-inset); transition: border-color var(--d-state); }
.well:focus-within { border-color: var(--line-focus); box-shadow: var(--well-inset), 0 0 0 4px var(--focus-halo); }
.well.is-listening { border-color: var(--accent-line); }
.well.is-dimmed textarea { opacity: .5; }
.well textarea { display: block; width: 100%; min-height: clamp(180px, 32vh, 300px); resize: none; overflow: hidden;
  padding: 20px 20px 24px; border: 0; background: none; outline: none; color: var(--ink); border-radius: var(--r-card);
  font: 420 var(--fs-answer)/1.55 var(--font); caret-color: var(--accent);
  scroll-margin-bottom: calc(var(--dock-real, var(--dock-h)) + 24px); }
/* The hidden twin every growing box is measured on (ui.js fitTextarea). */
textarea.twin { position: absolute; top: 0; left: -10000px; height: 0 !important; min-height: 0 !important; max-height: none; overflow: hidden;
  visibility: hidden; pointer-events: none; resize: none; box-sizing: border-box; border-color: transparent; }
.well.short textarea { min-height: calc(2 * 1.55em + 44px); }
.well.lines-3 textarea { min-height: calc(3 * 1.55em + 44px); }
.well .live { padding: 0 20px 16px; font: 480 var(--fs-small)/1.45 var(--font); color: var(--ink-2); min-height: 0; }
.well .live:empty { display: none; }
/* The corner mic is pinned top right, so it stays where his thumb left it while the box grows under his words. */
.well.has-mic textarea { padding-right: 64px; }
.well.has-mic .live { padding-right: 64px; }

/* "Saved": a quiet guarantee that he can stop at any time */
.saved { display: flex; align-items: center; gap: 6px; min-height: 24px; margin-top: 10px; color: var(--ink-3); font: 520 var(--fs-caption)/1.35 var(--font); letter-spacing: .01em; transition: color var(--d-reveal); }
.saved svg { width: 16px; height: 16px; display: none; }
.saved .dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.saved.is-saved svg.ic-saved { display: block; }
.saved.is-fresh { color: var(--ink-2); transition: none; }
.saved.is-retrying { color: var(--ink-2); }
.saved.is-retrying .dot { display: block; }
.saved.is-listening { color: var(--ink-2); }
.saved.is-listening .dot { display: block; background: var(--accent-text); }
.mic-msg { margin-top: 8px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); }

/* ── the mic: a big round embossed control that glows orange while listening ──────────────── */
.mic { width: var(--mic); height: var(--mic); flex: none; border-radius: 50%; position: relative; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--emboss-face); box-shadow: var(--emboss); color: var(--ink);
  transition: transform var(--d-press) var(--ease-press), box-shadow var(--d-press); }
.mic svg.glyph { width: 26px; height: 26px; position: relative; z-index: 1; }
.mic:active { transform: scale(.98); box-shadow: var(--press-in); }
.mic::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%); }
.mic .ring { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); opacity: 0; transition: opacity 400ms var(--ease-out); pointer-events: none; }
.mic .ring line { stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; }
.mic[aria-pressed="true"] { color: #fff; border-color: rgba(255,255,255,.22); box-shadow: 0 8px 22px -6px var(--accent-glow);
  background: radial-gradient(circle at 35% 30%, #FF8A4C 0%, var(--accent) 48%, var(--accent-deep) 100%); }
.mic[aria-pressed="true"]::after { animation: halo 2.4s ease-in-out infinite; }
.mic[aria-pressed="true"] .ring { opacity: .4; }
.mic.is-heard .ring { opacity: 1; transition-duration: 80ms; }
.mic.is-blocked { box-shadow: none; background: var(--raise); color: var(--ink-3); }
.mic.corner { --mic: 44px; position: absolute; right: 10px; top: 10px; z-index: 2; }
.mic.corner svg.glyph { width: 20px; height: 20px; }
.mic.corner .ring { inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }

/* ── 4.8 cards, list groups, banners ──────────────────────────────────────────────────────── */
.card { position: relative; padding: 20px; }
@media (min-width: 768px) { .card { padding: 24px; } }
.card > .expand, .card > .corner-btn { position: absolute; top: 14px; right: 14px; }
.card-icon { width: 20px; height: 20px; color: var(--ink-2); display: block; margin-bottom: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }

.list-group { overflow: hidden; padding: 0; }
.list-group > li + li { border-top: 1px solid var(--line); }
.lg-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 14px 20px; color: var(--ink); text-decoration: none; text-align: left;
  transition: background-color var(--d-state), transform var(--d-press) var(--ease-press); }
a.lg-row:active, button.lg-row:active { background: var(--raise); }
@media (hover: hover) and (pointer: fine) { a.lg-row:hover, button.lg-row:hover { background: var(--raise); } }
a.lg-row:focus-visible, button.lg-row:focus-visible { outline-offset: -3px; border-radius: 12px; }
.lg-row .grow { flex: 1; min-width: 0; }
.lg-row .trail { width: 16px; height: 16px; color: var(--ink-3); }

.banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-tile);
  color: var(--ink); font: 420 var(--fs-body)/1.45 var(--font); }
.banner .b-ic { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.banner .b-dot { flex: none; width: 10px; height: 10px; margin: 8px 5px 0; border-radius: 50%; background: var(--warn); }
.banner .b-body { flex: 1; min-width: 0; }
.banner .b-close { margin: -10px -8px -10px 0; }
.banner.err { background: var(--err-tint); } .banner.err .b-ic { color: var(--err); }
.banner.warn { background: var(--warn-tint); }
.banner.info { background: var(--raise); } .banner.info .b-ic { color: var(--ink-2); }
.banner.one-line { padding: 6px 6px 6px 16px; align-items: center; font: 480 var(--fs-small)/1.4 var(--font); }
.banner.one-line .b-dot { margin: 0 4px 0 0; width: 8px; height: 8px; }
.banner.one-line .b-close { margin: 0; }

.error-slot:empty { display: none; }
.panel-actions .error-slot, .edit-actions .error-slot, .confirm .error-slot { flex-basis: 100%; }

/* ── 4.9 status words ─────────────────────────────────────────────────────────────────────── */
.status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  font: 520 var(--fs-caption)/1 var(--font); white-space: nowrap; color: var(--ink-3); flex: none; }
.status svg { width: 14px; height: 14px; }
.status .s-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.ok { color: var(--ok); background: var(--ok-tint); }
.status.warn { color: var(--warn); background: var(--warn-tint); }
.status.open { color: var(--ink-2); padding-left: 0; } .status.open svg { color: var(--accent-text); }
.status.quiet { padding-left: 0; }
.status.here { color: var(--accent-text); padding-left: 0; }
.status.started { color: var(--ink-2); padding-left: 0; } .status.started .s-dot { background: var(--accent-text); }
/* An earlier stage with something still open: a quiet dot. Orange among the stages is only "Under way". */
.status.carried { color: var(--ink-2); padding-left: 0; } .status.carried .s-dot { background: var(--ink-3); }
.flag { border-radius: var(--r-xs); }

/* ── 4.10 settings sheet ──────────────────────────────────────────────────────────────────── */
dialog.sheet { margin: 0; border: 0; padding: 12px 24px max(24px, env(safe-area-inset-bottom)); color: var(--ink);
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 90dvh;
  background: var(--glass-solid); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--glass-hi), 0 -12px 40px rgba(0,0,0,.4);
  border-top: 1px solid var(--glass-line); z-index: var(--z-sheet); }
dialog.sheet[open] { animation: sheet-up var(--d-enter) var(--ease-out) both; }
dialog.sheet::backdrop { background: rgba(0,0,0,.5); animation: fade-in var(--d-state) both; }
.sheet .grabber { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto 16px; }
.sheet .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sheet .sheet-rows > * + * { border-top: 1px solid var(--line); }
.sheet .sheet-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  dialog.sheet { inset: auto; width: 360px; max-width: calc(100vw - 32px); border-radius: var(--r-card); border: 1px solid var(--glass-line);
    padding: 16px 24px 16px; box-shadow: var(--glass-hi), var(--shadow-1), 0 24px 48px -20px rgba(0,0,0,.5); }
  dialog.sheet[open] { animation: pop-in var(--d-state) var(--ease-out) both; }
  dialog.sheet::backdrop { background: transparent; }
  .sheet .grabber { display: none; }
}

/* ── 6 the gauge, legend and mini bar ─────────────────────────────────────────────────────── */
.gauge-wrap { position: relative; max-width: 340px; margin: 4px auto 0; aspect-ratio: 320 / 232; }
.gauge { width: 100%; height: 100%; overflow: visible; display: block; }
.gauge .track { fill: none; stroke: var(--line); stroke-width: 1.5; }
.gauge .tick { stroke: var(--lvl-0); stroke-width: 7; stroke-linecap: round; transition: stroke-width var(--d-state) var(--ease-out); }
.gauge .l1 .tick.on { stroke: var(--lvl-1); } .gauge .l2 .tick.on { stroke: var(--lvl-2); }
.gauge .l3 .tick.on { stroke: var(--lvl-3); filter: var(--lvl-3-glow); }
.gauge .tick.is-new { animation: tick-on 400ms var(--ease-out) both; }
.gauge .part.is-peek .tick { stroke-width: 9; }
.gauge .hit { fill: none; stroke: transparent; stroke-width: 40; pointer-events: stroke; cursor: pointer; }
.gauge .knob { fill: var(--accent-text); transition: transform var(--d-state) var(--ease-out); }
.gauge .knob-halo { fill: var(--accent-text); opacity: .18; }
.gauge-centre { position: absolute; left: 50%; top: 64%; transform: translate(-50%, -50%); width: 58%; text-align: center; pointer-events: none; }
.gauge-centre .name { font: 600 var(--fs-title)/1.2 var(--font); font-stretch: 94%; letter-spacing: -.01em; text-wrap: balance; }
.gauge-centre .level { margin-top: 4px; font: 480 var(--fs-small)/1.3 var(--font); color: var(--ink-2); }
.gauge-card .open-items { margin-top: 4px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); }
.gauge-card .full-note { margin-top: 12px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); }

.legend { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr; column-gap: 24px; }
.legend li { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.legend .lg-name { flex: 1; min-width: 0; font: 480 calc(16px * var(--text-scale))/1.3 var(--font); color: var(--ink); }
.legend .lg-level { font: 480 var(--fs-small)/1.3 var(--font); color: var(--ink-3); text-align: right; white-space: nowrap; }
.legend .lg-here { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); flex: none; margin-left: -2px; }
@media (min-width: 600px) { .legend { grid-template-columns: 1fr 1fr; } }

.minibar { display: inline-grid; grid-template-columns: repeat(10, auto); gap: 4px; vertical-align: middle; }
.minibar .p { display: grid; grid-template-columns: repeat(3, 3px); gap: 2px; }
.minibar i { height: 14px; border-radius: 2px; background: var(--lvl-0); }
.minibar .l1 i:nth-child(-n+1) { background: var(--lvl-1); }
.minibar .l2 i:nth-child(-n+2) { background: var(--lvl-2); }
.minibar .l3 i { background: var(--lvl-3); }
.minibar.one { grid-template-columns: auto; }

/* counter pill in the rail: a 9-tick ring, "Question 3 of 9", a list icon */
.counter-pill { display: inline-flex; align-items: center; gap: 8px; min-height: var(--hit); padding: 0 14px 0 8px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-line); background: var(--glass-solid); box-shadow: var(--glass-hi); color: var(--ink-2);
  font: 600 var(--fs-small)/1 var(--font); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.counter-pill.no-ring { padding-left: 14px; }
.counter-pill .ring { width: 28px; height: 28px; }
.counter-pill .ring line { stroke: var(--line-strong); stroke-width: 2.4; stroke-linecap: round; transition: stroke var(--d-state) var(--ease-out); }
.counter-pill .ring .done { stroke: var(--ink-2); }
.counter-pill .ring .current { stroke: var(--accent-text); }
.counter-pill .ic-list { width: 16px; height: 16px; color: var(--ink-3); }
.counter-pill:active { transform: scale(.97); }

/* ── screens: sign-in, join, reset ────────────────────────────────────────────────────────── */
.auth { max-width: 440px; }
.auth .hello { margin-top: 48px; }
.auth .hello .sub { margin-top: 10px; font: 500 var(--fs-title)/1.3 var(--font); font-stretch: 94%; letter-spacing: -.01em; color: var(--ink-2); text-wrap: pretty; }
.auth .enter-late { margin-top: 24px; }
.auth .card { padding: 20px; }
.auth .lede { margin-top: 24px; color: var(--ink-2); max-width: 52ch; }
.auth .forgot { margin-top: 16px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); }
.auth .privacy { margin-top: 20px; display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font: 480 var(--fs-small)/1.5 var(--font); max-width: 52ch; }
.auth .privacy svg { width: 16px; height: 16px; margin-top: 3px; color: var(--ink-3); }
.auth .dead p + p { margin-top: 12px; }
.auth .form-banner { margin-top: 16px; }
@media (min-width: 960px) {
  #app.screen-auth .page { display: flex; flex-direction: column; justify-content: center; padding-top: 0; }
  .auth { margin: 0 auto; width: 440px; padding-bottom: 6vh; }
  .auth .hello { margin-top: 0; }
}

/* ── home ─────────────────────────────────────────────────────────────────────────────────── */
.home { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
/* The left column on a desktop; on a phone its children sit in the page's order: the dial card goes before the stages. */
.home-main { display: contents; }
.home-main > .stages, .home-main > .answers-link { order: 2; }
.home > .home-side { order: 1; }
.home .greet { margin-top: 8px; margin-bottom: 8px; }
.home .greet .hi { display: block; font: 480 var(--fs-body)/1.3 var(--font); color: var(--ink-2); letter-spacing: 0; }
.home .greet .name { display: block; margin-top: 4px; }

.resume .next-label { color: var(--ink-3); font: 520 var(--fs-small)/1.3 var(--font); }
.resume .next-q { margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.resume .next-sub { margin-top: 8px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); }

.home .check-link { justify-self: start; align-self: flex-start; }
.resume .sentences { max-width: 62ch; }
.resume .sentences p { font: 420 var(--fs-answer)/1.5 var(--font); color: var(--ink-2); text-wrap: pretty; }
.resume .sentences .lead { color: var(--ink); }
.resume .empty { font: 420 var(--fs-answer)/1.5 var(--font); color: var(--ink-2); }
.gauge-card { padding-top: 18px; }
/* A faint warm bloom sits behind the dial card, so its glass has light to frost (L1). */
.home-side { position: relative; }
.home-side::before { content: ""; position: absolute; left: 6%; right: 6%; top: 8%; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--bloom), rgba(240, 84, 11, 0)); }
.gauge-card .open-list { margin-top: 10px; text-align: left; }
.gauge-card .open-list li { position: relative; padding: 6px 0 6px 18px; color: var(--ink); font: 480 var(--fs-small)/1.45 var(--font); }
.gauge-card .open-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.gauge-card .open-note { margin-top: 4px; }
.gauge-card .open-more { margin-top: 2px; }
.gauge-card .open-rest { padding: 2px 0 4px 18px; text-align: left; color: var(--ink-3); font: 480 var(--fs-small)/1.45 var(--font); }
/* What moved since last time: the part and where it is now, with its own small bar. */
.gauge-card .moved { margin: 8px auto 0; max-width: 340px; padding: 12px 14px; border-radius: var(--r-tile); background: var(--raise); }
.gauge-card .moved-head { color: var(--ink-2); font: 600 var(--fs-caption)/1.3 var(--font); }
.gauge-card .moved li { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--ink); font: 480 var(--fs-small)/1.35 var(--font); }
.gauge-card .card-head h2 { font: 520 var(--fs-small)/1.3 var(--font); color: var(--ink-2); padding-right: 44px; }
.home .stages .lg-row { min-height: 60px; }
.home .stages .s-name { flex: 1; font: 550 var(--fs-body)/1.3 var(--font); }
.home .answers-link { justify-self: start; align-self: flex-start; }
@media (min-width: 960px) {
  .home { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 32px; align-items: start; }
  /* Two columns that keep their own rhythm: the tall dial card no longer spreads the left column out. */
  .home-main { display: flex; flex-direction: column; gap: 16px; grid-column: 1; grid-row: 1; min-width: 0; }
  .home > .home-side { grid-column: 2; grid-row: 1; position: sticky; top: 88px; margin-top: 32px; }
  .home .greet { margin-top: 32px; }
  .home-side .legend { grid-template-columns: 1fr; }
  /* The pill belongs to the card above it: close to it, and well clear of the stages. */
  .home .dock.inline-desktop { margin-top: 0; margin-bottom: 24px; }
  .home .dock.inline-desktop:has(+ .check-link) { margin-bottom: 0; }
  .home .check-link { margin: -6px 0 24px; }
  .gauge-card .card-head h2 { padding-right: 0; }
}

/* ── question ─────────────────────────────────────────────────────────────────────────────── */
.question .q-paused { margin-bottom: 16px; }
.question .q-part { color: var(--ink-3); font: 550 var(--fs-small)/1.3 var(--font); margin: 8px 0 8px; }
.question h1 { margin-top: 12px; }
.question .q-part + h1 { margin-top: 0; }
.question .why { margin-top: 12px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); max-width: 52ch; text-wrap: pretty; }
/* A question he skipped, offered again once the rest of the round is done. */
.question .q-again { margin: 4px 0 10px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); max-width: 52ch; }
.question .q-note { margin-top: 16px; }
/* Answer buttons that put words in the well (yes/no, pick one, rank, a handoff's names). Long options stack. */
.question .choices { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.question .choices .chip { min-width: 96px; }
@media (max-width: 599px) {
  .question .choices.long { flex-direction: column; align-items: stretch; }
  .question .choices.long .chip { justify-content: flex-start; padding: 12px 18px; min-height: var(--btn-h); line-height: 1.3; }
}
/* The month-by-month sweep: one row of three per month. */
.question .sweep { margin-top: 20px; display: grid; gap: 8px; max-width: 560px; }
.question .sw-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; }
.question .sw-name { font: 550 var(--fs-small)/1.2 var(--font); color: var(--ink); }
.question .sweep .seg { padding: 3px; }
.question .sweep .seg > button { min-height: 44px; padding: 0 6px; font-size: var(--fs-small); }
@media (max-width: 359px) { .question .sw-row { grid-template-columns: 1fr; gap: 4px; } }
/* His own words above the question: two that disagree side by side from 768, stacked on a phone; or one. */
.question .said-pair, .question .said-one { margin: 8px 0 20px; display: grid; gap: 12px; }
@media (min-width: 768px) { .question .said-pair { grid-template-columns: 1fr 1fr; } }
.said-card { padding: 16px 18px; border-radius: var(--r-tile); }
.said-card .said-when { color: var(--ink-3); font: 520 var(--fs-caption)/1.3 var(--font); }
.said-card .said-words { margin: 6px 0 0; color: var(--ink); font: 420 var(--fs-body)/1.5 var(--font); max-width: 62ch; text-wrap: pretty; }
/* GR4: one quiet line when an earlier answer took a question off the list. Not a toast; nothing moves. */
.question .q-retired { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 8px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); }
.question .q-retired svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--ok); }
.question.is-freq .freq { margin-top: 24px; }
.question.is-freq .freq .well textarea { min-height: calc(2 * 1.55em + 44px); }
.question .well { margin-top: 24px; }
.question .skips { margin-top: 20px; }
.question .skips.is-nudged .chip { animation: nudge 520ms var(--ease-out) 1; }
.question .skip-hint { margin-top: 20px; color: var(--ink); font: 520 var(--fs-small)/1.45 var(--font); }
.question .skip-hint + .skips { margin-top: 10px; }
/* On a phone the three skips are one deliberate stack of equal rows, quieter than the answer buttons. */
@media (max-width: 599px) {
  .question .skips { flex-direction: column; align-items: stretch; gap: 8px; }
  .question .skips .chip { justify-content: flex-start; min-height: 48px; padding: 0 16px; }
}
.question .why-line { margin-top: 16px; animation: screen-in var(--d-state) var(--ease-out) both; }
.question .why-line .why-actions { margin-top: 4px; }
.question .why-line .hint { margin-top: 8px; font-size: var(--fs-caption); color: var(--ink-3); max-width: 52ch; }
.question .why-live { margin-top: 6px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); }
.question .why-listening { margin-top: 8px; }
.question .why-live:empty { display: none; }
.question .q-stale { margin-top: 8px; }

/* ── round ────────────────────────────────────────────────────────────────────────────────── */
.round-head { margin-top: 12px; }
.round-head .count { margin-top: 6px; color: var(--ink-2); font: 480 var(--fs-small)/1.3 var(--font); }
.round-list { margin-top: 24px; }
.round-list .lg-row { min-height: 64px; align-items: center; }
.round-list .q-n { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--ink-2); font: 600 var(--fs-caption)/1 var(--font); font-variant-numeric: tabular-nums; }
.round-list .is-current .q-n { border: 2px solid var(--accent-text); color: var(--ink); }
.round-list .q-n .s-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.round-list .q-t { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 420 var(--fs-body)/1.4 var(--font); }
/* What an earlier answer took off the list: under it, quieter, with its tick lit. */
.round-retired { margin-top: 28px; }
.round-retired .rr-title { font: 600 var(--fs-body)/1.3 var(--font); color: var(--ink); }
.round-retired .rr-note { margin-top: 4px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); max-width: 60ch; }
.round-list.is-retired { margin-top: 12px; }
.round-list.is-retired .q-n { border-color: transparent; background: var(--ok-tint); color: var(--ok); }
.round-list.is-retired .q-t { color: var(--ink-2); }
/* Every status ends on the same right edge, filled or not. */
.status.quiet, .status.open, .status.started, .status.carried, .status.here { padding-right: 0; }
/* A phone gives the question the whole row; the status word goes on its own line under it. */
@media (max-width: 599px) {
  .round-list .lg-row { flex-wrap: wrap; row-gap: 6px; }
  .round-list .q-t { flex: 1 1 calc(100% - 44px); }
  .round-list .lg-row > .status { margin-left: 44px; }
}

/* ── your answers ─────────────────────────────────────────────────────────────────────────── */
.answers-list { margin-top: 24px; }
.part-card { padding: 4px 20px; content-visibility: auto; contain-intrinsic-size: auto 400px; }
@media (min-width: 768px) { .part-card { padding: 4px 24px; } }
/* A heading that wraps keeps clear of the hairline under it. The title takes the width first; the level (or the
   colleague's role) sits beside it when both fit, and on the line under it when they do not, never squeezing it. */
.part-card .part-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 56px; padding: 12px 0 10px; }
.part-card .part-head h2 { font: 600 var(--fs-body)/1.3 var(--font); flex: 1 1 auto; min-width: 0; max-width: 100%; }
.part-card .part-head .part-meta { flex: 0 0 auto; max-width: 100%; display: inline-flex; align-items: center; gap: 10px; }
.part-card .part-head .lvl { color: var(--ink-3); font: 480 var(--fs-small)/1.3 var(--font); }
.answer-item { position: relative; padding: 16px 0 18px; border-top: 1px solid var(--line); }
.answer-item .a-q { padding-right: 52px; font: 500 var(--fs-small)/1.45 var(--font); color: var(--ink-2); }
.answer-item .a-said { margin-top: 8px; font: 420 var(--fs-body)/1.5 var(--font); white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.answer-item.is-open .a-said { display: block; -webkit-line-clamp: none; }
.answer-item .a-meta { margin-top: 8px; display: flex; align-items: center; gap: 12px; color: var(--ink-3); font: 520 var(--fs-caption)/1.35 var(--font); }
.answer-item .a-meta .btn-text { min-height: var(--hit); margin: -10px 0; font-size: var(--fs-caption); }
.answer-item .a-edit { position: absolute; top: 10px; right: -6px; }
.answer-item .editor { margin-top: 12px; }
.answer-item .editor .well textarea { min-height: 150px; }
/* Changing an answer given in two boxes (or the cold probe's rows): the boxes as the question drew them. */
.answer-item .editor.is-boxed .well textarea { min-height: 0; }
.answer-item .editor.is-boxed .probe .list-box { display: none; }
.answer-item .edit-actions { margin-top: 12px; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.answer-item .edit-actions .cta { flex: 1 1 240px; max-width: 360px; }
.answer-item .edit-actions .banner { flex-basis: 100%; }

/* ── admin ────────────────────────────────────────────────────────────────────────────────── */
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; min-height: 52px; }
.admin-head h1 { flex: 1; }
.admin-head .cta { width: auto; min-width: 210px; }
@media (max-width: 599px) {
  .admin-head { flex-wrap: wrap; }
  .admin-head h1 { flex-basis: 100%; }
  .admin-head .cta { flex: 1 1 100%; }
}
.admin-panel { margin-top: 20px; animation: screen-in var(--d-enter) var(--ease-out) both; }
.admin-panel .form-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.admin-panel .form-grid .field + .field { margin-top: 0; }
.admin-panel .panel-actions { margin-top: 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-panel .panel-actions .cta { width: auto; min-width: 240px; }
@media (min-width: 768px) { .admin-panel .form-grid { grid-template-columns: repeat(3, 1fr); } }
.reveal .reveal-row { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.reveal .reveal-row .input { flex: 1 1 320px; }
.reveal .note { margin-top: 12px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); }
.owners { margin-top: 24px; }
.table-card { overflow: hidden; padding: 0; }
.table-scroll { overflow-x: auto; }
table.admin { width: 100%; border-collapse: collapse; font: 420 calc(15px * var(--text-scale))/1.35 var(--font); }
table.admin > thead > tr > th { position: sticky; top: 0; text-align: left; font: 600 var(--fs-admin-th)/1.2 var(--font); color: var(--ink-3); padding: 16px 14px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--glass-solid); }
table.admin > thead > tr > th.n, table.admin > tbody > tr > td.n { text-align: right; }
table.admin > tbody > tr > td { height: 64px; padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
table.admin > tbody > tr:first-child > td { border-top: 0; }
table.admin > tbody > tr.owner-row:hover > td { background: var(--raise); }
table.admin > tbody > tr > td:first-child, table.admin > thead > tr > th:first-child { padding-left: 24px; }
table.admin > tbody > tr > td:last-child, table.admin > thead > tr > th:last-child { padding-right: 24px; text-align: right; }
table.admin .biz { font: 600 var(--fs-body)/1.3 var(--font); color: var(--ink); }
/* The second line of the cell starts where the business name does, past the chevron. */
table.admin .who { color: var(--ink-3); font-size: var(--fs-caption); margin-top: 2px; padding-left: 22px; }
/* "today, 1:19 AM" may break after the comma, never inside the time (ui.js when() joins the time with a no-break space). */
table.admin > tbody > tr > td.when { min-width: 96px; }
table.admin .warn-n { color: var(--warn); font-weight: 600; }
table.admin .actions { display: inline-flex; gap: 8px; }
table.admin > tbody > tr.confirm-row > td { height: auto; padding-top: 0; border-top: 0; text-align: left; }
.confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r-tile); background: var(--raise); }
.confirm p { flex: 1 1 260px; }
.owner-list .lg-row { align-items: flex-start; padding-right: 8px; }
.owner-list .o-main { flex: 1; min-width: 0; }
.owner-list .o-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.owner-list .o-line + .o-line { margin-top: 8px; }
.owner-list .biz { font: 600 var(--fs-body)/1.3 var(--font); }
.owner-list .meta { color: var(--ink-3); font: 520 var(--fs-caption)/1.35 var(--font); }
.owner-list .confirm { margin: 0 16px 16px; }
/* The name sets the button's height, one line or two, so the line under it never runs into it; the 44 px hit area
   comes from the ::after around it rather than from a min-height pulled back with negative margins. */
.biz-btn { position: relative; display: inline-flex; align-items: flex-start; gap: 6px; margin: 0 0 0 -6px; padding: 0 6px; border-radius: 10px; color: var(--ink); text-align: left; }
.biz-btn::after { content: ""; position: absolute; inset: -10px -4px; }
.biz-btn .chev-r { margin-top: 3px; }
.biz-btn .chev-r { flex: none; width: 16px; height: 16px; color: var(--ink-3); transition: transform var(--d-state) var(--ease-out); }
.biz-btn[aria-expanded="true"] .chev-r { transform: rotate(90deg); }
table.admin > tbody > tr.owner-row { cursor: pointer; }
table.admin > tbody > tr > td.qs { color: var(--ink-2); white-space: nowrap; }
table.admin > tbody > tr > td.qs span { display: block; }
/* The engine's word and its flag stack, so a row with both never pushes the actions off a 1280 screen. */
table.admin > tbody > tr > td.eng { white-space: nowrap; }
table.admin > tbody > tr > td.eng .status { display: flex; width: max-content; }
table.admin > tbody > tr > td.eng .status + .status { margin-top: 4px; }
/* "Open items" and "Failed reads" over two short lines: the columns hold one or two digits. */
table.admin > thead > tr > th.n { white-space: normal; min-width: 52px; }
@media (min-width: 960px) { table.admin > thead > tr > th, table.admin > tbody > tr > td { padding-left: 10px; padding-right: 10px; } }
table.admin > tbody > tr.log-row > td { height: auto; padding: 0 24px 20px; border-top: 0; text-align: left; }
.owner-list .log-link { margin: -6px 0 -8px -4px; }
.owner-list .log-box { padding: 0 16px 16px; }
.gen-log { padding: 16px 18px; border-radius: var(--r-tile); background: var(--raise); color: var(--ink); font: 420 var(--fs-caption)/1.45 var(--font); }
.gen-log .log-title { font: 600 var(--fs-body)/1.3 var(--font); }
.gen-log .log-sec { margin-top: 16px; }
.gen-log h3 { font: 600 var(--fs-small)/1.3 var(--font); color: var(--ink-2); margin-bottom: 6px; }
.gen-log .log-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; }
.gen-log .log-dl dt { color: var(--ink-3); }
.gen-log .log-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 599px) { .gen-log .log-dl { grid-template-columns: 1fr; gap: 0; } .gen-log .log-dl dd { margin-bottom: 6px; } }
.gen-log details { border-top: 1px solid var(--line); }
.gen-log details > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: var(--hit); padding: 6px 0; cursor: pointer; list-style: none; }
.gen-log details > summary::-webkit-details-marker { display: none; }
.gen-log details > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform var(--d-state); margin-right: 2px; }
.gen-log details[open] > summary::before { transform: rotate(45deg); }
.gen-log .log-sum { font-weight: 600; }
.gen-log .log-meta { color: var(--ink-3); }
.gen-log .log-body { padding: 4px 0 12px 17px; display: grid; gap: 10px; }
.gen-log .log-scroll { overflow-x: auto; }
.gen-log .log-table { border-collapse: collapse; width: 100%; min-width: 640px; }
.gen-log .log-table th { text-align: left; color: var(--ink-3); font-weight: 600; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.gen-log .log-table td { padding: 6px 10px 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.gen-log .log-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.gen-log .log-rej + .log-rej { margin-top: 4px; }
.gen-log .log-by { display: block; color: var(--warn); }
.gen-log .log-text { display: block; color: var(--ink-2); }
.gen-log .log-qs { padding: 0 0 8px 17px; }
.gen-log .log-q { display: flex; gap: 10px; padding: 6px 0; }
.gen-log .log-q + .log-q { border-top: 1px solid var(--line); }
.gen-log .log-n { flex: none; width: 22px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.gen-log .log-qbody { min-width: 0; }
.gen-log .log-ask { color: var(--ink); }
.gen-log .log-hist { margin-top: 4px; color: var(--ink-2); }
.gen-log .log-empty { color: var(--ink-3); }
.gen-log .status { height: 24px; }
.log-loading .loader { min-height: 120px; }
.owners .for-wide { display: none; }
/* The table needs about 1140 px with the stage column; narrower, the list says the same without a sideways scroll. */
@media (min-width: 1220px) { .owners .for-wide { display: block; } .owners .for-narrow { display: none; } }

/* ── 7 Phase 4 pieces: the read-back (live on the question route) and the two-box question ─────── */
.readback-page { padding-top: 16px; }
.readback .rb-sub { margin-top: 6px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); text-wrap: pretty; }
.readback h1, .readback .rb-h2 { text-wrap: balance; }
/* A settled item keeps the height of the controls it replaced (pieces.js), so nothing below moves. */
.readback .rb-settled { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.readback .rb-settled:focus { outline: none; }
.readback .rb-when { margin-top: 6px; color: var(--ink-2); font: 480 var(--fs-caption)/1.35 var(--font); }
.readback .rb-when:empty { display: none; }
@media (min-width: 768px) { .readback .rb-controls > .seg { max-width: 360px; } }
.readback .rb-item { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.readback .rb-item legend { font: 420 var(--fs-answer)/1.5 var(--font); color: var(--ink); margin-bottom: 12px; float: left; width: 100%; }
.readback .rb-item legend + * { clear: both; }
.readback .rb-item legend > span { display: block; }
.readback .rb-kicker { color: var(--ink-2); font: 600 var(--fs-small)/1.3 var(--font); margin-bottom: 6px; }
.readback .rb-quote { color: var(--ink-2); }
.readback .rb-ask { margin-top: 6px; color: var(--ink-2); font: 520 var(--fs-small)/1.4 var(--font); }
.readback .rb-heard { margin-top: 4px; color: var(--ink); font: 600 calc(18px * var(--text-scale))/1.4 var(--font); font-variant-numeric: tabular-nums; }
.readback .rb-cons { clear: both; margin: -4px 0 12px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); max-width: 62ch; }
.readback .rb-controls { clear: both; }
.readback .rb-other, .readback .rb-due { margin-top: 14px; }
.readback .rb-due .f-label { display: block; color: var(--ink-2); font: 600 var(--fs-small)/1.3 var(--font); margin-bottom: 8px; }
.readback .rb-item.is-done legend { color: var(--ink-2); }
.readback .rb-item.is-done .rb-cons { display: none; }
.readback .rb-fix { margin-top: 12px; animation: screen-in var(--d-state) var(--ease-out) both; }
.rb-cards > * + * { margin-top: 16px; }
.readback .rb-h2 { font: 600 var(--fs-title)/1.25 var(--font); font-stretch: 94%; letter-spacing: -.01em; }
.readback .rb-actions { margin-top: 12px; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.readback .rb-actions .cta { flex: 1 1 200px; max-width: 280px; }
.readback .rb-editor .rb-due { margin-top: 14px; }
.readback .rb-due .seg > button { padding: 0 4px; font-size: var(--fs-small); white-space: nowrap; letter-spacing: -.005em; }
.readback .rb-said { margin-top: 8px; color: var(--ink-2); font: 420 var(--fs-body)/1.5 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.readback .rb-controls > .error-slot { margin-top: 12px; }
.readback .rb-chip legend .rb-quote { color: var(--ink); }
.freq .f-label { display: block; color: var(--ink-2); font: 600 var(--fs-small)/1.3 var(--font); margin-bottom: 10px; }
.freq .f-label + * { margin-top: 0; }
.freq .well { margin-top: 12px; }
.freq .f-cost { margin-top: 24px; }
.freq .f-cannot { margin-top: 10px; }

/* ── 8 Phase 5: stages, the probe and the boxed list, the read-back set, people helping, answers, admin ──────── */
/* The privacy line is the same wherever it sits: sign-in, a colleague's questions, their waiting card. */
.privacy { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font: 480 var(--fs-small)/1.5 var(--font); max-width: 52ch; }
.privacy svg { width: 16px; height: 16px; margin-top: 3px; color: var(--ink-3); flex: none; }
.q-privacy { margin-top: 28px; }

/* A new stage, said once above its first question (and above the set that opens stage 3). */
.q-intro, .readback .rb-intro { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; color: var(--ink); font: 560 var(--fs-small)/1.45 var(--font); max-width: 56ch; text-wrap: pretty; }
/* A marker, not a control: quiet ink, no glow (orange is only the thing he can do now). */
.q-intro-dot, .readback .rb-intro::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--ink-2); }

/* His list, boxed and set apart above the question it is about; more than twelve scroll inside the box. */
.list-box { margin: 8px 0 4px; padding: 14px 16px 12px; border-radius: var(--r-tile); background: var(--raise); border: 1px solid var(--line); max-width: 560px; }
.list-box .lb-title { color: var(--ink-2); font: 600 var(--fs-small)/1.3 var(--font); margin-bottom: 8px; }
.list-box .lb-items { display: grid; gap: 2px; }
.list-box .lb-items li { position: relative; padding: 5px 0 5px 18px; color: var(--ink); font: 450 var(--fs-body)/1.4 var(--font); overflow-wrap: anywhere; }
.list-box .lb-items li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.list-box.is-long .lb-items { max-height: calc(12 * 2.1em); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
/* A list he picks from: each line is a button that puts its words in his answer (and takes them out again). */
.list-box .lb-hint { margin: -4px 0 8px; color: var(--ink-3); font: 480 var(--fs-caption)/1.35 var(--font); }
.list-box .lb-items li.has-pick { padding: 0; }
.list-box .lb-items li.has-pick::before { display: none; }
.list-box .lb-pick { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 10px 8px 10px 4px; margin: 0 -4px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font: 450 var(--fs-body)/1.4 var(--font); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.list-box .lb-pick .lb-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--ink-2); }
.list-box .lb-pick .lb-mark svg { width: 14px; height: 14px; }
.list-box .lb-pick .ic-on { display: none; }
.list-box .lb-pick[aria-pressed="true"] .lb-mark { background: var(--fill-inverse); border-color: transparent; color: var(--ink-inverse); }
.list-box .lb-pick[aria-pressed="true"] .ic-add { display: none; }
.list-box .lb-pick[aria-pressed="true"] .ic-on { display: block; }
.list-box .lb-pick:active { background: var(--raise-2); }
@media (hover: hover) and (pointer: fine) { .list-box .lb-pick:hover { background: var(--raise-2); } }
.list-box .lb-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.list-box.is-long:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.question .list-box { margin-top: 18px; }
.question .list-box + .well, .question .list-box + .choices { margin-top: 20px; }

/* The cold probe: three rows, each a name and how much it wears on him; "Nothing else" under them. */
.question .probe { margin-top: 20px; }
.probe .probe-rate-title { margin-top: 20px; max-width: 640px; color: var(--ink-2); font: 560 var(--fs-small)/1.45 var(--font); }
.probe .list-box + .probe-rate-title { margin-top: 22px; }
.probe .probe-rate-title + .probe-rows { margin-top: 12px; }
.probe .probe-rows { margin-top: 20px; display: grid; gap: 22px; max-width: 640px; }
/* A skip is chosen: the rows are not what Next will send (still tappable, as the well is). */
.probe .probe-row.is-dimmed { opacity: .5; }
.probe .probe-row { display: grid; gap: 8px; }
.probe .probe-row .input { height: 52px; }
.probe .probe-row.is-listening .input { border-color: var(--accent-line); }
.probe .probe-live { margin-top: 6px; color: var(--ink-2); font: 480 var(--fs-small)/1.4 var(--font); }
.probe .probe-live:empty { display: none; }
.probe .probe-foot { margin-top: 16px; }
.probe .probe-none:disabled { opacity: .45; cursor: default; }
.seg.rate-seg > button { min-height: 44px; padding: 0 8px; font-size: var(--fs-small); white-space: nowrap; }
@media (min-width: 600px) { .probe .probe-row { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); align-items: start; } }

/* Screen 4: the counter, part headings, the thanks after a fix, the rate cards, five at a time. */
.readback .rb-counter { margin-top: 8px; color: var(--ink-3); font: 520 var(--fs-caption)/1.35 var(--font); }
.readback .rb-part { font-size: calc(19px * var(--text-scale)); }
.readback .rb-thanks { margin-top: 6px; color: var(--ok); font: 520 var(--fs-small)/1.4 var(--font); }
.readback .rb-kicker { display: inline-flex !important; width: fit-content; margin-bottom: 8px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--raise-2); color: var(--ink-2); font: 600 var(--fs-caption)/1.3 var(--font); }
.readback .rb-rate .seg { max-width: 420px; }
.readback .rb-item[disabled] { opacity: 1; }
.rb-operator { margin-bottom: 16px; }
.rb-pager { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 16px; }
.rb-pager .btn { min-width: 160px; }

/* Home: what an earlier stage left open and what we also heard sit under the three rows, in the same panel. */
.home .stages .stage-rows > li + li { border-top: 1px solid var(--line); }
.home .stages .stage-note { padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.home .stages .sn-title { color: var(--ink-2); font: 600 var(--fs-small)/1.3 var(--font); }
.home .stages .sn-list { margin-top: 6px; }
.home .stages .sn-list li { position: relative; padding: 4px 0 4px 18px; color: var(--ink); font: 450 var(--fs-small)/1.45 var(--font); overflow-wrap: anywhere; }
.home .stages .sn-list li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.home .stages .sn-more { margin-top: 4px; color: var(--ink-3); font: 520 var(--fs-caption)/1.35 var(--font); }
/* The closing card: converged, or what we can start on and what is still unknown. */
.resume.closing .card-icon { color: var(--ok); }
.resume .closing-body p + p, .resume .closing-body ul + p { margin-top: 12px; }
/* His three things: words to read, a plain list (never boxes that look like something to tap). */
.resume .start-with { margin-top: 10px; display: grid; gap: 2px; }
.resume .start-with li { position: relative; padding: 4px 0 4px 20px; color: var(--ink); font: 520 var(--fs-body)/1.45 var(--font); overflow-wrap: anywhere; }
.resume .start-with li::before { content: ""; position: absolute; left: 4px; top: calc(4px + .725em - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); }
.resume .closing-body .no-more { color: var(--ink); }
.resume .unknowns-note { margin-top: 2px; color: var(--ink-3); font: 480 var(--fs-small)/1.45 var(--font) !important; }
.resume .unknowns { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.resume .unknowns-title { color: var(--ink-2); font: 600 var(--fs-small)/1.3 var(--font); }
.resume .unknowns ul { margin-top: 6px; }
.resume .unknowns li { position: relative; padding: 4px 0 4px 18px; color: var(--ink-2); font: 450 var(--fs-small)/1.45 var(--font); }
.resume .unknowns li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--ink-3); }

/* Home: the people he adds. */
.home-main > .people-home { order: 2; }
.people-home:empty { display: none; }
.people-card .card-head h2 { font: 600 var(--fs-body)/1.3 var(--font); padding-right: 44px; }
.people-card .people-mini { margin-top: 8px; }
.people-card .people-mini li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.people-card .pm-name { font: 600 var(--fs-body)/1.3 var(--font); }
.people-card .pm-status { color: var(--ink-3); font: 520 var(--fs-caption)/1.35 var(--font); }
.people-card .add-link { margin-top: 4px; }
.people-prompt .pp-text { padding-right: 40px; color: var(--ink); font: 450 var(--fs-body)/1.5 var(--font); max-width: 52ch; }
.people-prompt .btn { margin-top: 14px; }
.add-link { margin-left: -4px; }

/* #/people: the list, the brief and the link. */
#app.screen-people .people-head { margin-top: 12px; }
.people-intro { margin-top: 8px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); max-width: 56ch; }
.people-add { margin-top: 20px; }
.people-add .cta { width: auto; min-width: 280px; }
@media (max-width: 599px) { .people-add .cta, .people-add .cta.compact.auto { width: 100%; min-width: 0; } }
/* The brief and the link card open under the rail, never behind it. */
.brief-slot { scroll-margin-top: calc(var(--rail-h) + env(safe-area-inset-top) + 12px); }
.brief-panel .brief-discard { margin-top: 20px; }
.reveal .reveal-row .copy-cta { flex: 0 1 auto; min-width: 200px; }
@media (max-width: 599px) { .reveal .reveal-row .copy-cta { flex: 1 1 100%; } }
.people-max { color: var(--ink-2); font: 520 var(--fs-small)/1.45 var(--font); }
.people-list-slot { margin-top: 24px; }
.people-list .person { padding: 16px 20px; }
.people-list .p-name { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font: 600 var(--fs-body)/1.3 var(--font); }
.people-list .p-role { color: var(--ink-2); font: 450 var(--fs-small)/1.3 var(--font); }
.people-list .p-status { margin-top: 6px; }
/* "Has not used the link yet · works until Nov 7" wraps on a narrow phone or with Larger text: the date is the part
   he needs, so it is never the part cut off. */
.people-list .p-status .status { white-space: normal; height: auto; min-height: 28px; flex: 0 1 auto; align-items: flex-start; line-height: 1.35; padding-top: 6px; padding-bottom: 6px; }
.people-list .p-status .status svg, .people-list .p-status .status .s-dot { flex: none; margin-top: 2px; }
.people-list .p-name:focus { outline: none; }
.people-list .p-name:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.people-list .p-actions { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 12px; }
.people-list .p-confirm { margin-top: 12px; }
.people-list .person.is-removed .p-name > span:first-child { color: var(--ink-3); }
.people-list .error-slot { margin-top: 10px; }
.brief-panel { margin-top: 20px; animation: screen-in var(--d-enter) var(--ease-out) both; }
.brief-panel .brief-intro { margin-top: 8px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); max-width: 56ch; }
.brief-panel .form-grid { display: grid; gap: 18px; margin-top: 20px; }
.brief-panel .form-grid .field + .field { margin-top: 0; }
@media (min-width: 768px) { .brief-panel .brief-who { grid-template-columns: 1fr 1fr; } }
.brief-panel .gaps { margin-top: 28px; }
.brief-panel .gaps-title { font: 600 var(--fs-body)/1.3 var(--font); color: var(--ink); }
.brief-panel .gaps-help { margin-top: 4px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); max-width: 56ch; }
.brief-panel .gap-group { margin-top: 18px; }
.brief-panel .gap-part { color: var(--ink-3); font: 600 var(--fs-caption)/1.3 var(--font); letter-spacing: .01em; margin-bottom: 4px; }
.brief-panel .gap { border-top: 1px solid var(--line); }
.brief-panel .gap-label { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 13px 0; cursor: pointer; }
.brief-panel .gap-box { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; left: 0; top: 13px; }
.brief-panel .gap-check { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--field-line); background: var(--well-solid); display: grid; place-items: center; color: transparent;
  transition: background-color var(--d-state), border-color var(--d-state); }
.brief-panel .gap-check svg { width: 16px; height: 16px; }
.brief-panel .gap-box:checked + .gap-check { background: var(--fill-inverse); border-color: transparent; color: var(--ink-inverse); }
/* Unticked shows no tick at all, by visibility, not by colour: forced colours repaint a transparent colour. */
.brief-panel .gap-box:not(:checked) + .gap-check svg { visibility: hidden; }
.brief-panel .gap-box:focus-visible + .gap-check { outline: 2px solid var(--focus); outline-offset: 3px; }
.brief-panel .gap-text { flex: 1; min-width: 0; color: var(--ink); font: 450 var(--fs-body)/1.4 var(--font); }
.brief-panel .gap-auto { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--raise-2); color: var(--ink-2); font: 600 var(--fs-caption)/1.5 var(--font); vertical-align: 2px; white-space: nowrap; }
.brief-panel .gap-see { margin: -6px 0 12px 36px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); overflow-wrap: anywhere; }
.brief-panel .gaps .hint { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-2); }
.brief-panel .gaps .hint.err { color: var(--err); }
.brief-panel .brief-words { margin-top: 28px; }
.brief-panel .panel-actions { margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brief-panel .panel-actions .cta { width: auto; min-width: 240px; }
@media (max-width: 599px) { .brief-panel .panel-actions .cta { flex: 1 1 100%; } }
.brief-panel .panel-actions .error-slot { flex-basis: 100%; }

/* Screen 5: find, what it said before, his fixes, what others told us. */
.a-search { position: relative; margin-top: 16px; max-width: 560px; }
.a-search .input { padding-left: 46px; }
.a-search .a-search-ic { position: absolute; left: 16px; top: 19px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.a-search .input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.a-none { margin-top: 16px; }
.answer-item .a-history { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--line-strong); display: grid; gap: 8px; }
.answer-item .a-before-when { color: var(--ink-3); font: 520 var(--fs-caption)/1.35 var(--font); }
.answer-item .a-before-said { margin-top: 2px; color: var(--ink-2); font: 420 var(--fs-small)/1.5 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.answer-item .a-hist-more { justify-self: start; margin: -8px 0 -10px -4px; }
.answer-item.is-fix .a-q, .answer-item.is-theirs .a-q { padding-right: 0; }
.part-card .from-note { margin: -2px 0 10px; color: var(--ink-2); font: 480 var(--fs-small)/1.45 var(--font); max-width: 60ch; }
.answers-list .part-card[hidden] { display: none !important; }

/* Screen 6: the stage words and flags, the links into what the owner sees, the gates. */
table.admin td.stage-cell { min-width: 120px; }
table.admin td.stage-cell .stage-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
table.admin td.stage-cell .status { height: 24px; }
.gen-log .admin-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.gen-log .log-head { font: 600 var(--fs-body)/1.3 var(--font); color: var(--ink); margin-bottom: 8px; }
.gen-log .log-stage { margin-top: 12px; }
.gen-log .log-stage-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.gen-log .log-table.gates { min-width: 720px; table-layout: fixed; }
.gen-log .log-table.gates th:nth-child(1) { width: 52px; }
.gen-log .log-table.gates th:nth-child(2) { width: 34%; }
.gen-log .log-table.gates th:nth-child(3) { width: 132px; }
.gen-log .log-table.gates th:nth-child(4) { width: 150px; }
.gen-log .log-table.gates td { overflow-wrap: anywhere; }
.gen-log .log-dl-wrap { margin-top: 12px; }
.gen-log .log-dnb { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--warn-tint); }
.gen-log .log-dnb li { margin-top: 4px; }
.gen-log .log-people li + li { margin-top: 4px; }

/* A colleague: the brand mark where Home would be, their waiting card, their join heading. */
.rail-mark .mark { width: 28px; height: 28px; color: var(--accent); }
.wait .greet { margin: 8px 0 16px; }
.wait .greet .hi { display: block; font: 480 var(--fs-body)/1.3 var(--font); color: var(--ink-2); }
.wait .greet .name { display: block; margin-top: 4px; }
.wait .answers-link { margin-top: 16px; }
.wait .q-privacy { margin-top: 24px; }
.auth .hello .t-display.long { font-size: calc(32px * var(--text-scale)); line-height: 1.1; text-wrap: balance; }
@media (min-width: 768px) { .auth .hello .t-display.long { font-size: calc(40px * var(--text-scale)); } }
.auth .hello .sub.lede-sub { font: 450 var(--fs-body)/1.5 var(--font); letter-spacing: 0; }
.said-card.is-theirs .said-when { color: var(--ink-2); }

/* ── preferences: motion, transparency, contrast, forced colours ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .mic[aria-pressed="true"]::after { opacity: .6; transform: none; }
  .loader line { animation: none !important; stroke: var(--accent-text); }
  .loader .loader-label { display: block; }
}
/* Long lists stay inside the glass budget (four blurred panels a screen): same look, no blur. */
.glass.solid { background-color: var(--glass-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass { background-color: var(--glass-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .rail.is-scrolled { background: var(--rail-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (forced-colors: active) {
  .glass, .chip, .cta, .btn, .well, .seg, .icon-btn, .mic, .counter-pill, .status, .banner, .input, .gap-check, .list-box { border: 1px solid CanvasText; }
  .gauge .tick { stroke: GrayText; } .gauge .tick.on { stroke: CanvasText; }
  .minibar i { background: GrayText; } .minibar .l1 i:nth-child(-n+1), .minibar .l2 i:nth-child(-n+2), .minibar .l3 i { background: CanvasText; }
  .switch::after { background: CanvasText; }
  /* A chosen segment is never shown by fill alone: forced colours remove the fill. */
  .seg > button[aria-checked="true"], .chip[aria-pressed="true"], .chip[aria-checked="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; outline: 2px solid Highlight; }
  .brief-panel .gap-box:checked + .gap-check, .list-box .lb-pick[aria-pressed="true"] .lb-mark { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
}
.readback .rb-earlier { margin-top: 10px; display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; color: var(--ink-2); font: 480 var(--fs-small)/1.4 var(--font); }
.readback .rb-earlier .btn-text { margin: -8px 0; }
.people-list .p-links { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; margin-top: 6px; }
.people-list .p-actions + .p-links { margin-top: 8px; }
@media (min-width: 600px) {
  .people-list .p-do { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
  .people-list .p-do > .p-actions, .people-list .p-do > .p-links { margin-top: 0; }
}
.readback .rb-item { scroll-margin-top: calc(var(--rail-h) + env(safe-area-inset-top) + 16px); }