/* Unbluffable Exam Room: an interview room, not a dashboard. Warm paper and ink in light, a
   neutral near-black in dark; one accent (amber), kept for the challenged number and the
   challenge line. Newsreader for what is said (the question, the verdict), IBM Plex Sans for
   the interface, IBM Plex Mono for numbers. Tokens on :root; dark follows the system unless
   the theme control set data-theme on <html>. */

:root {
  color-scheme: light;
  --bg: #f5f1e8; --paper: #fbf9f4; --stage: #ede7da; --ink: #1d1a16; --muted: #5d564c; --line: #dcd4c4;
  --accent: #1d1a16; --accent-fg: #f8f5ee; --soft: #e8e1d2; --softink: #1d1a16;
  --amber: #8f5300; --amberbg: #f5dfb0; --amberline: #c4841a;
  --warn: #5d564c; --warnbg: #ede7da; --warnline: #8b8478;
  --good: #1d1a16; --goodbg: #ede7da; --goodline: #5d564c;
  --bad: #a1301f; --neutral: #8b8478; --ring: #1d1a16; --shadow: none;
  --orb: transparent; --orbline: #1d1a16; --orbbar: #1d1a16;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: Newsreader, "Iowan Old Style", Georgia, serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --series-now: #1d1a16; --series-placement: #b0650a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121211; --paper: #1a1a19; --stage: #20201e; --ink: #ebe7df; --muted: #a49e94; --line: #31302d;
    --accent: #ebe7df; --accent-fg: #121211; --soft: #292826; --softink: #ebe7df;
    --amber: #f0b35a; --amberbg: #3d2c10; --amberline: #c4841a;
    --warn: #a49e94; --warnbg: #20201e; --warnline: #77726a;
    --good: #ebe7df; --goodbg: #20201e; --goodline: #a49e94;
    --bad: #f2a497; --neutral: #77726a; --ring: #ebe7df;
    --orbline: #ebe7df; --orbbar: #ebe7df;
    --series-now: #ebe7df; --series-placement: #e08a2e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211; --paper: #1a1a19; --stage: #20201e; --ink: #ebe7df; --muted: #a49e94; --line: #31302d;
  --accent: #ebe7df; --accent-fg: #121211; --soft: #292826; --softink: #ebe7df;
  --amber: #f0b35a; --amberbg: #3d2c10; --amberline: #c4841a;
  --warn: #a49e94; --warnbg: #20201e; --warnline: #77726a;
  --good: #ebe7df; --goodbg: #20201e; --goodline: #a49e94;
  --bad: #f2a497; --neutral: #77726a; --ring: #ebe7df;
  --orbline: #ebe7df; --orbbar: #ebe7df;
  --series-now: #ebe7df; --series-placement: #e08a2e;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
h1 { font: 400 clamp(32px, 4vw, 44px)/1.1 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: 15px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
p { text-wrap: pretty; }
a { color: var(--link, var(--ink)); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--amberbg); color: var(--ink); }
button, select, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(a, button, select, input, summary, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--accent); color: var(--accent-fg); padding: 10px 14px; border-radius: 4px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.fine { font-size: 13px; color: var(--muted); line-height: 1.55; }
/* Small labels: sentence case, never letter-spaced capitals. */
.eyebrow { font-size: 13px; font-weight: 500; color: var(--muted); }
.icon { width: 18px; height: 18px; flex-shrink: 0; }
kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }

/* ---------- Shell, header, footer ---------- */
.shell { max-width: 1240px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.shell > main { flex: 1 0 auto; }
.top { min-height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 40px; border-bottom: 1px solid var(--line); }
.brand { font: 500 22px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); display: flex; gap: 12px; align-items: baseline; white-space: nowrap; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brandmark, .logo { display: none; }
.brand-note { font: 400 14px var(--sans); color: var(--muted); letter-spacing: 0; }
.topright { display: flex; gap: 4px; align-items: center; min-width: 0; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 5px; border: 0; background: transparent; color: var(--ink); padding: 0; }
.icon-btn:hover { background: var(--soft); }
.profile-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: 5px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.profile-link:hover { background: var(--soft); }
.profile-link .icon { width: 18px; height: 18px; }
.profile-word { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.avatar-small { width: 22px; height: 22px; }
.avatar-big { width: 112px; height: 112px; font-size: 38px; }
.avatar-img { border-radius: 50%; object-fit: cover; display: block; }
.avatar-initials { border-radius: 50%; display: inline-grid; place-items: center; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 10px; }
.avatar-person .icon { width: 48%; height: 48%; }
.avatar-initials.avatar-big { font-size: 38px; letter-spacing: .02em; }
.avatar-holder { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--stage); border: 1px solid var(--line); color: var(--muted); }
.avatar-holder .icon { width: 44px; height: 44px; }
.about-grid { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.avatar-figure { margin: 0; display: grid; justify-items: center; gap: 6px; }
.about-fields { flex: 1 1 220px; min-width: 0; display: grid; gap: 8px; }
.about-fields .field { margin: 0; }
.about-fields input[type="text"] { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); padding: 10px 11px; }
.profile-rating { font-size: 13px; color: var(--muted); }
.theme-toggle .icon-sun, #mute .icon-muted { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
#mute[aria-pressed="true"] .icon-vol { display: none; }
#mute[aria-pressed="true"] .icon-muted { display: block; }
/* The "…" menu: profile and theme, out of the way. A native <details>; ui.js closes it on an
   outside click or Escape. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 210px; padding: 6px; display: grid; gap: 2px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.menu[open] .menu-list { animation: menu-in .16s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.menu-list .profile-link, .menu-item { width: 100%; justify-content: flex-start; min-height: 40px; padding: 0 10px; gap: 10px; border: 0; background: transparent;
  border-radius: 4px; color: var(--ink); font-size: 14px; font-weight: 400; display: flex; align-items: center; text-decoration: none; text-align: left; }
.menu-item:hover { background: var(--soft); }
.menu-item .icon { width: 18px; height: 18px; color: var(--muted); }
.clock { display: inline-flex; align-items: center; gap: 6px; font: 500 15px var(--mono); color: var(--ink); white-space: nowrap; padding: 0 8px; }
.clock .icon { color: var(--muted); }
.clock.pending { display: none; }
.clock.low { color: var(--amber); }
.disclosure { padding: 18px 40px 28px; color: var(--muted); font-size: 12px; line-height: 1.7; border-top: 1px solid var(--line); margin-top: 48px; }
.disclosure p { display: inline; }
.disclosure p + p::before { content: " "; }
.disclosure a { color: var(--muted); }

/* ---------- Controls ---------- */
/* Primary: solid ink. Secondary: a hairline outline. Links: underlined text. */
.btn { border: 1px solid var(--accent); border-radius: 5px; min-height: 44px; padding: 10px 18px; font-size: 15px; font-weight: 500; background: var(--accent); color: var(--accent-fg);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; text-align: center; transition: background-color .15s var(--ease), color .15s var(--ease); }
.btn:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 86%, var(--bg)); }
.btn.secondary, .btn-quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.secondary:hover, .btn-quiet:hover { background: var(--soft); }
.btn-small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn.wide { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* Start before the checks pass: still the solid primary (it opens the dialog), faded. */
.btn.not-ready { opacity: .4; }
.btn.not-ready:hover { background: var(--accent); }
/* Tags are text, not pills; only the challenge is coloured. */
.tag { display: inline; background: none; padding: 0; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.tag.warn { color: var(--muted); }
.tag-challenge { color: var(--amber); font-weight: 600; }
.tag.good, .tag-live, .tag-hint, .tag-nudge { color: var(--muted); }
.panel { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 20px 0 0; min-width: 0; }
.panel > h2 + * { margin-top: 10px; }
.field { margin: 18px 0; min-width: 0; }
.field > label, .field > legend, .levels legend { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
/* Native select popups follow the theme: the select carries the theme's color-scheme (the
   popup's own chrome), and every option its background and text from the tokens. Without this,
   a transparent select on Windows opens a white popup with light text in dark mode. */
select { color-scheme: light; }
:root[data-theme="dark"] select { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) select { color-scheme: dark; } }
select option, select optgroup { background-color: var(--paper); color: var(--ink); }
select option:disabled { color: var(--muted); }
select, textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); padding: 10px 11px; }
textarea { resize: vertical; line-height: 1.5; }
textarea::placeholder { color: var(--muted); }
.checkline { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; margin: 12px 0; }
.checkline input { accent-color: var(--active, var(--ink)); height: 18px; width: 18px; flex-shrink: 0; margin: 2px 0 0; }
.levels { border: 0; padding: 0; margin: 18px 0; min-width: 0; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.seg label { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 14px; cursor: pointer; transition: background-color .15s var(--ease); }
.seg label + label { border-left: 1px solid var(--line); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--soft); font-weight: 600; box-shadow: inset 0 -2px 0 var(--active, var(--ink)); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
.seg label:has(input:disabled) { opacity: .6; cursor: default; }
/* Disclosures: a quiet text control with a drawn chevron. */
.disclose > summary, .receipt > summary, .why summary, .models summary, .estimate summary, .more-topics summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.disclose > summary::-webkit-details-marker, .receipt > summary::-webkit-details-marker, .why summary::-webkit-details-marker,
.models summary::-webkit-details-marker, .estimate summary::-webkit-details-marker, .more-topics summary::-webkit-details-marker { display: none; }
.disclose > summary::before, .receipt > summary::before, .why summary::before, .models summary::before, .estimate summary::before, .more-topics summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .18s var(--ease); flex: none; margin-right: 2px; }
.disclose[open] > summary::before, .receipt[open] > summary::before, .why[open] summary::before, .models[open] summary::before,
.estimate[open] summary::before, .more-topics[open] summary::before { transform: rotate(45deg); }
.disclose > summary { font-size: 14px; color: var(--ink); }
.disclose > summary:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Track choices ---------- */
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0; }
.track { border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--ink); padding: 10px 12px; text-align: left; display: flex; flex-direction: column;
  justify-content: center; gap: 2px; min-height: 52px; min-width: 0; text-decoration: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.track strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.track small { font-size: 12px; color: var(--muted); }
.track:not([aria-disabled="true"]) small { display: none; }  /* "Live" on every track says nothing */
.track[aria-checked="true"] { background: var(--soft); border-color: var(--active, var(--ink)); box-shadow: inset 0 0 0 1px var(--active, var(--ink)); }
.track[aria-checked="true"] strong { font-weight: 600; }
.track[aria-disabled="true"] { border-style: dashed; cursor: not-allowed; }
.track[aria-disabled="true"] strong { color: var(--muted); }
a.track:hover, button.track:not([aria-disabled="true"]):hover { border-color: var(--ink); text-decoration: none; }

/* ---------- Landing ---------- */
/* One stage, full width: the claim, then the challenge playing out as live type, then the
   choice. No cards and no tiles; the only motion on the page is the sample itself. */
.landing-stage { padding: clamp(32px, 4vw, 56px) 40px 64px; }
.headline { font: 400 clamp(44px, 8.4vw, 120px)/.94 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.headline > .l { display: block; white-space: nowrap; }
.neq svg { display: inline-block; height: .72em; width: auto; vertical-align: -.03em; margin-right: .02em; overflow: visible; }
.neq path { fill: none; stroke: var(--brand, var(--ink)); stroke-linecap: round; }
.neq .bars { stroke-width: 2.3; }
.neq .slash { stroke-width: 2.1; }

.scene { margin-top: clamp(40px, 4.4vw, 64px); max-width: 880px; }
.scene .line { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 24px; padding: 8px 0; align-items: baseline; }
.scene .who { font-size: 14px; font-weight: 500; color: var(--muted); }
.scene .sampleq { font: 400 20px/1.45 var(--serif); }
.scene .says { position: relative; font-size: 20px; line-height: 1.45; }
.scene .ghost { visibility: hidden; }
.scene .typed { position: absolute; inset: 0; }
.scene .pending .who, .scene .pending .typed { visibility: hidden; }
.scene .is-challenge .who, .scene .is-challenge .typed { color: var(--amber); }
.scene .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.17em; background: currentColor; }
/* The committed number: an amber underline drawn once the line is said. */
.scene .hit { background: linear-gradient(var(--amber), var(--amber)) 0 100% / 0 3px no-repeat; padding-bottom: 2px; transition: background-size .25s var(--ease); }
.scene .hit.on { background-size: 100% 3px; }
.scene-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 10px; padding-left: calc(8rem + 24px); }
.scene-foot .play { display: inline-flex; align-items: center; gap: 6px; }
.scene-foot .play .icon { width: 14px; height: 14px; }
.scene-foot .replay-note { flex-basis: 100%; }
.replay-body.real { max-height: 420px; overflow-y: auto; }

.go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(24px, 3vw, 40px); }
.pick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em; font-size: clamp(20px, 2vw, 24px); }
.select-wrap { position: relative; display: inline-block; }
.select-wrap select { appearance: none; -webkit-appearance: none; font: inherit; font-weight: 500; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink);
  border-radius: 0; padding: 2px 1.15em 2px 1px; min-height: 44px; cursor: pointer; }
.select-wrap::after { content: ""; position: absolute; right: .1em; top: 50%; width: .6em; height: .6em; transform: translateY(-50%); pointer-events: none; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.select-wrap select:hover { border-bottom-color: var(--muted); }
.go .btn { min-height: 52px; padding: 12px 26px; font-size: 16px; }
.go .hero-actions { margin: 0; }
.proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.proof a { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
  font: 400 14px/1.3 var(--sans); color: var(--ink); text-decoration: none; transition: border-color .15s var(--ease); }
.proof a:hover { border-color: var(--muted); text-decoration: none; }

@media (max-width: 1080px) { .landing-stage { padding-left: 28px; padding-right: 28px; } }
@media (max-width: 760px) {
  .landing-stage { padding-left: 18px; padding-right: 18px; }
  .scene .line { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .scene-foot { padding-left: 0; }
  .scene .says, .scene .sampleq { font-size: 18px; }
}

/* ---------- Setup and device check ---------- */
.setuphead { padding: 48px 40px 8px; }
.setuphead h1 { font-size: clamp(32px, 3.4vw, 40px); margin: 0 0 8px; }
.setuphead .muted { font-size: 16px; }
.setupgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; padding: 24px 40px 24px; align-items: start; }
.setupgrid > .panel > h2 { font-size: 17px; }
.camsetup { position: relative; aspect-ratio: 16 / 9; max-height: 180px; width: 100%; border: 1px solid var(--line); background: var(--stage); border-radius: 4px; overflow: hidden; display: grid; place-items: center; margin-top: 12px; }
.camsetup video, .selfview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.camera-off { color: var(--muted); font-size: 13px; text-align: center; padding: 10px; }
.devrow { display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 20px 0 6px; }
.devrow strong { font-size: 14px; font-weight: 600; margin-right: auto; }
.check-state { font-size: 13px; color: var(--muted); }
.check-state.ok { color: var(--ink); }
.check-state.ok::before { content: ""; display: inline-block; width: 10px; height: 5px; margin: 0 6px 3px 0; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.check-state.bad { color: var(--bad); }
.devicebar { background: var(--line); height: 3px; overflow: hidden; margin-top: 8px; }
.devicebar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .08s linear; }
.device-note { font-size: 13px; color: var(--muted); margin-top: 6px; }
.device-note.ok { color: var(--muted); }
.device-note.bad { color: var(--bad); }
.natural-switch { margin: 10px 0 0; }
.natural-note { margin-top: 2px; }
.natural-note.bad { color: var(--bad); }
.voice-more { margin-top: 8px; }
.voice-more:not(:has(> :not(summary):not([hidden]))) { display: none; }
.voice-more > summary { font-size: 13px; color: var(--muted); }
.gate { margin-top: 24px; display: grid; gap: 10px; }
.gate .btn { font-size: 16px; min-height: 52px; }
.gate-note { font-size: 13px; color: var(--muted); }
.typed-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 14px; }
/* Topics: a checklist, not chips. */
.topics-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.field-label { font-size: 14px; font-weight: 600; }
.topic-actions { display: flex; gap: 12px; }
.linkbtn { background: none; border: 0; padding: 6px 0; min-height: 32px; color: var(--link, var(--ink)); font-size: 14px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.linkbtn:disabled { color: var(--muted); text-decoration: none; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Placeholders while tracks and topics load. */
.skeleton { display: block; background: var(--stage); animation: pulse 1.4s ease-in-out infinite alternate; }
.skeleton-chip { height: 36px; border-radius: 4px; max-width: 100%; }
.skeleton-card { min-height: 52px; border-radius: 5px; }
@keyframes pulse { to { opacity: .45; } }
.topic-chip { min-height: 40px; max-width: 100%; padding: 8px 12px; border-radius: 5px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; text-align: left; }
.topic-chip[aria-pressed="true"] { background: var(--soft); border-color: var(--active, var(--ink)); }
.topic-chip:disabled { opacity: .6; }
.topics-note { margin-top: 8px; }
.topics-note.bad { color: var(--bad); }
.mic-device { margin: 10px 0; }
.mic-device select { min-height: 38px; padding: 6px 10px; font-size: 14px; }
/* The Start dialog (native <dialog>): what is missing, in plain steps. */
.gate-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); padding: 22px; }
.gate-dialog[open] { animation: dialog-in .2s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px); } }
.gate-dialog::backdrop { background: #12121199; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dialog-head h2 { font: 400 24px var(--serif); }
.dialog-head h2:focus { outline: none; }
.gate-dialog > .muted { font-size: 14px; margin-top: 4px; }
.gate-steps { margin: 16px 0; padding: 0; list-style: none; display: grid; gap: 0; counter-reset: gate; }
.gate-step { border-top: 1px solid var(--line); padding: 14px 0; display: grid; gap: 8px; justify-items: start; font-size: 14px; min-width: 0; }
.gate-step > * { max-width: 100%; }
.gate-step .field { margin: 0; width: 100%; }
.gate-step .devicebar { width: 100%; }
.substeps { padding-left: 20px; display: grid; gap: 2px; }
.dialog-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.typed-link button { background: none; border: 0; padding: 4px 0; color: var(--link, var(--ink)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-align: left; }
.status { font-size: 14px; padding: 10px 0 0; color: var(--ink); margin-top: 12px; border-top: 1px solid var(--line); }

/* ---------- Interview room ---------- */
/* The question on top, the transcript under it, the evidence in a narrow muted margin. */
.room { display: grid; grid-template-columns: minmax(0, 1fr) 248px; grid-template-areas: "q rail" "conv rail"; column-gap: 64px; padding: 40px 40px 0; align-items: start; }
.room > .question { grid-area: q; }
.room > .stage { grid-area: conv; }
.room > .rail { grid-area: rail; }
.question { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.question > * { flex-basis: 100%; }
.question > .qmeta, .question > #puzzle-kind { flex-basis: auto; }
.qmeta { color: var(--muted); font-size: 14px; }
#puzzle-kind { font-size: 14px; color: var(--muted); font-weight: 400; white-space: normal; }
#puzzle-kind::before { content: "· "; }
.qtext { font: 400 clamp(26px, 2.5vw, 34px)/1.3 var(--serif); letter-spacing: -.01em; margin-top: 14px; overflow-wrap: anywhere; max-width: 34em; text-wrap: pretty; }
.qhelp { margin-top: 16px; font-size: 14px; color: var(--muted); }
.question .provenance, .question .why { margin-top: 12px; }
.why { font-size: 14px; }
.why summary, .models summary { color: var(--ink); }
.why p { margin-top: 6px; color: var(--muted); }
.stage { padding: 20px 0 0; display: flex; flex-direction: column; gap: 0; min-height: 420px; min-width: 0; }
.stagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 6px; min-width: 0; }
.stagehead h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stagehead .fine { margin-top: 0; }
.stagehead .tag { display: block; margin-top: 2px; }
.selfview { position: relative; background: var(--stage); border-radius: 4px; width: 132px; aspect-ratio: 4 / 3; flex-shrink: 0; overflow: hidden; display: grid; place-items: center; }
.selfview figcaption { position: absolute; left: 6px; bottom: 5px; font-size: 11px; color: #fff; background: #121211b3; border-radius: 3px; padding: 1px 6px; }
.selfview .camera-off { font-size: 12px; }
/* The transcript: speaker in the margin, words beside it. No avatars, no bubbles. */
#log { display: flex; flex-direction: column; min-width: 0; }
.utterance { display: block; padding: 12px 0; scroll-margin-bottom: 240px; }
.utterance > .avatar { display: none; }
.utterance > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 20px; }
.utterance > div > * { grid-column: 2; }
.utterance > div > .speaker { grid-column: 1; grid-row: 1 / span 4; }
.speaker { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 13px; color: var(--muted); font-weight: 500; padding-top: 4px; }
.candidate .speaker > span:first-child { color: var(--ink); }
.says { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.is-challenge .says { color: var(--amber); }
.is-live .says { color: var(--muted); }
mark, mark.challenged { background: var(--amberbg); color: var(--amber); padding: 0 3px; border-radius: 3px; font-weight: 600; animation: mark-in .24s var(--ease); }
@keyframes mark-in { from { background: transparent; } }
/* The answer dock stays in reach at the bottom of the window. */
.dock { position: sticky; bottom: 0; z-index: 5; margin-top: auto; background: var(--bg); display: grid; gap: 12px; padding: 12px 0 16px; }
.dock > .utterance { padding: 0; }
.voicebar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.voicetext { flex: 1; min-width: 140px; }
.voicetext strong { display: block; font-size: 15px; font-weight: 600; }
.voicetext small { display: block; color: var(--muted); font-size: 13px; }
.orb { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 50%; border: 1px solid var(--line); flex-shrink: 0;
  transition: border-color .2s var(--ease); }
.orb i { width: 3px; height: 6px; background: var(--muted); border-radius: 2px; transition: height .2s var(--ease), background-color .2s var(--ease); }
.orb[data-state="listening"] { border-color: var(--ink); }
.orb[data-state="listening"] i { background: var(--ink); height: 12px; animation: wave .7s ease-in-out infinite alternate; }
.orb[data-state="listening"] i:nth-child(2) { height: 18px; animation-delay: .2s; }
.orb[data-state="listening"] i:nth-child(3) { height: 9px; animation-delay: .35s; }
.orb[data-state="speaking"] i { background: var(--muted); height: 10px; animation: wave .9s ease-in-out infinite alternate; }
.orb[data-state="speaking"] i:nth-child(2) { height: 14px; animation-delay: .2s; }
.orb[data-state="speaking"] i:nth-child(3) { height: 8px; animation-delay: .35s; }
.orb[data-state="thinking"] i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); animation: blink 1s infinite; }
.orb[data-state="thinking"] i:nth-child(2) { animation-delay: .2s; }
.orb[data-state="thinking"] i:nth-child(3) { animation-delay: .4s; }
@keyframes wave { to { transform: scaleY(.5); } }
@keyframes blink { 50% { opacity: .25; } }
.type-panel label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.type-panel textarea { font-size: 16px; }
.type-panel .fine { margin-top: 4px; }
.finish-link { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.finish-link .export-recording { margin-top: 0; }

/* Receipt (decision log 16): your words beside the exact computation. */
.receipt { margin-top: 6px; }
.receipt > summary { font-size: 13px; color: var(--muted); padding: 2px 0; }
.receipt > summary:hover { color: var(--ink); }
.receipt-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 8px; border-left: 1px solid var(--line); }
.receipt[open] .receipt-body { animation: open-in .2s var(--ease); }
@keyframes open-in { from { opacity: 0; transform: translateY(-3px); } }
.receipt-body > div { padding: 2px 14px; min-width: 0; }
.receipt-body > div + div { border-left: 1px solid var(--line); }
.receipt-body.solo { grid-template-columns: minmax(0, 1fr); }
.receipt-head { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.receipt-words { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.receipt-none, .receipt-note { font-size: 13px; color: var(--muted); }
.receipt-note { margin-top: 8px; }
.receipt dl { display: grid; gap: 6px; }
.receipt dt { font-size: 13px; color: var(--muted); }
.receipt dd { font-size: 14px; overflow-wrap: anywhere; }

/* The margin: evidence meter and models, secondary and muted. */
.rail { position: sticky; top: 24px; padding: 4px 0 24px; min-width: 0; display: flex; flex-direction: column; gap: 20px; font-size: 13px; color: var(--muted); }
.rail h2 { font-size: 13px; font-weight: 600; color: var(--ink); }
.rail > section > p { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.meter-rows { margin-top: 14px; display: grid; gap: 12px; }
.meter-row dt { font-size: 13px; display: flex; justify-content: space-between; gap: 6px; color: var(--ink); }
.meter-row dd { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.meter-bar { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.meter-bar span { display: block; height: 100%; background: var(--ink); transition: width .25s var(--ease); }
.meter-row + .meter-row .meter-bar span { background: var(--muted); }
.meter-pct { font-size: 12px; min-width: 3.2em; text-align: right; }
.railnote { font-size: 13px; margin-top: 12px; color: var(--muted); }
.empty { font-size: 13px; color: var(--muted); padding: 8px 0 2px; }
.models { border-top: 1px solid var(--line); padding-top: 16px; }
.models summary { font-size: 13px; font-weight: 600; }
.model-list { margin-top: 8px; }
/* A question line in the transcript points up instead of repeating the question. */
.utterance .says .above { color: var(--muted); }
.modelrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; min-width: 0; }
.modelrow strong { display: block; font-size: 12px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
/* Room fixes: the short model name stays on one line; the full ID is its tooltip. */
.modelrow > div:first-child { min-width: 0; }
.modelrow .model-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; cursor: help; }
.modelrow small { display: block; color: var(--muted); font-size: 12px; }
.modelrow .nums { text-align: right; white-space: nowrap; font-size: 12px; color: var(--muted); }
.models .fine { margin-top: 8px; }

/* ---------- Report ---------- */
.reportwrap { padding: 48px 40px 0; display: grid; gap: 28px; }
.reporthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.reporthead h1 { font-size: clamp(30px, 3.4vw, 40px); margin: 4px 0 8px; }
.reporthead .sub { font-size: 16px; color: var(--muted); }
.reporthead .tag { font-size: 14px; }
.conditions { display: block; margin-top: 6px; }
/* The label is the headline of the report. */
.verdict-card { padding: 0; }
.verdict-card > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.verdict { display: block; font: 400 clamp(34px, 4vw, 52px)/1.08 var(--serif); letter-spacing: -.02em; }
.verdict .icon { display: none; }
.misconception-name { color: var(--muted); font-size: 16px; line-height: 1.6; margin-top: 10px; max-width: 60ch; }
/* Figures in one quiet line. */
.stats { display: flex; flex-wrap: wrap; gap: 8px 36px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.stat { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stat dt { font-size: 14px; color: var(--muted); }
.stat dd { font: 500 15px var(--mono); overflow-wrap: anywhere; }
.stat dd small { font: 400 13px var(--sans); color: var(--muted); margin-left: 6px; }
.stat dd.over { color: var(--amber); }
.stat.wide { flex-basis: 100%; }
.stat.wide dd { font: 500 15px var(--sans); }
.level-track { display: flex; gap: 6px; margin-top: 6px; max-width: 240px; }
.level-track span { flex: 1; height: 3px; background: var(--line); }
.level-track span.on { background: var(--ink); }
.reportgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.reportcol { display: grid; gap: 32px; min-width: 0; align-content: start; }
.reportcol + .reportcol { font-size: 14px; }
.reportcol + .reportcol .panel > h2 { font-size: 14px; }
.panel .sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.reportgrid .panel > h2, .reportwrap > .panel > h2 { font-size: 17px; }
/* Decision log 37: a mixed report heads the forge questions' part like the other sections. */
.reportwrap > .segment-title { font-size: 17px; margin: 0; }
.overall { font-size: 15px; line-height: 1.7; }
.report-list { display: grid; gap: 10px; }
.report-item { padding: 14px 0 0; border-top: 1px solid var(--line); min-width: 0; }
.report-item h3 { font-size: 15px; }
.report-item > p { font-size: 15px; margin-top: 4px; overflow-wrap: anywhere; }
.report-quote { color: var(--muted); font-style: italic; }
.check-line { font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.chip { font-size: 13px; font-weight: 600; color: var(--ink); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 12px 0 14px; }
.tab { border: 0; border-bottom: 2px solid transparent; padding: 9px 2px; margin-right: 18px; color: var(--muted); background: transparent; font-size: 14px; min-height: 44px; }
.tab[aria-selected="true"] { border-color: var(--active, var(--ink)); color: var(--ink); font-weight: 600; }
.tab-panel { display: grid; gap: 14px; }
.tab-sub { font-size: 14px; color: var(--muted); }
blockquote.evidence { padding: 2px 0 2px 16px; border-left: 1px solid var(--line); margin-top: 8px; }
blockquote.evidence > p { font: 400 19px/1.5 var(--serif); overflow-wrap: anywhere; }
blockquote.evidence footer { font-size: 13px; color: var(--muted); margin-top: 4px; }
/* Evidence: one entry per question, each answer quoted once. */
.qcards { display: grid; gap: 0; margin-top: 8px; }
.qcard { padding: 20px 0; border-top: 1px solid var(--line); min-width: 0; display: grid; gap: 10px; scroll-margin-top: 16px; }
.qcard:first-child { border-top: 0; padding-top: 8px; }
.qcard > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.qcard h3 { font-size: 17px; }
.qcard > header .tag { font-size: 14px; color: var(--ink); }
.qcard blockquote.evidence { margin-top: 0; }
.qcard-time { font-size: 13px; color: var(--muted); margin-top: -6px; }
.bq-list { display: grid; gap: 0; margin-top: 12px; }
.bq h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 8px 0 0; }
.bq-question { font: 400 19px/1.45 var(--serif); }
.funnel { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.funnel-step { display: grid; gap: 4px; }
.funnel-step.empty strong { color: var(--muted); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 14px; }
.checklist li.miss { color: var(--muted); }
.detail-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; font-size: 14px; overflow-wrap: anywhere; }
.contradiction { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; }
.tip-line { border-top: 1px solid var(--line); padding-top: 10px; font-size: 15px; }
.qcard-time.over { color: var(--amber); }
.qcard-when { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.qcard-extra { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.qcard:target, .qcard:focus { outline: 2px solid var(--ring); outline-offset: 6px; }
.see-list { list-style: none; padding: 0; display: grid; gap: 0; font-size: 14px; }
.see-list li { padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.see-list li:first-child { padding-top: 0; }
.see-list li:last-child { border-bottom: 0; }
.see-list a { white-space: nowrap; }
.check-row { font-size: 14px; overflow-wrap: anywhere; }
.hint-list { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.privacy-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.55; max-width: 72ch; }
.privacy .reporthead .sub { max-width: 72ch; }
.hint-list li { display: grid; gap: 2px; }
/* "No hints used." already shows in the figures line. */
.section:has(> #hints):not(:has(.says)) { display: none; }
.tip p { font-size: 15px; }
.drill-list { display: grid; gap: 0; margin-top: 8px; }
.drill-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.drill-row .btn { background: transparent; color: var(--ink); border-color: var(--line); }
.drill-row .btn:hover { background: var(--soft); }
.estimate { border-top: 0; padding-top: 0; }
.estimate summary { font-size: 14px; font-weight: 500; }
.breakdown > summary h2 { font-size: 17px; display: inline; }
.model-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.model-table th, .model-table td { text-align: left; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.model-table th { font-size: 13px; font-weight: 500; color: var(--muted); }
.num-col { text-align: right !important; }
.end-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .room { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "conv" "rail"; padding: 28px 28px 0; }
  .rail { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 8px; }
  .models { border-top: 0; padding-top: 0; }
  .reportgrid { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
  .setupgrid { gap: 40px; }
  .top, .setuphead, .setupgrid, .reportwrap, .disclosure { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 860px) {
  .reportgrid, .setupgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rail { grid-template-columns: minmax(0, 1fr); }
  .utterance > div,   .utterance > div > .speaker { grid-row: auto; padding-top: 0; flex-direction: row; gap: 8px; }
  .top, .setuphead, .setupgrid, .reportwrap, .disclosure, .room { padding-left: 18px; padding-right: 18px; }
  .receipt-body { grid-template-columns: minmax(0, 1fr); }
  .receipt-body > div + div { border-left: 0; border-top: 1px solid var(--line); padding-top: 8px; }
  .selfview { width: 100px; }
  .brand-note { display: none; }
}
@media (max-width: 430px) {
  .top { padding: 7px 12px; }
  .brand { font-size: 20px; }
  .icon-btn { width: 40px; height: 40px; }
  .clock { font-size: 14px; }
  .track { padding: 10px; }
  .reporthead { flex-direction: column; }
  .selfview { width: 86px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Profile (decision log 23) ---------- */
.narrow { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.welcome h1 { font-size: clamp(24px, 6vw, 32px); line-height: 1.2; margin: 6px 0 8px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.other-field { margin: 4px 0 12px; }
.other-field input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); padding: 10px 11px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.storage-note { font-size: 13px; color: var(--muted); padding: 8px 0; margin: 10px 0; border-top: 1px solid var(--line); }
.profile-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 16px; margin-bottom: 14px; }
.profile-head h1 { font-size: clamp(24px, 6vw, 32px); margin: 4px 0 0; }
.tabs.track-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.rating-card { display: grid; gap: 6px; }
.rating-big { font: 600 44px/1 var(--mono); }
.rating-band { font-weight: 600; }
.rating-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.radar-figure { margin: 0; display: grid; gap: 8px; }
.radar { width: 100%; height: auto; max-width: 440px; justify-self: center; overflow: visible; }
.radar .ring { fill: none; stroke: var(--line); stroke-width: 1; }
.radar .axis { stroke: var(--line); stroke-width: 1; }
.radar .ring-label { fill: var(--muted); font: 500 9px var(--mono); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.radar .axis-label { fill: var(--ink); font: 700 10.5px var(--sans); }
.radar .series { stroke-width: 2; stroke-linejoin: round; }
.radar .series-now { fill: color-mix(in srgb, var(--series-now) 22%, transparent); stroke: var(--series-now); }
.radar .series-placement { fill: none; stroke: var(--series-placement); stroke-dasharray: 5 3; }
.radar polyline.series { fill: none; }
.radar .dot { stroke: var(--paper); stroke-width: 2; }
.radar .dot-now { fill: var(--series-now); }
.radar .dot-placement { fill: var(--series-placement); }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 12px; color: var(--ink); padding: 0; margin: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 18px; height: 10px; border-radius: 3px; border: 2px solid; }
.swatch-now { border-color: var(--series-now); background: color-mix(in srgb, var(--series-now) 22%, transparent); }
.swatch-placement { border-color: var(--series-placement); border-style: dashed; background: transparent; }
.radar-missing { font-size: 12px; color: var(--muted); text-align: center; }
.area-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.area-table th, .area-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.area-table th { font-size: 11px; color: var(--muted); }
.area-table td.num, .area-table th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.area-table td.muted-cell { font: 12px var(--sans); color: var(--muted); white-space: normal; }
.profilewrap .profile-head, .profilewrap .storage-note, .profilewrap .track-tabs { margin: 0; }
.history { width: 100%; border-collapse: collapse; font-size: 12px; }
.history th, .history td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.history th { font-size: 11px; color: var(--muted); }
.table-scroll { overflow-x: auto; max-width: 100%; }
.data-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.change-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: 13px; }
.change-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.change-list .mono { white-space: nowrap; }
@media (max-width: 760px) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-word { display: none; }
  .history thead { display: none; }
  .history tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .history td { border: 0; padding: 0 6px; }
}

/* ---------- Profile identity card ---------- */
.identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; }
.identity-main { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; min-width: 0; }
.identity-avatar { display: grid; justify-items: center; gap: 6px; }
.avatar-button { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; display: block; line-height: 0; }
.avatar-button:hover .avatar-big { filter: brightness(.94); }
.avatar-button .avatar-holder { width: 112px; height: 112px; border: 0; background: none; }
.avatar-note { text-align: center; max-width: 140px; }
.identity-text { flex: 1 1 260px; min-width: 0; display: grid; gap: 6px; }
.name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.name-row h1 { font-size: clamp(24px, 5vw, 32px); line-height: 1.2; margin: 0; cursor: pointer; overflow-wrap: anywhere; min-width: 0; }
.name-row h1.placeholder { color: var(--muted); }
.icon-btn-small { width: 34px; height: 34px; border-radius: 4px; flex: none; }
.icon-btn-small .icon { width: 16px; height: 16px; }
.name-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.text-input { flex: 1 1 200px; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); padding: 10px 11px; font: inherit; }
.text-input::placeholder { color: var(--muted); }
.text-input:focus { border-color: var(--accent); }
.saved-note { font-size: 13px; font-weight: 500; color: var(--muted); min-height: 1.2em; transition: opacity .6s ease; }
.saved-note.fade { opacity: 0; }
.identity-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.identity-rating { border-left: 1px solid var(--line); padding-left: 24px; min-width: 150px; }
.identity-rating .rating-none { font-size: 18px; font-weight: 600; margin-top: 6px; }
@media (max-width: 760px) {
  .identity { grid-template-columns: minmax(0, 1fr); }
  .identity-rating { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
}
.name-row[hidden], .name-form[hidden] { display: none; }
@media (max-width: 430px) {
  .identity-main { flex-direction: column; align-items: flex-start; }
  .identity-text { flex: none; width: 100%; }
}

/* ---------- Accounts ---------- */
.btn.danger { color: var(--bad); }
.signin-dialog .btn.wide { margin-top: 12px; }
.signin-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 14px 0; }
.signin-or::before, .signin-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signin-email { display: grid; gap: 6px; }
.signin-email label { font-size: 12px; font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.keep-result { display: grid; gap: 8px; justify-items: start; }
.make-grid { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; margin: 14px 0; }
.photo-choice { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; }
.photo-choice legend { font-size: 12px; font-weight: 600; margin-bottom: 4px; padding: 0; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.provenance { margin-top: 10px; }
.provenance summary { font-size: 12px; }
.forge-totals { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.forge-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.forge-table th, .forge-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.forge-table th { font-size: 11px; color: var(--muted); }
.forge-table td.num, .forge-table th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.forge-table tfoot td { font-weight: 600; border-bottom: 0; }
@media (max-width: 760px) { .forge-table .hide-narrow { display: none; } }
.export-recording { display: grid; gap: 8px; margin-top: 12px; justify-items: start; font-size: 12px; }
/* ---------- Laptop or desktop only (decision log 26) ---------- */
.desktop-gated .shell > main:not(.desktop-gate), .desktop-gated .shell > footer { display: none !important; }
.desktop-gate { padding: 28px 16px 40px; display: grid; justify-items: center; }
.desktop-gate .panel { max-width: 560px; width: 100%; display: grid; gap: 12px; text-align: left; }
.desktop-gate h1 { font-size: clamp(22px, 6vw, 28px); line-height: 1.25; margin: 0; }
.gate-icon { width: 44px; height: 44px; color: var(--accent); }
.gate-url { font: 13px var(--mono); }
/* ---------- Coding rounds (decision log 26) ---------- */
.room.coding .rail { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 20; overflow: auto;
  background: var(--paper); border-left: 1px solid var(--line); box-shadow: var(--shadow); transform: translateX(100%); transition: transform .22s var(--ease), visibility .22s; visibility: hidden; padding: 24px 20px; }
.room.coding .rail.open { transform: none; visibility: visible; }
.coding-pane { display: grid; grid-template-rows: auto minmax(320px, 1fr) auto auto; gap: 10px; padding: 18px; min-width: 0; border-left: 1px solid var(--line); background: var(--paper); }
.coding-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.coding-head h2 { font-size: 15px; margin: 0; }
.coding-head #drawer-toggle { margin-left: auto; }
.editor-wrap { min-height: 320px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--stage); }
.editor-wrap textarea, .editor-wrap .CodeMirror { width: 100%; height: 100%; min-height: 320px; font: 13px/1.5 var(--mono); background: var(--stage); color: var(--ink); border: 0; padding: 10px; }
.editor-wrap .CodeMirror { padding: 0; }
.editor-wrap .CodeMirror-gutters { background: var(--paper); border-right: 1px solid var(--line); }
.editor-wrap .CodeMirror-linenumber { color: var(--muted); }
.editor-wrap .CodeMirror-cursor { border-left-color: var(--ink); }
.code-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.code-results { display: grid; gap: 8px; font-size: 13px; min-width: 0; }
.code-results h3 { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0; }
.code-case { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--stage); overflow-wrap: anywhere; }
.code-case.ok { border-color: var(--goodline, var(--line)); }
.code-case.bad { border-color: var(--bad); }
.code-case code, .example-list code { font: 12px var(--mono); }
.code-verdict { padding: 10px; border-radius: 4px; border: 1px solid var(--line); }
.code-verdict.ok { background: var(--goodbg); }
.code-verdict.bad { background: var(--warnbg); }
.signature { font-size: 13px; background: var(--stage); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.example-list { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.bad { color: var(--bad); }
.code-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.code-block { margin: 0; padding: 10px; background: var(--stage); border: 1px solid var(--line); border-radius: 4px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.coding-report h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 6px 0 0; }
@media (max-width: 1100px) { .code-side { grid-template-columns: minmax(0, 1fr); } }

/* Market making (decision log 28): the market panel beside the transcript, and the report card. */
.market-panel { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.market-panel h3 { margin: 0 0 8px; font-size: 15px; }
.market-quotes { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0; }
.market-quotes th, .market-quotes td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.market-quotes th { font-weight: 600; color: var(--muted); font-size: 12px; }
.market-quotes tr.latest td { font-weight: 600; }
.market-quotes td.empty { color: var(--muted); }
.market-book div { min-width: 0; }
/* The scorecard: the latest quote large, one line per trade and reveal, then position and P&L. */
.market-hint { font-size: 16px; color: var(--muted); margin: 0; }
.market-card { display: grid; gap: 8px; }
.market-quote { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 32px; padding-bottom: 6px; }
.market-quote > div { display: grid; gap: 0; }
.market-label { font-size: 14px; color: var(--muted); }
.market-num { font: 500 28px/1.15 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.market-stage { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); }
.market-line { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; margin: 0; font-size: 15px; }
.market-line[hidden] { display: none; }
.market-book { display: flex; flex-wrap: wrap; gap: 6px 40px; margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.market-book div { display: flex; align-items: baseline; gap: 10px; }
.market-book dt { font-size: 14px; color: var(--muted); }
.market-book dd { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Coding workspace (decision log 27): full viewport, no page scroll ---------- */
/* Syntax themes: GitHub-like light, One Dark-like dark; every token at least 4.5:1 on --cm-bg
   (checked by tests/test_syntax_contrast.py). */
:root {
  --cm-bg: #ffffff; --cm-gutter: #ffffff; --cm-linenum: #57606a; --cm-cursor: #24292f; --cm-selection: #b6d7ff;
  --cm-text: #24292f; --cm-keyword: #cf222e; --cm-def: #8250df; --cm-variable-2: #953800; --cm-string: #0a3069;
  --cm-number: #0550ae; --cm-comment: #57606a; --cm-builtin: #953800; --cm-property: #0550ae; --cm-meta: #6639ba;
  --code-font: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cm-bg: #282c34; --cm-gutter: #282c34; --cm-linenum: #959cab; --cm-cursor: #c3c9d3; --cm-selection: #3e4451;
    --cm-text: #c3c9d3; --cm-keyword: #d19df0; --cm-def: #6cb6f5; --cm-variable-2: #e8a1a8; --cm-string: #98c379;
    --cm-number: #e0a872; --cm-comment: #959cab; --cm-builtin: #5fc4d0; --cm-property: #e8a1a8; --cm-meta: #e5c07b;
  }
}
:root[data-theme="dark"] {
  --cm-bg: #282c34; --cm-gutter: #282c34; --cm-linenum: #959cab; --cm-cursor: #c3c9d3; --cm-selection: #3e4451;
  --cm-text: #c3c9d3; --cm-keyword: #d19df0; --cm-def: #6cb6f5; --cm-variable-2: #e8a1a8; --cm-string: #98c379;
  --cm-number: #e0a872; --cm-comment: #959cab; --cm-builtin: #5fc4d0; --cm-property: #e8a1a8; --cm-meta: #e5c07b;
}

body.coding-mode { overflow: hidden; }
body.coding-mode .shell { max-width: none; margin: 0; border: 0; border-radius: 0; height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0, 1fr); box-shadow: none; }
body.coding-mode .shell > footer, body.coding-mode .profile-link { display: none; }
body.coding-mode .top { min-height: 48px; padding: 4px 14px; gap: 12px; }
body.coding-mode .top .brand { font-size: 15px; }
body.coding-mode .topright { gap: 8px; }
body.coding-mode main { min-height: 0; overflow: hidden; }
.ws-title { font-weight: 700; font-size: 14px; margin-right: auto; padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ws-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); background: var(--stage); color: var(--ink); white-space: nowrap; }
.ws-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); }
.ws-pill[data-state="listening"]::before { background: var(--ink); }
.ws-pill[data-state="speaking"]::before { background: var(--accent); }
.ws-pill[data-state="checking"]::before { background: var(--muted); }
.ws-slot:empty { display: none; }
.ws-slot .selfview { margin: 0; }
.ws-slot .selfview video { width: 64px; height: 40px; border-radius: 4px; object-fit: cover; display: block; }
.ws-slot .selfview figcaption { display: none; }
.ws-slot #done { white-space: nowrap; }

.room.coding { --ws-left: 40%; height: 100%; min-height: 0; display: grid;
  grid-template-columns: minmax(0, var(--ws-left)) 6px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);  grid-template-areas: none; padding: 0; column-gap: 0; align-items: stretch; }
.ws-conv .utterance > div { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 12px; }
.ws-conv .utterance { scroll-margin-bottom: 0; }
.room.coding > .question, .room.coding > .stage { display: none; }
.room.coding .ws-left { grid-column: 1; grid-row: 1; }
.room.coding .ws-split { grid-column: 2; grid-row: 1; }
.room.coding .coding-pane { grid-column: 3; grid-row: 1; }
.ws-left { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; background: var(--paper); }
.ws-tabs { display: flex; gap: 2px; padding: 6px 12px 0; border-bottom: 1px solid var(--line); }
.ws-tabs [role="tab"] { position: relative; border: 0; background: none; color: var(--muted); font: 600 14px var(--sans); padding: 8px 12px;
  border-bottom: 2px solid transparent; cursor: pointer; }
.ws-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.ws-tabs [role="tab"]:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.ws-tabs.small { padding: 0; border: 0; }
.ws-tabs.small [role="tab"] { font-size: 13px; padding: 6px 10px; }
.ws-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }
.ws-panel { min-height: 0; overflow: auto; padding: 16px 20px 24px; }
.ws-panel[hidden] { display: none; }
.ws-ptitle { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ws-statement { font-size: 16px; line-height: 1.65; font-weight: 400; }
.ws-statement p { margin: 0 0 12px; }
.ws-statement code, .ws-example code { font: 0.9em var(--mono); background: var(--stage); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; overflow-wrap: anywhere; }
.ws-signature { color: var(--muted); font-size: 14px; }
.ws-example { border-left: 1px solid var(--line); padding: 4px 0 4px 12px; margin: 0 0 14px; }
.ws-example h3 { font-size: 14px; margin: 0 0 6px; }
.ws-example p { margin: 0 0 4px; font-size: 14px; }
.ws-k { font-weight: 700; }
.ws-provenance { margin-top: 18px; font-size: 13px; color: var(--muted); }
.ws-provenance summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.ws-conv { display: flex; flex-direction: column; gap: 10px; }
.ws-conv #log { flex: 1 0 auto; }
.ws-split { background: var(--line); cursor: col-resize; touch-action: none; }
.ws-split:hover, .ws-split.dragging, .ws-split:focus-visible { background: var(--accent); outline: none; }

.room.coding .coding-pane { --console-h: 200px; display: grid; gap: 0; padding: 0; border-left: 0; min-height: 0; min-width: 0;
  grid-template-rows: auto auto minmax(120px, 1fr) 6px var(--console-h); background: var(--paper); }
.room.coding .coding-pane.console-closed { grid-template-rows: auto auto minmax(120px, 1fr) 0 auto; }
.ws-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ws-lang { font-weight: 700; font-size: 14px; }
.ws-pystatus { font-size: 13px; color: var(--muted); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pystatus[data-state="ok"]::before { content: "\25CF  "; color: var(--goodline); }
.ws-pystatus[data-state="bad"] { color: var(--bad); }
.ws-font { display: inline-flex; gap: 4px; }
.ws-actions { margin-left: auto; display: inline-flex; gap: 8px; }
.ws-actions kbd { font: 11px var(--mono); opacity: .85; margin-left: 4px; }
.ws-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 12px;
  background: var(--soft); color: var(--softink); border-bottom: 1px solid var(--line); font-size: 14px; }
.ws-banner[hidden] { display: none; }
.ws-banner p { margin: 0; color: var(--ink); max-height: 4.8em; overflow: auto; }
.ws-banner-who { font-weight: 600; font-size: 13px; padding-top: 2px; }
.ws-banner-close { width: 28px; height: 28px; font-size: 18px; line-height: 1; }
.room.coding .editor-wrap { min-height: 0; border: 0; border-radius: 0; background: var(--cm-bg); }
.room.coding .editor-wrap textarea, .room.coding .editor-wrap .CodeMirror { height: 100%; min-height: 0; font: var(--code-font)/1.55 var(--mono);
  background: var(--cm-bg); color: var(--cm-text); }
.ws-hsplit { background: var(--line); cursor: row-resize; touch-action: none; }
.ws-hsplit:hover, .ws-hsplit.dragging, .ws-hsplit:focus-visible { background: var(--accent); outline: none; }
.ws-console { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.ws-console-head { display: flex; align-items: center; gap: 10px; padding: 4px 12px; border-bottom: 1px solid var(--line); }
.ws-console-head #console-toggle { margin-left: auto; }
.ws-console-body { min-height: 0; overflow: auto; padding: 10px 12px; }
.ws-console-body[hidden] { display: none; }
.ws-console-body .code-results { display: grid; gap: 8px; }
.code-output { margin: 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-case-head { display: flex; justify-content: space-between; gap: 8px; }
.code-case .code-mark { font-size: 12px; font-weight: 700; }
.code-case.ok .code-mark { color: var(--good); }
.code-case.bad .code-mark { color: var(--bad); }
.code-case dl { display: grid; gap: 2px; margin: 4px 0 0; }
.code-case dl div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
.code-case dt { color: var(--muted); font-size: 12px; }
.code-case dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }

/* CodeMirror tokens */
.room.coding .CodeMirror-gutters { background: var(--cm-gutter); border-right: 1px solid var(--line); }
.room.coding .CodeMirror-linenumber { color: var(--cm-linenum); }
.room.coding .CodeMirror-cursor { border-left-color: var(--cm-cursor); }
.room.coding .CodeMirror-selected, .room.coding .CodeMirror-focused .CodeMirror-selected { background: var(--cm-selection); }
.room.coding .cm-s-default .cm-keyword { color: var(--cm-keyword); }
.room.coding .cm-s-default .cm-def { color: var(--cm-def); }
.room.coding .cm-s-default .cm-variable, .room.coding .cm-s-default .cm-operator,
.room.coding .cm-s-default .cm-bracket, .room.coding .cm-s-default .cm-punctuation { color: var(--cm-text); }
.room.coding .cm-s-default .cm-variable-2, .room.coding .cm-s-default .cm-variable-3 { color: var(--cm-variable-2); }
.room.coding .cm-s-default .cm-string, .room.coding .cm-s-default .cm-string-2 { color: var(--cm-string); }
.room.coding .cm-s-default .cm-number, .room.coding .cm-s-default .cm-atom { color: var(--cm-number); }
.room.coding .cm-s-default .cm-comment { color: var(--cm-comment); font-style: italic; }
.room.coding .cm-s-default .cm-builtin { color: var(--cm-builtin); }
.room.coding .cm-s-default .cm-property { color: var(--cm-property); }
.room.coding .cm-s-default .cm-meta { color: var(--cm-meta); }
.room.coding .cm-s-default .cm-error { color: var(--cm-text); text-decoration: underline wavy var(--bad); background: none; }
.room.coding .CodeMirror-matchingbracket { color: var(--cm-text) !important; text-decoration: underline; }
.code-case.bad { color: var(--ink); }
.code-named { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.ws-part2 { padding: 4px 0 4px 14px; border-left: 1px solid var(--ink); font-size: 15px; }
.code-large { margin: 4px 0 0; font-size: 13px; }
body.coding-mode .top .btn, body.coding-mode .top .clock { white-space: nowrap; }

/* ---------- Setup redesign: target role, two-column topic chips, More topics ---------- */
.role-field { display: grid; gap: 6px; margin: 4px 0 14px; }
.role-select { position: relative; }
.role-button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink);
  font: 500 15px var(--sans); text-align: left; cursor: pointer; }
.role-button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.role-button .icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.role-list { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.role-list:focus-visible { outline: 2px solid var(--ring); }
.role-option { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px;
  border-radius: 4px; font-size: 14px; cursor: pointer; }
.role-option:hover, .role-option.active { background: var(--stage); }
.role-option[aria-selected="true"] { font-weight: 700; }
.role-option.off { color: var(--muted); cursor: not-allowed; }
.role-check { color: var(--accent); font-weight: 600; }
.role-note { margin: 0; }
.topic-chips.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.topic-chips.two-col .topic-chip { display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 9px 2px; background: transparent; font-weight: 400; transition: background-color .15s var(--ease); }
.topic-chips.two-col .topic-chip:hover { background: var(--soft); }
.topic-chips.two-col .topic-chip[aria-pressed="true"] { background: transparent; font-weight: 500; }
.topic-chips.two-col .topic-chip[aria-pressed="true"]::before { content: none; }
.topic-chip .tick { width: 16px; height: 16px; flex: none; border-radius: 3px; border: 1.5px solid var(--muted); display: grid; place-items: center; }
.topic-chip[aria-pressed="true"] .tick { border-color: var(--active, var(--ink)); background: var(--active, var(--ink)); }
.topic-chip[aria-pressed="true"] .tick::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--active-fg, var(--accent-fg));
  border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.more-topics { margin-top: 10px; }
.more-topics summary { font-size: 14px; color: var(--ink); margin: 12px 0 8px; }
.more-topics[hidden] { display: none; }
@media (max-width: 700px) { .topic-chips.two-col { grid-template-columns: minmax(0, 1fr); } }

/* Full cases (decision log 30): the case panel and exhibit tables. */
.case-stage { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.case-fact { margin: 0 0 6px; font-size: 14px; }
.case-exhibit { overflow-x: auto; }
.exhibit caption { text-align: left; font-size: 13px; color: var(--muted); margin-bottom: 6px; caption-side: top; }
.exhibit th[scope="row"] { font-weight: 600; color: var(--ink); font-size: 14px; }

/* ---------- Tablets (decision log 35): touch targets, the on-screen keyboard ---------- */
/* Touch: every control at least 44 px; the 6 px splitters get a wider grab area. */
@media (pointer: coarse) {
  .btn-small, .linkbtn, .topic-chip, .mic-device select, .ws-tabs [role="tab"], .ws-tabs.small [role="tab"], .role-option,
  .profile-link, .checkline, .seg label, .more-topics summary, .receipt summary, .ws-provenance summary, .typed-link button { min-height: 44px; }
  .linkbtn { min-width: 44px; justify-content: center; }
  .linkbtn, .more-topics summary, .receipt summary, .ws-provenance summary { display: inline-flex; align-items: center; }
  .icon-btn, .icon-btn-small, .ws-banner-close { width: 44px; height: 44px; min-width: 44px; }
  .checkline { align-items: center; }
  .ws-split, .ws-hsplit { position: relative; }
  .ws-split::after { content: ""; position: absolute; top: 0; bottom: 0; left: -9px; right: -9px; }
  .ws-hsplit::after { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
}
.ws-kbd-note { flex-basis: 100%; font-size: 13px; color: var(--muted); }
/* The on-screen keyboard is open: the workspace fits the visible area above it. */
body.coding-mode.keyboard-open .shell { position: fixed; left: 0; right: 0; top: var(--vv-top, 0); height: var(--vv-h, 100dvh); }
body.coding-mode.keyboard-open .room.coding .coding-pane:not(.console-closed) { grid-template-rows: auto auto minmax(96px, 1fr) 6px minmax(0, 22%); }

/* ---------- Look: Trading floor (pending approval; /ui?look=floor, ui/look.js) ---------- */
/* Graphite in dark, a warm near-white in light (each designed, not inverted). One brand
   colour, a signal green, only for the logo mark, primary buttons, active and selected states,
   links and the candidate's waveform; never borders or numbers. Amber stays the challenge.
   Every text colour here is at least 4.5:1 on every surface (checked in both themes). */
:root[data-look="floor"] {
  color-scheme: light;
  --bg: #f8f7f4; --paper: #fefdfb; --stage: #efeee9; --ink: #1a1c1f; --muted: #585c61; --line: #dfddd7;
  --soft: #e9e7e1; --softink: #1a1c1f; --neutral: #8a8e93; --warn: #585c61; --warnbg: #efeee9; --warnline: #8a8e93;
  --good: #1a1c1f; --goodbg: #efeee9; --goodline: #585c61; --bad: #a1301f; --ring: #1a1c1f;
  --brand: #0a7642; --brand-fg: #ffffff;
  --amber: #8f5300; --amberbg: #f5dfb0; --amberline: #c4841a;
  --accent: var(--brand); --accent-fg: var(--brand-fg); --link: var(--brand); --active: var(--brand); --active-fg: var(--brand-fg); --live: var(--brand);
  --orbline: #1a1c1f; --orbbar: #1a1c1f; --series-now: #1a1c1f;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="floor"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1b1d20; --paper: #212428; --stage: #26292e; --ink: #e9ebee; --muted: #a3a9b0; --line: #33373d;
    --soft: #2c3035; --softink: #e9ebee; --neutral: #7a8087; --warn: #a3a9b0; --warnbg: #26292e; --warnline: #7a8087;
    --good: #e9ebee; --goodbg: #26292e; --goodline: #a3a9b0; --bad: #f2a497; --ring: #e9ebee;
    --brand: #4fd394; --brand-fg: #0b1a12;
    --amber: #f0b35a; --amberbg: #3d2c10; --amberline: #c4841a;
    --orbline: #e9ebee; --orbbar: #e9ebee; --series-now: #e9ebee;
  }
}
:root[data-look="floor"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1d20; --paper: #212428; --stage: #26292e; --ink: #e9ebee; --muted: #a3a9b0; --line: #33373d;
  --soft: #2c3035; --softink: #e9ebee; --neutral: #7a8087; --warn: #a3a9b0; --warnbg: #26292e; --warnline: #7a8087;
  --good: #e9ebee; --goodbg: #26292e; --goodline: #a3a9b0; --bad: #f2a497; --ring: #e9ebee;
  --brand: #4fd394; --brand-fg: #0b1a12;
  --amber: #f0b35a; --amberbg: #3d2c10; --amberline: #c4841a;
  --orbline: #e9ebee; --orbbar: #e9ebee; --series-now: #e9ebee;
}
/* Logo: the ≠ mark in a small square, then the wordmark in the interface sans. */
[data-look="floor"] .brand { font: 500 19px/1 var(--sans); letter-spacing: -.025em; gap: 10px; align-items: center; }
[data-look="floor"] .logo { display: block; width: 28px; height: 28px; flex: none; }
[data-look="floor"] .logo rect { fill: var(--brand); }
[data-look="floor"] .logo path { fill: none; stroke: var(--brand-fg); stroke-linecap: round; }
/* Optical weights: the bars a touch heavier than the slash, which reads darker on the diagonal. */
[data-look="floor"] .logo .bars { stroke-width: 2.9; }
[data-look="floor"] .logo .slash { stroke-width: 2.6; }
[data-look="floor"] .brand-note { font-weight: 400; }
/* Primary buttons in the brand; hover darkens towards the ink, never a glow. */
[data-look="floor"] .btn:not(.secondary):not(.btn-quiet):not(.not-ready):hover { background: color-mix(in srgb, var(--brand) 88%, var(--ink)); }
/* Mic indicator: the candidate's turn is the brand colour; the interviewer speaking keeps
   muted bars, so the two never look alike. While the microphone is live the bars give way
   to the waveform canvas (look.js); typed answers and reduced motion keep static bars. */
[data-look="floor"] .orb[data-state="listening"] { border-color: var(--live); }
[data-look="floor"] .orb[data-state="listening"] i { background: var(--live); }
[data-look="floor"] .orb .wave { display: none; }
[data-look="floor"] .orb.live { border-color: var(--live); }
[data-look="floor"] .orb.live i { display: none; }
[data-look="floor"] .orb.live .wave { display: block; width: 24px; height: 18px; color: var(--live); }
[data-look="floor"] .ws-pill[data-state="listening"]::before { background: var(--live); }

/* ---------- UI council fixes ---------- */
/* Every checkbox the same: brand green, one size. */
input[type="checkbox"] { accent-color: var(--active, var(--ink)); width: 18px; height: 18px; }

/* Setup: Start with its blockers listed beside it. */
.start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.start-row .gate-note { flex: 1; min-width: 200px; font-size: 14px; margin: 0; }
.all-passed { margin-bottom: 0; }
.all-passed .check-state { font-size: 15px; }

/* Selector focus: a clear green ring, offset from the underline. */
.select-wrap select:focus-visible { outline: 2px solid var(--brand, var(--ink)); outline-offset: 3px; border-radius: 2px; }

/* Room readability (it is recorded for video): bigger transcript, ≥14px labels and rail,
   and the room's grey a step nearer the ink in each theme. */
.room { --muted: #4a443b; }
:root[data-theme="dark"] .room { --muted: #bdb7ad; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .room { --muted: #bdb7ad; } }
:root[data-look="floor"] .room { --muted: #46494e; }
:root[data-look="floor"][data-theme="dark"] .room { --muted: #bcc1c7; }
@media (prefers-color-scheme: dark) { :root[data-look="floor"]:not([data-theme="light"]) .room { --muted: #bcc1c7; } }
.room .says { font-size: 18px; line-height: 1.5; }
.room .speaker { font-size: 14px; }
.rail, .rail h2, .rail > section > p, .meter-row dt, .meter-pct, .railnote, .models summary,
.modelrow, .modelrow strong, .modelrow small, .modelrow .nums { font-size: 14px; }
.market-quotes th, .market-book dt { font-size: 14px; }

/* Camera: a fixed thumbnail at the top of the right column. */
.rail .selfview { width: 160px; max-width: 100%; }
.rail .selfview figcaption { font-size: 12px; }

/* The verdict, inline under the answer: what you said, checked in code. */
.verdict-row { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 8px; font-size: 15px; color: var(--muted); }
.verdict-row > span + span::before { content: "·"; margin: 0 .55em; color: var(--muted); }
.verdict-row b { font-weight: 600; color: var(--ink); }
.verdict-row.ok > span:nth-child(2) { color: var(--brand, var(--ink)); font-weight: 600; }
.verdict-row.wrong, .verdict-row.wrong b { color: var(--amber); }
.verdict-row.wrong > span:nth-child(2) { font-weight: 600; }
/* The challenge, as on the landing: amber words, the challenged number underlined. */
.room .is-challenge .speaker > span:first-child { color: var(--amber); }
.room mark, .room mark.challenged { background: linear-gradient(var(--amber), var(--amber)) 0 100% / 100% 3px no-repeat; color: inherit; padding: 0 0 2px; border-radius: 0;
  font-weight: inherit; animation: hit-in .25s var(--ease); }
@keyframes hit-in { from { background-size: 0 3px; } }

/* One clear turn indicator: a larger icon, a larger label, a faint tint by whose turn it is. */
.voicebar { border-top: 0; padding: 12px 14px; border-radius: 6px; background: var(--soft); transition: background-color .2s var(--ease); }
.voicebar[data-turn="listening"] { background: color-mix(in srgb, var(--brand, var(--ink)) 12%, var(--bg)); }
.voicebar[data-turn="checking"] { background: color-mix(in srgb, var(--ink) 8%, var(--bg)); }
.voicebar .orb { width: 32px; height: 32px; }
.voicetext strong { font-size: 17px; }
.voicetext small { font-size: 14px; }

/* ---------- Coding round in the floor look ---------- */
/* Editor: the same token hues on the floor's own paper (graphite in dark), not One Dark's blue-grey.
   Every token stays at least 4.5:1 (tests/test_syntax_contrast.py). */
:root[data-look="floor"] {
  --cm-bg: #fefdfb; --cm-gutter: #f8f7f4; --cm-linenum: #585c61; --cm-cursor: #1a1c1f; --cm-selection: #cfe6d8;
  --cm-text: #1a1c1f; --cm-keyword: #cf222e; --cm-def: #8250df; --cm-variable-2: #953800; --cm-string: #0a3069;
  --cm-number: #0550ae; --cm-comment: #585c61; --cm-builtin: #953800; --cm-property: #0550ae; --cm-meta: #6639ba;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="floor"]:not([data-theme="light"]) {
    --cm-bg: #212428; --cm-gutter: #1b1d20; --cm-linenum: #a3a9b0; --cm-cursor: #e9ebee; --cm-selection: #2f4a3c;
    --cm-text: #dfe2e6; --cm-keyword: #d19df0; --cm-def: #6cb6f5; --cm-variable-2: #e8a1a8; --cm-string: #98c379;
    --cm-number: #e0a872; --cm-comment: #a3a9b0; --cm-builtin: #5fc4d0; --cm-property: #e8a1a8; --cm-meta: #e5c07b;
  }
}
:root[data-look="floor"][data-theme="dark"] {
  --cm-bg: #212428; --cm-gutter: #1b1d20; --cm-linenum: #a3a9b0; --cm-cursor: #e9ebee; --cm-selection: #2f4a3c;
  --cm-text: #dfe2e6; --cm-keyword: #d19df0; --cm-def: #6cb6f5; --cm-variable-2: #e8a1a8; --cm-string: #98c379;
  --cm-number: #e0a872; --cm-comment: #a3a9b0; --cm-builtin: #5fc4d0; --cm-property: #e8a1a8; --cm-meta: #e5c07b;
}
/* Test results: 14px throughout; pass/fail carries an icon and a word, not colour alone. */
.code-results, .code-results h3, .code-case code, .code-case dt, .code-case dd, .code-output, .code-case .code-mark,
.code-verdict, .ws-tabs.small [role="tab"] { font-size: 14px; }
.code-case dl div { grid-template-columns: 84px minmax(0, 1fr); }
.code-case .code-mark { display: inline-flex; align-items: center; gap: 6px; }
.code-case.ok .code-mark::before, .code-case.bad .code-mark::before { font: 700 15px/1 var(--sans); }
.code-case.ok .code-mark::before { content: "✓"; }
.code-case.bad .code-mark::before { content: "✗"; }

/* Market making: the room is one screen tall. The question and a compact scorecard sit on top;
   the transcript takes the remaining height, wraps and scrolls on its own (following the
   latest line); the answer dock sits under it. Short windows fall back to page scroll. */
.room.market { height: calc(100vh - 61px); height: calc(100dvh - 61px); min-height: 600px;
  grid-template-rows: auto minmax(0, 1fr); padding-top: 24px; padding-bottom: 0; }
.room.market > .question { padding-bottom: 14px; }
.room.market .qhelp { margin-top: 4px; }
.room.market .market-panel { margin-top: 10px; padding-top: 10px; }
.room.market .market-panel h3 { margin-bottom: 2px; }
.room.market .market-card { gap: 4px; }
.room.market .market-quote { padding-bottom: 0; }
.room.market .market-num { font-size: 24px; }
.room.market > .stage { align-self: stretch; min-height: 0; padding-top: 8px; }
/* The scroll box contains its hidden accessibility spans (position: absolute); without this they
   escaped it and kept the page thousands of pixels tall after the questions (live bug, Opera). */
.room.market #log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; position: relative; }
.room.market .utterance { scroll-margin-bottom: 0; }
.room.market .dock { position: static; margin-top: 0; }
.room.market > .rail { align-self: stretch; position: static; min-height: 0; overflow-y: auto; }
.room.market .qtext { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; }
.room.market .type-answer { height: 72px; min-height: 0; }

/* Landing: inside the centred page column (the shell, 1240px). From 1280px wide the hero takes the left half and
   the sample conversation the right; below that they stack (headline, selector, sample). */

@media (min-width: 1280px) {
  .landing-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: center;
    min-height: calc(100vh - 61px); min-height: calc(100dvh - 61px); padding-top: 40px; padding-bottom: 48px; }
  .landing-stage .headline { font-size: clamp(64px, 5.4vw, 92px); }
  .landing-stage .go { gap: 16px 24px; }
  .landing-stage .scene { margin-top: 0; max-width: none; }
  .landing-stage .scene .line { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 18px; }
  .landing-stage .scene .sampleq, .landing-stage .scene .says { font-size: 18px; }
  .landing-stage .scene-foot { padding-left: calc(6.5rem + 18px); }
}

/* ---------- Bring your own question (decision log 38): the upload panel, in the floor look ---------- */
.byoq-entry { margin: 4px 0 8px; }
.byoq { max-width: 760px; align-content: start; }
.byoq-panel { display: grid; gap: 12px; justify-items: start; align-content: start; }
.byoq-panel > * { max-width: 100%; }
.byoq-panel textarea { font: 400 17px/1.5 var(--serif); }
.byoq-drop { width: 100%; display: grid; justify-items: center; gap: 6px; padding: 28px 16px; text-align: center; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.byoq-drop .icon { width: 26px; height: 26px; color: var(--muted); }
.byoq-drop:hover, .byoq-drop.over { border-color: var(--ink); background: var(--soft); }
.byoq-drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.byoq-paste { width: 100%; }
.byoq-paste summary { cursor: pointer; font-size: 14px; min-height: 32px; display: flex; align-items: center; }
.byoq-paste[open] { display: grid; gap: 8px; justify-items: start; }
.byoq-rule { color: var(--ink); border-top: 1px solid var(--line); padding-top: 10px; width: 100%; }
.byoq-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; width: 100%; }
.byoq-col { flex: 1 1 220px; min-width: 0; display: grid; gap: 6px; margin: 0; }
.byoq-input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); padding: 10px 11px; }
.byoq-flag { color: var(--ink); }
.byoq-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.byoq-steps { margin: 0; padding: 0; list-style: none; display: grid; width: 100%; counter-reset: byoq; }
.byoq-steps li { counter-increment: byoq; border-top: 1px solid var(--line); padding: 10px 0; font-size: 15px; color: var(--muted); display: flex; gap: 12px; }
.byoq-steps li::before { content: counter(byoq); font: 500 13px/1.6 var(--mono); width: 1.5em; color: var(--muted); }
.byoq-steps li.now { color: var(--ink); font-weight: 600; }
.byoq-steps li.done { color: var(--ink); }
.byoq-steps li.done::before { content: "✓"; color: var(--ink); }
.byoq-verdict { font: 400 clamp(24px, 3vw, 32px)/1.2 var(--serif); letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .byoq-drop { transition: none; } }
@media (max-width: 760px) { .byoq { padding-left: 16px; padding-right: 16px; } }

/* ---------- Room fixes: "New message ↓" when the candidate has scrolled up to read ---------- */
.new-line { position: sticky; bottom: 12px; z-index: 6; align-self: center; margin: 8px auto;
  display: flex; background: var(--paper); box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 14%, transparent); }
/* Spoken and market rooms: a row in the dock, right-aligned above the turn bar, never over the transcript. */
.dock > .new-line { position: static; justify-self: end; margin: 0; }
.new-line[hidden] { display: none; }