/* Ravatar promo videos: one stylesheet, tokens on :root, light and dark by the system setting. 4px grid. Spec: docs/marketer/ux-spec.md. */
@layer base, layout, components;

/* Local fonts (served by /static/fonts/, the same files the videos use). */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-text: #16181d;
  --color-muted: #5b6270;
  --color-border: #dcdfe5;
  --color-border-strong: #8a92a0; /* form controls need 3:1 against their background */
  --color-accent: #3b4fd8;
  --color-accent-hover: #2d3fb8;
  --color-accent-text: #ffffff;
  --color-accent-soft: #ecedfc;
  --color-focus: #3b4fd8;
  --color-rec: #e5484d;
  --color-ok-bg: #e6f4ec;
  --color-ok-text: #1f7a45;
  --color-warn-bg: #fff3d9;
  --color-warn-text: #8a5300;
  --color-error-bg: #fdecea;
  --color-error-text: #b42318;
  --color-info-bg: var(--color-accent-soft);
  --color-info-text: var(--color-accent);
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --tap: 44px;
  --ease: 150ms ease-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1115;
    --color-surface: #171a21;
    --color-text: #eceef2;
    --color-muted: #9aa2b1;
    --color-border: #2a2f3a;
    --color-border-strong: #6b7385;
    --color-accent: #8c9bff;
    --color-accent-hover: #a8b4ff;
    --color-accent-text: #0f1115;
    --color-accent-soft: #1e2340;
    --color-focus: #a8b4ff;
    --color-rec: #ff6369;
    --color-ok-bg: #163a25;
    --color-ok-text: #8fdba8;
    --color-warn-bg: #46330c;
    --color-warn-text: #f3cf86;
    --color-error-bg: #4a1d1a;
    --color-error-text: #f5a9a3;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  body {
    margin: 0; background: var(--color-bg); color: var(--color-text);
    font: 400 var(--text-md) / 1.5 var(--font-body);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }
  h1 { font-size: var(--text-xl); margin: 0 0 var(--space-3); }
  h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
  p { margin: 0 0 var(--space-3); }
  a { color: var(--color-accent); }
  :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  video, img { max-inline-size: 100%; }
}

@layer layout {
  .top { background: var(--color-surface); border-block-end: 1px solid var(--color-border); }
  .top-in { display: flex; align-items: center; gap: var(--space-3); max-inline-size: 60rem; margin-inline: auto; padding: var(--space-3) var(--space-4); }
  .brand { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap); color: var(--color-text); font-weight: 700; text-decoration: none; white-space: nowrap; }
  .mark { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 8px; background: var(--color-accent); color: var(--color-accent-text); font: 600 1.125rem / 1 var(--font-display); }
  .top nav { display: flex; gap: var(--space-1); margin-inline-end: auto; }
  .top nav a { display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--space-3); border-radius: var(--radius); color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
  .top nav a:hover { color: var(--color-text); background: var(--color-bg); }
  .top nav a[aria-current] { color: var(--color-accent); background: var(--color-accent-soft); }
  .who { overflow: hidden; max-inline-size: 14rem; color: var(--color-muted); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
  .out { margin: 0; }
  .top .brand + .who { margin-inline-start: auto; } /* the connect page: no nav pushes it to the end */
  main { max-inline-size: 44rem; margin-inline: auto; padding: var(--space-6) var(--space-4) var(--space-12); }
  main.wide { max-inline-size: 60rem; }
  .head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
  .head h1 { margin: 0; }
  .row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: var(--space-6); }
  .form { display: grid; gap: var(--space-4); }
  .avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--space-3); }
  .dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
}

@layer components {
  /* steps: Brief, Script, Recording, Video; a line joins them on wide screens */
  .steps { list-style: none; display: flex; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; }
  .steps li { display: flex; flex: 1; align-items: center; gap: var(--space-2); min-inline-size: 0; color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
  .steps li:last-child { flex: 0 1 auto; }
  .steps li::after { content: ""; flex: 1; block-size: 2px; margin-inline-start: var(--space-1); border-radius: 1px; background: var(--color-border); }
  .steps li:last-child::after { display: none; }
  .steps .n { display: grid; flex: none; place-items: center; inline-size: 28px; block-size: 28px; border: 2px solid var(--color-border-strong); border-radius: 50%; font-size: var(--text-xs); }
  .steps .done { color: var(--color-text); }
  .steps .done .n { border-color: var(--color-ok-text); background: var(--color-ok-text); color: var(--color-surface); }
  .steps .done::after { background: var(--color-ok-text); }
  .steps .current { color: var(--color-text); }
  .steps .current .n { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-text); }

  /* list */
  .jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
  .job {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-4); align-items: center;
    min-block-size: var(--tap); padding: var(--space-4) var(--space-5);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    color: var(--color-text); text-decoration: none;
  }
  .job:hover { border-color: var(--color-accent); }
  .job .main { display: grid; gap: var(--space-1); }
  .job .clinic { font-weight: 600; overflow-wrap: anywhere; }
  .job .meta { color: var(--color-muted); font-size: var(--text-xs); }
  .job .end { display: grid; justify-items: end; gap: var(--space-1); }
  .job .act { color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; }
  .jobs li > .watch { display: inline-block; margin-block-start: var(--space-1); padding-inline: var(--space-5); color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; }
  .take { margin-block: var(--space-4); }
  .job .act::after { content: " \2192"; content: " \2192" / ""; }
  .job:hover .act { text-decoration: underline; }
  .empty { padding: var(--space-10) var(--space-4); text-align: center; background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
  .empty h2 { margin-block: 0 var(--space-4); }
  .empty ol { display: grid; gap: var(--space-2); max-inline-size: 22rem; margin: 0 auto var(--space-6); padding: 0; list-style: none; counter-reset: how; text-align: start; color: var(--color-muted); }
  .empty li { counter-increment: how; display: flex; align-items: center; gap: var(--space-3); }
  .empty li::before { content: counter(how); display: grid; flex: none; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-weight: 700; font-size: var(--text-sm); }

  /* people (admins): one row per person, their Claude status and actions at the end */
  .people { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-2); }
  .people > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .people .main { display: grid; gap: var(--space-1); min-inline-size: 0; }
  .people .clinic { font-weight: 600; overflow-wrap: anywhere; }
  .people .meta { color: var(--color-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
  .people .end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .people .bar { margin: 0; gap: var(--space-1); }

  /* status chips */
  .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; background: var(--color-info-bg); color: var(--color-info-text); }
  .badge-draft { background: var(--color-border); color: var(--color-muted); }
  .badge-accepted { background: var(--color-warn-bg); color: var(--color-warn-text); }
  .badge-done { background: var(--color-ok-bg); color: var(--color-ok-text); }
  .badge-needs_review { background: var(--color-warn-bg); color: var(--color-warn-text); }
  .badge-failed { background: var(--color-error-bg); color: var(--color-error-text); }
  .badge-recording::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--color-rec); }

  /* notices: a dot of the notice colour, then the text */
  .notice { position: relative; margin-block-end: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10); border-radius: var(--radius); background: var(--color-info-bg); color: var(--color-info-text); }
  .notice::before { content: ""; position: absolute; inset-block-start: 1.1em; inset-inline-start: var(--space-4); inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
  .notice ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-6); }
  .notice p { margin: 0; font-weight: 600; }
  .notice form { display: inline-block; margin: var(--space-2) var(--space-2) 0 0; }
  .notice.warn { background: var(--color-warn-bg); color: var(--color-warn-text); font-weight: 600; }
  .notice.error { background: var(--color-error-bg); color: var(--color-error-text); }
  .notice.ok { background: var(--color-ok-bg); color: var(--color-ok-text); }
  .hint, .sub { color: var(--color-muted); font-size: var(--text-sm); }
  .sub { font-size: var(--text-md); }
  .big { font-size: var(--text-lg); font-weight: 600; }

  /* form */
  fieldset { margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: grid; gap: var(--space-3); min-inline-size: 0; }
  legend { padding-inline: var(--space-2); font-weight: 700; }
  .field { display: grid; gap: var(--space-1); font-weight: 600; font-size: var(--text-sm); }
  .field small { font-weight: 400; color: var(--color-muted); }
  .field-error { margin: 0; color: var(--color-error-text); font-size: var(--text-sm); font-weight: 600; }
  input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
    inline-size: 100%; min-block-size: var(--tap); padding: var(--space-2) var(--space-3);
    font: inherit; font-weight: 400; color: var(--color-text); background: var(--color-bg);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--color-focus); }
  textarea { resize: vertical; }
  .choice { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap); padding-inline: var(--space-3); cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
  .choice:hover { border-color: var(--color-accent); }
  .choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
  .choice input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--color-accent); }

  /* palette swatches: a light and a dark chip (accent on background); the colours are generated per palette (swatchCss) */
  .swatch { gap: var(--space-2); }
  .chip { display: inline-grid; place-items: center; inline-size: 36px; block-size: 28px; border: 1px solid var(--color-border); border-radius: var(--radius); font-weight: 700; font-size: var(--text-sm); }
  .chip.l { background: var(--lb); color: var(--la); }
  .chip.d { background: var(--db); color: var(--da); }

  /* avatar picker: the radio is hidden, its card shows the state */
  .avatar { display: block; position: relative; cursor: pointer; }
  .avatar input { position: absolute; opacity: 0; inset: 0; margin: 0; }
  .avatar .card { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-3); text-align: center; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); block-size: 100%; }
  .avatar:hover .card { border-color: var(--color-accent); }
  .avatar input:checked + .card { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); background: var(--color-accent-soft); }
  .avatar input:focus-visible + .card { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .avatar input:disabled + .card { opacity: 0.5; cursor: not-allowed; }
  .avatar img, .avatar .ph { inline-size: 64px; block-size: 64px; border-radius: 50%; object-fit: cover; }
  .avatar .ph { display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
  .avatar input:checked + .card .ph { background: var(--color-accent); color: var(--color-accent-text); }
  .avatar small { color: var(--color-muted); }

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--tap); padding: var(--space-2) var(--space-4);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  }
  .btn:hover { border-color: var(--color-accent); }
  .btn.primary { color: var(--color-accent-text); background: var(--color-accent); border-color: var(--color-accent); }
  .btn.primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
  .btn.small { padding-inline: var(--space-3); font-size: var(--text-sm); }
  .btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .btn[aria-busy="true"] { opacity: 1; cursor: progress; }
  .btn[aria-busy="true"]::before { content: ""; inline-size: 1em; block-size: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; }
  .link { min-block-size: var(--tap); display: inline-flex; align-items: center; }
  .vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }


  /* brief: the idea card, the divider, directions, segmented theme, folds */
  .idea { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--color-accent-soft); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .idea h2 { margin: 0; }
  .idea .hint { margin: 0; color: var(--color-text); }
  .idea textarea { background: var(--color-surface); }
  .starters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
  /* participant block: opt = a labelled option group; voice cards in one group per gender */
  .opt { display: grid; gap: var(--space-2); }
  .opt-label { font-weight: 600; font-size: var(--text-sm); }
  .opt .hint { margin: 0; }
  .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .pair-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-3); }
  .voices { display: grid; gap: var(--space-3); }
  .voice-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: var(--space-2); }
  .voice { display: grid; align-content: space-between; gap: var(--space-1); padding: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .voice:hover { border-color: var(--color-accent); }
  .voice:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); background: var(--color-accent-soft); }
  .voice:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .voice label { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-2); row-gap: var(--space-1); cursor: pointer; }
  .voice input { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--color-accent); }
  .voice small, .voice .tags { grid-column: 2; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.3; }
  .voice .badge { grid-column: 2; justify-self: start; }
  .form:has(input[name="patientGender"][value="f"]:checked) .voice-group[data-gender="m"],
  .form:has(input[name="patientGender"][value="m"]:checked) .voice-group[data-gender="f"] { display: none; }

  .reuse { margin-block-start: var(--space-6); }
  .reuse form { margin-block-start: var(--space-4); }
  .go:has(select) { align-items: end; }
  .go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .go .hint, .dock .hint { margin: 0; }
  .or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
  .or::before, .or::after { content: ""; flex: 1; block-size: 1px; background: var(--color-border); }
  .dirs .choice { justify-content: flex-start; }
  fieldset:has(input[name="direction"][value="other"]:not(:checked)) .dir-note { display: none; }
  .dir-note { display: grid; gap: var(--space-2); }
  .dir-note .hint { margin: 0; }
  .seg { display: inline-flex; inline-size: fit-content; padding: 3px; background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius); }
  .seg label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-block-size: 38px; min-inline-size: 6rem; padding-inline: var(--space-4); border-radius: 4px; font-weight: 600; cursor: pointer; }
  .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .seg label:has(input:checked) { background: var(--color-accent); color: var(--color-accent-text); }
  .seg label:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .fold { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--tap); padding: var(--space-2) var(--space-4); font-weight: 700; cursor: pointer; list-style: none; }
  .fold > summary::-webkit-details-marker { display: none; }
  .fold > summary::after, .more > summary::after { content: "+"; flex: none; color: var(--color-accent); font-size: var(--text-lg); line-height: 1; }
  .fold[open] > summary::after, .more[open] > summary::after { content: "\2212"; }
  .fold[open] > summary { border-block-end: 1px solid var(--color-border); }
  .fold > :not(summary) { margin: var(--space-4); }
  .fold > .field + .field, .fold > textarea + .field { margin-block-start: var(--space-3); }
  .more > summary { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap); color: var(--color-accent); font-weight: 600; cursor: pointer; list-style: none; }
  .more > summary::-webkit-details-marker { display: none; }
  .more[open] > summary { margin-block-end: var(--space-3); }
  .more > ul { margin: 0; padding-inline-start: var(--space-6); color: var(--color-muted); font-size: var(--text-sm); }
  .more > ul li + li { margin-block-start: var(--space-2); }

  /* settings: a card per service, the status at its top right, its buttons inside */
  .panel { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .panel + .panel { margin-block-start: var(--space-4); }
  .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .panel-head h2 { margin: 0; }
  .panel .bar { margin-block-start: var(--space-2); }
  .panel .hint, .panel p { margin: 0; }
  .share { margin-block-start: var(--space-6); }
  .share-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); }
  .share-url .btn { min-inline-size: 6rem; }
  .how { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: var(--space-6); color: var(--color-muted); font-size: var(--text-sm); }

  /* review */
  .qs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
  .q { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); scroll-margin-block-start: var(--space-4); }
  .q:target { border-color: var(--color-accent); }
  .q.fixed { background: transparent; border-style: dashed; }
  .q-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .num { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-weight: 700; }
  .acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .opts, .readonly { color: var(--color-muted); font-size: var(--text-sm); margin: 0; overflow-wrap: anywhere; }
  .brief { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; }
  .facts div { display: grid; }
  .facts dt { color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
  .facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  .q { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  /* review as a dialogue: the avatar's bubble on the left, the patient's on the right */
  .turns { display: grid; gap: var(--space-2); }
  .bubble { display: grid; gap: var(--space-1); inline-size: 85%; box-sizing: border-box; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); }
  .bubble p { margin: 0; }
  .bubble textarea { inline-size: 100%; box-sizing: border-box; }
  .avatar-b { justify-self: start; background: var(--color-accent-soft); border-end-start-radius: var(--space-1); }
  .patient-b { justify-self: end; background: var(--color-bg); border: 1px solid var(--color-border); border-end-end-radius: var(--space-1); }
  .who { color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
  .play { justify-self: start; display: inline-flex; align-items: center; min-block-size: var(--tap); font-size: var(--text-sm); font-weight: 600; }
  .play::before { content: "\25B6"; margin-inline-end: var(--space-1); font-size: 0.75em; }
  .play[aria-pressed="true"]::before { content: "\25A0"; }
  .clip-error { color: var(--color-error-text); font-size: var(--text-sm); font-weight: 600; }
  .profile { margin-block-end: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .card-title { margin: 0 0 var(--space-2); font-weight: 700; }
  .duration { color: var(--color-muted); font-size: var(--text-sm); }
  .duration.warn { color: var(--color-warn-text); font-weight: 600; }
  .btn.quiet { min-block-size: var(--tap); border-color: transparent; background: transparent; color: var(--color-accent); }
  .btn.quiet:hover { background: var(--color-accent-soft); }
  .btn.quiet.danger { color: var(--color-error-text); }
  .btn.quiet.danger:hover { background: var(--color-error-bg); }
  .count { justify-self: end; color: var(--color-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
  .count.over { color: var(--color-error-text); }
  .dock { position: sticky; inset-block-end: 0; z-index: 1; display: grid; gap: var(--space-1); margin-block-start: var(--space-6); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08); }
  .dock .bar { margin: 0; }
  .readonly { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }

  /* review: the Look (style cards, pace, ending, zoom questions); the native radio stays visible, the card shows the state and the focus */
  .look { gap: var(--space-2); padding: 0; border: 0; background: none; }
  .look-h { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: 700; }
  .look-h:first-of-type { margin-block-start: 0; }
  .look .hint { margin: 0; }
  .look-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--space-2); }
  .look-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: var(--space-1) var(--space-2); padding: var(--space-3); cursor: pointer; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .look-card > * { grid-column: 2; }
  .look-card input { grid-column: 1; inline-size: 20px; block-size: 20px; margin: 2px 0 0; accent-color: var(--color-accent); }
  .look-card input:focus-visible { outline: none; }
  .look-card:hover { border-color: var(--color-accent); }
  .look-card:has(input:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); background: var(--color-accent-soft); }
  .look-card:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .look-name { font-weight: 700; }
  .look-feel { color: var(--color-muted); font-size: var(--text-sm); }
  .look-card .badge { justify-self: start; margin-block-start: var(--space-1); border-radius: var(--radius); white-space: normal; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
  .look-list { display: grid; gap: var(--space-2); }
  .look-list .choice { justify-content: flex-start; }
}

/* progress: the stage track, the REC dot, the player */
@layer components {
  .track { display: flex; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
  .track li { display: flex; flex: 1; align-items: center; gap: var(--space-2); min-inline-size: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-muted); font-weight: 600; }
  .track .n { display: grid; flex: none; place-items: center; inline-size: 28px; block-size: 28px; border: 2px solid var(--color-border-strong); border-radius: 50%; font-size: var(--text-xs); }
  .track .done .n { border-color: var(--color-ok-text); background: var(--color-ok-text); color: var(--color-surface); }
  .track .done { color: var(--color-text); }
  .track .current { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-text); }
  .track .current .n { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-text); }
  .rec { margin-inline-start: auto; }
  .rec::before { content: ""; display: block; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--color-rec); }
  .player { overflow: hidden; border-radius: var(--radius-lg); background: #000; aspect-ratio: 16 / 9; }
  .player video { display: block; inline-size: 100%; block-size: 100%; }
  .fail, .review { display: grid; gap: var(--space-3); }
  .fail > *, .review > * { margin: 0; }
  .fail .hint, .review .hint { margin-block-start: var(--space-2); }
  .found h2, .found h3 { margin: 0; }
  .found h3 { margin-block-start: var(--space-3); font-size: var(--text-sm); }
  .found ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-6); }
  .bar form { margin: 0; }
}

@media (max-width: 30rem) {
  .track { display: grid; grid-template-columns: 1fr 1fr; }
  .track li { padding: var(--space-2) var(--space-3); }
  .pair { grid-template-columns: 1fr; }
  .bubble { inline-size: 100%; }
  .dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg { flex-wrap: wrap; max-inline-size: 100%; }
  .seg label { flex: 1 1 auto; min-inline-size: 5rem; }
  .top-in { flex-wrap: wrap; gap: var(--space-2); padding-inline: var(--space-3); }
  .who { display: none; }
  .top .brand + .who + .out { margin-inline-start: auto; }
  .brand-name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .steps li { flex-direction: column; text-align: center; }
  .steps li:last-child { flex: 1; }
  .steps li::after { display: none; }
  .job { grid-template-columns: 1fr; }
  .job .end { grid-auto-flow: column; justify-content: space-between; justify-items: start; align-items: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .job, .choice, .avatar .card, .voice { transition: border-color var(--ease), background-color var(--ease), color var(--ease); }
  .btn[aria-busy="true"]::before { animation: spin 0.8s linear infinite; }
  .rec::before { animation: pulse 1.6s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: 0.25; } }
@keyframes spin { to { transform: rotate(360deg); } }

.sw-default { --lb: #edebe7; --la: #846200; --db: #1b1b1e; --da: #e8c04a; }
.sw-amber { --lb: #f4e6df; --la: #a54b00; --db: #27201c; --da: #e99769; }
.sw-ocean { --lb: #e4eff7; --la: #006a9d; --db: #1c2327; --da: #63b7f0; }
.sw-violet { --lb: #eae5f4; --la: #7248ae; --db: #222027; --da: #b99ded; }
.sw-rose { --lb: #f5e6eb; --la: #a83a62; --db: #271f21; --da: #ea8eab; }
.sw-emerald { --lb: #dfece2; --la: #00703e; --db: #1d231f; --da: #6dc48d; }
.sw-slate { --lb: #d9e8ec; --la: #006f83; --db: #1b2325; --da: #3ec0dc; }
.sw-pumpkin { --lb: #dcecef; --la: #aa3426; --db: #1b2324; --da: #eb8878; }