/* Attention DNA — the app, in the owner's "Strand" design system
   (Claude Design project, App screen: themes() in "Attention DNA - App").

   ONE token layer, here and nowhere else. css/workbench-redesign.css used to
   re-declare :root at equal specificity and silently won in the light theme
   (and over the print palette); it no longer declares tokens.

   Three layers:
   1. Primitives, per theme, under the design's own names. Dark is the default
      (`:root`) and `[data-theme="dark"]`; light is `[data-theme="light"]`.
      Opaque colours are 6-digit hex so tests/contrast.test.cjs and
      js/charts.js can read them; rgba only for overlays meant to sit on any
      surface (--hover, --chip, --stripe, the *-bg tints).
   2. Theme-independent primitives (type, radii, strand channels, emotions).
   3. Legacy aliases: every name the existing CSS/JS still reads, pointed at a
      primitive with var(), so old declarations re-skin with no edit. Unused
      legacy names were deleted, not aliased.

   AA adjustments to the design's values (WCAG 2.x, computed in
   tests/contrast.test.cjs, which reads these blocks):
   - dark  --ink3 #8a93b0 (design #7f88a6: 4.72:1 on --panel2) → ≥5.4:1
   - light --ink3 #5c6480 (design #68708c: 4.15:1 on --side)   → ≥4.95:1
   - light --bad  #c81e1e (design #dc2626: 4.09:1 on --side)
   - light --teal #0e6f68 (design #0f766e: 4.46:1 as High-badge text on --bg)
   - tier/status tints are lighter in light theme so their ink clears 4.5:1
   - light --purple #8e2fe3 (design #9333ea: 4.39:1 on a chip over --bg);
     white on a purple fill uses it (5.7:1), never #a855f7 (4.0:1)
   - emotion fills carry an ink partner (--emo-*-ink): white on Curiosity was
     2.49:1; Calm is #4f46e5, which white clears at 6.3:1
   --ink4 is the NON-TEXT tier (hairlines, dots, rings; ≥3:1), never text.

   Name traps:
   - --card is the design's --panel (cards/panels). The app's old --panel was
     a constant-dark "instrument" surface; it is now an alias of --card.
   - design --line2 is the STRONGER hairline; legacy --line-2 was the fainter
     one (→ --line) and --line-3 the stronger (→ --line2).
   - --ink2/--ink3/--ink4 (design) vs --ink-2/--ink-3/--ink-4 (legacy alias).
   - Aliases resolve on :root. Re-declaring a primitive on a descendant does
     NOT move the legacy alias that reads it; re-declare what you read. */

/* ── 1. Primitives: dark (default) ───────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg:     #0b1020;   /* page */
  --side:   #0d1328;   /* sidebar */
  --card:   #10172e;   /* cards and panels (the design's --panel) */
  --panel2: #151d39;   /* inset / raised surface inside a card */
  --cell:   #141b34;   /* empty strand cell; the base channel colours mix into */
  --line:   #21273d;   /* design rgba(255,255,255,.07) flattened over --card */
  --line2:  #2f3549;   /* design rgba(255,255,255,.13) flattened over --card */
  --hover:  rgba(255,255,255,0.04);
  --chip:   rgba(255,255,255,0.06);
  --stripe: rgba(255,255,255,0.05);
  --media-ph: #141b34; /* a thumbnail with no image */

  /* Ink */
  --ink:  #eceff7;
  --ink2: #b3bad0;
  --ink3: #8a93b0;
  --ink4: #666f8c;     /* non-text */

  /* Accents and status (text-safe on every surface) */
  --teal:   #5eead4;
  --purple: #c084fc;
  --indigo: #a5b4fc;
  --bad:    #f87171;
  --warn:   #fbbf24;
  --teal-bg:   rgba(20,184,166,0.20);  --teal-border:   rgba(94,234,212,0.35);
  --indigo-bg: rgba(99,102,241,0.22);  --indigo-border: rgba(165,180,252,0.35);
  --bad-bg:    rgba(248,113,113,0.18); --bad-border:    rgba(248,113,113,0.40);
  --warn-bg:   rgba(245,158,11,0.16);  --warn-border:   rgba(251,191,36,0.40);
  --purple-bg: rgba(168,85,247,0.16);

  /* Marks (dots, bars, fills — not text) */
  --tier-high: #14b8a6;
  --tier-mid:  #6366f1;
  --tier-low:  #f87171;

  /* Controls */
  --btn:    #eceff7;   /* primary button = ink */
  --btnInk: #0b1020;
  --ring:   rgba(94,234,212,0.28);

  /* Language DNA, dark set (Facts, Fun, Feeling, Opinionated, Action) */
  --dna-facts:   #3987E5;
  --dna-fun:     #D95926;
  --dna-feeling: #D55181;
  --dna-opinion: #9085E9;
  --dna-action:  #E66767;

  --shadow-sm:       0 0 0 1px rgba(255,255,255,0.06);
  --shadow-card:     0 0 0 1px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.45);
  --shadow-float:    0 0 0 1px rgba(255,255,255,0.07), 0 20px 25px -5px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.5);
  --shadow-elevated: 0 0 0 1px rgba(255,255,255,0.07), 0 4px 24px rgba(0,0,0,0.5);
  --shadow-modal:    0 0 0 1px rgba(255,255,255,0.08), 0 24px 80px rgba(0,0,0,0.6);
}

/* ── 1. Primitives: light ────────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:     #f2f3f7;
  --side:   #eaecf2;
  --card:   #ffffff;
  --panel2: #f6f7fa;
  --cell:   #eceff6;
  --line:   #e2e5ee;
  --line2:  #cdd2df;
  --hover:  rgba(11,16,32,0.035);
  --chip:   rgba(11,16,32,0.05);
  --stripe: rgba(11,16,32,0.06);
  --media-ph: #e4e7ef;

  --ink:  #0b1020;
  --ink2: #3b4360;
  --ink3: #5c6480;
  --ink4: #7a8199;     /* non-text */

  --teal:   #0e6f68;
  --purple: #8e2fe3;   /* design #9333ea: 4.39:1 on a chip over the page */
  --indigo: #4f46e5;
  --bad:    #c81e1e;
  --warn:   #a64b08;
  --teal-bg:   rgba(20,184,166,0.12);  --teal-border:   rgba(14,111,104,0.35);
  --indigo-bg: rgba(99,102,241,0.12);  --indigo-border: rgba(79,70,229,0.32);
  --bad-bg:    rgba(248,113,113,0.10); --bad-border:    rgba(200,30,30,0.32);
  --warn-bg:   rgba(245,158,11,0.12);  --warn-border:   rgba(166,75,8,0.35);
  --purple-bg: rgba(147,51,234,0.08);

  --tier-high: #0d9488;
  --tier-mid:  #6366f1;
  --tier-low:  #ef4444;

  --btn:    #0b1020;
  --btnInk: #ffffff;
  --ring:   rgba(14,111,104,0.22);

  /* Language DNA, light set */
  --dna-facts:   #2A78D6;
  --dna-fun:     #EB6834;
  --dna-feeling: #C4457A;   /* was #E87BA4: 2.69:1 on white, under 3:1 for a mark */
  --dna-opinion: #4A3AA7;
  --dna-action:  #E34948;

  --shadow-sm:       0 0 0 1px rgba(11,16,32,0.05);
  --shadow-card:     0 0 0 1px rgba(11,16,32,0.05), 0 2px 8px rgba(11,16,32,0.06);
  --shadow-float:    0 0 0 1px rgba(11,16,32,0.05), 0 20px 25px -5px rgba(11,16,32,0.10), 0 8px 10px -6px rgba(11,16,32,0.10);
  --shadow-elevated: 0 0 0 1px rgba(11,16,32,0.05), 0 4px 24px rgba(11,16,32,0.08);
  --shadow-modal:    0 0 0 1px rgba(11,16,32,0.06), 0 24px 80px rgba(11,16,32,0.18);
}

/* ── 2. Theme-independent primitives, and 3. legacy aliases ──────────────── */
:root {
  /* Type: Bricolage Grotesque for UI and display, JetBrains Mono for labels,
     numbers in tables/tiles and timestamps. Bricolage's figures are
     proportional by default: anything numeric that aligns or updates sets
     font-variant-numeric: tabular-nums (see "Tabular figures" below). */
  /* Fallbacks after Bricolage are the ones the app has always used (the old
     workbench stack): -apple-system / Segoe UI, else the platform sans-serif.
     Not system-ui: on Linux it resolves to a wider face than sans-serif, and
     the PDF page caps and the 360px select-fit checks are measured on these
     fallbacks (the test shell never loads web fonts). */
  --font-sans: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The primary call to action ("New analysis", Sign in): the same in both
     themes. #0b1020 on #14b8a6 is 7.6:1. */
  --cta:       #14b8a6;
  --cta-hover: #5eead4;
  --cta-ink:   #0b1020;

  /* Strand channels — the colour of the brand. */
  --ch-visual:   #a855f7;
  --ch-auditory: #14b8a6;
  --ch-language: #6366f1;
  --ch-memory:   #c084fc;

  /* Emotion shown, each fill with the ink that reads on it. */
  --emo-curiosity: #14b8a6; --emo-curiosity-ink: #0b1020;
  --emo-joy:       #a855f7; --emo-joy-ink:       #0b1020;
  --emo-calm:      #4f46e5; --emo-calm-ink:      #ffffff;
  --emo-neutral:   #64748b; --emo-neutral-ink:   #ffffff;
  --emo-pride:     #c084fc; --emo-pride-ink:     #0b1020;

  /* Things laid over media (a thumbnail, a video), whatever the theme. */
  --on-media-bg:  rgba(11,16,32,0.72);
  --on-media-ink: #eceff7;
  --media-bg:     #070a14;   /* video letterbox */
  --scrim:        rgba(5,8,18,0.6);

  /* Radii: panel 14 · table 12 · button/input/nav 8 · badge 5 · modal 18 */
  --r-sm:    8px;
  --r-md:    12px;
  --r-el:    14px;
  --r-lg:    14px;
  --r-xl:    18px;
  --r-input: 8px;
  --r-badge: 5px;
  --r-pill:  9999px;

  /* Legacy aliases (layer 3). */
  --desk:        var(--bg);
  --surface:     var(--card);
  --surface-2:   var(--panel2);
  --glass:       var(--card);
  --glass-light: var(--panel2);
  --bg-1:        var(--panel2);
  --bg-2:        var(--chip);
  --panel:       var(--card);
  --panel-line:  var(--line);
  --panel-ink:   var(--ink);
  --panel-mut:   var(--ink3);
  --track:       var(--line2);
  --tick:        var(--ink4);
  --line-2:      var(--line);
  --line-3:      var(--line2);
  --line-s:      var(--line);
  --ink-2:       var(--ink2);
  --ink-3:       var(--ink3);
  --ink-4:       var(--ink4);
  --black:       var(--btnInk);   /* the ink that reads on an --ink fill */
  --btn-hover:   var(--ink2);
  --acc:         var(--teal);
  --accent:      var(--teal);
  --aurora-1:    var(--teal);
  --aurora-2:    var(--teal);
  --aurora-amber: var(--warn);
  --green:       var(--teal);
  --amber:       var(--warn);
  --red:         var(--bad);
  --green-soft:   var(--teal-bg);
  --green-border: var(--teal-border);
  --amber-soft:   var(--warn-bg);
  --amber-border: var(--warn-border);
  --red-soft:     var(--bad-bg);
  --red-border:   var(--bad-border);
  --acc-soft:     var(--chip);
  --acc-border:   var(--line2);
  /* The one accent card (readout verdict, the "what" note): a purple wash. */
  --blush:  var(--purple-bg);
  --sienna: var(--purple);
  /* The one product gradient (progress), strand visual → auditory. */
  --spark:  var(--ch-visual);
  --ember:  var(--ch-auditory);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--desk);
  color: var(--ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
  transition: background 200ms ease, color 200ms ease;
}
::selection { background: #14b8a6; color: #0b1020; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--tick); }

/* Editorial theme is flat paper — no ambient glow or grain. */
body::before, body::after { content: none; display: none; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ── Tabular figures ──────────────────────────────────────────────────────
   Bricolage Grotesque's digits are proportional by default (advances vary
   ~2x between "1" and "0"), so a column of numbers, a KPI that updates or a
   score beside another would jitter. Everything numeric that aligns takes
   the font's tnum feature. Prose keeps proportional figures. */
table, .table, .versus-table, .ss-table,
.badge, .tile-val, .tile-sub, .rc-num, .versus-card .v, .br-score, .ad-scores b,
.hm-kpi-value, .hm-num, .hm-score b, .hm-mono, .hm-time, .lb-score b,
.p-delta, .sidebar-nav-badge, .sub-tab .n, .xq-count, .dna-sphere-core b,
.vid-score, .fb-score, .cr-tier, .cr-meta, .rp-delta, .lvl-pill, .bulk-metrics b,
.meta-row .mr-v, .copy-card .cc-scores b, .import-summary b {
  font-variant-numeric: tabular-nums;
}

/* ─── Tab Content ─── */
.tab-content { display: none; animation: fadeIn 0.28s ease-out; }
.tab-content.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Page header ─── (shared PAGE KIT, stage C: every page that is not Home,
   the Library or a Run page opens with it; it used to be restyled in
   css/workbench-redesign.css, which loads later and won at equal specificity)
   The anatomy of Home's and the Library's headers: the group as a mono kicker
   ("ANALYSE"), the page title at 28px/400, one line of description in --ink2,
   the page's own actions on the right. */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap; margin: 0 0 18px;
}
.page-header-content { display: grid; gap: 6px; min-width: 0; flex: 1 1 420px; }
.page-header-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3);
}
.page-header h1 {
  margin: 0; font-family: var(--font-sans); font-size: 28px; font-weight: 400;
  letter-spacing: -0.035em; line-height: 1.15; color: var(--ink);
}
/* The old headers set a "two-tone" word in an <em>; the design has one ink. */
.page-header h1 em { font-style: normal; font-weight: inherit; color: inherit; -webkit-text-fill-color: currentColor; }
.page-header p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink2); max-width: 78ch; text-wrap: pretty; }
.page-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 899.98px) { .page-header h1 { font-size: 24px; } }
/* (C3) On a phone the actions take their own row and may shrink to it (a
   form in them — Boards' Create board — was 9px wider than a 390px screen). */
@media (max-width: 600px) { .page-header-actions { flex: 1 1 100%; flex-shrink: 1; min-width: 0; max-width: 100%; } }

/* ─── Cards — the design's panel surface (--card on a --line hairline,
   radius 14, as Home's and the Run page's panels) ─── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  transition: background 160ms ease;
  position: relative;
  box-shadow: none;
}
.card::before { content: none; }
.card h2, .card h3 { color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
.card h2 { font-size: 17px; line-height: 1.35; }
.card h3 { font-size: 15px; line-height: 1.4; }

/* ─── Headings — serif display for h1, fine-grained sans below ─── */
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--ink); }
h1 { font-size: 38px; font-weight: 600; letter-spacing: -0.027em; line-height: 1.15; }
h2 { font-size: 22px; font-weight: 480; letter-spacing: -0.015em; line-height: 1.3; }
h3 { font-size: 16px; font-weight: 480; letter-spacing: -0.009em; line-height: 1.4; }
h4 { font-size: 14.5px; font-weight: 450; line-height: 1.4; }

/* ─── Buttons — the design's (PAGE KIT): the Run page's and the Library's
   buttons (.run-btn, .lib-btn) under the class every other page uses. Outline
   on --line2 by default; primary = --btn/--btnInk; the aurora slot is the
   teal call to action (New analysis-class actions only). ─── */
.btn {
  min-height: 30px; padding: 6px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  box-shadow: none;
}
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Primary = the design's --btn (ink) on --btnInk. */
.btn-primary { background: var(--btn); color: var(--btnInk); border-color: var(--btn); }
.btn-primary:hover { background: var(--btn); opacity: 0.88; }
.btn-primary:active { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Aurora slot = the teal call to action (#0b1020 on #14b8a6, 7.6:1). */
.btn-aurora { background: var(--cta); color: var(--cta-ink); border-color: var(--cta); }
.btn-aurora:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn-aurora:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line2); }
.btn-secondary:hover { background: var(--hover); }

.btn-ghost { background: transparent; color: var(--ink2); border-color: transparent; }
.btn-ghost:hover { background: var(--hover); color: var(--ink); }

.btn-small { min-height: 26px; padding: 4px 10px; font-size: 12px; }
.btn-xs    { min-height: 22px; padding: 2px 8px; font-size: 11px; }

/* ─── Form Elements ─── */
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-label {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.1em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--desk);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--font-sans);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}
select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8199' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
select option { background: var(--bg-1); color: var(--ink); }
label { color: var(--ink-2); font-size: 14px; font-weight: 500; }

/* ─── Tables ─── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead { border-bottom: 1px solid var(--line); }
.table th {
  padding: 8px 14px; text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.09em;
  cursor: default; user-select: none; white-space: nowrap;
}
/* The pointer is a promise: only a header that sorts makes it. */
.table th.sortable { cursor: pointer; }
.table th.sortable:hover { color: var(--ink-2); }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.is-null { color: var(--ink-3); }
.creative-table td { white-space: nowrap; }
.creative-table td:first-child { white-space: normal; min-width: 260px; max-width: 320px; overflow-wrap: anywhere; }
/* The name stays put while the wide set scrolls, or the row loses its identity. */
.creative-table th:first-child, .creative-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.table th.sortable:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.creative-table tbody tr:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.creative-table .ct-actions { text-align: right; }
.creative-table .lb-score { align-items: flex-end; }
.table th.sortable::after  { content: ' ↕'; opacity: 0.35; }
.table th.sort-asc::after  { content: ' ↑'; opacity: 1; color: var(--aurora-1); }
.table th.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--aurora-1); }
.table td { padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background 100ms ease; }
.table tbody tr:hover { background: var(--hover); }

/* ─── Badges ─── (PAGE KIT: the design's badge — mono 11px on a tint, no
   border, radius 5; Mid is indigo, as the tier chip everywhere else) */
.badge {
  display: inline-block; padding: 2px 7px; border-radius: var(--r-badge);
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.35;
  letter-spacing: 0; text-transform: none; border: 0; white-space: nowrap;
  background: var(--chip); color: var(--ink2);
}
.badge-high   { background: var(--teal-bg);   color: var(--teal); }
.badge-mid    { background: var(--indigo-bg); color: var(--indigo); }
.badge-low    { background: var(--bad-bg);    color: var(--bad); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }
.badge-teal   { background: var(--teal-bg);   color: var(--teal); }

/* ─── Progress Bar — violet→ember spark, the one product-visual gradient ─── */
.progress-bar { width: 100%; height: 3px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--spark), var(--ember)); border-radius: var(--r-pill); transition: width 0.4s ease; }
.progress-bar-indeterminate { animation: pb-indeterminate 1.15s ease-in-out infinite; will-change: transform; }
@keyframes pb-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* ─── Accordions ─── */
.accordion { border: none; overflow: hidden; }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
  padding: 13px 0; background: transparent; border: none; cursor: pointer; width: 100%;
  text-align: left; font-weight: 600; color: var(--ink); transition: color 140ms ease;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; font-family: var(--font-sans);
}
.accordion-header:hover { color: var(--ink-3); }
.accordion-content { padding: 0 0 14px; display: none; }
.accordion-content.active { display: block; }

/* ─── Dropzone ─── */
.dropzone {
  border: 1px dashed var(--line-3); border-radius: var(--r-lg);
  padding: 44px 24px; text-align: center; cursor: pointer;
  transition: all 200ms ease; background: transparent;
  min-height: 160px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
}
.dropzone:hover, .dropzone.active {
  border-color: var(--ink);
  background: var(--card);
}

/* Settings is a native <dialog class="nl-dialog"> now (SHELL, above). */

/* ─── Charts ─── */
.chart-container { position: relative; height: 400px; margin-bottom: 24px; }
.chart-container.small { height: 300px; }

/* ─── Sub-tabs ─── (PAGE KIT: the Library's Creatives | Creators tabs —
   12px, --ink3, an ink underline under the open one, 20px apart) */
.sub-tabs {
  display: flex; gap: 4px 20px; border-bottom: 1px solid var(--line);
  margin-bottom: 14px; flex-wrap: wrap;
}
.sub-tab {
  padding: 8px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
  background: transparent; color: var(--ink3); cursor: pointer; white-space: nowrap;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  position: relative; transition: color 140ms ease;
}
.sub-tab:hover { color: var(--ink); }
.sub-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.sub-tab .n { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--chip); color: var(--ink2); margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE KIT (stage C) — the shared anatomy of every page that is not Home, the
   Library or a Run page, cut from those three (the CANONICAL components):
     .page-header            kicker · title · description · actions (above)
     .pg-controls/.pg-field  the controls row: mono label over a 34px control
     .pg-panel               a panel: .pg-ph header row (title, .pg-meta on the
                             right) over hairlines, .pg-pb body, .pg-foot note
     .pg-table-wrap          a table in the Library's style, scrolling inside
                             its own wrapper with the first column pinned
     .pg-kpis/.pg-kpi        a row of tiles (Home's Analyst tiles)
     .pg-seg                 a segmented control (Home's Briefing | Analyst)
     .pg-note/.pg-empty      a state line; an empty / failed panel body
     .pg-count               (C2) the Library's mono count line under a title
     .pg-field.is-grow       (C2) a field that takes the rest of its row
     textarea.pg-input       (C2) a multi-line control in the kit's style
     .pg-field.is-stack      (C3) label OVER its control, full width — a form
                             in a narrow panel (Add a user); .pg-hint under it
     .pg-check               (C3) a checkbox with its words (teal accent)
     .pg-note.is-ok          (C3) a note that something worked (teal tint)
     .pg-gate                (C3) one panel for a page a role cannot use
                             ("Admins only.") or whose module did not load
     .pg-ph-id               (C3) a panel header's title block: h2 + sub lines
     .pg-empty.is-center     (C3) a whole-panel empty state, centred, with a
                             .pg-empty-h line (Market's .mk-empty is the same)
     .pg-status              (C3) the status line under a form (role=status;
                             Market's .mk-status is the same)
     details.pg-panel        (C3) a panel that folds: its <summary class=
                             "pg-ph"> is the header row, with a chevron
     .btn-danger             (C3) a destructive action (Delete, Remove)
     .pg-steps               (C3) a short list of steps with a state dot each
                             ([data-state=waiting|active|done|error])
     .btn, .card, .badge, .sub-tabs  restyled in place above
   Page sections below use these and add only what is their own.
   ═══════════════════════════════════════════════════════════════════════════ */
/* One column that never grows past the content box (C3): a grid's auto
   column takes its widest child's min-content, so one wide control in a
   header pushed every panel off a 360px screen. */
.pg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.pg > .page-header { margin: 0; }
.pg-grid { display: grid; gap: 14px; min-width: 0; align-items: start; }
.pg-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.pg-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* Controls row. Each label beside its own control in the Library's mono caps
   ("SORT  Most recent"), the control the design's 34px (--line2 hairline,
   radius 8, 13px). A field that cannot fit whole on its row wraps as one
   piece; on a phone the control drops under its label and takes the row. */
.pg-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; }
.pg-field { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.pg-field > label, .pg-lbl {
  font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink3); white-space: nowrap;
}
.pg-controls select, .pg-controls input[type="text"], .pg-controls input[type="url"],
.pg-controls input[type="search"], .pg-controls input[type="number"],
/* Element-qualified (0,1,1), not a bare .pg-input (0,1,0): the global
   input[type="text"|"email"…] rule (Form Elements, above) is 0,1,1 and won,
   so a lone field (Boards' New board name, Team & access's Email) drew 15px
   on the page background. Equal specificity, later in the file, wins. */
input.pg-input, select.pg-input, textarea.pg-input {
  width: auto; min-width: 0; max-width: 100%; height: 34px; margin: 0; padding: 0 11px;
  border: 1px solid var(--line2); border-radius: var(--r-sm); background-color: var(--card); color: var(--ink);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.3; box-shadow: none;
}
.pg-controls select, select.pg-input { padding-right: 30px; background-position: right 10px center; }
.pg-controls select:focus, .pg-controls input:focus, input.pg-input:focus, select.pg-input:focus, textarea.pg-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.pg-controls select:focus-visible, input.pg-input:focus-visible, select.pg-input:focus-visible, textarea.pg-input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pg-controls .pg-gap { flex: 1 1 auto; }
.pg-controls .btn { height: 34px; }
/* (C2) A field that takes the rest of its row — a URL, a title — and a
   multi-line control in the kit's size and hairline. */
.pg-field.is-grow { flex: 1 1 320px; }
.pg-controls .pg-field.is-grow > input, .pg-controls .pg-field.is-grow > select { flex: 1 1 160px; width: auto; }
textarea.pg-input { display: block; width: 100%; height: auto; min-height: 96px; padding: 9px 11px; line-height: 1.5; resize: vertical; }
@media (max-width: 600px) {
  .pg-field { flex: 1 1 100%; }
  .pg-field > select, .pg-field > input,
  .pg-controls .pg-field.is-grow > input, .pg-controls .pg-field.is-grow > select { flex: 1 1 100%; width: 100%; }
}
/* (C2) The Library's count line under a page title ("70 of 70 creatives"). */
.page-header .pg-count, .pg-count { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; line-height: 1.4; color: var(--ink3); }

/* Panel anatomy (Home's .hm-panel, the Run page's .run-panel). */
.pg-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; overflow: hidden; }
.pg-ph {
  display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--line); min-width: 0;
}
.pg-ph h2, .pg-ph h3 {
  margin: 0; min-width: 0; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  letter-spacing: 0; line-height: 1.4; color: var(--ink);
}
.pg-ph-sub { font-weight: 400; color: var(--ink3); }
.pg-meta {
  display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); white-space: nowrap;
}
.pg-meta .btn { text-transform: none; letter-spacing: 0; }
.pg-pb { padding: 12px 14px; min-width: 0; }
.pg-pb > :first-child { margin-top: 0; }
.pg-pb > :last-child { margin-bottom: 0; }
.pg-foot { margin: 0; padding: 10px 14px 12px; font-size: 11px; line-height: 1.5; color: var(--ink3); border-top: 1px solid var(--line); }
.pg-muted { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink3); }
.pg-mono { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.pg-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }

/* State lines and empty bodies, in Home's and the Library's voice. */
.pg-note {
  display: block; margin: 0;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  font-size: 12.5px; line-height: 1.55; color: var(--ink2);
}
/* A note led by a status dot or a button: its parts in a row. */
.pg-note.is-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pg-note b { font-weight: 500; color: var(--ink); }
.pg-note.is-warn { border-color: var(--warn-border); background: var(--warn-bg); }
/* (C3) A page a role cannot use (read-only, Admins only) or whose module
   did not load: one kit panel with the sentence. */
.pg-gate { max-width: 720px; }
.pg-empty.is-bad { color: var(--bad); }
/* (C3) A note that something worked (Role updated, Invite sent). */
.pg-note.is-ok { border-color: var(--teal-border); background: var(--teal-bg); }
.pg-note.is-bad { border-color: var(--bad-border); background: var(--bad-bg); }
.pg-note.is-bad b { color: var(--bad); }
.pg-empty { margin: 0; padding: 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.pg-empty b { font-weight: 500; color: var(--ink); }

/* Tiles (Home's Analyst KPI row): hairlines between, mono label, big number. */
.pg-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.pg-kpi { display: grid; gap: 6px; align-content: start; padding: 12px 14px; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); min-width: 0; }
.pg-kpi-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.pg-kpi-value { font-size: 26px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-kpi-value small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; color: var(--ink3); margin-left: 4px; }
.pg-kpi-foot { font-size: 11px; line-height: 1.4; color: var(--ink3); overflow-wrap: anywhere; }

/* Segmented control (Home's layout switch). */
.pg-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--chip); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; }
.pg-seg button {
  padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink2);
  font-family: var(--font-sans); font-size: 12px; line-height: 1.4; cursor: pointer; white-space: nowrap;
}
.pg-seg button:hover { color: var(--ink); }
.pg-seg button[aria-pressed="true"], .pg-seg button[aria-selected="true"], .pg-seg button.is-on { background: var(--btn); color: var(--btnInk); }

/* Tables in the Library's style. The wrapper scrolls sideways (never the
   page), the first column stays put while the rest scrolls under it. */
.pg-table-wrap { position: relative; overflow-x: auto; min-width: 0; }
.pg-panel > .pg-table-wrap { border: 0; border-radius: 0; }
.pg-table-wrap > .table, .table.pg-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; color: var(--ink); background: transparent; border: 0; border-radius: 0; }
.pg-table-wrap > .table th, .table.pg-table th {
  padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--card); white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); text-align: left;
}
.pg-table-wrap > .table td, .table.pg-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink2); vertical-align: middle; background: transparent; }
.pg-table-wrap > .table th:first-child, .pg-table-wrap > .table td:first-child,
.table.pg-table th:first-child, .table.pg-table td:first-child {
  padding-left: 14px; position: sticky; left: 0; z-index: 1; background-color: var(--card);
}
.pg-table-wrap > .table th:last-child, .pg-table-wrap > .table td:last-child,
.table.pg-table th:last-child, .table.pg-table td:last-child { padding-right: 14px; }
.pg-table-wrap > .table tbody tr:last-child td, .table.pg-table tbody tr:last-child td,
.pg-table-wrap > .table tbody tr:last-child th, .table.pg-table tbody tr:last-child th { border-bottom: 0; }
.pg-table-wrap > .table td.num, .table.pg-table td.num { font-family: var(--font-mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
/* (C2) A number column's header sits over its numbers, as the Library's do. */
.pg-table-wrap > .table th.num, .table.pg-table th.num { text-align: right; }
.pg-table-wrap > .table th.sortable::after, .table.pg-table th.sortable::after { content: ''; }
.pg-table-wrap > .table th.sortable:hover::after, .pg-table-wrap > .table th.sortable:focus-visible::after,
.table.pg-table th.sortable:hover::after, .table.pg-table th.sortable:focus-visible::after { content: ' ↕'; opacity: .5; }
.pg-table-wrap > .table th.sort-asc::after, .table.pg-table th.sort-asc::after { content: ' ↑'; opacity: 1; color: var(--ink2); }
.pg-table-wrap > .table th.sort-desc::after, .table.pg-table th.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--ink2); }
.pg-table-wrap > .table th.sort-asc, .pg-table-wrap > .table th.sort-desc, .table.pg-table th.sort-asc, .table.pg-table th.sort-desc { color: var(--ink2); }
.pg-table-wrap > .table th:focus-visible, .table.pg-table th:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }
.pg-table-wrap > .table tbody tr[tabindex], .table.pg-table tbody tr[tabindex] { cursor: pointer; }
.pg-table-wrap > .table tbody tr:hover td, .table.pg-table tbody tr:hover td { background: var(--hover); }
.pg-table-wrap > .table tbody tr:hover td:first-child, .table.pg-table tbody tr:hover td:first-child { background: linear-gradient(var(--hover), var(--hover)) var(--card); }
.pg-table-wrap > .table tbody tr:focus-visible, .table.pg-table tbody tr:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
/* (Stage C fix) The row's ring is the tr's outline, which the pinned first
   cell (opaque, a stacking layer of its own) painted over: it draws its part
   of the ring itself, as the Library's pinned cells do. */
.pg-table-wrap > .table tbody tr:focus-visible td:first-child,
.table.pg-table tbody tr:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--teal), inset 0 2px 0 var(--teal), inset 0 -2px 0 var(--teal); }
.pg-table-wrap > .table td.is-null, .table.pg-table td.is-null { color: var(--ink3); }

/* (C3) A stacked field: the label over its control, the control the row's
   width — for a form in a narrow panel. Same label and control as .pg-field. */
.pg-field.is-stack { display: grid; gap: 6px; flex: 1 1 100%; align-items: stretch; }
.pg-field.is-stack > input, .pg-field.is-stack > select, .pg-field.is-stack > textarea { width: 100%; }
.pg-field.is-stack > .pg-hint { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink3); }
/* A checkbox (or radio) with its words, in the kit's body size. */
.pg-check { display: inline-flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.45; font-weight: 400; color: var(--ink2); cursor: pointer; }
.pg-check input { width: 15px; height: 15px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--teal); }

/* (C3) A panel header's title block: the title, then a line or two under it
   (a description, mono counts). */
.pg-ph-id { display: grid; gap: 3px; min-width: 0; flex: 1 1 280px; }
.pg-ph-id > p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink3); overflow-wrap: anywhere; }
.pg-ph-id > .pg-mono { color: var(--ink3); }

/* (C3) A whole-panel empty / failed state, centred (Home's and the Library's
   "No creatives match"). Market's .mk-empty (C2) is the same rule. */
.pg-empty.is-center, .mk-empty { display: grid; gap: 8px; justify-items: center; padding: 30px 18px; text-align: center; }
.pg-empty.is-center p, .mk-empty p { margin: 0; max-width: 62ch; }
.pg-empty.is-center .pg-empty-h, .mk-empty .mk-empty-h { font-size: 15px; font-weight: 500; color: var(--ink); }
.pg-empty.is-center .btn, .mk-empty .btn { margin-top: 4px; }

/* (C3) The status line under a form. Market's .mk-status (C2) is the same. */
.pg-status, .mk-status { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink3); }
.pg-status:empty { display: none; }
.pg-status.is-ok { color: var(--teal); }
.pg-status.is-bad { color: var(--bad); }
.pg-status.is-warn { color: var(--warn); }

/* (C3) A panel that folds: <details class="pg-panel"><summary class="pg-ph">.
   Closed, the header row is the whole panel (no hairline under it). */
details.pg-panel > summary.pg-ph { cursor: pointer; list-style: none; user-select: none; }
details.pg-panel > summary.pg-ph::-webkit-details-marker { display: none; }
details.pg-panel > summary.pg-ph::before {
  content: ''; flex-shrink: 0; width: 6px; height: 6px; margin: 0 2px 0 1px;
  border-right: 1.5px solid var(--ink3); border-bottom: 1.5px solid var(--ink3);
  transform: rotate(-45deg); transition: transform .15s ease;
}
details.pg-panel[open] > summary.pg-ph::before { transform: rotate(45deg); }
details.pg-panel > summary.pg-ph h2, details.pg-panel > summary.pg-ph h3 { flex: 1 1 auto; }
details.pg-panel:not([open]) > summary.pg-ph { border-bottom: 0; }
details.pg-panel > summary.pg-ph:hover { background: var(--hover); }
details.pg-panel > summary.pg-ph:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

/* (C3) A destructive action: the outline button in the bad ink. */
.btn-danger { background: transparent; color: var(--bad); border-color: var(--bad-border); }
.btn-danger:hover { background: var(--bad-bg); color: var(--bad); }

/* (C3) Steps with a state dot (an import that downloads, then analyses). */
.pg-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-steps > li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.45; color: var(--ink3); }
.pg-steps > li::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink4); box-sizing: border-box; }
.pg-steps > li[data-state="active"] { color: var(--ink2); }
.pg-steps > li[data-state="active"]::before { border-color: var(--teal); border-top-color: transparent; animation: spin 0.8s linear infinite; }
.pg-steps > li[data-state="done"] { color: var(--ink); }
.pg-steps > li[data-state="done"]::before { background: var(--teal); border-color: var(--teal); }
.pg-steps > li[data-state="error"] { color: var(--bad); }
.pg-steps > li[data-state="error"]::before { background: var(--bad); border-color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .pg-steps > li[data-state="active"]::before { animation: none; border-top-color: var(--teal); } }

/* ─── Grid ─── */
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 1024px) { .grid-2-col { grid-template-columns: 1fr; } }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--tick); }

/* ─── Spinner ─── */
.loading { opacity: 0.5; pointer-events: none; }
.spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--track); border-top-color: var(--spark);
  border-radius: 50%; animation: spin 0.72s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Text utilities ─── */
/* legacy gradient text — editorial system renders it as solid ink */
.text-gradient {
  background: none;
  background-clip: border-box; -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--ink);
}
.text-secondary { color: var(--ink-2); }
.text-muted { color: var(--ink-3); }
.text-primary { color: var(--ink); }

/* ════════════════════════════════════════════════════════════
   AUTH (stage C3) — sign in, create account, password recovery, the
   pending screen and the fail-closed screen (#authOverlay, app.html; the
   panels are switched by js/app.js). The design does not cover these
   screens, so they take the landing page's own values: the left panel is
   constant navy in both themes (#0b1020 ground, #eceff7 ink, #aab2ca body
   9:1, #8e97b3 meta 5.9:1, the strand colours), with the attention/dna
   wordmark, the landing's kicker, framing and illustrative strand. The
   right panel follows the theme and is the page kit: mono labels, the
   dialogs' field, the primary button, kit notes. All of it is here: the
   later css/workbench-redesign.css no longer styles any of it.
   ════════════════════════════════════════════════════════════ */

#authOverlay { z-index: 100; }
#authOverlay:not(.hidden) { display: flex !important; }
#authOverlay.hidden { display: none !important; }

.auth-overlay { display: flex; background: var(--bg); color: var(--ink); min-height: 100vh; min-height: 100dvh; overflow-y: auto; }

/* Left: what the product is — the landing page's panel. */
.auth-left {
  flex: 0 0 44%; position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 36px 48px 40px; background: #0b1020; color: #eceff7; border-right: 1px solid rgba(255,255,255,.08);
}
.auth-left-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; height: 100%; }
.auth-left-logo { margin-bottom: auto; }
.auth-wordmark {
  display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
  color: #eceff7; white-space: nowrap;
}
.auth-wordmark > span { color: #14b8a6; }
.auth-hero { display: grid; gap: 14px; max-width: 460px; }
.auth-kicker, .auth-hero .auth-kicker { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8e97b3; }
.auth-hero .auth-tagline { margin: 0; max-width: none; font-family: var(--font-sans); font-size: 40px; font-weight: 400; line-height: 1.08; letter-spacing: -0.04em; color: #eceff7; }
.auth-hero .auth-tagline em { font-style: normal; color: #5eead4; }
.auth-hero p { margin: 0; font-size: 14px; line-height: 1.6; color: #aab2ca; max-width: 52ch; }
/* The illustrative strand: three rows of cells in the channel colours. */
.auth-strand { margin: 0; display: grid; gap: 8px; max-width: 520px; }
.auth-strand-rows { display: grid; gap: 4px; }
.auth-strand-row { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 3px; height: 12px; }
.auth-strand-row i { display: block; border-radius: 2px; background: var(--ch); }
.auth-strand-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--font-mono); font-size: 10.5px; color: #8e97b3; }
.auth-strand-key span:not(.auth-strand-note)::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; background: var(--c); vertical-align: 0; }
.auth-features { list-style: none; padding: 0; margin: 0; display: grid; max-width: 520px; }
.auth-features li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.auth-features li:last-child { border-bottom: 1px solid rgba(255,255,255,.08); }
.auth-feat-n { flex-shrink: 0; padding-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: #8e97b3; }
.auth-features strong { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: #eceff7; }
.auth-features span { font-size: 12.5px; line-height: 1.5; color: #aab2ca; }

/* Right: the forms, in the page kit. */
.auth-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 56px; position: relative; min-width: 0; }
.auth-form-box { width: 100%; max-width: 380px; }
.auth-mobile-logo { display: none; margin-bottom: 28px; }
.auth-mobile-logo .auth-wordmark { color: var(--ink); }
.auth-mobile-logo .auth-wordmark > span { color: var(--teal); }
.auth-form-kicker { margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.auth-form-hd { margin-bottom: 22px; }
.auth-form-hd h1 { margin: 0 0 6px; font-family: var(--font-sans); font-size: 28px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.15; color: var(--ink); }
.auth-form-hd p:not(.auth-form-kicker) { margin: 0; font-size: 13px; color: var(--ink2); }
/* The two tabs: the Library's Creatives | Creators tabs (the kit's .sub-tabs). */
.auth-tabs-row { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.auth-tab {
  padding: 8px 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink3); transition: color 140ms ease;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.auth-form-content { flex-direction: column; gap: 14px; animation: fadeIn 0.25s ease-in; }
.auth-form-content.hidden { display: none !important; }
/* The dialogs' field (SHELL "Dialogs"): 14px, --line2, radius 10, on --bg. */
.auth-form-box .form-group { gap: 6px; }
.auth-form-box .form-label { font-size: 10px; font-weight: 500; color: var(--ink3); }
.auth-form-box input[type="email"], .auth-form-box input[type="password"], .auth-form-box input[type="text"] {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card); font-size: 14px;
}
.auth-form-box input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--ring); }
.auth-submit { width: 100%; min-height: 38px; margin-top: 4px; font-size: 13px; }
.auth-alt { text-align: center; }
.auth-alt .linklike, .auth-pending-note .linklike { font-size: 12.5px; }
.auth-fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink3); }
.auth-msg { margin: 0; padding: 8px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--line); }
.auth-msg.is-bad { color: var(--bad); border-color: var(--bad-border); background: var(--bad-bg); }
.auth-msg.is-ok { color: var(--ink); border-color: var(--teal-border); background: var(--teal-bg); }

/* Signed in, no workspace; sign-in could not load (fail closed). */
.auth-pending, .auth-unavailable { display: flex; flex-direction: column; gap: 12px; }
.auth-pending .auth-form-kicker, .auth-unavailable .auth-form-kicker { margin: 0; font-size: 11px; line-height: 1.4; color: var(--ink3); }
.auth-pending h2, .auth-unavailable h2 { margin: 0; font-family: var(--font-sans); font-size: 24px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.2; color: var(--ink); }
.auth-pending p, .auth-unavailable p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink2); }
.auth-pending-who { font-size: 13px; color: var(--ink2); }
.auth-pending-who strong { color: var(--ink); font-weight: 500; }
.auth-pending-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.auth-pending-actions .btn { flex: 1 1 auto; min-height: 38px; font-size: 13px; text-decoration: none; }
.auth-pending-note { font-size: 12.5px; color: var(--ink3); }

@media (max-width: 860px) {
  .auth-left { display: none; }
  .auth-right { align-items: flex-start; padding: 40px 20px; }
  .auth-mobile-logo { display: block; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .auth-left { padding-top: 28px; padding-bottom: 28px; }
  .auth-left-content { gap: 20px; }
  .auth-hero .auth-tagline { font-size: 34px; }
}

/* ─── Custom Radio Buttons — tab pills ─── */
.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-option {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer; transition: all 160ms ease;
  font-size: 13px; color: var(--ink-2); font-weight: 500;
}
.radio-option:hover { border-color: var(--line-3); background: var(--hover); }
.radio-option.selected { border-color: var(--ink); background: var(--card); color: var(--ink); }
.radio-option input[type="radio"] { display: none; }
.radio-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ink-4); transition: all 160ms ease; flex-shrink: 0; }
.radio-option.selected .radio-dot { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px var(--card); }

/* ════════════════════════════════════════════════════════════
   SHELL — the design's App frame (Attention DNA - App.dc.html header/aside):
   a 224px sidebar (wordmark, workspace, New analysis, grouped nav, account)
   and a sticky 52px top bar (breadcrumbs, search, Dark/Light) over the page.
   The window scrolls; below 900px the sidebar is an off-canvas drawer.
   All of it lives in .sidebar / #appTopbar (both hidden in print) or carries
   .no-print, so none of it reaches paper. This is the only place the shell is
   styled: css/workbench-redesign.css no longer touches it (it loads later and
   used to override these rules, media queries included).
   ════════════════════════════════════════════════════════════ */

/* Anchors and scrollIntoView land below the sticky top bar, not under it. */
html { scroll-padding-top: 64px; }

.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--btn); color: var(--btnInk);
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 10px; color: var(--btnInk); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.app-layout { display: flex; min-height: 100vh; position: relative; z-index: 1; }

/* ─── Sidebar ─── */
.sidebar {
  width: 224px; min-width: 224px; flex-shrink: 0;
  position: sticky; top: 0; z-index: 30;
  height: 100vh; height: 100dvh;
  /* A column, not a 4-row grid: a viewer has no New analysis, and a grid
     shifted the nav into an auto row and the account into the stretchy one
     (cut off at the bottom on short screens). display:none children are not
     flex items, so a missing one leaves no row and no gap behind. */
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 12px;
  background: var(--side); border-right: 1px solid var(--line);
  font-size: 13px; color: var(--ink);
}
.sb-head, .sb-cta, .sb-foot { flex-shrink: 0; }
.sb-head { display: grid; gap: 12px; min-width: 0; }
.sb-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-wordmark {
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
  color: var(--ink); text-decoration: none;
}
.sidebar-wordmark span { color: var(--teal); }
.sidebar-wordmark:hover { color: var(--ink); }
.sb-close {
  display: none; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink2); cursor: pointer;
}
.sb-close:hover { background: var(--hover); color: var(--ink); }

/* The workspace: one shared library per deployment, and the account's role. */
.sb-workspace {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px; border-radius: 10px; border: 1px solid var(--line);
}
/* The landing page's strand mark (index.html's favicon): three rounded bars
   in the channel colours on an inset tile. Decorative; the name says it. */
.sb-ws-mark {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: grid; align-content: center; justify-items: center; gap: 2px;
  background: var(--panel2); border: 1px solid var(--line);
}
.sb-ws-mark i { display: block; width: 14px; height: 3px; border-radius: 2px; }
.sb-ws-mark i:nth-child(1) { background: var(--ch-visual); }
.sb-ws-mark i:nth-child(2) { background: var(--ch-language); }
.sb-ws-mark i:nth-child(3) { background: var(--ch-auditory); }
.sb-ws-text { display: grid; flex: 1; min-width: 0; }
.sb-ws-name, .sb-ws-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-ws-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.sb-ws-sub { font-size: 11px; color: var(--ink3); display: flex; align-items: center; gap: 6px; min-height: 18px; }
.sb-workspace .role-pill { flex-shrink: 0; font-size: 9.5px; padding: 1px 7px; justify-self: start; }
.sb-workspace .role-pill[hidden] { display: none; }

/* New analysis: the design's teal call to action, N as its shortcut. */
.sb-cta {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 10px;
  background: var(--cta); color: var(--cta-ink);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; text-align: left;
  cursor: pointer; transition: background 140ms ease;
}
.sb-cta:hover { background: var(--cta-hover); }
/* Full-opacity ink: at .7 the N measured 4.44:1 on the teal. */
.sb-cta kbd { font-family: var(--font-mono); font-size: 11px; font-weight: 400; background: none; border: 0; padding: 0; color: inherit; }
.sb-cta[hidden] { display: none; }

/* Grouped navigation. Role gating sets `hidden`; the attribute must win over
   the item's own display (it did not, and members saw Admin).
   17 items do not fit every screen (the design has 6). The nav takes the
   space between the CTA and the account and scrolls inside it, with a thin
   scrollbar and a fade at the bottom edge while there is more below (the
   .has-more class is set by js/app.js updateNavCue). 4px of padding all
   round keeps the first and last items' focus rings inside the scroll box. */
.sb-nav {
  display: grid; gap: 10px; align-content: start;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  margin: -4px; padding: 4px;
}
.sb-nav.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
/* When the whole rail scrolls (short screens, the phone drawer) the fade is
   painted, not masked: a mask would make the drawer's own background
   see-through at the bottom and show the page behind it. A sticky veil at
   the end of the column, in the rail's colour, overlapping what is above it.
   Its margins cancel the column gap and its own height exactly, so adding
   it never changes how far the rail scrolls. */
.sidebar.has-more::after {
  content: ''; display: block; flex-shrink: 0; pointer-events: none;
  position: sticky; bottom: -14px; height: 44px; margin: -44px -12px -14px;  /* -14px: past the rail's bottom padding, to the edge */
  background: linear-gradient(to bottom, transparent, var(--side));
}
.sb-group { display: grid; gap: 2px; }
.sb-group-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3);
  padding: 0 8px 4px;
}
.sidebar-nav-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 6px 8px; margin: 0;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink2); font-family: var(--font-sans); font-size: 13px; font-weight: 450;
  text-align: left; white-space: nowrap; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.sidebar-nav-item:hover { background: var(--hover); color: var(--ink); }
/* The ring sits inside the item, so the scroll box never clips it. */
.sidebar-nav-item:focus-visible { outline-offset: -2px; }
.sidebar-nav-item.active { background: var(--chip); color: var(--ink); }
.sidebar-nav-item[hidden], .sb-group[hidden], .sb-routes-only[hidden] { display: none !important; }
/* The design's tag slot: a count, or an em dash for a kind that failed. */
.sidebar-nav-badge {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--ink3);
}

/* The account, pinned to the bottom of the rail. */
.sb-foot { display: grid; gap: 12px; min-width: 0; margin-top: auto; }
/* Short screens and the phone drawer: the whole rail scrolls, so a group
   label is never stranded from its items and the account follows the nav
   instead of covering it (a 768px laptop hid Benchmark, Team & access and
   Settings below a nav that showed no sign of scrolling). */
@media (max-height: 820px) {
  .sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
  .sb-nav { flex: 0 0 auto; overflow: visible; }
  .sb-nav.has-more { -webkit-mask-image: none; mask-image: none; }
}
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 4px 6px; min-width: 0; }
.sidebar-user-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--indigo); color: var(--btnInk);
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
}
.sidebar-user-info { display: grid; flex: 1; min-width: 0; }
.sidebar-user-name, .sidebar-user-role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.sidebar-user-name { font-size: 13px; color: var(--ink); }
.sidebar-user-role { font-size: 11px; color: var(--ink3); }
.sidebar-icon-btn {
  width: 28px; height: 28px; padding: 0; flex-shrink: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink3); cursor: pointer;
}
.sidebar-icon-btn:hover { background: var(--hover); color: var(--ink); }

/* ─── Main column: sticky top bar over the page ─── */
.app-column { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  position: sticky; top: 0; z-index: 25;
  height: 52px; flex-shrink: 0; min-width: 0;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.tb-menu, .tb-search-btn {
  display: none; place-items: center; width: 36px; height: 36px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink2); cursor: pointer;
}
.tb-menu:hover, .tb-search-btn:hover { background: var(--hover); color: var(--ink); }
.tb-crumbs {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  font-size: 13px; white-space: nowrap; overflow: hidden;
}
.tb-crumb-group, .tb-sep { color: var(--ink3); flex-shrink: 0; }
/* The page crumb is text, not a control: the one thing it could do (close
   an open readout) is unreachable, because the readout is modal. */
.tb-crumb-page { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb-crumbs.has-sub .tb-crumb-page { color: var(--ink3); flex-shrink: 0; }
.tb-crumb-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-crumb-sub[hidden] { display: none; }
#crumbSub { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }

.tb-search {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  width: min(300px, 30vw); height: 32px; padding: 0 10px; margin: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--chip); color: var(--ink3);
}
.tb-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--ring); }
.tb-search > svg { flex-shrink: 0; }
.tb-search input[type="search"] {
  flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink);
}
.tb-search input[type="search"]::placeholder { color: var(--ink3); }
.tb-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.tb-search kbd {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink3);
  background: none; border: 0; padding: 0; flex-shrink: 0;
}
.tb-search input:focus ~ kbd { visibility: hidden; }
.tb-search-close {
  display: none; place-items: center; width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink2); cursor: pointer;
}

/* The two-button theme group (the same group sits in Settings). */
.tb-theme {
  display: inline-flex; flex-shrink: 0; padding: 3px; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--chip);
}
.tb-theme button {
  padding: 4px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--ink2); font-family: var(--font-sans); font-size: 12px; cursor: pointer;
}
.tb-theme button:hover { color: var(--ink); }
.tb-theme button[aria-pressed="true"] { background: var(--btn); color: var(--btnInk); }

/* ─── The page ─── */
/* The window scrolls. .main-content keeps overflow-y:auto (so content that
   is too wide scrolls inside it rather than widening the page); the sticky
   top bar is its sibling, outside that scroll container, so it sticks. */
.main-content { flex: 1; min-width: 0; overflow-y: auto; min-height: calc(100vh - 52px); background: var(--bg); }
.content-inner { max-width: 1600px; width: 100%; margin: 0; padding: 20px 20px 48px; }
#appMain:focus, #appMain:focus-visible { outline: none; }

/* ─── Dialogs: New analysis, Settings ─── */
.nl-dialog {
  width: min(540px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; overflow: auto;
  border: 1px solid var(--line2); border-radius: var(--r-xl);
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-modal);
}
/* Literal first: some engines do not inherit custom properties on ::backdrop. */
.nl-dialog::backdrop { background: rgba(5,8,18,.6); background: var(--scrim, rgba(5,8,18,.6)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nl-dialog-panel { display: grid; gap: 18px; padding: 20px; }
.nl-dialog [hidden] { display: none !important; }
.nl-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nl-dialog-head h2 { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); }
.nl-dialog-esc {
  border: 0; background: none; padding: 4px 6px; border-radius: 6px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink3);
}
.nl-dialog-esc:hover { color: var(--ink); background: var(--hover); }
.nl-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.nl-dialog-actions .btn { min-height: 36px; padding: 8px 14px; font-size: 13px; }
.na-sources { display: flex; gap: 6px; flex-wrap: wrap; }
/* 10px sides, not the design's 12: the design has four pills, this row has
   five (Copy), and at 12px the five overran the 540px dialog by 1px, so Copy
   wrapped alone onto a second line. 10px leaves ~19px of slack for a wider
   fallback face; the row still wraps at phone width. */
.na-src {
  padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--line2);
  background: transparent; color: var(--ink2); font-family: var(--font-sans); font-size: 12.5px; cursor: pointer;
}
.na-src:hover { color: var(--ink); background: var(--hover); }
/* The source the link was read as, when no source was chosen. */
.na-src.is-detected { border-color: var(--teal); color: var(--ink); }
.na-src[aria-pressed="true"] { background: var(--btn); color: var(--btnInk); border-color: var(--btn); }
.na-field { display: grid; gap: 6px; margin: 0; }
.na-field[hidden] { display: none; }
.na-label, label.na-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3);
}
/* One field rule for every dialog (New analysis, Settings): Settings' fields
   used to fall through to the legacy global input (15px, 44px tall). */
.nl-dialog input[type="text"], .nl-dialog input[type="password"], .nl-dialog textarea {
  padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line2);
  background: var(--bg); font-size: 14px;
}
.nl-dialog input[type="text"]:focus, .nl-dialog input[type="password"]:focus, .nl-dialog textarea:focus { border-color: var(--teal); }
.na-dialog .qi-kind { margin: -8px 0 0; }
.na-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink3); }
.na-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--ink3); }
.na-more .linklike { font-size: 12.5px; }
/* Settings (stage C3): its rows are a panel's sections — a hairline between
   each, the dialog's mono label over the row's content. */
.set-body { display: grid; gap: 0; border-top: 1px solid var(--line); }
.set-row { display: grid; gap: 8px; padding: 14px 0; }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row[hidden] { display: none; }
.set-row .pg-check { margin-top: 2px; }
.set-pw .nl-dialog-actions { justify-content: flex-start; }
.set-who { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink2); }
.set-row .tb-theme { justify-self: start; }
.set-msg { font-size: 12.5px; }

/* ─── Sign-in could not load: fail closed — styled with the other sign-in
   screens in "AUTH" (stage C3). ─── */

/* ─── Phone: the sidebar becomes a drawer (< 900px) ─── */
@media (max-width: 899.98px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
    width: min(300px, 86vw); min-width: 0; height: 100vh; height: 100dvh;
    transform: translateX(-105%); visibility: hidden;
    transition: transform 200ms ease, visibility 0s linear 200ms;
    box-shadow: var(--shadow-modal);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  }
  .sb-nav { flex: 0 0 auto; overflow: visible; }
  .sb-nav.has-more { -webkit-mask-image: none; mask-image: none; }
  .app-layout.drawer-open .sidebar { transform: none; visibility: visible; transition: transform 200ms ease; }
  .sb-close { display: grid; }
  .drawer-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(5,8,18,.6); background: var(--scrim); }
  .app-topbar { gap: 8px; padding: 0 10px; }
  .tb-menu, .tb-search-btn { display: grid; }
  .tb-crumb-group, .tb-crumbs > .tb-sep { display: none; }
  .tb-search { display: none; }
  .app-topbar.search-open .tb-search {
    display: flex; position: absolute; left: 10px; right: 10px; top: 9px; width: auto; z-index: 2;
    background: var(--card);
  }
  .app-topbar.search-open .tb-search kbd { display: none; }
  .app-topbar.search-open .tb-search-close { display: grid; }
  .app-topbar.search-open > :not(.tb-search) { visibility: hidden; }
  .tb-theme button { padding: 4px 8px; }
  .content-inner { padding: 16px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none !important; }
}

/* ─── Small screens (content) ─── */
@media (max-width: 768px) {
  .table { font-size: 12px; }
  .table th, .table td { padding: 9px 10px; }
  #authOverlay { padding: 16px; }
  .radio-group { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════
   HOME — route `insights` (js/home.js), the design's Home screen
   ("Attention DNA - App": Briefing and Analyst). Panels are the design's
   anatomy: --card on --line, radius 14, a 12/14 header over hairlines, mono
   10-11px labels, 13px body. Every colour is a token, so both themes follow;
   marks (DNA, bars, dots) are listed in the print block's colour-adjust list.
   ════════════════════════════════════════════════════════════ */
.hm { display: grid; gap: 14px; font-size: 13px; line-height: 1.45; color: var(--ink); min-width: 0; }
.hm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hm-hello { display: grid; gap: 2px; min-width: 0; }
.hm-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); }
.hm-head h1 { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.15; color: var(--ink); }
.hm-layout { display: flex; align-items: center; gap: 8px; }
.hm-mono-label { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }
.hm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--chip); border: 1px solid var(--line); }
.hm-seg button {
  padding: 5px 12px; border: 0; border-radius: 6px; background: transparent;
  color: var(--ink2); font-family: var(--font-sans); font-size: 12px; cursor: pointer;
}
.hm-seg button:hover { color: var(--ink); }
.hm-seg button[aria-pressed="true"] { background: var(--btn); color: var(--btnInk); }

/* The state of the data behind the page: sample data, loading, this
   browser's copy, a kind that failed. */
.hm-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  font-size: 12px; color: var(--ink2);
}
.hm-note b { font-weight: 500; color: var(--ink); }
.hm-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tier-high); flex-shrink: 0; }
.hm-note-dot.is-busy { animation: hmPulse 1.2s ease-in-out infinite; }
.hm-note-bad { border-color: var(--bad-border); background: var(--bad-bg); }
.hm-note-bad b { color: var(--bad); }
@keyframes hmPulse { 50% { opacity: .3; } }

/* Layout grids (the design's auto-fit columns). */
.hm-grid { display: grid; gap: 14px; align-items: start; min-width: 0; }
.hm-briefing { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.hm-col { display: grid; gap: 14px; min-width: 0; align-content: start; }
.hm-col-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.hm-analyst { display: grid; gap: 14px; min-width: 0; }
.hm-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: stretch; }
.hm-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: stretch; }

/* Panel anatomy. */
.hm-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; overflow: hidden; }
.hm-ph {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); min-width: 0;
}
.hm-ph h2 { margin: 0; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--ink); min-width: 0; }
.hm-sub { font-weight: 400; color: var(--ink3); }
.hm-meta {
  display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink3); white-space: nowrap;
}
.hm-meta .hm-linklike { font-family: var(--font-sans); }
.hm-mono { font-family: var(--font-mono); font-size: 11px; }
.hm-accent { color: var(--teal); }
.hm-foot { margin: 0; padding: 10px 14px 12px; font-size: 11px; line-height: 1.5; color: var(--ink3); }
.hm-empty { margin: 0; padding: 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.hm-empty b { font-weight: 500; color: var(--ink); }
.hm-failed { color: var(--bad); }
.hm-partial { margin: 0; padding: 8px 14px 10px; font-size: 11.5px; line-height: 1.5; color: var(--warn); border-top: 1px solid var(--line); }
.hm-partial-free { border-top: 0; padding: 0 2px; margin-top: -6px; }
.hm-more { margin: 0; padding: 8px 14px 10px; font-size: 11.5px; color: var(--ink3); }
.hm-skel { display: grid; gap: 10px; padding: 14px 14px 0; }
.hm-skel i { display: block; height: 10px; border-radius: 4px; background: var(--chip); width: 82%; animation: hmPulse 1.4s ease-in-out infinite; }
.hm-skel i:nth-child(2n) { width: 58%; }
.hm-skel i:nth-child(3n) { width: 70%; }
.hm-skel-v { display: inline-block; width: 48px; height: 22px; border-radius: 4px; background: var(--chip); }

/* Buttons and links inside panels. */
.hm-btn {
  padding: 5px 10px; border: 1px solid var(--line2); border-radius: 6px; background: transparent;
  color: var(--ink); font-family: var(--font-sans); font-size: 12px; line-height: 1.4; white-space: nowrap; cursor: pointer;
}
.hm-btn:hover { background: var(--hover); }
.hm-btn:disabled { opacity: .55; cursor: default; }
.hm-btn-strong { background: var(--btn); border-color: var(--btn); color: var(--btnInk); }
.hm-btn-strong:hover { background: var(--btn); opacity: .88; }
.hm-linklike {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 12px; color: var(--teal); text-align: left;
}
.hm-linklike:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Since your last visit. */
.hm-events { list-style: none; margin: 0; padding: 0; }
.hm-event {
  display: grid; grid-template-columns: 48px 8px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.hm-events .hm-event:last-child { border-bottom: 0; }
.hm-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); padding-top: 2px; white-space: nowrap; }
.hm-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--ink4); }
.hm-dot-import   { background: var(--ch-auditory); }
.hm-dot-ads      { background: var(--tier-mid); }
.hm-dot-analysed { background: var(--ch-visual); }
.hm-dot-failed   { background: var(--tier-low); }
.hm-dot-stopped  { background: var(--warn); }
.hm-event-text { display: grid; gap: 3px; min-width: 0; }
.hm-event-title { font-weight: 500; color: var(--ink); }
.hm-event-body { color: var(--ink2); line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.hm-event-body b { font-weight: 500; color: var(--ink); }

/* Latest analysed: the design's run rows, on real columns. The identity
   column takes every pixel the fixed columns leave (the DNA bar is a fixed
   64px, not a share), and the name wraps to two lines: names are
   one_line_summary sentences, and one ellipsised line cut every one of them
   (and the analysed time at the end of the sub-line) to a fragment. */
.hm-runs-head, .hm-run {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 28px minmax(0, 1fr) 64px 32px 56px 66px 84px;
}
.hm-run-facts { display: contents; }
.hm-runs-head {
  padding: 8px 14px 6px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3);
}
.hm-runs-head .hm-run-facts > span:nth-child(n+2) { text-align: right; }
.hm-run {
  width: 100%; margin: 0; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 13px; text-align: left; cursor: pointer;
}
.hm-runs .hm-run:last-child { border-bottom: 0; }
.hm-run:hover { background: var(--hover); }
.hm-thumb {
  width: 28px; height: 44px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, var(--stripe) 0 4px, transparent 4px 8px);
}
.hm-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-run-id { display: grid; gap: 2px; min-width: 0; }
.hm-run-name {
  font-weight: 500; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.hm-run-sub { font-size: 11px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Visible quantity names for the bare numbers, on phones only (the column
   header names them above 600px). */
.hm-k { display: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); }
/* Full-bleed rows: the focus ring is drawn inside, where the panel's
   rounded overflow:hidden cannot clip it. */
.hm-run:focus-visible, .hm-rank:focus-visible { outline-offset: -2px; }
/* Link-style buttons have no padding, so an inset ring ran through their
   first and last glyphs ('Open brand', 'Re-import', the run names in the
   scatter's list). They sit inside padded rows and cells (14px, 8px), so a
   ring drawn outside them is not clipped. */
.hm-comp .hm-linklike:focus-visible, .hm-sc-table .hm-linklike:focus-visible { outline-offset: 2px; border-radius: 4px; }
/* The mini Language DNA bar: the five-style mix, in the DNA colours. */
.hm-dna { display: flex; gap: 1px; height: 12px; border-radius: 2px; overflow: hidden; background: var(--chip); min-width: 0; }
.hm-dna i { display: block; height: 100%; flex-shrink: 0; }
.hm-dna.is-empty { background: none; height: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); }
.hm-num { font-family: var(--font-mono); font-size: 12px; text-align: right; }
.hm-score { display: grid; justify-items: end; line-height: 1.2; }
.hm-score b { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink); }
.hm-score small { font-size: 10px; color: var(--ink3); }
.hm-tier {
  justify-self: end; padding: 3px 7px; border-radius: var(--r-badge);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.3; white-space: nowrap;
  background: var(--chip); color: var(--ink2);
}
.hm-tier-high   { background: var(--teal-bg);   color: var(--teal); }
.hm-tier-mid    { background: var(--indigo-bg); color: var(--indigo); }
.hm-tier-low    { background: var(--bad-bg);    color: var(--bad); }
.hm-tier-failed { background: var(--warn-bg);   color: var(--warn); }
/* A tier not cut from performance (the AI's own score, or set by hand). */
.hm-tier sup { font-size: 10px; line-height: 0; margin-left: 1px; }
/* Wraps at spaces only ("views not / reported"), never inside a word. */
.hm-perf { font-family: var(--font-mono); font-size: 11px; line-height: 1.3; color: var(--ink2); text-align: right; }
/* The foot of Latest analysed: the DNA key, then what each column is. */
.hm-latest .hm-foot .hm-foot-line { display: block; }
.hm-latest .hm-foot .hm-foot-line + .hm-foot-line { margin-top: 3px; }
.hm-latest .hm-foot b { font-weight: 500; color: var(--ink2); }
.hm-dna-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 2px; color: var(--ink2); }
.hm-dna-key span { display: inline-flex; align-items: center; gap: 5px; }
.hm-dna-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* Awaiting analysis (replaces the design's fake queue). */
.hm-aw { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.hm-aw-top { display: flex; justify-content: space-between; gap: 12px; }
.hm-aw-name { font-weight: 500; }
.hm-aw-top .hm-mono { color: var(--ink2); }
.hm-aw-sub { font-size: 11px; color: var(--ink3); line-height: 1.45; }
.hm-aw-go { font-size: 11px; color: var(--ink3); }
.hm-aw-why { font-size: 11px; color: var(--ink3); }
.hm-aw-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; margin: 0; }
.hm-live { display: grid; gap: 6px; padding: 12px 14px; }
.hm-live-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; }
.hm-live-top .hm-mono { color: var(--ink2); font-weight: 400; }
.hm-live-bar { height: 4px; border-radius: 2px; background: var(--line2); overflow: hidden; }
.hm-live-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ch-visual), var(--ch-language), var(--ch-auditory)); transition: width .6s; }
.hm-live-note { font-size: 11px; color: var(--ink3); }

/* A pattern in your library. */
.hm-pattern { display: grid; gap: 12px; padding: 14px; }
.hm-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }
.hm-pattern-line { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; text-wrap: pretty; color: var(--ink); }
.hm-pattern-line b { font-weight: 500; }
.hm-pattern h2.hm-eyebrow { margin: 0; font-weight: 400; line-height: 1.4; }
.hm-pattern-note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--ink3); }
.hm-pattern .hm-linklike { justify-self: start; }
.hm-pattern .hm-partial { margin: 0 -14px -14px; }
.hm-bars { display: grid; gap: 8px; }
.hm-bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 12px; }
.hm-bar-row > span:first-child { color: var(--ink2); }
.hm-bar-row .hm-mono { text-align: right; font-size: 12px; }
.hm-bar { display: block; height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; min-width: 0; }
.hm-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ink4); }
.hm-bar i.is-high { background: var(--tier-high); }
.hm-bar i.is-format { background: var(--ch-visual); }

/* Competitors. */
.hm-comp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.hm-comps .hm-comp:last-child { border-bottom: 0; }
.hm-comp-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-comp-new { color: var(--ink3); }
.hm-comp-new.is-new { color: var(--teal); }
.hm-comp-note { grid-column: 1 / -1; font-size: 12px; color: var(--ink3); line-height: 1.45; }
.hm-comp-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 2px; }

/* Analyst: KPI tiles. */
.hm-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.hm-kpi { display: grid; gap: 6px; align-content: start; padding: 12px 14px; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); min-width: 0; }
.hm-kpi-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.hm-kpi-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; min-height: 26px; }
.hm-kpi-value { font-size: 26px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--ink); white-space: nowrap; }
.hm-kpi-sep { color: var(--ink3); margin: 0 4px; font-size: 18px; }
.hm-nocase { text-transform: none; letter-spacing: 0; }
.hm-t-high { color: var(--teal); }
.hm-t-mid  { color: var(--indigo); }
.hm-t-low  { color: var(--bad); }
.hm-kpi-foot { font-size: 11px; line-height: 1.4; color: var(--ink3); }
.hm-spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; flex-shrink: 0; }
.hm-spark i { display: block; width: 4px; border-radius: 1px; background: var(--ink4); }
.hm-spark i.is-now { background: var(--ink3); }

/* AI score vs real performance: computeCalibration's within-creator ranks. */
.hm-scatter-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.hm-legend { display: inline-flex; gap: 12px; font-family: var(--font-sans); font-size: 11px; color: var(--ink2); flex-wrap: wrap; }
.hm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.hm-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hm-scatter { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: minmax(240px, 1fr) 22px; padding: 14px 14px 8px 6px; min-width: 0; }
.hm-sc-y { display: flex; flex-direction: column; justify-content: space-between; padding-right: 6px; text-align: right; font-family: var(--font-mono); font-size: 10px; color: var(--ink3); }
.hm-sc-plot {
  position: relative; border-left: 1px solid var(--line2); border-bottom: 1px solid var(--line2);
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 25% 100%;
}
.hm-sc-x { display: flex; justify-content: space-between; padding-top: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink3); }
/* 9px dots on a 2px card halo, nudged sideways by --dx (js/home.js
   layoutScatter) so tied ranks never stack into one solid column. */
.hm-pt {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; padding: 0; border: 0; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--card); cursor: pointer; transition: transform 120ms ease;
  transform: translateX(var(--dx, 0px));
}
.hm-pt:hover, .hm-pt:focus-visible { transform: translateX(var(--dx, 0px)) scale(1.45); z-index: 1; }
.hm-pt:focus-visible { outline-offset: 2px; }
.hm-sc-read { margin: 0; padding: 0 14px 6px 48px; min-height: 1.5em; font-size: 11.5px; line-height: 1.5; color: var(--ink2); overflow-wrap: anywhere; }
.hm-sc-list { padding: 0 14px 12px; font-size: 12px; }
.hm-sc-list > summary { cursor: pointer; color: var(--teal); width: max-content; max-width: 100%; }
.hm-sc-list > summary:hover { color: var(--ink); }
.hm-sc-tablewrap { max-height: 320px; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.hm-sc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hm-sc-table th { position: sticky; top: 0; background: var(--card); text-align: left; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.hm-sc-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink2); vertical-align: top; }
.hm-sc-table td .hm-linklike { font-size: 12px; text-align: left; }
.hm-pt-views, .hm-legend i.hm-pt-views { background: var(--tier-high); }
.hm-pt-impressions, .hm-legend i.hm-pt-impressions { background: var(--tier-mid); }
.hm-pt-longevity, .hm-legend i.hm-pt-longevity { background: var(--ch-visual); }
.hm-sc-cap { margin: 0; padding: 0 14px 12px; font-size: 11px; line-height: 1.5; color: var(--ink3); }

/* By format. */
.hm-tr {
  display: grid; grid-template-columns: minmax(0, 1.3fr) 36px 44px minmax(80px, 1fr) 58px; gap: 10px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.hm-th { padding: 8px 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); }
.hm-tr > :nth-child(2), .hm-tr > :nth-child(3), .hm-tr > :nth-child(5) { text-align: right; }
.hm-tr .hm-mono { font-size: 12px; }
.hm-tr .is-muted { color: var(--ink3); }
.hm-tr.is-unranked .hm-fmt-name { color: var(--ink2); }
.hm-fmt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-fmt-name small { font-size: 10.5px; color: var(--ink3); }
.hm-fmt-score { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hm-fmt-score .hm-bar { flex: 1; height: 6px; border-radius: 3px; }
.hm-fmt-score .hm-mono { width: 24px; text-align: right; font-size: 11px; }
.hm-format .hm-foot { border-top: 0; }

/* Highest / lowest AI score. */
.hm-rank {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 34px 34px; gap: 10px; align-items: center; width: 100%;
  margin: 0; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  color: var(--ink); font-family: var(--font-sans); font-size: 12.5px; text-align: left; cursor: pointer;
}
.hm-rank:hover { background: var(--hover); }
.hm-rank-n { color: var(--ink3); }
/* Two lines, like Latest analysed's names: one line cut 9 of 10 to a stub. */
.hm-rank-name { overflow: hidden; overflow-wrap: anywhere; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hm-rank-hook { color: var(--ink3); text-align: right; }
.hm-rank-score { text-align: right; font-size: 12px; }

/* Score distribution: one histogram per quantity, never pooled. Side by
   side, the two share a baseline: each figure is caption-over-bins and
   stretches to the row, so a caption that wraps to two lines pushes nothing
   down (it used to sit one histogram 15px below the other). */
.hm-hists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 18px; padding: 14px 14px 4px; }
.hm-hist { margin: 0; min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.hm-hist .hm-hist-bins { align-self: end; }
.hm-hist figcaption { font-size: 11px; color: var(--ink3); margin-bottom: 10px; }
.hm-hist-bins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; min-height: 150px; }
.hm-bin { display: grid; gap: 6px; justify-items: center; align-content: end; align-self: stretch; min-width: 0; }
.hm-bin i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--line2); }
.hm-hist.is-rubric .hm-bin i { background: var(--ch-language); }
.hm-hist.is-encoder .hm-bin i { background: var(--ch-auditory); }
.hm-bin-l { font-family: var(--font-mono); font-size: 10px; color: var(--ink3); white-space: nowrap; }

/* Phone and narrow panes: one column, no sideways scroll. */
@media (max-width: 899.98px) {
  .hm-head h1 { font-size: 24px; }
  .hm-kpi-value { font-size: 22px; }
}
@media (max-width: 600px) {
  .hm-event { grid-template-columns: 40px 8px minmax(0, 1fr); gap: 4px 10px; }
  .hm-event > .hm-btn { grid-column: 3; justify-self: start; margin-top: 4px; }
  .hm-runs-head { display: none; }
  .hm-run { grid-template-columns: 28px minmax(0, 1fr); row-gap: 6px; }
  .hm-k { display: inline; margin-right: -6px; }
  .hm-run .hm-thumb { grid-row: span 2; }
  .hm-run-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; grid-column: 2; min-width: 0; }
  .hm-run-facts .hm-dna { width: 48px; flex-shrink: 0; }
  .hm-run-facts .hm-score { display: flex; gap: 4px; align-items: baseline; }
  .hm-run-facts .hm-perf { margin-left: auto; white-space: nowrap; }
  .hm-tr { grid-template-columns: minmax(0, 1fr) 28px 32px minmax(44px, .8fr) 46px; gap: 8px; }
  .hm-bar-row { grid-template-columns: 70px minmax(0, 1fr) 44px; }
  .hm-ph { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-note-dot.is-busy, .hm-skel i { animation: none; }
  .hm-pt, .hm-live-bar i { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   Insights Dashboard
   ════════════════════════════════════════════════════════════ */

/* 4-tile stat row */
.insight-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 24px;
}
@media (max-width: 1100px) { .insight-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .insight-tiles { grid-template-columns: 1fr; } }

.insight-tile {
  position: relative; padding: 22px 24px 20px;
  background: var(--panel);
  border: 1px solid var(--panel-line); border-radius: var(--r-el);
  box-shadow: none; overflow: hidden;
  transition: transform 200ms ease;
}
.insight-tile:hover { transform: translateY(-2px); }
.insight-tile::before { content: none; }
/* Icon plates — quiet stone squares */
.tile-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 14px; font-size: 16px;
}
.tile-icon-violet { background: var(--acc-soft);   color: var(--acc);   border: 1px solid var(--acc-border); }
.tile-icon-teal   { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-border); }
.tile-icon-pink   { background: var(--acc-soft);   color: var(--acc);   border: 1px solid var(--acc-border); }
.tile-icon-amber  { background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-border); }
.tile-lbl { font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.03em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 600; }
/* Whisper-weight stat numbers — the editorial signature at display size */
.tile-val { font-size: 34px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; margin: 10px 0 5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tile-val.sm { font-size: 22px; letter-spacing: -0.015em; font-weight: 400; }
.tile-sub { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* What the histogram above it is drawn from — n, the quantity, the bin width. */
.tile-foot { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.tile-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; font-family: var(--font-mono);
  padding: 2px 7px; border-radius: var(--r-pill); margin-top: 6px;
}
.tile-delta-up   { color: var(--green); background: var(--green-soft); }
.tile-delta-down { color: var(--red);   background: var(--red-soft); }

/* 2-column patterns / ideas row */
.insight-row-2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-bottom: 24px; }
@media (max-width: 900px) { .insight-row-2 { grid-template-columns: 1fr; } }

.insight-panel {
  padding: 18px;
  background: var(--surface-2);
  border: none; border-radius: var(--r-lg);
  box-shadow: none; position: relative;
}
.insight-panel::before { content: none; }
.insight-panel-h {
  display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px;
}
.insight-panel-h h3 { margin: 0 0 3px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.insight-panel-h .sub { color: var(--ink-3); font-size: 11.5px; }
.insight-panel-btn {
  padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2); font-weight: 500; font-size: 11.5px; cursor: pointer;
  font-family: var(--font-sans); white-space: nowrap; transition: all 140ms;
}
.insight-panel-btn:hover { background: var(--hover); color: var(--ink); border-color: var(--line-3); }

/* Pattern rows — flat, divider-separated (clinical) */
.insight-pattern {
  padding: 13px 0; border-radius: 0;
  background: none;
  border: none; border-top: 1px solid var(--track); margin-bottom: 0;
  display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center;
  transition: none; cursor: pointer;
}
.insight-pattern:hover { transform: none; }
.insight-pattern:first-of-type { border-top: none; }
.insight-pattern:last-child { margin-bottom: 0; }
.p-icon {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 13px;
  background: var(--card); color: var(--acc);
  border: 1px solid var(--line-3);
}
.p-icon-pink { background: var(--card); color: var(--acc); border-color: var(--line-3); }
.p-icon-teal { background: var(--card); color: var(--green); border-color: var(--green-border); }
.insight-pattern h4 { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ink); }
.insight-pattern p  { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.p-delta {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  font-family: var(--font-mono);
  color: var(--ink);
  white-space: nowrap;
}

/* Idea-card styles removed with the hardcoded "Next videos to make" section
   they were written for. Nothing renders .insight-idea / .idea-* any more. */

/* Recently analyzed section */
.insight-recent {
  padding: 18px;
  background: var(--surface-2);
  border: none; border-radius: var(--r-lg);
  box-shadow: none; position: relative;
}
.insight-recent::before { content: none; }
.insight-vids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 900px) { .insight-vids { grid-template-columns: repeat(2, 1fr); } }

.insight-vid {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--card);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  cursor: pointer;
}
.insight-vid:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--line-3);
  box-shadow: var(--shadow-elevated);
}
.insight-vid:hover .vid-play-btn { opacity: 1; transform: scale(1); }

/* Thumb placeholders — warm dark, media sits on top */
.insight-thumb {
  aspect-ratio: 9/13; position: relative; overflow: hidden;
  background: var(--media-ph);
}
.insight-thumb-pink, .insight-thumb-teal, .insight-thumb-amber { background: var(--media-ph); }
.insight-thumb::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-image: repeating-linear-gradient(135deg, var(--stripe) 0 4px, transparent 4px 8px);
}
.insight-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 2;
}
/* gradient overlay for readability */
.insight-thumb::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(to top, var(--on-media-bg) 0%, transparent 50%);
  pointer-events: none;
}

/* Platform tag */
.vid-platform {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--on-media-ink);
  padding: 3px 8px; background: var(--on-media-bg); backdrop-filter: blur(8px);
  border-radius: var(--r-pill); letter-spacing: 0.06em; border: 1px solid rgba(255,255,255,0.12);
}
.vid-duration {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--on-media-ink);
  padding: 2px 7px; background: var(--on-media-bg); backdrop-filter: blur(8px);
  border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.12);
}

/* Score ring — green signal over media */
.vid-score {
  position: absolute; bottom: 10px; right: 10px; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--on-media-bg); backdrop-filter: blur(12px);
  border: 2px solid var(--tier-high);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: var(--on-media-ink);
  box-shadow: none;
}

/* Play overlay */
.vid-play-btn {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.28); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
  transform: scale(0.95);
}
.vid-play-circle {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
}

.insight-vid-body { padding: 12px 14px 15px; }
.insight-vid-body h6 {
  margin: 0 0 5px; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-vid-body .tag {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
}

/* Empty state */
.insight-empty {
  text-align: center; padding: 64px 24px; color: var(--ink-3);
}
.insight-empty .ei-icon {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.insight-empty h4 { color: var(--ink-2); margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.insight-empty p { font-size: 13px; line-height: 1.65; max-width: 400px; margin: 0 auto 20px; }
/* legacy .emoji alias */
.insight-empty .emoji { font-size: 36px; margin-bottom: 14px; display: block; }

/* ════════════════════════════════════════════════════════════
   Brain Timeline Component  (btl-*)
   ════════════════════════════════════════════════════════════ */

.btl-wrapper {
  display: flex; flex-direction: column; gap: 0;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--r-md); padding: 18px;
  color: var(--panel-ink);
}
.btl-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.btl-header-left { display: flex; align-items: center; gap: 8px; }
.btl-title { font-size: 12px; font-weight: 500; color: var(--panel-ink); letter-spacing: 0.02em; font-family: var(--font-mono); text-transform: uppercase; }
.btl-banner { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--r-sm); font-size: 12px; margin-bottom: 14px; }
.btl-banner-ok   { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-border); }
.btl-banner-warn { background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber-border); }
.btl-stats-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.btl-stat { display: flex; align-items: center; gap: 6px; background: var(--chip); border: 1px solid var(--panel-line); border-radius: var(--r-pill); padding: 5px 12px; }
.btl-stat-label { font-family: var(--font-mono); font-size: 10px; color: var(--panel-mut); }
.btl-stat-value { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--panel-ink); }
.btl-section-label { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--panel-mut); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; margin-top: 16px; }
.btl-section-label:first-of-type { margin-top: 0; }
.btl-colorscale { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--panel-mut); text-transform: none; letter-spacing: 0; }
.btl-scale-bar { width: 60px; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--cell), var(--ch-auditory)); }
.btl-scroll-box { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: 4px; }
.btl-scroll-box::-webkit-scrollbar { height: 3px; }
.btl-scroll-box::-webkit-scrollbar-track { background: var(--panel); }
.btl-scroll-box::-webkit-scrollbar-thumb { background: var(--panel-line); border-radius: 2px; }
.btl-heatmap-track { display: flex; align-items: stretch; gap: 2px; min-width: max-content; }
.btl-cell { position: relative; height: 32px; border-radius: 4px; flex-shrink: 0; cursor: default; transition: transform 0.1s; }
.btl-cell:hover { transform: scaleY(1.15); z-index: 2; }
.btl-cell-ts { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 8px; color: var(--ink2); white-space: nowrap; pointer-events: none; }
.btl-frames-track { display: flex; align-items: flex-end; gap: 4px; min-width: max-content; padding-bottom: 2px; }
.btl-frame-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.btl-frame-inner { width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--chip); border: 1px solid var(--panel-line); overflow: hidden; transition: opacity 0.2s; }
.btl-frame-slot.btl-awaiting .btl-frame-inner { opacity: 0.35; }
.btl-frame-img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.btl-frame-ts { font-family: var(--font-mono); font-size: 8px; color: var(--panel-mut); white-space: nowrap; }
.btl-frames-status { font-family: var(--font-mono); font-size: 10px; color: var(--panel-mut); font-weight: 400; text-transform: none; letter-spacing: 0; }
.btl-badge-pending { display: inline-block; margin-left: 6px; padding: 2px 7px; background: var(--chip); color: var(--panel-mut); border: 1px solid var(--panel-line); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .04em; }
.btl-chart-box { position: relative; height: 160px; margin-top: 4px; }
.btl-loading, .btl-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; color: var(--panel-mut); font-size: 13px; text-align: center; }
.btl-pending-title { font-size: 13px; font-weight: 600; color: var(--panel-ink); margin: 0; }
.btl-pending-sub   { font-size: 12px; color: var(--panel-mut); margin: 0; }
@keyframes btl-spin { to { transform: rotate(360deg); } }
.btl-spin { animation: btl-spin 0.9s linear infinite; }

/* legacy nav compat. Every .nav-tab is a .sidebar-nav-item now (styled in
   SHELL above); this later rule used to restyle them all at equal specificity. */
.mobile-nav { display: none; }
.nav-tab { cursor: pointer; }

/* ════════════════════════════════════════════════════════════
   Utility classes
   ════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }
.block  { display: block; }
.flex   { display: flex; }
.grid   { display: grid; }
.fixed  { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-50   { z-index: 50; }

.w-full { width: 100%; }
.flex-1 { flex: 1 1 0%; }
.h-2    { height: 0.5rem; }

.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-start    { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
.gap-3 { gap: 0.75rem; }
.gap-2 { gap: 0.5rem; }

.space-y-2 > * + * { margin-top: 0.6rem; }
.space-y-3 > * + * { margin-top: 0.85rem; }
.space-y-4 > * + * { margin-top: 1.15rem; }
.space-y-6 > * + * { margin-top: 1.75rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.p-4  { padding: 1rem; }

.text-xs  { font-size: 0.8125rem; line-height: 1.15rem; }
.text-sm  { font-size: 0.9375rem; line-height: 1.45rem; }
.text-lg  { font-size: 1.2rem;    line-height: 1.7rem; }
.text-xl  { font-size: 1.375rem;  line-height: 1.85rem; }
.text-2xl { font-size: 1.6rem;    line-height: 2.05rem; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* Legacy Tailwind grays used across the JS render functions — remapped to the
   brighter ink tiers so secondary/muted text is legible on the dark background. */
.text-gray-400  { color: var(--ink-2); }
.text-gray-500  { color: var(--ink-3); }
.text-teal-400  { color: var(--green); }
.text-cyan-400  { color: var(--green); }
.text-green-400 { color: var(--green); }

.rounded-lg { border-radius: var(--r-md); }
.border { border-width: 1px; border-style: solid; border-color: var(--line); }
.border-transparent { border-color: transparent; }
.cursor-pointer { cursor: pointer; }
.appearance-none { appearance: none; -webkit-appearance: none; }
.bg-dark-card { background-color: var(--surface-2); }

.block { display: block; }
.inline-block { display: inline-block; }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-2  { grid-column: span 2 / span 2; }
}

/* ─── Toasts ─── */
#toastHost {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px; max-width: 340px;
}
.toast {
  padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; cursor: pointer;
  background: var(--card);
  /* A border, so .toast-success / .toast-error can colour it (border:none
     used to cancel both). */
  border: 1px solid var(--line2); color: var(--ink);
  box-shadow: var(--shadow-elevated);
  animation: toastIn 0.24s ease-out;
}
.toast-success { border-color: var(--green-border); }
.toast-error   { border-color: var(--red-border); color: var(--red); }
.toast-out     { opacity: 0; transform: translateY(6px); transition: all 0.22s ease; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Alerts ─── */
.alert {
  padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; margin-bottom: 16px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
}
.alert-success { border-color: var(--green-border); color: var(--green); background: var(--green-soft); }
.alert-warning { border-color: var(--amber-border); color: var(--amber); background: var(--amber-soft); }
.alert-error   { border-color: var(--red-border);   color: var(--red);   background: var(--red-soft); }

/* ─── Accessibility ─── */
/* One focus ring for every control: the design's teal. */
.btn:focus-visible, .nav-tab:focus-visible, .sub-tab:focus-visible,
a:focus-visible, button:focus-visible, select:focus-visible,
summary:focus-visible, details > summary:focus {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
summary:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ─── Versus / Cohort analysis + Lab (moved out of injected <style> so the Lab
       tab renders styled even when opened before the Analysis tab). Tokenized
       to the aurora/glass system and made responsive on narrow viewports. ─── */
.versus-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: stretch; }
.versus-card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-md); padding: 18px; }
.versus-card h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin: 0 0 8px; }
.versus-card .v { font-size: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.versus-card .sub { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.versus-row { display: grid; grid-template-columns: 190px 1fr 1fr 110px 110px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.versus-row:last-child { border-bottom: none; }
.versus-row.head { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.versus-row .label { color: var(--ink-2); font-size: 14px; }
.versus-row .val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.versus-row .val.high { color: var(--aurora-2); }
.versus-row .val.low { color: var(--red); }
.versus-row .delta { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* Coverage: every cohort average carries the denominator it was computed over,
   so a mean of 2 measured rows can never read like a mean of 27. */
.versus-row .val .cov { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.03em; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.versus-row .val .sd { font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.versus-card .cov-note { font-size: 11px; color: var(--ink-3); margin-top: 6px; font-variant-numeric: tabular-nums; }
.cov-legend { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; margin: 12px 14px 0; padding-top: 10px; border-top: 1px solid var(--line); }
.cov-legend strong { color: var(--ink-2); font-weight: 600; }
.cov-withheld { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.cov-withheld > summary { cursor: pointer; font-size: 12.5px; color: var(--amber); list-style: none; }
.cov-withheld > summary::-webkit-details-marker { display: none; }
.cov-withheld > summary::before { content: '⚠ '; }
.cov-withheld ul { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; font-variant-numeric: tabular-nums; }
.cov-withheld p { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* A failed load, told apart from an empty library. */
.load-failure { border: 1px solid var(--amber-border); background: var(--amber-soft); }
.load-failure .lf-head { font-size: 15px; font-weight: 600; color: var(--amber); margin: 0 0 6px; }
.load-failure .lf-head::before { content: '⚠ '; }
.load-failure .lf-msg { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  margin: 0 0 18px; overflow-wrap: anywhere; }
.load-failure .lf-note { font-size: 11.5px; color: var(--ink-3); margin: 14px 0 0; }

/* The ranking rule, stated where the ranking is — and what each score is made of. */
.rank-rule { font-size: 11.5px; line-height: 1.6; color: var(--ink-3); margin: -6px 0 14px; }
.rank-rule b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-rule .rank-warn { color: var(--amber); }
.lb-score { display: inline-flex; flex-direction: column; line-height: 1.25; }
.lb-score b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.lb-score i { font-family: var(--font-mono); font-style: normal; font-size: 9.5px;
  letter-spacing: 0.04em; color: var(--ink-3); }

/* Runs whose library label came from the model's own score, not performance. */
/* (Stage C fix) The self-labelled notice is the page kit's warning note
   (.pg-note.is-warn): its head in --ink at 500, no ⚠ and no amber 600 head;
   the checkbox in the kit's teal (.pg-check). */
.circ-warn { padding: 12px 14px; }
.circ-warn .cw-head { font-size: 13px; color: var(--ink); margin: 0 0 6px; }
.circ-warn .cw-head b { font-weight: 500; }
.circ-warn .cw-body { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; }
.circ-warn .cw-toggle { cursor: pointer; }
.cr-tier.is-self { color: var(--amber); }
.cr-tier.is-self i { background: var(--amber); }
.cr-tier sup { font-size: 8px; margin-left: 1px; vertical-align: super; }
.versus-badge { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; }
.insight-callout { background: var(--glass-light); border: none; border-left: 3px solid var(--green); border-radius: var(--r-sm); padding: 15px 18px; margin-top: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.insight-callout strong { color: var(--ink); }
.versus-table { width: 100%; border-collapse: collapse; }
.versus-table th, .versus-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; }
.versus-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--ink-3); }
.versus-table td { color: var(--ink-2); }
.versus-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.small-muted { color: var(--ink-3); font-size: 12.5px; }

@media (max-width: 760px) {
  .versus-grid { grid-template-columns: 1fr; }
  .versus-row { grid-template-columns: 1fr 1fr 1fr; row-gap: 4px; }
  .versus-row .label { grid-column: 1 / -1; }
  .versus-row.head { grid-template-columns: 1fr 1fr 1fr !important; }
  .versus-row.head > div:nth-child(n+4) { display: none; }
}

/* ─── Collapsible detail sections (progressive disclosure) —
       flat taupe feature-card rows, no border ─── */
.a-section { margin-bottom: 12px; }
.a-section > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 20px;
  background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--r-md);
  transition: border-color .15s ease, background .15s ease;
}
.a-section > summary::-webkit-details-marker { display: none; }
.a-section > summary:hover { border-color: var(--line-3); }
.a-section[open] > summary { border-radius: var(--r-md) var(--r-md) 0 0; margin-bottom: 12px; }
.a-chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s ease; flex-shrink: 0; }
.a-section[open] .a-chev { transform: rotate(90deg); }
.a-title { font-size: 15.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; flex: 1; }
.a-meta { font-size: 12.5px; font-weight: 500; color: var(--ink-3); font-family: var(--font-mono); }
.a-section-body > .card { margin-bottom: 0 !important; }
.a-section-body > .card + .card { margin-top: 12px; }

/* ─── Compare within one format (Analysis tab, js/versus.js) ─── */
.format-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 16px; }
/* Each label wraps with its own select, so a label never ends a line beside
   the other field's select. Both are sized from their options, not from a
   share of the row: a select starts as wide as its longest option with its
   counts (the counts are what the select says), the two fields share a row
   only when both fit whole, and where a field alone is still too wide (a
   phone) its select drops under the label and takes the full width. Fixed
   shares cut "On-screen text, no speech — 9 High · 9 Low" at 390 and 1024px. */
.format-bar .fb-field { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
/* The page kit's label: mono caps beside its select (stage C). */
.format-bar label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink3); white-space: nowrap;
}
/* The cap only stops a long hand-set name stretching the bar on a desktop. */
.format-bar select { flex: 1 1 auto; width: auto; min-width: 0; max-width: 440px; }
/* On a phone each field takes its own row, and its select the rest of it; a
   point smaller and a little tighter, so the longest built-in option still
   fits whole on a 360px screen. */
@media (max-width: 600px) {
  .format-bar .fb-field { flex: 1 1 100%; }
  /* The whole row under its label, as the page kit's phone fields are. */
  .format-bar select { flex: 1 1 100%; width: 100%; max-width: none; font-size: 14px; padding-left: 12px; padding-right: 30px; background-position: right 10px center; }
}
/* Below 420px two-digit counts ("— 14 High · 14 Low") need one point more:
   13px keeps the longest built-in option whole down to 360px, three-digit
   counts included. */
@media (max-width: 420px) {
  .format-bar select { font-size: 13px; padding-right: 26px; background-position: right 8px center; }
}
/* (Stage C fix) The warning is the note inside (.fc-warn.pg-note.is-warn), not an amber edge. */
.format-card .fc-head { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.format-card .fc-head strong { color: var(--ink); }
.format-card .fc-line { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.format-card .fc-warn { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; }
.format-list { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.format-list .fl-head { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.format-list ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.format-list .fl-hint { margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }
.not-narrowed { margin: 6px 0 10px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
/* A method note: how a section's figures were made. Prints, and is one unit
   on paper (see the print block). */
.how-read { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.how-read b { color: var(--ink-2); font-weight: 600; }
/* A most-common value, said on its own row: no effect size, no test. */
.cmp-nt { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.cmp-tone-note { margin: 10px 0 2px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.dna-headline .dna-nt { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }

/* ─── Does a person agree with the AI's delivery reading? (Language DNA,
   js/label-check.js) ─── */
.agree { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.agree p { margin: 0 0 6px; }
.agree .agree-state, .agree .agree-foot, .agree .agree-inter, .agree .agree-scope, .agree .agree-kappa { color: var(--ink-3); }
.agree-list { margin: 0 0 6px; padding-left: 18px; font-variant-numeric: tabular-nums; }
.agree-list li + li { margin-top: 3px; }
.agree-actions { margin: 10px 0 0; }
.agree-done { font-size: 12.5px; color: var(--ink-3); }
/* A tier in which nobody speaks has no tone or delivery to read. */
.dna-silent { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
/* The foot of the folder report's Language DNA section (js/versus.js
   renderShownAndChecked): what the videos show, as the AI read it, per tier;
   and what people corrected, pooled. Neither is tested. */
.dna-foot { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.dna-sub { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.dna-sub .dna-nt { font-weight: 400; color: var(--ink-3); }
.dna-shown + .dna-checked { margin-top: 16px; }
.dna-shown-line, .dna-shown-rest, .dna-shown-hint, .dna-shown-state,
.dna-checked-line, .dna-checked-note, .dna-diff-screen { margin: 0 0 6px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.dna-shown-line b { color: var(--ink); font-weight: 600; }
.dna-shown-rest, .dna-shown-hint, .dna-shown-state, .dna-checked-note, .dna-diff-screen { color: var(--ink-3); }
.dna-diff-list { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.dna-diff-list li + li { margin-top: 3px; }
/* The list is on paper only (.print-only): it names the AI's tone, delivery
   and style per video, beside the blind check. On paper it stops at its first
   twenty videos and says how many more. */
.dna-diff-rest { display: none; margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3); }
@media print {
  .dna-diff-list li.dna-diff-over { display: none !important; }
  .dna-diff-rest { display: block; }
  .dna-diff-list li, .dna-shown-line, .dna-checked-line, .dna-checked-note { break-inside: avoid; page-break-inside: avoid; }
  .dna-sub { break-after: avoid; page-break-after: avoid; }
}
/* A tested sentence about a trait that also defines format, while the tiers
   are made differently: the reason it may be the mix, said with it. */
.fx-hold { display: block; margin-top: 2px; font-size: 12px; color: var(--amber); font-weight: 400; }
/* The blind check: a native modal, on the card tokens. */
/* The design's modal (radius 18, --card on --line), as New analysis and
   Settings are (stage C). */
.lc-dialog { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 18px 20px; width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; background: var(--card); color: var(--ink); box-shadow: var(--shadow-modal); }
/* Opaque, and the page behind it still: the Language DNA cards carry the AI's
   tier readings in the very words the reviewer picks from, and a see-through
   backdrop left them readable beside the questions for the whole sitting.
   The hard-coded colour first, for engines where ::backdrop does not inherit
   custom properties. html.lc-open is set while the dialog is open. */
.lc-dialog::backdrop { background: #0b1020; background: var(--bg, #0b1020); }
html.lc-open { overflow: hidden; }
/* .btn's display beats the browser's own [hidden]; inside the dialog, hidden
   means hidden (the finished screen's Back and Next). */
.lc-dialog [hidden] { display: none !important; }
.lc-need { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--amber); }
.lc-field[disabled] { opacity: .5; }
.lc-head { display: flex; align-items: flex-start; gap: 12px; }
.lc-head > div { flex: 1; min-width: 0; }
.lc-eyebrow { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lc-title { margin: 2px 0 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.lc-progress { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; padding-top: 4px; }
.lc-intro { margin: 8px 0 12px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.lc-media video { display: block; width: 100%; max-height: 46dvh; background: #070a14; background: var(--media-bg); border-radius: var(--r-sm); }
.lc-unplayable { padding: 18px; border: 1px dashed var(--line-3); border-radius: var(--r-sm); text-align: center; color: var(--ink-2); font-size: 13px; }
.lc-unplayable p { margin: 0 0 10px; }
.lc-field { margin: 14px 0 0; padding: 0; border: 0; }
.lc-field legend { padding: 0; margin-bottom: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.lc-opt { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.lc-opt b { color: var(--ink); font-weight: 560; }
.lc-words { margin: 14px 0 0; font-size: 13px; color: var(--ink-2); }
.lc-words summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.lc-words p { margin: 6px 0 0; max-height: 160px; overflow: auto; line-height: 1.55; white-space: pre-wrap; }
.lc-status { min-height: 1em; margin: 10px 0 0; font-size: 12.5px; color: var(--amber); }
.lc-done { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.lc-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; }

/* ── DNA review tab (js/dna-review.js) ──
   A folder's videos in a list beside the one open: the stored video, the
   AI's reading, and the form for a person's. Screen-only (.dnr is .no-print):
   readings reach paper through the readout and the folder report. */
/* The page kit's header and controls row (stage C); the two lead lines in
   the description's size, the second a step quieter. */
.dnr .page-header { margin-bottom: 14px; }
.dnr .page-header p.dnr-lead { max-width: 82ch; }
.dnr .page-header p.dnr-lead-2 { color: var(--ink3); }
.dnr-controls { margin: 0 0 14px; }
.dnr-controls select { min-width: 170px; max-width: 320px; }
@media (max-width: 600px) { .dnr-controls select { max-width: none; } }
.dnr-left { margin: 0 0 12px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.dnr-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--amber-border); background: var(--amber-soft); font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.dnr-banner.is-error { border-color: var(--red-border); background: var(--red-soft); }
.dnr-body { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 22px; align-items: start; }
/* 52px below the sticky top bar, plus the gap it always had. */
.dnr-side { position: sticky; top: 68px; min-width: 0; }
.dnr-list-head, .dnr-pos {
  margin: 0 0 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.dnr-list {
  list-style: none; margin: 0; padding: 4px; max-height: calc(100dvh - 200px); overflow: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card);
}
.dnr-list:focus { outline: none; }
.dnr-list:focus-visible { box-shadow: 0 0 0 3px var(--ring); border-color: var(--ink); }
.dnr-row { display: grid; gap: 3px; padding: 9px 11px; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; }
.dnr-row + .dnr-row { margin-top: 2px; }
.dnr-row:hover { background: var(--hover); }
.dnr-row.is-open { background: var(--chip); }
.dnr-list:focus-visible .dnr-row.is-cursor { border-color: var(--ink); }
.dnr-row-sum {
  font-size: 13px; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dnr-row-ai, .dnr-row-check { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.dnr-row-check.is-checked { color: var(--green); }
.dnr-row-check.is-earlier { color: var(--amber); }
.dnr-empty { margin: 0; padding: 14px; border: 1px dashed var(--line-3); border-radius: var(--r-md); font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.dnr-empty.is-error { border-color: var(--red-border); color: var(--ink-2); }
.dnr-detail { min-width: 0; }
.dnr-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dnr-detail-head .dnr-pos { margin: 0; }
.dnr-title { margin: 3px 0 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; overflow-wrap: anywhere; }
.dnr-nav { display: flex; gap: 4px; flex-shrink: 0; }
.dnr kbd {
  display: inline-block; min-width: 18px; padding: 1px 5px; border: 1px solid var(--line-3); border-radius: 5px;
  font-family: var(--font-mono); font-size: 10px; line-height: 1.4; text-align: center; color: var(--ink-3); background: var(--card);
}
.dnr-grid { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
/* Short enough that the player's controls clear the action bar stuck at the
   foot of a laptop screen (1280 × 720 and up), with the title above it. */
.dnr-video { display: block; width: 100%; max-height: min(560px, max(240px, calc(100dvh - 240px))); background: #070a14; background: var(--media-bg); border-radius: var(--r-sm); }
.dnr-video-meta { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); }
.dnr-words, .dnr-others { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
/* (Stage C fix) The kit's folding chevron, not the browser's ▶, and the
   kit's 500 weight. */
.dnr-words summary, .dnr-others summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; color: var(--ink); list-style: none; }
.dnr-words summary::-webkit-details-marker, .dnr-others summary::-webkit-details-marker { display: none; }
.dnr-words summary::before, .dnr-others summary::before {
  content: ''; flex-shrink: 0; width: 6px; height: 6px; margin: 0 2px 0 1px;
  border-right: 1.5px solid var(--ink3); border-bottom: 1.5px solid var(--ink3);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.dnr-words[open] > summary::before, .dnr-others[open] > summary::before { transform: rotate(45deg); }
.dnr-words summary:focus-visible, .dnr-others summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
/* (Stage C fix) The form's radios and checkboxes in the kit's teal, as
   .pg-check, the import table and the board picker are (they were the
   browser's own blue in light, grey in dark). */
.dnr input[type="radio"], .dnr input[type="checkbox"] { accent-color: var(--teal); }
.dnr-words p { margin: 6px 0 0; max-height: 200px; overflow: auto; line-height: 1.55; white-space: pre-wrap; }
/* The AI's reading is a panel of the page kit's (--card on --line). */
.dnr-ai { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.dnr-h { margin: 0 0 12px; font-size: 14px; font-weight: 500; color: var(--ink); }
.dnr-k { margin: 0 0 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.dnr-k span { font-family: var(--font-sans); font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.dnr-ai-delivery, .dnr-ai-block + .dnr-ai-block { margin-top: 16px; }
.dnr-ai-sum { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.dnr-ai-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.dnr-ai .dna-pill { background: var(--panel2); border: 1px solid var(--line); }
.dnr-ai .dna-bar { background: var(--panel2); }
.dnr-ai-note, .dnr-muted, .dnr-shares, .dnr-exposure { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.dnr-exposure { margin: 0 0 10px; color: var(--amber); }
.dnr-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--track); font-size: 12.5px; color: var(--ink-3); }
.dnr-kv:first-of-type { border-top: 0; }
.dnr-kv b { color: var(--ink); font-weight: 560; text-align: right; }
.dnr-mine { margin-top: 20px; }
.dnr-mine:empty { display: none; }
.dnr-form { padding: 16px 18px 8px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--card); }
.dnr-form > .dnr-h { margin-bottom: 2px; }
.dnr-form > .dnr-muted { margin-top: 0; }
/* My check with no correction, of a reading the AI has replaced since. */
.dnr-earlier { margin: 10px 0 0; padding: 8px 12px; border: 1px solid var(--amber-border); border-radius: var(--r-sm); background: var(--amber-soft); font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.dnr-fs { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.dnr-fs legend { padding: 0; margin-bottom: 8px; font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.dnr-fs[disabled] .dnr-selects { opacity: .5; }
.dnr-fs .dnr-k { margin-top: 14px; }
.dnr-radios { display: grid; gap: 1px; }
.dnr-radio { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.dnr-radio input { flex: 0 0 auto; }
.dnr-radio kbd { flex: 0 0 auto; margin-left: 2px; }
.dnr-radio b { color: var(--ink); font-weight: 560; }
.dnr-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.dnr-check {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); font-size: 12.5px; font-weight: 400; color: var(--ink-2); cursor: pointer;
}
.dnr-check:has(input:checked) { border-color: var(--btn); color: var(--btnInk); background: var(--btn); }
.dnr-check.is-off { opacity: .45; cursor: not-allowed; }
/* auto-fill, so a fieldset with one select keeps it one column wide. */
.dnr-selects { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; }
.dnr-select, .dnr-note { display: grid; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.dnr-select select { height: 34px; padding: 0 30px 0 11px; font-size: 13px; border: 1px solid var(--line2); border-radius: var(--r-sm); background-color: var(--card); background-position: right 10px center; }
.dnr-note { margin-top: 18px; }
.dnr-note i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.dnr-note textarea { padding: 8px 11px; font-size: 13px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: var(--card); resize: vertical; }
.dnr-status { min-height: 1.2em; margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--amber); }
/* (Stage C fix) Nothing to say: no 40px band between the bar's "what" line
   and its buttons. Still in the tree (role=status must be there before it
   speaks), so never display:none. */
.dnr-status:empty { min-height: 0; margin: 0; }
.dnr-status.is-ok { color: var(--green); }
.dnr-status .btn { margin-left: 6px; vertical-align: baseline; }
.dnr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dnr-actions [aria-disabled="true"] { opacity: .5; }
/* The status and the buttons stay at the foot of the screen, saying which
   video they save: the player, the AI's reading and Save & next are a long
   way apart on a tall form. The bar is the detail's own child, drawn after
   the form as its foot, so it sticks from the video's title down — a bar
   inside the form could rise no higher than the form's top, which a laptop
   screen shows only once the player has scrolled away. */
.dnr-actbar {
  position: sticky; bottom: 0; z-index: 2; margin: 0; padding: 2px 20px 14px;
  background: var(--card); border: 1px solid var(--line); border-top-color: var(--track);
  border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 -6px 14px -12px #00000059;
}
/* On a narrow screen the buttons stack full width and the bottom nav is
   fixed there: a bar that stuck would cover the form. */
@media (max-width: 900px) { .dnr-actbar { position: static; } }
.dnr-actbar-what {
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dnr-help { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); }
.dnr-help b { color: var(--ink-2); font-weight: 560; }
.dnr-title:focus { outline: none; }
.dnr-title:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* .main-content scrolls nothing (it grows with the page, and the window
   scrolls), yet overflow-y: auto makes it the sticky boxes' scroll
   container, so the list and the action bar never stuck. On this tab it
   clips sideways without becoming one. */
.main-content:has(#tab-content-dna-review.active) { overflow: visible; overflow-x: clip; }
.dnr-others ul { list-style: none; margin: 8px 0 0; padding: 0; }
.dnr-others li { padding: 8px 0; border-top: 1px solid var(--track); }
.dnr-others li p { margin: 0; line-height: 1.5; }
.dnr-other-who { font-size: 12px; color: var(--ink-3); }
.dnr-keys { margin: 20px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
/* Below 1180px the AI's reading goes under the player; at 1180 and wider
   they sit side by side, above the action bar. */
@media (max-width: 1179.98px) {
  .dnr-grid { grid-template-columns: 1fr; }
  .dnr-video { width: auto; max-width: 100%; max-height: 62vh; margin: 0 auto; }
}
@media (max-width: 900px) {
  .dnr-body { grid-template-columns: 1fr; }
  .dnr-side { position: static; }
  .dnr-list { max-height: 40vh; }
  .dnr-detail-head { flex-wrap: wrap; }
}
/* Nobody presses J on a phone. */
@media (hover: none) and (pointer: coarse) { .dnr-keys, .dnr kbd { display: none; } }
.fmt-table td { vertical-align: middle; font-size: 13px; }
.fmt-table .fmt-summary { max-width: 38ch; }
/* The editor is a .versus-table, inside the dark instrument panel in both
   themes: its --ink is the panel's light ink, but the global input rule's
   --desk background stays the light theme's white, so a saved name read as
   near-white on white. The panel's own raised surface instead. */
.fmt-table .fmt-input { width: 100%; min-width: 150px; height: 32px; padding: 0 10px; font-size: 13px; background: var(--card); border-color: var(--line-3); border-radius: var(--r-sm); }
.fmt-table .fmt-actions { white-space: nowrap; }
.fmt-table .fmt-status { display: block; margin-top: 4px; font-size: 11.5px; color: var(--amber); white-space: normal; }
.tpl-compared { color: var(--ink-3); font-weight: 400; }

/* ─── The videos behind a separator, production action points, topics
   (Analysis tab, js/versus.js) ─── */
/* Indented to the sentence above them: the dot and its gap are 22px. */
.seen-in-head, .seen-in, .seen-in-note { margin-left: 22px; }
.seen-in-head { margin-top: -4px; margin-bottom: 4px; font-size: 12px; color: var(--ink-3); }
.seen-in { list-style: none; padding: 0; margin-top: 0; margin-bottom: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.seen-in li { padding: 3px 0 3px 12px; border-left: 2px solid var(--track); }
.seen-in li + li { margin-top: 2px; }
.seen-in .seen-side { border-left: none; padding-left: 0; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.seen-in .seen-side:first-child { margin-top: 0; }
.seen-in .seen-val { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.seen-in .seen-said { color: var(--ink-3); font-style: italic; }
.seen-in .seen-folder { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.seen-in .seen-link { font-size: 12px; white-space: nowrap; color: var(--acc); text-decoration: none; }
.seen-in .seen-link:hover { text-decoration: underline; }
.seen-in-note { margin-top: -6px; margin-bottom: 12px; font-size: 12px; color: var(--ink-3); }
.prod-do { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.prod-do-head { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.prod-do-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.prod-do-list b { color: var(--ink); font-weight: 560; }
.prod-do-hold, .prod-do-foot, .prod-do-none { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.prod-do-hold { color: var(--amber); }
.tpl-note.tpl-hold { color: var(--amber); }
.topic-counts .topic-group { margin: 8px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.topic-counts .topic-list { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.topic-counts .topic-note { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.cal-card .cal-intro { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }

/* ════════════════════════════════════════════════════════════
   Neural Readout — scan-report components (Deep Analysis & results)
   Metric cards render as dark instrument tiles (see instrument
   scope at the end of this file) beside the dark readout panel.
   ════════════════════════════════════════════════════════════ */

.readout-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.readout-eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.16em;
  display: inline-block; margin-bottom: 6px;
}
.readout-eyebrow::before { content: '[ '; }
.readout-eyebrow::after  { content: ' ]'; }
.readout-title { font-size: 22px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); margin: 0; line-height: 1.3; }
.readout-sub { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 0; }

/* Verdict banner — the blush accent card, at most one per page */
.readout-verdict {
  background: var(--blush); border-radius: var(--r-lg);
  padding: 22px 26px; margin-bottom: 14px;
}
.readout-verdict .rv-tag {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  color: var(--sienna); text-transform: uppercase; letter-spacing: 0.14em;
  display: block; margin-bottom: 8px;
}
.readout-verdict p { font-size: 16.5px; line-height: 1.6; color: var(--sienna); margin: 0; font-weight: 480; }

/* Metric card grid */
.readout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.readout-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.readout-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.readout-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .readout-grid, .readout-grid.cols-4, .readout-grid.cols-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .readout-grid, .readout-grid.cols-2, .readout-grid.cols-4, .readout-grid.cols-5 { grid-template-columns: 1fr; } }

.readout-card {
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--r-el); padding: 18px 20px 16px;
  box-shadow: none; min-width: 0;
}
.rc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.rc-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Big whisper number */
.rc-val { display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.rc-num { font-size: 40px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; font-feature-settings: "tnum" 1; }
.rc-unit { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* Range track with markers */
.rc-range { position: relative; height: 4px; background: var(--track); border-radius: var(--r-pill); margin: 16px 0 10px; }
/* The attainable values of a quantised score. The rubric fields are whole
   numbers 1-10, so the 0-100 track has ten reachable stops and the space
   between two notches is not a value the model can return. */
.rc-notch { position: absolute; top: -2px; width: 1px; height: 8px;
  background: var(--ink); opacity: 0.20; transform: translateX(-0.5px); }
.rc-notch:last-of-type { opacity: 0.32; }
.rc-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r-pill); background: var(--ink); }
.rc-fill.green { background: var(--green); }
.rc-fill.amber { background: var(--amber); }
.rc-fill.red   { background: var(--red); }
.rc-mark {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line-3);
}
.rc-mark.high { background: var(--green); }
.rc-mark.low  { background: var(--red); }
.rc-mark.ink  { background: var(--ink); }
.rc-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.rc-note b { color: var(--ink-2); font-weight: 600; }
.rc-note .up { color: var(--green); font-weight: 600; }
.rc-note .down { color: var(--red); font-weight: 600; }

/* Component ticks on a composite's track — thin, so they read as parts of the
   number above them rather than as values of their own. */
.rc-tick { position: absolute; top: -4px; width: 1px; height: 12px; background: var(--ink); opacity: 0.55; transform: translateX(-0.5px); }

/* Where a score sits in its population: bins under the track, own bin lit. */
.rc-dist { display: flex; align-items: flex-end; gap: 1px; height: 22px; margin: 10px 0 4px; }
.rc-dist i { flex: 1 1 0; min-width: 1px; background: var(--ink); opacity: 0.16; border-radius: 1px 1px 0 0; display: block; }
.rc-dist i.me { opacity: 0.95; background: var(--acc); }
.rc-dist-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.rc-dist-note b { color: var(--ink); font-weight: 600; }
.rc-dist-note.muted { color: var(--ink-3); font-style: italic; }

/* Provenance strip — what the numbers on a readout rest on. Mono key/value
   pairs in one line, wrapping; a value that was never recorded says so in
   italics rather than being left blank. */
.prov {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em;
  padding: 8px 12px; border: 1px solid var(--panel-line); border-radius: var(--r-md);
  background: var(--panel); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.prov .prov-k { color: var(--ink-3); text-transform: uppercase; font-size: 9px; letter-spacing: 0.1em; margin-right: 6px; }
.prov .prov-v { color: var(--ink); margin-right: 18px; overflow-wrap: anywhere; }
.prov .prov-v:last-child { margin-right: 0; }
.prov .prov-v em { color: var(--ink-3); font-style: italic; }
.prov .prov-age { color: var(--ink-2); }
.prov .prov-v a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); }
.prov .prov-v b { color: var(--ink); font-weight: 600; }
.prov.prov-mix { margin-top: 10px; }
/* (Stage C fix) The version note is a fact about the comparison, in the
   line's own mono: --ink2, upright (it was italic amber). */
.prov.prov-mix em { color: var(--ink2); font-style: normal; }

/* A feature pill can carry the name it answers to in the query box. */
/* Selection vs the rest — the statistics strip above a narrowed result. */
.xq-stats { margin: 0; }
.xq-stats > summary { cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 2px 0 10px; }
.xq-stats > summary::-webkit-details-marker { display: none; }
.xq-stats > summary::before { content: '▸'; font-size: 11px; color: var(--ink-3); }
.xq-stats[open] > summary::before { content: '▾'; }
.xq-stats > summary .xq-stats-n { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .04em; color: var(--ink-2); }
.sel-stats { border-radius: var(--r-lg); padding: 16px 18px 12px; border: 1px solid var(--panel-line); background: var(--panel); }
.sel-stats .ss-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sel-stats .ss-count { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3); }
.sel-stats .ss-count b { color: var(--ink); font-weight: 600; }
.ss-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ss-table th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 6px 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ss-table td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: top; white-space: normal; }
.ss-table tbody th { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink); padding: 7px 10px; border-bottom: 1px solid var(--line-2); white-space: normal; min-width: 150px; max-width: 220px; }
.ss-table td .ss-sub { display: inline-block; }
.ss-table td .ss-n { white-space: nowrap; }
.ss-table tbody tr:last-child td, .ss-table tbody tr:last-child th { border-bottom: none; }
.ss-table td b { color: var(--ink); font-weight: 600; }
.ss-table .ss-sub { color: var(--ink-3); font-size: 11px; }
.ss-table .ss-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-3); margin-left: 6px; }
.ss-table .ss-none { color: var(--ink-3); }
.ss-table .ss-key { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.ss-table .ss-help { display: block; font-size: 10.5px; color: var(--ink-3); line-height: 1.4; margin-top: 1px; }
.ss-table .up { color: var(--green); font-weight: 600; }
.ss-table .down { color: var(--red); font-weight: 600; }
.sel-stats .ss-legend { font-size: 11px; color: var(--ink-3); line-height: 1.55; margin: 10px 0 0; }
.sel-stats .ss-legend b { color: var(--ink-2); font-weight: 600; }

/* Effect sizes on the production comparison, and the calibration surface. */
.cmp-fx { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; color: var(--ink-3); margin: -4px 0 10px 0; padding-left: 2px; font-variant-numeric: tabular-nums; }
.cmp-fx b { color: var(--ink); font-weight: 600; }
.cmp-fx .fx-ci { color: var(--ink-2); }
.cmp-fx .fx-n, .cmp-fx .fx-why { color: var(--ink-3); }
.fx-badge { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid var(--line-3); color: var(--ink-2); margin-right: 6px; vertical-align: middle; }
.fx-badge.significant { color: var(--green); border-color: var(--green-border); background: var(--green-soft); }
.fx-badge.directional { color: var(--amber); border-color: var(--amber-border); background: var(--amber-soft); }
.fx-badge.negligible { color: var(--ink-3); }
.fx-badge.underpowered { color: var(--ink-3); border-style: dashed; }
/* No spread: every video in each tier shares one value. Neutral, like
   underpowered — neither is a claim about an effect. */
.fx-badge.nospread { color: var(--ink-3); border-style: dotted; }
/* Clear of zero on its own interval, but not confirmed by the exact test
   corrected (Holm) across the comparisons made: a lead, amber like
   Directional, dashed because the claim was made and then withdrawn. */
.fx-badge.alone { color: var(--amber); border-color: var(--amber-border); border-style: dashed; }
.cmp-legend { font-size: 11px; color: var(--ink-3); line-height: 1.55; margin: 8px 0 10px; }
.cmp-legend b { color: var(--ink-2); font-weight: 600; }
.cal-card .cal-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.cal-card .cal-title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 4px 0 6px; }
.cal-card .cal-verdict { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.cal-card .cal-verdict b { color: var(--ink); }
.cal-card .cal-ci { margin: 0 0 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; color: var(--ink-3); line-height: 1.6; font-variant-numeric: tabular-nums; }
.cal-card .cal-ci b { color: var(--ink); font-weight: 600; }
.cal-card .cal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .cal-card .cal-grid { grid-template-columns: 1fr; } }
.cal-rungs { border-collapse: collapse; font-size: 12.5px; width: 100%; font-variant-numeric: tabular-nums; }
.cal-rungs th, .cal-rungs td { padding: 6px 10px; border-bottom: 1px solid var(--line-2); text-align: left; white-space: nowrap; }
.cal-rungs thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.cal-rungs tbody th { font-weight: 500; color: var(--ink); white-space: normal; }
.cal-rungs tbody th .fx-badge { margin-top: 4px; }
.cal-rungs .num { text-align: right; }
.cal-rungs .num.neg { color: var(--red); }
.cal-rungs tr.weakest th, .cal-rungs tr.weakest td { background: var(--amber-soft); }
.cal-ledger { margin-top: 12px; }
.cal-ledger > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; list-style: none; user-select: none; padding: 4px 0; }
.cal-ledger > summary::-webkit-details-marker { display: none; }
/* (Stage C fix) On screen, the kit's chevron and its 500 sentence case (the
   print block keeps the paper look: no twisty, the old caps). The old '▸ ' /
   '▾ ' glyph rules of .cal-ledger and .cmp-same are gone (fix 2): print
   already drops them (content: none), and on screen the open-state glyph
   rules — .cal-ledger[open] > summary::before and .cmp-same[open]
   summary::before outrank this block, .cmp-same summary::before ties it and
   came later — drew the glyph inside the chevron's bordered box. */
@media screen {
  .cal-ledger > summary, .cmp-same > summary { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink2); }
  .cal-ledger > summary::before, .cmp-same > summary::before, .cov-withheld > summary::before {
    content: ''; flex-shrink: 0; width: 6px; height: 6px; margin: 0 2px 0 1px;
    border-right: 1.5px solid var(--ink3); border-bottom: 1.5px solid var(--ink3);
    transform: rotate(-45deg); transition: transform .15s ease;
  }
  .cal-ledger[open] > summary::before, .cmp-same[open] > summary::before, .cov-withheld[open] > summary::before { transform: rotate(45deg); }
  .cov-withheld > summary { display: flex; align-items: center; gap: 8px; color: var(--ink2); }
  .cal-ledger > summary:focus-visible, .cmp-same > summary:focus-visible, .cov-withheld > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
}
.cal-card .cal-foot { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.corr-table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.corr-table th, .corr-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-2); text-align: left; white-space: nowrap; }
.corr-table thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.corr-table tbody th { font-weight: 500; color: var(--ink); }
.corr-table .num { text-align: right; }
.corr-table .num.pos { color: var(--green); font-weight: 600; }
.corr-table .num.neg { color: var(--red); font-weight: 600; }
.corr-table tbody tr[data-corr-key] { cursor: pointer; }
.corr-table tbody tr[data-corr-key]:hover { background: var(--hover); }
.corr-table tbody tr.is-active { background: var(--hover); box-shadow: inset 3px 0 0 var(--green); }
.corr-kind { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; color: var(--ink-3); background: var(--chip); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
.finding-row .fx-inline { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.finding-row .fx-inline b { font-weight: 600; color: var(--ink-2); }
.corr-table tbody tr[data-corr-key]:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* What changed since the previous import. */
.brief { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.brief b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* The divider goes BETWEEN rows: :first-of-type matches by tag, and the card's
   first div is the section heading, so it never suppressed anything. */
.brief-row { display: grid; grid-template-columns: minmax(0, 160px) 1fr; gap: 14px; align-items: baseline; padding: 9px 0; }
.brief-row + .brief-row { border-top: 1px solid var(--line); }
.brief-folder { font-family: var(--font-mono); font-size: 11.5px; color: var(--acc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .brief-row { grid-template-columns: 1fr; gap: 4px; } }

/* A row measured by the brain encoder, not by the model's rubric. */
.corr-kind.encoder { color: var(--acc); }
.corr-bar { width: 160px; min-width: 120px; position: relative; }
.corr-bar i, .corr-bar .band { position: absolute; top: 50%; left: 10px; height: 6px; transform: translateY(-50%); border-radius: 3px; }
.corr-bar .band { background: var(--track); height: 10px; }
.corr-bar i { background: var(--green); max-width: calc(100% - 20px); }
.corr-bar i.neg { background: var(--red); }

/* Sort direction, beside the sort select. */
.xq-dir { font-family: var(--font-mono); font-size: 13px; line-height: 1; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-2); cursor: pointer; }
.xq-dir:hover { color: var(--ink); border-color: var(--line-3); }
.pill-alias { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ink-3);
  background: var(--chip); border-radius: 4px; padding: 1px 5px; margin-left: 2px; }

/* An ad card that opens its Run page: "MARKET (stage C2)" below. */

/* Landing page: the scraped evidence behind the model's verdict. */
.lp-evidence { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.lp-evidence > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; list-style: none; user-select: none; }
.lp-evidence > summary::-webkit-details-marker { display: none; }
.lp-evidence > summary::before { content: '▸ '; }
.lp-evidence[open] > summary::before { content: '▾ '; }
.lp-ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 760px) { .lp-ev-grid { grid-template-columns: 1fr; } }
.lp-ev-h { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.lp-ev-h b { color: var(--ink-2); }
.lp-ev-h .disagree { color: var(--amber); }
.lp-outline { margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.lp-outline li { padding: 3px 0; border-top: 1px solid var(--line-s); overflow-wrap: anywhere; }
.lp-outline li::before { content: attr(data-level); font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); margin-right: 8px; }
.lp-outline li[data-level="H1"] { color: var(--ink); font-weight: 600; }
.lp-outline li[data-level="H3"] { padding-left: 14px; }
.lp-outline li[data-level="H4"] { padding-left: 28px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lp-chips span { font-size: 11.5px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--chip); color: var(--ink-2); }
.lp-capture { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.lp-capture b { color: var(--ink-2); font-weight: 600; }
.lp-inferred { border: 1px solid var(--red-border); background: var(--red-soft); color: var(--red); border-radius: var(--r-md); padding: 10px 14px; font-size: 12.5px; line-height: 1.55; margin: 0 0 16px; }

/* Boards: why each creative is on a board (its note, on the Library card).
   What a board is for (.bd-desc) is styled with the Boards page
   ("WORKSPACE · BOARDS", stage C3). */
.cr-note { display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; margin-top: 6px; padding: 6px 8px; border-left: 2px solid var(--amber); background: var(--amber-soft); border-radius: 0 6px 6px 0; }
/* (Stage C fix) The kit's smallest button (.btn .btn-ghost .btn-xs, 22px,
   11px), not 9.5px mono caps on an 11px-tall target. Only its place here;
   the z-index rule further down keeps it above the stretched .cr-open. */
.cr-note-btn { justify-self: start; align-self: flex-start; margin: 6px 0 0 -8px; }

/* ── Dark readout panel — the "complete neural readout" band.
      Constant across themes (uses --panel tokens). ── */
.readout-panel {
  background: var(--panel); border-radius: var(--r-xl);
  border: 1px solid var(--panel-line);
  padding: 24px 26px 18px; margin-bottom: 14px;
  color: var(--panel-ink);
}
.rp-eyebrow {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  color: var(--panel-mut); text-transform: uppercase; letter-spacing: 0.16em;
}
.rp-eyebrow::before { content: '[ '; }
.rp-eyebrow::after  { content: ' ]'; }
.rp-title { font-size: 15px; font-weight: 500; color: var(--panel-ink); margin: 4px 0 14px; letter-spacing: -0.01em; }
.rp-row {
  display: grid; grid-template-columns: 170px 1fr 84px; gap: 16px; align-items: center;
  padding: 11px 0; border-top: 1px solid var(--panel-line);
}
.rp-name { font-size: 12.5px; color: var(--panel-ink); line-height: 1.35; }
.rp-key  { font-family: var(--font-mono); font-size: 9px; color: var(--panel-mut); display: block; margin-top: 2px; letter-spacing: 0.08em; }
.rp-bars { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rp-bar  { height: 5px; border-radius: var(--r-pill); background: var(--chip); overflow: hidden; }
.rp-bar > span { display: block; height: 100%; border-radius: var(--r-pill); }
.rp-bar.high > span { background: var(--tier-high); }
.rp-bar.low  > span { background: var(--tier-low); }
.rp-delta { font-family: var(--font-mono); font-size: 12px; font-weight: 600; text-align: right; white-space: nowrap; }
.rp-delta.up   { color: var(--teal); }
.rp-delta.down { color: var(--bad); }
.rp-delta.flat { color: var(--panel-mut); }
.rp-legend { display: flex; gap: 16px; padding: 12px 0 2px; }
.rp-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; color: var(--panel-mut); text-transform: uppercase; letter-spacing: 0.1em; }
.rp-legend i { width: 14px; height: 5px; border-radius: var(--r-pill); display: inline-block; }
.rp-legend .hi i { background: var(--tier-high); }
.rp-legend .lo i { background: var(--tier-low); }
@media (max-width: 700px) {
  .rp-row { grid-template-columns: 1fr 70px; }
  .rp-row .rp-name { grid-column: 1 / -1; }
}

/* Report prose sections */
.readout-prose { font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.readout-prose h3, .readout-prose h4 { margin: 14px 0 6px; color: var(--ink); }
.readout-prose ul { padding-left: 20px; margin: 8px 0; }
.readout-prose li { margin-bottom: 5px; }
.readout-prose strong { color: var(--ink); }
.readout-callout-good { border-left: 3px solid var(--green); }
.readout-callout-bad  { border-left: 3px solid var(--red); }

/* Upgrade cohort stat cards to the whisper-number treatment */
.versus-card .v { font-size: 32px; font-weight: 300; letter-spacing: -0.02em; }

/* ════════════════════════════════════════════════════════════
   Language DNA — validated categorical palette + components.
   Fixed display order: Facts, Fun, Feeling, Opinionated, Action.
   (dataviz six checks passed on both surfaces; magenta's light-mode
   contrast WARN is relieved by the always-on direct labels.)
   ════════════════════════════════════════════════════════════ */
/* The five --dna-* colours are theme tokens: see the top of this file. */

/* 100% stacked horizontal bar — 2px surface gaps, pill-clipped ends */
.dna-bar {
  display: flex; gap: 2px; height: 12px;
  border-radius: var(--r-pill); overflow: hidden;
  background: var(--track);
}
.dna-bar > span { display: block; height: 100%; min-width: 3px; flex: 0 0 auto; }
/* A mix whose shares do not sum to 100 is drawn to its real total and marked,
   rather than being squeezed back to a full track by flex-shrink. */
.dna-bar.is-invalid { outline: 1px solid var(--amber-border); outline-offset: 1px; }
.dna-warn { font-size: 11.5px; line-height: 1.55; color: var(--amber); margin: 10px 0 0; }
.dna-warn b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dna-bar.slim { height: 8px; }

/* Legend — identity via dot; text wears ink tokens, never series color */
.dna-legend { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 10px; }
.dl-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.dl-item i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dl-item b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.dl-item.dom { color: var(--ink); font-weight: 600; }
.dl-item.dom b { color: var(--ink); }

/* Sample phrase rows — quiet quotes, type carried by the dot */
.dna-quote {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 0; border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.55;
}
.dna-quote i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.dna-quote .dq-type { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px; white-space: nowrap; }
/* An overlay script: the time a line appears, then the line. The time column is
   fixed so the words line up down the list the way a transcript's do. */
.script-overlay { list-style: none; margin: 0; padding: 0; }
.script-overlay li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 2px 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.script-overlay .ov-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); padding-top: 2px; white-space: nowrap; }
.script-overlay .ov-role { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px; white-space: nowrap; }

/* Neutral delivery pills — taupe chip + identity dot */
.dna-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border-radius: var(--r-pill);
  padding: 4px 11px; font-size: 12px; color: var(--ink-2);
}
.dna-pill i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dna-pill b { color: var(--ink); font-weight: 600; }

/* Cohort comparison rows: tier tag + bar */
.dna-cohort-row { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; padding: 7px 0; }
.dna-tier {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
}
.dna-tier.hi { color: var(--green); }
.dna-tier.lo { color: var(--red); }

/* Per-type share table */
.dna-delta-row {
  display: grid; grid-template-columns: 1fr 56px 56px 64px; gap: 10px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--line-2); font-size: 12.5px;
}
.dna-delta-row .ddr-type { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.dna-delta-row .ddr-type i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dna-delta-row .num { font-family: var(--font-mono); font-size: 11.5px; text-align: right; color: var(--ink-2); }
.dna-delta-row .num.head { color: var(--ink-3); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.dna-delta-row .delta { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; text-align: right; color: var(--ink); }

/* A person's reading beside the AI's on one video's readout, a row per field
   a person set (js/pages.js _personReadingPart). Where they differ, the
   person's value carries the weight. */
.dna-side-row {
  display: grid; grid-template-columns: minmax(96px, 0.8fr) 1fr 1fr; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--track); font-size: 12.5px; color: var(--ink-2);
}
.dna-side-row.head { border-top: 0; padding-top: 0; font-size: 11.5px; color: var(--ink-3); }
.dna-side-row .ds-field { color: var(--ink-3); }
.dna-side-row.is-diff .ds-person { color: var(--ink); font-weight: 600; }
@media print { .dna-side-row { break-inside: avoid; } }

/* ── Language DNA v2 — editorial feature panel + sphere product visual ──
   Taupe borderless feature card (the reference's dominant panel), tab-pill
   legend with identity dots, hairline rows at body size, and the one
   chromatic product visual: a sphere blended from the validated palette. */
.dna-hero {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  margin-bottom: 16px;
  container-type: inline-size;
}
.dna-hero-grid { display: flex; gap: 32px; align-items: flex-start; }
.dna-hero-main { flex: 1; min-width: 0; }
/* Narrow containers (Explorer pane, half-width grids): sphere moves under the text */
@container (max-width: 560px) {
  .dna-hero-grid { flex-direction: column-reverse; align-items: center; }
  .dna-hero-main { width: 100%; }
}
.dna-headline { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 6px 0 8px; }
.dna-lede { font-size: 14px; color: var(--ink-3); line-height: 1.6; letter-spacing: 0.01em; max-width: 52ch; margin: 0 0 18px; }

/* The product visual — soft-edged sphere, gradient built inline from the mix */
.dna-sphere-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dna-sphere { position: relative; width: 176px; height: 176px; border-radius: 50%; overflow: hidden; }
.dna-sphere::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.14), rgba(255,255,255,0) 64%);
}
.dna-sphere-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%; z-index: 2;
  background: var(--card); box-shadow: 0 0 1px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.10);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dna-sphere-core b { font-size: 21px; font-weight: 300; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.dna-sphere-core span { font-family: var(--font-mono); font-size: 7.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; }
.dna-sphere-caption { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; }
.dna-sphere-caption::before { content: '[ '; }
.dna-sphere-caption::after  { content: ' ]'; }

/* Tab pills — eggshell fill, hairline, identity dot (reference Tab Pill) */
.dna-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dna-tab {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 13px;
  font-size: 13px; color: var(--ink-2); letter-spacing: 0.01em; white-space: nowrap;
}
.dna-tab i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dna-tab b { color: var(--ink); font-weight: 600; font-feature-settings: "tnum" 1; margin-left: 1px; }
.dna-tab.dom { border-color: var(--ink); color: var(--ink); }

/* On-taupe adjustments: eggshell track, stone hairlines, body-size rows */
.dna-hero .dna-bar { background: var(--card); }
.dna-hero .dna-quote { border-top-color: var(--track); font-size: 14px; line-height: 1.6; padding: 10px 0; }
.dna-hero .dna-pill { background: var(--card); border: 1px solid var(--line); }
.dna-hero .dna-delta-row { border-top-color: var(--track); font-size: 13.5px; }
.dna-hero .insight-callout { background: var(--card); }
.dna-hero .versus-card { background: var(--card); }
@media (max-width: 760px) {
  .dna-hero { padding: 22px 20px; }
  .dna-hero-grid { flex-direction: column-reverse; align-items: center; }
  .dna-hero-main { width: 100%; }
}

/* ── Language DNA cohort v3 — sphere duo + dumbbell comparison ── */
.dna-sphere-duo { flex-shrink: 0; display: flex; gap: 20px; align-items: flex-start; }
.dna-sphere-wrap .dna-tier { margin-bottom: 2px; }

/* Dumbbell rows — High vs Low per style on a shared 0..cap scale */
.dna-db-row {
  display: grid; grid-template-columns: 110px 1fr 118px; gap: 14px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--track);
}
.dna-db-row:first-of-type { border-top: none; }
.dna-db-row .ddr-type { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.dna-db-row .ddr-type i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dna-db-track { position: relative; height: 4px; background: var(--card); border-radius: var(--r-pill); }
.dna-db-link { position: absolute; top: 0; bottom: 0; background: var(--tick); opacity: 0.5; }
.dna-db-nums { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; font-family: var(--font-mono); white-space: nowrap; }
.dna-db-nums .h { font-size: 12px; font-weight: 600; color: var(--ink); }
.dna-db-nums .l { font-size: 12px; color: var(--ink-3); }
.dna-db-nums .d { font-size: 11.5px; font-weight: 600; color: var(--ink); min-width: 30px; text-align: right; }
.dna-db-head {
  display: grid; grid-template-columns: 110px 1fr 118px; gap: 14px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 4px;
}
.dna-db-head .nums { text-align: right; }
@media (max-width: 700px) {
  .dna-db-head { display: none; }
  .dna-db-row {
    grid-template-columns: 1fr auto; gap: 8px 14px;
    grid-template-areas: "type nums" "track track";
  }
  .dna-db-row .ddr-type { grid-area: type; }
  .dna-db-row .dna-db-track { grid-area: track; }
  .dna-db-row .dna-db-nums { grid-area: nums; }
}

/* ── Sphere hover tooltip — full mix breakdown on hover/focus ── */
.dna-sphere-wrap { position: relative; }
.dna-sphere-wrap .dna-sphere { cursor: help; }
.dna-tip {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--card); border: 1px solid var(--line-3);
  border-radius: var(--r-md); box-shadow: var(--shadow-elevated);
  padding: 10px 13px; z-index: 30; min-width: 172px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.dna-sphere-wrap:hover .dna-tip,
.dna-sphere-wrap:focus-within .dna-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
/* (Stage C fix) On a phone the hidden tip, centred under the sphere, stuck
   out 5px past a 320px screen (an invisible box still widens the page): it
   hangs from the sphere's right edge instead. */
@media (max-width: 600px) {
  .dna-tip { left: auto; right: 0; transform: translateY(4px); }
  .dna-sphere-wrap:hover .dna-tip, .dna-sphere-wrap:focus-within .dna-tip { transform: translateY(0); }
}
.dna-tip-hd {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 6px; white-space: nowrap;
}
.dna-tip-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); padding: 2.5px 0; white-space: nowrap; }
.dna-tip-row i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dna-tip-row b { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--ink); padding-left: 14px; }
.dna-tip-row.dom { color: var(--ink); font-weight: 600; }

/* Core chip sub-label was too dim on the dark chip */
.dna-sphere-core span { color: var(--ink-3); }

/* Identity legend under the sphere duo */
.dna-duo-col { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dna-duo-col .dna-legend { justify-content: center; max-width: 320px; margin-top: 0; gap: 4px 14px; }

/* ── Sphere idle drift — the gradient field slowly rotates behind the
      fixed core chip; the one animated product moment. ── */
.dna-sphere-field {
  position: absolute; inset: -22%;
  border-radius: 50%;
  animation: dna-drift 28s linear infinite;
  will-change: transform;
}
.dna-sphere-core { z-index: 2; }
.dna-sphere::after { z-index: 1; }
@keyframes dna-drift { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dna-sphere-field { animation: none; } }

/* ── Nesting rule: a card inside a mist card becomes a white artifact
      (Explorer detail view, breakdowns rendered into card containers).
      Instrument surfaces are exempt — they stay constant-dark. ── */
.card .card:not(.ins) {
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

/* ════════════════════════════════════════════════════════════
   Editorial page architecture (Steep) — hero collage, serif
   section heads outside cards, fog bands, text links.
   ════════════════════════════════════════════════════════════ */

/* Ghost category tag — typographic, no chrome */
.ghost-tag {
  display: block;
  font-family: var(--font-sans); font-size: 14px; font-weight: 400;
  color: var(--ink-3); letter-spacing: 0.02em; margin-bottom: 8px;
}

/* Text link with arrow — lowest-emphasis action */
.text-link {
  font-family: var(--font-sans); font-size: 15px; font-weight: 450;
  color: var(--ink); text-decoration: none; background: none; border: none;
  cursor: pointer; padding: 4px 0; white-space: nowrap;
}
.text-link::after { content: ' →'; }
.text-link:hover { text-decoration: underline; }

/* Hero collage — serif statement + floating artifacts at offsets */
.hero-collage {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px; align-items: center;
  padding: 24px 0 16px; margin-bottom: 32px;
}
.hero-statement {
  font-size: clamp(32px, 4vw, 48px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.1;
  color: var(--ink); margin: 0 0 16px;
}
.hero-statement em { font-style: normal; color: var(--ink-3); }
.hero-sub { font-size: 17px; color: var(--ink-3); line-height: 1.5; margin: 0; max-width: 46ch; }
.hero-ctas { display: flex; gap: 10px; align-items: center; margin-top: 28px; flex-wrap: wrap; }

.hero-art { position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.hero-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 4px 0 8px; }

@media (max-width: 1080px) {
  .hero-collage { grid-template-columns: 1fr; gap: 32px; padding-top: 8px; }
  .hero-art { flex-direction: row; }
  .hero-art .insight-tile { flex: 1; }
}
@media (max-width: 640px) { .hero-art { flex-direction: column; } .hero-mini-row { grid-template-columns: 1fr; } }

/* Serif section heads that live on the canvas, not inside cards */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin: 36px 0 16px; flex-wrap: wrap;
}
.section-head h2 {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.2px; line-height: 1.3; margin: 0; color: var(--ink);
}
.section-head h2 em { font-style: normal; color: var(--ink-3); }
.section-head .sh-sub { font-size: 15px; color: var(--ink-3); margin: 6px 0 0; }

/* Full-bleed fog band for section rhythm */
.section-band {
  margin: 64px -48px -80px; padding: 8px 48px 72px;
  background: var(--glass-light);
}
.section-band .section-head { margin-top: 32px; }
@media (max-width: 768px) { .section-band { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } }

/* Pattern rows directly on the canvas */
.pattern-list .insight-pattern { border-top-color: var(--line); }
.pattern-list .insight-pattern:first-of-type { border-top: none; }

/* The "editorial" page header (44px title, 17px lead, 14px sans eyebrow)
   that used to be set here went in stage C: the page header is the PAGE KIT's
   (top of this file), the design's 28/400 with a mono kicker. Until then
   css/workbench-redesign.css (loaded later) overrode this block anyway. */

/* ════════════════════════════════════════════════════════════
   Production comparison — insight-first, honest by construction.
   Differences ranked and visualized; matches folded, not dramatized.
   ════════════════════════════════════════════════════════════ */
.cmp-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cmp-dot.hi { background: var(--green); }
.cmp-dot.lo { background: var(--red); }
.cmp-dot.note { background: var(--ink-4); }

@media (min-width: 701px) {
  .cmp-row, .cmp-head { grid-template-columns: 170px 1fr 128px; }
}
.cmp-row .ddr-type { color: var(--ink-2); font-size: 13.5px; }

.cmp-cat-row {
  display: grid; grid-template-columns: 170px 1fr 1fr; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--track); align-items: baseline;
}
.cmp-cat-row .ddr-type { color: var(--ink-2); font-size: 13.5px; }
.cmp-side { font-size: 13.5px; color: var(--ink); font-weight: 480; display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.cmp-side.lo { color: var(--ink-3); font-weight: 400; }
.cmp-none { font-size: 14.5px; color: var(--ink-3); padding: 14px 0 4px; line-height: 1.6; }

.cmp-same { margin-top: 16px; border-top: 1px solid var(--track); padding-top: 12px; }
.cmp-same summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--ink-3); user-select: none; }
.cmp-same summary::-webkit-details-marker { display: none; }
/* Its chevron is the kit's, drawn in the @media screen block beside
   .cal-ledger (search "kit's chevron"); paper prints no twisty. */
.cmp-match-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
.cmp-match {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 4px 12px;
  font-size: 12.5px; color: var(--ink-3);
}
.cmp-match b { color: var(--ink-2); font-weight: 480; }

/* ── Script template: what is tested, what leans, what is only described ──── */
.tpl-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tpl-brief { display: inline-flex; gap: 6px; }
.tpl-band { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; margin: 22px 0 0; }
.tpl-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.tpl-row + .tpl-row { border-top: 1px solid var(--track); }
.tpl-row b { color: var(--ink); font-weight: 560; }
.tpl-mark { font-size: 14px; color: var(--ink-3); text-align: center; }
.tpl-mark.on { color: var(--green); }
.tpl-vals { font-variant-numeric: tabular-nums; color: var(--ink-2); margin-left: 4px; }
.tpl-fx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: 4px; font-variant-numeric: tabular-nums; }
.tpl-fx b { color: var(--ink-2); font-weight: 600; }
.tpl-fx .fx-ci { color: var(--ink-2); }
.tpl-est, .tpl-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-3); border: 1px solid var(--line-3); border-radius: var(--r-pill); padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.tpl-why { font-size: 12px; color: var(--ink-3); margin-left: 4px; }
.tpl-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; max-width: 70ch; }
.tpl-desc-row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 13px; color: var(--ink-2); }
.tpl-desc-row + .tpl-desc-row { border-top: 1px solid var(--track); }
.tpl-desc-k { color: var(--ink-3); }
@media (max-width: 640px) { .tpl-desc-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

.badge-ghost { background: var(--card); color: var(--ink-3); border-color: var(--line-3); }

.cmp-kw { margin-top: 16px; border-top: 1px solid var(--track); padding-top: 14px; }
.cmp-kw-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: start; padding: 5px 0; }
.cmp-kw-lbl { font-size: 12.5px; color: var(--ink-3); padding-top: 4px; }
.cmp-kw-row .badge { margin: 2px 4px 2px 0; }

/* Ranked findings — one sentence per real signal */
.finding-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--track); }
.finding-row:first-of-type { border-top: none; }
.finding-row .cmp-dot { margin-top: 8px; }
.finding-row p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.finding-row p strong { color: var(--ink); font-weight: 480; }

@media (max-width: 700px) {
  .cmp-cat-row { grid-template-columns: 1fr; gap: 5px; }
  .cmp-kw-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ════════════════════════════════════════════════════════════
   Charts sit straight in their panel's body, as Home's and the Run page's
   do. (Stage C fix: this was the stage-0 "dark instrument panel" — its own
   --panel fill, hairline, radius and 18px padding — so every chart in a kit
   panel (Leaderboard's Top ten, Compare's four, the Analysis scatters) was
   framed twice. Paper keeps its hairline from the print block below.)
   ════════════════════════════════════════════════════════════ */
.chart-panel-title {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--panel-mut); text-transform: uppercase; letter-spacing: 0.12em;
  margin: 0 0 12px;
}

/* Metadata rows — service-card style key/value readout on the dark panel */
.meta-rows {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--r-md); padding: 6px 16px;
}
.meta-row {
  display: grid; grid-template-columns: 100px 1fr; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--track);
  font-size: 13.5px; align-items: baseline;
}
.meta-row:first-child { border-top: none; }
.meta-row .mr-k {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-3); padding-top: 2px;
}
.meta-row .mr-v { color: var(--ink); font-weight: 480; min-width: 0; overflow-wrap: anywhere; }
.meta-row .mr-v .small-muted { font-weight: 400; }

/* Log-level style status pills — constant-dark chips, dot carries the state */
.lvl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line2); color: var(--ink2); background: var(--panel2);
  white-space: nowrap;
}
.lvl-pill i { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: var(--ink4); }
.lvl-pill.ok i   { background: var(--tier-high); }
.lvl-pill.warn i { background: var(--warn); }
.lvl-pill.err i  { background: var(--tier-low); }

/* Data-density tables — dark instrument surface, mono headers, hover trace */
.versus-table, .table {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  border-collapse: separate; border-spacing: 0;
}
.versus-table th, .table th {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.versus-table th.num, .versus-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.versus-table td { padding: 8px 12px; font-size: 13px; }
.versus-table th:first-child, .versus-table td:first-child,
.table th:first-child, .table td:first-child { padding-left: 16px; }
.versus-table th:last-child, .versus-table td:last-child,
.table th:last-child, .table td:last-child { padding-right: 16px; }
.versus-table tbody tr:last-child td, .table tbody tr:last-child td { border-bottom: none; }
.versus-table tbody tr:last-child td:first-child, .table tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--r-md) - 1px); }
.versus-table tbody tr:last-child td:last-child, .table tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--r-md) - 1px); }
.versus-table tbody tr:hover, .table tbody tr:hover { background: var(--hover); }

/* ════════════════════════════════════════════════════════════
   Instrument scope — RETIRED. These surfaces used to re-declare the
   ink/line/status tokens to a constant-dark palette, so the light theme
   carried dark islands (and the readout's meta rows measured 1.57:1 when a
   later rule made them transparent on a light column). They are ordinary
   theme surfaces now: --panel is an alias of --card. What stays is their
   default text tier.
   ════════════════════════════════════════════════════════════ */
.ins,
.readout-card,
.dna-hero,
.insight-tile,
.versus-card,
.meta-rows,
.prov,
.versus-table,
.table {
  color: var(--ink-2);
}
/* A mist/white card promoted to an instrument */
.card.ins {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: none;
}
.card.ins h2, .card.ins h3, .card.ins h4 { color: var(--ink); }

/* ════════════════════════════════════════════════════════════
   WORKSPACE · SPACES (stage C3) — route `spaces` (js/spaces-page.js), with
   the bulk CSV card (js/bulk-import.js) in its folding panel. The page kit
   (header, panels, controls); the spaces are the Library's chips (.lib-chip,
   a colour dot .lib-dot, the count in mono), a chip on = --btn/--btnInk; the
   creators are rows in a panel, a toggle chip per space. A space colour only
   ever tints a dot: text stays on ink tokens, so stored colours are safe in
   both themes.
   ════════════════════════════════════════════════════════════ */
.sp-page .pg-ph h2 .pg-ph-sub { font-family: var(--font-mono); font-size: 11px; }
.spaces-bar { gap: 6px; }
/* Every space in view: the strip wraps, on a phone too (the Library's chip
   rows scroll sideways under 900px; a list of spaces is read whole). */
.sp-page .spaces-bar.lib-chiprow { flex-wrap: wrap; overflow: visible; }
.space-chip, .sp-pill { display: inline-flex; align-items: center; gap: 7px; }
.space-chip .lib-dot, .sp-pill .lib-dot { width: 8px; height: 8px; }
.space-chip b { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink3); font-variant-numeric: tabular-nums; }
.space-chip.is-on b { color: inherit; opacity: .8; }
.space-chip.is-on .lib-dot { box-shadow: 0 0 0 1.5px var(--btnInk); }
.sp-hint { margin-top: 10px; }
/* New space: the kit's input and an outline button on the panel's header row. */
.sp-new { gap: 6px; flex-wrap: nowrap; }
.sp-new .pg-input { width: 180px; }
.sp-new .btn { height: 34px; }
/* The chosen space's own controls, under the chips in the same panel. */
.sp-manage { display: grid; gap: 10px; border-top: 1px solid var(--line); }
.sp-manage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sp-manage-lbl { display: inline-flex; align-items: center; gap: 7px; }
.sp-manage .pg-controls { gap: 8px 12px; }
.sp-manage .pg-field.is-grow { flex: 0 1 360px; }
.sp-sw-row { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sp-sw { width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.sp-sw.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--card) inset; }
.sp-sw:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.text-btn { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--ink-3); padding: 6px 4px; }
.text-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sp-warn .sp-err { display: block; margin-top: 4px; color: var(--ink3); overflow-wrap: anywhere; }

/* Creators: one row each — the folder, then a toggle chip per space, then
   where it came from. */
.creators-list { display: flex; flex-direction: column; }
.creator-row {
  display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr) auto; gap: 8px 18px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line); min-width: 0;
}
.creator-row:last-child { border-bottom: 0; }
.cr-id { min-width: 0; }
.cr-name { font-size: 13.5px; font-weight: 500; color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.cr-handle { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--ink3); }
.cr-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); margin-top: 2px; }
.creator-spaces { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
/* A toggle per space on each row. A row has as many as there are spaces, so
   "in" is the quiet filled chip (--chip, ink, the dot whole) rather than the
   filter strip's --btn fill; "not in" is the outline, --ink3, the dot faint.
   aria-pressed carries the state for assistive tech. */
/* (Scoped to the row: the LIBRARY section's .lib-chip rules come later in
   this file and would win at equal specificity.) */
.creator-spaces .sp-pill { padding: 3px 9px; font-size: 11.5px; color: var(--ink3); border-color: var(--line); }
.creator-spaces .sp-pill .lib-dot { opacity: .35; }
.creator-spaces .sp-pill.is-on { background: var(--chip); border-color: var(--line2); color: var(--ink); }
.creator-spaces .sp-pill.is-on .lib-dot { opacity: 1; }
.creator-spaces .sp-pill:hover { color: var(--ink); }
/* Where a creator came from, and the way back to it. Empty for a folder with
   no stored profile_url, and the column collapses rather than leaving a gap. */
.cr-src { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.cr-src-link { font-size: 12px; color: var(--ink2); text-decoration: none; }
.cr-src-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) {
  .creator-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cr-src { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .sp-new { width: 100%; }
  .sp-new .pg-input { flex: 1 1 140px; width: auto; }
  .sp-manage .pg-field.is-grow { flex: 1 1 100%; }
}

/* ─── The bulk CSV card (js/bulk-import.js), in Spaces' folding panel ─── */
.bulk-details .pg-meta { white-space: normal; }
.bulk-card { display: grid; gap: 10px; }
.bulk-card > * { margin: 0; }
.bulk-sub { max-width: 78ch; }
.bulk-drop input[type=file] { font-size: 12.5px; color: var(--ink2); max-width: 100%; }
.bulk-drop input[type=file]::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border: 1px solid var(--line2); border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 12px; cursor: pointer;
}
.bulk-drop input[type=file]::file-selector-button:hover { background: var(--hover); }
textarea.pg-input.bulk-paste { min-height: 78px; font-family: var(--font-mono); font-size: 12px; }
.bulk-actions { gap: 8px; }
.bulk-summary { font-size: 11.5px; color: var(--ink3); }
.bulk-summary b { color: var(--ink); font-weight: 500; }
.bulk-controls { padding-top: 10px; border-top: 1px solid var(--line); }
.bulk-controls .pg-input { width: 84px; }
.bulk-note { max-width: 96ch; font-size: 12px; }
.bulk-run { gap: 10px; }
.bulk-phase { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink3); }
.bulk-progwrap { display: flex; flex-direction: column; gap: 12px; }
.bulk-metrics { display: flex; gap: 22px; font-size: 12.5px; color: var(--ink3); }
.bulk-metrics b { color: var(--ink); font-weight: 500; font-family: var(--font-mono); }
.bulk-prog-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink3); margin-bottom: 5px; }
.bulk-bar { height: 4px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.bulk-bar i { display: block; height: 100%; background: var(--teal); border-radius: var(--r-pill); transition: width .4s ease; }
.bulk-log { max-height: 220px; overflow-y: auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.bulk-log-line { font-family: var(--font-mono); font-size: 11px; color: var(--ink2); line-height: 1.5; overflow-wrap: anywhere; }
.bulk-log-line.ok { color: var(--teal); }
.bulk-log-line.err { color: var(--bad); }
/* Recoverable: something failed but is being retried. Distinct from .err so a
   transient mirror miss does not read like a lost video. */
.bulk-log-line.warn { color: var(--warn); }  /* matches .lvl-pill.warn */

/* ═══════════════════════════════════════════════════════════════════════════
   Roles — read-only viewers + admin panel
   ═══════════════════════════════════════════════════════════════════════════ */

/* Read-only viewers: hide embedded write controls that live inside otherwise
   read-only tabs. RLS blocks the writes server-side regardless — this just
   keeps dead buttons out of the viewer's face. (Write-only tabs are hidden
   whole by js/app.js applyRoleUI.) */
body.role-viewer #explorerCreateFolderBtn,
body.role-viewer #explorerDeleteFolderBtn,
body.role-viewer #explorerAnalyzeNowBtn,
body.role-viewer #moveConfirmBtn,
body.role-viewer #cohortDeepCard,
body.role-viewer .nl-write,
body.role-viewer [data-versus-analyze],
body.role-viewer [data-paid-analyze],
body.role-viewer [data-img-analyze] { display: none !important; }

/* ─── ADMIN · TEAM & ACCESS (stage C3) — route `admin` (js/admin-page.js).
   The page kit: the Admin header, one status line (#adminMsg, a .pg-note),
   the waiting list and the team as panels whose tables scroll inside their
   own .pg-table-wrap (the page itself never scrolls sideways — it did, by
   191px, at 390), Add a user as a stacked form. The two lower panels sit
   side by side while both fit and stack when they do not (flex-wrap, so a
   narrow container stacks them too, not only a narrow window). ─── */
.admin-page { max-width: 1180px; }
.admin-cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; min-width: 0; }
.admin-add { flex: 1 1 300px; min-width: 0; }
.admin-team { flex: 2 1 420px; min-width: 0; }
.admin-form { display: grid; gap: 12px; }
.admin-form .btn-primary { height: 36px; }
.admin-gen { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.admin-gen input { flex: 1 1 auto; min-width: 0; }
.admin-gen .btn { height: 34px; white-space: nowrap; }
.admin-hint { font-size: 12px; color: var(--ink3); line-height: 1.55; }
.admin-pending > .admin-hint { margin: 0; padding: 10px 14px 0; }
.admin-pending h2 .badge { margin-left: 6px; vertical-align: 1px; }
/* The tables: the Library's anatomy (.pg-table-wrap), a compact select in a cell. */
.admin-table { min-width: 520px; }
.admin-table td.admin-email { font-weight: 500; color: var(--ink); }
.admin-table td.admin-when { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink3); white-space: nowrap; }
.admin-table td.admin-act { text-align: right; white-space: nowrap; }
.admin-table select.pg-input { height: 30px; width: 124px; font-size: 12.5px; }
/* (Stage C fix) A changed role waits for Apply (or Cancel) beside its select. */
.admin-role-cell { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.admin-role-pending { display: inline-flex; gap: 4px; }
.admin-role-pending[hidden] { display: none; }
/* Brought into view by showMsg: clear of the 52px sticky top bar. */
.admin-msg { scroll-margin-top: 64px; }
.admin-you { font-size: 11.5px; color: var(--ink3); margin-left: 4px; }
/* The credentials of an account made with a password, shown once to copy. */
.admin-cred { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.admin-cred-hd { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink3); margin-bottom: 8px; }
.admin-cred-row { display: flex; align-items: center; gap: 12px; margin: 6px 0; font-size: 12.5px; min-width: 0; }
.admin-cred-row span { width: 76px; color: var(--ink3); flex: none; }
.admin-cred-row code {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
  word-break: break-all; user-select: all; min-width: 0;
}

.role-pill {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.role-pill.role-admin  { background: var(--acc-soft);   color: var(--acc);   border-color: var(--acc-border); }
.role-pill.role-member { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
.role-pill.role-viewer { background: var(--green-soft); color: var(--green); border-color: var(--green-border); }

/* ═══════════════════════════════════════════════════════════════════════════
   Explorer — creator browser (thumbnail wall)
   ═══════════════════════════════════════════════════════════════════════════ */
.fb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.fb-sub { font-size: 13px; color: var(--ink-3); margin: 4px 0 0; }
.fb-actions { display: flex; align-items: center; gap: 8px; }
.fb-search {
  width: 220px; font-size: 13px; padding: 8px 12px;
  border: 1px solid var(--line-3); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink);
}

.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.fb-chips:empty { display: none; }
.fb-chip {
  font-size: 12px; padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--line-3); background: var(--card); color: var(--ink-2);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.fb-chip:hover { background: var(--hover); color: var(--ink); }
.fb-chip.is-on { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.fb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.fb-card {
  display: flex; flex-direction: column; gap: 7px; padding: 0; text-align: left;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.fb-cover {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 14;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: border-color 140ms ease, transform 140ms ease;
}
.fb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-cover-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--ink-3);
}
.fb-card:hover .fb-cover { border-color: var(--line-3); transform: translateY(-2px); }
.fb-card.is-active .fb-cover { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }

.fb-score {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  color: var(--on-media-ink); background: var(--on-media-bg); backdrop-filter: blur(4px);
  padding: 3px 8px; border-radius: var(--r-pill);
}
.fb-name {
  font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-card.is-active .fb-name { color: var(--ink); font-weight: 600; }
.fb-meta { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); }
.fb-bar { display: flex; height: 3px; border-radius: var(--r-pill); overflow: hidden; background: var(--line-2); }
.fb-bar i { display: block; height: 100%; }
.fb-empty { font-size: 13px; color: var(--ink-3); padding: 12px 0; margin: 0; }

@media (max-width: 640px) {
  .fb-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
  .fb-search { width: 100%; }
  .fb-actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIBRARY — route `explorer` (js/pages.js renderExplorerPage), the design's
   Library screen ("Attention DNA - App", library-dark.png): a rail of scopes
   (All · kinds · spaces · boards), the scope title over "N of M", Table |
   Grid, New analysis; the search box with its signal filters and syntax;
   the FORMAT / TIER chip strip; the table (default) or the grid. Every
   colour is a token, so both themes follow. Under 900px the rail folds into
   the header's scope <select>; a narrow results pane draws the table as a
   card list (container query), so nothing scrolls the page sideways.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The rail runs the full height of the page beside the sidebar, as in the
   design: the page's own padding is taken back, and given to the main pane. */
.lib {
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  margin: -20px -20px -48px; min-height: calc(100vh - 52px);
  font-size: 13px; color: var(--ink);
}
.lib-rail {
  border-right: 1px solid var(--line); padding: 16px 10px 32px;
  display: flex; flex-direction: column; gap: 18px; min-width: 0;
}
.lib-rail-sec { display: grid; gap: 2px; min-width: 0; }
.lib-rail-h {
  display: flex; justify-content: space-between; align-items: center; padding: 0 8px 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3);
}
.lib-rail-add {
  width: 20px; height: 20px; margin: -3px -4px -3px 0; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink3);
  font-family: var(--font-mono); font-size: 14px; line-height: 1; cursor: pointer;
}
.lib-rail-add:hover { background: var(--hover); color: var(--ink); }
.lib-rail-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; margin: 0;
  padding: 7px 8px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink2); font-family: var(--font-sans); font-size: 13px; line-height: 1.3; text-align: left; cursor: pointer;
}
.lib-rail-item:hover { background: var(--hover); color: var(--ink); }
.lib-rail-item.is-on { background: var(--chip); color: var(--ink); }
.lib-rail-item:focus-visible { outline-offset: -2px; }
.lib-rail-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-rail-n { flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.lib-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--ink4); }
.lib-hash { flex-shrink: 0; color: var(--ink3); font-size: 11px; width: 8px; text-align: center; }
.lib-rail-empty { margin: 0; padding: 4px 8px; font-size: 12px; line-height: 1.45; color: var(--ink3); }

.lib-main { min-width: 0; padding: 16px 20px 48px; display: flex; flex-direction: column; gap: 12px; container-type: inline-size; container-name: libmain; }
.lib-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.lib-title { display: grid; gap: 2px; min-width: 0; }
.lib-title h1 { margin: 0; font-family: var(--font-sans); font-size: 26px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.lib-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); }
.lib-count strong { font-weight: 500; color: var(--ink2); }
.lib-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lib-scope-select { display: none; }
.lib-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--chip); border: 1px solid var(--line); }
.lib-seg button {
  padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink2);
  font-family: var(--font-sans); font-size: 12px; line-height: 1.4; cursor: pointer;
}
.lib-seg button:hover { color: var(--ink); }
.lib-seg button.is-on { background: var(--btn); color: var(--btnInk); }
.lib-new {
  padding: 7px 12px; border: 1px solid var(--btn); border-radius: var(--r-sm); background: var(--btn); color: var(--btnInk);
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1.3; cursor: pointer; white-space: nowrap;
}
.lib-new:hover { opacity: .88; }
.lib-new[hidden] { display: none; }
.lib-btn {
  padding: 6px 11px; border: 1px solid var(--line2); border-radius: var(--r-sm); background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-size: 12px; line-height: 1.3; cursor: pointer; white-space: nowrap;
}
.lib-btn:hover { background: var(--hover); }
.lib-linklike { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: var(--teal); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lib-linklike:hover { color: var(--ink); }
.lib-note { margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 12px; line-height: 1.5; color: var(--ink2); }
.lib-note-bad { border-color: var(--bad-border); background: var(--bad-bg); color: var(--ink); }
#libNotes:empty { display: none; }
#libNotes .load-failure { margin: 0; }

/* Search: the box, then one row of compact controls under it. */
#explorerSearchCard { padding: 0; border: 0; border-radius: 0; background: none; display: grid; gap: 8px; }
.xq-bar { position: relative; display: flex; align-items: center; }
.xq-bar > svg { position: absolute; left: 12px; color: var(--ink3); pointer-events: none; }
.xq-bar input.xq-input {
  width: 100%; height: 38px; margin: 0; padding: 0 40px 0 36px; font-family: var(--font-sans); font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--chip); color: var(--ink); box-shadow: none;
}
.xq-bar input.xq-input::placeholder { color: var(--ink3); }
.xq-bar input.xq-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--ring); }
.xq-clear {
  position: absolute; right: 7px; width: 26px; height: 26px; border-radius: 6px;
  border: none; background: transparent; color: var(--ink2); cursor: pointer;
  font-size: 15px; line-height: 1; display: none; align-items: center; justify-content: center;
}
.xq-clear.is-on { display: inline-flex; }
.xq-clear:hover { background: var(--hover); color: var(--ink); }
.lib-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.lib-tools-left, .lib-tools-right { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-width: 0; }
.lib-disc {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--ink2); font-family: var(--font-sans); font-size: 12px; line-height: 1.4; cursor: pointer;
}
.lib-disc span { font-size: 11px; color: var(--ink3); }
.lib-disc::after { content: '⌄'; color: var(--ink3); margin-top: -4px; }
.lib-disc[aria-expanded="true"]::after { content: '⌃'; margin-top: 4px; }
.lib-disc:hover, .lib-disc[aria-expanded="true"] { color: var(--ink); background: var(--hover); }
.lib-disc.has-on span { color: var(--teal); }
.lib-cols-wrap { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.lib-cols-wrap[hidden] { display: none; }
.lib-cols-wrap .lib-seg { padding: 2px; }
.lib-cols-wrap .lib-seg button { padding: 3px 8px; font-size: 11.5px; }
.lib-sort-note { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--ink2); }
.lib-sort-note[hidden] { display: none; }
.lib-sort-note b { font-weight: 500; color: var(--ink); }
.lib-sort-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.lib-tools select.xq-sort {
  width: auto; height: 30px; margin: 0; padding: 0 28px 0 10px; font-family: var(--font-sans); font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background-color: var(--card); color: var(--ink);
}
.lib-tools select.xq-sort:focus-visible { border-color: var(--ink); outline: 2px solid var(--teal); outline-offset: 2px; }
.lib-tools .xq-dir { height: 30px; padding: 0 9px; border-radius: var(--r-sm); background: var(--card); }
.lib-panel { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.lib-panel[hidden] { display: none; }
.lib-panel .xq-chips { margin: 0; }
.lib-help { margin: 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: var(--ink2); white-space: pre-wrap; overflow-wrap: anywhere; }
.xq-status { font-size: 12px; color: var(--ink3); line-height: 1.5; }
.xq-status:empty { display: none; }
.xq-status strong { color: var(--ink); font-weight: 500; }
.xq-status .xq-err { color: var(--bad); }
/* Why a query returned nothing: what each clause alone would have kept. */
.xq-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xq-why span { font-family: var(--font-mono); font-size: 11px; background: var(--chip); border-radius: var(--r-pill); padding: 3px 9px; color: var(--ink2); }
.xq-why span b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.xq-why span.zero { color: var(--bad); background: var(--bad-bg); }
.xq-why span.zero b { color: var(--bad); }
.xq-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xq-chips:empty { display: none; }
.xq-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); margin-right: 4px; }
#explorerQuickChips .fb-chip, #explorerActiveChips .fb-chip { font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: transparent; color: var(--ink2); }
#explorerQuickChips .fb-chip:hover { background: var(--hover); color: var(--ink); }
#explorerQuickChips .fb-chip.is-on { background: var(--btn); border-color: var(--btn); color: var(--btnInk); }
.fb-chip.is-creator { background: var(--teal-bg); color: var(--ink); border-color: var(--teal-border); font-weight: 500; }
.fb-chip .x { margin-left: 6px; color: var(--ink2); }

/* FORMAT / TIER: the design's chip strip between two hairlines. */
.lib-filters {
  display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.lib-chiprow { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; min-width: 0; }
.lib-chips { display: contents; }
.lib-lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); margin-right: 4px; }
.lib-chip {
  padding: 4px 9px; border: 1px solid var(--line2); border-radius: var(--r-pill); background: transparent; color: var(--ink2);
  font-family: var(--font-sans); font-size: 12px; line-height: 1.35; cursor: pointer; white-space: nowrap;
}
.lib-chip:hover { background: var(--hover); color: var(--ink); }
.lib-chip.is-on { background: var(--btn); border-color: var(--btn); color: var(--btnInk); }
.lib-chip-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); margin-left: 4px; }

/* The statistics strip (opt-in) and the modes bar. */
#explorerStats > summary { font-size: 12px; color: var(--ink2); }
/* The bar holds the tablist (two tabs) and, beside it, the two shortcuts. */
.lib-modebar { display: flex; align-items: center; gap: 4px 20px; min-width: 0; border-bottom: 1px solid var(--line); }
#explorerModeTabs {
  display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; border-bottom: 0; overflow-x: auto; min-width: 0;
}
#explorerModeTabs .sub-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 12px; color: var(--ink3); }
#explorerModeTabs .sub-tab:hover { color: var(--ink); }
#explorerModeTabs .sub-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
#explorerModeTabs .sub-tab .n { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--chip); color: var(--ink2); margin: 0; }
.lib-links { margin-left: auto; display: flex; gap: 16px; flex-shrink: 0; }
.lib-links button { border: 0; background: none; padding: 8px 0; color: var(--ink3); font-family: var(--font-sans); font-size: 12px; cursor: pointer; white-space: nowrap; }
.lib-links button:hover { color: var(--ink); }

#explorerResultsCard, #explorerBrowseCard { padding: 0; border: 0; border-radius: 0; background: none; }
#explorerBrowseCard .fb-head { margin: 4px 0 14px; }
.lib-h2 { margin: 0; font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink); }
.lib-key { display: grid; gap: 3px; margin-top: 12px; font-size: 11px; line-height: 1.5; color: var(--ink3); }
.lib-key:empty { display: none; }
.lib-key .hm-dna-key { display: inline-flex; vertical-align: middle; margin: 0 0 0 4px; }

/* ─── The table: the design's anatomy on js/creative-table.js ─── */
/* position: relative, so an absolutely placed descendant (the actions
   header's sr-only name) has its containing block inside the scroller and is
   clipped with the rest of a wide (All fields) table — it widened the page. */
.lib-table-wrap { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow-x: auto; }
.table.lib-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--ink); background: transparent; }
.table.lib-table th {
  padding: 8px 5px; border-bottom: 1px solid var(--line); background: var(--card); white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); text-align: left;
}
.table.lib-table th:first-child, .table.lib-table td:first-child { padding-left: 14px; position: static; }
.table.lib-table th:last-child, .table.lib-table td:last-child { padding-right: 14px; }
.table.lib-table th.num, .table.lib-table td.num { text-align: right; }
.table.lib-table th.sortable:hover { color: var(--ink); }
.table.lib-table th.sort-asc, .table.lib-table th.sort-desc { color: var(--ink2); }
/* The design marks the sorted column only; the others say they sort when
   pointed at or focused. */
.table.lib-table th.sortable::after { content: ''; }
.table.lib-table th.sortable:hover::after, .table.lib-table th.sortable:focus-visible::after { content: ' ↕'; opacity: .5; }
.table.lib-table th.sort-asc::after { content: ' ↑'; opacity: 1; color: var(--ink2); }
.table.lib-table th.sort-desc::after { content: ' ↓'; opacity: 1; color: var(--ink2); }
.table.lib-table th:focus-visible { outline-offset: -3px; }
.table.lib-table td { padding: 7px 5px; border-bottom: 1px solid var(--line); vertical-align: middle; background: transparent; }
.table.lib-table tbody tr:last-child td { border-bottom: 0; }
.table.lib-table tbody tr { cursor: pointer; }
.table.lib-table tbody tr:hover td { background: var(--hover); }
.table.lib-table tbody tr:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.table.lib-table td.num { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.table.lib-table td.is-null { color: var(--ink3); }
.table.lib-table .lib-c-run { min-width: 146px; }
/* A long format name ("Voiceover over footage", "On-screen text, no
   speech") wraps inside its cell: .creative-table td is nowrap, and with a
   max-width that let the text run on over the Dur column. */
.table.lib-table td.lib-c-fmt { white-space: normal; min-width: 84px; max-width: 132px; line-height: 1.3; }
.table.lib-table .lib-c-dna { width: 64px; min-width: 56px; }
/* Air between the header pairs that ran together (stage B review fix2,
   item 7): with 5px cells a right-aligned number column's header ended 10px
   from the next header's start — about one word space in 10px mono caps — so
   DUR HOOK, SCORE TIER and PERFORMANCE DNA read as phrases. The column after
   each right-aligned one gets a wider left pad: 19px between the pair where
   the table only just fits (a 1280 laptop), 25px from ~880px of content (the
   design spaces them ~30px). The DNA cell grows by its pad so the bar keeps
   its length. All fields' columns get 12px a side, or ADDED STOP SHARE
   REWATCH NARRATIVE read as one line. Tables only — the card list (below)
   lays each fact out on its own. The room at 1280 comes from the Creative
   column's floor (146px, still two lines of name), so it keeps the table. */
@container libmain (width > 800px) {
  .table.lib-table th.lib-c-hook, .table.lib-table td.lib-c-hook,
  .table.lib-table th.lib-c-tier, .table.lib-table td.lib-c-tier,
  .table.lib-table th.lib-c-dna, .table.lib-table td.lib-c-dna { padding-left: 14px; }
  .table.lib-table .lib-c-dna { width: 70px; }
  .table.lib-table th.lib-c-more, .table.lib-table td.lib-c-more { padding-left: 12px; padding-right: 12px; }
  /* A table wider than its wrap (All fields) scrolls sideways inside it:
     the creative's name and its row actions stay pinned at the two edges
     (opaque, so what scrolls under them is hidden), and each pinned edge
     shows a hairline and a shadow while there is more table on its side
     (lib-can-left / lib-can-right, set by js/pages.js from the scroll) —
     the cue that the row goes on (stage B review fix2, item 6). Separate
     borders, so a pinned cell carries its own row line as it moves. */
  .table.lib-table { border-collapse: separate; border-spacing: 0; }
  .table.lib-table th.lib-c-run, .table.lib-table td.lib-c-run,
  .table.lib-table th.ct-actions, .table.lib-table td.ct-actions { position: sticky; z-index: 1; background-color: var(--card); }
  .table.lib-table th.lib-c-run, .table.lib-table td.lib-c-run { left: 0; }
  .table.lib-table.is-more .lib-c-run { min-width: 200px; }
  .table.lib-table th.ct-actions, .table.lib-table td.ct-actions { right: 0; }
  .table.lib-table tbody tr:hover td.lib-c-run, .table.lib-table tbody tr:hover td.ct-actions { background: linear-gradient(var(--hover), var(--hover)) var(--card); }
  .lib-can-left .table.lib-table .lib-c-run { box-shadow: inset -1px 0 0 var(--line2), 8px 0 10px -8px var(--scrim); }
  .lib-can-right .table.lib-table .ct-actions { box-shadow: inset 1px 0 0 var(--line2), -8px 0 10px -8px var(--scrim); }
  /* The row's focus ring is the tr's outline, which the pinned cells (a
     stacking layer of their own) would paint over at both ends: they draw
     their part of it themselves. */
  .table.lib-table tbody tr:focus-visible td.lib-c-run { box-shadow: inset 2px 0 0 var(--teal), inset 0 2px 0 var(--teal), inset 0 -2px 0 var(--teal); }
  .table.lib-table tbody tr:focus-visible td.ct-actions { box-shadow: inset -2px 0 0 var(--teal), inset 0 2px 0 var(--teal), inset 0 -2px 0 var(--teal); }
}
@container libmain (width > 880px) {
  .table.lib-table th.lib-c-hook, .table.lib-table td.lib-c-hook,
  .table.lib-table th.lib-c-tier, .table.lib-table td.lib-c-tier,
  .table.lib-table th.lib-c-dna, .table.lib-table td.lib-c-dna { padding-left: 20px; }
  .table.lib-table .lib-c-dna { width: 76px; }
}
.lib-c-added { color: var(--ink3); }
.table.lib-table td.lib-c-added { font-family: var(--font-sans); font-size: 12px; color: var(--ink3); }
.lib-run { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lib-thumb {
  flex: none; width: 24px; height: 38px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, var(--stripe) 0 4px, transparent 4px 8px);
}
.lib-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lib-run-id { display: grid; gap: 1px; min-width: 0; }
.lib-run-name {
  font-weight: 500; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lib-run-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; color: var(--ink3); }
.lib-run-sub > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-dots { display: inline-flex; gap: 2px; flex-shrink: 0; }
.lib-dots .lib-dot { width: 6px; height: 6px; }
.lib-fmt { color: var(--ink2); }
.lib-fmt.is-none { color: var(--ink3); }
.lib-score {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 6px; border-radius: var(--r-badge);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.3; white-space: nowrap; background: var(--chip); color: var(--ink2);
}
.lib-score b { font-weight: 500; font-size: 11px; }
.lib-score small { font-size: 10px; }
.lib-score.tone-high { background: var(--teal-bg); color: var(--teal); }
.lib-score.tone-mid  { background: var(--indigo-bg); color: var(--indigo); }
.lib-score.tone-low  { background: var(--bad-bg); color: var(--bad); }
.lib-score.is-none { background: none; color: var(--ink3); padding: 0; }
.lib-perf { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink2); }
.lib-c-dna .hm-dna:not(.is-empty) { width: 100%; height: 10px; }
.lib-c-tier { white-space: nowrap; }
.lib-row-acts { display: inline-flex; align-items: center; gap: 2px; }
.lib-row-acts .cr-save {
  position: static; opacity: 1; width: 26px; height: 26px; border-radius: 6px; font-size: 12px;
  border: 1px solid var(--line); background: transparent; color: var(--ink3); backdrop-filter: none;
}
.lib-row-acts .cr-save:hover { color: var(--ink); background: var(--hover); transform: none; }
.lib-row-acts .cr-save.is-on { background: var(--purple-bg); border-color: transparent; color: var(--purple); }
.lib-del {
  width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink3); cursor: pointer;
}
.lib-del:hover { color: var(--bad); border-color: var(--bad-border); background: var(--bad-bg); }
.table.lib-table td.ct-actions { width: 1%; white-space: nowrap; text-align: right; }

/* ─── Tier chips (cards and table): the library's label, its basis as the title ─── */
.cr-tier {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: var(--r-badge);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.35; white-space: nowrap; background: var(--chip); color: var(--ink2);
}
.cr-tier i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink4); display: inline-block; flex-shrink: 0; }
.cr-tier.high { background: var(--teal-bg); color: var(--teal); }
.cr-tier.mid  { background: var(--indigo-bg); color: var(--indigo); }
.cr-tier.low  { background: var(--bad-bg); color: var(--bad); }
.cr-tier.failed { background: var(--warn-bg); color: var(--warn); }
.cr-tier.high i { background: var(--tier-high); }
.cr-tier.mid  i { background: var(--tier-mid); }
.cr-tier.low  i { background: var(--tier-low); }
.cr-tier.failed i { background: var(--warn); }
.cr-tier sup { font-size: 10px; line-height: 0; margin-left: -2px; }

/* ─── The grid: cards in the design's density ─── */
/* Cards in a row end level: they stretch to the row's height and the body
   takes the slack (only analysed cards have a hook line). */
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-items: stretch; }
.cr-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; text-align: left; font-family: inherit;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; user-select: none; transition: border-color .15s ease;
}
.cr-card:hover { border-color: var(--line2); }
.cr-card.is-active { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal-border); }
.cr-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.cr-cover { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--media-ph); }
.cr-cover.is-empty { background: repeating-linear-gradient(135deg, var(--stripe) 0 6px, transparent 6px 12px); }
.cr-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-cover-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; padding: 0 12px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink3); text-align: center;
}
.cr-cover-note { font-size: 10px; }
.cr-cover .vid-score, .cr-cover .vid-sus, .cr-cover .vid-duration {
  position: absolute; z-index: 2; width: auto; height: auto; border: 0; box-shadow: none; backdrop-filter: none;
  display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 7px; border-radius: var(--r-badge);
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.3;
}
.cr-cover .vid-score { top: 8px; right: 8px; bottom: auto; left: auto; background: var(--card); color: var(--ink); }
.cr-cover .vid-score b { font-weight: 500; }
.cr-cover .vid-score i, .cr-cover .vid-sus i { font-style: normal; font-size: 10px; }
.cr-cover .vid-score.high { background: var(--card); color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal-border); }
.cr-cover .vid-score.mid  { background: var(--card); color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo-border); }
.cr-cover .vid-score.low  { background: var(--card); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad-border); }
/* Under the AI score, on the same side: two quantities, never side by side
   on one line where they could be read as one (and never overlapping on a
   narrow card). */
.cr-cover .vid-sus { top: 36px; right: 8px; left: auto; background: var(--card); color: var(--purple); box-shadow: inset 0 0 0 1px var(--line2); }
.cr-cover .vid-duration { bottom: 8px; left: 8px; top: auto; right: auto; padding: 2px 6px; border-radius: 4px; background: var(--card); color: var(--ink2); font-size: 10px; }
.cr-cover .cr-save, .cr-cover .cr-remove {
  left: auto; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink2); backdrop-filter: none;
}
.cr-cover .cr-save.is-on { background: var(--purple); border-color: transparent; color: var(--btnInk); }
.cr-dna { display: block; padding: 0; height: 6px; }
.cr-dna .hm-dna { height: 6px; border-radius: 0; }
/* No reading: the strip's slot stays (an empty track), so every card's body
   starts at the same height. */
.cr-dna.is-empty { background: var(--chip); }
.cr-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.cr-title {
  font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The card's one way in: its name, a real button, stretched over the whole
   card (::after) so a click anywhere opens it. The star, the remove and note
   buttons sit above the stretch. Its focus ring is drawn on the card. */
.cr-open {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: none;
}
.cr-open::after { content: ''; position: absolute; inset: 0; z-index: 1; }
/* The facts that explain themselves on hover sit ABOVE that stretch, or it
   swallowed their titles (stage B review fix2, item 5): the tier's basis (*
   not cut from performance), "0 or not captured" / likes shown instead, the
   format's reading, the DNA mix, the spaces. A click on them still opens the
   card: the Library's and a board's grids open from any click inside
   .cr-card that is not a button (delegated, js/pages.js). */
.cr-card .cr-tier, .cr-card .cr-perf, .cr-card .cr-fmt, .cr-card .cr-dna, .cr-card .lib-dots { position: relative; z-index: 2; }
.cr-open:focus-visible { outline: none; }
.cr-card:has(.cr-open:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.cr-note-btn { position: relative; z-index: 3; }
.cr-folder { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; color: var(--ink3); }
.cr-folder > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); }
.cr-fmt { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink2); }
.cr-perf { color: var(--ink2); }
.cr-hook {
  font-size: 11.5px; color: var(--ink3); line-height: 1.45; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cr-empty { grid-column: 1 / -1; text-align: center; padding: 48px 20px; color: var(--ink2); font-size: 13px; line-height: 1.6; }
.cr-empty strong { color: var(--ink); display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.lib-table-wrap .cr-empty, .lib-table-wrap .load-failure { border: 0; margin: 0; }

details.xq-organise { padding: 14px 16px; margin-top: 16px; }
details.xq-organise > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
details.xq-organise > summary::-webkit-details-marker { display: none; }
details.xq-organise > summary .hint { font-size: 12px; color: var(--ink3); font-weight: 400; }
details.xq-organise > summary::after { content: '+'; font-family: var(--font-mono); color: var(--ink3); font-size: 16px; }
details.xq-organise[open] > summary::after { content: '−'; }
details.xq-organise[open] > summary { margin-bottom: 16px; }
.lib-organise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; align-items: end; }
.lib-organise-btns { display: flex; gap: 8px; }
.lib-organise-btns .btn { flex: 1; justify-content: center; }

/* A narrow results pane (under 800px of content: a tablet, a small window, a phone —
   the nine columns need ~797px once Format wraps, so a 1280 laptop with the
   rail open keeps the design's table): the table becomes a card list — each
   row its own block, each fact under its column's name (CreativeTable's
   data-label) — instead of scrolling. */
@container libmain (max-width: 800px) {
  .lib-table-wrap { overflow: visible; }
  .table.lib-table, .table.lib-table tbody { display: block; }
  /* Gone, not visually hidden: its sortable headers are tab stops, and
     hidden they took nine presses with no focus on screen. Each cell says
     its column (data-label), each row is named "Open <name>", and the Sort
     select sorts. */
  .table.lib-table thead { display: none; }
  /* One fixed grid of facts per card, the same on every card: the name on
     its own line, then Format · Dur · Hook · Score and Tier · Performance ·
     DNA · Added, each label over its value (12 tracks, spans by how much
     each fact needs). A missing fact keeps its slot as a dash, so no card
     reflows its facts around a gap and the list reads down in columns. */
  .table.lib-table tbody tr {
    position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid var(--line);
  }
  .table.lib-table tbody tr:last-child { border-bottom: 0; }
  .table.lib-table tbody tr:hover td { background: none; }
  .table.lib-table tbody tr:hover { background: var(--hover); }
  .table.lib-table td, .table.lib-table td:first-child, .table.lib-table td:last-child {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; min-width: 0; width: auto; max-width: none;
    grid-column: span 3; text-align: left;
  }
  .table.lib-table td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
  /* The name takes its own line (.creative-table td:first-child caps it at
     320px, which let the facts flow up under the absolutely placed actions). */
  .table.lib-table td.lib-c-run { grid-column: 1 / -1; display: block; padding-right: 76px; }
  .table.lib-table td.lib-c-fmt { grid-column: span 5; white-space: normal; }
  .table.lib-table td.lib-c-dur, .table.lib-table td.lib-c-hook { grid-column: span 2; }
  .table.lib-table td.lib-c-dna { overflow: hidden; }
  /* A fact wraps inside its slot (the All fields facts too: a narrative
     like "Problem-Agitate-Solve" is one long word). */
  .table.lib-table td { white-space: normal; overflow-wrap: anywhere; }
  .table.lib-table td.lib-c-run::before, .table.lib-table td.ct-actions::before { content: none; }
  .table.lib-table td.ct-actions { position: absolute; top: 10px; right: 12px; display: block; }
  .table.lib-table td.lib-c-dna .hm-dna { width: 100%; max-width: 72px; margin-top: 4px; }
  .lib-c-run { min-width: 0; }
}

/* Phone and narrow windows: the rail folds into the header's <select>. */
@media (max-width: 899.98px) {
  .lib { display: block; margin: -16px -16px -40px; min-height: 0; }
  .lib-rail { display: none; }
  .lib-main { padding: 14px 16px 40px; }
  .lib-scope-select {
    display: block; width: auto; max-width: 100%; height: 30px; margin: 0; padding: 0 28px 0 10px; font-size: 12px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background-color: var(--card); color: var(--ink);
  }
  .lib-title h1 { font-size: 22px; }
  /* Title and New analysis on one line; the scope and the view under them. */
  .lib-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title new" "scope view"; gap: 10px 8px; align-items: center; }
  .lib-actions { display: contents; }
  .lib-title { grid-area: title; }
  .lib-new { grid-area: new; align-self: start; }
  .lib-scope-select { grid-area: scope; width: 100%; }
  .lib-seg { grid-area: view; }
  /* Each chip row scrolls inside itself rather than stacking three deep. */
  .lib-filters { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; min-width: 0; }
  .lib-chiprow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .lib-chiprow::-webkit-scrollbar { display: none; }
  .lib-chiprow .lib-lbl { flex-shrink: 0; min-width: 52px; }
  .lib-tools-right { width: 100%; }
  .lib-tools-right .xq-sort { flex: 1; min-width: 0; }
  /* Columns takes its own line, so Sort keeps room for its choice. */
  .lib-cols-wrap { width: 100%; margin-right: 0; }
  .lib-links { gap: 12px; }
  .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 420px) {
  .lib-disc span { display: none; }
  .lib-filters { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   READOUT PARTS (.rd-*) — the blocks the single-card readouts (Video ads,
   Image ads, Landing pages, Copy tabs) and the Run page share
   (js/pages.js _imageParts / _landingParts / _textParts / _openingLineHtml /
   _recipeHtml). Classes in the app's system, not inline styles: mono 10px
   kickers, sentence-case chips, plain rows; no teal boxes or bars.
   ═══════════════════════════════════════════════════════════════════════════ */
.rd-kicker { margin: 0 0 7px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.rd-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.rd-row.rd-row-wide { grid-template-columns: 130px minmax(0, 1fr); }
.rd-row-k { font-size: 12px; color: var(--ink3); }
.rd-row-v { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.rd-block { margin-top: 14px; }
.rd-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rd-colors { margin-top: 10px; }
.rd-chip { display: inline-block; padding: 2px 8px; border-radius: var(--r-badge); background: var(--chip); color: var(--ink2); font-size: 12px; line-height: 1.5; }
.rd-chip.is-mono { font-family: var(--font-mono); font-size: 10.5px; }
.rd-chip.is-mark { background: var(--warn-bg); color: var(--ink); }
.rd-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.rd-list li { font-size: 12.5px; line-height: 1.5; color: var(--ink2); }
.rd-list.is-bad li::marker { color: var(--bad); }
.rd-list.is-warn li::marker { color: var(--warn); }
.rd-lede { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.rd-lede strong, .rd-callout strong { font-weight: 500; }
.rd-callout { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--ink2); }
.rd-callout strong { color: var(--ink); }
.rd-recipe { margin: 0 0 12px; }
.rd-recipe-text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink2); }
.rd-opening { margin: 0 0 12px; }
.rd-opening-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink2); }
.rd-muted { margin: 0; font-size: 12px; color: var(--ink3); }
.rd-link { color: var(--teal); overflow-wrap: anywhere; }

/* ═══════════════════════════════════════════════════════════════════════════
   RUN PAGE — one creative, a page of the Library's route (js/run-page.js,
   #explorer?…&run=ID), in the design's run detail ("Attention DNA - App",
   run-dark.png / run-light.png): the header (title, chips, what the analysis
   rests on, actions, previous / next), the KPI tiles, the player beside the
   timeline, the AI breakdown, then the panels. Panels are the design's
   anatomy (--card on --line, radius 14, a 12/14 header over a hairline, mono
   10px labels, 13px body). Every colour is a token, so both themes follow;
   timeline marks are in the print block's colour-adjust list.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The two share the page: the [hidden] one is gone (their own display rules
   would otherwise beat the attribute). */
.lib[hidden], .run-page[hidden], .run-picker[hidden] { display: none !important; }
.run { display: grid; gap: 14px; font-size: 13px; line-height: 1.45; color: var(--ink); min-width: 0; }

/* Header */
.run-head { display: grid; gap: 12px; min-width: 0; }
.run-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.run-back {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; margin: 0;
  border: 1px solid var(--line2); border-radius: var(--r-sm); background: transparent; color: var(--ink2);
  font-family: var(--font-sans); font-size: 12px; line-height: 1.4; cursor: pointer;
}
.run-back:hover { background: var(--hover); color: var(--ink); }
.run-step { display: inline-flex; align-items: center; gap: 4px; }
.run-step button {
  width: 30px; height: 30px; padding: 0; margin: 0; display: grid; place-items: center;
  border: 1px solid var(--line2); border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer;
}
.run-step button:hover:not(:disabled) { background: var(--hover); }
.run-step button:disabled { opacity: .35; cursor: default; }
.run-pos { min-width: 52px; padding: 0 6px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.run-id { display: grid; gap: 7px; min-width: 0; flex: 1 1 520px; }
.run-id h1 {
  margin: 0; font-family: var(--font-sans); font-size: 26px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.2;
  color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty;
}
.run-id h1:focus, .run-id h1:focus-visible { outline: none; }
.run-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.run-chip {
  padding: 3px 8px; border-radius: var(--r-badge); background: var(--chip); color: var(--ink2);
  font-size: 12px; line-height: 1.35; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.run-chip.is-mono { font-family: var(--font-mono); font-size: 11px; }
.run-chip.is-quiet { color: var(--ink3); }
.run-chips .cr-tier { font-size: 11px; padding: 3px 7px; }
.run-prov { margin: 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: var(--ink3); overflow-wrap: anywhere; }
.run-prov a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 2px; }
.run-prov a:hover { color: var(--ink); }
.run-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.run-btn {
  padding: 7px 12px; margin: 0; border: 1px solid var(--line2); border-radius: var(--r-sm); background: transparent;
  color: var(--ink); font-family: var(--font-sans); font-size: 12px; line-height: 1.3; white-space: nowrap; cursor: pointer;
}
.run-btn:hover { background: var(--hover); }
.run-btn.is-strong { background: var(--btn); border-color: var(--btn); color: var(--btnInk); font-weight: 500; }
.run-btn.is-strong:hover { background: var(--btn); opacity: .88; }
.run-btn:disabled { opacity: .55; cursor: default; }
.run-linklike {
  border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: 12px; color: var(--teal); cursor: pointer;
  text-align: left; text-decoration: underline; text-decoration-color: var(--teal-border); text-underline-offset: 2px;
}
.run-linklike:hover { color: var(--ink); }
.run-linklike b { font-family: var(--font-mono); font-weight: 500; }

/* The media column beside the scores and the timeline. */
.run-top {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "media main";
  gap: 14px; align-items: start; min-width: 0;
}
.run-top > .run-media { grid-area: media; }
.run-top > .run-main { grid-area: main; }
/* A video's AI breakdown is the top row's third child (stage B review fix2,
   item 3): across the page under the player and the scores, as the design
   places it under its top row — or, with .bd-beside, under the scores and
   the timeline beside the player. js/run-page.js topLayout picks whichever
   leaves the smaller hole beside the player: beside it, a long breakdown on
   a 1366 or 1280 laptop left 250-500px empty under the player; under the
   row, a short ad's scores left the hole instead. (Not a sticky player:
   .main-content is the sticky scroll container and never scrolls — the
   window does — so sticky has nothing to stick to; see the Library rail in
   stage B1.) */
.run-top-video { grid-template-areas: "media main" "bd bd"; }
.run-top-video.bd-beside { grid-template-areas: "media main" "media bd"; grid-template-rows: auto 1fr; }
.run-top > .run-breakdown { grid-area: bd; min-width: 0; }
.run-top-image_ad, .run-top-landing { grid-template-columns: 300px minmax(0, 1fr); }
.run-top-copy { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
/* Copy's performance is the top row's third child (stage B review fix3,
   item 1): under the specimen, where a short piece of copy beside the
   scores left ~210px empty — or, with .perf-main, under the scores, where a
   long piece of copy would leave the hole instead (js/run-page.js
   copyLayout picks). The 1fr row takes whatever the spanning column needs
   beyond the first row, so the panel sits right under its neighbour. */
.run-top-copy.has-perf { grid-template-areas: "media main" "perf main"; grid-template-rows: auto 1fr; }
.run-top-copy.has-perf.perf-main { grid-template-areas: "media main" "media perf"; }
.run-top > .run-top-perf { grid-area: perf; }
/* A piece of copy too long to sit beside the scores within 160px either way
   (copyLayout): the words across the page, in text columns of a readable
   measure, the scores and performance under them. At 1180px and narrower
   the top row is one column anyway, and copyLayout stacks any piece of more
   than three lines with any line wider than 34em, ~75 characters (fix5: the
   widest line, not the average — ad copy's blank lines and short bullets
   hid its 147-character paragraphs), so it gets the same columns. A 21em
   column (about
   284px, 45-75 characters as the columns stretch) gives two columns from
   ~600px of text — a 900 to 1180 window, which at 30em set one 610-890px
   line of 90-130 characters (stage B review fix4, item 2) — three from
   ~915px and four from ~1,230px; a phone keeps one. (Fix6, item 1: at most
   three, a 1920 window set three columns of ~490px, lines of up to 83
   characters; four there are ~359px, ~60 characters.) */
.run-top-copy.is-stacked { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "main"; grid-template-rows: none; }
.run-top-copy.is-stacked.has-perf { grid-template-areas: "media" "main" "perf"; }
/* (Final pass: the column minimum is 24em, not 21em — at 21em, 1536-1600px
   windows switched to four columns of ~288px and lines under 45
   characters; 24em keeps every width between ~55 and 75.) */
.run-top-copy.is-stacked .copy-text { columns: 24em 4; column-gap: 32px; }
/* A piece whose text columns would not fit on the screen (copyLayout,
   .is-long: taller than the window less 100px; fix6, item 3 — at 0.6 of the
   window, pieces whose columns fit became one long strip beside an empty
   panel; stage B review fix5, item 3 — a page fetched at the
   12,000-character storage cap set two columns of ~2,050px at 1180 and three
   of ~1,650px at 1440, so the reader scrolled ~2,000px back up for the next
   column): one column, read from top to bottom, at a readable measure —
   34em, ~75 characters (72ch, the review's figure, is 634px in this face:
   "0" is wider than its average letter, so it set 96-99 characters a line). */
.run-top-copy.is-long .copy-text { columns: auto; max-width: 34em; }
/* ...and only its first screenful until the reader asks for the rest (stage
   B review fix6, item 3: the whole of a page at the storage cap put the
   scores ~4,000px down): the text fades out at the foot of the cap, and
   "Show the whole text (N words)" under it lifts the cap (.is-whole,
   js/run-page.js). The fade is a mask, so it fades into whichever theme's
   card. Paper prints the whole text (print block below). */
.copy-more { display: none; margin-top: 10px; }
.run-top-copy.is-long .copy-more { display: inline-block; }
.run-top-copy.is-long .run-copy:not(.is-whole) .copy-text {
  /* (Final pass: 100vh - 240px left the button 17-49px below the first
     screen — the text starts ~250-280px down; 340px keeps it in view.) */
  max-height: max(240px, calc(100vh - 340px)); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent);
}
/* Under copy's top row: the AI breakdown across the page, then the readout
   beside Language DNA (two thirds and one third, as the design's bottom row
   of three) where the page is wide enough, else — or when copyLayout finds
   they would not end level — one over the other. */
.run-copy-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }
@media (min-width: 1264px) {
  .run-copy-row:not(.is-stacked) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
/* The copy readout's facts beside its words where the panel has room. */
.run-kind { container: runkind / inline-size; }
.run-kind-split { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; align-items: start; }
@container runkind (width >= 620px) {
  /* The facts take a little more: their values sit beside a 130px label. */
  .run-kind-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .run-kind-split > :not(.run-kind-rows):not(.run-kind-more) { grid-column: 1 / -1; }
  /* Its first kicker level with the first row's text. */
  .run-kind-more > :first-child { margin-top: 10px; }
}
.run-main { display: grid; gap: 14px; min-width: 0; align-content: start; }
.run-media {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px; display: grid; gap: 10px; min-width: 0; align-content: start;
}
.run-player { position: relative; border-radius: 10px; overflow: hidden; background: var(--media-bg); border: 1px solid var(--line); }
.run-player video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 72vh; object-fit: contain; background: var(--media-bg); }
.run-player .run-still { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
.run-player .run-poster { width: 100%; }
.run-noplay {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 16px;
  aspect-ratio: 9 / 16; max-height: 60vh; text-align: center;
  background: repeating-linear-gradient(135deg, var(--stripe) 0 8px, transparent 8px 16px), var(--card);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink3);
}
.run-noplay small { font-family: var(--font-sans); font-size: 11.5px; }
.run-image .run-noplay { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; }
.run-image.is-page .run-noplay { aspect-ratio: 4 / 5; }
/* On the video: the AI's one reading of the emotion shown (not a per-second
   chip), and the on-screen line at the playhead — the design's overlays,
   constant in both themes as the design draws them over media. */
.run-emo-chip {
  position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 20px); padding: 4px 9px; border-radius: 999px; background: var(--on-media-bg); color: var(--on-media-ink);
  font-size: 11px; line-height: 1.3; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.run-emo-chip::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--emo-joy); }
.run-emo-chip.is-none::before { background: var(--emo-neutral); }
.run-caption {
  position: absolute; left: 12px; right: 12px; bottom: 56px; z-index: 2; padding: 8px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.94); color: #0b1020; font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center;
  pointer-events: none;
}
.run-caption[hidden] { display: none; }
.run-store { margin: 0; display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; line-height: 1.4; color: var(--ink2); }
.run-store i { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--tier-high); }
.run-store.is-warn i { background: var(--warn); }
/* Details: where the video lives, in one muted line. */
.run-store-note { align-items: flex-start; margin-top: 12px; font-family: var(--font-sans); font-size: 12px; line-height: 1.5; color: var(--ink3); }
.run-store-note i { margin-top: 5px; }
.run-store-note b { font-weight: 500; color: var(--ink2); }
.run-image img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.run-src { display: block; font-size: 11.5px; color: var(--teal); word-break: break-all; }
.run-copy { min-width: 0; }

/* KPI tiles: the design's row, hairlines between, the strip under each. */
.run-tiles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.run-tiles {
  display: block;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-width: 0;
}
.run-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px 9px; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.run-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; }
.run-tile-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-band { flex-shrink: 0; padding: 1px 5px; border-radius: var(--r-badge); font-family: var(--font-mono); font-size: 10px; line-height: 1.4; background: var(--chip); color: var(--ink2); }
.run-band.tone-high { background: var(--teal-bg); color: var(--teal); }
.run-band.tone-mid  { background: var(--indigo-bg); color: var(--indigo); }
.run-band.tone-low  { background: var(--bad-bg); color: var(--bad); }
.run-tile-val { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.run-tile-val .run-band { margin-left: auto; align-self: center; }
.run-tile-num { font-size: 26px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.run-tile-unit { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink3); }
.run-tile.is-encoder .run-tile-num { color: var(--purple); }
/* Balanced rows (stage B review fix2, item 3): auto-fit wrapped six tiles
   four and two at 1280 and five and one at 1366, leaving empty slots. Six
   tiles are one row where each gets ~140px, else three and three; five are
   one row, else three over two (a six-track grid: three spanning two
   tracks, then two spanning three). Phones keep two columns (below). The
   width is the scores column's own (.run-main is a container). */
.run-main { container: runmain / inline-size; }
/* Copy follows the same rules for six and five (no call to action means no
   "The ask" tile, and a missing reading drops its tile); its seven are
   below (stage B review fix3, item 1). */
.run-top-video .run-tiles-grid[data-n="6"], .run-top-image_ad .run-tiles-grid[data-n="6"], .run-top-copy .run-tiles-grid[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.run-top-video .run-tiles-grid[data-n="5"], .run-top-image_ad .run-tiles-grid[data-n="5"], .run-top-copy .run-tiles-grid[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.run-top-video .run-tiles-grid[data-n="5"] > .run-tile, .run-top-image_ad .run-tiles-grid[data-n="5"] > .run-tile, .run-top-copy .run-tiles-grid[data-n="5"] > .run-tile { grid-column: span 2; }
.run-top-video .run-tiles-grid[data-n="5"] > .run-tile:nth-child(n+4), .run-top-image_ad .run-tiles-grid[data-n="5"] > .run-tile:nth-child(n+4), .run-top-copy .run-tiles-grid[data-n="5"] > .run-tile:nth-child(n+4) { grid-column: span 3; }
/* Copy has six scores and its AI score: four and three, the AI score — the
   composite, last — across two columns. Auto-fit left an empty eighth cell
   beside it. */
.run-top-copy .run-tiles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.run-top-copy .run-tiles-grid[data-n="7"] > .run-tile:last-child { grid-column: span 2; }
@container runmain (width >= 700px) {
  .run-top-video .run-tiles-grid[data-n="5"], .run-top-image_ad .run-tiles-grid[data-n="5"], .run-top-copy .run-tiles-grid[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .run-top-video .run-tiles-grid[data-n="5"] > .run-tile, .run-top-image_ad .run-tiles-grid[data-n="5"] > .run-tile, .run-top-copy .run-tiles-grid[data-n="5"] > .run-tile,
  .run-top-video .run-tiles-grid[data-n="5"] > .run-tile:nth-child(n+4), .run-top-image_ad .run-tiles-grid[data-n="5"] > .run-tile:nth-child(n+4), .run-top-copy .run-tiles-grid[data-n="5"] > .run-tile:nth-child(n+4) { grid-column: auto; }
}
@container runmain (width >= 840px) {
  .run-top-video .run-tiles-grid[data-n="6"], .run-top-image_ad .run-tiles-grid[data-n="6"], .run-top-copy .run-tiles-grid[data-n="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@container runmain (width >= 1100px) {
  .run-top-copy .run-tiles-grid[data-n="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .run-top-copy .run-tiles-grid[data-n="7"] > .run-tile:last-child { grid-column: auto; }
}
@container runmain (width < 520px) {
  .run-top-video .run-tiles-grid[data-n], .run-top-image_ad .run-tiles-grid[data-n], .run-top-copy .run-tiles-grid[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-top-video .run-tiles-grid[data-n] > .run-tile, .run-top-image_ad .run-tiles-grid[data-n] > .run-tile, .run-top-copy .run-tiles-grid[data-n] > .run-tile,
  .run-top-video .run-tiles-grid[data-n] > .run-tile:nth-child(n+4), .run-top-image_ad .run-tiles-grid[data-n] > .run-tile:nth-child(n+4), .run-top-copy .run-tiles-grid[data-n] > .run-tile:nth-child(n+4) { grid-column: auto; }
  .run-top-video .run-tiles-grid[data-n="5"] > .run-tile:last-child, .run-top-image_ad .run-tiles-grid[data-n="5"] > .run-tile:last-child,
  .run-top-copy .run-tiles-grid[data-n] > .run-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* A landing page's five scores and its AI score: two rows of three. */
.run-top-landing .run-tiles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* What every number in the row is, and which pool places it — said once. */
.run-tiles-foot {
  margin: 0; padding: 7px 14px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: var(--ink3);
}
.run-tile-dist .rc-dist { height: 12px; margin: 3px 0 2px; }
.run-tile-dist .rc-dist-note { margin: 0; font-size: 10px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-tile-note { font-size: 11px; line-height: 1.35; color: var(--ink3); }
.run-tile-note b { font-weight: 500; color: var(--ink2); }
.run-tile-note .down { color: var(--bad); }
.run-nw { white-space: nowrap; }

/* Panels */
.run-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; overflow: hidden; }
.run-ph { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.run-ph h2, .run-ph h3 { margin: 0; min-width: 0; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--ink); }
.run-ph-sub { font-weight: 400; color: var(--ink3); }
.run-ph-meta { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.run-ph.is-sub { padding: 10px 14px 0; border-top: 1px solid var(--line); border-bottom: 0; }
.run-ph.is-sub h3 { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }
.run-pb { padding: 12px 14px; min-width: 0; }
.run-muted { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink3); }
.run-foot { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink3); }
.run-lede { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--ink); }
/* The panels under a video's top row: a masonry (js/run-page.js flowLayout
   sets each panel's row span from its height, 4px rows), so each panel drops
   into the column that ends highest and the columns end near each other. */
.run-flow {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); grid-auto-rows: 4px;
  column-gap: 14px; align-items: start; min-width: 0; margin-bottom: -14px;
}
.run-flow > .run-panel { margin-bottom: 14px; }
/* Language DNA and the AI breakdown of an image ad, a page, copy: two. */
.run-flow.is-two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.run-rows { margin: 0; }
.run-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.run-rows > div:first-child { border-top: 0; }
.run-ph + .run-rows > div:first-child, .run-pb + .run-rows > div:first-child { border-top: 1px solid var(--line); }
.run-rows dt { color: var(--ink2); flex-shrink: 0; }
.run-rows dd { margin: 0; min-width: 0; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.run-rows dd a { color: var(--teal); }
.run-rows > div.is-note dd { text-align: left; font-family: var(--font-sans); font-size: 12px; line-height: 1.5; color: var(--ink3); }
.run-links { margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* The timeline: Moments · On-screen · Emotion over a time axis, with a
   playhead. Real rows only (js/run-page.js tlHtml). */
.run-tl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 10px; padding: 14px 14px 6px; min-width: 0; }
.run-tl-labels { display: grid; grid-template-rows: var(--tl-moments, 20px) 20px 20px; row-gap: 6px; font-size: 11px; color: var(--ink2); }
.run-tl-labels span { display: flex; align-items: center; }
.run-tl-labels .is-moments { align-items: flex-start; padding-top: 2px; }
.run-tl-tracks { position: relative; display: grid; grid-template-rows: var(--tl-moments, 20px) 20px 20px 14px; row-gap: 6px; min-width: 0; }
.run-tl-tracks[data-tl-seek] { cursor: pointer; }
.run-tl-row { position: relative; min-width: 0; border-radius: 4px; }
.run-tl-row:not(.is-moments) { background: var(--chip); overflow: hidden; }
.run-tl-mark {
  position: absolute; top: 0; height: 20px; margin: 0; display: inline-flex; align-items: center; padding: 0 6px;
  border: 1px solid var(--teal-border); border-radius: 5px; background: var(--teal-bg); color: var(--teal);
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer;
}
span.run-tl-mark { cursor: default; }
.run-tl-mark.lane-1 { top: 24px; }
.run-tl-mark.is-end { transform: translateX(-100%); }
.run-tl-mark.m-first-product { border-color: var(--indigo-border); background: var(--indigo-bg); color: var(--indigo); }
.run-tl-mark.m-first-proof { border-color: var(--purple); background: var(--purple-bg); color: var(--purple); }
.run-tl-mark.m-cta-onset { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.run-tl-mark:hover { filter: brightness(1.08); }
.run-tl-span {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 6px; min-width: 0;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 4px;
  font-size: 10.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.run-tl-span.is-cta { border-color: var(--warn-border); }
.run-tl-emo {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 4px; padding: 0 8px;
  background: var(--purple-bg); color: var(--purple); font-size: 10.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
}
.run-tl-emo small { font-size: 10px; font-weight: 400; }
/* A peak in the band's first half: the label moves to the far end. */
.run-tl-emo.is-end { justify-content: flex-end; }
.run-tl-peak { position: absolute; z-index: 1; top: 5px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: var(--purple); box-shadow: 0 0 0 1.5px var(--card); }
.run-tl-span-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Nothing timed, read or stored: one line instead of three empty bars. */
.run-tl-none { margin: 0; padding: 12px 14px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink3); }
.run-tl-empty { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 8px; font-size: 11px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-tl-row.is-moments .run-tl-empty { padding-left: 0; }
.run-tl-axis { position: relative; }
.run-tl-axis span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; color: var(--ink3); }
.run-tl-axis span:first-child { transform: none; }
.run-tl-head { position: absolute; top: -4px; bottom: 16px; left: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); pointer-events: none; }
.run-tl-legend { list-style: none; margin: 0; padding: 6px 14px 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--ink2); }
.run-tl-legend b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.run-tl-legend .is-quiet { color: var(--ink3); }
/* The moments' names and times: the chips say them above a phone's width. */
.run-tl-legend .is-dots { display: none; }
.run-tl-legend:not(:has(> li:not(.is-dots))) { display: none; }
.print-only-inline { display: none; }

/* The AI breakdown: the report's lead section beside its recommendations. */
.run-bd { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.run-bd-lead { padding: 14px 16px; display: grid; gap: 10px; align-content: start; border-right: 1px solid var(--line); min-width: 0; }
.run-bd.is-single { grid-template-columns: minmax(0, 1fr); }
.run-bd.is-single .run-bd-lead { border-right: 0; }
.run-eyebrow { margin: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); }
.run-sub-h { margin: 0 0 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink); }
.run-md h3 { font-size: 13px !important; margin: 12px 0 6px !important; }
.run-md p, .run-md li { font-size: 13px !important; color: var(--ink2) !important; }
.run-bd-lead .run-md p { font-size: 15px !important; line-height: 1.5 !important; color: var(--ink) !important; margin: 0 0 8px !important; }
.run-hook { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink2); }
.run-hook b { font-weight: 500; color: var(--ink); }
.run-bd-side { display: grid; align-content: start; min-width: 0; }
/* The recommendations are the report's last section, and last in the DOM;
   beside the lead they open the side column (the design's place). In flow
   (.is-flow: the side is display: contents in a block) order does not
   apply, and they close the balanced columns, as the report does. Nothing
   moves between the two shapes (stage B review fix6, item 2: moving the
   block on each layout pass wiped a reader's selection in it and pulled a
   focused seek button out and back). The breakdown's only focusable
   elements are the list's own seek buttons, so the focus order is the
   visual one in either shape. */
.run-bd-side > .run-recs { order: -1; }
.run-bd-side > .run-bd-sec { padding: 0 16px 6px; min-width: 0; }
.run-bd-sec > .run-sub-h { padding-top: 14px; }
.run-bd-side > .run-muted { padding: 14px 16px; }
/* A long report beside a short lead left the lead's column 370-455px short
   of the other (stage B review fix4, item 1: the copy breakdown runs across
   the page, so .run-bd has two columns, and a production report's first
   section is ~150px while the other five are ~560px). js/run-page.js bdFlow
   adds .is-flow when the lead and the rest would end more than 160px apart:
   then every block — the lead, each further section, the recommendations
   last (fix5) — flows in reading order down two balanced text columns, so
   the columns end level. The lead and the recommendations are kept whole; a
   long section may continue at the top of the next column, as text columns
   do (whole sections could not balance a video report whose lead and
   strengths are each a third of it), but never straight after its heading.
   The rule
   between the columns is the same hairline, with the same 16px either
   side, as the lead's border. One column below ~700px of panel, as the
   grid has. */
.run-bd.is-flow { display: block; columns: 2 340px; column-gap: 0; column-rule: 1px solid var(--line); padding: 14px 0 8px; }
.run-bd.is-flow .run-bd-side { display: contents; }
.run-bd.is-flow .run-bd-lead { border-right: 0; padding-top: 0; }
/* Every column starts at the panel's 14px: the space above a block is a
   margin here, and a margin at the top of a column is dropped, so a section
   — or the rest of one — that opens the second column lines up with the
   lead's eyebrow instead of 28px down (or flush with the panel's edge). */
.run-bd.is-flow .run-bd-sec > .run-sub-h { padding-top: 0; margin-top: 14px; }
.run-bd.is-flow .run-recs-head { padding-top: 0; margin-top: 14px; }
/* In flow the lines sit under the heading and between items (the same
   places), drawn as bottom borders (fix4: a list then could continue in the
   next column and must not open it with a stray hairline; since fix5 it is
   kept whole, and the look is unchanged). */
.run-bd.is-flow .run-recs-head { border-bottom: 1px solid var(--line); }
.run-bd.is-flow .run-rec-list li { border-top: 0; border-bottom: 1px solid var(--line); }
.run-bd.is-flow .run-rec-list li:last-child { border-bottom: 0; }
.run-bd.is-flow .run-bd-lead, .run-bd.is-flow .run-rec-list li { break-inside: avoid; page-break-inside: avoid; }
/* The recommendations stay one block in flow (stage B review fix5, item 2):
   split, the third of a video report's three sat alone at the top of the
   second column, cut off from its heading and above "Content Strengths" —
   and a timed list opened that column with an empty time cell. In flow they
   also come last (the reports' own order, the DOM's — see .run-bd-side >
   .run-recs above), so the break lands in a section's text instead. */
.run-bd.is-flow .run-recs { break-inside: avoid; page-break-inside: avoid; }
.run-bd.is-flow .run-sub-h, .run-bd.is-flow .run-recs-head { break-after: avoid; page-break-after: avoid; }
.run-recs .run-sub-h { padding: 14px 16px 8px; margin: 0; }
/* The heading, and — when no recommendation is tied to a moment — that,
   said once in the panel heads' mono meta style instead of a column of
   dashes (stage B review fix3, item 2). */
.run-recs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 16px 8px; }
.run-recs .run-recs-head .run-sub-h { padding: 0; margin: 0; }
.run-recs-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.run-rec-list { list-style: none; margin: 0; padding: 0; }
.run-rec-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.run-rec-list.is-untimed li { grid-template-columns: minmax(0, 1fr); }
.run-rec-time { padding: 2px 0 0; margin: 0; border: 0; background: none; text-align: left; font-family: var(--font-mono); font-size: 11px; color: var(--teal); cursor: pointer; align-self: start; }
span.run-rec-time, .run-rec-time.is-none { color: var(--ink3); cursor: default; }
.run-rec-text { display: flex; gap: 8px; align-items: baseline; min-width: 0; line-height: 1.5; color: var(--ink2); }
.run-rec-text i { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--teal); transform: translateY(-1px); }
.run-breakdown > .rd-recipe { margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.run-breakdown > .rd-recipe .rd-kicker { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
/* The opening line, as a transcript row: its label beside the words. */
.run-opening { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--ink); }
.run-opening-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); padding-top: 3px; }
/* A landing page's scraped evidence, in the page's kicker style. */
.run .lp-evidence > summary { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; color: var(--ink3); }

/* Transcript, on-screen text. */
.run-tx { font-size: 13px; line-height: 1.7; color: var(--ink2); white-space: pre-line; overflow-wrap: anywhere; }
.run-sync { list-style: none; margin: 0 -6px; padding: 0; display: grid; }
.run-sync-line {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; width: 100%; margin: 0; padding: 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink2); font: inherit; font-size: 13px; line-height: 1.45; text-align: left; cursor: pointer;
}
.run-sync-line:hover { background: var(--hover); }
.run-sync-line.is-now { background: var(--chip); color: var(--ink); }
.run-sync-t { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); padding-top: 1px; }
.run-sync-line.is-now .run-sync-t { color: var(--teal); }
.run-ost { list-style: none; margin: 0; padding: 0; display: grid; }
.run-ost li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--ink2); }
.run-ost li.is-now { color: var(--ink); }
.run-ost-t { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink3); padding-top: 1px; }
.run-sync-block { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.run-sync-block > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.run-sync-block > summary::-webkit-details-marker { display: none; }
.run-ost .ov-role { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px; white-space: nowrap; }

/* Language DNA and the emotion shown sit in the page's panels: their own
   card chrome goes. */
.run-dna .dna-hero, .run-emotion .dna-hero { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }
.run-dna .dna-headline { font-size: 20px; font-weight: 400 !important; }
/* (Stage C fix) The same Language DNA headline on Analysis reads as it does
   on the Run page (it was 25px/600). */
@media screen { .an-page .dna-headline { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; } }
.run-dna .dna-lede { font-size: 13px; margin-bottom: 12px; }
.run-dna .dna-tab { font-size: 12px; padding: 4px 10px; }
/* The mix sphere repeats the bar and its legend (same five shares, same
   colours) at 176px: in a third of the page it pushed the reading itself
   below the fold. The panel keeps the bar, the legend and the lede. */
.run-dna .dna-sphere-wrap { display: none; }
/* Its "LANGUAGE DNA" kicker repeats the panel's heading; the coherence
   badge beside it moved up into the heading's meta (js/run-page.js). */
.run-dna .dna-hero > .rc-top { display: none; }
.run-coh .badge { font-size: 10px; letter-spacing: 0.06em; }
.run-emotion .dna-emotion:first-child, .run-emotion .dna-person:first-child { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; }
.run-pills { line-height: 1.3; }

/* Details, the encoder, a kind's own blocks. */
.run-details .meta-rows { background: transparent; border: 0; border-radius: 0; padding: 0; }
.run-move { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink2); }
.run-move select { width: auto; min-width: 180px; max-width: 100%; height: 32px; margin: 0; padding: 0 28px 0 10px; font-size: 12.5px; }
.run-details .prov { margin-top: 12px; }
.run-details .run-pb > .card { margin-top: 12px; }
.run-details #explorerEncodingContent { margin-top: 12px; }
.run-enc-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin: 10px 0 12px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
/* Hairlines drawn by each cell (right and bottom shadows clipped by the
   box), not by a gap over a filled background — which showed a solid grey
   block wherever the last row had an empty slot (5 stats in 2 columns). */
.run-enc-stats > div { display: grid; gap: 3px; padding: 10px 12px; background: var(--card); box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.run-enc-stats span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); }
.run-enc-stats b { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; color: var(--purple); font-variant-numeric: tabular-nums; }
.run-enc-chart { margin-bottom: 12px; }
/* The encoder's timeline images side by side (they are wide plots; one per
   row made the page a screen per image), its header, stats and keyframes
   across the full width. */
.run-enc-btl .btl-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; }
.run-enc-btl .btl-wrapper > :not(figure) { grid-column: 1 / -1; }
.run-enc-btl .btl-wrapper > figure { margin: 0 !important; min-width: 0; }
/* Its own row of the four statistics repeats the panel's, just above it;
   its card, its "Brain activation timeline" header (with a colour scale that
   keys a heatmap this page never draws) and its banner repeat the panel's
   own heading and note. The images and keyframes are what it adds. */
.run-enc-btl .btl-stats-row, .run-enc-btl .btl-header, .run-enc-btl .btl-banner { display: none; }
.run-enc-btl .btl-wrapper { border: 0; background: none; padding: 0; box-shadow: none; border-radius: 0; }
.run-enc-btl .btl-colorscale { display: none; }
.run-enc-btl .btl-wrapper:has(.btl-cell) .btl-colorscale { display: flex; }
.run-enc-btl .btl-frame-ts { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); }
.run-enc-btl .btl-section-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); }
.run-sample { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--warn-border); border-radius: 8px; background: var(--warn-bg); font-size: 12.5px; color: var(--ink); }
.run-kind-rows > div:first-child { border-top: 0 !important; }
.run-kind .lp-evidence { margin-top: 14px; }
.run-pending p { margin: 0 0 12px; color: var(--ink2); line-height: 1.55; }

/* The breadcrumb on a Run page: Library (the way back) / folder / creative. */
.tb-crumb-page.is-link { color: var(--ink2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; border-radius: 3px; }
.tb-crumbs.has-sub .tb-crumb-page.is-link { color: var(--ink2); }
.tb-crumb-page.is-link:hover { color: var(--ink); }
.tb-crumb-mid { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1; color: var(--ink3); }
.tb-crumb-mid[hidden] { display: none; }
#crumbMid { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1180px) {
  .run-top { grid-template-columns: 220px minmax(0, 1fr); }
  .run-top-image_ad, .run-top-landing { grid-template-columns: 240px minmax(0, 1fr); }
  /* Copy in a 220px column ran twice as long as its words need, beside or
     above a 150-200px hole (stage B review fix3, item 1): here the words
     run across the page, the scores and performance under them. */
  .run-top-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "main"; }
  .run-top-copy.has-perf, .run-top-copy.has-perf.perf-main { grid-template-areas: "media" "main" "perf"; grid-template-rows: none; }
}
/* Phone and narrow windows: one column, the player first and centred. */
@media (max-width: 899.98px) {
  .run-top, .run-top-image_ad, .run-top-landing, .run-top-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "main"; }
  .run-top-video, .run-top-video.bd-beside { grid-template-areas: "media" "main" "bd"; grid-template-rows: none; }
  .run-top-copy.has-perf, .run-top-copy.has-perf.perf-main { grid-template-areas: "media" "main" "perf"; grid-template-rows: none; }
  .run-top-video .run-media { width: min(100%, 300px); justify-self: center; }
  .run-top-image_ad .run-media, .run-top-landing .run-media { width: min(100%, 420px); justify-self: center; }
  .run-id h1 { font-size: 22px; }
  .run-bd-lead { border-right: 0; border-bottom: 1px solid var(--line); }
  .run-actions { width: 100%; }
  .run-actions .run-btn { flex: 1 1 auto; text-align: center; }
  #crumbMid, .tb-crumb-mid { display: none; }
}
@media (max-width: 560px) {
  .run-tiles-grid, .run-top-copy .run-tiles-grid, .run-top-landing .run-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-tl { grid-template-columns: 62px minmax(0, 1fr); padding: 12px 12px 4px; }
  /* Labels need room the phone track does not have: the marks become dots,
     and the legend under the timeline names each one with its time. */
  .run-tl-mark { width: 12px; height: 12px; padding: 0; top: 4px; border-radius: 50%; font-size: 0; transform: translateX(-50%); }
  .run-tl-mark.lane-1 { top: 4px; }
  .run-tl-mark.is-end { transform: translateX(-50%); }
  .run-tl { --tl-moments: 20px !important; }
  .run-tl-legend .is-dots { display: list-item; }
  .run-tl-legend:not(:has(> li:not(.is-dots))) { display: flex; }
  /* A span is a few pixels here: no text (it would read "Enca"); its title
     and name keep it, and the On-screen text list names every line. */
  .run-tl-span { padding: 0; }
  .run-tl-span-t { display: none; }
  /* The moments row's empty state wraps instead of being cut off. */
  .run-tl:has(.run-tl-row.is-moments > .run-tl-empty) { --tl-moments: 36px !important; }
  .run-tl-row.is-moments .run-tl-empty { white-space: normal; overflow: visible; align-items: flex-start; padding: 2px 0 0; line-height: 1.4; }
  .run-rec-list li { grid-template-columns: 38px minmax(0, 1fr); padding: 10px 14px; }
  .run-ost li { grid-template-columns: 70px minmax(0, 1fr); }
  /* Five statistics in two columns: the last takes the row, no empty slot. */
  .run-enc-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .run-rows > div { flex-wrap: wrap; }
  .run-rows dd { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARKET (stage C2) — routes paid-brands (Brands), paid-analysis (Video ads),
   paid-images (Image ads), paid-landing (Landing pages), paid-text (Copy) and
   paid-benchmark (Benchmark); js/pages.js "MARKET (stage C2)".
   The page kit's header, controls row and panels (PAGE KIT, above), the
   Library's table (.pg-table-wrap / CreativeTable) and chips (.lib-score,
   .cr-tier), Compare's pair table (.cmp-table) — and the Market card: the
   Library grid card's anatomy (.cr-card — radius 12 on --line, --card, a
   cover with mono chips in --card, a 13/500 title, mono meta) under the
   class names these pages and their tests use: .br-card for a brand,
   .ad-card for an ad, an image ad or a landing page, .copy-card for a piece
   of copy. One readout for every one of them: the Run page.
   ═══════════════════════════════════════════════════════════════════════════ */
/* .mk-empty (a whole-panel empty state) is the PAGE KIT's .pg-empty.is-center
   since C3 — one rule, above. */

/* ─── Brands: a card per brand ─── */
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.br-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; text-align: left;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; transition: border-color .15s ease;
}
.br-card:hover { border-color: var(--line2); }
.br-card.is-active { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal-border); }
.br-card:has(.br-open:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.br-cover { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--media-ph); overflow: hidden; }
.br-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.br-cover-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 20px; color: var(--ink3);
  background: repeating-linear-gradient(135deg, var(--stripe) 0 6px, transparent 6px 12px);
}
.br-cover .n {
  position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: var(--r-badge);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.3; background: var(--card); color: var(--ink2);
}
.br-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; padding: 10px 12px 12px; }
/* The card's way in: its name, a real button, stretched over the whole card
   (::after), as the Library's .cr-open; Re-import and the hook's title sit
   above the stretch. The focus ring is drawn on the card. */
.br-open {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: none;
}
.br-open::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.br-open:focus-visible { outline: none; }
.br-name { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); }
.br-meta .live { color: var(--teal); }
.br-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.br-score, .br-foot .btn { position: relative; z-index: 2; }
.br-score { display: grid; gap: 3px; font-size: 20px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.br-score small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.br-none { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); }

/* The open brand: a panel (counts under its name), what the folder holds,
   what changed in its latest import, its ads. */
.br-detail-id { display: grid; gap: 2px; min-width: 0; }
.br-detail-sub { font-family: var(--font-mono); font-size: 11px; line-height: 1.45; color: var(--ink3); overflow-wrap: anywhere; }
.brand-holds { margin: 0 0 10px; max-width: 96ch; font-size: 12px; line-height: 1.55; color: var(--ink3); }
.br-brief { margin: 0 0 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; }

/* ─── The Market card: an ad (Brands), an image ad, a landing page ─── */
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-items: stretch; }
.ad-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  transition: border-color .15s ease;
}
.ad-card.is-openable { cursor: pointer; }
.ad-card.is-openable:hover { border-color: var(--line2); }
.ad-card.is-active { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal-border); }
/* (Stage C fix) An analysed card opens from its title, a real button
   stretched over the card (::after), as .br-open and the Library's .cr-open;
   links and other buttons inside sit above the stretch. The ring is drawn on
   the card. */
.ad-card:has(.ad-open:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.ad-open {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: none;
}
.ad-open::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ad-open:focus-visible { outline: none; }
.ad-card.is-openable a, .ad-card.is-openable .btn, .ad-card.is-openable .lib-score { position: relative; z-index: 2; }
.ad-cover { position: relative; aspect-ratio: 4 / 5; background: var(--media-ph); overflow: hidden; }
.ad-grid.is-square .ad-cover { aspect-ratio: 1 / 1; }
.ad-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-card.is-page .ad-cover img { object-position: top; }
.ad-cover-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 18px; color: var(--ink3);
  background: repeating-linear-gradient(135deg, var(--stripe) 0 6px, transparent 6px 12px);
}
.ad-cover-fallback.is-text { padding: 0 14px; font-size: 11px; line-height: 1.5; text-align: center; }
/* Chips over the cover in --card, as the Library card's: the kind top left,
   the runtime bottom left (● seen in the brand's latest import, ○ believed
   running but not seen in it). */
.ad-cover .ad-kind {
  position: absolute; top: 8px; left: 8px; padding: 3px 7px; border-radius: var(--r-badge);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase;
  background: var(--card); color: var(--ink2);
}
.ad-cover .ad-run {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 3px 7px; border-radius: var(--r-badge);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.35; background: var(--card); color: var(--ink2);
}
.ad-cover .ad-run.live::before { content: '●'; color: var(--teal); margin-right: 5px; }
.ad-cover .ad-run.stale::before { content: '○'; color: var(--warn); margin-right: 5px; }
.ad-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; padding: 10px 12px 12px; }
.ad-hook {
  font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ad-hook.muted { font-weight: 400; color: var(--ink3); }
.ad-dest { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-dest a { color: var(--ink2); text-decoration: none; }
.ad-dest a:hover { text-decoration: underline; text-underline-offset: 2px; }
.mk-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.mk-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.mk-none { font-size: 11.5px; color: var(--ink3); }
/* The four rubric readings (each 1-10, shown ×10 as the Library shows them
   — "AI rubric ×10" under them), hairlines between (the grid's 1px gap over
   a --line ground), as the Run page's tiles. */
.ad-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.ad-scores div { display: grid; justify-items: center; gap: 1px; padding: 5px 2px; min-width: 0; background: var(--card); }
.ad-scores b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.ad-scores span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink3); }
.ad-scores-cap { margin: -2px 0 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); text-align: right; }
.ad-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 2px; }
.ad-actions.is-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.ad-actions.is-row .btn-secondary { flex: 1 1 auto; }
.ad-actions .snap, .mk-wide { width: 100%; }
.ad-actions .pg-muted { font-size: 11.5px; }
.mk-novideo { padding: 6px 8px; font-size: 11.5px; }
.mk-from { margin: 0; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 11.5px; line-height: 1.45; color: var(--ink3); overflow-wrap: anywhere; }
.mk-from em { font-style: normal; color: var(--ink2); }

/* ─── Copy: a card per piece ─── */
.copy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: stretch; }
.copy-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--card); transition: border-color .15s ease;
}
.copy-card.is-active { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal-border); }
.copy-card .cc-kind { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.copy-card .cc-title { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.copy-card .cc-excerpt { font-size: 12px; line-height: 1.5; color: var(--ink3); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.copy-card .cc-scores { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); }
.copy-card .cc-scores b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.copy-card .cc-scores .cc-scale { margin-left: auto; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }

/* The words themselves on a copy run's Run page, the model's power words
   marked. Ad copy routinely carries a tracking URL: an unbreakable run must
   wrap inside the copy column instead of painting across the page. */
.copy-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.65; color: var(--ink); margin: 0; font-family: var(--font-sans); }
.copy-text mark.copy-mark { background: var(--amber-soft); color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -1px 0 var(--amber-border); }
.copy-source { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .04em; margin: 8px 0 0; word-break: break-all; }

/* ─── Forms: Capture a page, Paste copy ─── */
.mk-form .pg-pb { display: grid; gap: 10px; }
.mk-form textarea.pg-input { min-height: 120px; }
.mk-or { padding-top: 10px; border-top: 1px dashed var(--line); }
/* .mk-status is the PAGE KIT's .pg-status since C3 (one rule, above). */

/* ─── Video ads: the Library's table ─── */
.va-table-wrap .creative-table td:first-child { min-width: 220px; max-width: 340px; white-space: normal; }
.va-table-wrap .creative-table td { white-space: nowrap; }
.va-table-wrap .ct-actions { text-align: right; }

/* ─── Benchmark: Compare's pair table ─── */
.bm-table th[scope="col"]:first-child { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 11.5px; }

@media (max-width: 899.98px) {
  .br-grid, .ad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .copy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  /* Two ads a row still, the four readings two by two. */
  .ad-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-cover .ad-run { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NEW ANALYSIS · IMPORT and IMPORT ADS (stage C3) — routes `import` and
   `paid-import` (js/pages.js renderImportPage, renderPaidImportPage), reached
   through New analysis. The page kit: the header, a panel per way in with
   what it spends on its header row (.mk-form, as Landing pages' Capture a
   page and Copy's Paste copy), the controls row, kit notes and steps; the
   scraped list is the Library's table (.pg-table-wrap); an imported ad is a
   Market card (.ad-card) with no cover.
   ═══════════════════════════════════════════════════════════════════════════ */
.imp-page .pg-controls input.imp-num, .imp-num { width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.imp-page .pg-controls .btn { white-space: nowrap; }
.imp-progress { border-top: 1px solid var(--line); display: grid; gap: 8px; }
.imp-steps { margin-top: 2px; }
.imp-page .pg-note.is-bad p { margin: 0; color: var(--bad); }
.imp-table > .table td:first-child { white-space: normal; min-width: 220px; max-width: 420px; color: var(--ink); }
.imp-table > .table td:last-child { text-align: center; }
.imp-table > .table td input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--teal); }
.imp-import { border-top: 1px solid var(--line); display: grid; gap: 8px; }
.imp-done b { color: var(--ink); }
.imp-done .btn { margin-left: auto; }

/* Import ads: the import's summary and each ad's status, the brand finder's
   rows (a list in the panel, the Library's mono sub-line), the tracked
   brands as the Library's chips. */
.import-summary { font-size: 12.5px; color: var(--ink2); line-height: 1.55; margin: 0; }
.import-summary:empty { display: none; }
.import-summary b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.import-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.import-status.new { color: var(--teal); }
.import-status.refreshed { color: var(--ink2); }
.import-status.stopped { color: var(--warn); }
.pim-progress .spinner { width: 14px; height: 14px; border-width: 2px; }
.pim-results .pg-pb { display: grid; gap: 10px; }
.pim-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.pim-top { justify-content: space-between; }
.pim-facts { display: grid; gap: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--ink3); overflow-wrap: anywhere; }
.pim-facts .ad-dest { white-space: normal; }
.pim-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink3); }

.bf-hint { margin: 0; }
.bf-results { display: grid; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bf-results:empty { display: none; }
.bf-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-width: 0; background: var(--card); }
.bf-row + .bf-row { border-top: 1px solid var(--line); }
.bf-avatar {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; background: var(--panel2); border: 1px solid var(--line); color: var(--ink2);
  display: grid; place-items: center; font-weight: 500; font-size: 11px; font-family: var(--font-mono);
}
.bf-text { min-width: 0; flex: 1 1 auto; }
.bf-name { font-weight: 500; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-name .small-muted { font-size: 11.5px; font-weight: 400; }
.bf-sub { font-size: 11px; color: var(--ink3); font-family: var(--font-mono); }
.bf-row .btn { margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.bf-tracked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bf-tracked:empty { display: none; }
@media (max-width: 600px) {
  .bf-row { flex-wrap: wrap; }
  .bf-row .btn { margin-left: 42px; }
}

/* Library loading state — the app paints before the download finishes */
.nl-loading { text-align: center; padding: 56px 24px; }
.nl-loading h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 14px 0 6px; }
.nl-loading p { font-size: 13px; color: var(--ink-3); margin: 0; font-family: var(--font-mono); }
.nl-loading-dot {
  width: 12px; height: 12px; border-radius: 50%; margin: 0 auto; background: var(--ink);
  animation: nl-pulse 1.2s ease-in-out infinite;
}
@keyframes nl-pulse { 0%, 100% { transform: scale(0.7); opacity: 0.35; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nl-loading-dot { animation: none; opacity: 0.8; } }
.nl-detail-loading { font-size: 12px; color: var(--ink-3); margin: 0 0 10px; font-family: var(--font-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
   Attention DNA — brand mark, sidebar groups, quick import
   ═══════════════════════════════════════════════════════════════════════════ */
.qi-kind { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; min-height: 18px; line-height: 1.5; font-family: var(--font-mono); }
.qi-kind.is-ok { color: var(--green); }
.qi-kind.is-err { color: var(--red); }

/* ═══ Boards ═══ */
.cr-save, .cr-remove {
  position: absolute; left: 9px; bottom: 9px; z-index: 3; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22); background: var(--on-media-bg); backdrop-filter: blur(8px);
  color: var(--on-media-ink); font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}
.cr-card:hover .cr-save, .cr-card:hover .cr-remove, .cr-save.is-on, .cr-card:focus-within .cr-save { opacity: 1; }
.cr-save.is-on { background: var(--purple); border-color: transparent; color: var(--btnInk); }
.cr-save:hover, .cr-remove:hover { transform: scale(1.08); }
.cr-remove { font-size: 15px; }
.cr-remove:hover { background: var(--red); border-color: transparent; }

.board-picker {
  position: fixed; z-index: 70; width: 260px; max-height: 340px; overflow: auto;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-float); padding: 10px;
}
.board-picker h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 4px 6px 8px; font-weight: 600; }
.board-picker label { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.board-picker label:hover { background: var(--hover); }
.board-picker label input { width: 15px; height: 15px; accent-color: var(--teal); margin: 0; }
.board-picker .bp-count { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.board-picker .bp-new { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.board-picker .bp-new input { flex: 1; min-width: 0; height: 30px; font-size: 12.5px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--card); }
.board-picker .bp-new input:focus { border-color: var(--teal); }
.board-picker .bp-msg { font-size: 11.5px; color: var(--ink-3); margin: 6px 6px 0; min-height: 14px; }
.board-picker .bp-msg.is-err { color: var(--red); }
.board-picker .bp-empty { font-size: 12.5px; color: var(--ink-3); padding: 6px 8px; line-height: 1.5; }

/* ─── WORKSPACE · BOARDS (stage C3) — route `boards` (js/pages.js
   renderBoardsPage). The page kit (header with Create board as its action,
   panels); a board is a card in the Library card's anatomy (radius 12 on
   --line, --card, a 13/500 name, mono meta), the open one teal as Brands'
   open brand; the open board is a .pg-panel whose body is the Library grid
   (.cr-grid of .cr-card). ─── */
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.bd-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; text-align: left;
  font: inherit; color: var(--ink); overflow: hidden; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  transition: border-color .15s ease;
}
.bd-card:hover { border-color: var(--line2); }
.bd-card.is-active { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal-border); }
.bd-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.bd-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; aspect-ratio: 16 / 10; background: var(--line); }
.bd-mosaic span { position: relative; overflow: hidden; background: var(--media-ph); }
.bd-mosaic span img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-mosaic span i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); background: repeating-linear-gradient(135deg, var(--stripe) 0 6px, transparent 6px 12px); }
.bd-mosaic span:empty { background: repeating-linear-gradient(135deg, var(--stripe) 0 6px, transparent 6px 12px), var(--media-ph); }
.bd-mosaic.is-empty, .bd-mosaic.is-empty span { background: var(--media-ph); }
.bd-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bd-name { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-card .bd-desc { font-size: 12px; line-height: 1.45; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); overflow-wrap: anywhere; }
/* Create board, the header's action: the kit's input and the primary button. */
.bd-new { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; min-width: 0; }
.bd-new .pg-input { width: 220px; }
.bd-new .btn { height: 34px; }
/* The open board's header row: the name and its lines, then Sort, Open in
   Library and the board's own actions. */
.bd-detail .pg-ph { align-items: flex-start; gap: 10px 16px; padding: 14px; }
.bd-detail .pg-ph h2 { font-size: 15px; }
.bd-detail .bd-desc { color: var(--ink2); font-size: 12.5px; }
.bd-detail .bd-desc.empty { font-style: normal; color: var(--ink3); }
.bd-detail-tools { gap: 8px; justify-content: flex-end; }
.bd-detail-tools .btn { height: 34px; }
.bd-detail-tools .actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.bd-detail .pg-pb { padding: 14px; }
@media (max-width: 600px) {
  .bd-new { width: 100%; flex-wrap: nowrap; }
  .bd-new .pg-input { flex: 1 1 auto; width: 0; min-width: 0; }
  .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bd-detail-tools { justify-content: flex-start; }
}

/* ═══ First run — Home's empty state (a configured workspace, nothing in it).
   The page kit since stage C3: the kit's header (mono kicker, 28/400 title,
   one ink), Home's panel cards for the three ways in, a kit panel for what
   every creative gets. ═══ */
.first-run { max-width: 980px; }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.fr-card {
  text-align: left; font-family: inherit; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card);
  color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s ease, background .15s ease;
}
.fr-card:hover { border-color: var(--line2); background: var(--hover); }
.fr-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.fr-card .fr-n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink3); }
.fr-card h3 { font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--ink); margin: 0; }
.fr-card p { font-size: 12.5px; color: var(--ink2); line-height: 1.5; margin: 0; }
.fr-card .fr-cta { margin-top: auto; font-size: 12px; font-weight: 500; color: var(--teal); }
.fr-what ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.55; color: var(--ink2); }

/* ═══════════════════════════════════════════════════════════════════════════
   ANALYSE · ANALYSIS (stage C) — route `analysis` (js/versus.js
   renderAiSection; the Deep Analysis report is js/pages.js
   _renderTribeReport). The page kit's header and controls row, then the
   folder report: its cards and disclosures drawn as the design's panels
   (--card on --line, radius 14, a 12/14 header row, mono meta on the right).
   Screen only where paper has rules of its own (the print block below lays
   the report out as a document and is left as it was).
   ═══════════════════════════════════════════════════════════════════════════ */
.an-page > .page-header { margin-bottom: 14px; }
.analysis-controls { margin: 0 0 10px; }
.an-state .pg-empty b.an-failed { color: var(--bad); font-weight: 500; }
.format-bar { margin: 0 0 14px; }
.analysis-export { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 14px; }
/* Format and Story, with Download PDF at the end of the same row: the
   format bar and the export bar are the report's first two children, so the
   report is a two-column grid whose every other child spans both columns. */
@media screen {
  #aiAnalysisDynContent { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; }
  #aiAnalysisDynContent > * { grid-column: 1 / -1; min-width: 0; }
  #aiAnalysisDynContent > .format-bar { grid-column: 1; }
  #aiAnalysisDynContent > .analysis-export { grid-column: 2; }
}
/* On a phone the report is one column: the format bar takes the whole width
   (a second, empty column and its gap took 14px from the Format select, and
   "… 109 High · 109 Low" no longer fitted it at 360px), Download PDF under it. */
@media screen and (max-width: 600px) {
  #aiAnalysisDynContent { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  #aiAnalysisDynContent > .format-bar, #aiAnalysisDynContent > .analysis-export { grid-column: 1; }
  #aiAnalysisDynContent > .analysis-export { justify-content: flex-start; }
}

/* Whose readings the encoder's headline cards are (js/versus.js). */
.an-enc-k { margin: 0 0 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }

/* A warning is a tinted panel, as Home's notes are, not a coloured edge. */
/* (Stage C fix) Warnings are the kit's note (.pg-note.is-warn) inside a
   panel or on their own — never a tinted card. */
.an-page .pg-note.is-warn + .pg-note.is-warn { margin-top: 8px; }

/* Calibration and the method check: the verdict's tone is a dot by the
   eyebrow (it was a 3px coloured left edge). */
.cal-card .cal-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.1em; color: var(--ink3);
}
.cal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); }
.cal-card.tone-good .cal-dot { background: var(--tier-high); }
.cal-card.tone-mid  .cal-dot { background: var(--warn); }
.cal-card.tone-bad  .cal-dot { background: var(--tier-low); }
.cal-card .cal-title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; margin: 4px 0 6px; }
.cal-rungs thead th, .corr-table thead th { font-weight: 400; }

/* (Stage C fix) Every top-level block of the report is a panel, as on Home
   and the Run page: a header row (.pg-ph: the title, its mono meta on the
   right) over a hairline, then the body (.pg-pb). The card's own 18px
   padding goes to those two rows. Screen only: on paper the header row is
   the block's plain heading, as before (print block below). */
@media screen {
  .an-page .card:has(> .pg-pb) { padding: 0; overflow: hidden; }
  .an-page .card > .pg-ph h2, .an-page .card > .pg-ph h3 { margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--ink); }
  .an-page .pg-panel.an-enc .versus-grid { margin: 0; }
  /* How each tier is made: the header row names it, so the sentence under it
     starts at its verdict (paper keeps the whole sentence). */
  .an-page .format-mix .fm-lead { display: none; }
  .an-page .format-mix .fm-verdict::first-letter { text-transform: uppercase; }
  /* Calibration and the method check: the title leads the header row, the
     eyebrow (with its verdict dot) sits on the right as the meta. */
  .an-page .cal-ph .cal-eyebrow { order: 2; }
  .an-page .cal-ph .cal-title { margin: 0; font-size: 13.5px; font-weight: 500; letter-spacing: 0; }
  /* Deep Analysis: the description and its button share a row. */
  .an-page .deep-card .deep-cta-head { align-items: center; }
  .an-page .deep-card .deep-cta-sub { flex: 1 1 420px; }
  /* Headings inside the panels: the kit's 500, not 600. */
  /* !important: the template's h4s carry an inline 600 (paper keeps it). */
  .an-page h4, .an-page .prod-do-head { font-weight: 500 !important; }
  .an-page .card b, .an-page .card strong, .an-page .a-section-body b, .an-page .a-section-body strong { font-weight: 500; }
  /* Tables and readings in the kit's weights: header rows 400 (the Library's
     mono header), row heads and figures 500. !important: several carry an
     inline 600 that paper keeps. */
  .an-page thead th, .an-page .versus-row.head > div { font-weight: 400 !important; }
  .an-page tbody th, .an-page td.num, .an-page .versus-row .val, .an-page .rc-label, .an-page .rp-delta { font-weight: 500 !important; }
}

/* Deep Analysis — the folder's neural readout (js/versus.js deepCtaHtml), in
   the page kit. Its neural framing is the owner's decision (2026-10-15,
   TODOS.md "Product direction"). */
.deep-card { margin-bottom: 14px; }
.deep-cta-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; }
.deep-cta-text { display: grid; gap: 4px; min-width: 0; flex: 1 1 420px; }
.deep-cta-title { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; color: var(--ink); }
.deep-cta-sub { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink2); max-width: 82ch; }
.deep-status { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink2); }
.deep-status:empty { display: none; }
.deep-status.is-busy { color: var(--teal); }
.deep-status.is-bad { color: var(--bad); }
.tribe-v2-report .readout-card .rc-label { white-space: normal; }
/* A stored report's stamp line carries "Run it again" (writers, screen only)
   where the card's Deep Analysis button can run it: the date, then the
   sentence and its button, wrapping as one unit on a phone. */
.tribe-v2-stamp.has-rerun { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; line-height: 1.5; }
.tribe-v2-stamp .deep-rerun { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
/* The Deep Analysis Verdict is the report's banner — the design's one accent
   card (--blush/--sienna, both themes) — with its tag in the kit's mono
   eyebrow voice, like the report's other eyebrows. The tag is full --sienna:
   at opacity 0.85 it was 4.47:1 in dark and 4.03:1 in light on the banner
   (tests/contrast.test.cjs checks the tag at its opacity). */
.tribe-v2-report .readout-verdict .rv-tag { font-size: 10px; font-weight: 400; letter-spacing: 0.1em; }
.tribe-v2-report .readout-verdict p { overflow-wrap: anywhere; }

/* The scan-report components the report and the Script template share, in
   the design's voice: mono eyebrows without the old [ brackets ], card titles
   at 17/500, tiles at Home's 26/400. */
.readout-eyebrow, .rp-eyebrow { font-size: 10px; font-weight: 400; letter-spacing: 0.1em; }
.readout-eyebrow::before, .readout-eyebrow::after, .rp-eyebrow::before, .rp-eyebrow::after { content: none; }
.readout-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.readout-panel { border-radius: var(--r-lg); padding: 14px 16px 12px; }
.rp-title { font-size: 13.5px; }
.versus-card { border-radius: var(--r-lg); padding: 14px; }
.versus-card h4 { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.08em; color: var(--ink3); }
.versus-card .v { font-size: 26px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.insight-callout { border-left: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 12px 14px; font-size: 13px; }
.readout-callout-good, .readout-callout-bad { border-left-width: 1px; }
.readout-callout-good { border-color: var(--teal-border); }
.readout-callout-bad { border-color: var(--bad-border); }

/* The disclosures are panels: the summary is the header row (title, mono
   meta on the right), the body its content; a card inside an open panel is
   one of its blocks, between hairlines, not a box in a box. */
/* (Stage C fix) Screen only: outside @media screen the meta's caps reached
   the PDF ("WHAT SEPARATES THE TOP PERFORMERS, TESTED"), where the print
   block sets these in sentence case. */
@media screen {
  .a-title { font-size: 13.5px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
  .a-meta { font-size: 10px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; }
  .a-section { margin: 0 0 14px; min-width: 0; }
  .a-section > summary { padding: 12px 14px; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
  .a-section > summary:hover { border-color: var(--line2); }
  .a-section[open] > summary { border-radius: var(--r-lg) var(--r-lg) 0 0; margin-bottom: 0; }
  .a-section[open] > .a-section-body {
    padding: 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
    background: var(--card); min-width: 0;
  }
  .a-section-body > .card, .a-section-body > .card.ins { border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; }
  .a-section-body > * + .card { margin-top: 14px !important; padding-top: 14px; border-top: 1px solid var(--line); }
}
/* (Stage C fix) WCAG 1.4.10 at 320px: the template's mono meta lines
   ("0–3s · high tier at 8.0/10 · low 7.0") and a script's header line were
   inline nowrap and pushed the page 39px sideways. Under 600px they wrap, as
   the print block already lets them; !important beats the inline nowrap. */
@media screen and (max-width: 600px) {
  .tpl-hrow { flex-wrap: wrap; row-gap: 2px; }
  .tpl-meta, .script-full header > span { white-space: normal !important; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  .a-section > summary { flex-wrap: wrap; row-gap: 2px; }
  .a-meta { flex: 1 1 100%; padding-left: 28px; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANALYSE · COMPARE (stage C) — route `compare` (js/pages.js
   renderComparePage). Two creatives' cards in the Library's anatomy, then
   the AI rubric and the brain encoder as two panels of pair tables.
   ═══════════════════════════════════════════════════════════════════════════ */
/* A fixed width: as min(360px, 100%) the select's intrinsic width (its
   longest option, a whole one-line summary) sized the field, and the two
   pickers took a row each. */
.cmp-pick select { min-width: 0; width: 340px; max-width: 100%; }
#compareResults .sub-tabs { margin-bottom: 14px; }
#compareResults .pg-grid + .pg-grid { margin-top: 14px; }
.cmp-cards:empty { display: none; }
.cmp-card-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0; }
.cmp-thumb { width: 32px; height: 50px; }
.cmp-id { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.cmp-name { font-weight: 500; line-height: 1.3; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmp-sub { font-size: 11.5px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.cmp-open { flex-shrink: 0; }
.cmp-table th[scope="row"] { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--ink2); font-weight: 400; }
.cmp-table td.num { width: 22%; }
.cmp-table td.is-lead, .table.pg-table.cmp-table td.num.is-lead { color: var(--teal); font-weight: 500; }
.cmp-table td.cmp-diff, .table.pg-table.cmp-table td.num.cmp-diff { color: var(--ink3); font-size: 11px; }
.cmp-note { text-align: center; padding: 36px 16px; color: var(--ink3); }
@media (max-width: 600px) {
  .cmp-pick select { width: 100%; }
  /* The cover beside the name; Open under it, not a row of its own. */
  .cmp-card-body { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; }
  .cmp-card-body .cmp-open { grid-column: 2; justify-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANALYSE · LEADERBOARD (stage C) — route `leaderboard` (js/pages.js
   renderLeaderboardPage). The ranking in the Library's table anatomy (its
   run cell, tier chip and mono header), inside its own scroller; the rule
   line under the panel's header; the top ten as a chart.
   ═══════════════════════════════════════════════════════════════════════════ */
.lb-page .rank-rule { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.lb-table-wrap .creative-table td:first-child { min-width: 220px; max-width: 320px; white-space: normal; }
.lb-table-wrap .creative-table td { white-space: nowrap; }
.lb-table-wrap .lib-run-sub span { font-family: var(--font-mono); font-size: 10.5px; }
.lb-score, .lb-table-wrap .lb-score { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.lb-score b { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); }
.lb-score i { font-size: 9.5px; }
.lb-chart { height: 340px; margin: 0; }
/* The chart key (Lab): a swatch per series. The Leaderboard's chart is one
   quantity since stage C fix 2 (the AI score), so it has no key, and its
   .is-rubric / .is-sustained swatches went with it. */
.lab-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font-size: 11px; color: var(--ink2); }
.lab-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lab-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--ink4); }
.lab-legend i.is-high { background: var(--tier-high); }
.lab-legend i.is-mid { background: var(--tier-mid); }
.lab-legend i.is-low { background: var(--tier-low); }
.lab-legend i.is-trend { height: 0; border-top: 2px dashed var(--warn); background: none; border-radius: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANALYSE · LAB (stage C) — route `lab` (js/lab.js). Tiles, the AI score
   over time, the gap line, the ranked table (rows open their Run page).
   ═══════════════════════════════════════════════════════════════════════════ */
.lab-chart { position: relative; height: 260px; }
/* (Stage C fix 2) The results under the Folder control are redrawn into
   their own wrapper (#labResults), which took them out of the .pg grid and
   its 14px gap: the tiles, the chart, the gap note and the table touched.
   The wrapper is the same one-column grid. */
.lab-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.lab-best { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lab-kpis .hm-kpi-sep { font-size: 16px; }
.lab-table .lab-c-name { min-width: 240px; max-width: 380px; white-space: normal; }
/* (Stage C fix) The rank, then the Library's creative cell (cover, name,
   folder), side by side: a wrapped name stays indented past the rank. */
.lab-run { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lab-rank { flex: 0 0 22px; font-family: var(--font-mono); font-size: 11px; color: var(--ink3); text-align: right; font-variant-numeric: tabular-nums; }
.lab-run > .lib-run { flex: 1 1 auto; }
.lab-name { overflow-wrap: anywhere; }
@media (max-width: 600px) { .lab-table .lab-c-name { min-width: 200px; } .lab-chart { height: 220px; } }
.lab-c-date { font-size: 11.5px; color: var(--ink3); white-space: nowrap; }
.lab-empty-act { padding-top: 0; }

/* ════════════════════════════════════════════════════════════
   Print — the only export path this app has for a readout.

   Every data block renders inside the constant-dark instrument
   scope, and browsers do not print background colours, so Cmd+P
   used to produce near-white text on white paper: the readouts
   were invisible ink. This flips the instrument tokens to
   ink-on-white for print only, opens every disclosure so nothing
   is silently omitted from the page, and keeps cards whole across
   page breaks.
   ════════════════════════════════════════════════════════════ */
/* ── Print-only scaffolding ───────────────────────────────────────────────────
   .print-only is the cover block the PDF export puts at the top of the
   document; it must never be visible on screen. .no-print is its inverse — the
   export button itself, which would otherwise be printed onto page 1. */
.print-only { display: none !important; }


@media print {
  /* Ink on white, whatever theme the screen was in. (0,2,0) and below every
     theme block, so it beats both [data-theme="dark"] and [data-theme="light"]
     (and plain :root when no attribute is set). It names every PRIMITIVE the
     theme blocks set; the legacy names are var() aliases and follow. Never
     apply theme tokens inline on <html>: inline custom properties beat this
     block and dark-theme ink would print on white paper. */
  :root,
  :root[data-theme] {
    --bg: #FFFFFF; --side: #FFFFFF; --card: #FFFFFF; --panel2: #FFFFFF;
    --cell: #EEF0F4; --media-ph: #EEF0F4;
    --line: #C3C6CD; --line2: #B9BCC4;
    --hover: transparent; --chip: #EFF0F2; --stripe: rgba(0,0,0,0.06);
    --ink: #000000; --ink2: #2A2D33; --ink3: #4A4E57; --ink4: #5C606A;
    --teal: #0A5A54; --purple: #6B21A8; --indigo: #3730A3; --bad: #A32914; --warn: #7A5200;
    --teal-bg: #E6F2F0;   --teal-border: #9CC9C3;
    --indigo-bg: #ECEEFB; --indigo-border: #B4B8E8;
    --bad-bg: #F8EBE8;    --bad-border: #E2B3A9;
    --warn-bg: #F7F1E3;   --warn-border: #DCC79A;
    --purple-bg: #F3ECFB;
    --tier-high: #0D9488; --tier-mid: #4F46E5; --tier-low: #DC2626;
    --btn: #000000; --btnInk: #FFFFFF; --ring: transparent;
    --dna-facts: #2A78D6; --dna-fun: #EB6834; --dna-feeling: #C4457A; --dna-opinion: #4A3AA7; --dna-action: #E34948;
    --shadow-sm: none; --shadow-float: none; --shadow-elevated: none; --shadow-card: none; --shadow-modal: none;
    color-scheme: light;
  }
  html, body { background: #FFFFFF !important; color: #000000 !important; }

  /* Chrome the paper does not need. */
  .sidebar, .mobile-bottom-nav, .mobile-nav, #authOverlay,
  .hero-ctas, .btn, .xq-bar, .xq-chips, .fb-chips, .sub-tabs,
  .toast, .toast-container, .board-picker, .modal, .modal-backdrop,
  .nl-dialog, .drawer-scrim, .skip-link, #routeAnnouncer { display: none !important; }

  /* The shell's flex frame (sidebar | column of top bar over page) is
     screen furniture: on paper the page is one plain block, with no
     viewport-tall minimums to spill onto an extra sheet. */
  .app-layout, .app-column { display: block !important; min-height: 0 !important; }
  .main-content { margin: 0 !important; padding: 0 !important; min-height: 0 !important; overflow: visible !important; }
  .content-inner { max-width: none !important; padding: 0 !important; }

  /* Nothing is hidden behind a twisty on paper. */
  details { display: block !important; }
  details > summary { list-style: none; font-weight: 600; }
  details > summary::-webkit-details-marker { display: none; }
  /* The drawn twisties too — an arrow that opens nothing is chrome on paper.
     Listed one by one: .cov-withheld's summary::before is a warning sign, not
     a twisty, and must print. */
  .xq-stats > summary::before, .cal-ledger > summary::before,
  .lp-evidence > summary::before, .cmp-same summary::before,
  details.xq-organise > summary::after, .studio-signal-filters summary::after { content: none !important; }
  details > *:not(summary) { display: revert !important; }
  .a-section-body, .cov-withheld ul, .cov-withheld p { display: revert !important; }
  /* That revert also undoes the author display of every direct child of a
     disclosure. The one it broke: the "Where both tiers match" chip row, a
     wrapping flex row on screen. Reverted to a block, its chips flowed as
     inline text and broke mid-chip ("Music present · / both ≈ 72%"), borders
     and all. */
  .cmp-match-wrap { display: flex !important; }

  /* A wide table wraps its cells on paper instead of losing its right-hand
     columns inside a scroll wrapper. */
  .creative-table td, .corr-table td, .cal-rungs td, .cal-rungs th { white-space: normal !important; }
  #explorerTableWrap, .tbl-scroll { overflow: visible !important; }
  .creative-table th:first-child, .creative-table td:first-child { position: static; }

  /* Paper borders instead of screen shadows, on every card-like surface. */
  .card, .readout-card, .versus-card, .insight-tile, .dna-hero,
  .meta-rows, .chart-container, .cr-card {
    box-shadow: none !important;
    border: 1px solid var(--line) !important;
  }

  /* ── Keep-together, for ATOMS only ─────────────────────────────────────────
     This used to put break-inside:avoid on .card and .a-section — section-sized
     containers. When one of those is taller than the space left on a page,
     Chrome moves it to a fresh page to honour the avoid, discovers it is taller
     than a page too, and breaks it there anyway. What was left behind was the
     section's <summary> alone on an otherwise empty page: pages 3, 6, 19, 21
     and 24 of a real export, each at 0.00% ink below the heading.
     A section is allowed to flow across a page like any document. Only things
     that are meaningless when cut in half — a metric card, a chart, a table
     row, a quote — are kept whole. */
  .readout-card, .insight-tile, .meta-rows, .chart-container, .cr-card,
  .dna-quote, tr, .versus-row, .readout-panel,
  .how-read, .not-narrowed, .format-list li,
  .seen-in li, .prod-do-list li, .topic-list li,
  .cmp-tone-note, .agree p, .agree li {
    break-inside: avoid; page-break-inside: avoid;
  }
  /* A list's lead-in stays with its first item: an example list may break
     between videos, never between "High — highest first:" and the first. */
  .seen-in-head, .seen-in .seen-side, .prod-do-head, .topic-group, .cmp-kw > .ghost-tag { break-after: avoid; page-break-after: avoid; }
  /* A calibration card's eyebrow stays with its title, and the per-creator
     ledger's heading with its table. The eyebrow is a span: break-after does
     nothing on an inline box, so it is made a block on paper. */
  .cal-card .cal-eyebrow { display: block; }
  .cal-card .cal-eyebrow, .cal-ledger > summary { break-after: avoid; page-break-after: avoid; }
  .card, .a-section, .a-section-body, .versus-card, .dna-hero {
    break-inside: auto !important; page-break-inside: auto !important;
  }
  /* The emotion shown on a card of its own (no Language DNA to sit in) is a
     few hundred pixels: one atom, or its column heads land on one page and
     their values on the next. The selector and !important both, or the rule
     above wins. Inside a flowing Language DNA card, the AI's block and the
     person's are atoms, the grid's head stays with its first row, and the
     how-to note with what it explains. */
  .dna-hero.dna-emotion-card { break-inside: avoid !important; page-break-inside: avoid !important; }
  .dna-emotion, .dna-person { break-inside: avoid; page-break-inside: avoid; }
  .dna-side-row.head { break-after: avoid; page-break-after: avoid; }
  .dna-emo-howto { break-before: avoid; page-break-before: avoid; }
  /* A screen-only block first in that card takes no hairline with it, so the
     person's reading after it must not draw one at the top of the card. */
  .dna-emotion-card > .dna-emotion.no-print:first-child + .dna-person { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  table { break-inside: auto; }
  tr, .versus-row { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }

  /* Colour-blind-safe on greyscale printers: the bars still carry a border. */
  .dna-bar > span, .rc-fill { border: 0.5pt solid rgba(0,0,0,0.35); }

  /* ── Chart marks print even with "Background graphics" off ─────────────────
     Every dot, rail and bar in these charts is drawn with CSS background, and
     background graphics are OFF by default in the print dialog. Blink then
     skips backgrounds but still paints box-shadows — so each dot survived only
     as its shadow ring: the empty circles on the rubric cards, the Production
     comparison and the Language DNA table.
     print-color-adjust is inherited, so it is set on each chart's container and
     reaches every mark inside, including colours set inline. Scoped to the
     marks, not the page, so page and card fills still drop as they should.
     (Found and verified by render in the root-cause pass, before and after.) */
  .rc-range, .rc-dist, .dna-db-track, .dna-bar, .dna-sphere,
  .ddr-type i, .dl-item i, .dna-quote i, .dna-pill i, .dna-tab i,
  .cmp-dot, .corr-bar, .lvl-pill i, .rp-bar, .rp-legend i,
  .btl-cell, .btl-scale-bar, .cr-tier i, .progress-bar, .bulk-bar,
  .hm-dna i, .hm-bar i, .hm-bin i, .hm-pt, .hm-dot, .hm-spark i,
  .hm-dna-key i, .hm-legend i, .lib-dot, .cal-dot, .lab-legend i,
  .run-tl-mark, .run-tl-span, .run-tl-emo, .run-tl-peak, .run-band, .run-store i, .run-rec-text i, .run-tile-dist {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* The dumbbell rail is var(--card), which the print tokens make #FFF — white
     on white. Give it the grey rail the score cards use. */
  .dna-db-track { background: var(--track); }
  /* Side by side on A4, the sphere pair and its legend leave the Language DNA
     dumbbell about 20px wide, so both tiers' dots land on top of each other.
     Stacked on paper: headline and dumbbells full width, the pair centred
     below. Only the cohort grid, the one holding the PAIR: the per-video
     readout's single sphere is not squeezed and keeps its row. Plain block
     flow, not column-reverse — Chromium slices a flex item across a page
     break even under break-inside:avoid, and cut both donuts in half. */
  .dna-hero-grid:has(> .dna-duo-col) { display: block; }
  .dna-hero-grid:has(> .dna-duo-col) > .dna-duo-col { margin-top: 20px; }
  /* A sphere is a chart: never cut across a page. */
  .dna-duo-col, .dna-sphere-wrap { break-inside: avoid; page-break-inside: avoid; }

  /* A link is useless on paper unless its target is printed with it. */
  .rc-note a[href^="http"]::after,
  .meta-row a[href^="http"]::after,
  .seen-in a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }

  /* ── No browser header or footer ───────────────────────────────────────────
     Chrome and Safari stamp a header (date + document title) and a footer (URL
     + page number) onto every printed page. The URL is https://attentiondna.com
     /app.html, so the product name landed 32 times in a document that was
     supposed to carry it zero times — the title swap fixed the header and did
     nothing for the footer.
     Neither is reachable from CSS directly. What IS reachable: browsers omit
     them when the page margin leaves no room. So the page margin goes to zero
     and the white space comes back as padding on the content, which prints
     identically and cannot hold a footer. */
  @page { margin: 0; }
  body { padding: 14mm !important; }

  /* ── The PDF export ────────────────────────────────────────────────────────
     Unbranded is a property of what is on the page, so it is enforced here
     rather than trusted to whoever exports. The sidebar carrying the wordmark
     is already display:none above; these three rules cover the rest. */

  /* 1. The export bar, and anything else marked as screen furniture. */
  .no-print, .analysis-export,
  [data-export-pdf], [data-versus-analyze], #cohortDeepBtn,
  .cr-note-btn, .bd-detail-tools, .bd-new, .bulk-details,
  /* Home's controls (Briefing|Analyst printed back to front: the pressed
     button is white ink on an unprinted fill), its action buttons and
     standalone links, Retry, and the scatter's on-screen helpers. Links
     inside sentences (.hm-linklike without .hm-go) stay, as text. */
  .hm-layout, .hm-btn, .hm-go, .hm-comp-act, .hm-aw-go, .hm-aw-act,
  [data-retry-load], .hm-sc-read, .hm-sc-list { display: none !important; }

  /* 2. The cover block, shown only here. A document handed to someone else
        needs to say what it is about and when it was made; it does not need to
        say what made it. */
  .print-only { display: block !important; }
  .print-only-inline { display: inline !important; }
  .print-cover {
    border-bottom: 2px solid #17191C;
    padding-bottom: 14px;
    margin-bottom: 22px;
  }
  .print-cover h1 {
    font-size: 26pt; font-weight: 600; letter-spacing: -0.02em;
    color: #000; margin: 0 0 6px;
  }
  .print-cover .print-sub {
    font-size: 10pt; color: #4A4E57; margin: 0;
    text-transform: uppercase; letter-spacing: 0.1em;
  }

  /* 3. Sections flow across pages; only atoms are kept whole (see
        Keep-together above). */

  /* A section's summary is its heading on paper. Kept with what follows it,
     and stripped of the chevron — an affordance for clicking, which paper does
     not have. */
  summary.a-summary {
    break-after: avoid; page-break-after: avoid;
    display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 18px 0 10px !important; padding: 0 0 6px !important;
    border: 0 !important; border-bottom: 1.5px solid #17191C !important;
    background: none !important; list-style: none;
  }
  details.a-section > summary .a-chev { display: none !important; }
  /* On paper the <summary> is the section heading. A card's own copy of it
     ("Opening hooks & lines", "High Performers (16)", "[ SCRIPT TEMPLATE ]",
     "LANGUAGE DNA") only repeats it, directly underneath. Scoped to
     disclosures: the older folder view renders the same cards with no
     summary above them, and there the card's heading is the only one. */
  .a-section-body .sec-repeat { display: none !important; }

  /* Operational sections: which rows have media, which failed, an Analyse
     button per row. Useful on screen while working; noise in a document handed
     to a client, and four pages of it duplicated the High/Low tables. */
  details.print-omit { display: none !important; }

  /* ── Nothing is clipped or cut short on paper ──────────────────────────────
     On screen a long value can be truncated with a hover title to recover it.
     Paper has no hover, so truncation there is simply loss: the cohort tables
     printed every summary as "A visual comparison showin…", and the
     "Leaning the same way" line ran five effect sizes off the right edge,
     because workbench-redesign.css (loaded after this file) makes .fx-inline a
     nowrap inline-block. Both come back to ordinary wrapping text in print. */
  .cohort-summary {
    white-space: normal !important; overflow: visible !important;
    text-overflow: clip !important; max-width: none !important;
  }
  /* A LIST of effects wraps like prose on paper; a single effect is one unit
     and moves to the next line whole rather than printing "… · large ·" and
     then "n 16 vs 16" on its own. */
  .fx-inline.fx-list { white-space: normal !important; display: inline !important; }
  .fx-inline:not(.fx-list) { white-space: nowrap !important; display: inline-block !important; }

  /* The Deep Analysis card is a call to action — a header, a Run button and an
     empty slot a stored report is restored into. With no report it printed as
     an empty box headed "Deep Analysis" at the top of page one: a section
     promising content that is not there. It prints only when it holds a
     report, and then without the button row, since the report carries its own
     header. */
  .deep-card:not(:has(.tribe-v2-report)) { display: none !important; }
  .deep-card .deep-cta-head, #cohortDeepStatus, .deep-card > .pg-ph { display: none !important; }
  /* (Stage C fix) The report's panels (header row + body, screen) are its
     old cards on paper: the header row is the plain heading it was, its
     meta is screen furniture, and the body has no padding of its own. */
  .an-page .card > .pg-ph { display: block; padding: 0; margin: 0 0 4px; border: 0; background: none; }
  .an-page .card > .pg-ph .pg-meta { display: none !important; }
  .an-page .card > .pg-ph > h2 { font-size: 17px; }
  .an-page .card > .pg-ph > h3:not(.cal-title) { font-size: 15px; }
  .an-page .card > .pg-pb, .an-page .pg-panel.an-enc > .pg-pb { padding: 0; }
  .an-page .card.pg-panel { overflow: visible; }
  .an-page .pg-panel.an-enc { border: 0 !important; background: none !important; overflow: visible; }
  .deep-card { border: 0 !important; background: none !important; padding: 0 !important; }
  summary.a-summary .a-title { font-size: 13pt; font-weight: 600; color: #000; }
  summary.a-summary .a-meta { font-size: 8.5pt; color: #4A4E57; }
  details.a-section { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
  #copyScriptTemplateBtn, #copyScriptTemplateLowBtn { display: none !important; }
  /* A tested difference is one unit on paper: its instruction never parts
     from its numbers across a page. */
  .tpl-row, .tpl-desc-row { break-inside: avoid; page-break-inside: avoid; }
  /* The band that names the script and its first step are one unit on paper:
     alone at the foot of a page, "[ THE SCRIPT — TOP TO BOTTOM ]" introduced
     nothing, and break-after:avoid on the band did not hold it in Chromium. */
  .tpl-keep { break-inside: avoid; page-break-inside: avoid; }

  /* ── One creative's readout: the Run page (js/run-page.js) ────────────────
     It prints where it stands. The dialog it replaced was position:fixed in
     the top layer and printed one clipped page; its seven sub-tabs printed
     one, and their charts drew only on a click. The page is in normal flow,
     every section is on it, and this makes it paper: one column, dark ink on
     white (the tokens above), the Library behind it, the app's chrome and the
     page's own controls left off, the player as its cover image. */
  body.is-printing-readout #libRoot { display: none !important; }
  .run-nav, .run-actions, .run-links, .run-caption, .run-emo-chip, .run-tl-head,
  .run-player video, #explorerResultSelect, .run-picker, .copy-more { display: none !important; }
  .run-top, .run-flow, .run-bd, .run-copy-row, .run-kind-split { display: block !important; }
  .run-top-copy .copy-text { columns: auto !important; max-width: none !important; }
  /* Long copy's cap and fade are the screen's; paper has the whole text. */
  .run-top-copy .run-copy .copy-text { max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  /* The breakdown's balanced text columns (.is-flow) are a screen layout;
     on paper it reads down one column, lead first, as before. */
  .run-bd.is-flow { columns: auto !important; column-rule: none !important; }
  .run-flow { margin-bottom: 0 !important; }
  .run { gap: 0 !important; display: block !important; }
  .run-head { margin-bottom: 5mm; padding-bottom: 3mm; border-bottom: 1.5px solid #17191C; }
  .run-print-kicker { margin: 0 0 2mm; font-family: var(--font-mono); font-size: 8.5pt; letter-spacing: 0.1em; text-transform: uppercase; color: #4A4E57; }
  .run-id h1 { font-size: 20pt !important; }
  .run-media { width: 52mm; margin: 0 0 4mm; padding: 2mm !important; }
  /* A4 is narrower than 900px, so the narrow-window rules match on paper;
     these outrank their (0,2,0) widths, or the video cover printed ~79 mm
     wide and centred, and an image ad's 111 mm (stage B review, item 33). */
  .run-top-video .run-media, .run-top-image_ad .run-media { width: 52mm; justify-self: start; margin: 0 0 4mm; }
  .run-top-copy .run-media, .run-top-landing .run-media { width: auto; justify-self: stretch; }
  /* Seek buttons are text on paper, not links. */
  .run-linklike[data-seek], .run-tl-mark { text-decoration: none !important; }
  .run-player { border: 0 !important; background: none !important; }
  .run-noplay { aspect-ratio: auto !important; padding: 4mm !important; background: none !important; }
  .run-panel, .run-tiles, .run-media { border: 1px solid var(--line) !important; border-radius: 6px !important; margin: 0 0 4mm !important; box-shadow: none !important; }
  .run-main { display: block !important; }
  .run-tiles-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .run-tiles-grid > .run-tile { grid-column: auto !important; }
  /* Copy's seven: three, three, and the AI score across the last row. */
  .run-tiles-grid[data-n="7"] > .run-tile:last-child { grid-column: 1 / -1 !important; }
  .run-tile, .run-tl, .run-rec-list li, .run-rows > div, .run-ost li, .run-sync li, .run-enc-stats > div, .run-kind-rows > div {
    break-inside: avoid; page-break-inside: avoid;
  }
  .run-ph { break-after: avoid; page-break-after: avoid; }
  /* Details (the facts, what they rest on, where the media lives) is one
     short panel: kept whole, so its last lines never spill alone onto a
     page of their own. */
  .run-details { break-inside: avoid; page-break-inside: avoid; }
  .run-bd-lead { border-right: 0 !important; }
  .run-tl-tracks { cursor: default; }
  .run-sync-line, .run-rec-time, .run-tl-mark { cursor: default; }
  /* A transcript is read in full on paper, not in a scroll box that printed
     its first ~140 words and silently dropped the rest. */
  .readout-transcript { max-height: none !important; overflow: visible !important; }
  /* Charts follow the theme, so a bitmap can hold dark-theme light ink or
     light-theme dark ink. No filter here: js/charts.js repaints every live
     chart (Chart.instances) in the paper palette on beforeprint — the ink
     these print tokens set — and back to the theme on afterprint. (This used
     to be invert(1) hue-rotate(180deg), which assumed light ink and would
     print a light-theme chart white on white.) */
  .chart-container { break-inside: avoid; page-break-inside: avoid; }
  .chart-container canvas { max-width: 100% !important; height: auto !important; }

  /* Controls inside a readout are furniture on paper. */
  .explorer-controls, .cr-note-btn { display: none !important; }

  /* ── App chrome that reached the page ──────────────────────────────────────
     Found by reading a real export: the breadcrumb, the space/folder pickers
     and the search box all printed above the cover block. Controls for a
     surface that does not exist on paper. */
  #appTopbar, .studio-breadcrumb, .studio-global-search, .studio-environment,
  #sidebarSearch, #sidebarSearchInput, #globalSearch, .tb-theme, .analysis-controls,
  #quickImportBtn, #newAnalysisBtn, .studio-sidebar-footer { display: none !important; }

  /* ── Full scripts ──────────────────────────────────────────────────────────
     These are the pages people hand over, so they start fresh and a single
     script is allowed to run across pages rather than being squeezed. */
  .script-full { break-inside: auto; page-break-inside: auto; }
  /* One layout for every script, not two: as a flex row that wraps, a short
     title kept "HIGH PERFORMER · 2,000,000 VIEWS" beside it while a long one
     pushed it underneath, so the list alternated between the two. On paper the
     title always takes its own line and the tier and views sit under it. */
  .script-full header {
    break-after: avoid; page-break-after: avoid;
    break-inside: avoid; page-break-inside: avoid;
    display: block !important;
  }
  .script-full header h4 { max-width: none !important; margin-bottom: 3px !important; }
  .script-full header > span { display: block; white-space: normal !important; }
  .script-body { orphans: 3; widows: 3; }
  /* A script with no transcript to run on — a silent reel's on-screen phrases,
     or a line saying there is none — is a title, a meta line and a handful of
     short lines: one piece, never cut. A real export split one's two-line title
     across pages ("…apple, potato, and carrot" / "combined.") and another's
     label mid-line, its phrases landing on the next page without it. */
  .script-full.script-short { break-inside: avoid; page-break-inside: avoid; }
  .script-src { break-after: avoid; page-break-after: avoid; }
  .script-onscreen { break-inside: avoid; page-break-inside: avoid; }
  /* A full overlay script reads like a transcript on paper: it may continue on
     the next page, but never splits a line from its time, and never leaves a
     single line stranded at the foot of a page. */
  .script-overlay { orphans: 3; widows: 3; }
  .script-overlay li { break-inside: avoid; page-break-inside: avoid; }

  /* ── Wide tables ───────────────────────────────────────────────────────────
     Read off a real export: the cohort tables carry nine columns, and at 14mm
     margins the prose column collapsed to one word per line —
     "Problem-" / "Agitate-" / "Solve" stacked vertically down the page. Legible
     on a 1400px screen, unreadable on A4.
     Smaller type and tighter cells buy most of it back, and the free-text
     columns wrap on words rather than breaking mid-word. */
  .versus-table, .table, .admin-table {
    font-size: 8.5pt !important;
    table-layout: auto;
    width: 100% !important;
  }
  /* overflow-wrap: break-word, NOT anywhere. The two wrap the same visible
     text, but "anywhere" also shrinks every cell's MIN-CONTENT width to about
     one character — and automatic table layout sizes columns from min-content.
     1.13.1.0 shipped "anywhere", and the table layout crushed every column to
     that width: "Hi / gh", "Lo / w", "7/1 / 0", "100 / %", "SCRO LL-STOP".
     "break-word" keeps each column at least as wide as its longest word and
     only breaks a word that cannot fit on a line of its own. */
  .versus-table th, .versus-table td,
  .table th, .table td {
    padding: 4px 5px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }
  .versus-table thead, .table thead { display: table-header-group; }

  /* ── Instructions for controls that are not on paper ───────────────────────
     "Click Analyse on each row to extract structured features" printed inside a
     client document. Anything that tells the reader to press something is
     screen copy by definition. */
  .print-hide-instruction, .a-section-note, .versus-hint { display: none !important; }
}