:root{
  /* Spacing + readable desktop UI scale. Compact visualization marks (timeline ticks, chart axes)
     may remain below --type-meta; ordinary labels, status, help, and actions may not. The first
     governed consumers are Tutor Home/account and the shared field label (v0.11.74); later surfaces
     migrate by semantic role, never by mechanically replacing every small literal. */
  --space-1:4px; --space-2:8px; --space-3:12px;
  --type-body:12px; --type-label:12px; --type-meta:11px; --type-eyebrow:10px;
  --control-target:28px;
  /* Dark theme (default) — Blender-style neutral grays */
  --bg:#0d0d0d; --panel:#2b2b2b; --panel-2:#232323; --panel-3:#2a2a2a; --border:#3a3a3a;
  /* Tunable surface tones (live dev color tuner — press ` to toggle). Grayscale defaults.
     The form column has no fill of its own — it shows the app --bg. --splitter-bg is the
     RESTING divider color (splitters brighten to --accent on hover). */
  --group-card-bg:#171717; --group-card-bd:#262626; --chip-bg:#222222; --chip-bd:#2c2c2c; --splitter-bg:#050505;
  --timeline-bg:#171717; --menu-bg:#101010; --menu-bd:#1b1b1b;
  --field-bg:#0c0c0c; --field-bd:#151515;
  --transport-bg:#070707; --transport-bd:#242424;
  /* Timeline lane area (right of the gutter) — one neutral gray for every lane; the gutter
     keeps its own per-type wash + active highlight. */
  --lane-bg:#1d1d1d; --lane-bd:#282828;
  /* Section-header surface (Overview/Acoustics/Comments + the Subjects panel head) and the
     view-tabs bar (Timeline/Outline/Spreadsheet/Side-by-side). Dedicated tones (tuned via the dev
     color tuner, then baked here) so they read distinctly from the --panel-2 surfaces and tuning
     them doesn't drag every other --panel-2 surface along. One pair per concept, multiple consumers. */
  --section-head-bg:#353535; --section-head-bd:#4d4d4d;
  --viewbar-bg:#191919;      --viewbar-bd:#454545;
  --text:#d4d4d4; --muted:#9a9a9a; --dim:#8a8a8a;   /* was #6e6e6e — failed WCAG on every panel surface */
  --accent:#4772b3; --accent-2:#5680c2;
  --accent-tint-soft:rgba(71,114,179,.18);
  --accent-tint-med:rgba(71,114,179,.28);
  --accent-tint-strong:rgba(71,114,179,.40);
  --accent-on:#b8cdf0;
  /* --<type> track-color vars (--speech, --music, …) are generated from TYPE_META.pal by
     _injectTypeColorCSS() — see index.html. Don't redeclare them here (one owner). */
  --danger:#ef4444; --warn:#f59e0b; --ok:#10b981;
  /* Semantic alpha tints — ONE owner per (color × strength), mirroring --accent-tint-*.
     Values equal the raw rgba() literals they replaced (byte-identical), so a future hue
     change to warn/danger propagates from here instead of ~16 scattered rgba() copies. */
  --warn-tint-soft:rgba(245,158,11,.07); --warn-tint:rgba(245,158,11,.14);
  --warn-tint-med:rgba(245,158,11,.18); --warn-tint-strong:rgba(245,158,11,.32);
  --danger-tint-soft:rgba(239,68,68,.12); --danger-tint:rgba(239,68,68,.18);
  /* Z-index scale — 5 named layers replacing a 20-value magic-number scatter. Local stacking
     contexts (0–8, within a component) stay as raw small ints; these own the cross-component order. */
  --z-sticky:10; --z-notice:90; --z-overlay:100; --z-account:150; --z-confirm:200; --z-panel-float:230; --z-menu:1000; --z-ctx:1100; --z-top:9999;
  /* The full-window comparison shell, and the two surfaces that must still reach the user THROUGH
     it. Both were literals (shell 500, overlay 100), so the direction panel and its acknowledgement
     bar rendered underneath an opaque shell and a binding comparison task became undeliverable.
     Tokens make the ordering a stated rule instead of two numbers that happened to disagree. */
  --z-cmp-shell:500; --z-notice-over-surface:550; --z-above-cmp:600;
  --dir-nag-h:34px;   /* the acknowledgement bar RESERVES this much; it never overlays chrome */
  /* "Inherited" marker tint — a calm teal, deliberately NOT the blue accent (reserved for override) nor
     amber/green/red (warn/ok/danger). Lets the ↳ register as "this value comes from the speaker" without
     out-shouting an override. Single owner of the inherited-marker colour. */
  --inherit:#5fb0a6; --inherit-tint:rgba(95,176,166,.14);
  --gutter:240px;
  --lane-h:24px;
  --scroll-thumb:#4a4a4a;
  --rcol-w:420px;
  --tline-h:240px;
  --lcol-w:300px;
  --outliner-h:160px;
}
.app[data-theme="light"]{
  --bg:#eaeaea; --panel:#ffffff; --panel-2:#f0f0f0; --panel-3:#ffffff; --border:#d0d0d0;
  /* Light-theme form surfaces track the theme tokens (the dark tuned grays would be wrong here). */
  --group-card-bg:#f0f0f0; --group-card-bd:#d0d0d0; --chip-bg:#ffffff; --chip-bd:#d0d0d0; --splitter-bg:#d0d0d0;
  --timeline-bg:#f0f0f0; --menu-bg:#ffffff; --menu-bd:#d0d0d0;
  --field-bg:#f0f0f0; --field-bd:#d0d0d0;
  --transport-bg:#ffffff; --transport-bd:#d0d0d0;
  --lane-bg:#f0f0f0; --lane-bd:#d0d0d0;
  --section-head-bg:#f0f0f0; --section-head-bd:#d0d0d0;
  --viewbar-bg:#f0f0f0;      --viewbar-bd:#d0d0d0;
  --builtin-icon-invert:0;
  --text:#1a1a1a; --muted:#6b6b6b; --dim:#767676;   /* was #9a9a9a — same contrast failure, light side */
  --accent:#3b5ea6; --accent-2:#2d4d8e;
  --accent-tint-soft:rgba(59,94,166,.12);
  --accent-tint-med:rgba(59,94,166,.22);
  --accent-tint-strong:rgba(59,94,166,.36);
  --accent-on:#1a3565;
  --inherit:#2f8079; --inherit-tint:rgba(47,128,121,.12);
  --scroll-thumb:#b8b8b8;
}

/* Minimalist line icons */
.type-icon{
  width:16px;height:16px;display:inline-block;vertical-align:middle;
  flex-shrink:0;object-fit:contain;
}
/* Built-in PNG icons: black strokes on transparent — invert on dark theme */
img.type-icon[data-builtin]{filter:invert(var(--builtin-icon-invert,1))}
.tile-big .type-icon{width:13px;height:13px}
.seg-table .type-icon{width:12px;height:12px}
/* The ONE colored type-icon: a content type shown as its icon in its colour. Used by the outline
   rows, the spreadsheet Type cell, the completion card, and the triage head. Per-type colour rule
   .type-ic.<type>{color:var(--<type>)} is generated by _injectTypeColorCSS() — the single owner. */
.type-ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.type-ic .type-icon{width:14px;height:14px}
.ic{
  width:18px;height:18px;display:inline-block;vertical-align:-2px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.ic.sm{width:15px;height:15px}
.ic.lg{width:18px;height:18px}
.ic.xl{width:30px;height:30px;stroke-width:1.25}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;overscroll-behavior:none}   /* no rubber-band panning the whole app on touch */
body{
  margin:0; font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  background:var(--bg); color:var(--text); overflow:hidden;
  touch-action:manipulation;   /* no double-tap page zoom — taps act immediately, page stays put */
}
button{font:inherit;color:inherit}

/* ============================== TOPBAR ============================== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  /* env() is 0 outside notched/standalone contexts, so desktop sees plain 12px. */
  padding:8px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));
  border-bottom:1px solid var(--border);background:var(--panel-2);
  flex-shrink:0;
}
.topbar h1{font-size:13px;margin:0;font-weight:600;letter-spacing:.2px}
.topbar-brand-group,.topbar-actions{display:flex;align-items:center;min-width:0}
.topbar-brand-group{gap:8px}
.topbar-actions{gap:4px}
.topbar-actions .btn{flex-shrink:0;white-space:nowrap}
.topbar-menu-cluster{display:inline-flex;align-items:center;gap:6px;min-width:0}
.app-version-label{color:var(--muted);font-size:10px;opacity:.6;cursor:pointer;user-select:none}
#helpBtn{font-size:16px;font-weight:600}
.flex-spacer{flex:1}
/* Brand wordmark — WarpDiff style: icon mark + italic "Warp". (Placeholder logo for now.) */
.topbar h1.brand{display:inline-flex;align-items:center;gap:6px;font-size:16px;opacity:.5}
.brand-logo{width:26px;height:26px;display:block;flex-shrink:0}
.brand-text i{font-style:italic}
.src-name{display:none}
.topbar .meta{font-size:11px;color:var(--muted)}
.topbar-sep{width:1px;height:16px;background:var(--border);flex-shrink:0;margin:0 2px}
.managed-panels-wrap{display:none}
.app.managed-task-active .topbar-brand-group>h1.brand,
.app.managed-task-active .topbar-brand-group>#appVersionLabel,
.app.managed-task-active .topbar-brand-group>.saved-indicator{display:none}
.app.managed-task-active .managed-panels-wrap{display:inline-flex}
.managed-panels-menu{min-width:250px}
.managed-panels-menu .fm-item[aria-checked="true"] b::before{content:'✓ ';color:var(--accent-on)}
.managed-panels-menu .fm-item[aria-checked="false"] b::before{content:'  ';white-space:pre}
/* File menu (import / export / snapshot / clear) */
.file-menu-wrap,.topbar-menu-wrap{position:relative;display:inline-flex}
.file-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-menu);min-width:264px;
  background:var(--menu-bg,var(--panel));border:1px solid var(--menu-bd,var(--border));border-radius:8px;padding:5px;
  box-shadow:0 8px 28px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:1px}
.fm-section{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:7px 9px 3px}
.fm-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;
  background:transparent;border:0;border-radius:5px;padding:6px 9px;cursor:pointer;color:var(--text);font:inherit}
.fm-item:hover{background:var(--accent-tint-soft)}
.fm-item b{font-size:12px;font-weight:600}
.fm-item span{font-size:10px;color:var(--muted)}
.fm-item.danger:hover{background:color-mix(in srgb,var(--danger) 15%,transparent)}
.fm-item.danger b{color:var(--danger)}
.fm-sep{height:1px;background:var(--border);margin:4px 0}
/* Reusable right-click context menu (e.g. span split) */
.ctx-menu{position:fixed;z-index:var(--z-ctx);min-width:180px;background:var(--menu-bg,var(--panel));
  border:1px solid var(--menu-bd,var(--border));border-radius:7px;padding:4px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:1px}
.ctx-item{text-align:left;background:transparent;border:0;border-radius:5px;
  padding:6px 9px;cursor:pointer;color:var(--text);font:inherit;font-size:12px;white-space:nowrap}
.ctx-item:hover:not(:disabled){background:var(--accent-tint-soft)}
.ctx-item:disabled{color:var(--dim);cursor:default}
.ctx-item.danger{color:var(--danger)}
/* Gap highlight — a longer multi-pulse so it's easy to catch (and re-catch) without re-jumping. */
.q-flash{animation:qflash 2.8s ease-out;border-radius:6px}
@keyframes qflash{
  0%{background:var(--accent-tint-strong)}
  20%{background:var(--accent-tint-soft)}
  40%{background:var(--accent-tint-strong)}
  60%{background:var(--accent-tint-soft)}
  80%{background:var(--accent-tint-strong)}
  100%{background:transparent}
}
.topbar .saved-indicator{font-size:10px;color:var(--muted);font-style:italic;letter-spacing:.2px;font-variant-numeric:tabular-nums}
/* Failed-write state — save truthfulness is load-bearing, so a failed persist reads as alarming, not muted. */
.saved-indicator.save-failed{color:var(--danger);font-style:normal;font-weight:600}
.btn.icon-btn{padding:4px 7px;display:inline-flex;align-items:center;justify-content:center}
.btn{
  background:var(--accent);border:0;color:white;padding:6px 12px;border-radius:6px;
  cursor:pointer;font-weight:600;font-size:12px;
}
.btn:hover{background:var(--accent-2)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.ghost:hover{background:var(--panel)}
.btn.sm{padding:3px 8px;font-size:11px;font-weight:500}
.btn.xs{padding:2px 6px;font-size:10px;font-weight:500}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{background:transparent}

/* Native disclosure owner. Every plain <details> summary uses the same visible state marker;
   specialized editors with an existing SVG/home marker remain intentionally separate consumers. */
.disclosure-summary{list-style:none;cursor:pointer}
.disclosure-summary::-webkit-details-marker{display:none}
.disclosure-summary::marker{content:''}
.disclosure-summary::before{
  content:'▶';display:inline-block;flex:0 0 auto;color:var(--muted);font-size:var(--type-eyebrow);
  line-height:1;transform-origin:center;transition:transform .12s ease;
}
details[open]>.disclosure-summary::before{transform:rotate(90deg)}

/* Fixed-notice presentation and stacking. Every body-level notice uses this shell; modifiers own
   placement and notice-specific state, while the shell owns visual material and the ordinary
   below-dialog layer. Task-critical notices rise above WarpDiff only while that full-window surface
   is active. The bottom region stacks concurrent update/transcode notices instead of overlapping. */
.app-notice{
  box-sizing:border-box;border:1px solid var(--border);border-radius:8px;
  background:var(--panel);color:var(--text);box-shadow:0 6px 20px rgba(0,0,0,.35);
  z-index:var(--z-notice)
}
.app-notice[hidden]{display:none}
.app-notice-region{
  position:fixed;z-index:var(--z-notice);pointer-events:none;display:flex;gap:8px
}
.app-notice-region--bottom-center{
  left:50%;bottom:20px;transform:translateX(-50%);flex-direction:column-reverse;
  align-items:center;max-width:calc(100vw - 24px)
}
.app-notice-region>.app-notice{position:static;transform:none;pointer-events:auto}
body.cmp-mode :is(#appNoticeBottom,#hudFlash,#taskInterruptionNotice){z-index:var(--z-notice-over-surface)}

/* HUD flash for quick feedback (mute, speed change, etc.) */
/* Keyboard-focus floor — the ONE :focus-visible rule (there were zero): every interactive
   element gets a visible ring when reached by keyboard; mouse focus stays clean. */
:is(button, select, input, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;
}

#hudFlash{
  /* Below the topbar, NOT dead-center — centered toasts sat exactly on the transport
     controls (the most-clicked strip in the app) and blocked them while visible. */
  position:fixed;top:64px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.75);color:white;padding:10px 18px;border-radius:8px;
  font-size:13px;font-weight:600;letter-spacing:.5px;
  pointer-events:none;opacity:0;transition:opacity .2s;
}
#hudFlash.on{opacity:1}
/* HUD kinds — severity is OWNED by flashHud's kind param (style + duration in one place). */
#hudFlash.hud-error{background:rgba(62,14,14,.94);border:1px solid var(--danger);color:#ffd9d9}
#hudFlash.hud-warning{background:rgba(64,46,6,.94);border:1px solid var(--warn);color:#ffe6b3}
#hudFlash.hud-ok{border:1px solid var(--ok)}
/* In-place copy feedback (owner: _flashCopied, index.html). The toast above says WHAT was copied;
   this says WHICH element you hit — a Ranges row carries a subject name and a transcription side by
   side, and a toast alone can't tell those two clicks apart. Generic (any element, any surface), so
   every copy affordance gets the same confirmation. Fades from an accent wash back to nothing rather
   than leaving a state behind: a copy is an ACT, not a mode. */
@keyframes copyFlash{
  0%  {background:var(--accent-tint-strong);box-shadow:inset 0 0 0 1px var(--accent)}
  70% {background:var(--accent-tint-soft);box-shadow:inset 0 0 0 1px transparent}
  100%{background:transparent;box-shadow:inset 0 0 0 1px transparent}
}
.copy-flash{animation:copyFlash .65s ease-out;border-radius:3px}
@media (prefers-reduced-motion:reduce){ .copy-flash{animation-duration:.01s;background:var(--accent-tint-strong)} }

/* Help modal — WarpDiff-style chunky key chips */
#helpModal .modal{background:var(--panel);display:flex;flex-direction:column;max-height:88vh}
#helpModal .modal-head{padding:14px 18px;background:transparent;flex-shrink:0}
#helpModal .modal-head h2{font-size:15px;font-weight:600}
#helpModal .modal-body{padding:0;overflow-y:auto;flex:1;display:flex;flex-direction:column}
/* Tab nav */
.help-tabs{
  display:flex;gap:0;border-bottom:1px solid var(--border);
  padding:0 18px;flex-shrink:0;
}
.help-tab{
  background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font-size:12px;font-weight:500;padding:8px 14px;
  cursor:pointer;margin-bottom:-1px;transition:color .12s,border-color .12s;
}
.help-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.help-tab:hover:not(.active){color:var(--text)}
/* Panes */
.help-pane{padding:18px 22px 24px;flex:1;overflow-y:auto}
.help-pane[hidden]{display:none}
/* Prose pane */
.help-prose h3{
  margin:22px 0 8px;font-size:13px;font-weight:700;color:var(--text);
  padding-bottom:5px;border-bottom:1px solid var(--border);
}
.help-prose h3:first-child{margin-top:0}
.help-prose p{margin:0 0 10px;font-size:12px;line-height:1.65;color:var(--muted)}
.help-prose p strong{color:var(--text)}
.help-prose ul{margin:0 0 10px 16px;padding:0;font-size:12px;line-height:1.65;color:var(--muted)}
.help-prose li{margin-bottom:5px}
.help-prose li strong{color:var(--text)}
.help-prose .fw-ref{font-size:10px;color:var(--dim);font-style:italic;margin-top:-6px;margin-bottom:12px}
/* Span type table */
.span-type-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:16px}
.span-type-table th{
  text-align:left;font-size:10px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.8px;
  padding:0 10px 8px 0;border-bottom:1px solid var(--border);
}
.span-type-table td{
  padding:8px 10px 8px 0;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.05);color:var(--text);line-height:1.4;
}
.span-type-table td:first-child{white-space:nowrap;padding-right:16px}
.type-swatch{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.type-swatch-speech{background:var(--speech,var(--accent-2))}
.type-swatch-music{background:var(--music,#8b5cf6)}
.type-swatch-effects{background:var(--effects,var(--warn))}
.type-swatch-ambience{background:var(--ambience,var(--ok))}
.type-swatch-artifacts{background:var(--artifacts,var(--danger))}
/* Quick-start steps */
.qs-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.qs-step{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start}
.qs-num{
  width:24px;height:24px;border-radius:50%;background:var(--accent-tint-soft);
  border:1px solid var(--accent);color:var(--accent-on);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
.qs-step p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.qs-step p strong{color:var(--text)}
/* Shortcuts (existing) */
.help-content{display:grid;grid-template-columns:1fr 1fr;gap:30px 36px}
.help-section{margin-bottom:18px}
.help-content>div>.help-section+.help-section{margin-top:14px}
.command-shortcut-group+.command-shortcut-group{margin-top:14px}
.surface-command-context{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 20px;padding:12px 14px;
  border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--muted)
}
.surface-command-context strong{color:var(--text);font-size:13px}
.surface-command-context kbd{font-size:11px}
.surface-command-context-unavailable{border-left:3px solid var(--warn)}
.surface-command-shortcuts{position:relative;margin-bottom:26px}
.surface-command-conflicts{grid-column:1/-1;padding:10px 12px;border:1px solid var(--warn);border-radius:6px;color:var(--warn);font-size:12px}
.platform-command-shortcuts{padding-top:20px;border-top:1px solid var(--border)}
.platform-command-shortcuts h3,.pointer-controls h3{margin:0 0 6px;font-size:13px}
.platform-command-shortcuts>p{margin:0 0 14px;color:var(--muted);font-size:12px}
.platform-command-shortcuts [data-command-shortcuts]{display:grid;grid-template-columns:1fr 1fr;gap:14px 36px}
.pointer-controls{padding-top:18px;border-top:1px solid var(--border)}
.pointer-controls ul{max-width:620px}
.help-section h4{
  margin:0 0 10px;font-size:10px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.4px;
}
.help-heading-note{color:var(--muted);font-weight:400}
.help-section ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.help-section li{
  display:grid;grid-template-columns:110px 1fr;gap:14px;
  font-size:13px;align-items:start;line-height:1.3;color:var(--text);
}
.help-section li .keys-col{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:1px}
/* The description MUST be one element (this wrapper) so the li grid has exactly two children:
   keys-col → col 1, help-desc → col 2. Without it, inline <kbd>/<em> in the description become
   their own grid items and scatter into the 110px key column. */
.help-section li .help-desc{line-height:1.5}
.help-section li .help-desc kbd{margin:0 1px}
.help-section li kbd{
  background:var(--panel-2);border:1px solid var(--border);border-radius:5px;
  padding:3px 8px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:11px;font-weight:500;line-height:1;
  min-width:26px;min-height:22px;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text);box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.app[data-theme="light"] .help-section li kbd{
  background:#e8e8e8;border-color:#a0a0a0;
  box-shadow:0 1px 0 #b8b8b8, 0 2px 0 -1px #aaaaaa;
}
/* Light-mode type-tile accents (--tc) generated by _injectTypeColorCSS() from pal.tileTcLight */
/* Light-mode: fix elements that use hardcoded rgba-white borders/fills */
.app[data-theme="light"] .seg{border-color:rgba(0,0,0,.18)}
.app[data-theme="light"] .seg.point{border-color:rgba(0,0,0,.3)}
.app[data-theme="light"] .axw-stop{border-color:rgba(0,0,0,.2)}
.app[data-theme="light"] .axw-stop:hover:not(.active){border-color:rgba(0,0,0,.45)}
.app[data-theme="light"] .intent-type-btn:hover:not(.active){border-color:rgba(0,0,0,.25)}
.app[data-theme="light"] .cell-edit:focus{background:rgba(0,0,0,.05)}
.app[data-theme="light"] .waveform-vzoom button{color:rgba(0,0,0,.5)}
.app[data-theme="light"] .waveform-vzoom button:hover{background:rgba(0,0,0,.08);color:var(--text)}
.app[data-theme="light"] .waveform-vzoom button.active{background:rgba(0,0,0,.12);color:var(--text)}

.chip{padding:1px 8px;border-radius:4px;font-size:10px;font-weight:600}
/* .chip.<type> tints generated by _injectTypeColorCSS() (speech uses --accent tokens) */
.chip.subject{background:var(--accent-tint-med);color:var(--accent-on)}

.seg-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));column-gap:var(--space-2);row-gap:0;margin-top:var(--space-2)}
.seg-fields .full{grid-column:1/-1}
/* The subject-defaults block and each field group always span both columns of the parent grid,
   so they fill the whole row instead of taking only column 1 / column 2 */
/* Right-rail carded blocks span the full grid width; their card look + spacing is owned by
   the shared group-card rule (see "ONE owner of the group-card look" below). */
.seg-fields > .seg-fields-group,
.seg-fields > .field.full{grid-column:1/-1}
/* Group membership is conveyed by the header + the margin-top gap — NOT a left bar with content
   padding. The bar indented every grouped row ~10px right of ungrouped rows (e.g. Age vs Typical
   Values), breaking column alignment, and stacked another vertical line against the per-row label
   dividers. Dropping it aligns every row to one left edge and removes the competing line. */
.seg-fields-group{margin-top:var(--space-3);padding:0}
.seg-fields-group.no-header{padding-top:0;margin-top:0}
.seg-fields-group-head{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  color:var(--text);margin-bottom:var(--space-2);
  display:flex;align-items:center;gap:6px;
}
/* No underline rule — groups are separated by space (proximity), not full-width lines.
   A folded head has nothing below it, so drop its bottom margin. */
details.seg-fields-group.collapsible:not([open]) > .seg-fields-group-head{
  margin-bottom:0;
}
.seg-fields-group-head .group-name{flex:0 0 auto}
.seg-fields-group-head .group-sub{
  color:var(--dim);font-weight:500;letter-spacing:0;text-transform:none;font-size:10px;
}
.seg-fields-group-head .group-count,
.seg-fields-group-head .group-inherited-chip{
  font-size:9px;font-weight:600;letter-spacing:.4px;
  padding:1px 5px;border-radius:4px;line-height:1.3;
}
.seg-fields-group-head .group-count{
  background:var(--panel-2);border:none;color:var(--muted);
  text-transform:none;font-variant-numeric:tabular-nums;
}
/* Missing-first status chip: amber "N left" = required work remains; green "N set ✓" = complete. */
.seg-fields-group-head .group-count.gap{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.seg-fields-group-head .group-count.done{color:var(--ok);background:transparent}
.seg-fields-group-head .group-inherited-chip{
  /* Quiet by design: reads as metadata, not a button — accent blue stays reserved for the
     primary action (Submit) and selection states. Sentence case ("usual") on purpose: the group
     head uppercases its children, and a shouted "USUAL" would defeat the word's own tone.
     (The old "Override" counterpart chip is RETIRED — mark the exception, not the default.) */
  background:transparent;border:1px solid var(--muted);color:var(--muted);
  text-transform:none;opacity:.7;
}
/* The group-level state chip summarizes what's HIDDEN — show it only while the group is
   collapsed. When it's open the fields inside already show their own ↳ / revert markers,
   so repeating "usual" on the header is double-signaling. */
.seg-fields-group.collapsible[open] .group-inherited-chip{display:none}
/* Field help text — clear guidance below fields */
.field-help{
  display:block;font-size:11px;color:var(--muted);margin-top:4px;font-style:italic;line-height:1.4;
}
.field-help.fc-warn{color:var(--warn);font-style:normal}
/* Collapsible group (Voice/Lang/Recording/Visual) — uses native <details> */
details.seg-fields-group{padding-top:0;margin-top:var(--space-2)}
details.seg-fields-group > summary{
  list-style:none;cursor:pointer;padding:var(--space-1) 0;border-radius:3px;
  margin-bottom:0;outline:none;user-select:none;
}
details.seg-fields-group > summary::-webkit-details-marker{display:none}
details.seg-fields-group > summary:hover{color:var(--text)}
details.seg-fields-group > summary .group-chev{
  transition:transform .12s;color:var(--muted);
}
details.seg-fields-group[open] > summary .group-chev{transform:rotate(90deg)}
details.seg-fields-group > .seg-fields-grid{margin-top:var(--space-1)}
/* The Content (What) group gets slight emphasis — it's the primary substance of the annotation */
.what-group{
  background:var(--panel-2);border:1px solid var(--border);border-radius:4px;
  padding:var(--space-2);margin-top:var(--space-3);
}
.what-group .seg-fields-group-head{margin-bottom:var(--space-1)}
.what-group textarea{min-height:60px;width:100%;resize:vertical}
/* min 130 (was 150) so short fields (Name | Source Type, Quality | Mic …) pair up at a narrower rail
   instead of stacking — fewer rows on a narrow editor without cramping the controls. */
.seg-fields-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--space-2) var(--space-3)}
.seg-fields-grid .field.full{grid-column:1/-1}

/* Compact fields are now STACKED like every other field — label above the control, no colon —
   per the style guide (bringing the right column in line with the left). They live in a grid
   (.seg-fields-grid is auto-fit; .seg-fields is two-up) so they still pair up; only the
   inline-colon layout is dropped. */
.field.compact{
  display:flex;flex-direction:column;gap:var(--space-1);
  padding:1px 0;
}
.field.compact > input,
.field.compact > select,
.field.compact > textarea,
.field.compact > div{width:100%;min-width:0}   /* div = lang-detect-row, .field-val */
/* Inherited fields: the ↳ marker rides the value line (see _valueWithInheritGlyph).
   Default (chip/scale controls): glyph precedes the control inline. */
.field-val{display:flex;align-items:center;gap:6px;min-width:0}
.field-val > .default-badge{margin-left:0;flex:0 0 auto}
.field-val > :not(.default-badge){flex:1 1 auto;min-width:0;width:auto}
/* Boxed controls (select/input/textarea): overlay the glyph INSIDE the control's left padding so
   it reads as a prefix on the value text. pointer-events:none keeps the control fully clickable. */
.field-val.inside{position:relative;display:block;min-width:0}
.field-val.inside > .default-badge{
  position:absolute;left:8px;top:0;bottom:0;display:flex;align-items:center;
  margin:0;pointer-events:none;z-index:1;
  background:none;padding:0;   /* no pill inside a box — the teal arrow alone reads as the prefix */
}
.field-val.inside > :not(.default-badge){width:100%}
.field-val.inside > select,
.field-val.inside > input,
.field-val.inside > textarea,
.field-val.inside > .lang-detect-row > select{padding-left:27px}
/* textarea is multi-line — pin the glyph to the first line, not the vertical center. */
.field-val.inside:has(> textarea) > .default-badge{top:7px;bottom:auto}
/* A muted inline sub-caption on a field label (e.g. Content "what was said") — Help/meta tier. */

/* Collapsible subject defaults panel */

/* State badges next to per-span field labels */
.state-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:0 5px;border-radius:8px;font-size:8px;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;line-height:1.4;margin-left:4px;
}
/* "default" = the quiet, inherited state (the value already renders muted/italic), so it's a
   subtle dim marker beside the label, not a bordered pill. The override badge stays a pill —
   that one earns attention. */
.default-badge{
  background:var(--inherit-tint);border:none;color:var(--inherit);
  padding:1px;border-radius:5px;line-height:1;
}
/* The inherited marker is drawn as an SVG corner-arrow (see _inheritStateBadge) so its weight is
   ours to set via stroke-width — the OS symbol-font ↳ was hairline and ignored font-weight.
   Sized + coloured (--muted, not --dim) to stay legible at 1× on a dark field. */
.inh-arrow{width:15px;height:15px;display:block}
/* Round container — it holds a single reset icon, so a circle reads better than an oblong pill. */
.override-badge{
  background:var(--accent-tint-soft);border:1px solid var(--accent);color:var(--accent-on);
  padding:0;width:18px;height:18px;border-radius:50%;justify-content:center;flex-shrink:0;
}
.override-badge .badge-revert{margin-left:0}
.app[data-theme="light"] .override-badge{color:var(--accent-2)}
.badge-revert{
  background:transparent;border:0;color:inherit;cursor:pointer;
  padding:0;margin-left:2px;line-height:0;display:inline-flex;align-items:center;
}
.badge-revert svg{width:11px;height:11px;display:block}
.badge-revert:hover{color:white}
.app[data-theme="light"] .badge-revert:hover{color:black}

/* Field input styling per state */
.field.from-default input,
.field.from-default textarea,
.field.from-default select{
  color:var(--muted);font-style:italic;
  border-color:rgba(255,255,255,.08);
}
.app[data-theme="light"] .field.from-default input,
.app[data-theme="light"] .field.from-default textarea,
.app[data-theme="light"] .field.from-default select{
  border-color:rgba(0,0,0,.08);
}
.field.is-override input,
.field.is-override textarea,
.field.is-override select{
  border-color:var(--accent);
  box-shadow:inset 2px 0 0 var(--accent);
}
.field{display:flex;flex-direction:column;gap:var(--space-1)}
/* Field-label token (global) — the title of a control: 12px · 600 · --text, sentence case.
   Was 10px muted and overridden per-panel (#metadataForm, .col-props); now one source of truth. */
/* Labels are wayfinding, values are content — labels sit one level below values. */
.field label{font-size:var(--type-label);font-weight:600;color:var(--text);letter-spacing:normal;display:flex;align-items:center;gap:6px}
/* Multi-select chip fields (Genre, Mood, Instrument families) are big, important blocks — give their
   label the SAME section-header treatment as .seg-fields-group-head (Intent/Emotion section heads) so
   they read as sections. That head deliberately uses NO underline ("separated by space, not full-width
   lines"); this matches it — the border-bottom here was a stranded divergence that drew lines only on
   these fields. ONE section-header style across the span editor. */
#segEditor .field-chips{margin-top:var(--space-2)}
#segEditor .field-chips > label{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text);
  margin-bottom:var(--space-2);
}
/* Start/End share one row in the span inspector — utility fields shouldn't push
   the judgment fields (role, genre, emotion…) below the fold. */
.seg-fields .time-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg-fields .time-pair .field{min-width:0}
.seg-fields .time-pair .row{gap:4px}
.seg-fields .time-pair .btn{padding:4px 6px;flex-shrink:0}
.field input,.field select,.field textarea{
  background-color:var(--panel-2);border:1px solid var(--border);color:var(--text);
  padding:5px 7px;border-radius:5px;font:inherit;width:100%;
}
/* Enum fields (selects) use the tunable single-owner vars; overrides the combined rule
   above so only selects pick them up — text inputs/textareas keep --panel-2/--border. */
.field select{background-color:var(--field-bg,var(--panel-2));border-color:var(--field-bd,var(--border))}
/* Properties editor is denser than the form column — values at 12px (labels are
   11px) tighten it without hurting readability. Scoped to the span editor only. */
#segEditor .field input,#segEditor .field select,#segEditor .field textarea{font-size:12px}
/* Consistent dark-themed look for every <select> in the app, with a custom chevron.
   Enum/select fill+border are tunable single-owner vars (dev color tuner). */
select{
  background:var(--field-bg,var(--panel-2));border:1px solid var(--field-bd,var(--border));color:var(--text);
  padding:5px 22px 5px 8px;border-radius:5px;font:inherit;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a9a9a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat:no-repeat;background-position:right 6px center;background-size:11px;
  cursor:pointer;
}
select:focus{outline:1px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
/* Option text — browsers vary in their support for styling <option>, but we set a baseline */
select option{background:var(--panel);color:var(--text)}
/* In light theme, swap the chevron stroke so it's visible */
.app[data-theme="light"] select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
}
.field textarea{min-height:48px;resize:vertical}
.field .row{display:flex;gap:6px}
.field .row input{flex:1}

.seg-actions{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}

.subject-pick{
  display:flex;gap:6px;align-items:center;
  background:var(--accent-tint-soft);border:1px solid var(--accent);
  border-radius:6px;padding:6px 8px;margin-bottom:8px;
}
.subject-pick label{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.4px}
.subject-pick select{flex:1}
.subject-pick button{
  background:transparent;border:1px solid var(--border);color:var(--muted);
  padding:3px 8px;border-radius:4px;font-size:10px;cursor:pointer;
}
.subject-pick button:hover{color:var(--accent);border-color:var(--accent)}

/* Spinner for loading states */
@keyframes spin{
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
.submit-pending{display:inline-flex;align-items:center;gap:4px}
.submit-pending-icon{animation:spin 1s linear infinite}

/* Selects in form sections size to content rather than stretching */
.section .field select{width:auto;min-width:100%}
.section .field input[type="text"]{width:100%}
.field .help{
  font-size:10px;color:var(--muted);margin-top:3px;
  background:var(--accent-tint-soft);border-left:2px solid var(--accent);
  padding:5px 7px;border-radius:0 4px 4px 0;display:none;
}
.field .help.on{display:block}
/* (.req star rule removed 2026-07-02 — required is the silent norm everywhere now; the
   spreadsheet's .gap-dot.req compound below is a different concept and stays.) */
/* "(optional)" tag on an upstream field whose value propagates downstream — muted, hover for the why. */
.opt-note{color:var(--muted);font-size:.85em;font-weight:400;cursor:help;white-space:nowrap}
.rec{color:var(--muted);opacity:.7;font-size:.85em;margin-left:1px;vertical-align:middle}

.info-btn{
  width:13px;height:13px;border-radius:50%;border:1px solid var(--border);
  background:var(--panel-2);color:var(--muted);font-size:9px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  line-height:1;padding:0;text-transform:none;letter-spacing:0;
}
.info-btn:hover{color:var(--accent);border-color:var(--accent)}
.info-btn.on{background:var(--accent);color:white;border-color:var(--accent)}

/* checkbox question */
.checkq{
  display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;
}
.checkq input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:14px;height:14px;flex-shrink:0;
  background:var(--panel-2);border:1.5px solid var(--border);border-radius:3px;
  position:relative;cursor:pointer;margin:0;
  transition:background .1s,border-color .1s;
}
.checkq input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.checkq input[type="checkbox"]:checked::after{
  content:'';position:absolute;left:3px;top:0;width:5px;height:8px;
  border:1.5px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);
}
.checkq .ck-label{font-size:12px;flex:1}
.checkq .ck-help{font-size:10px;color:var(--muted)}

.chips{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-1)}
/* Binary yes/no: lay the two picks on one row, sized to content (not the full-width stack
   the option lists use). Neither chip is pre-selected — "No" stays a recorded answer, not a
   default — so this only changes layout, not the unanswered-vs-No distinction (see isAnswered). */
.chips.yn-chips{flex-direction:row;gap:var(--space-2)}
.yn-chips .pick{flex:0 0 auto;min-width:64px;text-align:center}
/* Forced-choice verdict row (A / B / Tie / Both Bad, or any n-way evaluation choice). */
.chips.verdict-chips{flex-direction:row;flex-wrap:wrap;gap:var(--space-2)}
.verdict-pick{flex:0 0 auto;min-width:86px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
/* ── Comparison workspace — faithful WarpDiff port, wave 4 (comparison-workspace-port.md §7) ───────
   A comparison task takes the WHOLE window: body.cmp-mode hides #appRoot entirely (no WarpSonic
   chrome) and shows the three-column shell — direction+prompt (left) · the embedded real WarpDiff
   iframe (center) · questions + pinned Submit (right). */
body.cmp-mode #appRoot{display:none!important}   /* beats auth.js's inline appRoot.style.display='grid' */
body.cmp-mode:not(.home-mode) #userInfo{display:none!important} /* task shell owns this view; Home restores account navigation */
#comparisonShell{display:none}
body.cmp-mode #comparisonShell{
  display:grid;grid-template-columns:minmax(240px,300px) 1fr minmax(360px,440px);
  position:fixed;top:0;left:0;right:0;z-index:var(--z-cmp-shell);height:100vh;height:100dvh;   /* dvh so the full-window comparison task fits the visible mobile viewport, not behind the toolbar */
  background:var(--bg);color:var(--text)}
body.cmp-fidelity-mode #comparisonShell{grid-template-columns:minmax(180px,220px) minmax(0,1fr) minmax(260px,300px)}
#comparisonShell .cmp-left,#comparisonShell .cmp-right{
  display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:12px;gap:8px;background:var(--panel)}
#comparisonShell .cmp-left{border-right:1px solid var(--border)}
#comparisonShell .cmp-right{border-left:1px solid var(--border)}
#comparisonShell .cmp-center{min-width:0;min-height:0;background:#000;display:flex;flex-direction:column;position:relative}
.cmp-evidence-layout{min-width:0;min-height:0;flex:1;display:block;background:#050606}
.cmp-candidate-stage{position:relative;min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;background:#050606}
body.cmp-fidelity-mode .cmp-evidence-layout{display:grid;grid-template-columns:minmax(300px,1fr) minmax(360px,1.15fr);gap:1px;background:var(--border)}
.cmp-reference-stage{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#050606;color:#f2f7f6}
.cmp-reference-stage[hidden]{display:none!important}
.cmp-reference-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px 10px;background:var(--panel);border-bottom:1px solid var(--border)}
.cmp-reference-toolbar>div:first-child{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:2px 7px;min-width:0}
.cmp-reference-toolbar strong{grid-column:1/-1;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;line-height:1.25}
.cmp-reference-toolbar b{font-size:10px;color:var(--muted);white-space:nowrap}.cmp-reference-toolbar small{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-evidence-kicker{font-size:9px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.cmp-reference-nav,.cmp-reference-zoom{display:flex;gap:4px}.cmp-reference-toolbar .btn{padding:4px 7px;min-height:28px}
.cmp-reference-toolbar [aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint);color:var(--accent)}
.cmp-reference-viewport{position:relative;min-width:0;min-height:0;overflow:hidden;background:#050606;display:grid;place-items:center}
.cmp-reference-viewport.is-native{display:block;overflow:auto;overscroll-behavior:contain}
.cmp-reference-viewport>.cmp-prompt-refs{position:absolute;inset:0;min-width:0;min-height:0;display:block!important}
.cmp-reference-viewport .cmp-refs{position:absolute;inset:0;display:grid;place-items:center;min-width:0;min-height:0}
.cmp-reference-viewport .cmp-ref{width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;border:0;border-radius:0;background:#050606;display:block}
.cmp-reference-viewport .cmp-prompt-refs.is-fidelity .cmp-ref{max-height:100%;min-height:0}
.cmp-reference-viewport .cmp-ref[hidden]{display:none!important}
.cmp-reference-viewport .cmp-ref-audio{width:min(520px,88%);height:64px;margin:auto;padding:18px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.cmp-reference-viewport.is-native .cmp-ref-image,.cmp-reference-viewport.is-native .cmp-ref-video{width:auto;height:auto;max-width:none;max-height:none;margin:auto;object-fit:none;cursor:zoom-out}
.cmp-reference-viewport:not(.is-native) .cmp-ref-image{cursor:zoom-in}
.cmp-reference-filmstrip{display:flex;gap:6px;min-width:0;overflow-x:auto;padding:7px 8px;background:var(--panel);border-top:1px solid var(--border);scroll-snap-type:x proximity}
.cmp-reference-thumb{position:relative;flex:0 0 94px;height:66px;overflow:hidden;border:1px solid var(--border);border-radius:6px;background:#0a0c0c;color:var(--text);padding:0;cursor:pointer;scroll-snap-align:center}
.cmp-reference-thumb[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cmp-reference-thumb-image,.cmp-reference-thumb-canvas{width:100%;height:100%;display:block;object-fit:cover}
.cmp-reference-thumb-audio{height:100%;display:grid;place-items:center;font-size:27px;color:var(--accent);background:linear-gradient(135deg,var(--panel-2),#070909)}
.cmp-reference-thumb>span:last-child{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:3px 5px;background:linear-gradient(transparent,rgba(0,0,0,.92));font-size:9px;text-transform:capitalize}
.cmp-reference-thumb>span:last-child small{color:#d4dcda;font-size:8px}
.cmp-frame{width:100%;height:100%;border:0;display:block}
.cmp-frame[hidden],.cmp-scan-stage[hidden],.cmp-candidate-toolbar[hidden],.cmp-exit-finalists[hidden],
.cmp-fidelity-questions[hidden],.cmp-viewer-mask[hidden],.cmp-manual-empty[hidden],.cmp-manual-panel[hidden]{display:none!important}
.cmp-viewer-stack{position:relative;min-width:0;min-height:0;flex:1;background:#050606;overflow:hidden}
.cmp-scan-stage{position:absolute;inset:0;display:grid;place-items:center;background:#050606}
.cmp-scan-stage video{width:100%;height:100%;display:block;object-fit:contain;background:#050606}
.cmp-scan-stage video[hidden]{display:none!important}
.cmp-viewer-mask{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:24px;
  background:rgba(3,5,5,.96);color:#f2f7f6;text-align:center;pointer-events:auto}
.cmp-viewer-mask>div{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:360px}
.cmp-viewer-mask .cmp-viewer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cmp-viewer-mask.is-error{background:rgba(23,5,8,.97);color:#ffe5e8}
.cmp-viewer-spinner{width:26px;height:26px;border:2px solid rgba(255,255,255,.26);border-top-color:var(--accent);
  border-radius:50%;animation:cmp-spin .8s linear infinite}
.cmp-viewer-mask.is-error .cmp-viewer-spinner{display:none}
@keyframes cmp-spin{to{transform:rotate(360deg)}}
.cmp-manual-empty{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:28px;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--accent) 12%,#050606),#050606 58%);color:#f2f7f6;text-align:center}
.cmp-manual-empty>div{width:min(440px,100%);display:flex;flex-direction:column;align-items:center;gap:12px}
.cmp-manual-empty h1{font-size:24px;line-height:1.15;margin:0}.cmp-manual-empty p{margin:0;color:#aeb8b5;font-size:13px;line-height:1.55}
.cmp-manual-kicker{font-size:9px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.cmp-candidate-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"prev nav next" "progress progress progress";align-items:center;gap:6px;
  flex:0 0 auto;padding:7px 8px;background:var(--panel);border-bottom:1px solid var(--border)}
#cmpCandidatePrev{grid-area:prev}#cmpCandidateNav{grid-area:nav}#cmpCandidateNext{grid-area:next}.cmp-candidate-progress{grid-area:progress;text-align:center}
.cmp-candidate-nav{display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));gap:6px;min-width:0}
.cmp-candidate-nav button{min-width:0;border:1px solid var(--border);border-radius:6px;background:var(--panel-2);color:var(--muted);
  padding:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;justify-content:center;font:inherit;font-size:10.5px;font-weight:650}
.cmp-candidate-thumb{display:block;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#171b1a,#070909);object-fit:cover}
.cmp-candidate-tab-copy{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:5px 6px;min-width:0}
.cmp-candidate-nav button[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);color:var(--text);background:var(--accent-tint)}
.cmp-candidate-nav button.is-best{border-bottom:3px solid var(--ok)}
.cmp-candidate-nav button.is-worst{border-bottom:3px solid var(--danger)}
.cmp-candidate-nav button.is-error{color:var(--danger)}
.cmp-candidate-nav button.is-viewed:not(.is-best):not(.is-worst){border-bottom:3px solid var(--accent)}
.cmp-candidate-nav button:not(.is-ready):not(.is-error) .cmp-candidate-tab-copy::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.55}
.cmp-candidate-mark{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cmp-candidate-step{width:32px;height:32px;border:1px solid var(--border);border-radius:6px;background:var(--panel-2);color:var(--text);cursor:pointer}
.cmp-candidate-step:disabled{opacity:.35;cursor:default}
.cmp-candidate-progress{font-size:10.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp-exit-finalists{position:absolute;left:12px;bottom:12px;z-index:5;background:rgba(12,14,14,.9)!important;color:#fff!important}
.cmp-brand{height:22px;flex:0 0 auto}
.cmp-rail-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:4px}
.cmp-direction,.cmp-prompt-panel{font-size:13px;line-height:1.5;color:var(--text)}
.cmp-prompt-panel{white-space:pre-wrap;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px}
/* Prompt REFERENCE images (comparison.promptMedia) — part of the prompt, not the judged outputs. Takes
   the prompt panel's own surface/border so it reads as a continuation of the prompt rather than a third
   thing. A column (not a tight thumbnail grid): these are content the annotator must actually SEE to
   judge against, and the left rail is narrow. object-fit:contain so a portrait reference isn't cropped. */
.cmp-prompt-refs{display:flex;flex-direction:column;gap:6px}
.cmp-refs{display:flex;flex-direction:column;gap:6px}
.cmp-ref{width:100%;max-height:180px;object-fit:contain;background:var(--bg);
  border:1px solid var(--border);border-radius:6px;display:block}
.cmp-prompt-refs.is-fidelity{flex:1;min-height:0}
.cmp-prompt-refs.is-fidelity .cmp-refs{flex:1;min-height:0}
.cmp-prompt-refs.is-fidelity .cmp-ref{max-height:min(34dvh,360px);flex:1;min-height:150px}
/* A reference that failed to load says so, rather than collapsing to a sliver the annotator won't notice. */
.cmp-ref-missing{font-size:11.5px;color:var(--warn);background:var(--warn-tint-soft);
  border:1px dashed var(--warn);border-radius:6px;padding:8px;text-align:center}
.cmp-ref-missing-actions{display:flex;justify-content:center;gap:6px;margin-top:8px}
/* A failed PAIR push — louder than a missing reference, because the center pane is then showing the
   wrong task's media. Same shape as its sibling above (style-from-sibling-precedent), danger tone. */
.cmp-load-error{margin-top:10px;font-size:11.5px;color:var(--danger);background:var(--danger-tint-soft);
  border:1px solid var(--danger);border-radius:6px;padding:8px}
/* Right-top: Submit pinned (sticky) — the fast upper-right, arm-extension target; + the ⋯ overflow. */
.cmp-right-top{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding-bottom:8px;background:var(--panel);z-index:1}
.cmp-submit{flex:1;font-weight:600}
.cmp-submit kbd{opacity:.7;font-size:11px}
.cmp-overflow{background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--muted);font-size:16px;line-height:1;padding:1px 7px;cursor:pointer}
.cmp-questions{display:flex;flex-direction:column;gap:8px}
.cmp-questions .field>label{font-size:15px;font-weight:650;color:var(--text)}
.cmp-questions .chips .pick{min-height:40px;padding:8px 13px;color:var(--text);font-size:13px}
.cmp-manual-panel{display:flex;flex-direction:column;gap:8px;padding:2px 0 12px;border-bottom:1px solid var(--border)}
.cmp-manual-panel h2{font-size:18px;line-height:1.15;margin:0}.cmp-manual-panel>p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.45}
.cmp-manual-panel label{font-size:11px;font-weight:700;margin-top:3px}.cmp-manual-panel select{width:100%;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px;font:inherit;font-size:12px}
.cmp-manual-registry-fields,.cmp-local-files{display:flex;flex-direction:column;gap:7px}
.cmp-local-files textarea{width:100%;resize:vertical;min-height:58px;max-height:120px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px;font:inherit;font-size:12px}
.cmp-local-files label>span{font-weight:450;color:var(--muted);margin-left:4px}
.cmp-local-file-pick{display:flex;flex-direction:column;gap:3px;border:1px dashed var(--border);border-radius:7px;padding:9px;background:var(--bg)}
.cmp-local-file-pick:hover{border-color:var(--accent-muted);background:var(--panel-2)}
.cmp-local-file-pick>b{font-size:11.5px}.cmp-local-file-pick>span{margin:0!important;font-size:10.5px}
.cmp-local-file-pick input{width:100%;min-width:0;margin-top:4px;color:var(--muted);font:inherit;font-size:10.5px}
.cmp-local-file-summary{color:var(--muted);font-size:10.5px;line-height:1.4;overflow-wrap:anywhere}
.cmp-local-file-summary.is-error{color:var(--danger)}
.cmp-local-reference-label{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:3px 7px;align-items:center;margin:0!important;padding:5px 0;border-bottom:1px solid var(--border)}
.cmp-local-reference-label>span{grid-row:1/3;color:var(--accent);font-size:9px;font-weight:750}.cmp-local-reference-label input{width:100%;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:5px 6px;font:inherit;font-size:11px}
.cmp-local-reference-label small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:9px;font-weight:400}
.cmp-local-file-actions{display:flex;gap:7px;flex-wrap:wrap}
.cmp-manual-status{min-height:32px;border-radius:6px;background:var(--bg);border:1px solid var(--border);padding:8px;color:var(--muted);font-size:11.5px;line-height:1.45}
.cmp-manual-status.is-error{border-color:var(--danger);background:var(--danger-tint-soft);color:var(--danger)}
.cmp-manual-actions,.cmp-manual-exits{display:flex;flex-wrap:wrap;gap:7px}.cmp-manual-exits{padding-top:3px}.cmp-manual-exits #cmpManualLogout{margin-left:auto}
.cmp-manual-panel.is-reviewing{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;padding-bottom:8px}
.cmp-manual-panel.is-reviewing .cmp-manual-kicker{display:none}.cmp-manual-panel.is-reviewing h2{font-size:14px}.cmp-manual-panel.is-reviewing>p{grid-column:1;font-size:10px}.cmp-manual-panel.is-reviewing .cmp-manual-actions{grid-column:2;grid-row:1/3}.cmp-manual-panel.is-reviewing .cmp-manual-exits{grid-column:1/-1;padding:0}
.cmp-manual-panel.is-reviewing .cmp-manual-registry-fields{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 7px}
.cmp-manual-panel.is-reviewing .cmp-manual-registry-fields label{margin:0}.cmp-manual-panel.is-reviewing label[for="cmpManualSetSelect"],.cmp-manual-panel.is-reviewing #cmpManualSetSelect{display:none}
body.cmp-manual-mode #comparisonShell .cmp-left>.cmp-brand{display:none}
body.cmp-manual-mode #comparisonShell .cmp-direction{display:none}
.cmp-fidelity-questions{display:flex;flex-direction:column;gap:10px;padding-bottom:16px}
.cmp-fidelity-questions header h2{font-size:18px;line-height:1.15;margin:2px 0 6px}
.cmp-fidelity-questions header>span{font-size:9px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.cmp-fidelity-questions header p,.cmp-gap-field p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.45}
.cmp-current-candidate{font-size:13px;font-weight:700;padding:8px 10px;border-radius:6px;background:var(--panel-2);border:1px solid var(--border)}
.cmp-mark-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp-mark-actions .btn{min-width:0;font-size:11.5px;padding-inline:8px}
.cmp-mark-actions kbd{font-size:9px;opacity:.65;margin-left:4px}
.cmp-mark-best[aria-pressed="true"]{border-color:var(--ok);background:var(--ok-tint);color:var(--ok)}
.cmp-mark-worst[aria-pressed="true"]{border-color:var(--danger);background:var(--danger-tint-soft);color:var(--danger)}
.cmp-extreme-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp-extreme-summary>div{display:flex;flex-direction:column;gap:3px;border:1px solid var(--border);border-radius:6px;padding:8px;background:var(--bg)}
.cmp-extreme-summary span{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.cmp-extreme-summary b{font-size:12px}
.cmp-local-pair{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--border);border-radius:7px;background:var(--panel-2)}
.cmp-local-pair h3{font-size:12px;margin:0}.cmp-local-pair>p{margin:0;color:var(--muted);font-size:10.5px;line-height:1.4}
.cmp-local-pair>div{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:end}
.cmp-local-pair label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:10px;font-weight:700}
.cmp-local-pair select{width:100%;min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px;font:inherit;font-size:11px}
.cmp-local-pair>div>span{padding-bottom:8px;color:var(--muted);font-size:10px;text-transform:uppercase}
.cmp-local-pair>.btn{width:100%}
.cmp-compare-extremes{width:100%}
.cmp-gap-field{border:0;border-top:1px solid var(--border);padding:12px 0 0;margin:0;min-width:0}
.cmp-gap-field legend{font-size:12px;font-weight:700;padding:0;margin:0 0 2px}
.cmp-gap-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:8px}
.cmp-gap-choices .pick{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;width:100%;
  padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);cursor:pointer;font:inherit}
.cmp-gap-choices .pick:hover:not(:disabled){border-color:var(--accent-muted);background:var(--panel-2)}
.cmp-gap-choices .pick.on{border-color:var(--accent);background:var(--accent-tint-soft);color:var(--accent)}
.cmp-gap-choices .pick:disabled{cursor:not-allowed;opacity:.5}
.cmp-gap-choices .pick b{font-size:11.5px}.cmp-gap-choices .pick span{font-size:10.5px;color:var(--muted)}
.cmp-fidelity-notes{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:650}
.cmp-fidelity-notes textarea{width:100%;resize:vertical;min-height:76px;max-height:180px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:8px;font:inherit;font-weight:400}
.cmp-fidelity-notes small{align-self:flex-end;color:var(--muted);font-variant-numeric:tabular-nums}
.cmp-prompt-refs.is-fidelity .cmp-ref:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Comparison shell breakpoints are explicit: the base rail minimums alone exceed a phone viewport. */
@media (min-width:1100px){
  #comparisonShell .cmp-left:has(.cmp-prompt-refs.is-fidelity) .cmp-direction{max-height:18dvh;overflow:auto}
  #comparisonShell .cmp-left:has(.cmp-prompt-refs.is-fidelity) .cmp-prompt-panel{max-height:22dvh;overflow:auto}
}
@media (max-width:1099px){
  body.cmp-mode #comparisonShell{grid-template-columns:minmax(0,1fr) minmax(340px,400px);grid-template-rows:auto minmax(0,1fr)}
  #comparisonShell .cmp-left{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,.7fr) minmax(260px,1.3fr) minmax(220px,.8fr);
    align-items:start;max-height:210px;border-right:0;border-bottom:1px solid var(--border);overflow:auto}
  #comparisonShell .cmp-left>.cmp-brand,#comparisonShell .cmp-left>.cmp-rail-label{display:none}
  #comparisonShell .cmp-direction{grid-column:1;max-height:176px;overflow:auto}
  #comparisonShell .cmp-prompt-panel{grid-column:2;max-height:176px;overflow:auto}
  #comparisonShell .cmp-prompt-refs{grid-column:3;min-height:0}
  #comparisonShell .cmp-prompt-refs .cmp-refs{flex-direction:row;overflow-x:auto}
  #comparisonShell .cmp-prompt-refs .cmp-ref{height:150px;min-height:0;max-height:150px;min-width:130px}
  #comparisonShell .cmp-load-error{grid-column:1/-1;margin:0}
  #comparisonShell .cmp-center{grid-column:1;grid-row:2}
  #comparisonShell .cmp-right{grid-column:2;grid-row:2}
  .cmp-candidate-toolbar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"prev nav next" "progress progress progress"}
  #cmpCandidatePrev{grid-area:prev}#cmpCandidateNav{grid-area:nav}#cmpCandidateNext{grid-area:next}
  .cmp-candidate-progress{grid-area:progress;text-align:center}
  body.cmp-fidelity-mode #comparisonShell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(560px,1fr) auto;overflow-y:auto;overflow-x:hidden}
  body.cmp-fidelity-mode #comparisonShell .cmp-left{grid-column:1;grid-row:1}
  body.cmp-fidelity-mode #comparisonShell .cmp-center{grid-column:1;grid-row:2;min-height:560px}
  body.cmp-fidelity-mode #comparisonShell .cmp-right{grid-column:1;grid-row:3;border-left:0;border-top:1px solid var(--border);overflow:visible}
  body.cmp-fidelity-mode .cmp-evidence-layout{grid-template-columns:minmax(300px,1fr) minmax(360px,1.1fr)}
}

@media (max-width:760px){
  body.cmp-mode #comparisonShell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(330px,52dvh) auto;
    overflow-y:auto;overflow-x:hidden;align-content:start;scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  #comparisonShell .cmp-left{position:sticky;top:0;z-index:7;grid-column:1;grid-row:1;display:grid;
    grid-template-columns:minmax(0,1fr);gap:6px;max-height:none;padding:8px 10px;background:var(--panel);overflow:visible}
  #comparisonShell .cmp-direction{display:none}
  #comparisonShell .cmp-prompt-panel{grid-column:1;max-height:54px;overflow:auto;font-size:11.5px;padding:6px}
  #comparisonShell .cmp-prompt-refs{grid-column:1;display:block}
  #comparisonShell .cmp-prompt-refs>.cmp-rail-label{display:none}
  #comparisonShell .cmp-prompt-refs .cmp-refs{display:flex;flex-direction:row;gap:6px;overflow-x:auto;overscroll-behavior-inline:contain}
  #comparisonShell .cmp-prompt-refs .cmp-ref{flex:0 0 116px;width:116px;height:76px;min-width:116px;min-height:76px;max-height:76px}
  #comparisonShell .cmp-load-error{grid-column:1;font-size:10.5px;padding:6px}
  #comparisonShell .cmp-center{grid-column:1;grid-row:2;min-height:330px}
  #comparisonShell .cmp-right{grid-column:1;grid-row:3;border-left:0;border-top:1px solid var(--border);overflow:visible;padding:12px 10px calc(88px + env(safe-area-inset-bottom));}
  #comparisonShell .cmp-right-top{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:8;padding:9px 10px calc(9px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border);background:color-mix(in srgb,var(--panel) 96%,transparent)}
  .cmp-candidate-toolbar{padding:6px;gap:5px}
  .cmp-candidate-nav{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:5px}
  .cmp-candidate-nav button{flex:1 0 86px;scroll-snap-align:center;padding:6px;font-size:10.5px}
  .cmp-candidate-step{width:30px;height:30px}
  .cmp-viewer-mask{padding:16px}
  .cmp-mark-actions,.cmp-extreme-summary{grid-template-columns:1fr 1fr}
  .cmp-fidelity-questions{padding-bottom:8px}
  .cmp-exit-finalists{left:8px;bottom:8px}
  body.cmp-manual-mode #comparisonShell .cmp-right{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .cmp-manual-empty{padding:20px}.cmp-manual-empty h1{font-size:20px}
  body.cmp-fidelity-mode #comparisonShell{grid-template-rows:auto auto auto}
  body.cmp-fidelity-mode #comparisonShell .cmp-center{min-height:0}
  body.cmp-fidelity-mode .cmp-evidence-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(210px,34dvh) minmax(340px,52dvh)}
  .cmp-reference-stage{grid-row:1}.cmp-candidate-stage{grid-row:2}
  .cmp-reference-toolbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"identity zoom" "identity nav";padding:6px 8px}
  .cmp-reference-toolbar>div:first-child{grid-area:identity;display:grid;grid-template-columns:auto 1fr;gap:2px 6px}.cmp-reference-toolbar>div:first-child strong{grid-column:1/-1}.cmp-reference-nav{grid-area:nav}.cmp-reference-zoom{grid-area:zoom}
  .cmp-reference-filmstrip{padding:5px 6px}.cmp-reference-thumb{flex-basis:76px;height:52px}
  .cmp-candidate-nav button{flex-basis:108px}.cmp-candidate-tab-copy{padding:4px 5px}
  .cmp-gap-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.cmp-gap-choices .pick{padding:7px 6px}
}

@media (prefers-reduced-motion:reduce){.cmp-viewer-spinner{animation:none}}
/* ── Category-column widgets — ONE shared geometry ──────────────────────────────────────────────
   Every "labelled category → options" widget shares a single two-column GRID owned in this block.
   Two structural families opt in via the selector lists below:
     • .chips    > .chips-group (Scene type, Language, Capture, Intent, Emotion)
     • .tv-widget > .tv-group   (Timbre, Speech Dynamics — the _renderVocabWidget panels)
   The grid is:
     col 1  min-content → a RIGHT-justified category column sized to the widest category WORD, so
                          multi-word categories line-wrap and the column stays as narrow as possible;
     col 2  1fr         → the LEFT-justified options column.
   The grid (not any per-widget rule) owns the column width — so widgets drop their hand-set label
   widths (88px / 84px) and contribute only colour/affordance. display:contents promotes each row's
   label+items into the shared grid; align-items:stretch keeps each label's border-right divider as
   tall as its own options and re-fits on reflow. The non-row children (hidden inputs, the tv-head
   ⓘ-definitions bar, the tv-summary) span both columns. Applied via :has so a container with only
   bare (ungrouped) items keeps its plain flow. To add a third family, add its hooks to these lists. */
/* The tv grid lives on [data-tv-palette] (the collapsible body that directly holds the .tv-group rows),
   NOT .tv-widget — the collapse-on-leave wrapper sits between them, so the rows' label+chips must be
   promoted into THIS element's grid. */
/* Span-editor multi-chip fields (Genre / Mood / Instrument families) join this grid too, so they read
   like Scene Type — category label on the left, chips on the right — instead of stacked. */
.chips:has(.chips-group),
.field-chips:has(.chips-group),
[data-tv-palette]:has(.tv-group){
  display:grid;grid-template-columns:min-content 1fr;
  column-gap:var(--space-3);row-gap:var(--space-2);align-items:stretch;
}
.chips:has(.chips-group) > .chips-group,
.field-chips:has(.chips-group) > .chips-group,
[data-tv-palette] > .tv-group{display:contents}                  /* promote label + items into the shared grid */
.chips:has(.chips-group) > :not(.chips-group),
.field-chips:has(.chips-group) > :not(.chips-group),
[data-tv-palette] > :not(.tv-group){grid-column:1 / -1}          /* full-width extras (the field's own header) */
/* Shared label GEOMETRY (right-justify + divider). Each family keeps its own typography below.
   The grouping divider is drawn as a ::after layer, NOT the label's border-right — so a per-widget
   chrome reset (e.g. the Intent label is a <button> that needs `border:none`) can't clobber it. This
   is the single owner of the divider; align-items:stretch makes ::after span each category's full
   (multi-row) chip block. */
/* SINGLE OWNER of category-label typography + geometry for BOTH families — .chips-group-label (Scene
   type / Language / Capture / Intent / Emotion) and .tv-glabel (Timbre / Speech Dynamics). One look:
   right-justified, muted, 11px/600, listener-facing case (NO text-transform — the old base UPPERCASED
   and each container un-did it; a missed container, #acousticsForm, showed ALL CAPS). Per-class rules
   add only their own specifics (e.g. tv-glabel's help cursor) — never re-set the shared typography. */
.chips-group-label,
.tv-glabel{
  position:relative;text-align:right;padding-right:12px;padding-top:3px;
  font-size:11px;font-weight:600;color:var(--muted);letter-spacing:normal;
}
.chips-group-label::after,
.tv-glabel::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2px;background:var(--border)}
.chips-group-items{display:flex;flex-wrap:wrap;row-gap:var(--space-1);column-gap:var(--space-1);align-content:start}
.chips-group-items-padded{padding:2px 0}
.chips .pick{
  padding:3px 9px;border:1px solid var(--border);border-radius:6px;
  cursor:pointer;font-size:11px;color:var(--muted);background:transparent;
  transition:all 0.15s ease;
}
.chips .pick:hover{border-color:var(--accent-muted);color:var(--text);background:var(--panel-2)}
/* CANONICAL selected-chip style — one rule for every chip picker so the selected look
   can't drift per-widget. A soft accent "highlight" (tint bg + accent border + accent-on
   text), NOT a solid fill. Covers Scene Type (.pick), span multis (.axw-tag: genre / mood /
   instruments), and the vocab widgets (.tv-chip: timbre / speech dynamics). The chip-group
   primitive unifies the selected class onto .on; families still carrying .sel migrate in turn. */
.chips .pick.on,
.axw-tag.on,
.tv-chip.on,
.ecw-int.sel{background:color-mix(in srgb, var(--accent) 24%, var(--panel-2));border-color:var(--accent);color:var(--accent-on);font-weight:600}
.chips .pick[data-tip]{position:relative;}
#dataTip{
  position:fixed;display:none;
  max-width:220px;width:max-content;padding:6px 9px;border-radius:6px;
  background:var(--panel-3);border:1px solid var(--border);
  color:var(--text);font-size:11px;line-height:1.45;
  white-space:normal;pointer-events:none;z-index:var(--z-top);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}

.timeline-link{
  margin-top:6px;display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-tint-soft);border:1px dashed var(--accent);color:var(--accent);
  padding:6px 10px;border-radius:6px;font-size:11px;cursor:pointer;
}
.timeline-link-label{margin-bottom:4px;color:var(--text);font-size:12px}
.timeline-link:hover{background:var(--accent-tint-med)}

.skipped-summary{
  background:var(--panel-2);border:1px solid var(--border);border-radius:6px;
  padding:8px 10px;font-size:11px;color:var(--muted);margin-bottom:8px;
}
.skipped-summary summary{cursor:pointer;color:var(--text);font-weight:600;font-size:12px}
.skipped-summary[open]{padding-bottom:10px}
.skipped-summary ul{margin:6px 0 0;padding-left:18px}
.skipped-summary li{margin-bottom:3px}

.form-foot{
  padding:8px 12px;border-top:1px solid var(--border);background:var(--panel-2);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.subject-bulk{
  margin-top:10px;padding-top:8px;border-top:1px solid var(--border);
}
.subject-bulk-head{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);margin-bottom:6px;
}
.subject-bulk-actions{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  flex-wrap:wrap;
}
.subject-bulk-actions select{
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  padding:3px 6px;border-radius:4px;font-size:11px;
  max-width:160px;
}
.subject-bulk-transfer{display:inline-flex;align-items:center;gap:4px}
.subject-bulk-transfer-label{color:var(--muted);font-size:10px;letter-spacing:.5px;text-transform:uppercase}
.seg-label-input{font-weight:500}
.form-foot .saved-indicator{
  font-size:10px;color:var(--muted);font-style:italic;
  letter-spacing:.2px;margin-left:4px;
  font-variant-numeric:tabular-nums;
}
.form-foot .grow{flex:1}
.review-check{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;color:var(--muted);cursor:pointer;
  padding:3px 8px;border-radius:5px;
}
.review-check input{margin:0;cursor:pointer}
.review-check:hover{background:var(--panel)}

.keys{
  display:flex;gap:10px;font-size:11px;color:var(--muted);padding:5px 12px;
  border-top:1px solid var(--border);background:var(--panel-2);flex-shrink:0;
  flex-wrap:wrap;
}
.keys kbd{
  background:var(--panel);border:1px solid var(--border);border-radius:3px;
  padding:0 5px;font-family:ui-monospace,Menlo,monospace;font-size:11px;
}

/* ============================== MODAL ============================== */
.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:var(--z-overlay);
  display:none;align-items:center;justify-content:center;
}
.modal-bg.on{display:flex}
.modal{
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  width:min(680px,92vw);max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.help-dialog{width:min(780px,94vw)}
.merge-dialog{width:min(560px,95vw)}
.model-compare-dialog{width:min(820px,95vw)}
.modal-head{
  padding:12px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-head h2{margin:0;font-size:14px}
.modal-head .x{background:transparent;border:0;color:var(--muted);font-size:18px;cursor:pointer}
.modal-body{padding:14px 16px;overflow-y:auto;flex:1}
.modal-foot{padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:6px}
.import-dialog{width:min(640px,92vw)}
.import-dialog-copy{margin:0 0 12px;color:var(--muted);font-size:var(--type-body);line-height:1.5}
.import-dialog-copy code{color:var(--text)}
.import-dialog-label{display:block;margin:0 0 5px;color:var(--text);font-size:var(--type-label);font-weight:600}
.import-dialog-text{display:block;width:100%;box-sizing:border-box;padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font:var(--type-body)/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.import-dialog-status{min-height:18px;margin-top:6px;color:var(--muted);font-size:var(--type-body)}
/* Project direction is task-level context, so its collapsible rail sits at the outermost left of
   the workspace. Opening it adds a bounded column; every WarpSonic region reflows beside it. */
.app.direction-open{
  grid-template-columns:var(--direction-w,320px) 5px var(--lcol-w) 5px minmax(360px,1fr) 5px var(--rcol-w);
  grid-template-areas:
    "topbar    topbar topbar topbar topbar  topbar topbar"
    "direction dsplit form   lsplit video   csplit props"
    "direction dsplit form   lsplit rsplit  csplit props"
    "direction dsplit form   lsplit chrome  csplit props"
    "direction dsplit form   lsplit content csplit props"
    "keys      keys   keys   keys   keys    keys   keys";
}
.app.direction-open.lcol-hidden{grid-template-columns:var(--direction-w,320px) 5px 0 20px minmax(360px,1fr) 5px var(--rcol-w)}
.app.direction-open.rcol-hidden{grid-template-columns:var(--direction-w,320px) 5px var(--lcol-w) 5px minmax(360px,1fr) 20px 0}
.app.direction-open.lcol-hidden.rcol-hidden{grid-template-columns:var(--direction-w,320px) 5px 0 20px minmax(360px,1fr) 20px 0}
.direction-panel{grid-area:direction;min-width:0;min-height:0;border:0;border-right:1px solid var(--accent);
  background:var(--panel);box-shadow:4px 0 14px rgba(0,0,0,.18);overflow:hidden;display:flex;flex-direction:column}
.direction-panel[hidden]{display:none}
.direction-splitter{grid-area:dsplit;position:relative;z-index:5;background:var(--splitter-bg,var(--border));cursor:col-resize}
.direction-splitter[hidden]{display:none}
.app.direction-open>.direction-splitter{display:block}
.direction-splitter::after{content:'';position:absolute;inset:0 -3px}
.direction-splitter:hover,.direction-splitter.dragging{background:var(--accent)}
.direction-panel-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px}
.direction-panel-head h2{margin:0;font-size:12px}
.direction-panel-head .x{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--muted);cursor:pointer;padding:3px}
.direction-panel-head .x:hover{color:var(--accent-on);background:var(--accent-tint-soft)}
.direction-panel-content{padding:10px 12px;overflow:auto;min-height:0;flex:1 1 auto}
.direction-panel-foot{display:flex;justify-content:flex-end;padding:7px 10px;border-top:1px solid var(--border)}
.direction-head{background:var(--accent-tint-soft);border-bottom:1px solid var(--accent)}
.direction-head h2{display:flex;align-items:center;gap:7px;color:var(--accent-on)}
.direction-head h2 .ic{stroke:var(--accent-on);flex:0 0 auto}
.direction-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--warn);background:var(--warn-tint);border-radius:99px;padding:2px 7px;margin-left:2px}
.direction-lead{margin:0 0 10px;font-size:12px;color:var(--muted)}
.direction-text{font-size:13.5px;line-height:1.6;color:var(--text);white-space:pre-wrap}
/* D3 "what changed" summary — leads the body when the direction was edited since this annotator last
   acknowledged it. Warn-tinted to say "read this first", but the change lines carry their own polarity
   (added = ok/green, removed = struck + muted) so it reads at a glance without re-skimming the body. */
.direction-delta{margin:0 0 12px;padding:9px 11px;border-left:3px solid var(--warn);
  background:var(--warn-tint-soft);border-radius:0 6px 6px 0;font-size:12.5px;line-height:1.5}
.direction-delta .dd-head{font-weight:600;color:var(--text);margin-bottom:6px}
.direction-delta ul{list-style:none;margin:0;padding:0}
.direction-delta li{display:flex;gap:6px;align-items:baseline;padding:1px 0}
.direction-delta li .dd-mark{flex:0 0 auto;font-weight:700;font-family:var(--mono,monospace)}
.direction-delta li.dd-add .dd-mark{color:var(--ok)}
.direction-delta li.dd-add .dd-txt{color:var(--text)}
.direction-delta li.dd-rem .dd-mark{color:var(--danger)}
.direction-delta li.dd-rem .dd-txt{color:var(--muted);text-decoration:line-through}
.direction-btn .ic{stroke:currentColor}
.direction-btn.changed{border-color:var(--warn);color:var(--warn)}
@media (max-width:700px){
  .app.direction-open{position:relative;grid-template-columns:minmax(0,1fr);grid-template-areas:"topbar" "video" "chrome" "content" "mtabs"}
  .app.direction-open>.direction-panel{position:absolute;inset:44px auto 30px 0;width:min(320px,calc(100% - 36px));z-index:var(--z-sticky);box-shadow:8px 0 22px rgba(0,0,0,.38)}
  .app.direction-open>.direction-splitter{display:none}
}
/* At compact laptop widths the base workspace is intentionally one column. This block follows the
   desktop direction rules so their seven-track minimums cannot win by source order. */
@media (min-width:701px) and (max-width:1100px){
  .app.direction-open,
  .app.direction-open.lcol-hidden,
  .app.direction-open.rcol-hidden,
  .app.direction-open.lcol-hidden.rcol-hidden{
    position:relative;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(30vh,1fr) auto auto auto;
    grid-template-areas:"topbar" "video" "chrome" "content" "props" "form" "keys";
  }
  .app.direction-open>.direction-panel{
    position:absolute;inset:44px auto 30px 0;width:min(var(--direction-w,320px),calc(100% - 36px));
    z-index:var(--z-sticky);box-shadow:8px 0 22px rgba(0,0,0,.38)
  }
  .app.direction-open>.direction-splitter{display:none}
}
.cmp-direction-ack{align-self:flex-start;margin:8px 0 12px}
/* The acknowledgement bar. A binding direction change must be impossible to MISS and always
   possible to step away from — so it RESERVES SPACE at the top of the viewport rather than floating
   over the chrome. The previous build made it position:fixed over the topbar and it occluded
   Release, Get Next Task, Home and the section-completion chips: hit-tested, every one of those
   returned the bar at its center, so a tutor who declined to acknowledge could not leave the task
   (code-review 2026-07-22). That was the third distinct mechanism by which this feature trapped the
   user. Pushing the app down instead makes occlusion structurally impossible rather than guarded.
   `body.dir-nag` is set by the direction owner and offsets BOTH shells, so it works in cmp-mode too,
   where #appRoot is display:none. */
.dir-ackbar{position:fixed;top:0;left:0;right:0;height:var(--dir-nag-h);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:11.5px;font-weight:600;color:var(--warn);background:var(--warn-tint);
  border:0;border-bottom:1px solid var(--warn);border-radius:0;box-shadow:none;z-index:var(--z-above-cmp)}
.dir-ackbar .ic{stroke:var(--warn);flex:0 0 auto}
.dir-ackbar[hidden]{display:none}
body.dir-nag #appRoot{padding-top:var(--dir-nag-h)}
body.dir-nag.cmp-mode #comparisonShell{top:var(--dir-nag-h);height:calc(100dvh - var(--dir-nag-h))}
body.dir-nag #homeShell{padding-top:var(--dir-nag-h)}
/* Same scoped raise for the two surfaces the comparison overflow menu opens. cmp-mode hides #appRoot,
   so that menu is the ONLY route to them there — and at --z-confirm (200) / --z-overlay (100) they
   painted entirely behind the opaque shell (500): the dialog opened, nothing appeared, and every click
   went into the WarpDiff iframe. Verified by elementFromPoint before and after (code-review 2026-07-26),
   which is what makes this the whole fix and not a guess about paint order. */
body.cmp-mode #confirmOverlay{z-index:var(--z-above-cmp)}
body.cmp-mode #feedbackModal{z-index:var(--z-above-cmp)}
/* Lead task-authoring view (Phase 2, in-app) — a plain form over the task API. */
.author-note{margin:0 0 12px;font-size:12px;color:var(--muted)}
.author-note.au-ok{color:var(--ok)}
.author-note.au-warn{color:var(--warn)}
.author-sec{margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--border)}
/* Lead Console tabs (lead-console.md — consolidation pass): Tasks · Queues · Monitor · People. */
/* The console's MODAL width (cmp-mode: the console over a live comparison). This was an inline
   style on the element — which silently outranked every stylesheet width, including a dead
   1200px lead-home rule below that never applied (review 2026-08-01). Page mode overrides it. */
.lc-modal{width:min(920px,96vw)}
.ch-grid .au-empty{padding:6px 0;min-height:0}
.lc-pipeline-intro{display:none}
.lc-pipeline-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:2px 0 18px;border-bottom:1px solid var(--border)}
.lc-pipeline-heading h1{margin:0 0 4px;font-size:clamp(22px,2vw,30px);letter-spacing:-.035em;line-height:1.05}
.lc-pipeline-heading p{margin:0;color:var(--muted);font-size:13px}
.lc-pipeline-actions{display:flex;gap:8px;flex:0 0 auto;padding-top:14px}
.lc-pipeline-signals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:14px 0 4px}
.lc-pipeline-signal{min-width:0;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);display:flex;flex-direction:column;gap:3px}
.lc-pipeline-signal b{font-size:22px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.lc-pipeline-signal span{font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.lc-pipeline-signal small{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-pipeline-loading{color:var(--muted);font-size:12px}
.lc-pipeline-stale{color:var(--warn)}
.lc-pipeline-page{max-width:1280px;padding:4px 0 28px}
.lc-pipeline-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.7fr);gap:18px;margin-top:18px;align-items:start}
.lc-pipeline-main,.lc-pipeline-context{display:grid;gap:18px}
.lc-pipeline-main .author-sec,.lc-pipeline-context .author-sec{margin:0;padding:16px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2)}
.lc-pipeline-main .author-sec h3,.lc-pipeline-context .author-sec h3{justify-content:space-between;margin-bottom:12px;font-size:14px}
.lc-pipeline-main .author-sec h3 span,.lc-pipeline-context .author-sec h3 span{color:var(--muted);font-size:10px;font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.lc-pipeline-attention,.lc-pipeline-decisions,.lc-pipeline-queues,.lc-pipeline-activity{display:grid;gap:8px}
.lc-attention-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}
.lc-attention-row:first-child{padding-top:0;border-top:0}
.lc-attention-row>span{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.lc-attention-row div,.lc-decision-row div{min-width:0;display:grid;gap:3px}
.lc-attention-row b,.lc-decision-row b,.lc-pipeline-queue b{font-size:12px}
.lc-attention-row small,.lc-decision-row small,.lc-pipeline-queue small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-decision-row,.lc-pipeline-queue{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:11px 0;border:0;border-top:1px solid var(--border);border-radius:0;background:transparent;color:var(--text);font:inherit;cursor:pointer}
.lc-decision-row:first-child,.lc-pipeline-queue:first-child{padding-top:0;border-top:0}
.lc-decision-row:hover,.lc-decision-row:focus-visible,.lc-pipeline-queue:hover,.lc-pipeline-queue:focus-visible{color:var(--accent-on);outline:0}
.lc-decision-row>span{flex:0 0 auto;color:var(--muted);font-size:10.5px;text-align:right}
.lc-pipeline-context{position:sticky;top:16px}
.lc-pipeline-context p{margin:8px 0 12px;color:var(--muted);font-size:12px;line-height:1.45}
.lc-focus-name{font-size:14px}
.lc-pipeline-context dl{display:grid;gap:7px;margin:0 0 14px}
.lc-pipeline-context dl div{display:flex;justify-content:space-between;gap:12px;font-size:11px}
.lc-pipeline-context dt{color:var(--muted)}
.lc-pipeline-context dd{margin:0;color:var(--text);text-transform:capitalize}
.lc-pipeline-queue>span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px}
.lc-pipeline-queue i{display:block;width:58px;height:4px;border-radius:4px;overflow:hidden;background:var(--panel-3)}
.lc-pipeline-queue em{display:block;height:100%;background:var(--accent)}
.lc-pipeline-activity>div{display:grid;grid-template-columns:7px minmax(0,1fr);gap:8px;align-items:start;padding:9px 0;border-top:1px solid var(--border)}
.lc-pipeline-activity>div:first-child{padding-top:0;border-top:0}
.lc-pipeline-activity i{width:6px;height:6px;margin-top:4px;border-radius:50%;background:var(--ok)}
.lc-pipeline-activity b{display:block;font-size:11px}
.lc-pipeline-activity small{display:block;margin-top:2px;color:var(--muted);font-size:10.5px}
.lc-task-page{max-width:1280px;padding:4px 0 28px}
.lc-task-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:2px 0 18px;border-bottom:1px solid var(--border)}
.lc-task-page-head h1{margin:3px 0 5px;font-size:30px;line-height:1.05;letter-spacing:-.04em}
.lc-task-page-head p{max-width:620px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.lc-task-page-head>div:last-child{display:flex;gap:8px;padding-top:10px;flex:0 0 auto}
.lc-task-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.28fr) minmax(150px,.22fr);gap:8px;margin:16px 0 10px}
.lc-task-toolbar .home-search{min-height:36px;padding:7px 10px;font-size:12px}
.lc-task-toolbar select{min-height:36px;padding:7px 9px;border:1px solid var(--border);border-radius:6px;background:var(--panel-2);color:var(--text);font:inherit;font-size:12px}
.lc-task-tabs{display:flex;gap:5px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--border);overflow-x:auto}
.lc-task-tabs button{flex:0 0 auto;padding:6px 10px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);font:600 11px inherit;cursor:pointer}
.lc-task-tabs button:hover{color:var(--text);background:var(--panel-2)}
.lc-task-tabs button[aria-selected="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}
.lc-task-list-title{justify-content:flex-start!important;margin-bottom:10px!important;font-size:13px!important}
.lc-task-list-title .lc-count{color:var(--muted);font-size:11px;font-weight:500}
.lc-task-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.34fr);gap:18px;align-items:start}
.lc-task-main{min-width:0}
.lc-task-context{position:sticky;top:16px;display:grid;gap:14px}
.lc-task-context .author-sec{margin:0;padding:14px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2)}
.lc-task-context .author-sec h3{justify-content:space-between;font-size:13px}
.lc-task-context p{margin:7px 0 0;color:var(--muted);font-size:11.5px;line-height:1.45}
.lc-task-context dl{display:grid;gap:8px;margin:11px 0 0}
.lc-task-context dl div{display:flex;justify-content:space-between;gap:10px;font-size:11px}
.lc-task-context dt{color:var(--muted)}
.lc-task-context dd{margin:0;color:var(--text);text-align:right}
.lc-task-context strong{display:block;font-size:13px;overflow-wrap:anywhere}
.lc-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:2px 0 18px;border-bottom:1px solid var(--border)}
.lc-page-head h1{margin:3px 0 5px;font-size:30px;line-height:1.05;letter-spacing:-.04em}
.lc-page-head p{max-width:650px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.lc-page-head>div:last-child{display:flex;gap:8px;padding-top:10px;flex:0 0 auto}
.lc-media-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.32fr);gap:18px;margin-top:16px;align-items:start}
.lc-media-main{min-width:0}
.lc-media-context{position:sticky;top:16px;display:grid;gap:14px}
.lc-media-context .author-sec{margin:0;padding:14px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2)}
.lc-media-context .author-sec h3{justify-content:space-between;font-size:13px}
.lc-media-context p{margin:7px 0 0;color:var(--muted);font-size:11.5px;line-height:1.45}
.lc-media-focus-preview{display:grid;place-items:center;min-height:220px;margin-bottom:12px;overflow:hidden;border-radius:7px;background:var(--panel-3)}
.lc-media-focus-preview .au-thumb{width:100%;height:clamp(220px,28vh,360px);border:0;border-radius:0;object-fit:contain}
.lc-media-context dl{display:grid;gap:8px;margin:12px 0 0}
.lc-media-context dl div{display:flex;justify-content:space-between;gap:10px;font-size:11px}
.lc-media-context dt{color:var(--muted)}
.lc-media-context dd{margin:0;color:var(--text);text-align:right}
.lc-media-context strong{display:block;overflow-wrap:anywhere;font-size:12px}
.lc-media-context-actions{display:flex;gap:8px;margin-top:14px}
.med-tile.is-selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel-2))}
.lc-direction-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.32fr);gap:18px;margin-top:16px;align-items:start}
.lc-direction-main{min-width:0}
.lc-direction-context{position:sticky;top:16px}
.lc-direction-context .author-sec{margin:0}
.lc-context-facts{display:grid;gap:8px;margin:12px 0 0}
.lc-context-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:8px;border-top:1px solid var(--border)}
.lc-context-facts dt{color:var(--muted);font-size:10.5px}
.lc-context-facts dd{margin:0;color:var(--text);font-size:11.5px;text-align:right}
.lc-people-attention,.lc-people-coverage{display:grid;gap:8px}
.lc-people-attention>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--border)}
.lc-people-attention>div:first-child{padding-top:0;border-top:0}
.lc-people-attention b{display:block;font-size:12px}
.lc-people-attention small{display:block;margin-top:2px;color:var(--muted);font-size:10.5px}
.lc-people-coverage>div{display:grid;grid-template-columns:minmax(70px,.4fr) minmax(0,1fr) auto;gap:8px;align-items:center;font-size:11px}
.lc-people-coverage i{height:5px;border-radius:4px;overflow:hidden;background:var(--panel-3)}
.lc-people-coverage i em{display:block;height:100%;background:var(--accent)}
.lc-brand{font-weight:800;letter-spacing:-.03em}
.lc-title-muted{color:var(--muted);font-weight:500}
.lc-create-flow{margin:0 0 16px;padding:16px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2)}
.lc-create-flow-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.lc-create-flow-head h2{margin:0 0 4px;font-size:20px;letter-spacing:-.025em}
.lc-create-flow-head p{margin:0;color:var(--muted);font-size:12px;max-width:620px}
.lc-create-flow-head .lc-eyebrow{display:flex;margin:0 0 7px;border:0;padding:0;font-size:9px}
.lc-create-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:16px 0 10px}
.lc-create-step{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:center;text-align:left;padding:9px 10px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.lc-create-step b{grid-row:1 / span 2;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel);font-size:11px}
.lc-create-step span{font-size:11px;font-weight:750;color:var(--text)}
.lc-create-step small{font-size:10px;color:var(--muted)}
.lc-create-step.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}
.lc-create-step.on b{background:var(--accent);color:#fff}
.lc-create-stage-note{font-size:11px;color:var(--muted);padding:2px 0 10px}
.lc-create-readiness{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.lc-create-readiness-item{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border:1px solid var(--border);border-radius:6px;background:var(--panel)}
.lc-create-readiness-item b{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-create-readiness-item span{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lc-create-readiness p{grid-column:1 / -1;margin:2px 0 0;font-size:11px;color:var(--muted)}
.lc-create-flow-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}
.lc-create-form-shell[data-create-stage="define"] [data-create-stage="route"],
.lc-create-form-shell[data-create-stage="define"] [data-create-stage="publish"],
.lc-create-form-shell[data-create-stage="route"] [data-create-stage="define"],
.lc-create-form-shell[data-create-stage="route"] [data-create-stage="publish"],
.lc-create-form-shell[data-create-stage="publish"] [data-create-stage="define"],
.lc-create-form-shell[data-create-stage="publish"] [data-create-stage="route"]{opacity:.52;transition:opacity .14s}
.lc-create-form-shell [data-create-stage]{transition:opacity .14s}

/* ── Create work: prototype contract ───────────────────────────────────────
   This is a deliberate authoring page, not the legacy task form with a new title. The source,
   destination, and publish consequence stay legible as distinct decisions. */
body.lead-home #authorModal{--muted:#b7bcc5;--dim:#aab0ba;--border:#4a4f58}
body.lead-home #authorModal .modal-head{display:grid;grid-template-columns:minmax(190px,1fr) minmax(190px,290px) auto;gap:16px;align-items:center}
.lc-project-switcher{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;color:var(--text);font-size:12px;font-weight:700}
.lc-project-switcher span{color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.lc-project-switcher select{min-width:0;width:100%;padding:7px 28px 7px 9px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);font:inherit;font-weight:650}
.lc-project-context{display:none;color:var(--muted);font-size:11px}
.lc-create-page{width:100%;max-width:none;padding:4px 0 24px}
.lc-create-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:2px 0 22px;border-bottom:1px solid var(--border)}
.lc-create-page-head h1{margin:3px 0 5px;font-size:30px;line-height:1.05;letter-spacing:-.04em}
.lc-create-page-head p{max-width:610px;margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.lc-create-page-head .lc-eyebrow{display:flex;gap:8px;margin:0;border:0;padding:0;color:var(--accent-on)}
.lc-create-page-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-top:10px}
.lc-create-flow{margin:18px 0 16px;padding:0;border:0;background:transparent}
.lc-create-steps{margin:0 0 10px;gap:10px}
.lc-create-step{min-height:58px;padding:12px 13px;border-color:var(--border);color:var(--muted);background:var(--panel-2)}
.lc-create-step b{width:26px;height:26px;background:var(--panel-3);font-size:12px}
.lc-create-step span{font-size:12px;color:var(--text)}
.lc-create-step small{font-size:11px;color:var(--muted)}
.lc-create-step.on{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent) 15%,var(--panel-2))}
.lc-create-stage-note{padding:0;color:var(--muted);font-size:12px}
.lc-create-layout{display:grid;grid-template-columns:minmax(440px,.78fr) minmax(0,1.22fr);gap:24px;align-items:start}
.lc-create-card,.lc-create-source-card,.lc-machine-context-card{margin:0!important;padding:18px!important;border:1px solid var(--border)!important;border-radius:10px;background:var(--panel-2)}
.lc-create-form-shell{display:grid;gap:18px}
.lc-create-definition-row{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.lc-create-definition-main{min-width:0}
.lc-input-package-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.lc-input-media,.lc-input-context{min-width:0}
.lc-create-card h2,.lc-create-source-card h2,.lc-machine-context-card h2,.lc-create-preflight h2{display:flex;flex-direction:column;gap:3px;margin:0 0 18px;font-size:16px;letter-spacing:-.015em;color:var(--text)}
.lc-create-card h2 span,.lc-create-source-card h2 span,.lc-machine-context-card h2 span{font-size:11px;font-weight:500;letter-spacing:0;color:var(--muted)}
.lc-create-card .author-grid{gap:14px 12px;margin:0}
.au-cmp-question-fields:not([hidden]){display:contents}
.au-cmp-question-fields[hidden]{display:none}
.au-rf-contract{display:grid;gap:8px;padding:12px;border:1px solid var(--accent);border-radius:8px;background:var(--accent-tint)}
.au-rf-contract[hidden]{display:none}
.au-rf-contract>b{font-size:13px}.au-rf-contract p,.au-rf-contract small{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
.au-rf-contract>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.au-rf-contract>div span{display:flex;flex-direction:column;gap:3px;padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--panel)}
.au-rf-contract>div strong{font-size:11px;color:var(--text)}
.lc-create-card label,.lc-create-source-card label,.lc-machine-context-card label{gap:6px;color:var(--text);font-size:12px;font-weight:700}
.lc-create-card input[type="text"],.lc-create-card select,.lc-create-card textarea{min-height:38px;padding:8px 10px;border-color:var(--border);background:var(--panel);color:var(--text);font-size:13px}
.lc-create-card input[type="file"],.lc-create-source-card input[type="file"],.lc-machine-context-card input[type="file"]{width:100%;padding:7px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--muted);font-size:11px}
.lc-create-card input[type="file"]::file-selector-button,.lc-create-source-card input[type="file"]::file-selector-button,.lc-machine-context-card input[type="file"]::file-selector-button{margin-right:9px;padding:6px 9px;border:1px solid var(--border);border-radius:5px;background:var(--panel-2);color:var(--text);font:inherit;font-weight:700;cursor:pointer}
.lc-create-card textarea{min-height:84px}
.lc-create-card .au-md-hint{color:var(--muted);font-weight:500}
.lc-field-help{display:block;color:var(--muted);font-size:11px;font-weight:500;line-height:1.45}
.lc-source-field{display:grid;gap:6px;min-width:0}.lc-source-label{font-size:12px;font-weight:700;color:var(--text)}
#lcSingleSourcePackage>.lc-source-label{display:block;margin-bottom:7px}
.lc-source-state{display:none!important}
.lc-source-picker{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:112px;padding:14px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
.lc-source-picker:has(>.au-thumb){grid-template-columns:1fr;gap:0;padding:0;align-items:start;overflow:hidden}
.lc-source-picker>.au-thumb{width:100%;height:clamp(170px,22vh,270px);border:0;border-bottom:1px solid var(--border);border-radius:0;object-fit:contain;background:var(--panel-3)}
.lc-source-picker>div{min-width:0}.lc-source-picker>div>b,.lc-source-picker>div>span{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.35}.lc-source-picker>div>b{font-size:13px}.lc-source-picker>div>span{margin-top:4px;color:var(--muted);font-size:10.5px;font-weight:500}
.lc-source-copy{display:grid;align-content:start;padding:15px 16px}.lc-source-picker .lc-source-kicker{margin:0 0 3px;color:var(--accent-on);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.lc-source-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.lc-source-picker>.au-thumb-audio{display:flex}
.lc-create-source-card .au-set-prev{padding:0;border:0;background:transparent}
.lc-create-source-card .au-set-prev>.aset-prompt{margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:7px;background:var(--panel);line-height:1.45}
.lc-create-source-card .au-set-prev .aset-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lc-create-source-card .au-set-prev .aset-member{display:block;width:auto;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
.lc-create-source-card .au-set-prev .aset-member .au-thumb{display:flex;width:100%;height:clamp(150px,18vh,220px);margin:0;border:0;border-bottom:1px solid var(--border);border-radius:0;object-fit:contain;background:var(--panel-3)}
.lc-create-source-card .au-set-prev.is-reference-fidelity .aset-members{grid-template-columns:repeat(3,minmax(0,1fr))}
.lc-package-asset-copy{min-width:0;padding:10px 11px}.lc-package-asset-copy b,.lc-package-asset-copy span{display:block;overflow-wrap:anywhere}
.lc-package-asset-copy b{font-size:11.5px;line-height:1.35}.lc-package-asset-copy span{margin-top:4px;color:var(--accent-on);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.au-task-meta.au-seed-summary{display:grid;gap:4px;margin-top:7px;padding:9px 10px;border:1px solid var(--border);border-radius:7px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4;overflow-wrap:anywhere}
.au-seed-summary>strong{color:var(--text);font-size:11px}.au-seed-summary>span{display:block}
.au-seed-summary.au-warn{border-color:var(--warn);background:var(--warn-tint-soft)}
.au-seed-summary .au-seed-warning{color:var(--warn);font-weight:750}.au-seed-summary .au-seed-name b{color:var(--text)}
.lc-create-context{display:grid;gap:18px;position:sticky;top:16px}
.lc-workspace-preview-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:max(600px,calc(100dvh - 254px));margin:0!important;padding:0!important;border:1px solid var(--border)!important;border-radius:10px;background:var(--panel-2);overflow:hidden}
.lc-workspace-preview-card>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--border)}
.lc-workspace-preview-card>header>div{min-width:0}.lc-workspace-preview-card h2{margin:0 0 3px;font-size:15px}.lc-workspace-preview-card header span{display:block;color:var(--muted);font-size:10.5px;line-height:1.4}
.lc-workspace-preview-card.is-expanded{position:fixed;inset:16px;z-index:10001;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:auto;min-height:0;box-shadow:0 24px 80px rgba(0,0,0,.7)}
.lc-workspace-preview-card.is-expanded .lc-workspace-preview{min-height:0}.lc-workspace-preview-card.is-expanded .lc-workspace-preview iframe{height:100%}
.lc-workspace-preview{position:relative;min-height:0;height:100%;background:#0b0b0b}
.lc-workspace-preview iframe{display:block;width:100%;height:100%;min-height:0;border:0;background:#0b0b0b}
.lc-workspace-preview-empty{position:absolute;inset:0;display:grid;place-content:center;gap:6px;padding:32px;color:var(--muted);text-align:center}.lc-workspace-preview-empty b{color:var(--text);font-size:14px}.lc-workspace-preview-empty span{max-width:390px;font-size:11px;line-height:1.5}
.lc-workspace-preview-note{margin:0;padding:10px 16px;border-top:1px solid var(--border);color:var(--muted);font-size:10px;line-height:1.45}
.lc-create-seed{display:grid;gap:7px;margin:0;padding:0;border:0}
.lc-machine-context{display:grid;gap:12px;max-height:440px;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--panel);overflow:auto}
.lc-machine-context>p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.5}
.lc-machine-section{display:grid;gap:0}.lc-machine-section+.lc-machine-section{padding-top:12px;border-top:1px solid var(--border)}
.lc-machine-section h3{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 7px;font-size:12px}
.lc-machine-section h3 span{color:var(--muted);font-size:10px;font-weight:600}
.lc-machine-subject,.lc-machine-transcript{padding:8px 0;border-top:1px solid color-mix(in srgb,var(--border) 65%,transparent)}
.lc-machine-subject b,.lc-machine-transcript b{display:block;font-size:11.5px}
.lc-machine-subject p,.lc-machine-transcript p{margin:3px 0 0;color:var(--muted);font-size:11px;line-height:1.45;overflow-wrap:anywhere}
.lc-machine-subject small,.lc-machine-transcript small{display:block;margin:3px 0 0;color:var(--dim);font-size:9.5px}
.lc-machine-transcript{display:grid;grid-template-columns:58px minmax(90px,.45fr) minmax(0,1fr);gap:8px;align-items:start}
.lc-machine-transcript p{margin:0}.lc-machine-transcript small{margin:1px 0 0}
.lc-machine-manual{margin-top:2px;padding-top:3px}.lc-machine-manual summary{color:var(--muted);font-size:11px;font-weight:650;cursor:pointer}
.lc-machine-manual[open]{display:grid;gap:7px}.lc-machine-manual[open] summary{margin-bottom:3px}
.lc-task-preview-block{display:grid;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.lc-input-package-grid>.lc-task-preview-block,.lc-task-preview-questions{margin:0;padding:14px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}
.lc-task-preview-block h3{margin:0;color:var(--text);font-size:12px}
.lc-task-preview-block .markdown-body{color:var(--muted);font-size:11.5px;line-height:1.5}
.lc-task-preview-block .markdown-body>:first-child{margin-top:0}.lc-task-preview-block .markdown-body>:last-child{margin-bottom:0}
.lc-annotator-surface{display:grid;gap:10px;padding:11px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
.lc-surface-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.lc-surface-head>div{display:grid;gap:2px}.lc-surface-head b{font-size:12px}.lc-surface-head span,.lc-surface-head small{color:var(--muted);font-size:9.5px}.lc-surface-head>small{text-align:right}
.lc-surface-pair{display:grid;grid-template-columns:1fr 1fr;gap:7px}.lc-surface-pair>div{display:grid;place-content:center;min-height:84px;border:1px dashed var(--border);border-radius:6px;background:var(--panel-2);text-align:center}
.lc-surface-pair b{font-size:10.5px}.lc-surface-pair span{margin-top:3px;color:var(--muted);font-size:9px}
.lc-surface-timeline{position:relative;display:flex;align-items:center;gap:4px;min-height:50px;padding:10px 8px 22px;border:1px solid var(--border);border-radius:6px;background:var(--panel-2);overflow:hidden}
.lc-surface-timeline:before{content:"";position:absolute;inset:50% 8px auto;border-top:1px solid var(--border)}
.lc-surface-timeline>span{position:relative;z-index:1;height:12px;border-radius:3px;background:color-mix(in srgb,var(--accent) 55%,var(--panel-3))}.lc-surface-timeline>span:nth-child(1){width:26%}.lc-surface-timeline>span:nth-child(2){width:38%}.lc-surface-timeline>span:nth-child(3){width:18%}
.lc-surface-timeline small{position:absolute;right:8px;bottom:5px;color:var(--muted);font-size:8.5px}
.lc-surface-modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:330px;overflow:auto}
.lc-surface-module{display:grid;align-content:start;gap:5px;padding:9px;border:1px solid var(--border);border-radius:6px;background:var(--panel-2)}
.lc-surface-module header{display:flex;justify-content:space-between;gap:7px;margin-bottom:2px}.lc-surface-module header b{font-size:10.5px}.lc-surface-module header span,.lc-surface-module small{color:var(--muted);font-size:8.5px}
.lc-surface-field{min-height:26px;padding:6px 7px;border:1px solid var(--border);border-radius:5px;background:var(--panel);color:var(--muted);font-size:9.5px}
.lc-task-preview-gap{display:grid;gap:3px;padding:9px 10px;border:1px solid var(--warn);border-radius:7px;background:var(--warn-tint-soft)}
.lc-task-preview-gap b{color:var(--warn);font-size:11px}.lc-task-preview-gap span{color:var(--muted);font-size:10.5px;line-height:1.45}

/* Embedded composer mode is still WarpSonic: same DOM, renderers and responsive layout. Only
   session chrome that belongs to login/deploy management is suppressed. */
body.workspace-preview-mode{margin:0;overflow:hidden;background:var(--bg)}
body.workspace-preview-mode #loginOverlay,body.workspace-preview-mode #userInfo,body.workspace-preview-mode #updateBanner,body.workspace-preview-mode #dataTip{display:none!important}
body.workspace-preview-mode #appRoot{display:grid!important;width:100vw;height:100vh;min-height:620px}
.lc-create-preflight{width:auto;margin:0;padding:13px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}
.lc-create-preflight header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.lc-create-preflight header h2{margin:0;font-size:13px}
.lc-create-preflight header span{padding:3px 7px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:9px;font-weight:700;white-space:nowrap}
.lc-create-readiness{display:grid;grid-template-columns:1fr;gap:0}
.lc-create-readiness-item{position:relative;display:grid;grid-template-columns:68px minmax(0,1fr);gap:7px;align-items:baseline;padding:7px 0 7px 17px;border:0;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:0;background:transparent}
.lc-create-readiness-item:last-child{border-bottom:0}
.lc-create-readiness-item::before{content:"○";position:absolute;left:0;top:7px;color:var(--dim);font-size:10px;font-weight:800}
.lc-create-readiness-item[data-state="complete"]::before{content:"✓";color:var(--success)}
.lc-create-readiness-item[data-state="neutral"]::before{content:"•";color:var(--muted)}
.lc-create-readiness-item b{min-width:0;color:var(--text);font-size:10.5px;line-height:1.35;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.lc-create-readiness-item span{color:var(--muted);font-size:9px;line-height:1.35;letter-spacing:0;text-transform:none;white-space:normal}
.lc-create-preflight #lcCreateReadinessNote{margin:8px 0 0;color:var(--muted);font-size:10px;line-height:1.4}
.lc-create-form-shell[data-create-stage="define"] [data-create-stage="route"],
.lc-create-form-shell[data-create-stage="define"] [data-create-stage="publish"],
.lc-create-form-shell[data-create-stage="route"] [data-create-stage="define"],
.lc-create-form-shell[data-create-stage="route"] [data-create-stage="publish"],
.lc-create-form-shell[data-create-stage="publish"] [data-create-stage="define"],
.lc-create-form-shell[data-create-stage="publish"] [data-create-stage="route"]{display:none}
body.lead-home #authorModal [data-lc-region]:not([data-lc-region="create"]) #lcCreatePage{display:none}
body.lead-home #authorModal [data-lc-region="create"] #lcTaskIndex{display:none}
.lc-tab.lc-sub{font-size:12px;padding-left:26px;color:var(--muted)}
.lc-tab .k{display:none}
.lc-eyebrow{display:none}
.lc-railfoot{display:none}
/* The inspector drawer: fixed right, ABOVE the modal scroll but ending over the strip, which stays
   readable — editing-while-watching is the S3 win. */
/* At mid width the inspector OVERLAYS the work — so say so. A scrim makes the model legible
   (inspecting is modal-ish here) instead of hard-cutting a queue row mid-word and leaving it
   visible-but-unclickable underneath (UX review 2026-08-01). At >=1700 it docks and the scrim goes. */
.lc-insp::before{content:'';position:fixed;inset:0 400px 0 0;background:rgba(0,0,0,.38);pointer-events:none}
.lc-insp{position:fixed;top:0;right:0;bottom:38px;width:min(400px,92vw);z-index:60;
  background:var(--panel);border-left:1px solid var(--accent);
  box-shadow:-18px 0 48px rgba(0,0,0,.45);display:flex;flex-direction:column}
.lc-insp[hidden]{display:none}
.lc-insp-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.lc-insp-head b{font-size:13px}
.lc-insp-head button{margin-left:auto}
.lc-insp-body{padding:12px 14px;overflow-y:auto;flex:1;display:flex;flex-direction:column}
.lc-insp-foot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:10px;border-top:1px solid var(--border)}
.lc-insp-dirty{font-size:11px;color:var(--warn,#d9a441);display:inline-flex;align-items:center;gap:6px}
/* The drawer inherits .home-search sizing meant for Home's large search box — inputs rendered as
   near-textareas (caught by the S3 screenshot). Sized for a form column here. */
.lc-insp-body .home-search{height:auto;min-height:0;flex:0 0 auto;padding:6px 9px;font-size:12px;line-height:1.4}
.lc-insp-body .auth-label{font-size:var(--type-label);margin-top:8px}
.lc-form-control{width:100%}
.lc-form-label{margin-top:8px}
.lc-form-textarea{min-height:120px;resize:vertical}
.lc-form-check{margin-top:8px}.lc-form-check-roomy{margin-top:10px}
.lc-form-followup{margin-top:6px}
.lc-form-spacer{flex:1}
/* S4: selection + sticky bulk bar on the task list (the Sets panel's pattern, one class family). */
.au-bulkbar{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--accent);
  border-radius:7px;padding:6px 10px;margin:8px 0;position:sticky;top:0;z-index:5}
.au-bulkbar b{color:var(--accent);font-size:11px}
.au-task-pick{margin-right:8px}
.au-row-note{font-size:10.5px;margin-left:8px}
.au-row-note.au-ok{color:var(--ok,#4caf7d)}
.au-row-note.au-warn{color:var(--warn,#d9a441)}
.lc-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:4px 0 14px}
.lc-tab{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted);font-size:13px;font-weight:500;padding:6px 14px;cursor:pointer}
.lc-tab:hover{color:var(--text)}
.lc-tab.on{color:var(--text);border-bottom-color:var(--accent)}
.lc-pane{display:none}
.lc-pane.on{display:block}
/* Last section in a pane drops its divider (the pane edge is enough). */
.lc-pane .author-sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.author-sec:last-child{border-bottom:0;padding-bottom:0}
.author-sec h3{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.author-row{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.author-row-end{justify-content:flex-end}
.author-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-bottom:8px}
.author-grid .au-full{grid-column:1 / -1}
.author-sec label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);flex:1 1 auto}
.author-sec label.au-narrow{flex:0 0 90px}
.author-sec input[type="text"],.author-sec input[type="number"],.author-sec select,.author-sec textarea{
  background:var(--panel-2);border:1px solid var(--border);border-radius:5px;color:var(--text);
  padding:5px 7px;font-size:12px;font-family:inherit;width:100%;box-sizing:border-box;
}
.author-sec textarea{resize:vertical;line-height:1.5}
.au-checks{display:flex;flex-wrap:wrap;gap:4px 12px}
.au-check{flex-direction:row!important;align-items:center;gap:5px!important;color:var(--text)!important;font-size:12px!important}
.au-check input{width:auto!important}
.au-task-list{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow-y:auto}
.au-empty{color:var(--muted);font-size:12px;margin:4px 0}
.au-empty.au-warn{color:var(--warn)}
.au-task{border:1px solid var(--border);border-radius:6px;padding:8px 10px;background:var(--panel-2)}
/* TASK ROW: a status CHIP carries state in form as well as text, and the meta line answers the two
   questions a lead scans for — which pool, and how fresh (UX review C3). */
.au-task-status{font-size:9.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  border-radius:999px;padding:1px 7px;white-space:nowrap}
.au-st-pending{background:var(--panel-3);color:var(--muted)}
.au-st-in_progress{background:rgba(124,156,255,.16);color:var(--accent)}
.au-st-suspended{background:rgba(240,173,78,.16);color:var(--warn,#f0ad4e)}
.au-st-completed{background:rgba(76,175,125,.15);color:var(--ok,#4caf7d)}
.au-st-requested{background:rgba(240,173,78,.16);color:var(--warn,#f0ad4e)}
.au-st-quarantined{background:rgba(231,76,60,.16);color:var(--danger,#e74c3c)}
.au-task-meta em{font-style:italic;opacity:.8}
.au-task-head{display:flex;align-items:center;gap:8px}
.au-task-head b{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The meta gets its OWN line. On one line with the ops it was starved to zero width — hidden
   buttons still reserve their box, and four of them eat ~360px of a ~470px row. */
.au-task-sub{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.au-task-meta{font-size:10px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-task-ops{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.au-task-dir{font-size:11px;color:var(--text);margin-top:4px;line-height:1.5}
.au-nodir{color:var(--dim);font-style:italic}
.au-dir-edit{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.au-asset-list{display:flex;flex-direction:column;gap:6px;max-height:22vh;overflow-y:auto}
.au-asset{border:1px solid var(--border);border-radius:6px;padding:6px 10px;background:var(--panel-2);
  display:flex;align-items:center;gap:8px;cursor:pointer}
.au-asset:hover{border-color:var(--accent)}
.au-asset b{font-size:12px}
.author-sec input[type="file"]{font-size:11px;color:var(--muted)}
/* Accent picker */
.accent-picker{display:flex;flex-direction:column;gap:4px;margin-top:1px}
.accent-chips{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.accent-chip{font-size:10px;padding:2px 7px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:background .1s,border-color .1s,color .1s;line-height:1.5}
.accent-chip.on{background:var(--accent-tint-soft);border-color:var(--accent);color:var(--accent-on)}
.accent-chip:hover:not(.on){border-color:var(--accent-tint-strong);color:var(--text);background:var(--panel-2)}
.accent-custom{margin-top:2px;font-size:10px;padding:3px 6px;width:100%;background:var(--panel);border:1px solid var(--border);border-radius:4px;color:var(--text)}
/* When a preset chip is selected, the custom box would just echo it — hide it (re-shown when the
   chip is cleared). Replaces the old JS show/hide now that the picker is binding-agnostic. */
.accent-picker:has(.accent-chip.on) .accent-custom{display:none}
.accent-no-chips{font-size:10px;color:var(--muted);font-style:italic}
/* Language detect row */
.lang-detect-row{display:flex;gap:4px;align-items:center}
.lang-detect-row select{flex:1}

/* Axis widget — shared by timbre, emotion, prosody */
.axw-widget{display:flex;flex-direction:column;gap:7px;width:100%}
/* Single shared grid across all axis rows so columns align vertically.
   display:contents on .axw-row lets its 4 children (label, lo, stops, hi)
   sit directly in this grid — all rows share the same column tracks. */
.axw-dims{display:grid;grid-template-columns:88px max-content 120px max-content;column-gap:6px;row-gap:5px;align-items:center}
.axw-row{display:contents}
.axw-label{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;text-align:right;white-space:nowrap}
.axw-lo{font-size:9px;color:var(--dim);white-space:nowrap;text-align:right}
.axw-hi{font-size:9px;color:var(--dim);white-space:nowrap}
/* 5-stop segmented control — fixed 120px so circles are compact and aligned */
.axw-stops{
  position:relative;display:flex;align-items:center;
  justify-content:space-between;padding:0 7px;height:22px;
  width:120px;
}
.axw-stops::before{
  content:'';position:absolute;left:7px;right:7px;
  top:50%;height:2px;transform:translateY(-50%);
  background:rgba(255,255,255,.1);pointer-events:none;border-radius:1px;
}
.axw-stop{
  width:14px;height:14px;border-radius:50%;padding:0;
  background:var(--panel-2);border:2px solid rgba(255,255,255,.18);
  cursor:pointer;flex-shrink:0;position:relative;z-index:1;
  transition:background .12s,border-color .12s,transform .1s;
}
.axw-stop.active{
  background:var(--accent);border-color:var(--accent);
  transform:scale(1.35);box-shadow:0 0 0 3px var(--accent-tint-soft);
}
.axw-stop:hover:not(.active){border-color:rgba(255,255,255,.45);transform:scale(1.15)}
/* tags + text */
.axw-tags{display:flex;flex-wrap:wrap;gap:var(--space-1);min-height:24px;padding:2px 0}
.axw-hint{font-size:10px;color:var(--muted);font-style:italic;line-height:24px}
.axw-tag{
  font-size:11px;padding:2px 8px;border-radius:6px;cursor:pointer;
  background:transparent;border:1px solid var(--border);color:var(--muted);user-select:none;
  transition:background .12s,color .12s,border-color .12s;line-height:1.5;
}
.axw-tag.sug{color:var(--text)}
/* .axw-tag.on selected style is the canonical highlight (see CANONICAL chip rule above) */
.axw-tag:hover:not(.on){border-color:var(--accent-tint-strong);color:var(--text);background:var(--panel-2)}
.axw-text{width:100%;font-size:10px;padding:3px 6px;color:var(--muted);margin-bottom:7px}   /* result-first: input leads, chips below */
/* Intent result row: the value field + a stash toggle for the act palette below it. */
.intent-result-row{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.intent-result-row .axw-text{flex:1;margin-bottom:0}   /* the row owns the gap to the chips now */
.chips-stash-btn{flex:0 0 auto;font-size:10px;color:var(--muted);background:none;border:none;cursor:pointer;
  padding:2px 4px;white-space:nowrap;border-radius:4px;transition:color .12s}
.chips-stash-btn:hover{color:var(--text)}
/* ── Animated disclosure (reusable) ─────────────────────────────────────────────────────────────
   Collapsing/expanding a block should be a FOLLOWABLE motion, not a teleport — so the eye tracks
   what opened/closed and the annotator stays oriented. The trigger always sits ABOVE the body, so it
   stays pinned as the body grows/shrinks below it — no scroll jump. height:auto can't be transitioned
   in CSS, so _animateCollapser() tweens the px height for open/close and clears it to auto when open;
   .collapsed (height:0) is the static collapsed state (initial render + the rest position). Honours
   reduced motion. Reuse for the section accordions + form sub-groups next. */
/* overflow is VISIBLE at rest (so an open section's field tooltips aren't clipped); _animateCollapser
   sets overflow:hidden inline only while a tween runs, and the collapsed state stays clipped. */
.collapser{transition:height .18s ease}
.collapser.collapsed{height:0;overflow:hidden}
@media (prefers-reduced-motion: reduce){ .collapser{transition:none} }
/* Segmented "scale" picker for ordinal fields (descriptors with scale:true). The .scale-bar is one
   connected bar of ordered segments left→right = the continuum; one selected at a time (click the
   selected segment to clear). A hidden <select> (data-meta / data-spf) carries the value for the
   existing wiring. fc.scaleEscape renders an off-scale value (e.g. "ambiguous") as a separate pill
   beside the bar. Scale fields are full-width so the bar gets the whole column. */
/* Single-line label + scale bar, responsive: the bar sits to the right of the label and wraps
   underneath it (full width) when the column is too narrow to fit both. */
.field.field-scale{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px}
/* Fixed label width (shared --cat-col-w) so every scale row's bar starts at the same x and (the bar
   being flex:1) ends at the same x — related scale chips (Pitch / Volume / Rate …) get the same
   overall length — and the labels still share the column with the category-column widgets above/below.
   NO border-right divider here: that vertical bar is a GROUPING bracket (a label heading a set of
   chips); a scale row is ONE control (a segmented continuum), so it has nothing to group and the bar
   would falsely imply it. Right-justified label + the column gap pair it with its bar unambiguously. */
.field.field-scale > label{flex:0 0 var(--cat-col-w,72px);margin:0;text-align:right;padding-right:12px;position:relative}
/* The hover-only comment button is taken OUT of flow here so it can't push the fixed-width label past
   its column (it widened "Volume" → the +6px divider drift). It sits in the label's empty left zone
   (text is right-aligned), still appearing on hover. */
.field.field-scale > label > .cmt-btn{position:absolute;left:0;top:3px;margin-left:0;padding:0}
/* Editor cards mix scale rows with category-column widgets (Typical Values = Pitch/Volume/Rate +
   Timbre; Speech Dynamics = Volume + prosody). One shared label-column width (--cat-col-w, owned on
   .seg-fields) so every divider lines up within a card: the scale's fixed bar-width need sets it, and
   the otherwise min-content category widgets adopt it here instead of sitting at their own narrower x. */
.seg-fields{--cat-col-w:72px}
.seg-fields [data-tv-palette]:has(.tv-group){grid-template-columns:var(--cat-col-w) 1fr}
.field.field-scale > .scale-chips{flex:1 1 200px;min-width:0;margin-top:0}
/* Binary scale flagged compact (lip_sync no/yes): pairs in a half-cell, so it stacks label-above like
   the other compact fields and the two-chip bar fills the cell instead of holding a 200px basis. */
.field.compact.field-scale{flex-direction:column;align-items:stretch;gap:2px}
/* Reset the horizontal-layout label sizing: the base scale rule sets `flex:0 0 72px` to make the label a
   fixed 72px-WIDE left column (row layout). Here the field is flex-direction:column, so that flex-basis
   becomes a fixed 72px HEIGHT — a giant gap under the label. Size the label to its content instead. The
   comment button also comes back into flow (no right-aligned empty zone to tuck into when left-aligned). */
.field.compact.field-scale > label{flex:0 0 auto;width:auto;text-align:left}
.field.compact.field-scale > label > .cmt-btn{position:static;top:auto}
.field.compact.field-scale > .scale-chips{flex:1 1 auto;width:100%;margin-top:2px}
.scale-chips{display:flex;align-items:stretch;gap:6px;margin-top:4px}
/* The value-carrier <select> is JS-read only (aria-hidden, tabindex=-1) — fully removed from layout.
   Was visually-hidden (position:absolute;width:1px), but the later broad rule
   `.section .field select{min-width:100%}` (specificity 0,2,1) overrode the 1px width, leaving a
   full-column-width absolutely-positioned select that expanded the editor's horizontal scroll region
   (the right column scrolled sideways). display:none is immune to any width rule. */
.scale-hidden{display:none}
.scale-bar{display:flex;flex:1 1 auto;min-width:0;border:1px solid var(--chip-bd);border-radius:7px;overflow:hidden}
.scale-bar .scale-chip{flex:1 1 0;min-width:0;border:0;border-left:1px solid var(--chip-bd);border-radius:0}
.scale-bar .scale-chip:first-child{border-left:0}
/* Keyboard focus ring, INSET. The global :focus-visible ring (outline-offset:1px) is drawn OUTSIDE the
   chip and gets clipped by .scale-bar{overflow:hidden} — leaving only a thin sliver at the chip edge that
   barely moves as arrows rove focus (looked like "the cursor doesn't move"). Drawing it inside the chip's
   own box keeps the whole ring visible and it jumps chip-to-chip. Escape pill is outside the bar → keeps
   the default ring. Above .on's tint so the focused chip is always legible. */
.scale-bar .scale-chip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;position:relative;z-index:1}
/* Off-scale escape value (e.g. Age "ambiguous") — a standalone rounded pill, not part of the bar. */
.scale-chip.scale-escape{flex:0 0 auto;border:1px solid var(--chip-bd);border-radius:7px}
.scale-chip{font-size:11px;padding:4px 8px;cursor:pointer;text-align:center;
  background:var(--chip-bg);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;
  transition:background .12s,color .12s}
.scale-chip:hover:not(.on){color:var(--text);background:color-mix(in srgb,var(--accent) 12%,var(--chip-bg))}
.scale-chip.on{background:var(--accent-tint-med);color:var(--accent-on)}
/* Inherited (from-default) scale field: the chip bar can't go italic like a <select>, so the
   selected chip gets a muted treatment instead — so an inherited value reads as inherited, not set
   (the "default" badge in the label is the primary cue; this matches the muted/italic select). */
.field.from-default .scale-chip.on{background:color-mix(in srgb,var(--muted) 16%,var(--chip-bg));color:var(--muted);font-style:italic}
/* Radar chart — rendered above axis rows in timbre / prosody widgets */
.axr-wrap{display:flex;justify-content:center;padding:2px 0 4px}
.axr-chart{display:block;overflow:visible}
.axr-ring{fill:none;stroke:rgba(255,255,255,.09);stroke-width:.6}
.axr-axis{stroke:rgba(255,255,255,.12);stroke-width:.6}
.axr-poly{fill:var(--accent-tint-soft);stroke:var(--accent);stroke-width:1.2;stroke-linejoin:round;transition:points .15s}
.axr-label{font-size:7.5px;fill:var(--muted);pointer-events:none}
.axr-center{fill:rgba(255,255,255,.15)}
:root.light .axr-ring{stroke:rgba(0,0,0,.1)}
:root.light .axr-axis{stroke:rgba(0,0,0,.12)}
:root.light .axr-label{fill:var(--muted)}
/* Intent widget — reuses .chips layout; category labels are clickable type selectors */
.intent-widget .chips-group-label{
  /* Reset <button> defaults so it looks identical to a plain group label. Safe to reset all borders:
     the grouping divider lives on the shared ::after layer, not the label's border. */
  appearance:none;border:none;background:none;padding-top:3px;
  cursor:pointer;transition:color .12s;   /* width owned by the shared .chips grid (min-content column) */
  /* A <button> vertically-centers its text; the span-based labels top-align. Flex it to top-right so
     a multi-row category's label heads its chips like every other widget (not floating mid-block). */
  display:flex;justify-content:flex-end;align-items:flex-start;
  /* Sub-group label: subordinate to the section header above it. */
  color:var(--muted);font-weight:600;
}
.intent-widget .chips-group-label:hover{color:var(--text)}
.intent-widget .chips-group-label.active{color:var(--accent-on)}
.app[data-theme="light"] .intent-widget .chips-group-label:hover{color:var(--text)}
/* Emotion categorical chip widget */
/* Emotion widget — reuses .chips layout; group labels keep valence colour */
/* SINGLE OWNER of the emotion-group palette: the chip group labels, the selected chips, AND the
   wheel map's dots/spokes (which carry the same positive/neutral/negative classes) all derive from
   these three vars — retune here, everything agrees. */
.ecw-widget{--emo-pos:#5da86e;--emo-neg:#c96060;--emo-neu:#8a887f}
.ecw-widget .chips-group-label{color:var(--muted)}   /* width owned by the shared .chips grid */
.ecw-widget .chips-group-label.positive{color:var(--emo-pos)}
.ecw-widget .chips-group-label.negative{color:var(--emo-neg)}
.ecw-widget .pick.positive.on{background:rgba(93,168,110,.15);border-color:var(--emo-pos);color:var(--emo-pos)}
.ecw-widget .pick.negative.on{background:rgba(201,96,96,.12);border-color:var(--emo-neg);color:var(--emo-neg)}
/* Multi-select emotion chips: selected chips carry an inline intensity mark + a × remove; the FOCUSED
   chip (whose intensity the row edits) gets a brighter ring so it's clear which one the row targets. */
.ecw-widget .pick{display:inline-flex;align-items:center;gap:4px}
.ecw-widget .pick.focused{box-shadow:0 0 0 2px var(--accent) inset}
/* Intensity mark + × are present in the DOM always; shown only when the chip is selected (so a
   selection flip via class-toggle reveals a × that already exists — no re-render needed). */
.ecw-widget .pick .ecw-cint{font-style:normal;font-size:9px;opacity:.8;padding:0 3px;border-radius:3px;background:color-mix(in srgb,currentColor 16%,transparent)}
.ecw-widget .pick:not(.on) .ecw-cint,.ecw-widget .pick .ecw-cint:empty{display:none}
.ecw-widget .pick .ecw-rm{border:none;background:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0 0 0 1px;opacity:.6}
.ecw-widget .pick:not(.on) .ecw-rm{display:none}
.ecw-widget .pick .ecw-rm:hover{opacity:1}
/* Intensity row sits in the chips column (grid col 2) instead of a hand-tuned left indent. */
.ecw-widget.chips:has(.chips-group) > .ecw-intensity{grid-column:2;justify-self:start}
/* The "Intensity" label sits in the label column (col 1) — override the full-width rule that catches
   non-.chips-group children — so it lines up under positive/neutral/negative. */
.ecw-widget.chips:has(.chips-group) > .ecw-int-label{grid-column:1}
.ecw-intensity{display:flex;gap:3px;margin-top:1px}
/* VA orientation map inside the Emotion widget — plots the terms + lights the current pick (read-only) */
.ecw-map-wrap{margin:0 0 10px;border:1px solid var(--border);border-radius:8px;background:#ffffff05}
.ecw-map-cap{cursor:pointer;font-size:11px;color:var(--muted);padding:6px 9px;list-style:none;user-select:none}
.ecw-map-cap::-webkit-details-marker{display:none}
.ecw-map-cap::before{content:'▾ ';font-size:9px;color:var(--dim)}
.ecw-map-wrap:not([open]) .ecw-map-cap::before{content:'▸ '}
.ecw-map{padding:0 8px 8px}
.ecm-svg{width:100%;height:auto;display:block;max-height:240px}
.ecm-dot{opacity:.5;transition:opacity .12s;fill:var(--emo-neu)}
.ecm-dot.positive{fill:var(--emo-pos)}
.ecm-dot.negative{fill:var(--emo-neg)}
.ecm-dot.on{opacity:1;stroke:#fff;stroke-width:1.5}
.ecm-spoke{stroke-width:1.2;opacity:.16;transition:opacity .12s;stroke:var(--emo-neu)}
.ecm-spoke.positive{stroke:var(--emo-pos)}
.ecm-spoke.negative{stroke:var(--emo-neg)}
.ecm-spoke.on{opacity:.95;stroke-width:2}
.ecm-anti{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3;opacity:.5}
.ecm-lab{font-size:11px;font-weight:700;fill:var(--text);text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.ecm-ax{font-size:8.5px;fill:var(--dim)}
.ecw-int{
  font-size:9px;padding:2px 8px;border-radius:6px;cursor:pointer;
  border:1px solid var(--border);color:var(--muted);background:transparent;
  font-weight:600;letter-spacing:.3px;
  transition:background .12s,border-color .12s,color .12s;
}
/* .ecw-int.sel (emotion intensity) selected style = the canonical highlight (see above) */
/* Extra breathing room above Prosody */
.field[data-fc-key="prosody"]{margin-top:6px}
/* Framework info icon */
.widget-info{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;
  border:1px solid var(--muted);color:var(--muted);
  font-size:8px;font-weight:700;font-style:normal;
  cursor:default;vertical-align:middle;margin-left:4px;user-select:none;
  transition:border-color .12s,color .12s;flex-shrink:0;
}
.widget-info:hover{border-color:var(--accent);color:var(--accent)}

/* ============================== PHASE 2: TASK QUEUE CONTROLS ============================== */
.task-queue-controls{
  display:none;gap:6px;align-items:center;min-width:0;margin-left:12px;padding-left:12px;
  border-left:1px solid var(--border);
}
.managed-task-identity{display:inline-flex;min-width:0;max-width:min(600px,48vw);padding:0 6px}
.managed-task-identity .task-identity-compact{flex-wrap:nowrap;min-width:0}
.managed-task-identity .task-identity-primary{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--type-meta)}
.task-mode-tag{display:inline-flex;align-items:center;padding:2px 6px;border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:var(--type-meta);font-weight:650;line-height:1;white-space:nowrap}
.account-menu{position:fixed;z-index:var(--z-account);top:6px;right:8px;display:none;color:var(--text)}
.account-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--panel-2);color:var(--text);font:700 13px/1 inherit;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.account-avatar:hover,.account-avatar[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint-soft)}
.account-menu-panel{position:absolute;top:38px;right:0;width:220px;padding:6px;border:1px solid var(--border);border-radius:7px;background:var(--panel);box-shadow:0 12px 36px rgba(0,0,0,.48)}
.account-menu-identity{padding:8px 9px 10px;margin-bottom:4px;border-bottom:1px solid var(--border);color:var(--muted);font-size:var(--type-body);white-space:nowrap}
.account-menu-identity b{color:var(--text);font-weight:650}
.account-menu-item{display:block;width:100%;min-height:var(--control-target);padding:6px 9px;border:0;border-radius:4px;background:transparent;color:var(--text);font:600 var(--type-body)/1.3 inherit;text-align:left;cursor:pointer}
.account-menu-item:hover{background:var(--accent-tint-soft);color:var(--accent-on)}
.account-menu-item .fb-badge{float:right;margin:0}
.account-menu-separator{height:1px;margin:5px 8px;background:var(--border)}
.account-menu-build{display:block;width:100%;padding:6px 9px;border:0;background:transparent;color:var(--muted);font:var(--type-meta)/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:left;cursor:pointer}
.account-menu-build:hover{color:var(--accent-on)}
.account-menu-logout{color:var(--muted)}
.app.managed-task-active #homeBtn,
.app.managed-task-active #feedbackBtn,
.app.managed-task-active #sendFeedbackBtn,
.app.managed-task-active #directionBtn,
.app.managed-task-active #themeToggle,
.app.managed-task-active #helpBtn{display:none!important}
body:not(.home-mode) .topbar>div:last-child{padding-right:38px}
.task-options-menu{left:auto;right:0;min-width:250px}
/* Run totals and queue-wide set counts live on Home. Repeating both in the task bar made every
   status read like an action and crowded out the one primary action: Submit. */
.topbar .task-run-stats{display:none}
.project-dropdown{
  padding:4px 8px;border:1px solid var(--border);border-radius:4px;
  background:var(--panel);color:var(--text);font-size:11px;
  cursor:pointer;
}
.project-dropdown:hover{border-color:var(--accent)}
.topbar .btn.sm,.topbar .project-dropdown,.topbar .sec-chip{min-height:var(--control-target)}
.task-progress{font-size:11px;color:var(--muted);white-space:nowrap}
.task-interruption-notice{
  position:fixed;top:54px;right:16px;width:min(520px,calc(100vw - 32px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;
  border-color:var(--warn)
}
.task-interruption-copy{min-width:0}.task-interruption-copy strong{display:block;color:var(--text);font-size:13px}
.task-interruption-copy p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.task-interruption-copy small{display:block;margin-top:4px;color:var(--warn);font-weight:650}
.task-interruption-actions{display:flex;gap:6px;flex:0 0 auto}
.task-interruption-notice.is-switching{opacity:.78;pointer-events:none}

/* Task clock presentation. Time is task status, not a peer command: its own labeled dock separates
   it from Task options / Submit. The default remains stable in the header; tutors who need a larger
   clock may choose a bounded floating dock and move it with pointer or keyboard. */
.task-clock-dock,.cmp-task-clock-dock{
  display:flex;align-items:stretch;flex:0 0 auto;min-width:108px;
  margin:0 8px;border:1px solid var(--border);border-radius:7px;background:var(--panel);
  box-shadow:inset 3px 0 0 var(--accent)
}
.cmp-task-clock-dock{margin:0;min-width:0}
.task-clock-button{
  display:grid;grid-template-columns:auto;gap:1px;align-content:center;min-width:0;min-height:var(--control-target);
  padding:4px 10px;background:transparent;border:0;border-radius:6px;color:var(--text);font:inherit;
  text-align:left;cursor:pointer
}
.task-clock-button:hover{background:var(--accent-tint-soft)}
.task-clock-button:focus-visible,.task-clock-drag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.task-clock-kicker{
  color:var(--muted);font-size:9px;font-weight:700;line-height:1.1;letter-spacing:.08em;text-transform:uppercase
}
.task-timer{
  color:var(--text);font-size:13px;font-weight:650;line-height:1.25;font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.task-timer.timer-warn{color:var(--task-clock-warning,var(--warn));font-weight:750}
.task-timer.timer-warn::before{content:'⚠ ';font-family:system-ui,sans-serif}
.task-clock-dock:has(.timer-warn),.cmp-task-clock-dock:has(.timer-warn){
  border-color:var(--task-clock-warning,var(--warn));
  box-shadow:inset 3px 0 0 var(--task-clock-warning,var(--warn)),0 0 0 1px color-mix(in srgb,var(--task-clock-warning,var(--warn)) 28%,transparent)
}
body[data-task-clock-size="compact"] :is(.task-clock-dock,.cmp-task-clock-dock){min-width:0;margin-inline:5px}
body[data-task-clock-size="compact"] .task-clock-button{padding:3px 7px}
body[data-task-clock-size="compact"] .task-clock-kicker{display:none}
body[data-task-clock-size="compact"] .task-timer{font-size:11px;font-weight:600}
body[data-task-clock-size="large"] :is(.task-clock-dock,.cmp-task-clock-dock){min-width:164px}
body[data-task-clock-size="large"] .task-clock-button{padding:6px 14px}
body[data-task-clock-size="large"] .task-clock-kicker{font-size:10px}
body[data-task-clock-size="large"] .task-timer{font-size:22px;line-height:1.15}
.task-clock-dock[data-position="floating"],.cmp-task-clock-dock[data-position="floating"]{
  position:fixed;z-index:var(--z-notice-over-surface);top:var(--task-clock-y,56px);left:var(--task-clock-x,50%);
  margin:0;transform:translateX(-50%);box-shadow:0 8px 26px rgba(0,0,0,.42),inset 3px 0 0 var(--accent)
}
.task-clock-dock[data-position="floating"].task-clock-custom-position,
.cmp-task-clock-dock[data-position="floating"].task-clock-custom-position{transform:none}
.task-clock-drag{
  display:flex;align-items:center;justify-content:center;width:26px;padding:0;border:0;border-left:1px solid var(--border);
  border-radius:0 6px 6px 0;background:transparent;color:var(--muted);font:inherit;font-size:15px;cursor:grab;touch-action:none
}
.task-clock-drag:hover{color:var(--text);background:var(--accent-tint-soft)}
.task-clock-drag:active{cursor:grabbing}
.task-clock-settings{
  position:fixed;z-index:var(--z-above-cmp);top:58px;right:16px;width:min(360px,calc(100vw - 32px));
  padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--panel);
  box-shadow:0 14px 42px rgba(0,0,0,.55);color:var(--text)
}
.task-clock-settings>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.task-clock-settings h2{margin:0;font-size:15px}
.task-clock-settings .x{width:28px;height:28px;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.task-clock-settings .x:hover{background:var(--accent-tint-soft);color:var(--text)}
.task-clock-settings>label{
  display:grid;grid-template-columns:minmax(126px,1fr) minmax(150px,1.25fr);align-items:center;gap:10px;
  padding:7px 0;border-top:1px solid var(--border);font-size:12px;font-weight:600
}
.task-clock-settings select,.task-clock-settings input[type="color"]{
  width:100%;min-height:30px;border:1px solid var(--border);border-radius:5px;background:var(--field-bg);color:var(--text);font:inherit
}
.task-clock-settings input[type="color"]{padding:3px;cursor:pointer}
.task-clock-settings p{margin:10px 0;color:var(--muted);font-size:11px;line-height:1.45}
.task-clock-settings footer{display:flex;justify-content:flex-end}
.cmp-task-timer{
  appearance:none;margin:0;padding:4px 8px;border:0;border-radius:6px;background:transparent;
  cursor:pointer
}
.cmp-task-timer:hover{background:var(--accent-tint-soft)}
.cmp-task-clock-dock[data-position="floating"]{z-index:var(--z-above-cmp)}
body[data-task-clock-size="large"] .cmp-task-timer{font-size:20px;padding:6px 11px}
@media (max-width:1399px){
  .task-clock-dock[data-position="header"]{order:2}
  .topbar .topbar-chips{order:3}
}
/* Sensitive-content marker — a small danger-toned pill while a flagged task is claimed. */
.nsfw-badge{font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--danger);border-radius:4px;padding:1px 5px;margin-left:8px;white-space:nowrap}

/* ============================== HIDDEN-DATA CONFIRM ============================== */
/* Review appointments (Author modal) */
.au-grants{display:flex;flex-direction:column;gap:4px}
.au-grant{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:6px;
  padding:5px 10px;background:var(--panel-2)}
.au-grant b{font-size:12px}
.au-grant button{margin-left:auto}

/* Rendered Markdown (task instructions; renderMarkdown, ui/markdown.js) */
.md-h{margin:10px 0 4px;font-weight:700;line-height:1.3}
h1.md-h{font-size:15px} h2.md-h{font-size:14px} h3.md-h{font-size:13px}
.md-p{margin:0 0 8px;line-height:1.55}
.md-list{margin:0 0 8px;padding-left:20px} .md-list li{margin:2px 0;line-height:1.5}
.md-quote{margin:0 0 8px;padding:4px 10px;border-left:3px solid var(--accent);
  background:var(--accent-tint-soft);color:var(--text)}
.md-code{margin:0 0 8px;padding:8px 10px;background:var(--panel-2);border:1px solid var(--border);
  border-radius:6px;overflow-x:auto;font-size:11px}
.md-p code,.md-list code{background:var(--panel-2);border:1px solid var(--border);border-radius:3px;
  padding:0 4px;font-size:11px}
.md-hr{border:0;border-top:1px solid var(--border);margin:10px 0}
.md-media{margin:0 0 12px;display:grid;gap:5px;max-width:100%}
.md-media img,.md-media video{display:block;width:100%;max-height:44vh;object-fit:contain;
  border:1px solid var(--border);border-radius:7px;background:#090a0b}
.md-media video{min-height:120px}
.md-media figcaption{font-size:10.5px;line-height:1.4;color:var(--muted)}
.md-media-error{margin:0 0 8px;padding:7px 9px;border-left:3px solid var(--warn);
  background:var(--panel-2);color:var(--muted);font-size:11px;line-height:1.45}
.au-md-hint{font-size:10px;color:var(--muted);font-weight:400}

/* Review-task marker in the lead task list (Author modal) */
.au-review-tag{font-size:10px;color:var(--accent-on);background:var(--accent-tint-soft);
  border-radius:99px;padding:1px 7px;margin-left:4px}
.au-task-review{border-left:2px solid var(--accent)}

/* Lead project monitor (Author modal) */
.au-monitor{display:flex;flex-direction:column;gap:4px}
.au-mon-row{font-size:12px;color:var(--text)}
.au-mon-row b{color:var(--accent-on)}
.au-mon-ip{font-size:11px;color:var(--muted);padding-left:8px}

/* QC feedback inbox (ui/feedback.js) */
.fb-badge{background:var(--accent);color:#fff;border-radius:99px;font-size:10px;padding:0 5px;margin-left:4px}
.task-identity{min-width:0}
.task-identity-compact{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.task-identity-primary{color:var(--text);font-size:12px;font-weight:650;line-height:1.3}
.task-identity-stacked{display:flex;flex-direction:column;gap:4px}
.task-identity-line{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;align-items:baseline;min-width:0}
.task-identity-kind{color:var(--muted);font-size:var(--type-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.task-identity-project{overflow:hidden;color:var(--muted);font-size:12px;font-weight:600;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.task-identity-queue{overflow:hidden;color:var(--text);font-size:13.5px;font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.task-type-tag{display:inline-flex;align-items:center;gap:3px;padding:1px 5px;border:1px solid currentColor;border-radius:9px;font-size:var(--type-meta);font-weight:600;line-height:1;vertical-align:1px;white-space:nowrap}
.task-type-tag-icon{display:inline-flex;width:11px;height:11px}
.task-type-tag-icon .type-icon{width:11px;height:11px}
.task-identity-secondary{display:block;margin-top:4px;color:var(--muted);font-size:11.5px;line-height:1.4;overflow-wrap:anywhere}
.feedback-drawer-bg{background:transparent;pointer-events:none;align-items:flex-start;justify-content:flex-end;padding:52px 10px 10px}
.feedback-drawer-bg.on{display:flex}
.feedback-drawer{pointer-events:auto;width:min(660px,calc(100vw - 20px));max-height:calc(100vh - 62px);border-radius:9px;box-shadow:-14px 12px 48px rgba(0,0,0,.52)}
.fb-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto}
.fb-item{border:1px solid var(--border);border-radius:6px;padding:12px 14px;background:var(--panel-2)}
.fb-item.fb-unread{border-color:var(--accent)}
.fb-item-layout{display:flex;align-items:flex-start;gap:10px}
.fb-item-body{min-width:0;flex:1}
.fb-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.fb-head-context{display:flex;flex-direction:column;gap:2px;min-width:180px}
.fb-head b{font-size:12px}
.fb-review-meta{color:var(--muted);font-size:11.5px;line-height:1.4}
.fb-grade{margin-left:auto;display:flex;gap:8px}
.fb-score{font-size:11.5px;color:var(--muted)}
.fb-score b{color:var(--accent-on)}
.fb-conversation{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.fb-message{max-width:min(78%,620px);padding:7px 9px;border:1px solid var(--border);border-radius:6px;background:var(--panel)}
.fb-message-reviewer{align-self:flex-start;border-left:3px solid var(--accent)}
.fb-message-you{align-self:flex-end;border-right:3px solid var(--accent-on)}
.fb-message-label{margin-bottom:3px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.fb-message-body{font-size:12px;color:var(--text);line-height:1.5;white-space:pre-wrap}
.fb-diff{margin-top:6px;border-top:1px solid var(--border);padding-top:6px}
.fb-diff-title{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.fb-diff ul{margin:0;padding-left:16px;font-size:11px;line-height:1.6}
.fb-diff .fb-add{color:var(--ok, #7fbf7f)}
.fb-diff .fb-del{color:var(--warn)}
/* Feedback respond — ack/reply thread + actions (tutor-home-execution-spec slice 2) */
.fb-thread{display:flex;flex-direction:column;gap:6px}
.fb-thread:empty{display:none}
.fb-resp{font-size:10px;color:var(--muted);line-height:1.5}
.fb-resp-ack{align-self:flex-end;padding:2px 1px}
.fb-respond{margin-top:9px;display:flex;gap:6px;align-items:center}
.fb-ack,.fb-reply-btn,.fb-reply-send,.fb-changes{font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:5px;cursor:pointer;border:1px solid var(--border);background:var(--panel);color:var(--text)}
.fb-changes{margin-left:auto;background:transparent;color:var(--accent-on)}
.fb-ack:disabled{opacity:.6;cursor:default}
.fb-reply-btn:hover,.fb-reply-send:hover,.fb-changes:hover,.fb-ack:not(:disabled):hover{border-color:var(--accent)}
.fb-reply-box{margin-top:6px;display:flex;gap:6px;align-items:flex-start}
.fb-reply-input{flex:1;padding:5px 8px;background:var(--panel-2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-size:12px;font-family:inherit;resize:vertical}
.fb-reply-send{background:var(--accent);color:#fff;border-color:var(--accent);align-self:stretch}

/* QC grade panel inside the confirm overlay (task-queue._reviewGradeHtml) */
.rv-grade{display:flex;flex-direction:column;gap:8px;margin-top:10px;text-align:left}
.rv-crit{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--text)}
.rv-crit select{background:var(--panel-2);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:3px 6px}
.rv-note-l{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.rv-note-l textarea{background:var(--panel-2);border:1px solid var(--border);border-radius:5px;color:var(--text);
  padding:5px 7px;font-size:12px;font-family:inherit;resize:vertical}
.rv-esc{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.confirm-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:var(--z-confirm);
  display:none;align-items:center;justify-content:center;
}
.confirm-overlay.on{display:flex}
.confirm-box{
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  width:min(460px,92vw);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.confirm-head{
  padding:9px 14px;border-bottom:1px solid var(--border);background:var(--panel-2);
}
.confirm-head h3{
  margin:0;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
}
.confirm-body{
  padding:14px 16px;font-size:12px;color:var(--text);line-height:1.55;
  white-space:pre-line;   /* multi-line msgs (task-queue prompts) keep their \n */
  max-height:60vh;overflow-y:auto;
}
/* Collapse when there's no message (What's New passes msg:'' and renders via bodyHtml) — otherwise
   the empty message body's 14px top+bottom leaves a blank gap under the title. */
.confirm-body:empty{ padding:0; }
/* The bodyHtml slot rides BELOW the message; give it the same 14px 16px inset the dialog/modal body
   standard uses (.confirm-body, .modal-body) so its content — What's New's .md-list, and the QC-grade
   / lead-console form panels that also render here — isn't flush to the dialog edges. `:not(:empty)`
   so a plain confirm (no bodyHtml) doesn't add a blank gap. Only the TOP is trimmed to 0: the message
   above already pads its bottom, so a full 14px here would double the gap between the two. */
.confirm-extra:not(:empty){ padding:0 16px 14px; }
/* The confirmation body is the ONE theme owner for ordinary form controls. Callers supply
   semantics/copy; they cannot accidentally leak browser-default white fields into the dark shell.
   Specialized controls (choice, range, and file inputs) keep their purpose-built presentation. */
.confirm-extra :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea){
  width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--border);border-radius:6px;
  background:var(--panel-2);color:var(--text);font:inherit;font-size:13px;
}
.confirm-extra :is(input,textarea)::placeholder{color:var(--muted)}
.confirm-context-copy{margin:0 0 8px;color:var(--muted);font-size:12px}
.confirm-feedback-text{resize:vertical}
/* `.confirm-field` owns only the label/help relationship and spacing. */
.confirm-field{display:grid;gap:6px;color:var(--muted);font-size:12px}
.confirm-field > span{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.confirm-field small{color:var(--dim);font:inherit;font-size:11px}
.confirm-foot{
  padding:8px 12px;border-top:1px solid var(--border);background:var(--panel-2);
  display:flex;justify-content:flex-end;gap:6px;
}
.confirm-foot #confirmOk.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.confirm-foot #confirmOk.danger:hover{filter:brightness(1.08)}

/* Shared modal body (help / model-compare modals in index.html). The music-subject assignment
   modal that used to live here was removed — music spans now assign their performer inline, the
   same way speech spans assign their speaker (no popup). */
.modal-body {
  padding: 16px;
  max-height: 60vh;
  overflow-y: auto;
}



/* ── Utility classes (de-duped from repeated inline styles) ───────────────── */
.kbd{background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:11px}
.kbd-sm{background:var(--panel-2);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:10px}
.auth-label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.auth-overlay{position:fixed;inset:0;z-index:var(--z-menu);display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.7);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.auth-card{width:min(400px,100%);padding:32px;border:1px solid var(--border);border-radius:8px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.auth-title{margin:0 0 24px;color:var(--text);font-size:20px;line-height:1.25}
.auth-field{margin-bottom:16px}.auth-field-last{margin-bottom:20px}
.auth-input{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--border);border-radius:4px;background:var(--panel-2);color:var(--text);font:inherit;font-size:13px}
.auth-input::placeholder{color:var(--muted)}
.auth-action{width:100%;min-height:40px;padding:8px 10px;border-radius:4px;cursor:pointer;font:600 13px/1.35 inherit}
.auth-action-primary{margin-bottom:12px;border:1px solid var(--accent);background:var(--accent);color:#fff}
.auth-action-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.auth-action-secondary{border:1px solid var(--accent);background:transparent;color:var(--accent-on)}
.auth-action-secondary:hover{background:var(--accent-tint-soft)}
.auth-intro{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.5}
.auth-mode-note{margin-top:14px;color:var(--muted);font-size:var(--type-meta);line-height:1.5;text-align:center}
.auth-error{display:none;margin-top:12px;padding:8px;border-radius:4px;background:var(--danger-tint-soft);color:var(--danger);font-size:var(--type-body);text-align:center}

/* ── Style overhaul (see docs/style-guide.md) ────────────────────────────────
   The field-label token is now GLOBAL (base `.field label`). Category-label typography (incl. casing)
   is owned ONCE by the base `.chips-group-label` rule above — the old per-container `text-transform`
   overrides here are gone (they were the whack-a-mole: every container had to re-undo the base). */
/* Inline field action (Detect, Re-analyze…) — visually distinct from selectable chips (global, reusable) */
.field-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.field-action{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--accent-on);background:var(--accent-tint-soft);border:1px solid transparent;border-radius:5px;padding:2px 8px;cursor:pointer;flex-shrink:0;line-height:1.5}
.field-action:hover{background:var(--accent-tint-med)}
.field-action svg{flex-shrink:0;opacity:.95}
/* Small icon-only action in a field head (e.g. re-detect language) */
.field-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:5px;cursor:pointer;flex-shrink:0;padding:0}
.field-icon-btn:hover{color:var(--accent-on);background:var(--accent-tint-soft);border-color:transparent}
.field-icon-btn:disabled{opacity:.5;cursor:default}
.field-icon-btn.busy svg{animation:spin 0.9s linear infinite}

/* Machine-suggested, not-yet-confirmed field: provisional (dashed) selection + a confirm row */
.field.suggested .pick.on{
  border-style:dashed;border-color:var(--accent);
  background:var(--accent-tint-soft);color:var(--accent-on);
}
.suggest-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.suggest-tag{font-size:11px;color:var(--muted);font-style:italic}
.suggest-confirm{font-size:11px;font-weight:600;color:var(--accent-on);background:var(--accent-tint-soft);
  border:1px solid transparent;border-radius:5px;padding:2px 10px;cursor:pointer;line-height:1.6}
.suggest-confirm:hover{background:var(--accent-tint-med)}

/* ── Tutor Home — the post-login front door (ui/home.js; docs/tutor-home-and-corrections.md §8) ────
   Full-window takeover mirroring body.cmp-mode: Home replaces the annotation grid rather than
   docking beside it, so the first thing after login is standing/history/feedback instead of an
   empty workspace. The !important beats auth.js's inline appRoot.style.display='grid' (same reason
   the comparison shell needs it). Home may cover a live comparison without destroying its claim. */
body.home-mode #appRoot{display:none!important}
#homeShell{display:none}
body.home-mode #homeShell{
  display:block;position:fixed;top:0;left:0;right:0;z-index:40;overflow-y:auto;   /* below the modal/confirm layer (100/200) so dialogs opened FROM Home — the NSFW attestation, the feedback inbox — appear OVER it; #appRoot is display:none in home-mode so there's nothing beneath to under-lap */
  height:100vh;height:100dvh;   /* dvh, not vh: on mobile Safari 100vh is the toolbar-retracted (large) viewport, so a 100vh surface hides its bottom behind the browser toolbar — dvh tracks the visible area */
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--bg);color:var(--text)}
body.home-mode.cmp-mode #homeShell{z-index:var(--z-notice-over-surface)}
body.home-mode.cmp-mode #userInfo{z-index:var(--z-above-cmp)}
.home-top{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 54px 8px 16px;box-sizing:border-box;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:3}
.home-brand{font-weight:700;letter-spacing:.2px}
.home-crumb{color:var(--muted)}
.home-top #homeToWorkspaceBtn{margin-left:auto}
.home-body{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;min-height:calc(100dvh - 44px)}
.home-page{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;width:min(3000px,100%);padding:16px;margin:0 auto;box-sizing:border-box}
.home-card{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px 14px;min-width:0}
.home-card h3{margin:0 0 10px;font-size:13px;font-weight:700}
.home-card.span4{grid-column:span 4}.home-card.span5{grid-column:span 5}
.home-card.span7{grid-column:span 7}.home-card.span8{grid-column:span 8}
.home-card.span12{grid-column:span 12}
.home-card.home-start-card{width:min(1600px,100%);justify-self:start;box-sizing:border-box}
.home-sub{margin-top:8px;color:var(--muted);font-size:var(--type-body)}
.home-start-action{padding-bottom:12px;border-bottom:1px solid var(--border)}
.home-start-cta{min-width:190px;flex:1}
.home-priority-kicker{margin-bottom:5px;color:var(--accent);font-size:var(--type-eyebrow);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.home-start-details{margin-top:2px}
.home-eligible-work{padding:10px 0 2px}
.home-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.home-section-head h4{margin:0;font-size:var(--type-label)}
.home-section-head>span{color:var(--muted);font-size:var(--type-meta)}
.home-queue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:10px}
.home-queue-card{min-width:0;padding:14px 16px;border:1px solid var(--border);border-radius:7px;background:var(--bg)}
.home-queue-card.current{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);background:var(--panel-2)}
.home-queue-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.home-queue-identity{display:flex;flex:1;flex-direction:column;min-width:0}
.home-queue-tags{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.home-queue-tags .home-tag,.home-queue-tags .task-type-tag{margin-left:0}
.home-queue-summary{display:grid;grid-template-columns:minmax(92px,.34fr) minmax(180px,1fr);gap:16px;align-items:end;margin-top:18px}
.home-queue-ready strong{display:block;color:var(--accent);font-size:27px;font-weight:720;line-height:1;font-variant-numeric:tabular-nums}
.home-queue-ready>span{display:block;margin-top:4px;color:var(--text);font-size:var(--type-meta);font-weight:650}
.home-queue-progress-block{min-width:0}
.home-queue-progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--muted);font-size:var(--type-meta)}
.home-queue-progress-head b{color:var(--text);font-size:var(--type-body)}
.home-queue-progress{height:5px;margin:6px 0 8px;overflow:hidden;border-radius:999px;background:var(--panel-3)}
.home-queue-progress>span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.home-queue-facts{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:var(--type-meta)}
.home-queue-facts b,.home-queue-exceptions b{color:var(--text);font-variant-numeric:tabular-nums}
.home-queue-exceptions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:9px;border-top:1px solid var(--border);color:var(--muted);font-size:var(--type-meta)}
.home-queue-exceptions i{font-style:normal;color:var(--border)}
.home-start-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.home-start-row:last-child{border-bottom:0}
.home-profile-details{border-top:1px solid var(--border)}
.home-profile-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;color:var(--text);font-size:var(--type-body);font-weight:600;cursor:pointer;list-style:none}
.home-profile-details summary::-webkit-details-marker{display:none}
.home-profile-details summary::marker{content:''}
.home-profile-summary-title{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-weight:600}
.home-profile-summary-count{color:var(--muted);font-weight:400}
.home-profile-details[open] .home-profile-summary-title .home-disclosure-marker{transform:rotate(90deg)}
.home-profile-details[open] summary{border-bottom:1px solid var(--border)}
.home-profile-details:not([open]) > :not(summary){display:none}
.home-start-values{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.home-lbl{color:var(--muted);font-size:var(--type-meta);padding-top:2px}
.home-credential-section{display:block;padding:12px 0}
.home-credential-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.home-credential-head .home-lbl{color:var(--text);font-size:var(--type-body);font-weight:650;padding:0}
.home-credential-intro{margin:4px 0 8px;color:var(--muted);font-size:var(--type-meta);line-height:1.45}
.home-credential-definitions{display:flex;flex-direction:column;gap:7px;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--border)}
.home-credential-definition{display:grid;grid-template-columns:minmax(92px,.38fr) minmax(0,1fr);gap:10px;align-items:start}
.home-credential-definition dt{color:var(--text);font-size:var(--type-meta);font-weight:650;line-height:1.4}
.home-credential-definition dd{margin:0;color:var(--muted);font-size:var(--type-meta);line-height:1.45}
.home-chip{border:1px solid var(--border);border-radius:10px;padding:1px 8px;font-size:11.5px;white-space:nowrap}
.home-chip.dim{color:var(--muted);opacity:.7}
button.home-chip{background:var(--panel-2);color:var(--text);font:inherit;font-size:11.5px;line-height:1.4;opacity:1}
button.home-chip.dim{color:var(--muted);opacity:1}
button.home-chip:hover{border-color:var(--accent)}
button.home-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.home-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.home-stat{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:8px 10px}
.home-stat.wide{grid-column:span 2}
.home-stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.home-stat .v .unit{font-size:12px;font-weight:400;color:var(--muted)}
.home-stat .l{color:var(--muted);font-size:var(--type-meta);margin-top:2px}
.home-profile-panel{position:fixed;top:44px;right:0;bottom:0;z-index:4;width:min(420px,100vw);min-width:0;padding:16px;background:var(--panel);border-left:1px solid var(--border);box-sizing:border-box;overflow:auto;box-shadow:-12px 0 28px rgba(0,0,0,.28)}
.home-profile-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.home-profile-panel-head h2{margin:0;font-size:14px}
.home-profile-panel-head .btn{font-size:18px;line-height:1;padding:3px 7px}
.home-insights-layout{display:block}
.home-profile-panel .home-profile-details{margin-top:10px}
.home-profile-section{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.home-profile-section h4{margin:0 0 5px;font-size:12px}
.home-profile-action-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:9px 0}
.home-profile-action-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.home-profile-action-row b{display:block;font-size:var(--type-body);font-weight:600;line-height:1.35}
.home-profile-action-help{display:block;color:var(--muted);font-size:var(--type-meta);line-height:1.4}
.home-profile-action-row .btn{align-self:center;min-width:48px;white-space:nowrap}
.home-profile-section-note{margin:8px 0 0;color:var(--muted);font-size:var(--type-meta)}
.home-profile-panel .home-trends-card{min-width:0;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.home-profile-panel .home-trends-card h4{margin:0 0 8px;font-size:12px}
.home-profile-panel .ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-fb{border-top:1px solid var(--border);padding:8px 0}
.home-fb:first-of-type{border-top:0}
.home-fb-layout,.home-correction-identity{display:flex;align-items:flex-start;gap:10px;min-width:0}
.home-fb-body,.home-correction-main{min-width:0;flex:1}
.home-fb-top{display:flex;align-items:center;gap:8px}
.home-fb-meta{color:var(--muted);font-size:var(--type-meta);margin-left:auto}
.home-fb-note{margin:4px 0 0;font-size:var(--type-body);color:var(--muted);line-height:1.45}
.home-fb-find{margin-top:5px;min-height:var(--control-target);padding:4px 0;border:0;background:none;color:var(--accent);font:inherit;font-size:var(--type-meta);cursor:pointer}
.home-fb-find:hover{text-decoration:underline}
.home-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.home-grade{font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;border:1px solid var(--border);border-radius:3px;padding:0 5px}
.home-fname{font-family:ui-monospace,Menlo,monospace;font-size:var(--type-body)}
.home-fb-top .task-type-tag,.home-correction-main .task-type-tag{margin-left:0}
.home-guideline{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:120px}
.home-guideline-name{font-size:var(--type-body);color:var(--text)}
.home-guideline-version{font-size:var(--type-meta);color:var(--muted);white-space:nowrap}
.home-accent{color:var(--accent)}
.home-muted{color:var(--muted)}
.home-tbl{width:100%;border-collapse:collapse;font-size:var(--type-body)}
.home-tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:var(--type-meta);padding:4px 6px;border-bottom:1px solid var(--border)}
.home-tbl td{padding:5px 6px;border-bottom:1px solid var(--border)}
.home-work-table{min-width:1000px;table-layout:auto}
.home-work-table th,.home-work-table td{vertical-align:middle}
.home-work-table .home-work-project{min-width:150px;font-weight:600}
.home-work-table .home-work-queue{min-width:140px;font-weight:600}
.home-work-table .home-work-batch{min-width:100px}
.home-work-table .home-work-type{min-width:92px}
.home-work-table .home-work-media{min-width:150px}
.home-column-actions{display:flex;align-items:center;gap:5px;white-space:nowrap}
.home-column-sort,.home-column-group{min-height:var(--control-target);border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.home-column-sort{padding:4px 0}
.home-column-sort{font-weight:600}
.home-column-sort::after{content:' ↕';color:var(--dim);font-weight:400}
.home-column-sort.sorted.asc::after{content:' ↑';color:var(--accent)}
.home-column-sort.sorted.desc::after{content:' ↓';color:var(--accent)}
.home-column-group{padding:4px 6px;border:1px solid transparent;border-radius:4px;color:var(--dim);font-size:var(--type-meta);font-weight:500}
.home-column-group:hover,.home-column-group:focus-visible,.home-column-group.grouped{border-color:var(--border);background:var(--panel);color:var(--accent)}
.home-work-group-row td{padding:0;background:var(--panel-2)}
.home-work-group-toggle{display:flex;width:100%;min-height:var(--control-target);align-items:center;gap:7px;padding:6px 9px;border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--type-meta);text-align:left;cursor:pointer}
.home-work-group-toggle:hover{background:var(--accent-tint-soft)}
.home-work-group-toggle b{font-weight:650}
.home-work-group-toggle>span:last-child{color:var(--muted)}
.home-disclosure-marker{display:inline-block;color:var(--muted);font-size:9px;transition:transform .12s ease}
.home-work-group-toggle[aria-expanded="true"] .home-disclosure-marker{transform:rotate(90deg)}
.home-media-cell{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--type-meta);color:var(--muted)}
.home-media-cell>span:last-child{overflow-wrap:anywhere}
.home-work-row{cursor:pointer}
.home-work-row:hover td{background:var(--panel-2)}
.home-work-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.home-work-row.selected td{background:var(--accent-tint-soft)}
.home-work-row.selected td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.home-empty{color:var(--muted);font-size:12px;padding:6px 0}
/* Recent work and its feedback are one bounded workspace. History owns recognition/navigation;
   feedback supplies review context and routes into the full conversation owner. */
.home-work-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.home-work-head h3{margin:0}
.home-work-head p{margin:0;color:var(--muted);font-size:var(--type-body)}
.home-work-layout{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(280px,1fr);gap:16px;align-items:start}
.home-recent-pane,.home-work-feedback{min-width:0}
.home-recent-pane h4,.home-work-feedback h4{margin:0 0 9px;font-size:12px;font-weight:700}
.home-work-feedback{max-height:clamp(280px,34vh,420px);overflow-y:auto;overscroll-behavior:contain;border-left:1px solid var(--border);padding-left:16px}
.home-detail-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.home-detail-head .home-fb-find{margin-top:0}
.home-detail-back{min-height:var(--control-target);padding:4px 7px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--accent);font:inherit;font-size:var(--type-meta);cursor:pointer;white-space:nowrap}
.home-detail-back:hover{border-color:var(--border);background:var(--panel-2)}
.home-detail-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.home-detail-identity{display:flex;align-items:center;gap:10px;padding:2px 0 10px;border-bottom:1px solid var(--border)}
.home-detail-identity>div{min-width:0}
.home-detail-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:10px 0 14px}
.home-detail-meta div{min-width:0}
.home-detail-meta dt{color:var(--muted);font-size:var(--type-eyebrow);text-transform:uppercase;letter-spacing:.04em}
.home-detail-meta dd{margin:2px 0 0;font-size:var(--type-body);overflow-wrap:anywhere}
.home-task-detail h5{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.home-feedback-chain{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.home-conversation-event{font-size:var(--type-body);line-height:1.45}
.home-conversation-message{padding:8px 9px;border:1px solid var(--border);border-radius:6px;background:var(--panel-2)}
.home-conversation-message.from-reviewer{border-left:3px solid var(--accent)}
.home-conversation-message.from-you{margin-left:18px;background:var(--accent-tint-soft)}
.home-conversation-speaker{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.home-conversation-speaker time,.home-conversation-ack time{color:var(--muted);font-size:var(--type-meta);white-space:nowrap}
.home-conversation-message p{margin:5px 0 0;overflow-wrap:anywhere}
.home-conversation-grade{margin-top:5px;color:var(--muted);font-size:var(--type-meta)}
.home-conversation-ack{display:flex;gap:7px;align-items:flex-start;padding:5px 7px;color:var(--muted)}
.home-conversation-ack div{display:flex;justify-content:space-between;gap:8px;flex:1}
.home-conversation-ack b{color:var(--text);font-weight:600}
.home-recent-scroll{max-height:clamp(280px,34vh,420px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--border);border-radius:5px;background:var(--bg)}
.home-recent-scroll .home-tbl thead{position:sticky;top:0;z-index:1;background:var(--panel-2)}
.home-recent-scroll .home-tbl tbody tr:last-child td{border-bottom:0}
/* Recent-work search + filter chips (tutor-home-execution-spec slice 1) */
.home-rtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.home-search{flex:1;min-width:140px;padding:5px 9px;background:var(--panel-2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-size:12px}
.home-rfilters{display:inline-flex;gap:5px}
.home-rfilter{cursor:pointer}
.home-correct{min-height:var(--control-target);font-size:var(--type-meta);font-weight:600;padding:4px 9px;border-radius:5px;cursor:pointer;border:1px solid var(--border);background:var(--panel-2);color:var(--accent);white-space:nowrap}
.home-correct:hover{border-color:var(--accent)}
.home-correct:disabled{cursor:not-allowed;opacity:1;color:var(--muted);background:var(--panel);border-color:var(--border);border-style:dashed}
.home-tag{font-size:var(--type-meta);color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:1px 7px;margin-left:6px;white-space:nowrap}
.home-tag.home-guidance-old{color:var(--warn);border-color:var(--warn)}
.home-guidance-banner{margin:-1px 0 9px;padding:8px 10px;border:1px solid var(--warn);border-radius:6px;background:var(--warn-tint-soft);color:var(--text);font-size:var(--type-meta);line-height:1.45}
.home-guidance-banner b{color:var(--warn)}
.home-corrections-card{margin-top:9px;padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.home-corrections-card h4{margin:0 0 7px;font-size:12px}
.home-corrections-card summary{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text);font-size:var(--type-body);cursor:pointer}
.home-corrections-card summary span{color:var(--muted);font-weight:400}
.home-corrections-card summary::-webkit-details-marker{display:none}
.home-corrections-card summary::marker{content:''}
.home-correction-summary-title{display:inline-flex;align-items:center;gap:7px}
.home-corrections-card[open] .home-correction-summary-title .home-disclosure-marker{transform:rotate(90deg)}
.home-corrections-card:not([open]) > :not(summary){display:none}
.home-corrections-card[open] summary{margin-bottom:8px}
.home-correction-intro{font-size:12px;color:var(--muted);line-height:1.45}
.home-correction-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}
.home-correction-row:first-of-type{border-top:0}
.home-correction-main{min-width:0}
.home-correction-meta{margin-top:4px;color:var(--muted);font-size:var(--type-meta);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.home-correction-context{margin-top:5px;padding-left:9px;border-left:2px solid var(--border);color:var(--muted);font-size:var(--type-body);line-height:1.4}
.home-correction-context b{color:var(--text);font-weight:600}
.home-correction-action{text-align:right;max-width:230px}
.home-correction-blocked{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.home-correction-state{font-size:var(--type-meta);color:var(--muted);line-height:1.35}
.home-correction-state.done{color:var(--accent)}
.home-correction-expired{color:var(--warn);border-color:var(--warn)}
.home-correction-completed{margin-top:7px;border-top:1px solid var(--border);padding-top:8px}
.home-correction-completed summary{cursor:pointer;color:var(--muted);font-size:var(--type-body)}

/* Task-recognition preview: media.js owns source creation + deferred hydration. */
.task-media-thumb{position:relative;display:block;flex:0 0 76px;width:76px;height:48px;overflow:hidden;border:1px solid var(--border);border-radius:5px;background:var(--bg)}
.task-media-thumb-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:4px;color:var(--muted);font-size:8px;line-height:1.2;text-align:center}
.task-media-thumb .au-thumb{position:relative;z-index:1;display:block;width:100%;height:100%;margin:0;border:0;border-radius:0;object-fit:cover;opacity:0}
.task-media-thumb.ready .au-thumb{opacity:1}
.task-media-thumb.failed .au-thumb{display:none}
.home-reqspec{white-space:nowrap}
.home-foot{margin-top:10px;color:var(--muted);font-size:var(--type-meta)}
.home-degraded{color:var(--warn);font-size:12px}
/* Ordinary Home actions share a real desktop pointer target; timeline/editor micro-controls are
   intentionally outside this scope because their dense expert interaction model is different. */
.home-page button,.home-profile-panel button{min-height:var(--control-target)}
@media (min-width:1400px){
  .home-card.home-start-card{grid-column:1 / -1;grid-row:1}
  .home-card.home-work-card{grid-column:1 / -1;grid-row:2}
  .home-body.profile-open{grid-template-columns:minmax(0,1fr) minmax(380px,30vw)}
  .home-profile-panel{position:sticky;top:44px;right:auto;bottom:auto;width:auto;height:calc(100dvh - 44px);box-shadow:none}
}
@media (min-width:1900px){
  .home-recent-scroll,.home-work-feedback{max-height:min(60vh,840px)}
}
@media (min-width:1101px) and (max-width:1399px){
  .topbar{flex-wrap:wrap;row-gap:4px}
  .topbar .topbar-chips{order:3;flex-basis:100%;justify-content:flex-start;padding:2px 0 0}
}
@media (max-width:900px){
  .home-page{grid-template-columns:repeat(6,1fr)}
  .home-card.span4,.home-card.span5,.home-card.span7,.home-card.span8{grid-column:span 6}
}
@media (max-width:1399px){
  .home-profile-panel{position:fixed;top:44px;right:0;bottom:0;z-index:2;width:min(520px,92vw);box-shadow:-12px 0 30px rgba(0,0,0,.35)}
}
@media (max-width:1100px){
  .home-work-layout{grid-template-columns:1fr}
  .home-work-feedback{border-left:0;border-top:1px solid var(--border);padding:14px 0 0}
}
@media (max-width:600px){
  .home-profile-panel .ch-grid{grid-template-columns:1fr}
}

/* ── Lead Console · Overview tab (ui/lead-console.js _lcLoadOverview; docs/lead-console.md §6) ── */
.lc-ov-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.lc-ov-tile{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:8px 10px}
.lc-ov-tile .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.lc-ov-tile .l{color:var(--muted);font-size:11px;margin-top:2px}
.lc-ov-tile .s{color:var(--muted);font-size:10.5px;margin-top:3px;opacity:.85}
/* QUEUE ROW as a grid (UX review C1): identity · progress · open counts · state · ops. The prose
   version wrapped twice in the pool's own column and read as fragments. Ops keep their own track so
   the row's columns do not shift when they reveal on hover. */
/* TWO ROWS, not five tracks. The pool's own column is ~430px at 1760 — five tracks squeezed the
   identity cell until names broke one character per line (caught by screenshot). Line 1 is identity
   + state + ops; line 2 is progress + counts, which is what the prototype's wide row said in one. */
.lc-ov-q{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  gap:3px 10px;align-items:center;margin-bottom:6px;padding:6px 8px;border-radius:6px;background:var(--panel-2)}
.lc-q-id{min-width:0;grid-column:1;grid-row:1}
.lc-q-state{grid-column:2;grid-row:1}
.lc-q-actions{grid-column:3;grid-row:1}
.lc-q-prog{grid-column:1;grid-row:2}
.lc-q-open{grid-column:2 / -1;grid-row:2;text-align:right}
/* A queue NAME is a label, not a paragraph: truncate with the full name in the tooltip rather than
   shattering it down the column. */
.lc-q-id b{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-q-sub{display:block;font-size:10px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-q-anyone{font-style:italic}
.lc-q-prog{display:flex;align-items:center;gap:7px;min-width:0}
.lc-q-prog .lc-ov-bar{flex:1;margin-top:0}
.lc-q-num{font-variant-numeric:tabular-nums;color:var(--text);font-size:11px}
.lc-q-empty{color:var(--muted);font-style:italic}
.lc-q-open{font-size:10px;color:var(--muted);white-space:nowrap}
.lc-q-state{white-space:nowrap}
.lc-q-prio{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}

.lc-ov-qhead{display:flex;gap:8px;align-items:baseline;font-size:12px}
.lc-ov-qmeta{color:var(--muted);font-size:11px}
/* Queue operations (lead-console-execution-spec L3) */
.lc-q-actions{margin-left:auto;display:inline-flex;gap:5px}
.lc-q-btn{font-size:11px;font-weight:600;padding:2px 9px;border-radius:5px;cursor:pointer;border:1px solid var(--border);background:var(--panel-2);color:var(--text)}
.lc-q-btn:hover{border-color:var(--accent)}
.lc-ov-q-paused{opacity:.6}
.lc-paused-tag{color:var(--warn);font-weight:600}
/* Trial invites (trial-loop-execution-spec §3) — the lead's mint-a-link row + the invite list.
   Reuses .lc-ov-q/.lc-q-btn for the rows: an invite reads like a queue entry, so it should look
   like one (style-from-sibling-precedent) rather than inventing a second list idiom. */
.lc-invite-new{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.lc-invite-new input{flex:1 1 220px;min-width:0}
.lc-invite-new select{font-size:12px;padding:4px 6px;border-radius:5px;border:1px solid var(--border);background:var(--panel-2);color:var(--text)}
.lc-inv-open{color:var(--ok);font-weight:600}
/* The queue's shared comparison question builder (Edit queue). Rows of label · type · choices ·
   required, so a lead never writes JSON to run an eval. */
.lc-q-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto auto;gap:6px;align-items:end;margin:0 0 8px}
.lc-q-row .lc-q-label{grid-column:1 / -1;min-width:0}
.lc-q-row .lc-q-opts{min-width:0}
.lc-q-row select.lc-q-type{font-size:12px;padding:4px 6px;border-radius:5px;border:1px solid var(--border);background:var(--panel-2);color:var(--text)}
.lc-q-req{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.lc-q-del{color:var(--muted)}
.lc-q-del:hover{color:var(--danger);border-color:var(--danger)}
/* The exit survey inside the wrap-up dialog. Scrolls on a short viewport rather than pushing the
   Send/Skip controls off-screen — a questionnaire whose buttons you cannot reach is a trap. */
.wrap-survey{max-height:min(52vh,460px);overflow-y:auto;padding:2px 2px 4px;margin-top:4px}
.wrap-summary{margin:0 0 10px;font-size:13px}
.wrap-intro{margin:0 0 12px;color:var(--muted);font-size:12px}
.wrap-survey .field{margin-bottom:12px}
/* A survey response in the console's feedback panel: question caption above each answer. */
.lc-note-answers{font-size:12px;margin-top:4px}
.lc-note-answers > div{margin:0 0 3px}
/* Comparison results: per-pair tallies + the individual judgements underneath. */
.lc-res-counts{margin-left:auto;display:inline-flex;gap:8px}
.lc-res-count{font-size:11px;color:var(--muted)}
.lc-res-count b{color:var(--text)}
.lc-res-row{font-size:12px;margin:3px 0 6px;padding-left:8px;border-left:2px solid var(--border)}
/* "accepted unchanged" is a RESULT, not an empty state — coloured as something to look at. */
.lc-corr-none{font-size:11px;color:var(--warn);font-weight:600}
/* ── Media tab. The library got its own surface 2026-07-31; tiles rather than rows because the
   PICTURE is the identifying feature — comparison outputs are named neutrally on purpose. ── */
.med-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px;margin-top:10px}
.med-tile{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);
  border-radius:6px;background:var(--panel-2)}
.med-tile .au-thumb{width:64px;height:44px;margin-right:0}
.med-tile-meta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
/* The NAME wraps rather than ellipsing. These names are deliberately cryptic (a filename that says
   which model made an output defeats the blinding), so a truncated one identifies nothing — the
   tail is often the only part that differs (…_a.png vs …_b.png). */
.med-tile-meta b{font-size:12px;line-height:1.25;overflow-wrap:anywhere}
.med-tile-actions{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.med-tile-meta span{font-size:11px;color:var(--muted)}
.med-used{font-variant-numeric:tabular-nums}
.med-controls{align-items:flex-end;gap:10px}
.med-pager{align-items:center;gap:10px;margin-top:10px}
/* The capacity gauge: media shares its volume with the annotation database, so the free-space
   floor is a real refusal, not a warning. Shown as a bar so it is watchable before it bites. */
.med-gauge{margin-top:10px;font-size:11px;color:var(--muted)}
.med-gauge-line{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:baseline;margin-bottom:7px}
.med-gauge-line strong{color:var(--text);font-weight:600}
.med-gauge-line span:last-child{text-align:right}
.med-gauge-bar{height:6px;border-radius:3px;background:var(--panel-2);border:1px solid var(--border);
  overflow:hidden;margin-bottom:4px}
.med-gauge-bar i{display:block;height:100%;background:var(--accent)}
.med-gauge-warn .med-gauge-bar i{background:var(--warn,#c76b6b)}
.med-gauge-warn span{color:var(--warn,#c76b6b)}

/* ── Asset sets. A card per set, members shown as role-labelled thumbnails: "which of these
   near-identical files is A" is precisely what the filename cannot tell you. ── */
.aset-ingest{margin-top:12px}
.aset-ingest > summary{cursor:pointer;font-size:11px;color:var(--muted);padding:4px 0}
.aset-ingest[open] > summary{margin-bottom:8px}
/* Section headers carry their size, like the prototype's card heads. */
.lc-count{font-size:10.5px;font-weight:500;color:var(--muted);letter-spacing:.02em}
.lc-only-author,.lc-only-media{display:none}
/* The SCALE LEVER reads as the primary act of this column — it sat below the fold under a
   permanently-open manifest while three secondary buttons wore the accent (UX review A4). */
.aset-bulk{margin:10px 0 0}
.aset-ingest textarea{width:100%;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:11px}
.aset-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.aset-card{border:1px solid var(--border);border-radius:6px;background:var(--panel-2);padding:10px}
.aset-head{display:flex;align-items:center;gap:10px}
.aset-head b{font-size:13px}
.aset-head button{margin-left:auto}
.aset-prompt{margin:6px 0;font-size:12px;color:var(--fg)}
.aset-prompt.au-empty{color:var(--muted);font-style:italic}
.aset-members{display:flex;flex-wrap:wrap;gap:10px}
.aset-member{display:flex;flex-direction:column;gap:2px;width:96px}
.aset-member .au-thumb{width:96px;height:60px;margin-right:0}
.aset-role{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aset-file{font-size:10px;color:var(--muted);overflow-wrap:anywhere;line-height:1.2}
/* The by-hand pair pickers, folded away behind a disclosure once an asset set can answer the same
   question in one choice. Doing it per task is what does not scale, so it is not the default. */
.au-manual > summary{cursor:pointer;font-size:11px;color:var(--muted);padding:4px 0}
.au-manual[open] > summary{margin-bottom:6px}
.au-set-prev{border:1px solid var(--border);border-radius:6px;background:var(--panel-2);padding:8px}
.au-set-prev .aset-member{width:80px}
.au-set-prev .aset-member .au-thumb{width:80px;height:52px}

.aset-bulk{margin:12px 0;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--panel-2)}
.aset-bulk .author-row{align-items:flex-end}
.aset-receipt{margin-top:10px;padding:9px;border:1px solid var(--border);border-radius:5px;background:var(--panel)}
.aset-receipt-head{display:flex;justify-content:space-between;gap:12px;font-size:11px}
.aset-receipt-head span{color:var(--muted);white-space:nowrap}
.aset-receipt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:8px 0;font-size:10px;color:var(--muted)}
.aset-receipt-grid b{display:block;font-size:16px;color:var(--fg);font-variant-numeric:tabular-nums}
.aset-receipt .btn{margin-top:2px}
/* The queue name is the thing being chosen, so it must be readable — the 90px form width truncates
   it to "— no queue -". */
.author-sec .aset-bulk label.au-narrow{flex:0 0 200px}
.author-sec label.aset-pick{flex:0 0 auto;flex-direction:row;align-items:center;gap:4px;font-size:10px;
  text-transform:uppercase;color:var(--muted)}
.author-sec label.aset-pick input{width:auto;margin:0}
.author-sec label.aset-prop{display:flex;flex-direction:row;align-items:center;gap:8px;
  padding:4px 0;font-size:12px;color:var(--fg)}
.author-sec label.aset-prop input{flex:0 0 auto;margin:0;width:auto}
.aset-prop-bad{opacity:.6}
#asetProposals{margin-top:10px}

/* Asset thumbnails. Comparison outputs are named neutrally on purpose, so the picture is the only
   way a lead can tell one from another. Fixed box so a list of mixed aspect ratios stays a list. */
.au-thumb{width:44px;height:30px;object-fit:cover;border-radius:3px;background:var(--panel-2);
  border:1px solid var(--border);flex:0 0 auto;margin-right:8px;display:inline-block;vertical-align:middle}
.au-thumb-audio{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.au-cmp-prev{display:block}
/* Bigger than the list chip: this one has to be recognisable, since the filename deliberately
   tells you nothing about which output it is. */
.au-cmp-prev .au-thumb{margin:6px 0 0;width:160px;height:90px}
/* The kind picker is the form's first question, so it reads as one — not as field number four. */
.author-grid label.au-kind{font-weight:600}
.author-grid label.au-kind select{font-size:13px;padding:6px}
.au-advanced{margin-top:4px}
.au-advanced summary{font-size:12px;color:var(--muted);cursor:pointer;padding:4px 0}
.au-advanced summary:hover{color:var(--text)}
.au-task-del:hover{color:var(--danger);border-color:var(--danger)!important}
.tr-node.tr-unchecked{border-left:2px solid var(--warn)}
.tr-act.tr-approve{color:var(--ok);border-color:var(--ok)}
.tr-act.tr-approve:hover{background:var(--ok-tint-soft,rgba(16,185,129,.12))}
.seg.unchecked{border-style:dashed;opacity:.72}
.seg.unchecked.selected{opacity:1}
.lc-inv-used{color:var(--muted)}
/* Project lifecycle phase (Rule L) — a status line above the pulse. */
.lc-phase-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.lc-phase-row:empty{display:none}
.lc-phase-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.lc-phase{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text);
  padding:4px 11px;border-radius:20px;border:1px solid var(--border);background:var(--panel-2)}
.lc-phase .pdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
/* Direction library (D4) — reusable versioned direction rows. */
.lc-dir{display:block;width:calc(100% + 12px);padding:9px 6px;margin:0 -6px;border:0;border-bottom:1px solid var(--border);cursor:pointer;border-radius:6px;background:transparent;color:var(--text);font:inherit;text-align:left}
.lc-dir:last-child{border-bottom:0}
.lc-dir:hover{background:var(--panel-2)}
.lc-dir:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lc-dir-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lc-dir-meta{color:var(--muted);font-size:11px;margin-left:auto}
/* Direction SCOPE badge (D4, display-only — captured, not enforced). Shown only for the notable
   cases: Shared (all projects) or a cross-project direction; this-project directions are unbadged. */
.lc-dir-scope{font-size:10px;padding:1px 6px;border-radius:4px;border:1px solid var(--border);color:var(--muted)}
.lc-dir-scope.shared{color:var(--accent-on);background:var(--accent-tint-soft);border-color:transparent}
.lc-dir-scope.other{color:var(--warn);border-color:var(--warn)}
.lc-dir-sum{color:var(--muted);font-size:12px;margin-top:3px}
/* Direction detail (D4c) — current body, append-only history, publish form. */
.lc-dir-detail{margin-top:8px}
.lc-dir-body{margin:8px 0 4px;font-size:13px;color:var(--text);line-height:1.55}
.lc-dir-body p{margin:0 0 6px}
.lc-dir-h{margin:16px 0 6px;font-size:12px;font-weight:600;color:var(--text)}
.lc-dir-ver{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.lc-dir-ver:last-child{border-bottom:0}
.lc-dir-vhead{font-weight:600;color:var(--text)}
.lc-dir-vsum{color:var(--muted)}
.lc-dir-ver .lc-dir-meta{margin-left:auto}
/* QC sampling control (L4) + per-tutor drill-down (L5) */
.lc-ov-sampling{font-size:12px;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lc-tutor-link{background:none;border:none;padding:0;color:var(--accent);cursor:pointer;font-weight:700;font-size:12px;text-align:left}
.lc-tutor-link:hover{text-decoration:underline}
.lc-td-row{font-size:12px;margin-bottom:8px}
.lc-td-lbl{color:var(--muted);margin-right:6px}
.lc-ov-bar{height:6px;border-radius:3px;background:var(--bg);border:1px solid var(--border);overflow:hidden;margin-top:3px}
.lc-ov-bar>span{display:block;height:100%;background:var(--accent)}
.lc-ov-alert{border-left:2px solid var(--warn);padding:4px 8px;margin-bottom:4px;font-size:12px}
.lc-ov-gap{border:1px dashed var(--border);border-radius:4px;padding:4px 8px;margin-top:6px;
  color:var(--muted);font-size:11px;opacity:.85}

/* ── Badges (ui/badges.js) — the leveled achievement chip, on Home + the roster ── */
.badge-chip{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--border);border-radius:10px;
  padding:1px 8px;font-size:11px;white-space:nowrap;background:var(--bg)}
.badge-stars{color:var(--accent);font-size:10px;letter-spacing:-1px}
.badge-skill{border-color:color-mix(in srgb, var(--accent) 45%, var(--border))}
.badge-quality{border-color:color-mix(in srgb, #5ec46b 45%, var(--border))}
.badge-trust{border-color:color-mix(in srgb, #c98a3a 50%, var(--border))}
.badge-milestone{border-color:color-mix(in srgb, #a98bd4 55%, var(--border));color:var(--text)}
/* ── Lead Console · Roster (ui/lead-console.js _authorLoadRoster) ── */
.au-roster-scroll{overflow-x:auto;max-height:340px;overflow-y:auto}
table.au-roster{width:100%;border-collapse:collapse;font-size:12px}
table.au-roster th{position:sticky;top:0;background:var(--panel);text-align:left;color:var(--muted);
  font-weight:600;font-size:11px;padding:4px 8px;border-bottom:1px solid var(--border)}
table.au-roster th.num,table.au-roster td.num{text-align:right;font-variant-numeric:tabular-nums}
table.au-roster td{padding:5px 8px;border-bottom:1px solid var(--border);vertical-align:top}
table.au-roster .home-chip,table.au-roster .badge-chip{margin:1px 2px 1px 0}
.au-role{font-size:10px;color:var(--accent);border:1px solid var(--border);border-radius:3px;padding:0 4px}
.au-qcn{color:var(--muted);font-size:10px}
/* People tab — specialization management (lead-console-execution-spec L1) */
.au-accent{color:var(--accent);font-weight:700}
.au-reqs{margin-bottom:14px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}
.au-reqs h4{margin:0 0 8px 0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.au-req{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;font-size:12px}
.au-grant,.au-deny{font-size:11px;font-weight:600;padding:3px 10px;border-radius:5px;cursor:pointer;border:1px solid var(--border)}
.au-grant{background:var(--accent);color:#fff;border-color:var(--accent)}
.au-deny{background:transparent;color:var(--muted)}
.au-deny:hover{color:var(--text)}
.au-spec-chip{display:inline-flex;align-items:center;gap:3px}
.au-spec-x{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0}
.au-spec-x:hover{color:var(--danger)}
.au-audit-detail{color:var(--muted);font-size:11px;max-width:280px;overflow-wrap:anywhere}
.lc-ov-degraded{color:var(--warn)}
.au-spec-add{background:var(--panel-2);border:1px dashed var(--border);border-radius:8px;color:var(--accent);cursor:pointer;font-size:12px;line-height:1;padding:1px 7px;margin-left:2px}
.au-spec-add:hover{border-color:var(--accent)}
.au-badge-chip{display:inline-flex;align-items:center;gap:2px}
.au-badge-x{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:0 0 0 2px}
.au-badge-x:hover{color:var(--danger)}
.au-badge-add{background:var(--panel-2);border:1px dashed var(--border);border-radius:8px;color:var(--accent);cursor:pointer;font-size:12px;line-height:1;padding:1px 7px;margin-left:2px}
.au-badge-add:hover{border-color:var(--accent)}

/* ── Lead home — the Lead Console as a FULL-WINDOW surface, not a floating modal over the annotation
   UI. A lead lands here on login (auth.js) and re-enters via the Console button; the annotation
   workspace is one "Workspace →" away. Same full-window pattern as body.home-mode / body.cmp-mode:
   #appRoot hidden + an OPAQUE background, so no WarpSonic chrome shows underneath. The console is a
   lead-only surface (opened only from the lead-gated Console button), so promoting it is unconditional. */
body.lead-home #appRoot{display:none!important}
body.lead-home #authorModal.on{background:var(--bg);align-items:stretch}
body.lead-home #authorModal .lc-modal{
  width:100%;max-width:none;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;   /* dvh: keep the bottom of the console reachable above the mobile browser toolbar (100vh hides it) */
  border-radius:0;border:0;box-shadow:none}
body.lead-home #authorModal .modal-head{background:var(--panel-2);border-bottom:1px solid var(--border);padding:14px 24px}
body.lead-home #authorModal .modal-head h2{font-size:15px;letter-spacing:.01em}
/* The shared .modal-body caps at max-height:60vh for the centered help/compare popups. In the
   full-window console that cap clips the scroll area at ~60% of the window (dead space below);
   here the body must FILL the flex column and scroll its own overflow. flex:1 + min-height:0 +
   overflow-y:auto is the scrollable-flex-child recipe; the 60vh cap must be lifted. */
body.lead-home #authorModal .modal-body{max-height:none;min-height:0;flex:1 1 auto}

/* ── Redesign S1: the RAIL (page mode, wide). Same buttons, same data-lc-tab vocabulary — only
   the geometry changes, which is what keeps every existing selector and test alive. Narrow
   viewports keep the horizontal tab bar exactly as it was. ── */
@media (min-width:1101px){
  body.lead-home #authorModal .modal-body{
    display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    column-gap:26px;align-content:start}
  body.lead-home #authorModal .lc-tabs{
    grid-column:1;grid-row:1 / span 2;flex-direction:column;align-items:stretch;gap:2px;
    border-bottom:0;border-right:1px solid var(--border);margin:0;padding-right:12px;
    position:sticky;top:0;align-self:start}
  body.lead-home #authorModal .lc-tab{
    text-align:left;border-bottom:0;border-left:2px solid transparent;border-radius:6px;padding:8px 12px}
  /* Media/Tasks/Queues are NARROW-mode stage nav. In the pipeline bands all three stages are on
     screen at once, so four rail items led to one identical view (live feedback 2026-08-01). */
  body.lead-home #authorModal .lc-tab.lc-sub{display:none}
  body.lead-home #authorModal .lc-tab .k{display:inline;margin-left:auto;font:10px ui-monospace,Menlo,monospace;color:var(--muted);opacity:.7}
  body.lead-home #authorModal .lc-tab{display:flex;align-items:center;gap:8px}
  body.lead-home #authorModal .lc-railfoot{display:block;margin-top:auto;padding:10px 12px 4px;border-top:1px solid var(--border);color:var(--muted);font-size:10.5px}
  body.lead-home #authorModal .lc-tabs{min-height:calc(100dvh - 140px)}
  /* Region EYEBROWS — the prototype's pane vocabulary: what each column IS, in one glance. */
  body.lead-home #authorModal [data-lc-region="author"] .lc-eyebrow{
    display:flex;align-items:baseline;gap:8px;font-size:10px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--text);margin:0 0 10px;
    border-left:3px solid var(--accent);padding-left:8px}
  body.lead-home #authorModal .lc-eyebrow span{color:var(--muted);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:10.5px}
  /* Queue-row OPS reveal on hover/focus — the prototype's clean rows; always visible in narrow. */
  body.lead-home #authorModal .lc-q-actions{opacity:0;transition:opacity .12s}
  body.lead-home #authorModal .lc-ov-q:hover .lc-q-actions,
  body.lead-home #authorModal .lc-ov-q:focus-within .lc-q-actions{opacity:1}
  /* One grammar for both lists (UX review B4): task-row ops reveal like queue-row ops instead of
     three permanent full-size buttons shouting over every row. */
  body.lead-home #authorModal .au-task{position:relative}
  /* Absolute, not hidden: opacity keeps the buttons TAB-REACHABLE (so :focus-within can reveal
     them), while taking them out of flow so they cost the meta line nothing. */
  body.lead-home #authorModal .au-task-ops{position:absolute;top:6px;right:8px;margin-top:0;
    flex-wrap:nowrap;opacity:0;transition:opacity .12s;background:var(--panel-2);
    box-shadow:-8px 0 8px -6px var(--panel-2);border-radius:6px}
  body.lead-home #authorModal .au-task:hover .au-task-ops,
  body.lead-home #authorModal .au-task:focus-within .au-task-ops{opacity:1}
  @media (prefers-reduced-motion:reduce){ body.lead-home #authorModal .au-task-ops{transition:none} }
  @media (prefers-reduced-motion:reduce){ body.lead-home #authorModal .lc-q-actions{transition:none} }
  body.lead-home #authorModal .lc-tab.on{
    border-bottom:0;border-left-color:var(--accent);background:var(--panel-2)}
  /* The shell status owns a stable grid slot. Previously it auto-placed differently when the
     inspector added a column, leaving a clipped greeting/status fragment in the work area. */
  body.lead-home #authorModal #authorStatus{grid-column:2 / -1;grid-row:1;align-self:start;margin:0;z-index:1}
  body.lead-home #authorModal .modal-body[data-lc-status="on"] .lc-pipeline-page{padding-top:30px}
  body.lead-home #authorModal .lc-pane{grid-column:2 / -1;min-width:0}
  body.lead-home #authorModal [data-lc-region="pipeline"] .lc-create-flow{display:none}
  body.lead-home #authorModal [data-lc-region="create"] .lc-pane[data-lc-pane="tasks"]{
    display:block;grid-column:2 / -1;max-width:1220px}

  /* Pipeline and Tasks are separate page jobs. The old author region deliberately showed media,
     sets, queues, and tasks at once; that made the two top-level routes the same screen. */
  body.lead-home #authorModal .modal-body{grid-template-columns:200px minmax(0,0.95fr) minmax(0,1.05fr)}
  body.lead-home #authorModal .modal-body[data-lc-region="pipeline"],
  body.lead-home #authorModal .modal-body[data-lc-region="tasks"],
  body.lead-home #authorModal .modal-body[data-lc-region="create"]{
    grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);overflow:hidden;align-content:stretch}
  body.lead-home #authorModal [data-lc-region="pipeline"] .lc-pane:not([data-lc-pane="pipeline"]),
  body.lead-home #authorModal [data-lc-region="tasks"] .lc-pane:not([data-lc-pane="tasks"]),
  body.lead-home #authorModal [data-lc-region="create"] .lc-pane:not([data-lc-pane="tasks"]){display:none!important}
  body.lead-home #authorModal [data-lc-region="pipeline"] .lc-pane[data-lc-pane="pipeline"],
  body.lead-home #authorModal [data-lc-region="tasks"] .lc-pane[data-lc-pane="tasks"],
  body.lead-home #authorModal [data-lc-region="create"] .lc-pane[data-lc-pane="tasks"]{
    display:block;grid-column:2;grid-row:2;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:8px}

  /* THE LIBRARY REGION: the whole content width, as many tiles as fit, no height cap. */
  body.lead-home #authorModal [data-lc-region="media"] .lc-pane[data-lc-pane="media"]{
    display:block;grid-column:2 / -1}
  body.lead-home #authorModal [data-lc-region="media"] .med-grid{
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  body.lead-home #authorModal [data-lc-region="media"] .lc-only-media{display:inline-block}
  body.lead-home #authorModal [data-lc-region="media"] .lc-eyebrow{display:none}
  body.lead-home #authorModal .lc-tabs{grid-row:1 / span 3}

  /* A SINGLE-pane region in a three-pane grid: cap the line length instead of stretching a simple
     list across ~1500px ("a very simple UI stretched over too much space" — live feedback). */
  body.lead-home #authorModal [data-lc-region="directions"] .lc-pane[data-lc-pane="directions"]{
    max-width:900px}
  /* RESULTS: four independent readers — flow them as two columns instead of one long ribbon. */
  body.lead-home #authorModal [data-lc-region="results"] .lc-pane[data-lc-pane="results"]{
    display:block;column-count:2;column-gap:28px;max-width:1500px}
  body.lead-home #authorModal [data-lc-region="results"] .lc-results-head{column-span:all}
  body.lead-home #authorModal [data-lc-region="results"] .lc-pane[data-lc-pane="results"] .author-sec{
    break-inside:avoid;margin-bottom:22px}
  /* PEOPLE: the admin panels pair up; the roster and audit keep full width (they are tables). */
  body.lead-home #authorModal [data-lc-region="people"] .lc-pane[data-lc-pane="people"]{
    display:grid;grid-template-columns:1fr 1fr;gap:0 28px;max-width:1500px}
  body.lead-home #authorModal [data-lc-region="people"] .lc-pane[data-lc-pane="people"] > .author-sec{
    min-width:0}
  body.lead-home #authorModal [data-lc-region="people"] .lc-pane[data-lc-pane="people"] > .author-sec.lc-wide{
    grid-column:1 / -1}
  body.lead-home #authorModal [data-lc-region="people"] .lc-page-head{grid-column:1 / -1}
}

@media (max-width:1100px){
  body.lead-home #authorModal .modal-head{grid-template-columns:minmax(0,1fr) minmax(180px,240px) auto;padding:12px 16px}
  .lc-create-layout{grid-template-columns:1fr}
  .lc-create-context{position:static}
  .lc-workspace-preview-card{height:auto}
  .lc-workspace-preview{min-height:760px;height:auto}
  .lc-workspace-preview iframe{height:760px}
  .lc-task-layout{grid-template-columns:1fr}
  .lc-task-context{position:static;grid-template-columns:1fr 1fr}
  .lc-media-layout{grid-template-columns:1fr}
  .lc-media-context{position:static;grid-template-columns:1fr 1fr}
  .lc-direction-layout{grid-template-columns:1fr}
  .lc-direction-context{position:static}
}

@media (max-width:760px){
  body.lead-home #authorModal .modal-head{grid-template-columns:1fr auto;gap:8px}
  .lc-project-switcher{grid-column:1 / -1;grid-row:2}
  .lc-create-page-head{display:block;padding-bottom:16px}
  .lc-create-page-actions{padding-top:14px;flex-wrap:wrap}
  .lc-create-steps{grid-template-columns:1fr;gap:6px}
  .lc-create-step{min-height:48px}
  .lc-create-card,.lc-create-source-card,.lc-machine-context-card,.lc-create-preflight{padding:14px!important}
  .lc-task-toolbar{grid-template-columns:1fr}
  .lc-task-context{grid-template-columns:1fr}
  .lc-page-head{display:block}
  .lc-page-head>div:last-child{padding-top:14px;flex-wrap:wrap}
  .lc-media-context{grid-template-columns:1fr}
  .lc-direction-context{display:block}
  .lc-pipeline-signals{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:1600px){
  .lc-create-layout{grid-template-columns:minmax(660px,.92fr) minmax(0,1.08fr)}
  .lc-create-definition-row{grid-template-columns:minmax(0,1fr) minmax(205px,220px)}
  .lc-input-package-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lc-create-form-shell[data-task-kind="comparison"] .lc-input-package-grid,
  .lc-create-form-shell[data-task-kind=""] .lc-input-package-grid{grid-template-columns:1fr}
  .lc-create-form-shell[data-task-kind="comparison"] .lc-input-context,
  .lc-create-form-shell[data-task-kind=""] .lc-input-context{display:none}
  .lc-input-media{grid-column:1;grid-row:1}
  #lcTaskPreviewDirection{grid-column:1;grid-row:2}
  .lc-input-context{grid-column:2;grid-row:1 / span 2}
}

/* ── The WIDE band (>=1700px): the full pipeline the prototype promised. Work UNSTACKS — queues and
   tasks become their own columns — so the flow reads left to right in one glance:
   rail · Supply (media+sets) · Queues · Tasks, over the strip. The mid band above keeps Work
   stacked because two content columns is all ~1280–1700 can hold legibly. ── */
@media (min-width:1700px){
  body.lead-home #authorModal .modal-body{grid-template-columns:200px minmax(0,1fr) minmax(300px,0.85fr) minmax(0,1fr)}
  body.lead-home #authorModal .modal-body[data-lc-region="pipeline"],
  body.lead-home #authorModal .modal-body[data-lc-region="tasks"],
  body.lead-home #authorModal .modal-body[data-lc-region="create"]{grid-template-columns:200px minmax(0,1fr)}

  /* The prototype's INSPECTOR-as-a-column: with an inspection open the grid grows a 5th track and
     the drawer docks — position:sticky inside its own column, no overlay, nothing covered. The mid
     band keeps the overlay drawer (two content columns have no room to give up). */
  body.lead-home #authorModal .modal-body[data-lc-insp="on"]{
    grid-template-columns:200px minmax(0,1fr) minmax(300px,0.85fr) minmax(0,1fr) 360px}
  body.lead-home #authorModal .modal-body[data-lc-insp="on"] .lc-insp{
    position:sticky;top:0;grid-column:5;grid-row:1 / span 3;align-self:start;
    max-height:calc(100dvh - 60px);border-left:1px solid var(--border);box-shadow:none;width:auto}
  body.lead-home #authorModal .modal-body[data-lc-insp="on"] .lc-insp::before{display:none}   /* docked: nothing is covered */
}

/* The mid-band inspector is visually modal. Its scrim must also block the dimmed Supply/rail
   controls; otherwise the page looks disabled while clicks still change it underneath the drawer. */
@media (min-width:1101px) and (max-width:1699px){
  body.lead-home #authorModal .modal-body[data-lc-insp="on"] .lc-insp::before{pointer-events:auto}
}

/* Update nudge (ui/chrome.js) — a dismissible "reload into the new build" toast, bottom-center,
   above the app surfaces (z 40) but below the modal/confirm layer (100/200). display:flex overrides
   the [hidden] attribute's default, so the [hidden] rule below is load-bearing for the hidden state. */
#updateBanner{
  display:flex; align-items:center; gap:12px; max-width:calc(100vw - 24px);
  padding:10px 12px 10px 16px;
  font-size:13px; color:var(--text);
}
#updateBanner[hidden]{display:none}
#updateBanner .ub-msg{white-space:normal}
#updateBanner .ub-reload{background:var(--accent);color:#fff;border:none;border-radius:5px;padding:6px 12px;font-weight:600;font-size:12px;cursor:pointer}
#updateBanner .ub-x{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px}
#updateBanner .ub-x:hover{color:var(--text)}

/* ── Lead Console responsiveness (phone/tablet) ────────────────────────────────────────────────
   The console is a full-window surface a lead may open on a phone or tablet. The tabs are the one
   thing that clips on a narrow width (5 tabs > 375px), so let them scroll horizontally instead of
   cutting "People" off; and tighten padding + tile min-width on small screens. The roster table
   already scrolls in its own .au-roster-scroll; the author forms already wrap (.author-row). */
.lc-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lc-tabs::-webkit-scrollbar{display:none}
.lc-tab{white-space:nowrap;flex:0 0 auto}
@media (max-width:1000px){
  table.au-roster td{white-space:nowrap;vertical-align:middle}   /* narrow screens: single-height rows, horizontal scroll (wrapping balloons row height when columns are cramped) */
}
@media (max-width:560px){
  body.lead-home #authorModal .lc-modal{width:100vw;border-left:0;border-right:0}
  #authorModal .modal-body{padding:12px}
  #authorModal .modal-head{padding:10px 12px}
  .lc-tab{padding:6px 11px;font-size:12px}
  .lc-ov-tiles{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .author-row{gap:6px}
  .author-sec label.au-narrow{flex:1 1 auto}   /* stop the stage select from pinching on a phone */
}

/* ── Stat charts (ui/charts.js) — single-hue SVG, theme-aware via tokens ── */
.ch-svg{display:block;width:100%;height:auto;overflow:visible}
.ch-ax{fill:var(--muted);font-size:5px;font-family:inherit}
.ch-hbars{display:flex;flex-direction:column;gap:3px}
.ch-hb-row{display:grid;grid-template-columns:minmax(80px,110px) 1fr auto;gap:8px;align-items:center;font-size:11.5px}
.ch-hb-label{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-hb-track{height:8px;border-radius:4px;background:var(--bg);border:1px solid var(--border);overflow:hidden}
.ch-hb-track>span{display:block;height:100%;background:var(--accent)}
.ch-hb-val{font-variant-numeric:tabular-nums;color:var(--text);min-width:20px;text-align:right}
.ch-hb-sub{color:var(--muted);font-size:10px}
/* a chart figure: a titled block wrapping one chart, used on Home + Overview */
.ch-fig{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:8px 10px}
.ch-fig-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.ch-fig-title{font-size:11px;font-weight:600;color:var(--text)}
.ch-fig-note{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
/* A feedback note's body in the Console reader — wraps, preserves the annotator's own line breaks. */
.lc-note-body{font-size:12.5px;line-height:1.5;color:var(--text);white-space:pre-wrap;margin-top:4px}

/* ── Lead Console app shell ────────────────────────────────────────────────
   The Lead Console is a page-level application surface. Its route, polling, and inspector owners
   remain in ui/lead-console.js; this block owns only the shared visible shell. The old modal frame,
   horizontal tabs, and persistent telemetry strip are intentionally not part of this surface. */
body.lead-home #authorModal.lc-app-shell{display:none;background:var(--bg);align-items:stretch;justify-content:stretch}
body.lead-home #authorModal.lc-app-shell.on{display:block}
body.lead-home #authorModal.lc-app-shell .lc-modal{width:100%;max-width:none;height:100dvh;max-height:none;display:grid;grid-template-rows:70px minmax(0,1fr);border:0;border-radius:0;background:var(--bg);box-shadow:none}
body.lead-home #authorModal.lc-app-shell .lc-topbar{display:flex;align-items:center;gap:22px;padding:0 28px;background:var(--panel-2);border-bottom:1px solid var(--border)}
body.lead-home #authorModal.lc-app-shell .lc-topbar h2{font-size:15px;letter-spacing:0;font-weight:650;white-space:nowrap}
body.lead-home #authorModal.lc-app-shell .lc-project-identity{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}
body.lead-home #authorModal.lc-app-shell .lc-project-switcher{display:block;color:var(--text);font-size:13px;font-weight:650}
body.lead-home #authorModal.lc-app-shell .lc-project-switcher select{min-width:0;width:auto;max-width:280px;padding:0;border:0;background:transparent;color:var(--text);font:inherit;font-weight:650}
body.lead-home #authorModal.lc-app-shell .lc-project-context{display:none}
body.lead-home #authorModal.lc-app-shell .lc-status-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:11px;white-space:nowrap}
body.lead-home #authorModal.lc-app-shell .lc-status-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn)}
body.lead-home #authorModal.lc-app-shell .lc-topbar-user{margin-left:auto;color:var(--muted);font-size:12px}
body.lead-home #authorModal.lc-app-shell .modal-body{display:grid!important;grid-template-columns:200px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:0!important;min-height:0;max-height:none!important;padding:0!important;overflow:hidden!important;background:var(--bg)}
body.lead-home #authorModal.lc-app-shell .lc-tabs{display:flex;grid-column:1;grid-row:1;flex-direction:column;gap:4px;min-height:0;margin:0;padding:18px 12px;background:var(--panel-2);border:0;border-right:1px solid var(--border);overflow:auto!important;position:static}
body.lead-home #authorModal.lc-app-shell .lc-tab{display:flex;align-items:center;gap:9px;width:100%;min-height:38px;padding:9px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font-size:13px;font-weight:500;text-align:left}
body.lead-home #authorModal.lc-app-shell .lc-tab.lc-sub{display:none}
body.lead-home #authorModal.lc-app-shell .lc-tab .k{display:inline;margin-left:auto;color:var(--dim);font:11px ui-monospace,Menlo,monospace}
body.lead-home #authorModal.lc-app-shell .lc-tab:hover{background:var(--accent-soft);color:var(--text)}
body.lead-home #authorModal.lc-app-shell .lc-tab.on{border:1px solid var(--accent);background:var(--accent-soft);color:var(--text);font-weight:650}
body.lead-home #authorModal.lc-app-shell .lc-railfoot{display:block;margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--border);color:var(--dim);font-size:11px}
body.lead-home #authorModal.lc-app-shell .lc-content{grid-column:2;grid-row:1;min-width:0;min-height:0;overflow:auto;background:var(--bg)}
body.lead-home #authorModal.lc-app-shell #authorStatus{margin:14px 26px 0}
body.lead-home #authorModal.lc-app-shell .lc-pane{display:none!important;min-width:0;max-width:none!important;margin:0!important;padding:23px 26px 74px!important;overflow:visible!important;column-count:initial!important}
body.lead-home #authorModal.lc-app-shell .lc-pane.on{display:block!important}
/* Every top-level screen keeps the prototype's short context label.  The earlier
   redesign only revealed this vocabulary in the retired multi-column "author"
   region, which made the routed screens lose a useful bit of hierarchy. */
body.lead-home #authorModal.lc-app-shell .lc-eyebrow{display:flex;align-items:baseline;gap:8px;margin:0 0 7px;color:var(--accent);font-size:10px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
body.lead-home #authorModal.lc-app-shell .lc-eyebrow span{color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:none}
body.lead-home #authorModal.lc-app-shell .author-sec input[type="search"]{padding:7px 9px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font:inherit}
/* Pipeline is an at-a-glance strip, not five competing cards.  The values stay live; the lighter
   structure matches the approved prototype and makes the decisions beneath it the visual focus. */
body.lead-home #authorModal.lc-app-shell .lc-pipeline-signals{display:flex;align-items:stretch;gap:0;margin:0 0 18px;padding:0 2px 13px;border-bottom:1px solid var(--border)}
body.lead-home #authorModal.lc-app-shell .lc-pipeline-signal{min-width:150px;flex:1;padding:0 24px;border:0;border-left:1px solid var(--border);border-radius:0;background:transparent}
body.lead-home #authorModal.lc-app-shell .lc-pipeline-signal:first-child{padding-left:0;border-left:0}
body.lead-home #authorModal.lc-app-shell .lc-pipeline-signal b{font-size:21px;font-weight:650}
body.lead-home #authorModal.lc-app-shell .lc-pipeline-signal span{margin-top:3px;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none}
body.lead-home #authorModal.lc-app-shell .lc-pipeline-signal small{margin-top:2px;color:var(--dim);font-size:11px}
/* The prototype treats Define → Route → Publish as orientation, not three large controls. */
body.lead-home #authorModal.lc-app-shell .lc-create-flow{margin:20px 0 18px}
body.lead-home #authorModal.lc-app-shell .lc-create-steps{display:flex;align-items:center;gap:8px;margin:0}
body.lead-home #authorModal.lc-app-shell .lc-create-step{display:flex;align-items:center;gap:8px;min-height:0;padding:0;border:0;background:transparent;color:var(--muted)}
body.lead-home #authorModal.lc-app-shell .lc-create-step+.lc-create-step::before{content:"→";margin-right:2px;color:var(--dim);font-size:16px}
body.lead-home #authorModal.lc-app-shell .lc-create-step b{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--muted);font-size:12px}
body.lead-home #authorModal.lc-app-shell .lc-create-step span{font-size:13px;color:inherit}
body.lead-home #authorModal.lc-app-shell .lc-create-step small,
body.lead-home #authorModal.lc-app-shell .lc-create-stage-note{display:none}
body.lead-home #authorModal.lc-app-shell .lc-create-step.on{border:0;background:transparent;color:var(--text)}
body.lead-home #authorModal.lc-app-shell .lc-create-step.on b{border-color:var(--accent);background:var(--accent);color:#fff}
body.lead-home #authorModal.lc-app-shell .lc-create-kind-label{display:block;margin-bottom:10px;font-size:15px;font-weight:650;color:var(--text)}
body.lead-home #authorModal.lc-app-shell .au-kind #auTaskWorkspace{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.lead-home #authorModal.lc-app-shell .lc-kind-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 18px}
body.lead-home #authorModal.lc-app-shell .lc-kind-choice{display:flex;min-height:112px;padding:15px 17px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--text);text-align:left}
body.lead-home #authorModal.lc-app-shell .lc-kind-choice:hover{border-color:var(--accent);background:var(--accent-soft)}
body.lead-home #authorModal.lc-app-shell .lc-kind-choice[aria-pressed="true"]{border:2px solid var(--accent);padding:14px 16px;background:var(--accent-soft)}
body.lead-home #authorModal.lc-app-shell .lc-kind-choice-head{display:flex;align-items:center;gap:10px;width:100%}
body.lead-home #authorModal.lc-app-shell .lc-kind-choice-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid var(--border);border-radius:7px;background:var(--panel);color:var(--muted)}
body.lead-home #authorModal.lc-app-shell .lc-kind-choice-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.lead-home #authorModal.lc-app-shell .lc-kind-comparison-icon text{fill:currentColor;stroke:none;font:800 7px system-ui,sans-serif;text-anchor:middle}
body.lead-home #authorModal.lc-app-shell .lc-kind-choice:hover .lc-kind-choice-icon,
body.lead-home #authorModal.lc-app-shell .lc-kind-choice[aria-pressed="true"] .lc-kind-choice-icon{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
body.lead-home #authorModal.lc-app-shell .lc-kind-choice b{font-size:15px}
body.lead-home #authorModal.lc-app-shell .lc-kind-choice-copy{color:var(--muted);font-size:12px;line-height:1.45}
body.lead-home #authorModal.lc-app-shell .lc-qc-policy p{margin:0 0 10px;color:var(--muted);font-size:12px}
body.lead-home #authorModal.lc-app-shell .lc-qc-policy-values{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.lead-home #authorModal.lc-app-shell .lc-qc-policy-values span{padding:5px 9px;border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--muted)}
body.lead-home #authorModal.lc-app-shell .lc-qc-policy-values b{color:var(--text);font-variant-numeric:tabular-nums}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"].on{display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:0 24px;max-width:1500px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"] .lc-results-head{grid-column:1 / -1}
body.lead-home #authorModal.lc-app-shell .lc-results-tabs{grid-column:1 / -1;display:flex;gap:6px;margin:0 0 16px;border-bottom:1px solid var(--border)}
body.lead-home #authorModal.lc-app-shell .lc-results-tabs button{padding:9px 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:600 13px inherit}
body.lead-home #authorModal.lc-app-shell .lc-results-tabs button.on{border-bottom-color:var(--accent);color:var(--text)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"] [data-lc-results-panel]{display:none}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"][data-lc-results-view="outcomes"] [data-lc-results-panel="outcomes"],
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"][data-lc-results-view="outcomes"] [data-lc-results-panel="loops"],
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"][data-lc-results-view="corrections"] [data-lc-results-panel="corrections"],
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"][data-lc-results-view="invites"] [data-lc-results-panel="invites"],
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"][data-lc-results-view="feedback"] [data-lc-results-panel="feedback"],
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"][data-lc-results-view="activity"] [data-lc-results-panel="activity"]{display:block}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"] [data-lc-results-panel="outcomes"]{grid-column:1}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"] [data-lc-results-panel="loops"]{grid-column:2}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"] [data-lc-results-panel="corrections"],
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"] [data-lc-results-panel="invites"],
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"] [data-lc-results-panel="feedback"]{grid-column:1 / -1}
body.lead-home #authorModal.lc-app-shell .lc-result-item{display:grid;grid-template-columns:minmax(0,1fr) 125px 110px auto;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--border)}
body.lead-home #authorModal.lc-app-shell .lc-result-item.lc-result-fidelity{grid-template-columns:minmax(0,1fr) minmax(110px,.55fr) minmax(110px,.55fr) minmax(130px,.65fr) auto}
body.lead-home #authorModal.lc-app-shell .lc-result-fidelity .lc-result-side small{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.lead-home #authorModal.lc-app-shell .lc-result-fidelity .lc-result-validation{grid-column:2 / 5}
body.lead-home #authorModal.lc-app-shell .lc-result-fidelity .lc-result-validation b{font-size:11px;line-height:1.45;color:var(--danger)}
body.lead-home #authorModal.lc-app-shell .lc-result-item:last-child{border-bottom:0}
body.lead-home #authorModal.lc-app-shell .lc-result-item>div:first-child>b{display:block;font-size:13px}
body.lead-home #authorModal.lc-app-shell .lc-result-item small{display:block;margin-top:3px;color:var(--muted);font-size:11px}
body.lead-home #authorModal.lc-app-shell .lc-result-side{display:flex;flex-direction:column;color:var(--muted);font-size:11px}
body.lead-home #authorModal.lc-app-shell .lc-result-side b{margin-top:2px;color:var(--text);font-size:13px}
body.lead-home #authorModal.lc-app-shell .lc-result-status{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:11px;white-space:nowrap}
body.lead-home #authorModal.lc-app-shell .lc-result-status.ok{color:var(--ok);background:var(--ok-soft)}
body.lead-home #authorModal.lc-app-shell .lc-result-status.warn{color:var(--warn);background:var(--warn-soft)}
body.lead-home #authorModal.lc-app-shell .lc-result-status.danger{color:var(--danger);background:var(--danger-soft)}
body.lead-home #authorModal.lc-app-shell .lc-result-loop{display:grid;grid-template-columns:8px minmax(0,1fr);gap:10px;padding:5px 0}
body.lead-home #authorModal.lc-app-shell .lc-result-loop>i{width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--warn)}
body.lead-home #authorModal.lc-app-shell .lc-result-loop.danger>i{background:var(--danger)}
body.lead-home #authorModal.lc-app-shell .lc-result-loop b{display:block;font-size:13px}
body.lead-home #authorModal.lc-app-shell .lc-result-loop p{margin:4px 0 10px;color:var(--muted);font-size:12px}
body.lead-home #authorModal.lc-app-shell .lc-results-tabs button span{margin-left:4px;color:var(--dim)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"] .author-sec,
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="directions"] .author-sec{margin:0 0 16px;padding:18px 20px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"] .author-sec h4{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:15px}
body.lead-home #authorModal.lc-app-shell .lc-direction-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,1fr);gap:24px;max-width:1380px}
body.lead-home #authorModal.lc-app-shell .lc-direction-main h3,
body.lead-home #authorModal.lc-app-shell .lc-direction-context h3{display:flex;align-items:center;justify-content:space-between;margin:0;font-size:16px}
body.lead-home #authorModal.lc-app-shell .lc-direction-context{min-width:0}
body.lead-home #authorModal.lc-app-shell .lc-dir{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px auto;align-items:center;gap:16px;width:100%;padding:16px 4px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;color:var(--text)}
body.lead-home #authorModal.lc-app-shell .lc-dir:last-child{border-bottom:0}
body.lead-home #authorModal.lc-app-shell .lc-dir.selected{background:linear-gradient(90deg,var(--accent-soft),transparent 62%)}
body.lead-home #authorModal.lc-app-shell .lc-dir-copy{min-width:0}
body.lead-home #authorModal.lc-app-shell .lc-dir-copy b{display:block;font-size:13px}
body.lead-home #authorModal.lc-app-shell .lc-dir-copy span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.lead-home #authorModal.lc-app-shell .lc-dir-state{display:flex;align-items:center;gap:7px;color:var(--warn);font-size:11px;white-space:nowrap}
body.lead-home #authorModal.lc-app-shell .lc-dir-state.live{color:var(--muted)}
body.lead-home #authorModal.lc-app-shell .lc-dir-state.live i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
body.lead-home #authorModal.lc-app-shell .lc-dir-attachments{color:var(--muted);font-size:12px;white-space:nowrap}
body.lead-home #authorModal.lc-app-shell .lc-dir-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px}
body.lead-home #authorModal.lc-app-shell .lc-dir-sum{margin-top:5px;color:var(--muted);font-size:12px;line-height:1.45}
body.lead-home #authorModal.lc-app-shell .lc-dir-meta{color:var(--muted);font-size:11px;white-space:nowrap}
body.lead-home #authorModal.lc-app-shell .lc-dir-focus-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
body.lead-home #authorModal.lc-app-shell .lc-dir-focus-head h3{min-width:0;line-height:1.25}
body.lead-home #authorModal.lc-app-shell .lc-dir-focus-head span{color:var(--muted);font-size:11px;white-space:nowrap}
body.lead-home #authorModal.lc-app-shell .lc-context-facts{margin:0;border-top:1px solid var(--border)}
body.lead-home #authorModal.lc-app-shell .lc-context-facts>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border)}
body.lead-home #authorModal.lc-app-shell .lc-context-facts dt{color:var(--muted)}
body.lead-home #authorModal.lc-app-shell .lc-context-facts dd{margin:0;color:var(--text);font-weight:650;text-align:right}
body.lead-home #authorModal.lc-app-shell .lc-context-facts .lc-dir-live{color:var(--ok)}
body.lead-home #authorModal.lc-app-shell .lc-dir-preview{margin-top:18px;padding:15px 16px;border:1px solid var(--border);border-radius:8px;background:var(--bg);font-size:13px;line-height:1.55}
body.lead-home #authorModal.lc-app-shell .lc-dir-preview p{margin:0 0 10px}
body.lead-home #authorModal.lc-app-shell .lc-dir-preview p:last-child{margin-bottom:0}
body.lead-home #authorModal.lc-app-shell .lc-dir-focus-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lc-dir-impact-summary{padding:9px 10px;margin-bottom:10px;border:1px solid var(--border);border-radius:7px;background:var(--panel-2);font-size:12px;color:var(--muted)}
.lc-dir-impact-summary b{color:var(--text)}
.lc-dir-impact-list{max-height:min(52vh,460px);overflow:auto;border-top:1px solid var(--border)}
.lc-dir-impact-group{padding:10px 0;border-bottom:1px solid var(--border)}
.lc-dir-impact-group h4{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px;font-size:12px;color:var(--text)}
.lc-dir-impact-group h4 span{color:var(--muted);font-size:11px;font-weight:400}
.lc-dir-impact-task{display:flex;align-items:flex-start;gap:9px;padding:7px 5px;border-radius:6px;cursor:pointer}
.lc-dir-impact-task:hover{background:var(--panel-2)}
.lc-dir-impact-task input{margin-top:2px}
.lc-dir-impact-task span{min-width:0}
.lc-dir-impact-task b,.lc-dir-impact-task small{display:block}
.lc-dir-impact-task b{font-size:12px;color:var(--text)}
.lc-dir-impact-task small{margin-top:2px;color:var(--muted);font-size:10px;line-height:1.35}
.lc-dir-audit{max-height:360px;overflow:auto}
.lc-dir-audit article{padding:10px 0;border-bottom:1px solid var(--border)}
.lc-dir-audit article:last-child{border-bottom:0}
.lc-dir-audit article>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lc-dir-audit article span{color:var(--muted);font-size:11px}
.lc-dir-audit article p{margin:5px 0 0;color:var(--muted);font-size:11px;word-break:break-word}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"].on{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:0 24px;max-width:1500px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"] .lc-page-head,
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"] .lc-wide{grid-column:1 / -1}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"] .author-sec{margin:0 0 22px;padding:18px 20px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"] .author-sec h3{margin:0 0 14px;font-size:16px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"] .lc-roster-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"] .lc-roster-head h3{margin:0}
body.lead-home #authorModal.lc-app-shell .lc-roster-head>div{display:flex;gap:8px}
body.lead-home #authorModal.lc-app-shell .lc-roster-head input,
body.lead-home #authorModal.lc-app-shell .lc-roster-head select{min-width:180px;padding:7px 9px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"] .lc-people-legacy{display:none}
/* Capacity tells the lead what to intervene on; the roster is then the first
   management surface, as in the approved screen.  Operational policy and
   reviewer appointment controls remain live, but follow the roster instead of
   displacing it below the fold. */
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"] > .author-sec:not(.lc-people-legacy){order:1}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"] > .author-sec.lc-people-roster{order:2!important;margin-top:4px}
/* Appointments and QC settings are on-demand People actions.  They do not compete with the
   prototype's attention → coverage → roster hierarchy. */
.lc-reviewer-dialog{width:min(560px,calc(100vw - 32px));padding:0;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);color:var(--text);box-shadow:var(--shadow)}
.lc-reviewer-dialog::backdrop{background:rgba(0,0,0,.58)}
.lc-reviewer-dialog-card{padding:20px}
.lc-reviewer-dialog-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.lc-reviewer-dialog-card h2{margin:0 0 4px;font-size:18px}.lc-reviewer-dialog-card p{margin:0;color:var(--muted)}
.lc-reviewer-fields{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px;margin:18px 0}.lc-reviewer-fields label{display:grid;gap:6px;font-size:12px;font-weight:650}.lc-reviewer-fields input,.lc-reviewer-fields select{width:100%;padding:8px 9px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text)}
.lc-reviewer-actions{display:flex;justify-content:flex-end;gap:8px}.lc-reviewer-settings,.lc-reviewer-current{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}.lc-reviewer-settings h3,.lc-reviewer-current h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:13px}
@media (max-width:600px){.lc-reviewer-fields{grid-template-columns:1fr}.lc-reviewer-dialog-card{padding:16px}}
@media (max-width:700px){body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"] .lc-roster-head{align-items:stretch;flex-direction:column}body.lead-home #authorModal.lc-app-shell .lc-roster-head>div{flex-direction:column}body.lead-home #authorModal.lc-app-shell .lc-roster-head input,body.lead-home #authorModal.lc-app-shell .lc-roster-head select{width:100%}}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-capacity{max-width:1500px;margin:5px 0 17px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-capacity .med-gauge{margin:0}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-layout{grid-template-columns:minmax(0,1.55fr) minmax(330px,.75fr);gap:24px;margin-top:0;max-width:1500px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-main>.author-sec{padding:0;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);overflow:hidden}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-upload{display:none}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-list-head{display:flex;align-items:baseline;justify-content:space-between;padding:16px 20px 0}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-list-head h3{margin:0;font-size:16px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-controls{display:grid;grid-template-columns:minmax(240px,1fr) minmax(170px,250px) auto auto;align-items:end;padding:16px 20px;margin:0;border-bottom:1px solid var(--border)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-controls label{min-width:0}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-controls input,
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-controls select{width:100%}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] #medRetired.on{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-grid{display:block;margin:0}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-list-row{display:grid;grid-template-columns:76px minmax(0,1fr) 112px 112px auto;align-items:center;gap:12px;margin:0;padding:12px 20px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-list-row:last-child{border-bottom:0}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-list-row .au-thumb{width:68px;height:48px;object-fit:contain;background:var(--panel-3)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-list-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-list-row .med-tile-actions{display:flex;justify-content:flex-end;flex-direction:row;gap:6px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-added{color:var(--muted);font-size:11px;white-space:nowrap}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-pager{padding:12px 20px;margin:0;border-top:1px solid var(--border)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-context .author-sec{padding:18px 20px;border-radius:10px;background:var(--panel-2)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-context dl{gap:0;border-top:1px solid var(--border)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-context dl div{padding:11px 0;border-bottom:1px solid var(--border);font-size:12px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-selected-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-selected-head h3{margin:0;font-size:16px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-selected-head span{color:var(--muted);font-size:11px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-focus-preview.is-retired{filter:grayscale(1);opacity:.64}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-stats span{display:block;margin-top:3px;color:var(--muted);font-size:10px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="tasks"] .lc-task-main{padding:18px 20px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="tasks"] .lc-task-table-wrap{overflow-x:auto}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="tasks"] .lc-task-table{width:100%;min-width:780px;border-collapse:collapse;font-size:12px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="tasks"] .lc-task-table th{padding:10px 8px;border-bottom:1px solid var(--border);color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.06em;text-align:left;text-transform:uppercase}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="tasks"] .lc-task-table td{padding:12px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="tasks"] .lc-task-table tr:last-child td{border-bottom:0}
body.lead-home #authorModal.lc-app-shell .lc-task-table tbody tr{cursor:pointer}
body.lead-home #authorModal.lc-app-shell .lc-task-table tbody tr.is-selected{background:var(--accent-soft);box-shadow:inset 2px 0 var(--accent)}
body.lead-home #authorModal.lc-app-shell .lc-task-table tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
body.lead-home #authorModal.lc-app-shell .lc-task-table td b{display:block;font-size:13px}
body.lead-home #authorModal.lc-app-shell .lc-task-table td small{display:block;margin-top:3px;color:var(--muted)}
body.lead-home #authorModal.lc-app-shell .lc-task-table td .lc-quarantine-detail{max-width:260px;white-space:normal;line-height:1.35}
body.lead-home #authorModal.lc-app-shell .lc-task-table .lc-task-direction{display:block;max-width:260px;margin-top:5px;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* These are table cells, not the retired compact task cards.  A lead must be
   able to spot the next operation without discovering a hover-only control;
   keep the table's actions in normal flow and visible like the prototype. */
body.lead-home #authorModal.lc-app-shell .lc-task-table .au-task-ops{position:static;display:flex;align-items:center;gap:4px;margin:0;opacity:1;white-space:nowrap;background:transparent;box-shadow:none}
body.lead-home #authorModal.lc-app-shell .lc-task-more{position:relative}
body.lead-home #authorModal.lc-app-shell .lc-task-more>summary{display:inline-flex;align-items:center;gap:5px;list-style:none;border:1px solid var(--border);border-radius:5px;padding:4px 8px;min-height:var(--control-target);font-size:11px;font-weight:600;cursor:pointer}
body.lead-home #authorModal.lc-app-shell .lc-task-more>summary::-webkit-details-marker{display:none}
body.lead-home #authorModal.lc-app-shell .lc-task-more[open]>summary{border-color:var(--accent);background:var(--accent-soft)}
body.lead-home #authorModal.lc-app-shell .lc-task-more-menu{position:absolute;right:0;z-index:4;display:grid;gap:6px;min-width:190px;margin-top:6px;padding:8px;border:1px solid var(--border);border-radius:7px;background:var(--panel-2);box-shadow:0 10px 24px rgba(0,0,0,.25)}
body.lead-home #authorModal.lc-app-shell .lc-task-more-menu .au-dir-edit{margin:4px 0 0;min-width:0}
body.lead-home #authorModal.lc-app-shell .lc-task-more-menu .au-dir-edit textarea{width:100%;min-width:250px}
body.lead-home #authorModal.lc-app-shell .lc-task-table .au-dir-edit{margin-top:9px;min-width:250px}
body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="tasks"] .lc-task-context .author-sec{padding:18px 20px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}
body.lead-home #authorModal.lc-app-shell .lc-task-tabs button span{margin-left:4px;color:var(--dim)}
body.lead-home #authorModal.lc-app-shell .lc-task-focus-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.lead-home #authorModal.lc-app-shell .lc-task-focus-title strong{font-size:15px}
body.lead-home #authorModal.lc-app-shell #lcTaskFocus>p{margin:10px 0 14px;color:var(--muted);line-height:1.45}
body.lead-home #authorModal.lc-app-shell .lc-task-focus-actions{display:flex;gap:8px;margin-top:14px}
body.lead-home #authorModal.lc-app-shell .lc-impact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.lead-home #authorModal.lc-app-shell .lc-impact-grid>div{padding:11px;border:1px solid var(--border);border-radius:7px;background:var(--bg)}
body.lead-home #authorModal.lc-app-shell .lc-impact-grid b{display:block;font-size:17px}
body.lead-home #authorModal.lc-app-shell .lc-impact-grid span{display:block;margin-top:3px;color:var(--muted);font-size:10px}
body.lead-home #authorModal.lc-app-shell #lcTaskImpact>p{margin:13px 0 0;color:var(--muted);font-size:11px;line-height:1.45}
body.lead-home #authorModal.lc-app-shell [data-lc-region="create"] #lcTaskIndex{display:none!important}
body.lead-home #authorModal.lc-app-shell [data-lc-region="create"] #lcCreatePage{display:block!important}
body.lead-home #authorModal.lc-app-shell .lc-insp{z-index:2}
@media (max-width:900px){
  body.lead-home #authorModal.lc-app-shell .lc-modal{grid-template-rows:auto minmax(0,1fr)}
  body.lead-home #authorModal.lc-app-shell .lc-topbar{padding:13px 16px;gap:12px;flex-wrap:wrap}
  body.lead-home #authorModal.lc-app-shell .lc-topbar-user{margin-left:auto}
  body.lead-home #authorModal.lc-app-shell .modal-body{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr)!important}
  body.lead-home #authorModal.lc-app-shell .lc-tabs{grid-column:1;grid-row:1;flex-direction:row;min-height:auto;padding:8px 12px;border-right:0;border-bottom:1px solid var(--border);overflow-x:auto!important}
  body.lead-home #authorModal.lc-app-shell .lc-tab{width:auto;min-height:0;white-space:nowrap}
  body.lead-home #authorModal.lc-app-shell .lc-railfoot{display:none}
  body.lead-home #authorModal.lc-app-shell .lc-content{grid-column:1;grid-row:2}
  body.lead-home #authorModal.lc-app-shell .lc-pane{padding:20px 16px 48px!important}
  body.lead-home #authorModal.lc-app-shell .lc-pipeline-signals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.lead-home #authorModal.lc-app-shell .lc-pipeline-signal{min-width:0;padding:10px 14px}
  body.lead-home #authorModal.lc-app-shell .lc-pipeline-signal:first-child{padding-left:14px}
  body.lead-home #authorModal.lc-app-shell .lc-pipeline-layout{grid-template-columns:1fr}
  body.lead-home #authorModal.lc-app-shell .lc-pipeline-context{position:static}
  body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="results"].on{display:block!important}
  body.lead-home #authorModal.lc-app-shell .lc-result-item.lc-result-fidelity{
    grid-template-columns:minmax(0,1fr) repeat(3,minmax(100px,.6fr));gap:12px}
  body.lead-home #authorModal.lc-app-shell .lc-result-fidelity .lc-result-status{
    grid-column:1 / -1;justify-self:start}
  body.lead-home #authorModal.lc-app-shell .lc-result-fidelity .lc-result-validation{grid-column:2 / -1}
  body.lead-home #authorModal.lc-app-shell .lc-direction-layout{grid-template-columns:1fr}
  body.lead-home #authorModal.lc-app-shell .lc-dir{grid-template-columns:minmax(0,1fr) 90px auto}
  body.lead-home #authorModal.lc-app-shell .lc-dir-attachments{display:none}
  body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="people"].on{display:block!important}
  body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .lc-media-layout{grid-template-columns:1fr}
  body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-list-row{grid-template-columns:44px minmax(0,1fr) auto}
  body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-used,
  body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-added{display:none}
  body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-controls{grid-template-columns:minmax(0,1fr) minmax(150px,.5fr) auto auto}
}

@media (max-width:560px){
  .lc-create-source-card .au-set-prev .aset-members{grid-template-columns:1fr}
  .au-rf-contract>div{grid-template-columns:1fr}
  .lc-surface-modules{grid-template-columns:1fr}
  body.lead-home #authorModal.lc-app-shell .lc-pane[data-lc-pane="media"] .med-controls{grid-template-columns:1fr 1fr}
  body.lead-home #authorModal.lc-app-shell .lc-dir{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  body.lead-home #authorModal.lc-app-shell .lc-dir-state{display:none}
  body.lead-home #authorModal.lc-app-shell .lc-dir-focus-head{display:block}
  body.lead-home #authorModal.lc-app-shell .lc-dir-focus-head span{display:block;margin-top:5px}
  body.lead-home #authorModal.lc-app-shell .lc-result-item,
  body.lead-home #authorModal.lc-app-shell .lc-result-item.lc-result-fidelity{
    grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}
  body.lead-home #authorModal.lc-app-shell .lc-result-fidelity .lc-result-side small{
    max-width:100%;white-space:normal;overflow-wrap:anywhere}
  body.lead-home #authorModal.lc-app-shell .lc-result-fidelity .lc-result-validation{grid-column:1}
}

/* Batch review uses the existing workspace preview and form primitives. */
.aset-review { scroll-margin-top: 80px; border-top: 1px solid var(--border); margin-top: 16px; padding-top: 16px; }
.aset-review h4 { margin-bottom: 8px; }
.aset-review select { max-width: 100%; }
#asetPreviewAsk { overflow-wrap: anywhere; }
#asetPreviewWorkspace .lc-workspace-preview { min-height: 480px; }

#asetBulk > .author-row { position: sticky; top: 0; z-index: 2; background: var(--panel-2); padding: 8px 0; }

/* Saved comparison evidence uses the existing Results reader and native disclosure. */
.lc-result-evidence{grid-column:1 / -1;min-width:0;font-size:var(--type-body);overflow-wrap:anywhere}
.lc-result-evidence article{padding:12px 0;border-top:1px solid var(--border)}
.lc-result-evidence h4{margin:0 0 6px}
.lc-result-evidence dt{font-weight:600;margin-top:10px}
.lc-result-evidence dd{margin:4px 0 0;white-space:pre-wrap}