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

  :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);
    /* AT identity — lilac accent (matches v1 AT body.app-at). */
    --app: #7c5cbf;
    --app-dim: rgba(124,92,191,.10);
    --app-bd: rgba(124,92,191,.25);
    --app-strong: #5a3d9a;
    --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: #f5f1f8;
    --chat-fill-bd: rgba(124,92,191,.20);
    /* Severity palette (reused from FCA v2 for assessment scoring) */
    --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 in <head>. AT's lilac
     --app is shifted brighter (#b09cdf) so it stays legible on
     dark surfaces while still reading as the AT brand colour. */
  :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:        #b09cdf;     /* AT lilac, brighter for dark legibility */
    --app-dim:    rgba(176,156,223,.18);
    --app-bd:     rgba(176,156,223,.34);
    --app-strong: #d5c8f0;
    --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(176,156,223,.24);
    --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 or near-white
     solids that don't read against the dark base. Override those
     specific surfaces here so cards, banners, and input fields
     look right in dark mode. */
  [data-theme="dark"] .msg-user.voice {
    background: rgba(165,133,226,.16);
    border-color: rgba(165,133,226,.34);
  }
  /* 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"] .summary-tabs {
    background: linear-gradient(180deg, #242424 0%, #1f1f1f 100%);
  }
  [data-theme="dark"] .summary-tab.active {
    background: var(--card);
  }
  [data-theme="dark"] .outstanding-tray {
    background: linear-gradient(180deg, rgba(224,122,90,.14) 0%, rgba(224,122,90,.10) 100%);
  }
  [data-theme="dark"] .tray-item {
    background: rgba(255,255,255,.05);
  }
  [data-theme="dark"] .tray-item:hover {
    background: rgba(255,255,255,.10);
  }
  [data-theme="dark"] .summary-card,
  [data-theme="dark"] .subgroup,
  [data-theme="dark"] .supports-block {
    background: #1f1f1f;
  }
  /* Template picker cards inside the choose-template modal —
     hardcode a near-white #fcfbf6 background. Flip to the card
     surface so they sit on the dark modal correctly. */
  [data-theme="dark"] .template-card {
    background: #242424;
    border-color: rgba(255,255,255,.10);
  }
  [data-theme="dark"] .template-card .tpl-preview {
    background: #1f1f1f;
  }
  /* .section-card is the main card pattern used inside each tab
     pane (Participant → NDIS participant details, Nominee/guardian,
     etc.). It hardcodes #fcfbf6 so flip to dark card surface here. */
  [data-theme="dark"] .section-card {
    background: #242424;
    border-color: rgba(255,255,255,.08);
  }
  /* Empty / dashed-outline states and the draft / picker lists also
     bake in a near-white cream — flip to a slightly darker shade so
     they sit a touch below the section cards. */
  [data-theme="dark"] .at-empty {
    background: #1f1f1f;
    border-color: rgba(255,255,255,.10);
  }
  [data-theme="dark"] .draft-item,
  [data-theme="dark"] .picker-item {
    background: #1f1f1f;
    border-color: rgba(255,255,255,.08);
  }
  /* AT recommendation cards (Recommendations tab → each AT item).
     .at-card itself + the header strip + cost input + pill options
     all hardcode light colours — flip to the dark card surfaces. */
  [data-theme="dark"] .at-card {
    background: #242424;
    border-color: rgba(255,255,255,.08);
  }
  [data-theme="dark"] .at-card-header {
    background: #1f1f1f;
    border-bottom-color: rgba(255,255,255,.08);
  }
  [data-theme="dark"] .at-card-just-row {
    border-top-color: rgba(255,255,255,.08);
  }
  [data-theme="dark"] .at-cost-input {
    background: #1a1a1a;
    border-color: rgba(255,255,255,.10);
    color: var(--tx);
  }
  [data-theme="dark"] .pill-opt {
    background: #1f1f1f;
    border-color: rgba(255,255,255,.10);
    color: var(--tx55);
  }
  [data-theme="dark"] .pill-opt:hover {
    background: #2a2a2a;
    color: var(--tx);
  }
  /* Inputs that hardcode #fff on :focus — flip to the field token
     so click-into-field doesn't flash a white interior. */
  [data-theme="dark"] textarea:focus,
  [data-theme="dark"] input[type="text"]:focus,
  [data-theme="dark"] input[type="email"]:focus,
  [data-theme="dark"] input[type="date"]:focus,
  [data-theme="dark"] input[type="number"]:focus,
  [data-theme="dark"] .field input:focus,
  [data-theme="dark"] .field textarea:focus,
  [data-theme="dark"] .settings-field input:focus,
  [data-theme="dark"] .settings-field textarea:focus,
  [data-theme="dark"] .form-field input:focus,
  [data-theme="dark"] .form-field select:focus,
  [data-theme="dark"] .form-field textarea:focus,
  [data-theme="dark"] .row-value:focus,
  [data-theme="dark"] .row-value[contenteditable="true"]:focus {
    background: var(--field-bg);
    color: var(--tx);
  }
  /* Save-status / .btn hovers (light fill) — flip in dark. */
  [data-theme="dark"] .save-status:hover,
  [data-theme="dark"] .actions .btn:hover,
  [data-theme="dark"] .actions-left .template-picker-btn:hover {
    background: rgba(255,255,255,.06);
  }
  /* Active state — inverted for dark legibility. */
  [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,
  [data-theme="dark"] .actions-left .template-picker-btn:active {
    background: #f1efe8;
    color: #1a1a18;
    border-color: #f1efe8;
  }
  [data-theme="dark"] .actions .btn.is-active svg,
  [data-theme="dark"] .actions .btn:active svg,
  [data-theme="dark"] .actions-left .template-picker-btn:active svg { color: #1a1a18; }

  * { box-sizing: border-box; }
  textarea {
    font-family: inherit; font-size: 12px; color: var(--tx);
    width: 100%; padding: 7px 10px;
    border: 1px solid var(--bd2); border-radius: 7px;
    background: var(--field-bg); resize: vertical; min-height: 62px;
  }
  textarea:focus { outline: 2px solid var(--app-bd); background: var(--card); border-color: var(--app-bd); }
  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: shift the app right when the shared caw-sb rail
     expands on hover/focus/menu-open, mirroring the workspace at my/.
     Embedded mode (inside the iframe overlay) has no sidebar inside
     the iframe — the parent provides nav — so no push needed there. */
  html.at-standalone .app {
    padding-left: 70px;
    transition: padding-left .28s cubic-bezier(.4, 0, .2, 1);
  }
  html.at-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.at-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 10px 0 7px; min-width: 0; }
  /* Left padding = 1 (.summary border) + 7 (.summary-tabs 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 8px; 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 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; min-width: 0; flex-wrap: wrap; }
  .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; }
  .template-pill {
    margin-left: 5.5px;
    display: inline-flex; align-items: center; gap: 5.5px;
    padding: 3.5px 8px 3.5px 7px;
    border-radius: 999px;
    border: 1px solid var(--app-bd);
    background: var(--app-dim); color: var(--app-strong);
    font-family: inherit; font-size: 10.5px; font-weight: 600;
    cursor: pointer; line-height: 1;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .template-pill:hover { background: rgba(124,92,191,.18); }
  .template-pill svg { color: var(--app-strong); opacity: .65; }
  .template-pill .tp-icon { font-size: 11px; line-height: 1; }
  .template-pill.custom {
    background: rgba(124,92,191,.10);
    color: var(--app-strong);
    border-color: var(--app-bd);
  }

  /* Template picker (NDIS vs Custom) — large 2-card chooser with v1 imagery */
  .template-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
  .template-card {
    border: 1.5px solid var(--bd2); border-radius: 14px;
    padding: 14px 14px 16px; cursor: pointer;
    background: #fcfbf6; transition: all .15s;
    display: flex; flex-direction: column; gap: 9px;
  }
  .template-card:hover { border-color: var(--app-bd); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .template-card.selected { border-color: var(--app); background: var(--app-dim); }
  .template-card .tpl-cost-badge {
    align-self: flex-start;
    display: inline-block;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2.5px 9px; border-radius: 20px;
  }
  .template-card .tpl-cost-badge.lowmid { background: var(--app-dim);  color: var(--app-strong); }
  .template-card .tpl-cost-badge.high   { background: var(--tx10);     color: var(--tx70); }
  .template-card .tpl-preview {
    background: var(--tx10); border-radius: 9px; overflow: hidden;
    line-height: 0;
  }
  .template-card .tpl-preview img {
    width: 100%; max-height: 140px;
    object-fit: cover; object-position: top;
    display: block;
  }
  .template-card .tc-title { font-size: 14px; font-weight: 600; color: var(--tx); }
  .template-card .tc-sub   { font-size: 11.5px; color: var(--tx55); line-height: 1.5; }
  .template-card ul { margin: 0; padding-left: 17px; font-size: 11px; color: var(--tx70); line-height: 1.6; }
  .template-card .tc-card-use {
    font-size: 11.5px; font-weight: 600; color: var(--tx70);
    margin-top: 4px;
  }

  /* ── Customise modal — assessor profile + branding. Ported from
     FCA v2's settings-grid / theme-pick / logo-row pattern so the two
     tools look identical when an OT switches between them. ── */
  .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"],
  .settings-field textarea {
    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,
  .settings-field textarea: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; }

  .theme-pick { display: inline-flex; gap: 6.5px; flex-wrap: wrap; }
  .theme-pick button {
    width: 27px; height: 27px;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--c, var(--app));
    cursor: pointer;
    transition: transform .12s;
  }
  .theme-pick button:hover { transform: scale(1.08); }
  .theme-pick button.active {
    border-color: var(--tx);
    box-shadow: 0 0 0 2px var(--bg-grad-1), 0 0 0 3.5px var(--tx);
  }

  .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; }

  @media (max-width: 700px) {
    .settings-grid { grid-template-columns: 1fr; }
  }

  .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; }
  /* ════════════════════════════════════════════════════════════
     Topbar action cluster — flat-pill restyle (parity with FCA v2).
     All topbar pills share the same 32px height + 10px radius so
     the row reads as a single coherent control strip.
       Default: transparent + 1px grey border.
       Hover:   white fill.
       Active:  black with white text (toggled / pressed).
     Generate report stays loud: filled --app + rich multi-colour
     Google Docs glyph on the left.
     CSS rules are scoped to .actions (and unique IDs) so other
     .btn / .btn-primary usages elsewhere in the tool are untouched.
     ──────────────────────────────────────────────────────────── */

  /* Save status — flat pill with status dot; darker font so the
     "Saved · 12s ago" / "Sign in to save" still reads clearly.
     Locked to the same height/line-height/border combo as the
     other topbar pills (32px tall, 30px line-height inside a 1px
     border) so the row is pixel-aligned. */
  .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);
  }

  /* Use-old-V1 — renders at 30px (vs 32px on the flat pills) to
     compensate for its strong warm fill making it feel visually
     thicker than the borderless neighbours. */
  .version-switch-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    width: 30px;
    height: 30px;
    line-height: 28px;
    padding: 0;
    background: var(--warn-dim);
    color: var(--warn);
    border: 1px solid rgba(192, 87, 59, .35);
    border-radius: 10px;
    font-family: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    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 { width: 14px; height: 14px; color: currentColor; flex-shrink: 0; }

  .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.saved      .dot { background: #4caf6c; box-shadow: 0 0 0 2.5px rgba(76,175,108,.18); }
  .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; } }

  .actions { display: flex; justify-content: flex-end; gap: 7px; }
  /* Base .btn — kept for general usage elsewhere in the tool. */
  .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;
  }
  .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-ghost { background: transparent; box-shadow: none; }
  .btn-disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

  /* Topbar-scoped .btn overrides — flat pill, transparent → white → black.
     Locked to the same 32px height + 30px line-height as the other
     topbar pills so every height is pixel-identical. */
  .actions .btn,
  .actions-left .template-picker-btn {
    height: 32px;
    line-height: 30px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--bd);
    border-radius: 10px;
    color: var(--tx);
    font-size: 12px;
    font-weight: 500;
    box-sizing: border-box;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .15s, border-color .15s, color .15s;
  }
  .actions .btn svg,
  .actions-left .template-picker-btn svg { width: 14px; height: 14px; color: var(--tx55); transition: color .15s; flex-shrink: 0; }
  .actions .btn:hover,
  .actions-left .template-picker-btn:hover { background: #fff; border-color: var(--bd2); }
  .actions .btn.is-active,
  .actions .btn:active,
  .actions-left .template-picker-btn:active {
    background: #000;
    color: #fff;
    border-color: #000;
  }
  .actions .btn.is-active svg,
  .actions .btn:active svg,
  .actions-left .template-picker-btn:active svg { color: #fff; }
  .actions .btn.topbar-label-btn { padding: 0 12px; }

  /* Generate report — primary CTA. Filled --app + soft shadow.
     Locked to the same 32px height as the rest of the topbar. */
  #btn-generate {
    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(124, 92, 191, .25);
    gap: 8px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  #btn-generate:hover {
    background: var(--app-strong);
    border-color: var(--app-strong);
    box-shadow: 0 2px 6px rgba(124, 92, 191, .32);
  }
  #btn-generate .gdocs-icon { width: 15px; height: 15px; flex-shrink: 0; }
  #btn-generate > svg:not(.gdocs-icon) {
    width: 12px; height: 12px;
    color: rgba(255,255,255,.85);
  }
  /* Generate button — gated state when required fields are still missing.
     Mirrors FCA v2's pattern: visually muted + a "N missing" hint, but the
     button stays clickable so a click scrolls / switches to the first
     missing field's tab instead of opening the generate flow. */
  #btn-generate.btn-gate {
    background: var(--field-bg, #f6f4ef);
    color: var(--tx55, rgba(14,21,48,.55));
    border-color: var(--bd2);
    box-shadow: none;
  }
  #btn-generate.btn-gate .gdocs-icon { opacity: .5; }
  #btn-generate.btn-gate > svg:not(.gdocs-icon) { color: var(--tx55, rgba(14,21,48,.55)); }
  #btn-generate.btn-gate:hover {
    background: var(--tx10);
    border-color: var(--tx20);
    color: var(--tx, #0e1530);
  }
  /* Red "N missing" hint hidden — the gated button state is still
     shown via the muted #btn-generate.btn-gate styling, but without
     the in-line warning badge. */
  #btn-generate .gen-hint { display: none !important; }
  .topbar-label-btn span { font-size: 12px; }

  /* ───── Main split ───────────────────────────────────────── */
  /* Chat / summary ratio is 1fr / 2fr so the summary (right pane)
     gets ~67% of the workspace — the OT spends most of their time
     there filling/editing the assessment fields, 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); }

  .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-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); }

  /* Typing-dots indicator — mirrors FCA v2 so the three v2 tools share the
     same idle-spinner visual while waiting on extract / polish. */
  .typing-dots { display: inline-flex; gap: 2.5px; padding: 0 3.5px; vertical-align: middle; }
  .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; }
  }

  /* Tool/system chip — "Updated draft · N fields" style. Ported from FCA v2. */
  .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; }

  /* Chat composer — mirrors FCA v2's .composer shape. Pill-style dictate
     CTAs on the left, circular send button on the right. */
  .composer {
    position: relative;
    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;
  }
  /* "/" focus-shortcut hint — visible only when input is empty + unfocused. */
  .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, var(--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; } }
  .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;
  }
  .composer-input::placeholder { color: var(--tx40); }
  .composer-row { display: flex; justify-content: space-between; align-items: center; }
  .composer-tools { display: flex; gap: 5px; flex-wrap: wrap; }
  .send {
    width: 30.5px; height: 30.5px; border-radius: 999px;
    background: #1a1a18; color: #fff; border: 0; cursor: pointer;
    display: grid; place-items: center; flex-shrink: 0;
  }
  .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; }
  .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;
  }
  .btn-kbd {
    font-size: 9.5px; font-weight: 600;
    padding: 1px 5px; border-radius: 4px;
    background: rgba(0,0,0,.06); color: inherit;
    line-height: 1.3;
  }
  .dictate-cta.dictate-active .btn-kbd,
  .dictate-cta--quick.dictate-active .btn-kbd { background: rgba(255,255,255,.22); }

  .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); }
  }

  /* Suggestion chips above the input */
  .suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
  .suggestion-chip {
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--bd2); background: var(--card);
    font-size: 11px; color: var(--tx70); cursor: pointer;
    box-shadow: var(--shadow-sm);
  }
  .suggestion-chip:hover { border-color: var(--app-bd); color: var(--app-strong); }

  /* ───── Summary 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. */
  .summary {
    background: var(--card); border: 1px solid var(--bd);
    border-radius: 18px; box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
  }
  .summary-tabs {
    display: flex; gap: 0; padding: 4px 7px 0 7px;
    background: linear-gradient(180deg, #fbfaf5 0%, #f6f4ee 100%);
    border-bottom: 1px solid var(--bd);
    align-items: flex-end;
  }
  /* Right-side slot inside .summary-tabs — pushes itself to the right edge
     so the outstanding-chip lines up at the toolbar baseline next to the
     active tab. Padding-bottom mirrors FCA v2's chrome. */
  .summary-tabs .head-right {
    display: flex; align-items: center; gap: 7px;
    margin-left: auto;
    padding-bottom: 7px;
  }

  /* ──── Outstanding-fields chip + tray (FCA v2 parity) ──── */
  .outstanding-chip {
    display: inline-flex; align-items: center; gap: 6.5px;
    background: var(--warn-dim, rgba(192,87,59,.10));
    color: var(--warn, #c0573b);
    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, #c0573b); 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 outstanding" to "All required 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); }

  .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, #c0573b);
    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, #c0573b); }
  .tray-item .field { font-size: 11px; font-weight: 600; color: var(--tx); }
  .tray-item .hint  { font-size: 10.5px; color: var(--tx55); }
  /* Brief flash on the outstanding row a gated Generate click points at,
     and on rows opened from the tray. */
  @keyframes attentionFlash {
    0%, 100% { background: transparent; }
    25%, 75% { background: var(--warn-dim, rgba(192,87,59,.10)); }
  }
  .row.attention-flash, .row-value.attention-flash {
    animation: attentionFlash 1.6s ease-in-out 2;
  }
  .summary-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 13px; cursor: pointer;
    font-size: 11.5px; font-weight: 500; color: var(--tx55);
    border: 1px solid transparent; border-bottom: none;
    border-radius: 9px 9px 0 0; background: transparent;
    position: relative; top: 1px;
  }
  .summary-tab:hover { color: var(--tx70); }
  .summary-tab.active {
    background: var(--card); border-color: var(--bd);
    color: var(--tx); font-weight: 600;
  }
  .summary-tab .tab-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--tx20);
  }
  .summary-tab.active .tab-dot,
  .summary-tab.done .tab-dot { background: #4caf6c; }
  .summary-tab.partial .tab-dot { background: var(--warn); }
  .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; line-height: 1;
  }
  .summary-tab .badge.hidden { display: none; }
  .summary-tab.done .badge { background: #4caf6c; }

  .summary-body { flex: 1; overflow-y: auto; padding: 16px 18px 22px; }
  .summary-heading {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 600; color: var(--tx);
    margin: 2px 0 4px 0;
  }
  .summary-sub {
    font-size: 11.5px; color: var(--tx55);
    margin: 0 0 13px 0; line-height: 1.5;
  }

  /* Section card pattern (used inside each tab pane) */
  .section-card {
    background: #fcfbf6; border: 1px solid var(--bd);
    border-radius: 12px; padding: 13px 14.5px;
    margin-bottom: 12px;
  }
  .section-card h3 {
    margin: 0 0 8px 0; font-size: 12.5px; font-weight: 600; color: var(--tx);
    display: flex; align-items: center; gap: 6.5px;
  }
  .section-card .hint { font-size: 10.5px; color: var(--tx55); font-weight: 400; }
  .section-card .partial-badge {
    margin-left: auto;
    font-size: 9.5px; font-weight: 600; color: var(--warn);
    background: var(--warn-dim); padding: 2px 7px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
  }

  /* Field row (label / value) */
  .row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 5px 0; border-bottom: 1px solid var(--tx10);
  }
  .row:last-child { border-bottom: none; }
  .row-label {
    flex: 0 0 130px; font-size: 11.5px; font-weight: 500; color: var(--tx55);
  }
  .row-label .req { color: var(--warn); margin-left: 2px; }
  .row-value {
    flex: 1; font-size: 12px; color: var(--tx);
    padding: 3px 6px; border-radius: 5px; cursor: text;
    min-height: 22px; white-space: pre-wrap; word-break: break-word;
  }
  .row-value.empty { color: var(--tx40); font-style: italic; }
  .row-value:focus,
  .row-value[contenteditable="true"]:focus {
    outline: 2px solid var(--app-bd); background: #fff;
  }
  .row-value:hover:not([contenteditable="true"]) { background: var(--tx10); }
  .row-meta {
    font-size: 9.5px; padding: 2px 6px; border-radius: 999px;
    background: var(--chat-fill); color: var(--app);
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  }
  .row-meta.voice { background: var(--voice-dim); color: var(--voice); }

  /* AT Items table */
  /* AT items — card stack */
  .at-card {
    border: 1px solid var(--bd2); border-radius: 10px;
    background: #fafaf7; margin-bottom: 8px; overflow: hidden;
  }
  .at-card-header {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px 8px; border-bottom: 1px solid var(--bd);
    background: #fff;
  }
  .at-card-num { font-size: 10px; color: var(--tx40); font-weight: 600; min-width: 16px; }
  .at-card-name {
    flex: 1; border: none; background: transparent;
    font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--tx);
    padding: 0; outline: none;
  }
  .at-card-name::placeholder { color: var(--tx40); font-weight: 400; }
  .at-card-name:focus { color: var(--app-strong); }
  .at-cost-badge { display: flex; align-items: center; gap: 5px; }
  .at-cost-badge > span { font-size: 10px; color: var(--tx40); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
  .at-cost-input {
    border: 1px solid var(--bd2); border-radius: 6px; padding: 3px 7px;
    font-family: inherit; font-size: 11.5px; color: var(--tx);
    background: #fff; width: 84px; text-align: right; outline: none;
  }
  .at-cost-input:focus { border-color: var(--app-bd); }
  .at-card-remove {
    background: transparent; border: none; cursor: pointer;
    color: var(--tx40); font-size: 15px; line-height: 1;
    padding: 2px 4px; border-radius: 4px;
  }
  .at-card-remove:hover { color: var(--warn); background: var(--warn-dim); }
  .at-card-body {
    padding: 9px 12px 10px;
    display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-start;
  }
  .at-meta-group { display: flex; flex-direction: column; gap: 4px; }
  .at-meta-label {
    font-size: 9.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--tx40);
  }
  .pill-row { display: flex; gap: 4px; flex-wrap: wrap; }
  .pill-opt {
    padding: 3px 11px; border-radius: 999px;
    border: 1px solid var(--bd2); background: #fff; color: var(--tx55);
    font-size: 10.5px; font-weight: 500; cursor: pointer;
    white-space: nowrap; user-select: none; transition: all .1s;
  }
  .pill-opt:hover { border-color: var(--app-bd); color: var(--app); }
  .pill-opt.sel-tier-low  { background: rgba(108,174,138,.15); color: #2f6e4e; border-color: rgba(108,174,138,.30); }
  .pill-opt.sel-tier-mid  { background: rgba(217,154,58,.15);  color: #8a5e1a; border-color: rgba(217,154,58,.30); }
  .pill-opt.sel-tier-high { background: rgba(176,69,69,.14);   color: #862c2c; border-color: rgba(176,69,69,.25); }
  .pill-opt.sel-risk-low  { background: rgba(108,174,138,.15); color: #2f6e4e; border-color: rgba(108,174,138,.30); }
  .pill-opt.sel-risk-high { background: rgba(176,69,69,.14);   color: #862c2c; border-color: rgba(176,69,69,.25); }
  .pill-opt.sel-yes { background: var(--app-dim); color: var(--app-strong); border-color: var(--app-bd); }
  .pill-opt.sel-no  { background: var(--tx10); color: var(--tx55); border-color: var(--bd2); font-weight: 600; }
  .at-card-just-row { padding: 0 12px; border-top: 1px solid var(--bd); }
  .at-card-just-row input {
    width: 100%; border: none; background: transparent;
    font-family: inherit; font-size: 11px; color: var(--tx55);
    padding: 7px 0; outline: none;
  }
  .at-card-just-row input::placeholder { color: var(--tx40); }
  .at-empty {
    padding: 14px; text-align: center; font-size: 11.5px; color: var(--tx55);
    border: 1px dashed var(--bd2); border-radius: 9px; background: #fbfbf6;
  }
  /* Rich empty-state — ported from FCA v2 for the Assessments tab so the
     first impression matches across tools (icon + heading + body). The
     existing `.at-empty` stays for AT items + AT features which use a
     more compact dashed-border treatment. */
  .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;
  }
  .at-quote-warn {
    margin-top: 9px;
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 11px; border-radius: 8px;
    background: var(--warn-dim); color: #813a23;
    font-size: 11px; line-height: 1.45;
    border: 1px solid rgba(192,87,59,.20);
  }
  .at-quote-warn svg { width: 13.5px; height: 13.5px; flex-shrink: 0; margin-top: 1.5px; color: var(--warn); }

  .add-row-btn {
    margin-top: 7px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px;
    background: var(--card); border: 1px dashed var(--bd2);
    color: var(--tx70); font-size: 11.5px; cursor: pointer; font-family: inherit;
  }
  .add-row-btn:hover { border-color: var(--app-bd); color: var(--app-strong); }

  /* Inline ✨ Polish button — injected after every textarea by wireTabEvents */
  .polish-bubble {
    position: absolute;
    top: 6px; right: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2.5px 7px; border-radius: 999px;
    background: var(--voice-dim); color: var(--voice);
    border: 1px solid var(--voice-bd);
    font-size: 9.5px; font-weight: 600;
    cursor: pointer; opacity: .55; transition: opacity .15s;
    text-transform: uppercase; letter-spacing: 0.04em;
    user-select: none; line-height: 1;
  }
  .polish-bubble:hover { opacity: 1; }
  .polish-host { position: relative; }

  /* Form controls inside the summary */
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 13px; }
  .form-field { display: flex; flex-direction: column; gap: 4px; }
  .form-field > label {
    font-size: 10.5px; font-weight: 600; color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .form-field input[type="text"],
  .form-field input[type="number"],
  .form-field input[type="date"],
  .form-field select,
  .form-field textarea {
    width: 100%; padding: 7px 10px; border: 1px solid var(--bd2); border-radius: 7px;
    font-family: inherit; font-size: 12px; color: var(--tx);
    background: var(--field-bg);
  }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: 2px solid var(--app-bd); background: #fff; border-color: var(--app-bd);
  }
  .form-field textarea { min-height: 60px; resize: vertical; }

  /* NDIS goals — row wrap holds the textarea + a remove ×. The
     textarea uses flex-basis:0 so it grows from nothing instead of
     starting at <textarea>'s default cols-driven intrinsic width;
     min-width:0 lets it shrink past that intrinsic width if needed. */
  .goal-row-wrap { display: flex; align-items: flex-start; gap: 7px; width: 100%; }
  /* injectPolishBubbles() wraps textareas in <div class="polish-host">
     so the ✨ Polish chip can absolute-position itself. The host needs
     to be a growing flex child here so its inner textarea fills the
     wrap, otherwise the textarea collapses to its cols-driven intrinsic
     width and renders narrow. */
  .goal-row-wrap > .polish-host {
    flex: 1 1 0;
    min-width: 0;
  }
  .goal-row-wrap textarea {
    width: 100%;
    min-width: 0;
    min-height: 56px;
  }
  .goal-remove-btn {
    width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid var(--bd); background: transparent;
    color: var(--tx55); font-size: 16px; line-height: 1;
    cursor: pointer; flex-shrink: 0; margin-top: 1px;
    display: grid; place-items: center;
    transition: background .12s, color .12s, border-color .12s;
  }
  .goal-remove-btn:hover { color: var(--warn); border-color: var(--warn); background: var(--warn-dim); }
  .goal-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 8px;
    border: 1px dashed var(--bd2); background: transparent;
    color: var(--tx70); font-size: 11.5px; font-weight: 500;
    cursor: pointer; align-self: flex-start;
    transition: border-color .12s, color .12s, background .12s;
  }
  .goal-add-btn:hover { border-color: var(--app); color: var(--app); background: var(--app-dim); }

  .yn-group { display: inline-flex; gap: 4px; padding: 3px; background: var(--tx10); border-radius: 999px; }
  .yn-btn {
    padding: 4px 12px; font-size: 11px; font-weight: 600;
    border-radius: 999px; cursor: pointer; color: var(--tx55);
    border: 1px solid transparent;
  }
  .yn-btn.active-yes { background: var(--app); color: #fff; border-color: var(--app); }
  .yn-btn.active-no  { background: var(--card); color: var(--tx); border-color: var(--bd2); }

  /* Assessments list — styled to match FCA v2's compact, info-dense look */
  .assess-card {
    background: #fff; border: 1px solid var(--bd);
    border-radius: 12px; padding: 12px 13px 10px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
  }
  .assess-card.scored { padding-bottom: 11px; }
  /* Card states — match FCA v2's .ax-card.partial / .empty so a half-
     filled assessment reads warm-warning at a glance and an attached-
     but-untouched one reads dashed-placeholder. Hover restores the
     normal border colour so removing/editing isn't obscured. */
  .assess-card.partial {
    border-color: rgba(192,87,59,.22);
    background: linear-gradient(180deg, #fdf8f5 0%, #fff 50%);
  }
  .assess-card.empty {
    border-style: dashed;
    background: var(--field-bg);
  }
  .assess-card:hover { border-color: var(--bd2, var(--bd)); }
  .assess-head {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 5px;
  }
  .assess-head .name {
    font-size: 13px; font-weight: 600; color: var(--tx);
    letter-spacing: -.005em;
  }
  .assess-head .hint {
    font-size: 10.5px; color: var(--tx55); font-weight: 400;
    flex: 1; min-width: 0;
  }
  .assess-head button {
    background: transparent; border: none; cursor: pointer;
    color: var(--tx40); font-size: 16px; line-height: 1;
    padding: 0 4px; flex-shrink: 0;
  }
  .assess-head button:hover { color: var(--warn); }
  .assess-head .sev-tag {
    padding: 1px 8px; font-size: 9.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px;
    color: #fff;
  }
  .assess-head .sev-tag.sev-none { background: var(--sev-none); }
  .assess-head .sev-tag.sev-mild { background: var(--sev-mild); }
  .assess-head .sev-tag.sev-mod  { background: var(--sev-mod); }
  .assess-head .sev-tag.sev-sev  { background: var(--sev-sev); }
  .assess-head .sev-tag.sev-ext  { background: var(--sev-ext); }
  .assess-pick {
    display: flex; gap: 8px; align-items: center; padding: 11px 13px;
    border: 1px dashed var(--bd2); border-radius: 12px;
    cursor: pointer; color: var(--tx70); font-size: 11.5px;
    background: var(--field-bg);
  }
  .assess-pick:hover { border-color: var(--app-bd); color: var(--app-strong); background: var(--app-dim); }
  .assess-pick svg { width: 13.5px; height: 13.5px; color: var(--tx55); }

  /* Custom-template item-level scoring card — tighter, more compact look
     matching FCA v2's chip + score-row pattern. */
  .assess-card.scored .legend-strip {
    display: flex; flex-wrap: wrap; gap: 3px 11px;
    padding: 5px 10px; margin: 5px 0 8px;
    background: var(--field-bg); border: 1px solid var(--field-bd);
    border-radius: 7px; font-size: 10px; color: var(--tx55);
  }
  .assess-card.scored .legend-strip span { white-space: nowrap; }
  .scored-rows { display: flex; flex-direction: column; gap: 2px; }
  .scored-row {
    display: flex; align-items: center; gap: 8px;
    padding: 3.5px 6px; border-bottom: 1px solid var(--tx10);
    font-size: 11.5px;
  }
  .scored-row:last-child { border-bottom: none; }
  .sr-label { flex: 1; color: var(--tx); font-size: 11.5px; }
  .chips { display: inline-flex; gap: 2.5px; }
  .chip-btn {
    width: 22px; height: 22px;
    border: 1px solid var(--bd); border-radius: 5px;
    background: #fff; color: var(--tx70);
    font-family: inherit; font-size: 11px; font-weight: 600;
    cursor: pointer; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
  }
  .chip-btn:hover { border-color: var(--bd2); }
  .chip-btn.active { background: var(--app); color: #fff; border-color: var(--app); }
  .scored-group {
    margin: 6px 0; padding: 6px 9px;
    background: var(--field-bg); border: 1px solid var(--field-bd); border-radius: 9px;
  }
  .sg-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px; font-weight: 600; color: var(--tx55);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 3px;
    padding-bottom: 3px; border-bottom: 1px solid var(--bd);
  }
  .sg-head .sg-tot {
    font-size: 11px; font-weight: 700; color: var(--app-strong);
    text-transform: none; letter-spacing: 0;
  }
  .assess-totals {
    margin-top: 10px; padding: 7px 11px;
    background: var(--app-dim); color: var(--app-strong);
    border-radius: 8px;
    font-size: 11.5px; font-weight: 500;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  }
  .assess-totals .num { font-weight: 700; font-size: 13.5px; }
  .whodas-mode-row { display: flex; gap: 5px; margin: 8px 0 4px; }
  .mode-tab {
    background: var(--card); border: 1px solid var(--bd); color: var(--tx55);
    padding: 4px 10px; border-radius: 7px;
    font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  }
  .mode-tab.active { background: var(--app); border-color: var(--app); color: #fff; }

  /* Select-card per-item dropdown (MBI / Lawton bespoke options) */
  .scored-row .select-narrow {
    min-width: 260px; max-width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--bd); border-radius: 7px;
    background: #fff;
    font-family: inherit; font-size: 11px; color: var(--tx);
  }
  .scored-row .select-narrow:focus { outline: 2px solid var(--app-bd); border-color: var(--app-bd); }

  /* Waterlow toggle pills */
  .toggle-row { display: flex; flex-wrap: wrap; gap: 5px; }
  .toggle-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px 4px 10px;
    border: 1px solid var(--bd); border-radius: 999px;
    background: #fff; color: var(--tx70);
    font-family: inherit; font-size: 11px; font-weight: 500;
    cursor: pointer; line-height: 1.2;
  }
  .toggle-pill:hover { border-color: var(--app-bd); }
  .toggle-pill.active {
    background: var(--app); color: #fff; border-color: var(--app);
    font-weight: 600;
  }
  .toggle-pill .tp-pts {
    font-size: 9.5px; font-weight: 700;
    padding: 1px 5px; border-radius: 4px;
    background: rgba(0,0,0,.06); color: inherit;
  }
  .toggle-pill.active .tp-pts { background: rgba(255,255,255,.22); }

  /* ALSAR three-axis layout */
  .alsar-header {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    align-items: center; gap: 8px;
    padding: 4px 8px 6px;
    border-bottom: 1px solid var(--tx10);
    font-size: 10.5px; font-weight: 600;
    color: var(--tx55); text-transform: uppercase; letter-spacing: 0.04em;
  }
  .alsar-header .axis-head { text-align: center; }
  .alsar-row {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    align-items: center; gap: 8px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--tx10);
    font-size: 11.5px;
  }
  .alsar-row:last-child { border-bottom: none; }
  .alsar-axis-cell { display: inline-flex; justify-content: center; }

  /* Notes-button "has notes" dot. */
  #notes-btn { position: relative; }
  .notes-badge {
    display: none;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--app);
    margin-left: 2px;
  }
  .notes-badge.has { display: inline-block; }

  /* ───── Hydration overlay (decrypt-in-progress) ────────── */
  .hydration-overlay {
    position: fixed; inset: 0;
    background: var(--bg-grad-1, var(--bg));
    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: 0 8px 28px rgba(26,26,24,.12);
    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;
  }

  /* ───── Modals ─────────────────────────────────────────── */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: none; align-items: center; justify-content: center;
    background: rgba(26,26,24,.45); backdrop-filter: blur(2px);
  }
  .modal-overlay.open { display: flex; }
  .modal-card {
    background: var(--card); border-radius: 16px;
    max-width: 560px; width: calc(100% - 32px); max-height: 88vh; overflow: hidden;
    box-shadow: 0 12px 48px rgba(26,26,24,.18);
    display: flex; flex-direction: column;
  }
  .modal-card.wide   { max-width: 760px; }
  .modal-card.narrow { max-width: 440px; }

  /* ── Customise modal: FCA-style split layout (controls left · live preview right).
        Scoped to #customise-modal so other modals keep their existing chrome. ── */
  #customise-modal .modal-card { max-width: 880px; }
  #customise-modal .modal-head h3 {
    margin: 0; font-weight: 500; font-size: 18px; color: var(--tx);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  }
  #customise-modal .modal-head .modal-close svg { width: 14.5px; height: 14.5px; }
  #customise-modal .modal-body.settings-split {
    padding: 0; overflow: hidden; display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
  }
  #customise-modal .settings-main {
    padding: 14px 22px 18px; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; min-width: 0;
  }
  #customise-modal .settings-preview {
    background: var(--field-bg); border-left: 1px solid var(--bd);
    padding: 18px; overflow-y: auto;
  }
  #customise-modal .settings-preview > div { position: sticky; top: 0; }
  #customise-modal #colour-presets-mount { margin-bottom: 14px; }
  #customise-modal .settings-section { padding: 16px 0; border-top: 1px solid var(--bd); }
  #customise-modal .settings-section:first-of-type { padding-top: 2px; border-top: none; }
  #customise-modal .settings-section.compact { padding-top: 0; }
  #customise-modal .settings-section-head { margin-bottom: 12px; }
  #customise-modal .settings-section.compact .settings-section-head { margin-bottom: 9px; }
  #customise-modal .settings-section-head h4 {
    margin: 0 0 2px 0; font-weight: 600; font-size: 13.5px; color: var(--tx);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  }
  #customise-modal .settings-section-sub { font-size: 11.5px; color: var(--tx55); line-height: 1.4; }
  #customise-modal .settings-split .settings-section.compact .settings-grid { grid-template-columns: 1fr 1fr; gap: 9px 11px; }
  #customise-modal .settings-split .settings-field { min-width: 0; }
  @media (max-width: 720px) {
    #customise-modal .modal-card { max-width: 560px; }
    #customise-modal .modal-body.settings-split { grid-template-columns: 1fr; overflow-y: auto; }
    #customise-modal .settings-main { overflow: visible; }
    #customise-modal .settings-preview { border-left: none; border-top: 1px solid var(--bd); }
    #customise-modal .settings-preview > div { position: static; }
  }
  .modal-head {
    padding: 14px 18px 11px;
    border-bottom: 1px solid var(--bd);
    display: flex; align-items: center; gap: 10px;
  }
  .modal-head h2 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--tx); }
  .modal-head .modal-close {
    margin-left: auto;
    background: transparent; border: none; cursor: pointer;
    color: var(--tx55); font-size: 18px; padding: 0 4px; line-height: 1;
  }
  .modal-body { flex: 1; overflow-y: auto; padding: 16px 18px; font-size: 12.5px; color: var(--tx); }
  .modal-foot {
    padding: 12px 18px; border-top: 1px solid var(--bd);
    display: flex; gap: 8px; justify-content: flex-end;
  }
  .spl-label { display: block; font-size: 11px; font-weight: 600; color: var(--tx55); text-transform: uppercase; letter-spacing: .04em; }

  /* Drafts modal list */
  .drafts-list { display: flex; flex-direction: column; gap: 6px; }
  .draft-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border: 1px solid var(--bd); border-radius: 10px;
    background: #fcfbf6; cursor: pointer;
  }
  .draft-item:hover { border-color: var(--app-bd); }
  .draft-item .name { font-weight: 600; color: var(--tx); font-size: 12px; }
  .draft-item .meta { font-size: 10.5px; color: var(--tx55); margin-top: 2px; }
  .draft-item .pct {
    margin-left: auto; font-size: 10.5px; font-weight: 600;
    color: var(--app); background: var(--app-dim);
    padding: 2px 8px; border-radius: 999px;
  }
  .draft-item .actions { margin-left: 8px; display: flex; gap: 4px; }
  .draft-item .actions button {
    background: transparent; border: 1px solid var(--bd);
    border-radius: 6px; padding: 3px 7px; font-size: 10.5px; cursor: pointer;
    color: var(--tx55);
  }
  .draft-item .actions button:hover { color: var(--warn); border-color: var(--warn); }

  /* Picker (assessment search) */
  .picker-search {
    width: 100%; padding: 9px 12px; border: 1px solid var(--bd2); border-radius: 9px;
    font-family: inherit; font-size: 12.5px; background: var(--field-bg);
    margin-bottom: 10px;
  }
  .picker-search:focus { outline: 2px solid var(--app-bd); background: #fff; }
  .picker-list { display: flex; flex-direction: column; gap: 5px; max-height: 380px; overflow-y: auto; }
  .picker-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 11px; border: 1px solid var(--bd); border-radius: 8px;
    cursor: pointer; background: #fcfbf6;
  }
  .picker-item:hover { border-color: var(--app-bd); }
  .picker-item .pi-name { font-weight: 600; font-size: 12px; color: var(--tx); }
  .picker-item .pi-desc { font-size: 10.5px; color: var(--tx55); margin-top: 2px; line-height: 1.4; }
  .picker-item .pi-tag {
    margin-left: auto; font-size: 9.5px; font-weight: 600;
    padding: 2px 7px; border-radius: 999px;
    background: var(--app-dim); color: var(--app-strong);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .picker-item.added { opacity: .55; pointer-events: none; }

  /* 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 `color:#fff` which collided with the light --tx in dark mode
     (white-on-white). */
  .toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--tx); color: var(--card);
    padding: 9px 18px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    box-shadow: var(--shadow-md);
    z-index: 400; opacity: 0; transition: opacity .25s, transform .25s;
    pointer-events: none;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

  /* Customisation reminder banner */
  .customise-reminder {
    margin: 10px 0 14px 0;
    padding: 10px 13px;
    background: linear-gradient(90deg, var(--app-dim) 0%, transparent 80%);
    border: 1px solid var(--app-bd); border-left: 3px solid var(--app);
    border-radius: 10px;
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 11.5px; color: var(--tx);
  }
  .customise-reminder svg { width: 15px; height: 15px; color: var(--app); flex-shrink: 0; margin-top: 1px; }
  .customise-reminder .title { font-weight: 600; margin-bottom: 2px; color: var(--app-strong); }
  .customise-reminder .body { color: var(--tx70); line-height: 1.45; }
  .customise-reminder a { color: var(--app-strong); font-weight: 600; cursor: pointer; }

  /* NDIS-number chip (UX portability item 4) */
  .row-ndis-warn {
    margin-left: 8px; flex-shrink: 0;
    padding: 1px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 600;
    background: var(--warn-dim); color: var(--warn);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .row-ndis-warn.valid {
    background: var(--app-dim); color: var(--app-strong);
    text-transform: none; letter-spacing: 0; font-weight: 500;
  }

  /* Pre-flight checklist (UX portability item 15) — severity-coded rows
     with a Jump button per check so the OT can hop straight to the gap. */
  .pfm-check {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 9px 11px; border-radius: 9px;
    border: 1px solid var(--bd); background: var(--card);
    font-size: 11.5px;
  }
  .pfm-check.ok    { border-color: rgba(50,126,88,.18);  background: rgba(50,126,88,.04); }
  .pfm-check.info  { border-color: var(--bd); }
  .pfm-check.warn  { border-color: rgba(217,154,58,.30);  background: rgba(217,154,58,.06); }
  .pfm-check.error { border-color: rgba(192,87,59,.30);   background: rgba(192,87,59,.06); }
  .pfm-icon {
    width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
    margin-top: 1px;
  }
  .pfm-check.ok    .pfm-icon { background: var(--app); }
  .pfm-check.info  .pfm-icon { background: var(--tx40); }
  .pfm-check.warn  .pfm-icon { background: var(--sev-mod); }
  .pfm-check.error .pfm-icon { background: var(--warn); }
  .pfm-body { flex: 1; min-width: 0; }
  .pfm-label { font-weight: 600; color: var(--tx); margin-bottom: 1px; }
  .pfm-detail { font-size: 11px; color: var(--tx55); line-height: 1.5; }
  .pfm-jump {
    flex-shrink: 0; align-self: center;
    background: transparent; border: 1px solid var(--bd); border-radius: 6px;
    padding: 3px 9px; font-size: 10.5px; font-weight: 600; color: var(--tx70);
    cursor: pointer; font-family: inherit;
  }
  .pfm-jump:hover { border-color: var(--app-bd); color: var(--app-strong); }

  /* Polish modal diff view (UX portability item 10) — opt-in word-level
     LCS diff. del = strike-through red, add = highlight green. */
  .polish-diff-view .del { background: rgba(192,87,59,.14); color: var(--warn); text-decoration: line-through; padding: 0 2px; border-radius: 3px; }
  .polish-diff-view .add { background: rgba(50,126,88,.16);  color: var(--app-strong); padding: 0 2px; border-radius: 3px; }
  .polish-diff-toggle:hover { border-color: var(--app-bd); color: var(--app-strong); }
  .polish-diff-toggle.active { background: var(--app-dim); color: var(--app-strong); border-color: var(--app-bd); }

  /* Drafts hover preview (UX portability item 9) — popover on hover.
     Body fetched on first hover, then cached. Anchored to the row. */
  .draft-preview-pop {
    position: fixed; z-index: 220;
    min-width: 260px; max-width: 340px;
    background: var(--card);
    border: 1px solid var(--bd); border-radius: 11px;
    box-shadow: 0 12px 36px rgba(26,26,24,.18);
    padding: 11px 13px;
    font-size: 11.5px; line-height: 1.5;
    pointer-events: none;
  }
  .draft-preview-pop .dpp-name { font-weight: 600; color: var(--tx); margin-bottom: 5px; font-size: 12.5px; }
  .draft-preview-pop .dpp-meta { color: var(--tx55); font-size: 10.5px; margin-bottom: 7px; }
  .draft-preview-pop .dpp-row { display: flex; gap: 6px; padding: 3px 0; border-bottom: 1px dashed var(--tx10); }
  .draft-preview-pop .dpp-row:last-child { border-bottom: none; }
  .draft-preview-pop .dpp-label { color: var(--tx55); font-weight: 500; flex: 0 0 80px; font-size: 10.5px; }
  .draft-preview-pop .dpp-value { color: var(--tx); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .draft-preview-pop .dpp-loading { color: var(--tx55); font-style: italic; padding: 6px 0; }

  /* Mobile section dropdown (UX portability item 6) — shown <700px in
     place of the horizontal tab rail. Status glyphs are inserted via
     _refreshSumTabSelectStatus(). */
  .summary-tab-select {
    display: none;
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--bd); border-radius: 9px;
    background: var(--card); color: var(--tx);
    font-family: inherit; font-size: 12.5px; font-weight: 500;
    margin: 4px 0;
  }

  /* G11 defensive nowrap so future topbar content can't compress the row.
     `.save-status` and `.btn` are flex items inside .actions / .crumbs. */
  .save-status, .topbar .btn, .template-pill, .progress-pill, .mode-badge { white-space: nowrap; flex-shrink: 0; }

  /* Mobile responsiveness */
  .mobile-pane-toggle { display: none; }
  @media (max-width: 900px) {
    .main { grid-template-columns: 1fr; }
    /* Explicit chat/summary toggle replaces the old body.show-summary pattern. */
    .main[data-mobile-pane="chat"]    .summary { display: none; }
    .main[data-mobile-pane="summary"] .chat    { display: none; }
    .main[data-mobile-pane="summary"] .summary { display: flex; }

    .mobile-pane-toggle {
      display: inline-flex;
      align-self: center;
      background: var(--tx10, rgba(14,21,48,.06));
      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: 0 1px 2px rgba(26,26,24,.08);
    }
    .mobile-pane-toggle button svg { width: 11.5px; height: 11.5px; }
  }
  @media (max-width: 700px) {
    .summary-tabs { display: none; }
    .summary-tab-select { display: block; }
  }

  /* Hide-when-empty utility */
  .hidden, [hidden] { display: none !important; }

  /* ════════════════════════════════════════════════════════════════
     First-run tutorial — spotlight + dim + callout card.
     Ported from FCA v2 to match the same OT-facing shape; palette
     stays black-on-white so the chrome reads identically across the
     two tools (a tour is a tour, not a per-product surface).
     ════════════════════════════════════════════════════════════════ */
  /* V1 + Tutorial have strong coloured fills, which make them feel
     visually thicker than the transparent/borderless flat pills next
     to them — even at identical pixel heights. They render at 30px
     (vs 32px on the flat pills) so the row reads as a single band. */
  /* Quiet card-style icon button, matching the Downloads bell beside it
     and the workspace tutorial button (no loud fill). */
  .tutorial-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--card);
    color: var(--tx);
    border: 1px solid var(--bd2);
    border-radius: 10px;
    font-family: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
    white-space: nowrap; flex-shrink: 0;
    box-sizing: border-box;
    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 { width: 14px; height: 14px; color: currentColor; flex-shrink: 0; }

  /* ════════════════════════════════════════════════════════════════
     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;
  }

  .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 (step 2) so the tour
     reads the same for every OT regardless of their real drafts. The real
     drafts UI lives in #drafts-modal above. */
  .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 1) styles — visual-only, reverted on advance. */
  .composer-input.tut-demo-typing { caret-color: var(--app); }
  textarea.tut-demo-typing { caret-color: var(--app); background: #fff; border-color: var(--app-bd); }
  .row.tut-demo-filling .row-value { background: rgba(124,92,191,.08); border-radius: 6px; transition: background-color .25s ease; }
  .row.tut-demo-flash .row-value { animation: tutDemoFlash 1.1s ease-out 1; }
  @keyframes tutDemoFlash {
    0%   { background: rgba(124,92,191,.22); box-shadow: inset 0 0 0 1px rgba(124,92,191,.35); }
    100% { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
  }
  .form-field.tut-demo-flash textarea,
  .form-field.tut-demo-flash input { animation: tutDemoFlashField 1.1s ease-out 1; }
  @keyframes tutDemoFlashField {
    0%   { box-shadow: 0 0 0 2px rgba(124,92,191,.35), inset 0 0 0 1px rgba(124,92,191,.25); }
    100% { box-shadow: 0 0 0 0 rgba(124,92,191,0), 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 AT 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; }

/* ── spin keyframe (was inline <style> in the generate modal) ── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── CSP utility classes (auto-generated from former inline style="") ── */
.atu-1.atu-1{width:0%}
.atu-2.atu-2{color:#aaa;font-size:11px}
.atu-3.atu-3{padding:0 4px 4px}
.atu-4.atu-4{max-width:420px;text-align:center}
.atu-5.atu-5{font-size:32px;line-height:1;margin-bottom:14px}
.atu-6.atu-6{font-size:15px;font-weight:600;color:var(--tx);margin-bottom:8px}
.atu-7.atu-7{font-size:12.5px;color:var(--tx55);line-height:1.6;margin:0 0 18px}
.atu-8.atu-8{padding:14px 22px 4px}
.atu-9.atu-9{font-size:12.5px;color:var(--tx55);margin:0 0 14px 0}
.atu-10.atu-10{--c:#327e58}
.atu-11.atu-11{--c:#3461e8}
.atu-12.atu-12{--c:#7a52d4}
.atu-13.atu-13{--c:#1f8a8a}
.atu-14.atu-14{--c:#e0682a}
.atu-15.atu-15{--c:#c0392b}
.atu-16.atu-16{--c:#d34ba3}
.atu-17.atu-17{font-size:11px;color:var(--tx55)}
.atu-18.atu-18{font-size:12px;color:var(--tx70);margin:0 0 14px;line-height:1.55}
.atu-19.atu-19{font-size:11.5px;color:var(--tx55);margin:0 0 8px}
.atu-20.atu-20{width:100%;min-height:80px;margin-top:5px;padding:8px 10px;border:1px solid var(--bd2);border-radius:8px;font-family:inherit;font-size:12px;background:var(--field-bg);color:var(--tx70)}
.atu-21.atu-21{display:flex;align-items:center;margin-top:10px;gap:6px}
.atu-22.atu-22{margin:0}
.atu-23.atu-23{margin-left:auto;background:transparent;border:1px solid var(--bd);border-radius:6px;padding:3px 9px;font-size:10.5px;font-weight:600;color:var(--tx55);cursor:pointer;text-transform:uppercase;letter-spacing:0.04em}
.atu-24.atu-24{width:100%;min-height:120px;margin-top:5px;padding:8px 10px;border:1px solid var(--bd2);border-radius:8px;font-family:inherit;font-size:12px;background:var(--field-bg);color:var(--tx)}
.atu-25.atu-25{z-index:210}
.atu-26.atu-26{font-size:11.5px;color:var(--tx55);margin:0 0 12px;line-height:1.55}
.atu-27.atu-27{display:flex;flex-direction:column;gap:7px}
.atu-28.atu-28{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tx55)}
.atu-29.atu-29{font-size:12px;color:var(--tx70);line-height:1.5;margin:0 0 12px}
.atu-30.atu-30{background:#fefce8;border:1px solid #fde047;border-radius:9px;padding:9px 12px;font-size:11.5px;color:#854d0e;line-height:1.5;margin-bottom:10px}
.atu-31.atu-31{background:#fef2f2;border:1px solid #fca5a5;border-radius:9px;padding:9px 12px;font-size:11.5px;color:#991b1b;line-height:1.5}
.atu-32.atu-32{text-align:center;padding:14px 0}
.atu-33.atu-33{width:48px;height:48px;border:3px solid var(--app-dim);border-top-color:var(--app);border-radius:50%;margin:0 auto 10px;animation:spin 1s linear infinite}
.atu-34.atu-34{font-size:13px;font-weight:600;color:var(--tx)}
.atu-35.atu-35{font-size:11.5px;color:var(--tx55);margin-top:4px}
.atu-36.atu-36{font-size:12px;color:var(--tx);line-height:1.55;margin:0 0 12px}
.atu-37.atu-37{max-width:620px}
.atu-38.atu-38{padding:14px 22px}
.atu-39.atu-39{font-size:12.5px;color:var(--tx55);margin:0 0 12px 0}
.atu-40.atu-40{width:100%;min-height:240px;font-family:inherit;font-size:13.5px;line-height:1.55;padding:12px 14px;border:1px solid var(--bd);border-radius:10px;background:var(--field-bg, var(--bg));resize:vertical;outline:none;color:var(--tx)}
.atu-41.atu-41{font-size:11px;color:var(--tx55);margin:8px 0 0}
.atu-42.atu-42{z-index:270}
.atu-43.atu-43{padding:11px 14.5px}
.atu-44.atu-44{width:71%}
.atu-45.atu-45{width:88%}
.atu-46.atu-46{width:22%}
.atu-47.atu-47{width:100%;background:var(--app-strong)}
.atu-48.atu-48{font-size:11px;color:var(--tx55);margin-right:auto}
.atu-49.atu-49{color:var(--app-strong);font-weight:600;font-size:11.5px}
.atu-50.atu-50{color:var(--app-strong)}
.atu-51.atu-51{grid-template-columns:1fr}
.atu-52.atu-52{display:flex;align-items:center;gap:8px;font-size:11.5px}
.atu-53.atu-53{margin:0 0 9px}
.atu-54.atu-54{margin-left:9px;font-size:11px;color:var(--tx55)}
.atu-55.atu-55{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.atu-56.atu-56{margin-top:9px;display:flex;align-items:center;gap:8px}
.atu-57.atu-57{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--field-bg);border:1px solid var(--bd);border-radius:8px;font-size:11.5px}
.atu-58.atu-58{background:var(--app-dim);color:var(--app);font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.atu-59.atu-59{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atu-60.atu-60{font-size:10.5px;color:var(--tx55)}
.atu-61.atu-61{background:transparent;border:none;cursor:pointer;color:var(--tx55);font-size:14px;line-height:1}
.atu-62.atu-62{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#fbfaf5;border:1px dashed var(--bd2);border-radius:8px;font-size:11.5px}
.atu-63.atu-63{background:var(--tx10);color:var(--tx55);font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.atu-64.atu-64{color:var(--tx40);font-size:10px}
.atu-65.atu-65{grid-column:1/-1}
.atu-66.atu-66{width:100%;min-height:80px}
.atu-67.atu-67{width:100%;min-height:64px}
.atu-68.atu-68{margin-bottom:8px}
.atu-69.atu-69{width:100%;min-height:70px}
.atu-70.atu-70{margin:0 12px 10px}
.atu-71.atu-71{display:flex;flex-direction:column;gap:5px}
.atu-72.atu-72{display:flex;gap:6px;align-items:center}
.atu-73.atu-73{color:var(--tx40);font-size:10.5px;width:18px}
.atu-74.atu-74{flex:1;padding:6px 9px;border:1px solid var(--bd);border-radius:7px;font-size:11.5px;background:var(--field-bg);color:var(--tx)}
.atu-75.atu-75{background:transparent;border:1px solid var(--bd);border-radius:6px;padding:3px 8px;cursor:pointer;color:var(--tx55);font-size:11px}
.atu-76.atu-76{margin-top:10px}
.atu-77.atu-77{border:1px solid var(--bd);border-radius:9px;padding:9px;margin-bottom:7px;background:var(--card)}
.atu-78.atu-78{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.atu-79.atu-79{color:var(--tx40);font-size:10.5px}
.atu-80.atu-80{margin-left:auto;background:transparent;border:none;cursor:pointer;color:var(--tx55);font-size:14px}
.atu-81.atu-81{margin-top:6px}
.atu-82.atu-82{padding:1px 8px;font-size:10px;font-weight:600;border-radius:999px;color:#fff}
.atu-83.atu-83{margin:4px 0 8px}
.atu-84.atu-84{border:none;padding:4px 0}
.atu-85.atu-85{flex:0 0 auto;color:var(--tx55);font-size:10.5px}
.atu-86.atu-86{margin-left:auto}
.atu-87.atu-87{font-size:10.5px;color:var(--tx55);font-weight:500}
.atu-88.atu-88{color:var(--tx40);font-weight:400}
.atu-89.atu-89{margin:8px 0 6px}
.atu-90.atu-90{margin-top:10px;max-width:240px}
.atu-91.atu-91{margin-top:9px}
.atu-92.atu-92{margin-top:8px}
.atu-93.atu-93{color:var(--sev-sev)}
.atu-94.atu-94{margin:5px 0 0 18px}
.atu-95.atu-95{font-size:11px;color:var(--tx55);text-align:center;padding:14px 0}
.atu-96.atu-96{font-size:11px;color:var(--sev-sev);text-align:center;padding:14px 0}
.atu-97.atu-97{flex:1;min-width:0}
.atu-98.atu-98{white-space:pre-line}
.atu-99.atu-99{display:inline-flex}
.atu-100.atu-100{color:#555;font-size:12.5px}
.atu-101.atu-101{color:#000}

/* ── display-state + remainder classes (former display:none inline styles) ── */
.at-none.at-none{display:none}
.atu-102.atu-102{position:fixed;inset:0;background:var(--surface,#faf8f4);z-index:280;align-items:center;justify-content:center;padding:24px}
.atu-103.atu-103{font-size:11.5px;color:var(--tx55);text-align:center;padding:18px 0}
.atu-104.atu-104{margin-top:12px;font-size:11.5px;color:#7a2a14;background:var(--warn-dim);border:1px solid rgba(192,87,59,.25);border-radius:8px;padding:8px 11px;line-height:1.5}
.atu-105.atu-105{width:100%;min-height:120px;margin-top:5px;padding:8px 10px;border:1px solid var(--bd2);border-radius:8px;background:var(--field-bg);color:var(--tx);font-size:12px;line-height:1.55;white-space:pre-wrap}
.atu-106.atu-106{font-size:11px;color:var(--tx55);margin-top:6px}
.atu-107.atu-107{color:var(--sev-sev);font-size:12px;margin-top:6px}
.atu-108.atu-108{margin-top:12px;padding:9px 12px;background:var(--warn-dim);border:1px solid rgba(192,87,59,.25);border-radius:9px;color:#7a2a14;font-size:11.5px;line-height:1.5}
.atu-109.atu-109{color:var(--sev-sev);font-size:12px;margin-top:10px}
