/* ════════════════════════════════════════════════════════════════════
   FCA v2 — stylesheet (externalized from index.html for CSP: no inline <style>)
   Loaded via <link rel="stylesheet" href="fca.css?v=…"> in index.html <head>.
   Sections: (1) app styles  (2) CSP utility classes (appended below).
   ════════════════════════════════════════════════════════════════════ */

  :root {
    --bg-grad-1: #f8f7f6;
    --bg-grad-2: #f8f7f6;
    --card: #ffffff;
    --tx: #1a1a18;
    --tx70: rgba(26,26,24,.72);
    --tx55: rgba(26,26,24,.55);
    --tx40: rgba(26,26,24,.40);
    --tx20: rgba(26,26,24,.20);
    --tx10: rgba(26,26,24,.07);
    --bd: rgba(26,26,24,.08);
    --bd2: rgba(26,26,24,.14);
    --pill: #ecebe6;
    --pill-bd: rgba(26,26,24,.06);
    --app: #327e58;
    --app-dim: rgba(50,126,88,.10);
    --app-bd: rgba(50,126,88,.25);
    --app-strong: #245c42;
    --warn: #c0573b;
    --warn-dim: rgba(192,87,59,.10);
    --info: #5677a3;
    --info-dim: rgba(86,119,163,.10);
    --voice: #6d4cb0;
    --voice-dim: rgba(109,76,176,.10);
    --voice-bd: rgba(109,76,176,.30);
    --chat-fill: #f4f1e6;
    --chat-fill-bd: rgba(50,126,88,.18);
    /* Severity palette */
    --sev-none: #b8c5b8;
    --sev-mild: #6cae8a;
    --sev-mod: #d99a3a;
    --sev-sev: #d36a3e;
    --sev-ext: #b04545;
    --field-bg: #f7f6f1;
    --field-bd: rgba(26,26,24,.07);
    --shadow-sm: 0 1px 2px rgba(26,26,24,.04);
    --shadow-md: 0 3.5px 21.5px rgba(26,26,24,.06), 0 1px 2px rgba(26,26,24,.04);
  }

  /* ─── Dark theme ─────────────────────────────────────────────
     Overrides the :root tokens above when [data-theme="dark"] is
     set on <html> by the bootstrap script up in <head>. The vast
     majority of the UI inherits from these variables, so this
     block is the single source of truth for dark surfaces. */
  :root[data-theme="dark"] {
    /* Neutral grey palette — three tones for the three layers:
       #1a1a1a (deepest, page bg) → #1f1f1f (mid, fields/secondary) →
       #242424 (top, raised cards). */
    --bg-grad-1: #1a1a1a;
    --bg-grad-2: #1f1f1f;
    --card: #242424;
    --tx: #f1efe8;
    --tx70: rgba(241,239,232,.72);
    --tx55: rgba(241,239,232,.55);
    --tx40: rgba(241,239,232,.40);
    --tx20: rgba(241,239,232,.20);
    --tx10: rgba(241,239,232,.08);
    --bd:   rgba(255,255,255,.08);
    --bd2:  rgba(255,255,255,.14);
    --pill: #2a2a2a;
    --pill-bd: rgba(255,255,255,.08);
    --app:        #4ea87b;
    --app-dim:    rgba(78,168,123,.18);
    --app-bd:     rgba(78,168,123,.34);
    --app-strong: #7fc99e;
    --warn:       #e07a5a;
    --warn-dim:   rgba(224,122,90,.16);
    --info:       #7fa3d5;
    --info-dim:   rgba(127,163,213,.16);
    --voice:      #a585e2;
    --voice-dim:  rgba(165,133,226,.16);
    --voice-bd:   rgba(165,133,226,.34);
    --chat-fill:  #242424;
    --chat-fill-bd: rgba(78,168,123,.22);
    --field-bg:   #1f1f1f;
    --field-bd:   rgba(255,255,255,.08);
    --shadow-sm:  0 1px 2px rgba(0,0,0,.45);
    --shadow-md:  0 3.5px 21.5px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
  }

  /* ─── Dark mode: hardcoded-surface overrides ─────────────────
     Some rules below bake in light cream gradients (#fbfaf5,
     #fdf6f3, #f9f7f0) or near-white solids (#fcfbf6) that don't
     read against the dark base. Override those specific surfaces
     here so cards, banners, and input fields look right in dark.
     ──────────────────────────────────────────────────────────── */
  [data-theme="dark"] .artifact-head.artifact-head--tabs {
    background: linear-gradient(180deg, #242424 0%, #1f1f1f 100%);
  }
  /* Assistant chat bubbles hardcode a light grey (#ececec) + near-black
     text (#222). Flip to neutral mid-grey + light text for dark mode. */
  [data-theme="dark"] .msg-asst {
    background: #2a2a2a;
    color: var(--tx);
    border-color: rgba(255,255,255,.10);
  }
  [data-theme="dark"] .msg-user.voice {
    background: rgba(165,133,226,.16);
    border-color: rgba(165,133,226,.34);
  }
  [data-theme="dark"] .outstanding-tray {
    background: linear-gradient(180deg, rgba(224,122,90,.14) 0%, rgba(224,122,90,.10) 100%);
  }
  [data-theme="dark"] .dict-banner {
    background: linear-gradient(180deg, rgba(165,133,226,.16) 0%, rgba(165,133,226,.10) 100%);
  }
  [data-theme="dark"] .ax-card.partial {
    background: linear-gradient(180deg, rgba(224,122,90,.10) 0%, var(--card) 50%);
  }
  [data-theme="dark"] .ax-interp.from-voice {
    background: linear-gradient(180deg, rgba(165,133,226,.14) 0%, rgba(165,133,226,.08) 100%);
  }
  [data-theme="dark"] .subgroup,
  [data-theme="dark"] .supports-block {
    background: #1f1f1f;
  }
  /* Draft list items in the Drafts modal bake in #fcfbf6 — flip to
     mid-grey so they sit a touch below the modal's card surface. */
  [data-theme="dark"] .draft-item {
    background: #1f1f1f;
    border-color: rgba(255,255,255,.08);
  }
  [data-theme="dark"] #polish-result,
  [data-theme="dark"] .polish-diff-view {
    background: linear-gradient(180deg, rgba(78,168,123,.10) 0%, rgba(78,168,123,.06) 100%);
    border-color: rgba(78,168,123,.30);
  }
  /* Inputs inside rows / repeat items / row-notes — the light
     #fff background hardcodes through, so flip to the field token.
     The :focus rules below cover the same surfaces when they're
     active (otherwise they snap back to white-on-click). */
  [data-theme="dark"] .row .row-value input,
  [data-theme="dark"] .row .row-value textarea,
  [data-theme="dark"] .repeat-item .ri-val input,
  [data-theme="dark"] .repeat-item .ri-val textarea,
  [data-theme="dark"] .row-notes-edit textarea,
  [data-theme="dark"] .settings-field input:focus,
  [data-theme="dark"] .settings-field textarea:focus,
  [data-theme="dark"] .row .row-value input:focus,
  [data-theme="dark"] .row .row-value textarea:focus {
    background: var(--field-bg);
    color: var(--tx);
  }
  /* Tutorial pill hover (flips to light fill on hover) — keep dark. */
  [data-theme="dark"] .actions .btn:hover { background: rgba(255,255,255,.06); }
  [data-theme="dark"] .save-status:hover { background: rgba(255,255,255,.06); }
  /* Pure-black active state inverts in dark — use the lighter
     contrast surface so the toggle still reads. */
  [data-theme="dark"] .actions .btn.is-active,
  [data-theme="dark"] .actions .btn:active,
  [data-theme="dark"] .save-status.is-active,
  [data-theme="dark"] .save-status:active {
    background: #f1efe8;
    color: #1a1a18;
    border-color: #f1efe8;
  }
  [data-theme="dark"] .actions .btn.is-active svg,
  [data-theme="dark"] .actions .btn:active svg { color: #1a1a18; }

  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    color: var(--tx);
    background: var(--bg-grad-1);
    background-attachment: fixed;
    font-size: 12.5px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }

  /* Sidebar push: standalone gets the shared caw-sb partial.
     The partial adds .caw-tool-page to body only when .steps is present.
     v2 has no .steps so we manually push the app the same 57.5px when
     standalone. When the shared sidebar expands on hover/focus/menu-open,
     shift the app further right so the expanded rail doesn't overlay
     content — mirrors the workspace's `:has()`-driven push at my/. */
  html.fca-standalone .app {
    padding-left: 70px;
    transition: padding-left .28s cubic-bezier(.4, 0, .2, 1);
  }
  html.fca-embedded .app   { padding-left: 12.5px; }
  /* Shift the app right when the sidebar is clicked open. The existing
     transition: padding-left .28s on .app animates both directions. */
  @media (min-width: 901px) {
    html.fca-standalone:has(.caw-sb.caw-sb-open) .app { padding-left: 250px; }
  }

  .app {
    display: flex; flex-direction: column;
    height: 100vh;
    padding: 12.5px 12.5px 12.5px 70px;
    gap: 11px;
  }

  /* ───── Top bar ─────────────────────────────────────────── */
  /* The topbar mirrors the workspace split below (.main is
     1fr / 2fr — chat on the left, artifact/editor on the right).
     Crumbs sit in the left half, V1+Tutorial sit at the left edge
     of the right half (so they line up vertically with the editor's
     Participant tab), and the right action cluster pushes to the
     far right via margin-left:auto. */
  .topbar { display: grid; grid-template-columns: 1fr 2fr; align-items: center; padding: 3.5px 0; }
  .topbar-half-left  { display: flex; align-items: center; padding: 0 14.5px 0 7px; min-width: 0; }
  /* Left padding = 5.5 (.artifact-wrap) + 1 (.artifact border) + 9
     (.artifact-head padding) so V1's left edge lines up with the
     Participant tab below. */
  .topbar-half-right { display: flex; align-items: center; padding: 0 7px 0 15.5px; gap: 7px; min-width: 0; }
  .topbar .actions-left { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
  .topbar .actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
  /* Narrower laptops (~1440px) can't fit all 7 buttons at full width
     inside the 2fr right column. Collapse the save-status text to
     just its dot and tighten cluster gaps — recovers ~70px, which
     covers typical 1366–1500 laptop widths without breaking the V1
     alignment with the Participant tab. */
  @media (max-width: 1500px) and (min-width: 901px) {
    .topbar .actions { gap: 5px; }
    .topbar .actions-left { gap: 5px; }
    .topbar .save-status > span:not(.dot) { display: none; }
    .topbar .save-status { padding: 0 9px; gap: 0; }
  }
  .crumbs { display: flex; align-items: center; gap: 7px; color: var(--tx55); font-size: 11.5px; font-weight: 500; }
  .crumb-logo { width: 20px; height: 20px; display: grid; place-items: center; color: var(--app); }
  .crumb-logo svg { width: 16px; height: 16px; }
  .crumb-logo img { width: 16px; height: 16px; object-fit: contain; display: block; }
  [data-theme="dark"] .crumb-logo img { content: url("https://my.capacoty.app/white-icon.png"); }
  .crumb-chip {
    width: 20px; height: 20px; border-radius: 5.5px; background: var(--app); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 11px;
  }
  .crumb-title { display: flex; align-items: center; gap: 7px; color: var(--tx); font-weight: 600; font-size: 12.5px; }
  .crumb-title svg { width: 14.5px; height: 14.5px; color: var(--tx55); }
  .chev { color: var(--tx40); }
  .v2-badge {
    margin-left: 3.5px;
    padding: 2px 7px;
    background: var(--voice-dim);
    color: var(--voice);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .mode-badge {
    margin-left: 3.5px;
    padding: 2px 8px 2px 6.5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
  }
  .mode-badge.adult {
    background: var(--app-dim);
    color: var(--app-strong);
  }
  .mode-badge.paed {
    background: rgba(86,119,163,.14);
    color: #36507a;
  }
  .mode-badge .dot {
    width: 5.5px; height: 5.5px; border-radius: 50%;
    background: currentColor;
  }
  .progress-pill {
    margin-left: 9px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3.5px 10px 3.5px 5.5px;
    background: var(--card); border: 1px solid var(--bd);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 500; color: var(--tx70);
    box-shadow: var(--shadow-sm);
  }
  .progress-bar { width: 50.5px; height: 4.5px; border-radius: 999px; background: var(--tx10); overflow: hidden; }
  .progress-bar > span { display: block; height: 100%; background: var(--app); border-radius: 999px; transition: width .3s; }

  .actions { display: flex; justify-content: flex-end; gap: 7px; }
  .btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 11.5px; border-radius: 9px;
    background: var(--card); border: 1px solid var(--bd);
    color: var(--tx); font-size: 11.5px; font-weight: 500;
    cursor: pointer; box-shadow: var(--shadow-sm); font-family: inherit;
    white-space: nowrap;
  }
  .btn:hover { border-color: var(--bd2); }
  .btn svg { width: 13.5px; height: 13.5px; color: var(--tx55); }
  .btn-primary { background: var(--app); color: #fff; border-color: var(--app); }
  .btn-primary:hover { background: var(--app-strong); border-color: var(--app-strong); }
  .btn-primary svg { color: rgba(255,255,255,.85); }
  .btn-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

  /* Generate button "gate" state — instead of greying out + becoming
     inert, the button stays clickable but shows an inline hint about
     what's blocking generation. A click scrolls the first outstanding
     row into view + flashes it. Less dead-end UX than .btn-disabled. */
  #generate-btn.btn-gate {
    background: var(--field-bg);
    color: var(--tx55);
    border-color: var(--bd2);
    cursor: pointer;
  }
  #generate-btn.btn-gate:hover {
    background: var(--tx10);
    border-color: var(--tx20);
  }
  /* Red "N missing" hint hidden — the gated button state is still
     shown via the muted button styling (#generate-btn.btn-gate) but
     without the in-line warning badge. */
  #generate-btn .gen-hint { display: none !important; }
  /* Brief flash on the outstanding row a gated click points at */
  @keyframes attentionFlash {
    0%, 100% { background: transparent; }
    25%, 75% { background: var(--warn-dim); }
  }
  .row.attention-flash, .row-status.attention-flash {
    animation: attentionFlash 1.6s ease-in-out 2;
  }

  /* ════════════════════════════════════════════════════════════
     Topbar action cluster — flat-pill restyle.
     Every topbar pill (left cluster + right cluster) shares the
     SAME locked height/line-height/padding/border-width combo so
     the row reads as one strip and the heights are pixel-identical.
     Default: transparent + 1px grey border.
     Hover:   white fill.
     Active:  black with white text (toggled / pressed).
     Generate report stays loud: filled --app, soft shadow, rich
     multi-colour Google Docs glyph on the left.
     ──────────────────────────────────────────────────────────── */
  .actions .btn,
  .actions-left .tutorial-pill,
  .actions-left .version-switch-pill {
    height: 32px;
    line-height: 30px;       /* 32 - 1px border top - 1px border bottom */
    padding: 0 12px;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    font-size: 12px;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* V1 switch has a strong warm fill that feels visually thicker than the
     flat pills, so shrink it 2px to keep the row a single band. (Tutorial
     now uses the quiet card style below, so it stays at the full 32px to
     match the Downloads bell beside it.) */
  .actions-left .version-switch-pill {
    height: 30px;
    line-height: 28px;
  }
  /* V1 switch + Tutorial are icon-only — square them off and drop the text
     padding so they read as compact glyph buttons. */
  .actions-left .version-switch-pill {
    width: 30px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .actions-left .tutorial-pill {
    width: 32px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  /* Icons across the whole topbar are uniform. */
  .actions .btn svg,
  .actions-left .tutorial-pill svg,
  .actions-left .version-switch-pill svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
    transition: color .15s;
  }

  .actions .btn {
    background: transparent;
    border-color: var(--bd);
    color: var(--tx);
    font-weight: 500;
    transition: background .15s, border-color .15s, color .15s;
  }
  .actions .btn svg { color: var(--tx55); }
  .actions .btn:hover {
    background: #fff;
    border-color: var(--bd2);
  }
  .actions .btn.is-active,
  .actions .btn:active {
    background: #000;
    color: #fff;
    border-color: #000;
  }
  .actions .btn.is-active svg,
  .actions .btn:active svg { color: #fff; }
  /* topbar-label-btn already adds the side padding for icon+label;
     reset its right-padding so it matches the rest of the row. */
  .actions .btn.topbar-label-btn { padding: 0 12px; }

  /* Generate report — primary CTA. Filled --app, soft shadow,
     keeps the gen-hint badge for the gated state. */
  #generate-btn {
    height: 32px;
    line-height: 30px;
    padding: 0 13px 0 10px;
    border-radius: 10px;
    background: var(--app);
    border: 1px solid var(--app);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(50, 126, 88, .25);
    gap: 8px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  #generate-btn:hover {
    background: var(--app-strong);
    border-color: var(--app-strong);
    box-shadow: 0 2px 6px rgba(50, 126, 88, .32);
  }
  #generate-btn .gdocs-icon { width: 15px; height: 15px; flex-shrink: 0; }
  #generate-btn > svg:not(.gdocs-icon) {
    width: 12px; height: 12px;
    color: rgba(255,255,255,.85);
  }
  /* Gated state — keeps the same height, dims to the field colour. */
  #generate-btn.btn-gate {
    background: var(--field-bg);
    color: var(--tx55);
    border-color: var(--bd2);
    box-shadow: none;
  }
  #generate-btn.btn-gate .gdocs-icon { opacity: .5; }
  #generate-btn.btn-gate > svg:not(.gdocs-icon) { color: var(--tx40); }
  #generate-btn.btn-gate:hover {
    background: var(--tx10);
    border-color: var(--tx20);
    color: var(--tx70);
  }

  /* ───── Main split ───────────────────────────────────────── */
  /* Chat / editor ratio is 1fr / 2fr so the editor (right pane) gets
     ~67% of the workspace — the OT spends most of their time there
     reviewing/editing the report, not in the chat. */
  .main { flex: 1; display: grid; grid-template-columns: 1fr 2fr; min-height: 0; }

  /* ───── Chat panel (left) ───────────────────────────────── */
  /* min-width: 0 prevents this grid item's intrinsic min-content
     from pushing the columns away from the 1fr/2fr ratio — without
     it, message bubbles can grow the chat column wider than 1fr and
     the topbar (which uses the same ratio) would no longer line up. */
  .chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 3.5px 21.5px 5.5px 7px; }
  .chat-scroll {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column;
    gap: 12.5px; padding: 21.5px 3.5px 16px 3.5px;
    scroll-behavior: smooth;
  }

  .session-marker {
    align-self: stretch;
    display: flex; align-items: center; gap: 9px;
    margin: 2px 0 3.5px 0;
    font-size: 10.5px; font-weight: 500;
    color: var(--tx40);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .session-marker::before,
  .session-marker::after {
    content: ""; flex: 1; height: 1px; background: var(--bd);
  }

  /* User-message row holds the bubble + a circular initials avatar
     on the outer (right) edge — matches the workspace sidebar's
     lime avatar so the OT sees the same identity chip everywhere. */
  .msg-user-row {
    align-self: flex-end;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    max-width: 90%;
  }
  .msg-user-row .msg-user {
    align-self: auto;
    max-width: none;
  }
  .msg-user-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #d4f564;
    color: #0a0a0a;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700;
    flex-shrink: 0;
    letter-spacing: -.02em; line-height: 1;
  }
  .msg-user {
    align-self: flex-end; max-width: 82%;
    background: var(--card); border: 1px solid var(--bd2);
    border-radius: 14.5px 14.5px 3.5px 14.5px;
    padding: 10px 14.5px;
    font-size: 12px; color: var(--tx);
    box-shadow: var(--shadow-sm);
  }
  .msg-user.voice {
    background: linear-gradient(180deg, #f4eef8 0%, #ede4f5 100%);
    border-color: var(--voice-bd);
    max-width: 88%;
  }
  .msg-user.voice .voice-head {
    display: flex; align-items: center; gap: 6.5px;
    font-size: 10px; font-weight: 600;
    color: var(--voice);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 6.5px;
  }
  .msg-user.voice .voice-head svg { width: 11px; height: 11px; }
  .msg-user.voice .voice-head .meta {
    color: var(--tx40); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: auto;
  }
  .msg-user.voice .voice-body {
    font-size: 12px; line-height: 1.55; color: var(--tx70);
  }
  .msg-user.voice .voice-body em {
    background: rgba(109,76,176,.10);
    color: var(--voice); font-style: normal; font-weight: 500;
    padding: 1px 3.5px; border-radius: 3.5px;
  }

  .msg-asst {
    align-self: flex-start; max-width: 88%;
    background: #ececec;
    border: 1px solid var(--bd2);
    border-radius: 14.5px 14.5px 14.5px 3.5px;
    padding: 10px 14.5px;
    font-size: 12px; color: #222;
    line-height: 1.55;
  }
  .msg-asst strong { color: var(--tx); font-weight: 600; }
  .msg-asst .asst-list {
    margin: 5.5px 0 0 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 2.5px;
  }
  .msg-asst .asst-list li {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 11.5px; color: var(--tx70);
  }
  .msg-asst .asst-list li svg { flex: 0 0 12.5px; margin-top: 2px; }
  .msg-asst .asst-list li.warn svg { color: var(--warn); }
  .msg-asst .asst-list li.ok svg { color: var(--app); }
  .msg-asst .asst-list li.info svg { color: var(--info); }

  .msg-tool {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--card); border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 6.5px 12.5px 6.5px 7px;
    font-size: 11px; font-weight: 500; color: var(--tx70);
    box-shadow: var(--shadow-sm);
    max-width: 100%;
  }
  .msg-tool .tool-icon {
    width: 18px; height: 18px;
    display: grid; place-items: center;
    background: var(--app-dim); color: var(--app);
    border-radius: 5.5px;
  }
  .msg-tool .tool-icon svg { width: 11px; height: 11px; }
  .msg-tool .tool-meta { color: var(--tx40); font-weight: 400; padding-left: 2px; }

  .typing-dots { display: inline-flex; gap: 2.5px; padding: 0 3.5px; }
  .typing-dots span {
    width: 4.5px; height: 4.5px; border-radius: 50%;
    background: var(--tx40);
    animation: typing 1.2s infinite ease-in-out;
  }
  .typing-dots span:nth-child(2) { animation-delay: .15s; }
  .typing-dots span:nth-child(3) { animation-delay: .30s; }
  @keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-2.5px); opacity: 1; }
  }

  .msg-suggest {
    align-self: flex-start;
    display: flex; flex-wrap: wrap; gap: 5.5px;
    margin-top: -2px;
  }
  .chip-suggest {
    padding: 5.5px 11px;
    background: var(--card); border: 1px solid var(--bd);
    border-radius: 999px;
    font-size: 11px; color: var(--tx70);
    cursor: pointer;
    font-family: inherit;
  }
  .chip-suggest:hover { color: var(--tx); border-color: var(--bd2); }
  .chip-suggest.primary { background: var(--app); color: #fff; border-color: var(--app); font-weight: 500; }
  .chip-suggest.warn   { background: var(--warn-dim); color: var(--warn); border-color: rgba(192,87,59,.25); }
  .chip-suggest.voice  { background: var(--voice-dim); color: var(--voice); border-color: var(--voice-bd); }

  /* Composer */
  .composer {
    margin-top: 3.5px;
    background: var(--card); border: 1px solid var(--bd);
    border-radius: 16px;
    padding: 11px 11px 9px 14.5px;
    box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; gap: 7px;
  }
  .composer.listening {
    border-color: var(--app-bd);
    box-shadow: 0 0 0 3.5px var(--app-dim), var(--shadow-md);
  }
  .composer-input {
    border: 0; outline: none; background: transparent;
    width: 100%; font-family: inherit; font-size: 12.5px;
    color: var(--tx); padding: 5.5px 0; line-height: 1.5;
    /* Single-line look by default; JS auto-grows up to 5 rows. */
    resize: none;
    overflow-y: hidden;
    min-height: 22px;
    max-height: 130px;
    display: block;
  }
  .composer-input::placeholder { color: var(--tx40); }
  .composer-row { display: flex; justify-content: space-between; align-items: center; }
  .composer-tools { display: flex; gap: 3.5px; }
  .composer-tool {
    width: 27px; height: 27px; border-radius: 7px;
    display: grid; place-items: center;
    color: var(--tx55); cursor: pointer;
    border: 1px solid transparent; background: transparent;
  }
  .composer-tool:hover { background: var(--tx10); }
  .composer-tool svg { width: 14.5px; height: 14.5px; }
  .composer-tool.dictate-active {
    background: var(--app); color: #fff;
  }
  .send {
    width: 30.5px; height: 30.5px; border-radius: 999px;
    background: #1a1a18; color: #fff; border: 0; cursor: pointer;
    display: grid; place-items: center;
  }
  .send svg { width: 12.5px; height: 12.5px; }
  .dictate-cta {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6.5px 11px;
    background: var(--voice-dim); color: var(--voice);
    border: 1px solid var(--voice-bd);
    border-radius: 999px;
    font-size: 11px; font-weight: 500;
    font-family: inherit; cursor: pointer;
  }
  .dictate-cta:hover { background: rgba(109,76,176,.15); }
  .dictate-cta svg { width: 12.5px; height: 12.5px; }
  /* Subtler variant for the single-utterance quick-dictate. Same shape, less
     chroma — keeps the "Dictate session" CTA visually primary while still
     labelling the quick action. */
  .dictate-cta--quick {
    background: var(--tx10);
    color: var(--tx70);
    border-color: var(--bd);
  }
  .dictate-cta--quick:hover { background: rgba(26,26,24,.07); color: var(--tx); }
  .dictate-cta--quick.dictate-active,
  .dictate-cta.dictate-active {
    background: var(--app);
    border-color: var(--app);
    color: #fff;
  }

  .dictate-status {
    display: none;
    align-items: center; gap: 9px;
    padding: 0 2px;
    font-size: 11px; color: var(--app-strong);
  }
  .composer.listening .dictate-status { display: flex; }
  .dictate-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 12.5px; }
  .dictate-bars span {
    display: block; width: 2px; border-radius: 1px;
    background: var(--app);
    animation: bars 0.9s infinite ease-in-out;
  }
  .dictate-bars span:nth-child(1) { height: 30%; animation-delay: 0s; }
  .dictate-bars span:nth-child(2) { height: 80%; animation-delay: .12s; }
  .dictate-bars span:nth-child(3) { height: 55%; animation-delay: .24s; }
  .dictate-bars span:nth-child(4) { height: 95%; animation-delay: .36s; }
  .dictate-bars span:nth-child(5) { height: 40%; animation-delay: .48s; }
  @keyframes bars {
    0%, 100% { transform: scaleY(.6); }
    50% { transform: scaleY(1.4); }
  }

  /* ───── Artifact panel (right) ───────────────────────────── */
  /* min-width: 0 — see matching note on .chat. Together these keep
     the .main grid honouring its 1fr/2fr ratio, so the topbar
     (which uses the same ratio) lines up above the editor. */
  .artifact-wrap { padding: 0 5.5px 0 5.5px; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
  .artifact {
    flex: 1; background: var(--card); border: 1px solid var(--bd);
    border-radius: 16px; box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  }

  .artifact-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14.5px;
    border-bottom: 1px solid var(--bd);
  }
  /* AT-style tab rail — the artifact-head now hosts both the unified
     .summary-tabs strip on the left and the head-right action chips. */
  .artifact-head.artifact-head--tabs {
    padding: 4px 9px 0;
    align-items: flex-end;
    background: linear-gradient(180deg, #fbfaf5 0%, #f6f4ee 100%);
    gap: 9px;
  }
  .artifact-head--tabs .summary-tabs {
    flex: 1; min-width: 0;
    margin: 0; padding: 0;
    background: transparent;
    border-bottom: 0;
    position: static;
    top: auto;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .artifact-head--tabs .head-right { padding-bottom: 7px; }
  .artifact-head--tabs .summary-tab .badge {
    background: var(--warn); color: #fff;
    border-radius: 999px; min-width: 14px; height: 14px;
    display: inline-grid; place-items: center;
    font-size: 9px; padding: 0 4.5px;
  }

  .head-right { display: flex; align-items: center; gap: 7px; }
  .outstanding-chip {
    display: inline-flex; align-items: center; gap: 6.5px;
    background: var(--warn-dim);
    color: var(--warn);
    border: 1px solid rgba(192,87,59,.18);
    padding: 4.5px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
  }
  .outstanding-chip svg { width: 11.5px; height: 11.5px; }
  .outstanding-chip .badge {
    background: var(--warn); color: #fff;
    border-radius: 999px; min-width: 16px; height: 16px;
    display: inline-grid; place-items: center;
    font-size: 10px; padding: 0 4.5px;
  }
  /* One-shot celebration pulse when the chip transitions from
     "N fields outstanding" to "All required fields captured". */
  .outstanding-chip.flash-ready {
    animation: chipReadyPulse 1.8s ease-out 1;
  }
  @keyframes chipReadyPulse {
    0%   { box-shadow: 0 0 0 0 var(--app-bd); transform: scale(1); }
    35%  { box-shadow: 0 0 0 14px transparent; transform: scale(1.04); }
    100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
  }

  .outstanding-chip.complete {
    background: var(--app-dim); color: var(--app-strong);
    border-color: var(--app-bd);
  }
  .outstanding-chip.complete .badge { background: var(--app); }

  .ico-btn {
    width: 27px; height: 27px; border-radius: 7px;
    display: grid; place-items: center;
    cursor: pointer; color: var(--tx55);
    border: 1px solid transparent;
    /* Without this the button falls back to the UA default light-grey button
       background — invisible-ish in light mode but a stark light square with an
       unreadable icon in dark mode (the trash button on each assessment card). */
    background: transparent;
  }
  .ico-btn:hover { background: var(--tx10); border-color: var(--bd); }
  .ico-btn svg { width: 14.5px; height: 14.5px; }

  /* Outstanding tray */
  .outstanding-tray {
    border-bottom: 1px solid var(--bd);
    background: linear-gradient(180deg, #fdf6f3 0%, #fbf2ee 100%);
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease-out;
  }
  .outstanding-tray.open { max-height: 252px; }
  .outstanding-tray .tray-inner { padding: 12.5px 20px 14.5px 20px; }
  .tray-title {
    font-size: 11px; font-weight: 600; color: var(--warn);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 9px;
  }
  .tray-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
  .tray-item {
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(192,87,59,.18);
    border-radius: 9px;
    padding: 8px 11px;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
    transition: background .15s, border-color .15s;
  }
  .tray-item:hover { background: #fff; border-color: var(--warn); }
  .tray-item .field { font-size: 11px; font-weight: 600; color: var(--tx); }
  .tray-item .hint  { font-size: 10.5px; color: var(--tx55); }

  /* ───── Dictation routing banner ─────────────────────── */
  .dict-banner {
    position: relative;
    background: linear-gradient(180deg, #f4eef8 0%, #ede4f5 100%);
    border-bottom: 1px solid var(--voice-bd);
    padding: 16px 20px 14.5px 20px;
    overflow: hidden;
    display: none;
  }
  .dict-banner.show { display: block; }
  .dict-banner::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--voice), #b08fe0, var(--voice));
  }
  .dict-banner-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
  .dict-banner-title {
    display: flex; align-items: center; gap: 9px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    font-weight: 500; font-size: 17px; color: var(--tx);
  }
  .dict-banner-title .ico {
    width: 23.5px; height: 23.5px;
    background: var(--voice); color: #fff;
    border-radius: 6.5px;
    display: grid; place-items: center;
  }
  .dict-banner-title .ico svg { width: 12.5px; height: 12.5px; }
  .dict-banner-title .sub {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    font-size: 11px; font-weight: 500;
    color: var(--voice);
    background: rgba(255,255,255,.7);
    padding: 2.5px 8px; border-radius: 999px;
    margin-left: 3.5px;
  }
  .dict-banner-title .sub.allclear {
    color: var(--app-strong);
    background: var(--app-dim);
  }
  .dict-banner-dismiss {
    background: rgba(255,255,255,.7);
    border: 1px solid var(--voice-bd);
    color: var(--voice);
    padding: 4.5px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 500; font-family: inherit;
    cursor: pointer;
  }
  .dict-banner-dismiss:hover { background: #fff; }
  .dict-banner-routing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .route-item {
    background: rgba(255,255,255,.7);
    border: 1px solid var(--bd);
    border-radius: 9px;
    padding: 9px 12.5px 9px 11px;
    display: flex; align-items: center; gap: 9px;
    transition: background .3s, border-color .3s;
  }
  .route-item.attention { border-color: rgba(192,87,59,.30); background: rgba(255,247,243,.85); }
  .route-item.resolving {
    background: rgba(50,126,88,.10) !important;
    border-color: var(--app-bd) !important;
  }
  .route-icon {
    width: 20px; height: 20px;
    border-radius: 5.5px;
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: background .3s, color .3s;
  }
  .route-icon svg { width: 11px; height: 11px; }
  .route-icon.ok   { background: var(--app-dim); color: var(--app); }
  .route-icon.warn { background: var(--warn-dim); color: var(--warn); }
  .route-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .route-text .t1 { font-size: 11.5px; font-weight: 600; color: var(--tx); }
  .route-text .t2 { font-size: 11px; color: var(--tx55); }
  .route-item .jump {
    margin-left: auto;
    font-size: 10.5px; color: var(--voice); font-weight: 500;
    cursor: pointer; white-space: nowrap;
  }
  .route-item.attention .jump { color: var(--warn); }

  /* Artifact body */
  .artifact-body { overflow-y: auto; flex: 1; padding: 18px 32.5px 32px 32.5px; }

  /* In-tab hint sub-paragraph — quick context for how to fill the section */
  .section-hint {
    font-size: 11px;
    color: var(--tx55);
    line-height: 1.5;
    margin: -3.5px 0 12.5px 9px;
    max-width: 60ch;
  }
  .section-hint a { color: var(--app-strong); text-decoration: underline dotted; }
  .section-hint a:hover { color: var(--app); }

  /* ───── Summary view: section tabs ─────
     Now lives inside .artifact-head, persists across all 6 surfaces.
     overflow-x:auto keeps the strip scrollable as a fallback when the
     viewport is too narrow, but the scrollbar itself is hidden via
     scrollbar-width:none + ::-webkit-scrollbar so it doesn't sit under
     the tabs on macOS / Linux. */
  .summary-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .summary-tabs::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .summary-tab {
    position: relative;
    border: 1px solid transparent;
    border-bottom: 0;
    background: transparent;
    padding: 9px 11px 10px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--tx55);
    cursor: pointer;
    border-radius: 9px 9px 0 0;
    margin-bottom: -1px;     /* overlap the row's bottom border so active tab "connects" */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
  }
  .summary-tab:hover {
    color: var(--tx);
    background: rgba(26,26,24,.05);
  }
  .summary-tab.active {
    background: var(--card);
    color: var(--tx);
    font-weight: 600;
    border-color: var(--bd);
    border-bottom-color: var(--card);
    box-shadow: 0 -1px 2px rgba(26,26,24,.03);
  }
  .summary-tab.active:hover { background: var(--card); }
  .summary-tab .tab-dot {
    width: 6.5px; height: 6.5px;
    border-radius: 50%;
    background: var(--tx20);
    flex-shrink: 0;
  }
  .summary-tab.tab-done    .tab-dot { background: var(--app); }
  .summary-tab.tab-partial .tab-dot { background: var(--warn); }
  .summary-tab.tab-empty   .tab-dot { background: var(--tx20); }
  /* Transient pulse when extraction lands new content under a tab the OT
     isn't looking at — gives them a glanceable cue beyond the chat tool
     message. Added by applyExtractionResult, auto-removed after the run. */
  .summary-tab.tab-just-updated .tab-dot {
    animation: tabJustUpdatedPulse 1.8s ease-in-out 2;
  }
  @keyframes tabJustUpdatedPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--app); transform: scale(1); }
    50%      { box-shadow: 0 0 0 5px transparent; transform: scale(1.6); }
  }
  /* Match pulse on a freshly-extracted assessment card so OTs already
     viewing the Assessments view see *which* card lit up. */
  .ax-card.ax-card-just-updated {
    animation: axCardJustUpdatedPulse 1.6s ease-in-out 1;
  }
  @keyframes axCardJustUpdatedPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
    40%      { box-shadow: 0 0 0 3px var(--app); }
  }

  /* Hide non-active tab content. .active-tab is added by switchSummaryTab. */
  #view-summary .summary-section[data-section] { display: none; }
  #view-summary .summary-section[data-section].active-tab { display: block; }
  /* Drop the section's outer top border once it's the only thing on screen.
     Keep the section-head visible so the OT still sees the in-tab status
     badge ("3 of 6 required") and can hover for the missing-fields tooltip. */
  #view-summary .summary-section.active-tab { border-top: 0; padding-top: 0; }
  /* Disable the section's collapse toggle inside a tab — clicking the h2
     would otherwise hide everything and there's no second section to switch to. */
  #view-summary .summary-section.active-tab .sh-toggle { display: none; }
  #view-summary .summary-section.active-tab .summary-section-head { cursor: default; }

  @media (max-width: 700px) {
    .summary-tab { padding: 7px 11px 9px; font-size: 11px; }
  }

  /* Mobile section dropdown — replaces the horizontal-scrolling tab strip
     under 700px viewport. Native <select> is the right primitive: it gets
     the system picker (sheet on iOS, dropdown elsewhere), keyboard nav,
     and accessibility for free. Hidden on desktop. */
  .summary-tab-select {
    display: none;
    width: 100%;
    padding: 9px 14px;
    margin: 0 0 14px 0;
    background: var(--card);
    border: 1px solid var(--bd2);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px; font-weight: 500;
    color: var(--tx);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231a1a18' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 9px 6px;
    padding-right: 36px;
  }
  @media (max-width: 700px) {
    .summary-tabs { display: none; }
    .summary-tab-select { display: block; }
  }

  /* ───── Summary view ───── */
  .body-h1 {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    font-weight: 500; font-size: 27px;
    line-height: 1.1; letter-spacing: -0.015em;
    margin: 0 0 3.5px 0;
    display: flex; align-items: center; gap: 11px;
  }
  .body-h1 .h1-meta {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    font-size: 11px; font-weight: 500;
    color: var(--tx55);
    background: var(--tx10);
    padding: 2.5px 8px; border-radius: 999px;
    margin-left: 3.5px;
  }
  .body-sub { font-size: 12px; color: var(--tx55); margin: 0 0 20px 0; }

  .summary-section {
    border-top: 1px solid var(--bd);
    padding: 16px 0;
  }
  .summary-section:first-of-type { border-top: 0; padding-top: 3.5px; }
  .summary-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 9px;
    cursor: pointer;
  }
  .sh-left { display: flex; align-items: center; gap: 9px; }
  .sh-left h2 {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    font-weight: 500; font-size: 17px; margin: 0;
  }
  .sh-status {
    display: inline-flex; align-items: center; gap: 4.5px;
    font-size: 10.5px; font-weight: 500;
    padding: 2px 7px; border-radius: 999px;
  }
  .sh-status.done    { background: var(--app-dim); color: var(--app-strong); }
  .sh-status.partial { background: var(--warn-dim); color: var(--warn); }
  .sh-status.empty   { background: var(--tx10); color: var(--tx55); }
  .sh-status svg { width: 10px; height: 10px; }
  .sh-toggle { color: var(--tx40); transition: transform .15s; }
  .summary-section.collapsed .sh-toggle { transform: rotate(-90deg); }
  .summary-section.collapsed .row-list { display: none; }
  .summary-section.locked { opacity: .55; }

  .row-list { display: flex; flex-direction: column; gap: 1px; }
  .row {
    display: grid;
    grid-template-columns: 162px 1fr auto;
    gap: 14.5px;
    padding: 6px 9px 6px 0;
    align-items: center;
    border-radius: 7px;
    cursor: text;
    transition: background .12s;
    position: relative;
  }
  .row:hover { background: var(--field-bg); }
  .row.from-chat::before {
    content: "";
    position: absolute;
    left: -9px; top: 7px; bottom: 7px;
    width: 2px;
    background: var(--chat-fill-bd);
    border-radius: 2px;
  }
  .row .row-label {
    font-size: 11px; color: var(--tx55); font-weight: 500;
    padding-left: 9px;
  }
  .row .row-label .req { color: var(--warn); }

  /* "Not applicable" pill — currently only the currentAT row. Mirrors
     v1's _atNotApplicable toggle: when active the row reads "Nil — no
     current AT", clicking the row no longer opens the editor, and the
     translator emits the v1 __AT_NA__ sentinel so the backend prompt +
     template both say "no assistive technology currently in use". */
  .row-na-toggle {
    margin-left: 7px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid var(--bd2);
    color: var(--tx55);
    border-radius: 4px;
    font-size: 9.5px; font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1.65;
    transition: background .12s, color .12s, border-color .12s;
  }
  .row-na-toggle:hover { border-color: var(--tx40); color: var(--tx70); }
  .row.na .row-na-toggle {
    background: var(--app);
    border-color: var(--app);
    color: #fff;
  }
  .row.na .row-value {
    color: var(--tx70) !important;
    font-style: normal !important;
    cursor: default;
  }
  .row.na { cursor: default; }
  .row .row-value { font-size: 12.5px; color: var(--tx); line-height: 1.45; }
  .row .row-value.empty { color: var(--tx40); font-style: italic; }
  .row .row-value input,
  .row .row-value textarea {
    width: 100%;
    border: 1px solid var(--app-bd);
    background: #fff;
    border-radius: 5.5px;
    padding: 5.5px 7px;
    font-family: inherit; font-size: 12.5px;
    color: var(--tx); outline: none;
    box-shadow: 0 0 0 2.5px rgba(50,126,88,.10);
  }
  .row .row-value textarea { resize: vertical; min-height: 54px; }
  .row .row-meta {
    font-size: 9.5px; font-weight: 500;
    color: var(--app-strong);
    background: var(--app-dim);
    padding: 2px 6.5px; border-radius: 999px;
    white-space: nowrap;
  }
  .row .row-meta.voice {
    color: var(--voice);
    background: var(--voice-dim);
  }
  .row-ndis-warn {
    font-size: 9.5px; font-weight: 500;
    color: var(--warn);
    background: var(--warn-dim);
    border: 1px solid rgba(192,87,59,.30);
    padding: 2px 6.5px; border-radius: 999px;
    white-space: nowrap;
    margin-left: 7px;
    justify-self: start;
  }
  .row-ndis-warn.valid {
    color: var(--app-strong);
    background: var(--app-dim);
    border-color: var(--app-bd);
  }
  .sh-progress {
    height: 2.5px;
    background: var(--tx10);
    border-radius: 999px;
    margin-top: 7px;
    overflow: hidden;
  }
  .sh-progress > span {
    display: block;
    height: 100%;
    background: var(--app);
    border-radius: 999px;
    transition: width .25s ease;
  }
  .sh-progress.empty > span { background: var(--tx40); }
  .sh-progress.partial > span { background: var(--warn); }

  /* ───── Selected-tools toolbar (v1 parity) ─────
     Sits between the Assessments view heading and the standardised
     reports upload. Pills jump to the matching scoring card and carry
     an inline status badge + close action. The trailing "+ Add" pill
     opens the assessment chooser. */
  .ax-toolbar {
    background: var(--card); border: 1px solid var(--bd);
    border-radius: 12.5px;
    padding: 13px 16px 14px;
    margin: 6px 0 18px;
    box-shadow: var(--shadow-sm);
  }
  .ax-toolbar-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 11px;
  }
  .ax-toolbar-title {
    font-size: 12.5px; font-weight: 600; color: var(--tx);
    display: inline-flex; align-items: center; gap: 7px;
  }
  .ax-toolbar-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: 999px;
    background: var(--app); color: #fff;
    font-size: 10.5px; font-weight: 700;
  }
  .ax-toolbar-clear {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 11px; color: var(--tx55);
    text-decoration: underline;
  }
  .ax-toolbar-clear:hover { color: var(--tx); }
  .ax-toolbar-pills { display: flex; flex-wrap: wrap; gap: 7px 8px; }
  .ax-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 5px 5px 13px;
    background: var(--field-bg);
    border: 1px solid var(--bd);
    border-radius: 999px;
    font-family: inherit; font-size: 11.5px; font-weight: 600;
    color: var(--tx); cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s;
  }
  .ax-pill:hover { border-color: var(--app-bd); transform: translateY(-1px); }
  .ax-pill-name { white-space: nowrap; }
  .ax-pill-status {
    display: inline-flex; align-items: center;
    padding: 1.5px 8px;
    border-radius: 999px;
    background: var(--bd);
    color: var(--tx55);
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .ax-pill-status.partial { background: rgba(192,87,59,.15); color: #b9551e; }
  .ax-pill-status.filled  { background: var(--app-dim); color: var(--app-strong); }
  .ax-pill-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 19px; height: 19px;
    border-radius: 999px;
    background: transparent; color: var(--tx55);
    font-size: 14px; line-height: 1;
    cursor: pointer;
  }
  .ax-pill-x:hover { background: var(--bd); color: var(--tx); }
  .ax-pill-add {
    background: var(--app-dim);
    border: 1px dashed var(--app-bd);
    color: var(--app-strong);
    padding: 5px 13px;
  }
  .ax-pill-add:hover { background: var(--app-dim); border-color: var(--app-strong); }
  .ax-pill-add svg { width: 12px; height: 12px; stroke-width: 2.5; }

  /* Compact upload variant — used by the Standardised assessment
     reports card in the Assessments view to keep the dropzone at ~2
     lines of visual height so it doesn't dominate above the scoring
     cards. */
  .subgroup-compact .upload-area-compact {
    padding: 9px 13px;
    gap: 6px;
    border-radius: 9px;
    margin-top: 4px;
  }
  .subgroup-compact .upload-area-compact .upload-area-head { gap: 13px; align-items: center; }
  .subgroup-compact .upload-area-compact .hint { flex: 1; line-height: 1.4; }

  /* ───── Assessments cards ───── */
  .ax-card {
    background: var(--card); border: 1px solid var(--bd);
    border-radius: 12.5px;
    padding: 18px 20px;
    margin-bottom: 14.5px;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: border-color .15s, box-shadow .4s;
  }
  .ax-card:hover { border-color: var(--bd2); }
  .ax-card.partial { border-color: rgba(192,87,59,.22); background: linear-gradient(180deg, #fdf8f5 0%, #fff 50%); }
  /* Partial-only elements (e.g. DASS "convert to depression-only note") are
     hidden unless the card is in the partial state — they're irrelevant for
     a brand-new empty card. */
  .ax-card:not(.partial) #dass-paused-msg,
  .ax-card:not(.partial) #dass-actions { display: none; }
  .ax-card.empty   { border-style: dashed; background: var(--field-bg); }
  .ax-card.scheduled { background: var(--app-soft, #eef4ee); }

  .ax-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 11px; margin-bottom: 14.5px;
  }
  .ax-card-title { display: flex; align-items: center; gap: 9px; }
  .ax-card-title .ax-ico {
    width: 25px; height: 25px;
    background: var(--app-dim); color: var(--app);
    border-radius: 7px;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .ax-card-title .ax-ico svg { width: 12.5px; height: 12.5px; }
  .ax-card.partial .ax-card-title .ax-ico { background: var(--warn-dim); color: var(--warn); }
  .ax-card.empty   .ax-card-title .ax-ico { background: var(--tx10); color: var(--tx55); }
  .ax-card-title h3 {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    font-weight: 500; font-size: 18px;
  }
  .ax-card-title .ax-sub {
    font-size: 11px; color: var(--tx55);
    margin-top: 2px;
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  }
  .ax-card-title .ax-sub .dot { color: var(--tx20); }

  .ax-source {
    display: inline-flex; align-items: center; gap: 5.5px;
    background: var(--voice-dim); color: var(--voice);
    padding: 3.5px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 500;
    border: 1px solid var(--voice-bd);
  }
  .ax-source svg { width: 10px; height: 10px; }
  .ax-source.empty { background: var(--tx10); color: var(--tx55); border-color: var(--bd); }

  /* Score table */
  .score-table {
    display: grid;
    grid-template-columns: 1.4fr 72px 1.6fr 25px;
    gap: 7px 12.5px;
    align-items: center;
    margin-bottom: 12.5px;
  }
  .score-table .sh {
    font-size: 10px; font-weight: 600;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding-bottom: 3.5px;
    border-bottom: 1px solid var(--bd);
  }
  .score-row { display: contents; }
  .score-label { font-size: 12px; color: var(--tx); padding: 5.5px 0; }
  .score-label .req { color: var(--warn); margin-left: 2.5px; }
  .score-input {
    display: inline-flex; align-items: baseline; gap: 3.5px;
    background: var(--field-bg);
    border: 1px solid var(--field-bd);
    border-radius: 7px; padding: 4.5px 7px;
    width: fit-content;
  }
  .score-input input {
    width: 27px; border: 0; background: transparent;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    color: var(--tx); outline: none; text-align: right;
    padding: 0;
  }
  /* Drop the native spinner arrows from every assessment score field —
     the OT types or pastes scores; the inc/dec arrows add clutter and
     introduce slips when the OT scrolls a long card. Targeting all
     number inputs inside any assessment card covers both .score-input
     (LSP / MoCA / CANS / WHODAS etc.) and .mc-input (ABAS-3, Vineland,
     PEDI-CAT, SP2, D-REF) in one rule. */
  .ax-card input[type="number"]::-webkit-outer-spin-button,
  .ax-card input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  .ax-card input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
  .score-input.from-voice { background: var(--voice-dim); border-color: var(--voice-bd); }
  .score-input .unit { font-size: 10.5px; color: var(--tx55); }
  .score-input.empty input { color: var(--tx40); }

  .sev { display: flex; align-items: center; gap: 8px; }
  .sev-bar {
    flex: 1; height: 5.5px;
    background: var(--tx10);
    border-radius: 999px;
    overflow: hidden; position: relative;
    max-width: 99px;
  }
  .sev-bar > span {
    display: block; height: 100%;
    border-radius: 999px;
    transition: width .2s, background .2s;
  }
  .sev-label { font-size: 11px; font-weight: 600; min-width: 63px; }
  .sev-pct { color: var(--tx55); font-weight: 500; white-space: nowrap; }
  .sev-none  > .sev-bar > span { background: var(--sev-none); }
  .sev-mild  > .sev-bar > span { background: var(--sev-mild); }
  .sev-mod   > .sev-bar > span { background: var(--sev-mod); }
  .sev-sev   > .sev-bar > span { background: var(--sev-sev); }
  .sev-ext   > .sev-bar > span { background: var(--sev-ext); }
  .sev-none  > .sev-label { color: var(--sev-none); }
  .sev-mild  > .sev-label { color: var(--sev-mild); }
  .sev-mod   > .sev-label { color: var(--sev-mod); }
  .sev-sev   > .sev-label { color: var(--sev-sev); }
  .sev-ext   > .sev-label { color: var(--sev-ext); }
  .sev-empty { font-size: 11px; color: var(--tx40); font-style: italic; }

  .ax-row-meta { display: grid; place-items: center; color: var(--tx40); }
  .ax-row-meta svg { width: 11px; height: 11px; }

  .score-row.overall .score-label { padding-top: 11px; border-top: 1px solid var(--bd); font-weight: 600; }
  .score-row.overall .score-input,
  .score-row.overall .sev,
  .score-row.overall .ax-row-meta { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--bd); }

  .ax-items-panel {
    margin-top: 11px;
    border: 1px solid var(--field-bd);
    border-radius: 9px;
    background: var(--card);
    overflow: hidden;
  }
  .ax-items-panel summary {
    cursor: pointer;
    padding: 9px 12.5px;
    background: var(--field-bg);
    font-size: 11.5px; font-weight: 500;
    display: flex; justify-content: space-between; align-items: center;
    user-select: none;
  }
  .ax-items-panel summary::-webkit-details-marker { display: none; }
  .ax-items-panel .ax-items-pill {
    font-size: 10px; font-weight: 600;
    color: var(--tx55);
    background: var(--card);
    border: 1px solid var(--field-bd);
    padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .ax-items-panel[open] .ax-items-pill { color: var(--app-strong); border-color: var(--app-bd); background: var(--app-dim); }
  .ax-items-panel .ax-items-hint {
    margin: 9px 12.5px 0 12.5px;
    font-size: 11px; color: var(--tx55); line-height: 1.5;
  }
  .ax-items-group-h {
    margin: 11px 12.5px 3.5px 12.5px;
    font-size: 9.5px; font-weight: 700;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .ax-items-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5.5px 12.5px;
    padding: 7px 12.5px 12.5px 12.5px;
  }
  .ax-item-field {
    display: grid;
    grid-template-columns: 1fr 57.5px;
    align-items: center;
    gap: 9px;
    padding: 3.5px 0;
  }
  .ax-item-field label {
    font-size: 11px;
    color: var(--tx);
    line-height: 1.35;
  }
  .ax-item-field input {
    padding: 4.5px 7px;
    text-align: center;
    border: 1px solid var(--field-bd);
    border-radius: 5.5px;
    background: var(--field-bg);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
  }
  .ax-item-field input:focus {
    outline: none;
    border-color: var(--app);
    background: var(--card);
  }
  @media (max-width: 720px) {
    .ax-items-grid { grid-template-columns: 1fr; }
  }

  .ax-comments {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--bd);
  }
  .ax-comments-label {
    display: block;
    margin-bottom: 5.5px;
    font-size: 10.5px; font-weight: 700;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .ax-comments-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tx40);
  }
  .ax-comments-input {
    width: 100%;
    font-family: inherit;
    font-size: 12px;
    padding: 7px 9px;
    border: 1px solid var(--field-bd);
    border-radius: 5.5px;
    background: var(--field-bg);
    color: var(--tx);
    resize: vertical;
    min-height: 48px;
  }
  .ax-comments-input:focus {
    outline: none;
    border-color: var(--app);
    background: var(--card);
  }

  /* .ax-interp — legacy clinical-interpretation block, replaced by
     .ax-comments above. Kept here in case any WHODAS/DASS/LSP card
     still references it. */
  .ax-interp {
    margin-top: 3.5px;
    padding: 12.5px 14.5px;
    background: var(--field-bg);
    border: 1px solid var(--field-bd);
    border-radius: 9px;
  }
  .ax-interp.from-voice {
    background: linear-gradient(180deg, #f9f4fd 0%, #f3ebf9 100%);
    border-color: var(--voice-bd);
  }
  .ax-interp-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 7px;
  }
  .ax-interp-head .label {
    font-size: 10.5px; font-weight: 600;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .ax-interp-head .source {
    font-size: 10px; color: var(--voice);
    background: rgba(255,255,255,.7);
    padding: 2px 7px; border-radius: 999px;
    border: 1px solid var(--voice-bd);
    font-weight: 500;
  }
  .ax-interp p {
    font-size: 12px; line-height: 1.6;
    color: var(--tx); margin: 0;
  }
  .ax-interp p + p { margin-top: 7px; }

  .ax-empty-msg {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 12.5px;
    background: rgba(255,255,255,.7);
    border-radius: 9px;
    border: 1px solid var(--bd);
    font-size: 11.5px; color: var(--tx70);
    line-height: 1.5;
    margin-bottom: 11px;
  }
  .ax-empty-msg .ico {
    width: 18px; height: 18px; border-radius: 4.5px;
    background: var(--info-dim); color: var(--info);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .ax-empty-msg .ico svg { width: 11px; height: 11px; }
  .ax-empty-msg strong { color: var(--tx); font-weight: 600; }

  .ax-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12.5px; }

  .add-ax {
    width: 100%; padding: 12.5px;
    background: transparent;
    border: 1.5px dashed var(--bd2);
    border-radius: 12.5px;
    color: var(--tx55);
    font-family: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  }
  .add-ax:hover { background: var(--field-bg); border-color: var(--app-bd); color: var(--app-strong); }
  .add-ax svg { width: 12.5px; height: 12.5px; }

  /* ───── Per-item entry panel (WHODAS / DASS) ─────────── */
  .item-entry {
    margin-top: 12.5px;
    border-top: 1px solid var(--bd);
    padding-top: 11px;
  }
  .item-entry-toggle {
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    background: transparent; border: 0;
    padding: 5.5px 3.5px;
    font-family: inherit; font-size: 11px; font-weight: 600;
    color: var(--tx70); cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .item-entry-toggle:hover { color: var(--tx); }
  .item-entry-toggle svg { width: 12.5px; height: 12.5px; transition: transform .15s; color: var(--tx55); }
  .item-entry.open .item-entry-toggle svg { transform: rotate(180deg); }
  .item-entry-count {
    color: var(--tx55); font-weight: 500;
    text-transform: none; letter-spacing: 0;
    margin-left: 3.5px;
  }
  .item-entry-body {
    display: none;
    margin-top: 7px;
    padding: 9px;
    background: var(--field-bg);
    border-radius: 9px;
  }
  .item-entry.open .item-entry-body { display: block; }
  .item-domain-h {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 9px 3.5px 5.5px;
    font-size: 11px; font-weight: 600;
    color: var(--tx);
  }
  .item-domain-h:first-child { margin-top: 0; }
  .item-domain-sub {
    font-size: 10px; color: var(--tx55);
    font-weight: 500;
  }
  .item-row {
    display: grid; grid-template-columns: 1fr auto;
    gap: 9px;
    padding: 4.5px 3.5px;
    border-radius: 5.5px;
    align-items: center;
    font-size: 11px;
  }
  .item-row:nth-child(even) { background: rgba(255,255,255,.5); }
  .item-text { line-height: 1.4; color: var(--tx); }
  .item-chips { display: inline-flex; gap: 2.5px; }
  .item-chips button {
    width: 23.5px; height: 23.5px;
    border: 1px solid var(--bd);
    background: var(--card);
    border-radius: 5.5px;
    font-family: inherit; font-size: 11px; font-weight: 600;
    color: var(--tx70); cursor: pointer;
  }
  .item-chips button:hover { border-color: var(--bd2); }
  .item-chips button.active {
    background: var(--app); color: #fff; border-color: var(--app);
  }
  .item-legend {
    display: flex; flex-wrap: wrap;
    gap: 4px 10px;
    margin: 4px 4px 8px;
    padding: 6px 10px;
    background: var(--field-bg);
    border: 1px dashed var(--field-bd);
    border-radius: 7px;
    font-size: 10.5px;
    color: var(--tx55);
    line-height: 1.5;
  }
  .item-legend strong {
    color: var(--app-strong);
    font-weight: 700;
    margin-right: 3px;
  }
  .item-legend-cell { white-space: nowrap; }
  .item-hint {
    display: flex; gap: 14px;
    margin-top: 3px;
    font-size: 10px;
    color: var(--tx55);
    font-weight: 400;
    line-height: 1.35;
  }
  .item-hint span:first-child::before { content: '↑ '; color: var(--app); font-weight: 700; }
  .item-hint span:last-child::before  { content: '↓ '; color: var(--warn); font-weight: 700; }
  .item-row.wide { grid-template-columns: 35% 65%; gap: 11px; }
  .item-select-wrap {
    display: flex; align-items: center; gap: 7px;
    min-width: 0;
  }
  .item-select {
    flex: 1; min-width: 0;
    padding: 5.5px 7px;
    border: 1px solid var(--bd2);
    border-radius: 5.5px;
    background: var(--card);
    font-family: inherit; font-size: 11px;
    color: var(--tx); cursor: pointer;
  }
  .item-select:focus { outline: none; border-color: var(--app); }
  .item-select-score {
    min-width: 36px; text-align: right;
    font-size: 11px; font-weight: 600; color: var(--tx55);
    font-variant-numeric: tabular-nums;
  }
  .item-toggle-wrap { display: flex; }
  .item-toggle {
    padding: 4.5px 10px;
    border: 1px solid var(--bd);
    background: var(--card);
    border-radius: 999px;
    font-family: inherit; font-size: 10.5px; font-weight: 600;
    color: var(--tx70); cursor: pointer;
    min-width: 54px;
  }
  .item-toggle:hover { border-color: var(--bd2); }
  .item-toggle.on {
    background: var(--app); color: #fff; border-color: var(--app);
  }
  /* CANS-style explicit Yes / No pair. Reusing the toggle's pill look so
     the two render visually consistent inside the same items panel. */
  .item-yesno { display: flex; gap: 6px; }
  .item-yn-btn {
    padding: 4.5px 12px;
    border: 1px solid var(--bd);
    background: var(--card);
    border-radius: 999px;
    font-family: inherit; font-size: 10.5px; font-weight: 600;
    color: var(--tx70); cursor: pointer;
    min-width: 46px;
  }
  .item-yn-btn:hover { border-color: var(--bd2); }
  .item-yn-btn.on.yes { background: var(--app); color: #fff; border-color: var(--app); }
  .item-yn-btn.on.no  { background: var(--tx55); color: #fff; border-color: var(--tx55); }
  /* "Other (specify)" — text field that doubles as a YES flag. The
     filled state nudges its border to the brand accent so the OT can
     see at a glance which group's Other item has been described. */
  .item-other-wrap { display: flex; min-width: 180px; }
  .item-other-text {
    flex: 1;
    padding: 4px 9px;
    border: 1px solid var(--bd);
    background: var(--card);
    border-radius: 6px;
    font-family: inherit; font-size: 11px; color: var(--tx);
    outline: none;
  }
  .item-other-text:focus { border-color: var(--app); }
  .item-other-text:not(:placeholder-shown) { border-color: var(--app); background: var(--voice-dim, var(--card)); }
  .item-dual {
    display: flex; gap: 11px;
  }
  .item-dual-axis {
    display: flex; align-items: center; gap: 5.5px;
  }
  .item-dual-label {
    font-size: 10px; font-weight: 700;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.04em;
  }


  .hidden { display: none !important; }

  /* ───── Repeating field list ───────────────────────────── */
  .repeat-list { display: flex; flex-direction: column; gap: 5.5px; padding-left: 9px; }
  .repeat-item {
    display: grid; grid-template-columns: 21.5px 1fr auto; gap: 9px; align-items: flex-start;
    padding: 5.5px 0;
  }
  .repeat-item .ri-num {
    width: 20px; height: 20px; border-radius: 5.5px;
    background: var(--field-bg); color: var(--tx55);
    display: grid; place-items: center;
    font-size: 10.5px; font-weight: 600;
    margin-top: 2px;
  }
  .repeat-item .ri-val {
    font-size: 12.5px; line-height: 1.45;
    color: var(--tx);
    padding: 4.5px 0;
    cursor: text;
    min-height: 21.5px;
  }
  .repeat-item .ri-val.empty { color: var(--tx40); font-style: italic; }
  .repeat-item .ri-val input,
  .repeat-item .ri-val textarea {
    width: 100%;
    border: 1px solid var(--app-bd);
    background: #fff;
    border-radius: 5.5px;
    padding: 5.5px 7px;
    font-family: inherit; font-size: 12.5px;
    color: var(--tx); outline: none;
    box-shadow: 0 0 0 2.5px rgba(50,126,88,.10);
  }
  .repeat-item .ri-del {
    width: 21.5px; height: 21.5px; border-radius: 5.5px;
    display: grid; place-items: center;
    background: transparent; border: 1px solid transparent;
    color: var(--tx40); cursor: pointer;
    margin-top: 3.5px;
  }
  .repeat-item .ri-del:hover { color: var(--warn); border-color: rgba(192,87,59,.20); background: var(--warn-dim); }
  .repeat-item .ri-del svg { width: 11px; height: 11px; }
  .repeat-add {
    display: inline-flex; align-items: center; gap: 6.5px;
    margin: 5.5px 0 0 29px;
    padding: 4.5px 9px;
    background: transparent;
    border: 1px dashed var(--bd2);
    border-radius: 6.5px;
    color: var(--tx55); cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 500;
  }
  .repeat-add:hover { border-color: var(--app-bd); color: var(--app-strong); background: var(--app-dim); }
  .repeat-add svg { width: 11px; height: 11px; }

  /* ───── Status chip row (functional status) ────────────── */
  .row-status {
    display: grid;
    grid-template-columns: 162px 1fr auto;
    gap: 12.5px;
    padding: 7px 9px;
    border-radius: 7px;
    transition: background .12s;
    align-items: center;
  }
  .row-status:hover { background: var(--field-bg); }
  .row-status.from-chat { position: relative; }
  .row-status.from-chat::before {
    content: "";
    position: absolute; left: -9px; top: 5.5px; bottom: 5.5px;
    width: 2px; background: var(--chat-fill-bd); border-radius: 2px;
  }
  .row-status .rs-label {
    font-size: 11.5px; color: var(--tx); font-weight: 500;
    padding-left: 9px;
  }
  .row-status .rs-chips {
    display: inline-flex; gap: 2.5px;
    background: var(--field-bg);
    border-radius: 7px;
    padding: 2px;
  }
  .row-status .rs-chips button {
    border: 0; background: transparent;
    padding: 3.5px 9px; border-radius: 5.5px;
    font-family: inherit; font-size: 10.5px; font-weight: 500;
    color: var(--tx55); cursor: pointer;
    text-transform: capitalize;
  }
  .row-status .rs-chips button:hover { color: var(--tx); }
  .row-status .rs-chips button.active.independent      { background: var(--sev-mild); color: #fff; }
  .row-status .rs-chips button.active.difficulty       { background: var(--sev-mod);  color: #fff; }
  .row-status .rs-chips button.active.total-assistance { background: var(--sev-sev);  color: #fff; }
  /* Behavioural Concerns chips — different axis ("is this a concern?"
     vs "what level of assistance?"), so they get their own colour
     mapping rather than reusing the independence-axis palette. */
  .row-status .rs-chips button.active.concern          { background: var(--sev-sev);  color: #fff; }
  .row-status .rs-chips button.active.not-relevant     { background: var(--sev-mild); color: #fff; }
  .row-status .rs-notes-btn {
    background: transparent; border: 1px solid var(--bd);
    border-radius: 5.5px;
    padding: 3.5px 8px;
    font-family: inherit; font-size: 10.5px; color: var(--tx55);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 4.5px;
  }
  .row-status .rs-notes-btn:hover { border-color: var(--bd2); color: var(--tx); }
  .row-status .rs-notes-btn.has-notes {
    background: var(--app-dim); color: var(--app-strong); border-color: var(--app-bd);
  }
  .row-status .rs-notes-btn svg { width: 11px; height: 11px; }
  .row-notes-edit {
    grid-column: 1 / -1;
    padding: 7px 9px 3.5px 180px;
    display: none;
  }
  .row-notes-edit.open { display: block; }
  .row-notes-edit textarea {
    width: 100%;
    border: 1px solid var(--app-bd);
    background: #fff;
    border-radius: 7px;
    padding: 7px 9px;
    font-family: inherit; font-size: 12px;
    color: var(--tx); outline: none;
    resize: vertical;
    min-height: 54px;
    box-shadow: 0 0 0 2.5px rgba(50,126,88,.10);
  }

  /* Domain-level "no concerns" toggle (Behavioural concerns).
     Mirrors the row-na-toggle pattern but lives in the domain header
     rather than next to a single field label. */
  .domain-none-toggle {
    align-self: flex-start;
    margin: 9px 14.5px 11px;
    padding: 5px 11px;
    background: transparent;
    border: 1px solid var(--bd2);
    color: var(--tx70);
    border-radius: 999px;
    font-size: 11px; font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
  }
  .domain-none-toggle:hover { border-color: var(--tx40); color: var(--tx); }
  .domain-none-toggle.active {
    background: var(--app);
    color: #fff;
    border-color: var(--app);
  }
  .domain-none-toggle.active:hover { background: var(--app-strong); }

  /* "Hide/show empty sub-domains" toggle — sits under the domain header
     when the OT has captured some but not all sub-domains. */
  .fn-domain-collapse-empty {
    align-self: flex-start;
    margin: 7px 14.5px 9px;
    padding: 4px 9px;
    background: transparent;
    border: 0;
    color: var(--tx55);
    font-size: 10.5px; font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: underline dotted var(--tx40);
    text-underline-offset: 2.5px;
  }
  .fn-domain-collapse-empty:hover { color: var(--tx); background: var(--tx10); text-decoration-color: var(--tx55); }

  /* Domain-level hint sentence (used under Behavioural concerns header) */
  .domain-hint {
    font-size: 11px;
    color: var(--tx55);
    line-height: 1.5;
    padding: 5.5px 11px;
    margin: 0 9px 9px;
    background: var(--field-bg);
    border-left: 2.5px solid var(--bd2);
    border-radius: 0 5.5px 5.5px 0;
    max-width: 64ch;
  }

  /* Sub-domain group within a section — AT-style carded look so each
     logical block reads as its own group rather than a continuous list. */
  .subgroup {
    background: #fcfbf6;
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 13px 14.5px;
    margin-top: 12px;
  }
  .subgroup:first-of-type { margin-top: 6px; }
  .subgroup-h {
    font-size: 11px; font-weight: 600;
    color: var(--tx);
    letter-spacing: 0.02em;
    margin: 0 0 8px 0;
    display: flex; align-items: center; gap: 6.5px;
  }
  /* First subgroup-h inside a section (the un-wrapped one used at the
     top of Participant / Background) — slightly subtler because it
     functions as a row-list header rather than a card heading. */
  .summary-section > .row-list > .subgroup-h:first-child {
    text-transform: uppercase;
    color: var(--tx55);
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }

  /* Functional Status — collapsible domain groups (Physical / PADL / IADL …).
     The section title is no longer the collapse handle; each domain header
     toggles its own rows via the ▾/▸ chevron on the right. */
  .fn-domain {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--bd);
  }
  .fn-domain:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .fn-domain-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 6px 9px 6px 9px;
    margin: 0 0 5.5px 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tx);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s;
  }
  .fn-domain-h:hover { background: var(--field-bg); }
  /* The chevron lives in a small chip button so it reads as
     interactive at a glance. Border, hover and active states match
     other affordances in the section. */
  .fn-domain-h .fn-domain-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--bd2);
    background: var(--card);
    color: var(--tx55);
    font-size: 14px;
    line-height: 1;
    transition: transform .15s, background .12s, color .12s, border-color .12s;
    box-sizing: border-box;
    pointer-events: none; /* the parent <button> handles the click */
  }
  .fn-domain-h:hover .fn-domain-toggle {
    background: var(--app-dim);
    color: var(--app-strong);
    border-color: var(--app-bd);
  }
  .fn-domain-h:active .fn-domain-toggle {
    transform: scale(0.96);
  }
  .fn-domain.collapsed .fn-domain-h:active .fn-domain-toggle {
    transform: rotate(-90deg) scale(0.96);
  }
  .fn-domain.collapsed .fn-domain-toggle { transform: rotate(-90deg); }
  .fn-domain.collapsed .row-status,
  .fn-domain.collapsed .domain-hint { display: none; }
  /* Suppress the summary-section-head collapse affordance across every
     summary section. Functional Status uses per-domain collapse instead;
     Participant / Background / Recommended supports are now always-open
     so the OT never has to re-expand them on return. */
  #view-summary .summary-section[data-section="participant"] .sh-toggle,
  #view-summary .summary-section[data-section="background"]  .sh-toggle,
  #view-summary .summary-section[data-section="functional"]  .sh-toggle,
  #view-summary .summary-section[data-section="supports"]    .sh-toggle { display: none; }
  #view-summary .summary-section[data-section="participant"] .summary-section-head,
  #view-summary .summary-section[data-section="background"]  .summary-section-head,
  #view-summary .summary-section[data-section="functional"]  .summary-section-head,
  #view-summary .summary-section[data-section="supports"]    .summary-section-head { cursor: default; }
  /* Notes editor must stay visible when a row is open even if a parent
     re-render replaced the DOM — open flag is persisted in state. */
  .row-status .row-notes-edit.open { display: block; }

  /* Support needs — domain groupings under "Specify per-activity hours" */
  .sn-group-h {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--tx);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 9px 6px;
    margin: 0;
    border-top: 1px dashed var(--bd);
  }
  .sn-group-h:first-child { border-top: 0; padding-top: 6px; }

  /* ── AI-suggested recommendations banner ─────────────── */
  .rec-suggestions {
    display: none;
    margin: 11px 0 12.5px;
    padding: 12.5px 14.5px;
    background: linear-gradient(180deg, #fdfaf3 0%, #faf4e6 100%);
    border: 1px solid rgba(50,126,88,.22);
    border-radius: 11px;
  }
  .rec-suggestions.show { display: block; }
  .rec-head {
    display: flex; align-items: flex-start; gap: 9px;
    margin-bottom: 9px;
  }
  .rec-head-ico {
    width: 23.5px; height: 23.5px;
    border-radius: 7px;
    background: var(--app-dim);
    color: var(--app-strong);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .rec-head-ico svg { width: 12.5px; height: 12.5px; }
  .rec-head-text { display: flex; flex-direction: column; gap: 2.5px; }
  .rec-head-text strong { font-size: 12px; color: var(--tx); }
  .rec-head-text span   { font-size: 11px; color: var(--tx55); line-height: 1.45; }
  .rec-items { display: flex; flex-direction: column; gap: 5.5px; }
  .rec-item {
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(50,126,88,.16);
    border-radius: 9px;
    padding: 8px 11px;
    display: flex; align-items: center; gap: 11px;
  }
  .rec-item-body { flex: 1; min-width: 0; }
  .rec-label { font-size: 12px; font-weight: 600; color: var(--tx); }
  .rec-reason { font-size: 11px; color: var(--tx55); margin-top: 2px; }
  .rec-actions { display: flex; gap: 5.5px; flex-shrink: 0; }
  .rec-actions .btn { padding: 4.5px 10px; font-size: 11px; }
  .rec-actions .btn-primary { padding: 4.5px 10px 4.5px 8px; }

  @media (max-width: 600px) {
    .rec-item { flex-wrap: wrap; }
    .rec-actions { width: 100%; justify-content: flex-end; }
  }

  /* ───── Supports section ─────────────────────────────────
     Each block is its own card so the section reads consistently with
     Participant + Background's .subgroup carded layout. */
  .supports-block {
    background: #fcfbf6;
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 13px 14.5px;
    margin-top: 12px;
  }
  .supports-block:first-of-type { margin-top: 6px; }
  .supports-block-h {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 9px 0;
  }
  .supports-block-h .label {
    font-size: 11px; font-weight: 600;
    color: var(--tx);
    letter-spacing: 0.02em;
  }
  .supports-block-h .count {
    font-size: 10.5px; font-weight: 500;
    color: var(--tx40);
    padding: 2px 7px; border-radius: 999px;
    background: var(--field-bg);
  }
  .supports-block-h .count.has {
    color: var(--app-strong);
    background: var(--app-dim);
  }
  .supp-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 11px; padding: 6.5px 9px;
    border-radius: 7px;
    align-items: center;
    transition: background .12s;
    cursor: pointer;
  }
  .supp-row:hover { background: var(--field-bg); }
  .supp-row.checked { background: rgba(50,126,88,.06); }
  .supp-row .supp-check {
    width: 16px; height: 16px;
    border-radius: 4.5px;
    border: 1.5px solid var(--bd2);
    background: var(--card);
    display: grid; place-items: center;
    color: transparent;
    flex-shrink: 0;
  }
  .supp-row.checked .supp-check {
    background: var(--app); border-color: var(--app); color: #fff;
  }
  .supp-row .supp-check svg { width: 10px; height: 10px; }
  .supp-row .supp-label {
    font-size: 12px; color: var(--tx);
    display: flex; align-items: baseline; gap: 7px;
    min-width: 0;
  }
  .supp-row .supp-label .cat {
    font-size: 9.5px; font-weight: 600;
    color: var(--tx55);
    background: var(--field-bg);
    padding: 1px 5.5px; border-radius: 3.5px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .supp-row .supp-meta {
    font-size: 10.5px; color: var(--tx40);
    white-space: nowrap;
  }
  .supp-row .supp-meta.code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 10px;
  }
  .supp-row .supp-hours, .supp-row .supp-cost {
    display: inline-flex; align-items: baseline; gap: 3.5px;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 6.5px;
    padding: 3.5px 7px;
  }
  .supp-row.checked .supp-hours, .supp-row.checked .supp-cost {
    border-color: var(--app-bd);
  }
  .supp-row .supp-hours input,
  .supp-row .supp-cost input {
    border: 0; background: transparent;
    font-family: inherit; font-size: 11.5px; font-weight: 600;
    color: var(--tx); outline: none; text-align: right;
    padding: 0;
  }
  /* Hours input is twice as wide as before to comfortably show 2-digit
     values + a decimal place. Native browser spinners are hidden because
     we draw custom ▲/▼ buttons outside the form box (.supp-hours-spin). */
  .supp-row .supp-hours input { width: 65px; }
  .supp-row .supp-hours input::-webkit-outer-spin-button,
  .supp-row .supp-hours input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .supp-row .supp-hours input[type="number"] { -moz-appearance: textfield; }
  .supp-row .supp-cost input { width: 63px; text-align: left; }
  .supp-row .supp-hours .unit,
  .supp-row .supp-cost .unit { font-size: 10px; color: var(--tx55); }
  /* Custom hours-step buttons — vertically stacked, each occupies 50%
     of the supp-hours container height. They sit outside the bordered
     box so the form field reads as one rectangle and the spinner as a
     separate affordance. */
  .supp-hours-wrap {
    display: inline-flex; align-items: stretch; gap: 5px;
  }
  .supp-hours-spin {
    display: inline-flex; flex-direction: column;
    height: auto;
    border: 1px solid var(--bd);
    border-radius: 6.5px;
    background: var(--card);
    overflow: hidden;
  }
  .supp-row.checked .supp-hours-spin {
    border-color: var(--app-bd);
  }
  .supp-hours-spin button {
    flex: 1 1 50%;
    min-height: 0;
    width: 22px;
    border: 0;
    background: transparent;
    color: var(--tx55);
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
  }
  .supp-hours-spin button:hover { background: var(--field-bg); color: var(--tx); }
  .supp-hours-spin button:active { background: var(--app-dim); color: var(--app-strong); }
  .supp-hours-spin button + button { border-top: 1px solid var(--bd); }
  .supp-hours-spin button svg { width: 9px; height: 9px; }
  .supp-row.at-row { grid-template-columns: 20px 1fr auto auto; gap: 9px; }
  .supp-row .at-quote {
    display: inline-flex; align-items: center; gap: 5.5px;
    font-size: 10.5px; color: var(--tx55);
    padding: 3.5px 7px; border-radius: 6.5px;
    background: var(--card); border: 1px solid var(--bd);
    cursor: pointer;
    user-select: none;
  }
  .supp-row .at-quote input { accent-color: var(--app); margin: 0; }
  .supp-row.checked .at-quote { border-color: var(--bd); }
  .supp-row.checked .at-quote.active {
    background: var(--app-dim); color: var(--app-strong); border-color: var(--app-bd);
  }

  /* Mode toggle for AT / support needs */
  .mode-toggle {
    display: inline-flex; gap: 3.5px;
    background: var(--field-bg);
    border-radius: 7px; padding: 2.5px;
    margin: 0 0 11px 9px;
  }
  .mode-toggle button {
    border: 0; background: transparent;
    padding: 4.5px 10px; border-radius: 5.5px;
    font-family: inherit; font-size: 10.5px; font-weight: 500;
    color: var(--tx55); cursor: pointer;
  }
  .mode-toggle button.active {
    background: var(--card); color: var(--tx);
    box-shadow: var(--shadow-sm);
  }

  /* Add custom AT row */
  .supp-add-other {
    display: inline-flex; align-items: center; gap: 6.5px;
    margin: 5.5px 0 0 29px;
    padding: 4.5px 9px;
    background: transparent;
    border: 1px dashed var(--bd2);
    border-radius: 6.5px;
    color: var(--tx55); cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 500;
  }
  .supp-add-other:hover { border-color: var(--app-bd); color: var(--app-strong); background: var(--app-dim); }
  .supp-add-other svg { width: 11px; height: 11px; }

  /* Other AT row — name input + cost + quote */
  .supp-row.at-other {
    grid-template-columns: 20px 1fr auto auto auto;
    gap: 9px;
  }
  .supp-row.at-other .at-name {
    border: 1px solid var(--bd);
    background: var(--card);
    border-radius: 6.5px;
    padding: 3.5px 7px;
    font-family: inherit; font-size: 12px;
    color: var(--tx); outline: none;
  }
  .supp-row.at-other .at-name:focus { border-color: var(--app-bd); }
  .supp-row.at-other .at-del {
    width: 21.5px; height: 21.5px; border-radius: 5.5px;
    display: grid; place-items: center;
    background: transparent; border: 1px solid transparent;
    color: var(--tx40); cursor: pointer;
  }
  .supp-row.at-other .at-del:hover { color: var(--warn); border-color: rgba(192,87,59,.20); background: var(--warn-dim); }
  .supp-row.at-other .at-del svg { width: 11px; height: 11px; }

  /* Radio chip group inside a row */
  .row-radio-chips {
    display: inline-flex; gap: 3.5px; flex-wrap: wrap;
  }
  .row-radio-chips button {
    border: 1px solid var(--bd);
    background: var(--card);
    padding: 3.5px 10px; border-radius: 999px;
    font-family: inherit; font-size: 11px; font-weight: 500;
    color: var(--tx55); cursor: pointer;
  }
  .row-radio-chips button:hover { border-color: var(--bd2); color: var(--tx); }
  .row-radio-chips button.active {
    background: var(--app); color: #fff; border-color: var(--app);
  }

  /* ───── Save status pill (topbar) ──────────────────────── */
  /* Geometry locked by the unified .actions .btn rule (this lives
     inside .actions so it picks up the same height + padding). */
  .save-status {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px;
    line-height: 30px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--bd);
    border-radius: 10px;
    font-size: 12px; font-weight: 600;
    color: var(--tx);
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background .15s, border-color .15s, color .15s;
  }
  .save-status:hover { background: #fff; border-color: var(--bd2); }
  .save-status.is-active,
  .save-status:active {
    background: #000;
    color: #fff;
    border-color: #000;
  }
  .save-status.is-active .dot,
  .save-status:active .dot {
    background: #fff;
    box-shadow: 0 0 0 2.5px rgba(255,255,255,.25);
  }
  .save-status .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--app);
    box-shadow: 0 0 0 2.5px var(--app-dim);
    transition: background .2s, box-shadow .2s;
  }
  .save-status.saving .dot   { background: var(--warn); box-shadow: 0 0 0 2.5px var(--warn-dim); animation: pulse-dot 1.1s infinite; }
  .save-status.unsaved .dot  { background: var(--tx40); box-shadow: 0 0 0 2.5px var(--tx10); }
  .save-status.error .dot    { background: var(--warn); box-shadow: 0 0 0 2.5px var(--warn-dim); }
  .save-status.signed-out .dot { background: var(--tx40); box-shadow: 0 0 0 2.5px var(--tx10); }
  @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

  /* Multi-column assessment cards (ABAS-3, Vineland-3, PEDI-CAT, D-REF,
     SP-2) — each section is a small grid table where rows × columns
     accept typed cell values. */
  .ax-card.mc-card .mc-section { margin-top: 12px; }
  .ax-card.mc-card .mc-section + .mc-section { margin-top: 18px; }
  .ax-card.mc-card .mc-section-h {
    font-size: 11px; font-weight: 600;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
  }
  .ax-card.mc-card .mc-row {
    display: grid; gap: 8px;
    padding: 5px 8px;
    align-items: center;
    border-radius: 6px;
  }
  .ax-card.mc-card .mc-row + .mc-row {
    border-top: 1px solid var(--bd);
  }
  .ax-card.mc-card .mc-row.mc-head {
    padding: 4px 8px;
    border-bottom: 1px solid var(--bd2);
  }
  .ax-card.mc-card .mc-cell {
    font-size: 12px; color: var(--tx);
    display: flex; align-items: center;
    min-width: 0;
  }
  .ax-card.mc-card .mc-cell.mc-h {
    font-size: 10px; font-weight: 600;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .ax-card.mc-card .mc-cell.mc-rowlabel {
    font-size: 12px; font-weight: 500; color: var(--tx);
    padding-right: 4px;
  }
  .ax-card.mc-card .mc-input {
    width: 100%; box-sizing: border-box;
    padding: 5.5px 8px;
    border: 1px solid var(--bd2); border-radius: 6px;
    background: var(--card);
    font-family: inherit; font-size: 12px;
    color: var(--tx); outline: none;
    transition: border-color .12s, box-shadow .12s, background .12s;
  }
  .ax-card.mc-card .mc-input:focus {
    border-color: var(--app-bd);
    box-shadow: 0 0 0 2.5px rgba(50,126,88,.10);
  }
  .ax-card.mc-card .mc-input.mc-readonly {
    background: var(--field-bg);
    color: var(--tx55);
    cursor: not-allowed;
  }
  .ax-card.mc-card select.mc-input {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 7px center;
  }

  /* ───── Drafts modal ───────────────────────────────────── */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(26,26,24,.42);
    display: none; align-items: center; justify-content: center;
    z-index: 200;
    padding: 21.5px;
  }
  .modal-overlay.show { display: flex; }
  .modal-box {
    background: var(--card);
    border-radius: 16px;
    width: 100%; max-width: 522px;
    max-height: 80vh;
    box-shadow: 0 11px 36px rgba(0,0,0,.18);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14.5px 20px;
    border-bottom: 1px solid var(--bd);
  }
  .modal-head h3 {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    font-weight: 500; font-size: 18px;
  }
  .modal-head .close {
    width: 27px; height: 27px; border-radius: 7px;
    display: grid; place-items: center;
    color: var(--tx55);
    border: 1px solid transparent;
    background: transparent; cursor: pointer;
  }
  .modal-head .close:hover { background: var(--tx10); border-color: var(--bd); }
  .modal-head .close svg { width: 14.5px; height: 14.5px; }
  .modal-body { overflow-y: auto; padding: 7px 12.5px 12.5px; flex: 1; }
  .modal-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 20px;
    border-top: 1px solid var(--bd);
    background: var(--field-bg);
    font-size: 11px; color: var(--tx55);
  }

  .rc-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--warn);
    background: var(--warn-dim);
    border-radius: 7px;
    margin-bottom: 7px;
    font-size: 11.5px;
  }
  .rc-row:last-child { margin-bottom: 0; }
  .rc-cat {
    align-self: flex-start;
    font-size: 10px; font-weight: 600;
    color: var(--warn); background: #fff;
    padding: 2px 7px; border-radius: 999px;
    border: 1px solid var(--warn);
    white-space: nowrap;
  }
  .rc-msg { color: var(--tx); line-height: 1.45; }
  .rc-path {
    display: block; margin-top: 3.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px; color: var(--tx55);
  }
  .rc-rollup {
    display: flex; flex-wrap: wrap; gap: 5.5px;
    margin: 5.5px 0 9px 0;
  }
  .rc-rollup .pill {
    background: var(--warn-dim); color: var(--warn);
    border: 1px solid var(--warn);
    padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
  }

  /* Drafts modal — AT v2 styling.
     Row: cream cardstock with rounded border. Name + meta on the left,
     percentage chip + Open + delete on the right. No nested progress bar. */
  .drafts-modal-v2 .modal-card {
    max-width: 600px; width: calc(100% - 32px); max-height: 88vh;
    background: var(--card); border-radius: 16px;
    box-shadow: 0 12px 48px rgba(26,26,24,.18);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .drafts-modal-v2 .modal-head {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--bd);
    display: flex; align-items: center;
  }
  .drafts-modal-v2 .modal-head h3 {
    margin: 0; font-size: 15px; font-weight: 600; color: var(--tx);
  }
  .drafts-modal-v2 .modal-close {
    margin-left: auto;
    background: transparent; border: 0; cursor: pointer;
    color: var(--tx55); padding: 4px;
    display: grid; place-items: center;
  }
  .drafts-modal-v2 .modal-close svg { width: 16px; height: 16px; }
  .drafts-modal-v2 .modal-close:hover { color: var(--tx); }
  .drafts-modal-v2 .modal-body {
    padding: 14px 18px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 7px;
  }
  .drafts-modal-v2 .modal-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--bd);
    display: flex; gap: 8px; justify-content: flex-end;
  }
  .draft-item {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px;
    border: 1px solid var(--bd); border-radius: 11px;
    background: #fcfbf6;
    cursor: pointer;
    transition: border-color .12s, background .12s;
  }
  .draft-item:hover { border-color: var(--app-bd); }
  .draft-item.current { background: var(--app-dim); border-color: var(--app-bd); }
  .draft-item .di-main {
    display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1;
  }
  .draft-item .di-name {
    font-size: 13px; font-weight: 600; color: var(--tx);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .draft-item .di-meta { font-size: 11px; color: var(--tx55); }
  .draft-item .di-pct {
    font-size: 11px; font-weight: 600;
    color: var(--app-strong);
    background: var(--app-dim);
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .draft-item .di-open {
    font-family: inherit; font-size: 11.5px; font-weight: 500;
    color: var(--tx);
    background: var(--card);
    border: 1px solid var(--bd2);
    border-radius: 7px;
    padding: 4px 11px;
    cursor: pointer;
    transition: border-color .12s;
  }
  .draft-item .di-open:hover { border-color: var(--tx40); }
  .draft-item .di-del {
    width: 26px; height: 26px; border-radius: 7px;
    display: grid; place-items: center;
    color: var(--tx55);
    background: var(--card); border: 1px solid var(--bd2);
    cursor: pointer;
    font-size: 16px; line-height: 1;
    font-family: inherit;
  }
  .draft-item .di-del:hover { color: var(--warn); border-color: var(--warn); }
  .draft-item .di-del svg { width: 11px; height: 11px; }

  /* Hover preview popover — shows decrypted draft metadata next to the
     row. Drafts are E2EE on the server so this metadata only exists
     in the client after a fresh fetch + decrypt. */
  .draft-preview-pop {
    position: fixed;
    z-index: 800;
    width: 320px;
    background: var(--card);
    border: 1px solid var(--bd2);
    border-radius: 11px;
    padding: 14px 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,.14);
    color: var(--tx);
    font-size: 12.5px; line-height: 1.5;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .18s, transform .18s;
    pointer-events: none;
  }
  .draft-preview-pop.show { opacity: 1; transform: translateY(0); }
  .draft-preview-pop .dpp-head { margin-bottom: 9px; }
  .draft-preview-pop .dpp-name { font-size: 13.5px; font-weight: 600; }
  .draft-preview-pop .dpp-sub  { font-size: 11px; color: var(--tx55); margin-top: 2px; }
  .draft-preview-pop .dpp-block { margin: 9px 0; }
  .draft-preview-pop .dpp-h    { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx55); margin-bottom: 3.5px; }
  .draft-preview-pop .dpp-li   { font-size: 11.5px; color: var(--tx70); line-height: 1.45; }
  .draft-preview-pop .dpp-li::before { content: '· '; color: var(--tx40); }
  .draft-preview-pop .dpp-more { font-size: 10.5px; color: var(--tx40); margin-top: 3px; }
  .draft-preview-pop .dpp-empty { font-size: 11.5px; color: var(--tx40); font-style: italic; }
  .draft-preview-pop .dpp-stats {
    display: flex; gap: 12px;
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid var(--bd);
    font-size: 10.5px; color: var(--tx55);
  }

  .draft-empty {
    padding: 29px 14.5px;
    text-align: center;
    color: var(--tx55);
    font-size: 12px;
  }
  /* ───── Settings modal — assessor profile ──────────── */
  /* Customise modal — sectioned layout */
  .settings-section {
    padding: 16px 0;
    border-top: 1px solid var(--bd);
  }
  .settings-section:first-of-type { padding-top: 2px; border-top: none; }
  .settings-section-head { margin-bottom: 12px; }
  .settings-section-head h4 {
    margin: 0 0 2px 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    font-weight: 600; font-size: 13.5px; color: var(--tx);
  }
  .settings-section-sub { font-size: 11.5px; color: var(--tx55); line-height: 1.4; }

  /* Compact section — denser fields (assessor details take less room so the
     colours section is the focus). 4-up on wide modals, 2-up otherwise. */
  /* Mock A — split modal: controls (left, scrolls) · live preview (right, pinned) */
  .modal-body.atu-16.settings-split { padding: 0; overflow: hidden; display: grid;
    grid-template-columns: minmax(0, 1fr) 312px; }
  .settings-main { padding: 14px 22px 18px; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; min-width: 0; }
  /* Narrower left column → assessor fields go 2-up, not 4-up */
  .settings-split .settings-section.compact .settings-grid { grid-template-columns: 1fr 1fr; }
  .settings-split .settings-field { min-width: 0; }
  .settings-preview { background: var(--field-bg); border-left: 1px solid var(--bd);
    padding: 18px; overflow-y: auto; }
  .settings-preview > div { position: sticky; top: 0; }
  #colour-presets-mount { margin-bottom: 14px; }
  @media (max-width: 720px) {
    .modal-body.atu-16.settings-split { grid-template-columns: 1fr; overflow-y: auto; }
    .settings-main { overflow: visible; }
    .settings-preview { border-left: none; border-top: 1px solid var(--bd); }
    .settings-preview > div { position: static; }
  }

  /* Two sections sharing a row (Practice logo | Report colours presets) */
  .settings-2col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px;
    padding: 16px 0; border-top: 1px solid var(--bd);
  }
  .settings-2col .settings-section { padding: 0; border-top: none; }
  @media (max-width: 640px) { .settings-2col { grid-template-columns: 1fr; gap: 18px; } }

  .settings-section.compact { padding-top: 0; }
  .settings-section.compact .settings-section-head { margin-bottom: 9px; }
  .settings-section.compact .settings-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 9px 11px;
  }
  .settings-section.compact .settings-field { gap: 3.5px; }
  .settings-section.compact .settings-field label { font-size: 10.5px; }
  .settings-section.compact .settings-field input {
    font-size: 12px; padding: 6.5px 9px; border-radius: 8px;
  }
  @media (max-width: 620px) {
    .settings-section.compact .settings-grid { grid-template-columns: 1fr 1fr; }
  }

  .settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12.5px 14.5px;
  }
  .settings-field { display: flex; flex-direction: column; gap: 5.5px; }
  .settings-field.full { grid-column: 1 / -1; }
  .settings-field label {
    font-size: 11px; font-weight: 500;
    color: var(--tx55);
  }
  .settings-field input[type="text"],
  .settings-field input[type="tel"],
  .settings-field input[type="email"] {
    font-family: inherit; font-size: 12.5px;
    background: var(--field-bg);
    border: 1px solid var(--field-bd);
    border-radius: 9px;
    padding: 9px 11px;
    color: var(--tx); outline: none;
  }
  .settings-field input:focus {
    background: #fff;
    border-color: var(--app-bd);
    box-shadow: 0 0 0 2.5px var(--app-dim);
  }
  .settings-hint { font-size: 10.5px; color: var(--tx55); margin: 3.5px 0 0 0; }

  .logo-row { display: flex; gap: 12.5px; align-items: flex-start; }
  .logo-preview {
    width: 86.5px; height: 57.5px;
    background: var(--field-bg);
    border: 1px solid var(--field-bd);
    border-radius: 7px;
    display: grid; place-items: center;
    overflow: hidden;
  }
  .logo-preview .ph { font-size: 10px; color: var(--tx40); padding: 3.5px; text-align: center; }
  .logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .logo-actions { display: flex; flex-direction: column; gap: 5.5px; }

  /* Topbar settings button */
  .icon-btn-topbar {
    width: 30.5px; height: 30.5px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--card); border: 1px solid var(--bd);
    color: var(--tx55); cursor: pointer;
    box-shadow: var(--shadow-sm);
  }
  .icon-btn-topbar:hover { color: var(--tx); border-color: var(--bd2); }
  .icon-btn-topbar svg { width: 14.5px; height: 14.5px; }

  /* Assessment picker rows */
  .ax-pick-group {
    margin-bottom: 12.5px;
  }
  .ax-pick-group-h {
    font-size: 10px; font-weight: 600;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin: 7px 0 5.5px 2px;
  }
  /* Search bar at the top of the picker — filters by abbreviation OR
     full name. Always visible above the list so a single-character
     prefix shrinks the list immediately. */
  .ax-search-wrap {
    position: relative;
    margin-bottom: 6px;
  }
  .ax-search-wrap .ax-search-icon {
    position: absolute; top: 50%; left: 11px; transform: translateY(-50%);
    width: 13.5px; height: 13.5px; color: var(--tx40);
    pointer-events: none;
  }
  .ax-search-wrap input {
    width: 100%; box-sizing: border-box;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--bd2); border-radius: 8px;
    background: var(--field-bg); font-family: inherit;
    font-size: 13px; color: var(--tx);
    transition: border-color .12s, box-shadow .12s;
  }
  .ax-search-wrap input:focus {
    outline: none; border-color: var(--app-bd);
    box-shadow: 0 0 0 2.5px rgba(50,126,88,.10);
  }
  .ax-pick-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 11px; padding: 8px 11px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s;
    align-items: center;
  }
  .ax-pick-row .ap-full {
    display: block;
    font-size: 11px; font-weight: 400; color: var(--tx55);
    margin-top: 2px;
  }
  /* Empty-state when search matches nothing */
  .ax-pick-empty {
    padding: 22px 12px;
    text-align: center;
    color: var(--tx55);
    font-size: 12.5px;
  }
  .ax-pick-row:hover { background: var(--field-bg); }
  .ax-pick-row.disabled { opacity: .5; cursor: not-allowed; }
  .ax-pick-row.added    { background: var(--app-dim); }
  .ax-pick-row.added:hover { background: var(--app-dim); }
  .ax-pick-row .ap-label { font-size: 12px; font-weight: 500; color: var(--tx); }
  .ax-pick-row .ap-pill {
    font-size: 10px; font-weight: 500;
    padding: 2px 7px; border-radius: 999px;
    background: var(--tx10); color: var(--tx55);
  }
  .ax-pick-row.added .ap-pill {
    background: var(--app); color: #fff;
  }
  .ax-pick-row.disabled .ap-pill {
    background: rgba(192,87,59,.10); color: var(--warn);
  }

  .draft-empty svg {
    width: 29px; height: 29px;
    color: var(--tx40);
    margin-bottom: 9px;
  }

  /* Toast — fill and text auto-invert with theme.
     Light: var(--tx)=dark, var(--card)=white → dark pill, white text.
     Dark : var(--tx)=light, var(--card)=dark  → light pill, dark text.
     Was hardcoded #1a1a18/#fff which stayed dark-on-the-dark-shell in
     dark mode (low contrast). */
  .toast {
    position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%) translateY(18px);
    background: var(--tx); color: var(--card);
    padding: 9px 14.5px; border-radius: 999px;
    font-size: 11.5px; font-weight: 500;
    box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 1000;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast svg { width: 12.5px; height: 12.5px; vertical-align: -2px; margin-right: 3.5px; }

  /* Scrollbars */
  .chat-scroll::-webkit-scrollbar,
  .artifact-body::-webkit-scrollbar { width: 7px; }
  .chat-scroll::-webkit-scrollbar-thumb,
  .artifact-body::-webkit-scrollbar-thumb {
    background: rgba(26,26,24,.10); border-radius: 999px;
  }

  /* ───── File upload (reference reports) ─────────────────── */
  .upload-area {
    margin-top: 5.5px;
    padding: 14.5px 16px;
    background: var(--field-bg);
    border: 1.5px dashed var(--bd2);
    border-radius: 11px;
    display: flex; flex-direction: column; gap: 11px;
    transition: border-color .15s, background .15s;
  }
  .upload-area.drag-over {
    border-color: var(--app);
    background: var(--app-dim);
  }
  .upload-area-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 11px;
  }
  .upload-area-head .label {
    font-size: 11px; font-weight: 600;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .upload-area-head .hint {
    font-size: 10.5px; color: var(--tx55);
  }
  .upload-btn {
    display: inline-flex; align-items: center; gap: 6.5px;
    padding: 5.5px 11px;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 7px;
    color: var(--tx);
    cursor: pointer;
    font-family: inherit; font-size: 11px; font-weight: 500;
  }
  .upload-btn:hover { border-color: var(--app-bd); color: var(--app-strong); }
  .upload-btn svg { width: 11.5px; height: 11.5px; }

  .upload-files { display: flex; flex-direction: column; gap: 5.5px; }
  .upload-file {
    display: grid; grid-template-columns: 25px 1fr auto auto; gap: 9px;
    padding: 7px 9px;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 7px;
    align-items: center;
    font-size: 11.5px;
  }
  .upload-file .icn {
    width: 21.5px; height: 21.5px;
    background: var(--app-dim); color: var(--app);
    border-radius: 5.5px;
    display: grid; place-items: center;
  }
  .upload-file .icn svg { width: 11px; height: 11px; }
  .upload-file .icn.err   { background: var(--warn-dim); color: var(--warn); }
  .upload-file .icn.loading { background: var(--field-bg); color: var(--tx55); }
  .upload-file .fmeta {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0;
  }
  .upload-file .fname {
    font-weight: 500; color: var(--tx);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .upload-file .fsub {
    font-size: 10.5px; color: var(--tx55);
  }
  .upload-file .fsub.err { color: var(--warn); }
  .upload-file .fsize {
    font-size: 10.5px; color: var(--tx55);
    white-space: nowrap;
  }
  .upload-file .fdel {
    width: 21.5px; height: 21.5px; border-radius: 5.5px;
    display: grid; place-items: center;
    background: transparent; border: 1px solid transparent;
    color: var(--tx40); cursor: pointer;
  }
  .upload-file .fdel:hover { color: var(--warn); border-color: rgba(192,87,59,.20); background: var(--warn-dim); }
  .upload-file .fdel svg { width: 11px; height: 11px; }

  /* ───── Mobile breakpoint ──────────────────────────────── */
  /* Below 810px: collapse the two-column workspace into a single column
     with a Chat / Artifact toggle. The workspace sidebar is overlaid by
     the standalone partial and pushed away by media queries inside its CSS;
     in embedded mode the parent provides nav, so we just go full-bleed. */
  .mobile-pane-toggle { display: none; }

  @media (max-width: 900px) {
    html.fca-standalone .app { padding-left: 12.5px; padding-right: 12.5px; }
    html.fca-embedded   .app { padding-left: 9px; padding-right: 9px; }
    .app { padding-top: 9px; padding-bottom: 9px; gap: 7px; }

    .topbar {
      grid-template-columns: 1fr;
      gap: 7px;
    }
    .topbar .crumbs { flex-wrap: wrap; row-gap: 3.5px; }
    .topbar .actions { justify-content: flex-end; flex-wrap: wrap; gap: 5.5px; }
    .topbar .actions .btn { padding: 5.5px 9px; font-size: 11px; }
    .progress-pill { margin-left: 0; }

    .main {
      display: flex; flex-direction: column;
      min-height: 0;
    }

    .mobile-pane-toggle {
      display: inline-flex;
      align-self: center;
      background: var(--tx10);
      border-radius: 9px;
      padding: 2.5px;
      margin: 3.5px 0;
      gap: 2px;
    }
    .mobile-pane-toggle button {
      border: 0; background: transparent;
      padding: 6.5px 14.5px; border-radius: 7px;
      font-family: inherit; font-size: 11px; font-weight: 500;
      color: var(--tx55); cursor: pointer;
      display: inline-flex; align-items: center; gap: 5.5px;
    }
    .mobile-pane-toggle button.active {
      background: var(--card); color: var(--tx);
      box-shadow: var(--shadow-sm);
    }
    .mobile-pane-toggle button svg { width: 11.5px; height: 11.5px; }

    /* When mobile-pane is set, hide the inactive pane */
    .main[data-mobile-pane="chat"]     .artifact-wrap { display: none; }
    .main[data-mobile-pane="artifact"] .chat          { display: none; }

    .chat { padding: 3.5px 7px 5.5px 7px; }
    .chat-scroll { padding: 7px 3.5px 12.5px; }
    .composer { border-radius: 12.5px; padding: 9px 9px 7px 11px; }
    .artifact-wrap { padding: 0; }
    .artifact { border-radius: 12.5px; }
    .artifact-head { padding: 9px 11px; flex-wrap: wrap; gap: 7px; }
    .head-right { flex-wrap: wrap; gap: 5.5px; }
    .artifact-body { padding: 18px 16px 72px 16px; }

    .body-h1 { font-size: 21.5px; }
    .summary-h1, .report-h1 { font-size: 21.5px; }

    .row { grid-template-columns: 1fr; gap: 3.5px; padding: 7px 5.5px; }
    .row .row-label { padding-left: 0; }
    .row .row-meta { justify-self: start; }

    .row-status { grid-template-columns: 1fr; gap: 5.5px; padding: 7px 5.5px; }
    .row-status .rs-label { padding-left: 0; }
    .row-status .rs-chips { flex-wrap: wrap; }

    .tray-grid { grid-template-columns: 1fr; }
    .dict-banner-routing { grid-template-columns: 1fr; }

    .score-table { grid-template-columns: 1fr auto auto; gap: 5.5px 9px; }
    .score-table .sh:nth-child(4) { display: none; }
    .score-row .ax-row-meta { display: none; }

    .supports-block { padding-top: 7px; }
    .supp-row { grid-template-columns: 20px 1fr; gap: 7px; padding: 5.5px 7px; }
    .supp-row .supp-meta, .supp-row .supp-hours, .supp-row .supp-cost, .supp-row .at-quote { grid-column: 2; }

    .modal-overlay { padding: 11px; }
    .modal-box { max-height: 90vh; }
    .settings-grid { grid-template-columns: 1fr; }

    .ax-card { padding: 12.5px 12.5px; }
    .ax-card-head { gap: 7px; flex-direction: column; align-items: flex-start; }
    .ax-card-title h3 { font-size: 16px; }

    /* Dictation bubbles fill the available width — no wasted gutter on mobile */
    .msg-user.voice { max-width: 100%; }
    .msg-user.voice .voice-head .meta { font-size: 9.5px; }
    .msg-user.voice .voice-body { font-size: 11.5px; line-height: 1.5; }

    /* Dictate session button gets icon-only on tight screens */
    .dictate-cta {
      padding: 6.5px 9px;
    }
    .dictate-cta-label-mobile { display: none; }

    /* Item-entry rows on mobile — labels wrap, chips stay tight */
    .item-row { grid-template-columns: 1fr; gap: 3.5px; padding: 5.5px 3.5px; }
    .item-chips button { width: 20px; height: 20px; font-size: 10px; }

    /* Composer tools — stack mic + dictate session on narrower screens */
    .composer-tools { flex-wrap: wrap; }

    .save-status-text-mobile-hide { display: none; }

    .draft-item { grid-template-columns: 1fr auto; }
    .draft-item .di-pct { grid-column: 1 / -1; justify-self: start; }
  }

  @media (max-width: 500px) {
    .topbar .v2-badge, .topbar .mode-badge, .progress-pill > span:last-child { display: none; }
    .topbar .actions .btn:not(.btn-primary) span,
    .save-status > span:not(.dot) { display: none; }
  }

  /* ── Inline NDIS help icon + popover ─────────────────── */
  .row .row-label .help-ico,
  .subgroup-h .help-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 12.5px; height: 12.5px;
    margin-left: 5.5px;
    border-radius: 50%;
    color: var(--tx40);
    cursor: help;
    transition: color .15s;
    vertical-align: -2px;
  }
  .row .row-label .help-ico:hover,
  .row .row-label .help-ico:focus,
  .subgroup-h .help-ico:hover,
  .subgroup-h .help-ico:focus {
    color: var(--app);
    outline: none;
  }
  .row .row-label .help-ico svg,
  .subgroup-h .help-ico svg { width: 11px; height: 11px; }

  .help-popover {
    position: absolute;
    z-index: 500;
    background: #1a1a18;
    color: rgba(245,244,240,.92);
    padding: 10px 12.5px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 1.5;
    max-width: 288px;
    box-shadow: 0 7px 21.5px rgba(0,0,0,.20);
    pointer-events: none;
    opacity: 0; transform: translateY(3.5px);
    transition: opacity .12s, transform .12s;
  }
  .help-popover.show { opacity: 1; transform: translateY(0); }
  .help-popover::before {
    content: 'NDIS tip';
    display: block;
    font-size: 9.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(245,244,240,.55);
    margin-bottom: 4.5px;
  }

  /* ── Source-quote popover (✦ chip hover) ───────────── */
  .row .row-meta.has-quotes {
    cursor: help;
    text-decoration: underline dotted rgba(50,126,88,.45);
    text-underline-offset: 2px;
  }
  .row .row-meta.voice.has-quotes {
    text-decoration-color: rgba(109,76,176,.45);
  }
  .quote-popover {
    position: absolute;
    z-index: 500;
    background: #1a1a18;
    color: #f5f4f0;
    padding: 11px 12.5px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 1.5;
    max-width: 324px;
    box-shadow: 0 7px 21.5px rgba(0,0,0,.20);
    pointer-events: none;
    opacity: 0; transform: translateY(3.5px);
    transition: opacity .12s, transform .12s;
  }
  .quote-popover.show { opacity: 1; transform: translateY(0); }
  .quote-popover .qp-label {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(245,244,240,.55);
    margin-bottom: 5.5px;
  }
  .quote-popover blockquote {
    margin: 0 0 5.5px 0;
    padding-left: 8px;
    border-left: 2px solid rgba(50,126,88,.55);
    font-style: italic;
    color: rgba(245,244,240,.92);
  }
  .quote-popover blockquote + blockquote { margin-top: 7px; }

  /* First-time chip discoverability — pulse the chip + show a callout. */
  .row .row-meta.quote-hint-pulse {
    animation: chipHintPulse 1.6s ease-in-out 2;
  }
  @keyframes chipHintPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--app-bd); }
    50%      { box-shadow: 0 0 0 6px transparent; }
  }
  .quote-hint-callout {
    position: fixed;
    z-index: 600;
    max-width: 300px;
    background: #1a1a18;
    color: #f5f4f0;
    padding: 11px 30px 11px 12.5px;
    border-radius: 9px;
    font-size: 11.5px;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s, transform .22s;
  }
  .quote-hint-callout.show { opacity: 1; transform: translateY(0); }
  .quote-hint-callout strong { color: #fff; font-weight: 600; }
  .quote-hint-callout .qhc-arrow {
    position: absolute; top: -7px; left: 32px;
    width: 12px; height: 12px;
    background: #1a1a18;
    transform: rotate(45deg);
  }
  .quote-hint-callout .qhc-dismiss {
    position: absolute; top: 4px; right: 6px;
    width: 22px; height: 22px;
    background: transparent; border: 0;
    color: rgba(245,244,240,.55);
    font-size: 18px; line-height: 18px;
    cursor: pointer;
  }
  .quote-hint-callout .qhc-dismiss:hover { color: #fff; }

  /* ── Polish modal (AI rewrite side-by-side) ───────── */
  .polish-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12.5px;
  }
  .polish-col { display: flex; flex-direction: column; gap: 5.5px; }
  .polish-col-head {
    display: flex; align-items: center; justify-content: space-between;
  }
  .polish-col-label {
    font-size: 10.5px; font-weight: 600;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .polish-grid textarea {
    width: 100%;
    min-height: 180px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.55;
    padding: 11px 12.5px;
    border: 1px solid var(--field-bd);
    border-radius: 9px;
    background: var(--field-bg);
    color: var(--tx);
    outline: none;
    resize: vertical;
  }
  .polish-grid textarea:focus {
    background: #fff;
    border-color: var(--app-bd);
    box-shadow: 0 0 0 2.5px var(--app-dim);
  }
  #polish-result {
    background: linear-gradient(180deg, #f9f7f0 0%, #f5f1e5 100%);
    border-color: rgba(50,126,88,.20);
  }
  #polish-result.loading {
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(50,126,88,.06) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    color: var(--tx40);
  }
  @keyframes shimmer { to { background-position: -200% 0; } }
  .polish-regen {
    width: 23.5px; height: 23.5px;
    border: 1px solid var(--bd);
    background: var(--card);
    border-radius: 5.5px;
    display: grid; place-items: center;
    color: var(--tx55); cursor: pointer;
  }
  .polish-regen:hover { color: var(--app-strong); border-color: var(--app-bd); }
  .polish-regen svg { width: 12.5px; height: 12.5px; }
  .polish-regen.spinning svg { animation: spin 0.7s linear infinite; }
  .polish-col-actions { display: inline-flex; align-items: center; gap: 7px; }
  .polish-diff-toggle {
    border: 1px solid var(--bd2);
    background: var(--card);
    color: var(--tx70);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 5px;
    cursor: pointer;
  }
  .polish-diff-toggle:hover { color: var(--tx); border-color: var(--tx40); }
  .polish-diff-toggle.active { background: var(--app); color: #fff; border-color: var(--app); }
  /* Diff view — mirrors the polished textarea but renders word-level
     adds/removes inline. Hidden by default; toggled by the pill above. */
  .polish-diff-view {
    background: linear-gradient(180deg, #f9f7f0 0%, #f5f1e5 100%);
    border: 1px solid rgba(50,126,88,.20);
    border-radius: 9px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tx);
    overflow-y: auto;
    height: 220px;
  }
  .polish-diff-view .add { background: rgba(50,126,88,.16); color: var(--app-strong); border-radius: 3px; padding: 0 2px; }
  .polish-diff-view .del { background: rgba(192,87,59,.14); color: var(--warn); text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
  .polish-notes {
    margin-top: 9px;
    font-size: 11px;
    color: var(--tx55);
    padding: 7px 11px;
    background: var(--field-bg);
    border-radius: 7px;
    display: none;
  }
  .polish-notes.show { display: block; }

  /* Polish action button shown inline next to textarea editors */
  .polish-action-btn {
    position: absolute;
    bottom: 5.5px;
    right: 7px;
    display: inline-flex; align-items: center; gap: 4.5px;
    background: var(--card);
    border: 1px solid var(--app-bd);
    border-radius: 999px;
    padding: 3.5px 9px;
    font-family: inherit; font-size: 10.5px; font-weight: 500;
    color: var(--app-strong);
    cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity .15s;
  }
  .row .row-value:has(textarea):hover .polish-action-btn,
  .row .row-value:focus-within .polish-action-btn { opacity: 1; pointer-events: auto; }
  .polish-action-btn svg { width: 10px; height: 10px; }
  .polish-action-btn:hover { background: var(--app-dim); }

  /* Mobile polish stacked */
  @media (max-width: 700px) {
    .polish-grid { grid-template-columns: 1fr; }
    .polish-grid textarea { min-height: 126px; }
  }

  /* ── Keyboard shortcuts help modal ─────────────────── */
  .kbd-group { margin-bottom: 12.5px; }
  .kbd-group-h {
    font-size: 10px; font-weight: 600;
    color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin: 5.5px 0 5.5px 2px;
  }
  .kbd-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6.5px 7px;
    border-radius: 7px;
    font-size: 12px;
  }
  .kbd-row:nth-child(even) { background: var(--field-bg); }
  .kbd-keys { display: inline-flex; align-items: center; gap: 3.5px; color: var(--tx55); font-size: 11px; }
  .kbd-keys kbd {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 10px;
    padding: 2px 5.5px;
    border: 1px solid var(--bd2);
    border-bottom-width: 2px;
    border-radius: 4.5px;
    background: var(--card);
    color: var(--tx);
  }
  .kbd-keys kbd + kbd { margin-left: 2px; }

  /* Inline keyboard-shortcut chip — rendered next to button labels so the
     OT discovers shortcuts without opening the help modal. Subtle enough
     to not clutter the topbar; appears on the button itself rather than
     in a separate tooltip so the binding sticks. */
  .btn-kbd {
    display: inline-flex; align-items: center;
    margin-left: 7px;
    padding: 1px 5.5px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--tx55);
    background: var(--field-bg);
    border: 1px solid var(--bd);
    border-radius: 4px;
    line-height: 1.6;
  }
  .btn-kbd--dark {
    background: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.20);
  }
  /* Suppress chips under narrower viewports so the topbar doesn't wrap. */
  @media (max-width: 1100px) {
    .btn-kbd:not(.btn-kbd--always) { display: none; }
  }
  /* Composer-input "/" affordance — chip floats on the right edge when
     the field isn't focused and is empty, hiding once the OT starts typing. */
  .composer { position: relative; }
  .composer-kbd-hint {
    position: absolute;
    top: 14px; right: 14px;
    pointer-events: none;
    padding: 2px 6.5px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 10px; font-weight: 600;
    color: var(--tx40);
    background: var(--field-bg);
    border: 1px solid var(--bd);
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s;
  }
  .composer-kbd-hint.show { opacity: 1; }
  @media (max-width: 700px) { .composer-kbd-hint { display: none; } }

  /* Pre-flight checklist modal — shows the thin-spot checks before
     submitting to the v1 backend. Advisory; not a hard gate. */
  .pfm-list { list-style: none; padding: 0; margin: 0; }
  .pfm-item {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 10px 12px;
    border: 1px solid var(--bd);
    border-radius: 8px;
    margin-bottom: 7px;
    font-size: 12.5px;
  }
  .pfm-item.pfm-warn { background: var(--warn-dim); border-color: rgba(192,87,59,.20); }
  .pfm-item.pfm-ok   { background: var(--app-dim);  border-color: var(--app-bd); }
  .pfm-ico { display: grid; place-items: center; padding-top: 1px; }
  .pfm-ico svg { width: 14px; height: 14px; }
  .pfm-body { flex: 1; min-width: 0; }
  .pfm-label  { font-weight: 600; color: var(--tx); margin-bottom: 2px; }
  .pfm-detail { font-size: 11.5px; color: var(--tx70); line-height: 1.5; }
  .pfm-jump {
    align-self: flex-start;
    background: var(--card);
    border: 1px solid var(--bd2);
    border-radius: 5px;
    padding: 4px 9px;
    font-family: inherit; font-size: 11px; font-weight: 500;
    color: var(--tx);
    cursor: pointer;
  }
  .pfm-jump:hover { border-color: var(--tx40); }
  .pfm-warnchip {
    margin-left: 9px;
    padding: 2px 8px;
    background: var(--warn-dim);
    color: var(--warn);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    vertical-align: 2px;
  }
  .pfm-okchip {
    margin-left: 9px;
    padding: 2px 8px;
    background: var(--app-dim);
    color: var(--app-strong);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    vertical-align: 2px;
  }
  .pfm-skip {
    display: flex; align-items: center; gap: 7px;
    margin-top: 14px;
    font-size: 11.5px;
    color: var(--tx55);
    cursor: pointer;
  }
  .pfm-skip input { margin: 0; }

  /* Paediatric / Adult mode switch — migration modal styling. */
  .psm-list { list-style: none; padding: 0; margin: 0; }
  .psm-list li {
    padding: 9px 11px;
    border: 1px solid var(--bd);
    border-radius: 7px;
    margin-bottom: 7px;
    font-size: 12px;
  }
  .psm-row { display: flex; align-items: center; gap: 10px; }
  .psm-from { font-weight: 600; color: var(--tx); }
  .psm-arrow { color: var(--tx40); font-weight: 500; }
  .psm-to { color: var(--app-strong); font-weight: 500; }
  .psm-to.drop { color: var(--warn); font-style: italic; font-weight: 400; }
  .psm-detail {
    margin-top: 5px;
    font-size: 11px; color: var(--tx55); line-height: 1.5;
    display: flex; gap: 9px;
    flex-wrap: wrap;
  }
  .psm-status {
    padding: 1.5px 6px;
    background: var(--field-bg);
    border-radius: 4px;
    font-weight: 500;
    color: var(--tx70);
  }
  .psm-notes { color: var(--tx70); font-style: italic; }

  /* ── v2 rollout feedback modal ─────────────────────── */
  .v2fb-ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .v2fb-ratings button {
    border: 1px solid var(--bd);
    background: var(--card);
    border-radius: 9px;
    padding: 9px 12.5px;
    text-align: left;
    font-family: inherit; font-size: 12px; font-weight: 500;
    color: var(--tx);
    cursor: pointer;
    transition: background .12s, border-color .12s;
  }
  .v2fb-ratings button:hover { border-color: var(--bd2); background: var(--field-bg); }
  .v2fb-ratings button.active {
    background: var(--app-dim);
    border-color: var(--app-bd);
    color: var(--app-strong);
  }

  /* Locked-section gated message */
  .summary-section .locked-gate { display: none; }
  .summary-section.locked .locked-gate {
    display: flex;
    align-items: flex-start;
    gap: 12.5px;
    margin-top: 11px;
    padding: 12.5px 16px;
    background: var(--field-bg);
    border: 1px dashed var(--bd2);
    border-radius: 11px;
    color: var(--tx70);
  }
  .summary-section.locked .row-list { display: none; }
  .summary-section.locked.collapsed .locked-gate { display: none; }
  .summary-section .locked-gate svg {
    width: 20px; height: 20px;
    color: var(--tx55);
    flex-shrink: 0;
    margin-top: 3.5px;
  }
  .summary-section .locked-gate strong {
    display: block;
    color: var(--tx);
    font-size: 12.5px;
    margin-bottom: 3.5px;
  }
  .summary-section .locked-gate p {
    margin: 0 0 9px 0;
    font-size: 11.5px;
    line-height: 1.5;
    max-width: 50ch;
  }
  .summary-section .locked-gate .btn { font-size: 11px; padding: 5.5px 11px; }

  /* ───── Empty / loading states ─────────────────────────── */
  .empty-state {
    display: flex; flex-direction: column; align-items: center;
    padding: 32.5px 18px 25px;
    text-align: center;
    color: var(--tx55);
  }
  .empty-state .ico {
    width: 50.5px; height: 50.5px;
    border-radius: 12.5px;
    background: var(--field-bg);
    color: var(--tx40);
    display: grid; place-items: center;
    margin-bottom: 11px;
  }
  .empty-state .ico svg { width: 21.5px; height: 21.5px; }
  .empty-state .es-title {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    font-size: 16px; font-weight: 500;
    color: var(--tx);
    margin-bottom: 5.5px;
  }
  .empty-state .es-body {
    font-size: 12px; line-height: 1.55;
    max-width: 40ch;
    margin-bottom: 12.5px;
  }

  /* General observations badge */
  /* Topbar buttons with both icon AND label (Observations, Customise).
     They sit between the drafts button and Generate report. Slightly
     wider than .btn to comfortably hold the icon + word + badge. */
  .topbar-label-btn { position: relative; padding-right: 13px; }
  .topbar-label-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
  .icon-btn-topbar { position: relative; }
  .notes-badge {
    position: absolute; top: -2px; right: -2px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--app);
    border: 2px solid var(--bg-grad-1);
    display: none;
  }
  .notes-badge.has { display: block; }

  /* ───── Generate-report progress modal ─────────────────── */
  .gen-stages { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
  .gen-stage {
    display: grid; grid-template-columns: 14.5px 1fr auto; gap: 11px;
    align-items: center;
    padding: 5.5px 3.5px;
    color: var(--tx55);
    font-size: 12px;
    transition: color .15s;
  }
  .gen-stage .dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--tx10); border: 2px solid var(--bd2);
    transition: background .15s, border-color .15s, transform .15s;
  }
  .gen-stage .meta { font-size: 10.5px; color: var(--tx40); }
  .gen-stage.active {
    color: var(--tx);
    font-weight: 500;
  }
  .gen-stage.active .dot {
    background: var(--app); border-color: var(--app);
    animation: pulse-dot 1.1s infinite;
  }
  .gen-stage.done { color: var(--tx70); }
  .gen-stage.done .dot {
    background: var(--app); border-color: var(--app);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 80%; background-position: center; background-repeat: no-repeat;
  }
  .gen-stage.error .dot {
    background: var(--warn); border-color: var(--warn);
  }
  .gen-elapsed {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 12.5px;
    background: var(--field-bg);
    border-radius: 9px;
    font-size: 11.5px; color: var(--tx70);
  }
  .gen-error {
    margin-top: 11px;
    padding: 11px 12.5px;
    background: var(--warn-dim);
    color: var(--warn);
    border-radius: 9px;
    border: 1px solid rgba(192,87,59,.20);
    font-size: 11.5px; line-height: 1.5;
  }
  .gen-error strong { color: var(--tx); display: block; margin-bottom: 3.5px; }

  /* ───── Loading overlay during hydration ────────────────── */
  .hydration-overlay {
    position: fixed; inset: 0;
    background: var(--bg-grad-1);
    display: none;
    align-items: center; justify-content: center;
    z-index: 250;
  }
  .hydration-overlay.show { display: flex; }
  .hydration-overlay .hyd-card {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 12.5px;
    padding: 20px 25px;
    box-shadow: var(--shadow-md);
    display: flex; align-items: center; gap: 11px;
    font-size: 12.5px; color: var(--tx70);
  }
  .hyd-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--app-dim);
    border-top-color: var(--app);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ════════════════════════════════════════════════════════════════
     First-run tutorial — spotlight + dim + callout card.
     ════════════════════════════════════════════════════════════════ */
  /* Topbar replay pill — geometry comes from the unified topbar
     rule above; only colours / hover are set here. font-weight
     matches the flat pills so the row reads at a single visual
     weight despite the strong fill. */
  /* Tutorial pill — quiet card-style icon button, matching the Downloads
     bell beside it and the workspace tutorial button (no loud fill). */
  .tutorial-pill {
    background: var(--card);
    color: var(--tx);
    border-color: var(--bd2);
    font-family: inherit; font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
  }
  .tutorial-pill:hover { background: var(--field-bg); border-color: var(--bd2); color: var(--tx); }
  .tutorial-pill svg { color: currentColor; }

  /* ════════════════════════════════════════════════════════════════
     Reports bell — topbar dropdown listing in-progress + recently-
     completed report generations (Phase A2). Lives next to the
     tutorial pill; data comes from /v2/jobs (cross-tool — SAH/AT/FCA
     jobs all surface here so a user who closes the per-tool generate
     modal doesn't lose the download. 2h plain-bytes retention; Phase B
     will layer in indefinite E2EE archive.
     ════════════════════════════════════════════════════════════════ */
  /* Theme-aware (light + dark via [data-theme="dark"] on <html>). All
     surface / text / border colours route through the v2 theme tokens
     so the bell tracks the rest of the workspace UI. Status-icon tints
     and the primary CTA need explicit dark overrides further down. */
  .reports-bell-wrap { position: relative; flex-shrink: 0; }
  .reports-bell-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--card); color: var(--tx);
    border: 1px solid var(--bd2); border-radius: 10px;
    cursor: pointer; flex-shrink: 0;
    box-sizing: border-box;
    transition: background .15s, border-color .15s, color .15s;
  }
  .reports-bell-btn:hover { background: var(--field-bg); border-color: var(--bd2); }
  .reports-bell-btn svg { width: 15px; height: 15px; }
  /* Live-activity indicator — a small spinning ring at bottom-right
     when any job has status='running'. Visually distinct from the
     top-right unread badge so both can coexist. */
  /* Live-activity indicator — when any job has status='running' the
     button's solid border becomes transparent and a conic-gradient
     ring rotates around the perimeter, matching the workspace hub's
     Downloads button treatment. Coexists with the top-right unread
     badge. */
  .reports-bell-btn.is-busy { border-color: transparent; }
  .reports-bell-btn.is-busy::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 11px;
    padding: 1.5px;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      var(--app-strong) 90deg,
      transparent 200deg,
      transparent 360deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: reportsBellSpin .8s linear infinite;
    pointer-events: none;
  }
  .reports-bell-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 16px; height: 16px;
    padding: 0 4px; box-sizing: border-box;
    background: #d04848; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 13px;
    text-align: center;
    border-radius: 999px;
    /* Ring matches the topbar surface so the badge looks "cut out" of
       the bell button. var(--card) flips light/dark automatically. */
    border: 1.5px solid var(--card);
    pointer-events: none;
  }
  .reports-bell-badge:empty { display: none; }
  .reports-bell-panel {
    position: absolute;
    top: calc(100% + 6px); right: 0;
    width: 340px; max-height: 440px;
    background: var(--card); color: var(--tx);
    border: 1px solid var(--bd2); border-radius: 12px;
    box-shadow: var(--shadow-md);
    display: none; flex-direction: column;
    z-index: 1500;
  }
  .reports-bell-panel.open { display: flex; }
  .reports-bell-head {
    padding: 12px 14px 10px;
    font-size: 12.5px; font-weight: 600;
    border-bottom: 1px solid var(--bd);
  }
  .reports-bell-body {
    flex: 1; overflow-y: auto; max-height: 360px;
    padding: 4px 0;
  }
  .reports-bell-empty {
    padding: 22px 14px; text-align: center;
    font-size: 12px; color: var(--tx55); line-height: 1.5;
  }
  .reports-bell-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: start; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bd);
  }
  .reports-bell-row:last-child { border-bottom: 0; }
  .reports-bell-row:hover { background: var(--field-bg); }
  .reports-bell-ic {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--tx70);
    flex-shrink: 0;
  }
  .reports-bell-ic svg { width: 14px; height: 14px; }
  /* Status-icon tints — light-mode pastels. Dark-mode overrides below
     re-tune the backgrounds (low-opacity colour wash on dark) so they
     read as the same status family without glowing. */
  .reports-bell-ic.is-running  { background: #eef5ff; color: #2870c4; }
  .reports-bell-ic.is-ready    { background: #eaf6ee; color: #2c7a3f; }
  .reports-bell-ic.is-error    { background: #fdecec; color: #b3322b; }
  .reports-bell-ic.is-archived { background: #f0eefa; color: #5b50aa; }
  [data-theme="dark"] .reports-bell-ic.is-running  { background: rgba(79,158,230,.16);  color: #7cb8ec; }
  [data-theme="dark"] .reports-bell-ic.is-ready    { background: rgba(82,180,108,.16);  color: #87cf99; }
  [data-theme="dark"] .reports-bell-ic.is-error    { background: rgba(208,72,72,.18);   color: #e88a82; }
  [data-theme="dark"] .reports-bell-ic.is-archived { background: rgba(140,124,210,.18); color: #b5acdc; }
  .reports-bell-spin {
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: reportsBellSpin .8s linear infinite;
  }
  @keyframes reportsBellSpin { to { transform: rotate(360deg); } }
  .reports-bell-meta { min-width: 0; }
  .reports-bell-meta.is-clickable { cursor: pointer; }
  .reports-bell-meta.is-clickable:hover .reports-bell-title { text-decoration: underline; }
  .reports-bell-meta.is-clickable:focus-visible { outline: 2px solid var(--app-bd); outline-offset: 2px; border-radius: 6px; }
  .reports-bell-title {
    font-size: 12.5px; font-weight: 600; color: var(--tx);
    line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .reports-bell-sub {
    font-size: 11px; color: var(--tx55); margin-top: 2px; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .reports-bell-row.has-error .reports-bell-sub {
    color: #b3322b; white-space: normal;
  }
  [data-theme="dark"] .reports-bell-row.has-error .reports-bell-sub {
    color: #e88a82;
  }
  .reports-bell-actions {
    display: flex; flex-direction: row;
    align-items: center; gap: 4px;
    flex-shrink: 0;
  }
  .reports-bell-act {
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 8px;
    background: var(--card); color: var(--tx);
    border: 1px solid var(--bd2); border-radius: 7px;
    font-family: inherit; font-size: 11px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
  }
  .reports-bell-act:hover { background: var(--field-bg); border-color: var(--bd2); }
  /* Primary CTA: dark-on-light in light mode, light-on-dark in dark mode.
     var(--tx) already does that flip — paired with var(--card) for fill
     and text-color contrast it stays a high-contrast pill in both. */
  .reports-bell-act.primary {
    background: var(--tx); color: var(--card); border-color: var(--tx);
  }
  .reports-bell-act.primary:hover { filter: brightness(1.08); }
  .reports-bell-act svg { width: 11px; height: 11px; }
  .reports-bell-act.icon-only { width: 24px; padding: 0; justify-content: center; }
  .reports-bell-act.danger:hover { background: rgba(208,72,72,.10); border-color: rgba(208,72,72,.45); color: #b3322b; }
  [data-theme="dark"] .reports-bell-act.danger:hover { color: #e88a82; }
  .reports-bell-act.is-disabled,
  .reports-bell-act.is-disabled:hover {
    background: var(--field-bg); color: var(--tx55);
    border-color: var(--bd); cursor: not-allowed; filter: none;
  }
  .reports-bell-act.is-disabled svg { opacity: .6; }
  .reports-bell-lockbadge {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    background: var(--card); color: var(--tx55);
    border: 1px solid var(--bd2); border-radius: 4px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  }
  .reports-bell-foot {
    padding: 9px 14px;
    font-size: 10.5px; color: var(--tx40);
    border-top: 1px solid var(--bd);
    background: var(--field-bg);
    border-radius: 0 0 12px 12px;
  }

  /* "Use Old V1 Tool" switcher pill — warmer / louder than the
     tutorial pill so OTs can spot it as an escape hatch without
     hunting. Warn-palette outlined so it reads as a fallback action,
     not a primary CTA. Anchored, so href + target="_top" handle the
     iframe escape natively. */
  .version-switch-pill {
    background: var(--warn-dim);
    color: var(--warn);
    border-color: rgba(192, 87, 59, .35);
    font-family: inherit; font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
  }
  .version-switch-pill:hover {
    background: var(--warn);
    color: #fff;
    border-color: var(--warn);
  }
  .version-switch-pill svg { color: currentColor; }

  .tut-root { position: fixed; inset: 0; z-index: 9000; display: none; }
  .tut-root.active { display: block; }
  .tut-blocker {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    cursor: not-allowed;
  }
  .tut-spotlight {
    position: fixed;
    border-radius: 12px;
    pointer-events: none;
    box-shadow:
      0 0 0 9999px rgba(0,0,0,0.72),
      inset 0 0 0 2px rgba(255,255,255,0.85),
      0 0 0 4px rgba(0,0,0,0.35),
      0 0 36px 4px rgba(255,255,255,0.18);
    transition:
      top .42s cubic-bezier(.4,0,.2,1),
      left .42s cubic-bezier(.4,0,.2,1),
      width .42s cubic-bezier(.4,0,.2,1),
      height .42s cubic-bezier(.4,0,.2,1),
      border-radius .42s cubic-bezier(.4,0,.2,1);
    will-change: top, left, width, height;
  }
  .tut-spotlight::after {
    content: '';
    position: absolute; inset: -4px;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.55);
    animation: tutPulse 2.2s ease-out infinite;
    pointer-events: none;
  }
  @keyframes tutPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  }
  .tut-card {
    position: fixed;
    width: 410px;
    max-width: calc(100vw - 28px);
    background: #fff;
    border: 1px solid #000;
    border-radius: 16px;
    box-shadow:
      0 18px 48px rgba(0,0,0,0.22),
      0 6px 14px rgba(0,0,0,0.08);
    padding: 22px 24px 20px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    color: #000;
    transition: top .42s cubic-bezier(.4,0,.2,1), left .42s cubic-bezier(.4,0,.2,1);
    pointer-events: auto;
    z-index: 9100;
  }
  .tut-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .tut-step {
    font-size: 11px; font-weight: 700; color: #000;
    text-transform: uppercase; letter-spacing: .08em;
  }
  .tut-chip {
    padding: 3px 9px; border-radius: 999px;
    background: #000; color: #fff;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
  }
  .tut-title {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
    font-size: 18px; font-weight: 600;
    margin: 4px 0 10px;
    line-height: 1.3; color: #000;
    letter-spacing: -0.01em;
  }
  .tut-body {
    font-size: 13px; line-height: 1.6; color: #333;
    margin: 0 0 18px;
  }
  .tut-body p { margin: 0 0 10px; }
  .tut-body p:last-of-type { margin-bottom: 0; }
  .tut-body strong { color: #000; font-weight: 600; }
  .tut-priv-line {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    margin: 12px 0;
    background: #f4f4f4;
    border: 1px solid #000;
    color: #000;
    border-radius: 10px;
    font-size: 12px; font-weight: 500;
    line-height: 1.45;
  }
  .tut-priv-line svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
  .tut-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
  }
  .tut-dots { display: inline-flex; gap: 6px; }
  .tut-dot { width: 7px; height: 7px; border-radius: 50%; background: #d4d4d4; transition: transform .2s, background .2s; }
  .tut-dot.done    { background: #000; }
  .tut-dot.current { background: #000; transform: scale(1.35); }
  .tut-next {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px;
    border-radius: 11px;
    background: #000;
    color: #fff; border: 1px solid #000;
    font-family: inherit;
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
    transition: background .15s, color .15s, border-color .15s, transform .08s;
  }
  .tut-next:hover  { background: #e8e8e8; color: #000; border-color: #d4d4d4; }
  .tut-next:active { transform: translateY(1px); }
  .tut-next svg    { width: 15px; height: 15px; }
  .tut-arrow {
    position: absolute;
    width: 14px; height: 14px;
    background: #fff;
    border: 1px solid #000;
    transform: rotate(45deg);
  }
  .tut-card[data-side="bottom"] .tut-arrow { top: -8px; left: 32px; border-right: 0; border-bottom: 0; }
  .tut-card[data-side="top"] .tut-arrow    { bottom: -8px; left: 32px; border-left: 0; border-top: 0; }
  .tut-card[data-side="left"] .tut-arrow   { right: -8px; top: 28px; border-left: 0; border-bottom: 0; }
  .tut-card[data-side="right"] .tut-arrow  { left: -8px; top: 28px; border-right: 0; border-top: 0; }
  .tut-card[data-side="center"] .tut-arrow { display: none; }
  .tut-card[data-side="center"] {
    width: 480px;
    padding: 32px 34px 26px;
  }
  .tut-card[data-side="center"] .tut-title { font-size: 24px; margin: 12px 0 12px; }
  .tut-card[data-side="center"] .tut-body  { font-size: 13.5px; }

  /* Mock drafts modal — only opened by the tutorial. Same overlay z-index
     as the rest, but populated with fake examples so the tour reads the
     same way for every user. */
  .tut-draft-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 11px 13px;
    border: 1px solid var(--bd);
    border-radius: 10px;
    background: var(--field-bg);
    margin-bottom: 8px;
    align-items: center;
  }
  .tut-draft-name { font-weight: 600; font-size: 13px; color: var(--tx); display: flex; align-items: center; gap: 7px; }
  .tut-draft-meta { font-size: 11px; color: var(--tx55); margin-top: 2px; }
  .tut-draft-pct  { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--tx55); }
  .tut-draft-pct-bar { width: 64px; height: 5px; background: var(--tx10); border-radius: 999px; overflow: hidden; }
  .tut-draft-pct-bar > span { display: block; height: 100%; background: var(--app); border-radius: 999px; }
  .tut-draft-lock {
    display: inline-flex; align-items: center; gap: 3.5px;
    padding: 1.5px 6px; border-radius: 999px;
    background: var(--app-dim); color: var(--app-strong);
    font-size: 9.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
  }
  .tut-draft-lock svg { width: 9px; height: 9px; }

  /* ─── Chat-demo (step 2) styles — visual-only, reverted on advance ─── */
  .composer-input.tut-demo-typing {
    caret-color: var(--app);
    /* The demo message is multi-paragraph; the default 130px cap would
       hide the tail. Let it grow up to half the viewport, scrolling as a
       fallback for very tall messages. */
    max-height: 50vh;
    overflow-y: auto;
  }
  .row.tut-demo-filling { background: rgba(50,126,88,.08); border-radius: 6px; transition: background-color .25s ease; }
  .row.tut-demo-flash { animation: tutDemoFlash 1.1s ease-out 1; }
  @keyframes tutDemoFlash {
    0%   { background: rgba(50,126,88,.22); box-shadow: inset 0 0 0 1px rgba(50,126,88,.35); }
    100% { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
  }
  .tut-src-chip {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 7px;
    font-size: 9.5px; font-weight: 600;
    padding: 1px 6px; border-radius: 999px;
    background: var(--voice-dim); color: var(--voice);
    text-transform: uppercase; letter-spacing: .04em;
    vertical-align: middle;
  }
  .tut-src-chip svg { width: 9px; height: 9px; }
  .msg-asst.tut-demo-thinking { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
  .tut-demo-dots { display: inline-flex; gap: 4px; }
  .tut-demo-dots span {
    width: 5px; height: 5px; border-radius: 50%; background: var(--tx55);
    animation: tutDemoPulse 1.05s infinite ease-in-out;
  }
  .tut-demo-dots span:nth-child(2) { animation-delay: .15s; }
  .tut-demo-dots span:nth-child(3) { animation-delay: .3s; }
  @keyframes tutDemoPulse {
    0%, 80%, 100% { opacity: .3; transform: scale(.85); }
    40% { opacity: 1; transform: scale(1); }
  }

  /* ─── Drop-shadow removal ─────────────────────────────────────
     Strip every drop-shadow across FCA v2. The :not chain excludes
     focus states so elements that use box-shadow as a focus ring
     keep their accessibility indicator. */
  *:not(:focus):not(:focus-visible):not(:focus-within) { box-shadow: none !important; }

/* ── CSP utility classes (auto-generated from former inline style="") ── */
.at-none.at-none{display:none}
.atu-1.atu-1{width:0%}
.atu-2.atu-2{color:#aaa;font-size:11px}
.atu-3.atu-3{text-transform:none;letter-spacing:0;color:var(--tx40);font-weight:400;margin-left:4px}
.atu-4.atu-4{margin-bottom:18px}
.atu-5.atu-5{position:fixed;inset:0;background:var(--surface,#faf8f4);z-index:280;align-items:center;justify-content:center;padding:24px}
.atu-6.atu-6{max-width:420px;text-align:center}
.atu-7.atu-7{font-size:32px;line-height:1;margin-bottom:14px}
.atu-8.atu-8{font-size:15px;font-weight:600;color:var(--tx);margin-bottom:8px}
.atu-9.atu-9{font-size:12.5px;color:var(--tx55);line-height:1.6;margin:0 0 18px}
.atu-10.atu-10{max-width:760px}
.atu-11.atu-11{padding:16px 22px 8px}
.atu-12.atu-12{color:var(--app-strong)}
.atu-13.atu-13{width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:3px}
.atu-14.atu-14{display:flex;gap:8px}
.atu-15.atu-15{max-width:540px}
.atu-16.atu-16{padding:14px 22px 4px}
.atu-17.atu-17{max-width:520px}
.atu-18.atu-18{padding:18px 22px}
.atu-19.atu-19{font-size:13.5px;color:var(--tx70);margin:0 0 14px 0}
.atu-20.atu-20{margin:14px 0 4px}
.atu-21.atu-21{width:100%;min-height:110px;font-family:inherit;font-size:13.5px;line-height:1.55;padding:10px 12px;border:1px solid var(--field-bd);border-radius:10px;background:var(--field-bg);resize:vertical;outline:none;color:var(--tx)}
.atu-22.atu-22{max-width:620px}
.atu-23.atu-23{padding:14px 22px}
.atu-24.atu-24{font-size:12.5px;color:var(--tx55);margin:0 0 12px 0}
.atu-25.atu-25{width:100%;min-height:240px;font-family:inherit;font-size:14px;line-height:1.55;padding:12px 14px;border:1px solid var(--field-bd);border-radius:10px;background:var(--field-bg);resize:vertical;outline:none;color:var(--tx)}
.atu-26.atu-26{max-width:460px}
.atu-27.atu-27{padding:20px}
.atu-28.atu-28{font-size:13px;line-height:1.6;color:var(--tx);margin:0 0 12px}
.atu-29.atu-29{font-size:12.5px;line-height:1.5;color:var(--tx55);margin:0}
.atu-30.atu-30{display:flex;gap:10px;padding:0 20px 20px}
.atu-31.atu-31{flex:1}
.atu-32.atu-32{max-width:480px}
.atu-33.atu-33{padding:20px 22px}
.atu-34.atu-34{max-width:640px}
.atu-35.atu-35{padding:18px 22px 8px}
.atu-36.atu-36{margin:0 0 12px 0;color:var(--tx70);font-size:13.5px}
.atu-37.atu-37{max-height:360px;overflow-y:auto;margin:0 0 10px 0}
.atu-38.atu-38{margin:10px 0 0 0;color:var(--tx55);font-size:12.5px}
.atu-39.atu-39{color:var(--tx55);font-size:12.5px}
.atu-40.atu-40{padding:18px 24px 4px}
.atu-41.atu-41{display:flex;justify-content:center;margin:4px 0 12px 0}
.atu-42.atu-42{width:52px;height:52px;border-radius:50%;background:var(--warn-dim);border:2px solid var(--warn);display:flex;align-items:center;justify-content:center}
.atu-43.atu-43{margin:0 0 14px 0;color:var(--tx70);font-size:13.5px;line-height:1.55;text-align:center}
.atu-44.atu-44{margin:0 0 4px 0;color:var(--tx55);font-size:12px;text-align:center}
.atu-45.atu-45{justify-content:center;gap:10px}
.atu-46.atu-46{max-width:880px}
.atu-47.atu-47{font-size:12.5px;color:var(--tx55);margin:0 0 14px 0}
.atu-48.atu-48{--c:#327e58}
.atu-49.atu-49{--c:#3461e8}
.atu-50.atu-50{--c:#7a52d4}
.atu-51.atu-51{--c:#1f8a8a}
.atu-52.atu-52{--c:#e0682a}
.atu-53.atu-53{--c:#c0392b}
.atu-54.atu-54{--c:#d34ba3}
.atu-55.atu-55{padding:12px 18px 0}
.atu-56.atu-56{padding:8px 18px 14px}
.atu-57.atu-57{z-index:270}
.atu-58.atu-58{padding:11px 14.5px}
.atu-59.atu-59{width:67%}
.atu-60.atu-60{width:92%}
.atu-61.atu-61{width:14%}
.atu-62.atu-62{width:100%;background:var(--app-strong)}
.atu-63.atu-63{color:var(--app-strong);font-weight:600}
.atu-64.atu-64{color:rgba(255,255,255,.55)}
.atu-65.atu-65{margin:0;padding-left:18px}
.atu-66.atu-66{margin:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--tx70)}
.atu-67.atu-67{font-size:13px;color:var(--tx55);padding:10px;font-style:italic}
.atu-68.atu-68{background:var(--field-bg);color:var(--tx55)}
.atu-69.atu-69{text-transform:none;letter-spacing:0;font-size:12px;color:var(--tx70)}
.atu-70.atu-70{color:var(--tx40);font-style:italic}
.atu-71.atu-71{margin-top:8px}
.atu-72.atu-72{color:var(--tx55)}
.atu-73.atu-73{cursor:default}
.atu-74.atu-74{margin:7px 5px 0;font-size:10.5px;color:var(--tx55);line-height:1.4}
.atu-75.atu-75{display:block}
.atu-76.atu-76{display:flex;align-items:center;gap:8px}
.atu-77.atu-77{color:var(--app-strong);font-weight:500}
.atu-78.atu-78{font-size:10.5px;color:var(--app-strong);background:var(--app-dim);padding:1px 7px;border-radius:999px;margin-left:6px;font-weight:600}
.atu-79.atu-79{width:12px;height:12px;border-width:1.5px}
.atu-80.atu-80{margin:6px 0 0 0}
.atu-81.atu-81{color:var(--tx55);font-size:13px;margin:8px 0}
.atu-82.atu-82{padding:16px 22px}
.atu-83.atu-83{font-size:12.5px;line-height:1.55;color:var(--tx70);margin:0 0 12px}
.atu-84.atu-84{white-space:pre-line}
.atu-85.atu-85{display:inline-flex}
.atu-86.atu-86{color:#555;font-size:12.5px}
.atu-87.atu-87{color:#000}

/* ── CSP: classes for former dynamic / conditional inline styles ── */
.sev-dim.sev-dim{opacity:.6}
.sev-fill-dim.sev-fill-dim{background:var(--tx40)}
.sev-label-dim.sev-label-dim{color:var(--tx55);font-weight:500}
.row .row-value.empty.row-value-state{font-style:normal;color:var(--tx70)}
.score-input input.score-total-ro{color:var(--tx55)}
