/* PKB Group Ads Dashboard — v2 design system
   "The leaderboard, not the spreadsheet." Warm graphite base, one gold accent
   reserved exclusively for marking winners, everything else stays neutral. */

/* Part 57 §8.2 — global fix for the recurring [hidden] specificity bug. Any
   component that sets `display: flex/grid` beats the UA default
   `[hidden] { display: none }` on specificity, so `hidden` fails silently on
   whichever component gets the treatment next. Fourteen per-class overrides
   had accumulated (two with comments saying "same issue already fixed
   elsewhere") — plus the idle-jobstrip artefact behind the Ask AI launcher
   (§8.1) and a left-edge phantom (§8.4). One high-specificity rule closes
   all of them and stops the file from accumulating any more. */
[hidden] { display: none !important; }

@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('./fonts/big-shoulders-var.woff2') format('woff2-variations'),
       url('./fonts/big-shoulders-var.woff2') format('woff2');
}

.viz-root {
  color-scheme: light;
  --surface-1:      #fcfaf6;
  --surface-2:      #f3efe7;
  --page-plane:     #f1eee7;
  --text-primary:   #201c16;
  --text-secondary: #5c5648;
  --text-muted:     #8c8575;
  --border:         rgba(20,16,8,0.10);
  --gridline:       rgba(20,16,8,0.08);
  --baseline:       rgba(20,16,8,0.20);

  --accent:         #9c6b00;
  --accent-strong:  #7a5300;
  --accent-ink:     #ffffff;
  --accent-wash:    rgba(156,107,0,0.10);

  /* Part 17 Item 2 — discrete heatmap intensity scale (4 real color stops,
     not one hue at 4 opacity levels): opacity-only steps blend into the
     surface differently in light vs dark mode, so equal alpha jumps don't
     give equal PERCEIVED jumps — hand-picked stops guarantee the same
     "clearly one step darker" read in both themes. --heat-0 (empty) reuses
     --gridline, already themed. */
  --heat-1: #f0e0bb;
  --heat-2: #dcb974;
  --heat-3: #c2933a;
  --heat-4: #9c6b00;

  --neutral-strong: #4a4438;
  --neutral-mid:    #847c6c;
  --neutral-soft:   #c4bcaa;

  /* Categorical identity palette — one color per creative/series, so
     different data actually looks different (validated CVD-safe adjacency
     against this surface, see dataviz skill validator). Gold accent above
     is layered ON TOP of these (a border/badge on the #1 row) to mark rank,
     not used as a substitute for identity color. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  /* Extended for Item I (Part 3 spec) — re-validated as a 10-slot set via the
     dataviz skill's validator against this exact surface (all checks pass,
     same pre-existing contrast WARN as the original 8, already mitigated by
     direct name labels next to every swatch). Beyond 10 simultaneous
     creatives, dashboard.js falls back to a neutral swatch rather than
     cycling back and re-using a color for a different creative. */
  --series-9: #0a95ab;
  --series-10: #a83fd1;

  --critical:       #b23b27;
  --critical-wash:  rgba(178,59,39,0.10);

  --font-display: 'Big Shoulders', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Part 44: tokens ---------- */
  --elev-1: 0 1px 2px rgba(20,16,8,0.04), 0 1px 3px rgba(20,16,8,0.06);
  --elev-2: 0 2px 4px rgba(20,16,8,0.05), 0 4px 12px rgba(20,16,8,0.08);
  --elev-3: 0 4px 8px rgba(20,16,8,0.06), 0 12px 28px rgba(20,16,8,0.12);
  --elev-4: 0 8px 16px rgba(20,16,8,0.08), 0 24px 48px rgba(20,16,8,0.16);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz-root {
    color-scheme: dark;
    --surface-1:      #201e1b;
    --surface-2:      #29261f;
    --page-plane:     #141210;
    --text-primary:   #f7f4ee;
    --text-secondary: #beb6a8;
    --text-muted:     #8b8377;
    --border:         rgba(255,255,255,0.09);
    --gridline:       rgba(255,255,255,0.07);
    --baseline:       rgba(255,255,255,0.18);

    --accent:         #ffc53d;
    --accent-strong:  #ffd873;
    --accent-ink:     #201400;
    --accent-wash:    rgba(255,197,61,0.12);

    --heat-1: #4a3d1f;
    --heat-2: #7a611f;
    --heat-3: #b8901f;
    --heat-4: #ffc53d;

    --neutral-strong: #c9c0af;
    --neutral-mid:    #948c7c;
    --neutral-soft:   #4a4438;

    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --series-9: #0090a8;
    --series-10: #c060e0;

    --critical:       #e8604f;
    --critical-wash:  rgba(232,96,79,0.12);

    /* ---------- Part 44: dark elevation ---------- */
    --elev-1: 0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.24);
    --elev-2: 0 2px 4px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.32);
    --elev-3: 0 4px 8px rgba(0,0,0,0.28), 0 12px 28px rgba(0,0,0,0.40);
    --elev-4: 0 8px 16px rgba(0,0,0,0.32), 0 24px 48px rgba(0,0,0,0.52);
  }
}
:root[data-theme="dark"] .viz-root {
  color-scheme: dark;
  --surface-1:      #201e1b;
  --surface-2:      #29261f;
  --page-plane:     #141210;
  --text-primary:   #f7f4ee;
  --text-secondary: #beb6a8;
  --text-muted:     #8b8377;
  --border:         rgba(255,255,255,0.09);
  --gridline:       rgba(255,255,255,0.07);
  --baseline:       rgba(255,255,255,0.18);

  --accent:         #ffc53d;
  --accent-strong:  #ffd873;
  --accent-ink:     #201400;
  --accent-wash:    rgba(255,197,61,0.12);

  --heat-1: #4a3d1f;
  --heat-2: #7a611f;
  --heat-3: #b8901f;
  --heat-4: #ffc53d;

  --neutral-strong: #c9c0af;
  --neutral-mid:    #948c7c;
  --neutral-soft:   #4a4438;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-9: #0090a8;
  --series-10: #c060e0;

  --critical:       #e8604f;
  --critical-wash:  rgba(232,96,79,0.12);

  /* ---------- Part 44: dark elevation ---------- */
  --elev-1: 0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.24);
  --elev-2: 0 2px 4px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.32);
  --elev-3: 0 4px 8px rgba(0,0,0,0.28), 0 12px 28px rgba(0,0,0,0.40);
  --elev-4: 0 8px 16px rgba(0,0,0,0.32), 0 24px 48px rgba(0,0,0,0.52);
}

* { box-sizing: border-box; }

body.viz-root {
  margin: 0;
  min-height: 100vh;
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: var(--font-body);
}

a { color: var(--text-primary); }
.muted { color: var(--text-secondary); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}

/* ---------- Login ---------- */
.login-body { display: flex; align-items: center; justify-content: center; }
.login-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.01em;
  margin: 0;
}
.login-card input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}
.login-card button {
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.login-card button:hover { background: var(--accent-strong); }
.login-card .error { color: var(--critical); font-size: 13px; margin: 0; }

/* ---------- Client picker ---------- */
.page-header {
  display: flex;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}
.page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 960px;
}
.page-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  margin: 0;
}
.logout-link { font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.logout-link:hover { text-decoration: underline; }

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 28px;
  max-width: 960px;
}
.client-card {
  display: block;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.client-card:hover { border-color: var(--accent); }
.client-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 6px;
}
.client-card--stub { opacity: 0.7; }

/* ---------- Dashboard shell ---------- */
.dash-header {
  display: flex;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}
.dash-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.dash-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  margin: 0;
}
.dash-header .back-link { font-size: 13px; text-decoration: none; color: var(--text-secondary); }
.dash-meta { font-size: 12px; color: var(--text-muted); }

.range-select {
  display: flex;
  gap: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}
.range-select button {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.range-select button.active {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.range-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- Date range picker (Part 8 Item B) ---------- */
.date-range-picker { position: relative; }
.drp-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.drp-trigger:hover { border-color: var(--accent); }
.date-range-picker.drp-open .drp-trigger { border-color: var(--accent); color: var(--accent); }
.drp-trigger-icon { color: var(--text-muted); flex-shrink: 0; }

/**
 * Part 12 Item 2 — `position: fixed` (not `absolute`) so left/top set by
 * date-range-picker.js's positionPopover() are plain viewport pixels from
 * getBoundingClientRect(), matching this element's own coordinate space
 * exactly — no ancestor-offset math, no anchor-toggle guessing. JS sets
 * left/top inline on open and on every re-render/resize; top/left here are
 * just an unclamped fallback for the instant before JS runs.
 */
.drp-popover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 300px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20,16,8,0.18);
  padding: 14px;
}
:root[data-theme="dark"] .drp-popover { box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
@media (prefers-color-scheme: dark) {
  .drp-popover { box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
}
.drp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drp-month-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.drp-nav-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.drp-nav-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--accent); }
.drp-nav-btn:disabled { opacity: 0.35; cursor: default; }

.drp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}
.drp-weekdays span {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0;
}

.drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.drp-day {
  position: relative;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  aspect-ratio: 1;
  border-radius: 6px;
  cursor: pointer;
}
.drp-day--empty { cursor: default; }
.drp-day:hover:not(:disabled) { background: var(--surface-2); }
.drp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.drp-day--disabled { color: var(--text-muted); opacity: 0.35; cursor: default; }
.drp-day--today { font-weight: 700; }
.drp-day--in-range { background: var(--accent-wash); border-radius: 0; }
.drp-day--selected { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.drp-day--start.drp-day--in-range,
.drp-day--start { border-radius: 6px 0 0 6px; }
.drp-day--end { border-radius: 0 6px 6px 0; }
.drp-day--start.drp-day--end { border-radius: 6px; }

.drp-summary {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  min-height: 16px;
}
.drp-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.drp-btn {
  border: none;
  background: var(--surface-2);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.drp-btn:hover { color: var(--text-primary); }
.drp-btn--primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.drp-btn--primary:hover { background: var(--accent-strong); color: var(--accent-ink); }
.drp-btn--primary:disabled { opacity: 0.45; cursor: default; }

/**
 * Part 12 Item 2.3 — genuine full-screen modal on mobile, not a cramped
 * dropdown (the old version was a bottom sheet with no max-height/scroll
 * guard, so a 6-row month could still overflow off the top of a short
 * viewport). date-range-picker.js's positionPopover() explicitly no-ops
 * under this same breakpoint, leaving positioning entirely to this rule —
 * every left/top set inline by JS is irrelevant here (inset:0 wins).
 */
@media (max-width: 560px) {
  .drp-popover {
    position: fixed;
    inset: 0;
    left: 0 !important;
    top: 0 !important;
    width: auto;
    max-width: none;
    border-radius: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
  }
  .drp-popover .drp-grid { flex-shrink: 0; }
}
/* [hidden] handled by the global rule at the top of the file (Part 57 §8.2). */

.drp-popover { animation: drp-fade-in 0.12s ease-out; }
@keyframes drp-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.show-more-btn {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}
.show-more-btn:hover { color: var(--text-primary); border-color: var(--neutral-mid); }

main.dash-body {
  padding: 24px 28px 64px;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

section.dash-section h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 600;
  margin: 0 0 12px;
}

.section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-head-row h2 { margin: 0 0 12px; }

/* ---------- Winner hero — the signature element ---------- */
.winner-hero {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s ease;
}
.winner-hero .eyebrow { color: var(--accent); display: flex; align-items: center; gap: 6px; }
.winner-hero .winner-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.05;
  margin: 0;
  letter-spacing: 0.01em;
}
.winner-hero .winner-why {
  font-size: 15px;
  color: var(--text-secondary);
}
.winner-hero .winner-why strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.winner-hero .winner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}
.winner-hero .winner-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.winner-hero .winner-stats .stat .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.winner-hero .winner-stats .stat .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.winner-video-why {
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.winner-video-why .hookhold { margin-top: 6px; }
.winner-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 10px;
}
.winner-note--caveat { color: var(--accent); }

/* ---------- Part 36: AI Brain "why this wins" in the Winner Hero ---------- */
.ai-why {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.ai-why-eyebrow { font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; }
.ai-why-pattern { font-family: var(--font-display); font-weight: 600; font-size: 13px; margin-top: 2px; }
.ai-why-evidence { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.ai-why-ideas { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-why-ideas-label { font-size: 11px; color: var(--text-muted); }
.ai-why-idea-chip { font-size: 11px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.ai-why-open-link { font-size: 11px; color: var(--accent); text-decoration: none; margin-left: auto; }
.ai-why-open-link:hover { text-decoration: underline; }
/* flex-shrink: 0 — added beyond spec: sits inside .top5-name-wrap (a flex
   container alongside .name, which DOES shrink/truncate) so a long pattern
   name never gets squeezed instead of the ad name it's labeling. */
.ai-why-tag { flex-shrink: 0; font-size: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; color: var(--text-secondary); cursor: default; }

.top5-list {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.top5-row {
  display: grid;
  grid-template-columns: 22px 12px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
}
.top5-row .rank { font-family: var(--font-display); font-weight: 700; color: var(--text-muted); text-align: center; }
.top5-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.top5-row .stat { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 12px; text-align: right; }
.top5-row .stat strong { color: var(--text-primary); font-weight: 600; }
/* Part 36 — .ai-why-tag is conditionally rendered per row (only rows with
   pattern evidence get one), so it can't be a direct .top5-row grid child:
   that would leave rows without it one grid item short, misaligning every
   .stat column against rows that DO have it. Wrapping .name + the optional
   tag in a flex container that occupies the single grid-template-columns
   "name" slot (1fr) keeps the grid at a constant 5 items on every row. */
.top5-name-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.top5-name-wrap .name { flex-shrink: 1; }

.format-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: fit-content;
}
.format-badge--video { color: var(--text-primary); border-color: var(--neutral-mid); }
/* PATCH GIF-FORMAT-01 — GIF badge uses a dashed border so it reads distinctly
   from video at a glance while sharing the same neutral tint. */
.format-badge--gif { color: var(--text-primary); border-color: var(--neutral-mid); border-style: dashed; }

/* ---------- Part 7: recency tag, status badge, landing-page month select, WoW deltas ---------- */
.recency-tag { font-size: 11px; color: var(--text-muted); }
.recency-tag--new { color: var(--accent); font-weight: 600; }

.status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 100px;
  width: fit-content;
}
.status-badge--active { color: var(--series-3); background: rgba(27,175,122,0.12); }
.status-badge--paused { color: var(--text-muted); background: var(--surface-2); }

.ad-count-note { font-size: 12px; color: var(--text-muted); }

.avg-watch-time { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }

.lp-month-select { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
/* [hidden] handled by the global rule at the top of the file (Part 57 §8.2). */
.lp-month-select select {
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 13px;
}

.wow-delta { font-size: 11px; margin-left: 6px; white-space: nowrap; }
.wow-delta--good { color: var(--series-3); }
.wow-delta--bad { color: var(--critical); }
.wow-delta--flat { color: var(--text-muted); }
.wow-tag {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 100px;
}
.wow-tag--best { color: var(--series-3); background: rgba(27,175,122,0.12); }
.wow-tag--worst { color: var(--critical); background: var(--critical-wash); }

/* ---------- Overview strip ---------- */
.overview-strip {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.overview-strip .unit {
  flex: 1 1 140px;
  padding: 16px 20px;
  border-right: 1px solid var(--border);
}
.overview-strip .unit:last-child { border-right: none; }
.overview-strip .unit .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.overview-strip .unit .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

/* Legacy 3-card stat row, still used in funnel section */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.stat-tile .label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.stat-tile .value { font-family: var(--font-display); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; }

/* Chart card */
.chart-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.chart-card h3 { font-size: 13px; margin: 0 0 12px; color: var(--text-secondary); font-weight: 500; padding-right: 28px; }
.chart-card canvas { max-width: 100%; }

/* PATCH CHART-MOTION-01 — first-paint entrance. Applied once via a class the
   JS adds on initial render only; subsequent range changes tween the chart
   data instead (see chart-engine updateLineChart) and must NOT re-run this. */
@keyframes chart-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.chart-card--enter {
  animation: chart-card-in 0.42s var(--ease-spring) both;
}
.chart-grid .chart-card--enter:nth-child(1) { animation-delay: 0ms; }
.chart-grid .chart-card--enter:nth-child(2) { animation-delay: 60ms; }
.chart-grid .chart-card--enter:nth-child(3) { animation-delay: 120ms; }
.chart-grid .chart-card--enter:nth-child(4) { animation-delay: 180ms; }
.chart-grid .chart-card--enter:nth-child(5) { animation-delay: 240ms; }
.chart-grid .chart-card--enter:nth-child(6) { animation-delay: 300ms; }

.chart-grid {
  display: grid;
  /* min(420px, 100%) — not a bare 420px — so the minimum never exceeds the
     viewport itself. A bare 420px here forced every chart-card wider than a
     390px mobile viewport, causing page-level horizontal scroll (confirmed:
     document scrollWidth 448 vs a 390px viewport before this fix). */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 16px;
}

/* Combined reach & engagement module — two mini panels, one visual unit */
.combo-chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.combo-chart-card h3 { font-size: 13px; margin: 0 0 12px; color: var(--text-secondary); font-weight: 500; }
.combo-chart-card .combo-panels { display: flex; flex-direction: column; }
.combo-chart-card .combo-panels canvas { max-width: 100%; }
.combo-chart-card .combo-panel-top { margin-bottom: -4px; }

/* ---------- Creative leaderboard ---------- */
.leaderboard-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  width: fit-content;
  margin-bottom: 14px;
}
.leaderboard-tabs button {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.leaderboard-tabs button.active {
  background: var(--surface-1);
  color: var(--text-primary);
  font-weight: 600;
}

.leaderboard { display: flex; flex-direction: column; gap: 8px; }
/* [hidden] handled by the global rule at the top of the file. */
/**
 * Part 12 Item 1 — mobile-first flexbox card, not a fixed-column grid.
 * The old grid declared exactly 4 columns (`40px 40px 1fr auto`) but the
 * row markup renders 5 children on ad tabs (checkbox, rank, thumbnail,
 * main, numbers) and only 4 on By-Landing-Page (no checkbox — landing pages
 * aren't individually selectable for compare mode) — a real mismatch that
 * left the checkbox falling into unpredictable implicit grid placement.
 * Flexbox sidesteps this entirely: items just flow in whatever order is
 * actually present, present-or-absent, no column count to keep in sync with
 * the markup. `flex-wrap` also means the numbers block naturally drops to
 * its own full-width line on narrow viewports without a separate
 * grid-template-columns re-declaration at the breakpoint (the old mobile
 * override rewrote the template outright — a sign the base layout wasn't
 * actually mobile-first).
 */
.leaderboard-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.leaderboard-row--winner {
  border-color: var(--accent);
  background: linear-gradient(to right, var(--accent-wash), var(--surface-1) 40%);
}
.leaderboard-row .compare-checkbox { flex: 0 0 auto; margin-top: 11px; }
.leaderboard-rank {
  flex: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--neutral-mid);
  text-align: center;
  margin-top: 6px;
}
.leaderboard-row--winner .leaderboard-rank { color: var(--accent); }
.rank-change {
  display: block;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-body);
  margin-top: 2px;
}
.rank-change--up { color: var(--series-3); }
.rank-change--down { color: var(--critical); }
.rank-change--steady { color: var(--text-muted); }
.rank-change--new { color: var(--accent); font-size: 9px; letter-spacing: 0.02em; }

.leaderboard-main { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.leaderboard-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.creative-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.leaderboard-name {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.efficiency-bar-track {
  height: 6px;
  border-radius: 100px;
  background: var(--gridline);
  overflow: hidden;
  max-width: 320px;
}
.efficiency-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--neutral-mid);
}
.leaderboard-row--winner .efficiency-bar-fill { background: var(--accent); }

/* Hook/Hold — printed %, account-average baseline tick, optional verdict (Part 4) */
.hookhold {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  max-width: 260px;
}
.hookhold .hh-row { display: flex; align-items: center; gap: 8px; }
.hookhold .hh-label { width: 30px; flex-shrink: 0; }
.hookhold .hh-bar-track {
  position: relative;
  flex: 1;
  min-width: 48px;
  height: 7px;
  border-radius: 100px;
  background: var(--gridline);
}
.hookhold .hh-bar-fill {
  display: inline-block;
  height: 100%;
  min-width: 3px;
  background: var(--neutral-strong);
  border-radius: 100px;
}
.hookhold .hh-baseline-tick {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--text-primary);
  opacity: 0.45;
  transform: translateX(-50%);
}
.hookhold .hh-value {
  width: 36px;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-weight: 600;
}
.hh-verdict {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.winner-video-why .hh-verdict { font-size: 14px; color: var(--text-primary); font-weight: 500; }

/* Expand toggle for leaderboard rows — click/tap reveals the verdict + retention detail */
.leaderboard-expand-toggle {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.leaderboard-expand-toggle:hover { color: var(--text-primary); }
.leaderboard-expand-detail {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gridline);
}

/* Part 17 Items 4 & 5 — compact row (Currently Active section, and a
 * landing-page row's expanded ad breakdown): same visual language as
 * .leaderboard-row, minus the rank/checkbox/sparkline chrome, so it reads
 * as "the same leaderboard" rather than a different component. */
.leaderboard-row--compact { padding: 10px 14px; }
.leaderboard--compact { gap: 6px; }
.lp-expand-toggle {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lp-expand-toggle:hover { color: var(--text-primary); }
.lp-expand-detail {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gridline);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* "Why did this page win?" — visual language matches .ai-why (Part 36):
   same surface-2 card, same accent eyebrow-less trigger, so it reads as
   one consistent "AI explanation" pattern across the dashboard rather than
   a new one-off look. */
.lp-why { margin-top: 10px; }
.lp-why-trigger {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.lp-why-trigger:hover:not(:disabled) { color: var(--text-primary); border-color: var(--accent); }
.lp-why-trigger:disabled { opacity: 0.6; cursor: default; }
.lp-why-result {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
/* [hidden] handled by the global rule at the top of the file. */
.lp-why-text { font-size: 12px; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; }
.lp-why-loading { font-size: 12px; color: var(--text-muted); }
.lp-why-error { font-size: 12px; color: var(--critical-ink, var(--critical)); }
.lp-why-caveat { font-size: 11px; color: var(--accent); margin-top: 6px; }

/* Retention curve mini-chart — 4 bars (25/50/75/100%), CSS only, no extra canvas */
.retention-curve { display: flex; align-items: flex-end; gap: 8px; height: 48px; margin-top: 4px; }
.retention-curve .rc-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 36px; }
.retention-curve .rc-bar-track { width: 14px; height: 36px; border-radius: 4px; background: var(--gridline); display: flex; align-items: flex-end; overflow: hidden; }
.retention-curve .rc-bar-fill { width: 100%; background: var(--neutral-strong); border-radius: 4px 4px 0 0; }
.retention-curve .rc-label { font-size: 10px; color: var(--text-muted); }

/* Creative thumbnails (Part 4) */
.creative-thumb {
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2);
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--border);
}
.creative-thumb--hero { width: 80px; height: 80px; }
.creative-thumb--row { width: 76px; height: 76px; } /* Part 12 Item 1 — up from 40px; Part 28 — up again from 64px per S's request */
.creative-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 18px;
}
.creative-thumb-placeholder.creative-thumb--hero { font-size: 26px; }
.creative-thumb[data-ad-id], .creative-thumb-placeholder[data-ad-id] { cursor: pointer; }
.creative-thumb[data-ad-id]:focus-visible, .creative-thumb-placeholder[data-ad-id]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.winner-hero-top { display: flex; align-items: flex-start; gap: 16px; }
.winner-hero-top .winner-hero-body { flex: 1; min-width: 0; }


.leaderboard-numbers {
  flex: 1 1 240px;
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  gap: 4px 18px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.leaderboard-numbers .num-item .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  display: block;
}
.leaderboard-numbers .num-item .value { font-weight: 600; }

@media (max-width: 720px) {
  /* Part 12 Item 1 — same flexbox structure as desktop, just tighter gaps
     and a full-width numbers block, not a different column template. */
  .leaderboard-row { gap: 8px 10px; }
  .leaderboard-numbers { flex-basis: 100%; grid-template-columns: repeat(2, 1fr); text-align: left; margin-top: 4px; }
  .leaderboard-rank { flex-basis: 20px; font-size: 16px; }
  .leaderboard-row .compare-checkbox { margin-top: 8px; }

  /* Part 4 — thumbnails/hero shrink to fit narrow viewports instead of forcing
     horizontal scroll or overflow. Part 12 — row thumbnail bumped from
     32px to 48px (still meaningfully smaller than desktop's 64px). */
  .creative-thumb--hero, .creative-thumb-placeholder.creative-thumb--hero { width: 64px; height: 64px; font-size: 22px; }
  .creative-thumb--row, .creative-thumb-placeholder:not(.creative-thumb--hero) { width: 56px; height: 56px; font-size: 19px; }
  .winner-hero-top { gap: 12px; }
  .hookhold { max-width: none; }
}

/* Tables (WoW table keeps this) */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 500px; }
table.data-table th, table.data-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
table.data-table th {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
table.data-table td.num, table.data-table th.num { font-variant-numeric: tabular-nums; text-align: right; }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: var(--page-plane); }

/* Changelog */
.changelog-list { display: flex; flex-direction: column; gap: 10px; }
.changelog-entry { display: flex; gap: 12px; font-size: 13px; padding: 10px 0; border-bottom: 1px solid var(--gridline); }
.changelog-entry:last-child { border-bottom: none; }
.changelog-entry .date { color: var(--text-muted); min-width: 90px; font-variant-numeric: tabular-nums; }
.changelog-entry .channel {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-secondary);
  min-width: 70px;
  font-weight: 600;
}

/* ---------- Calm state callouts (info / disabled / error) ---------- */
.callout {
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.5;
}
.callout--info {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
}
.callout--error {
  border: 1px solid var(--critical);
  background: var(--critical-wash);
  color: var(--text-primary);
}
.callout--warning {
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  color: var(--text-primary);
}
.callout code {
  background: var(--page-plane);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
}
/* Legacy alias so any un-migrated markup still reads sanely */
.banner { border-radius: 12px; padding: 14px 18px; font-size: 13px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); }

/* Admin form */
.admin-form {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}
.admin-form label { font-size: 12px; color: var(--text-secondary); }
.admin-form input, .admin-form select, .admin-form textarea {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}
.admin-form button {
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.admin-form button:hover { background: var(--accent-strong); }
.admin-form .success { color: var(--text-primary); font-size: 13px; }

/* ---------- Part 21: AI Brain pilot ---------- */
.status-badge--queued { color: var(--text-muted); background: var(--surface-2); }
.status-badge--processing { color: var(--accent); background: var(--accent-wash); }
.status-badge--done { color: var(--series-3); background: rgba(27,175,122,0.12); }
.status-badge--error { color: var(--critical); background: var(--critical-wash); }

/* ---- Part 22: feature card (dashboard entry point) ---- */
.feature-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 24px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.feature-card-title { font-size: 18px; margin: 0 0 4px; }
.feature-card-desc { font-size: 14px; color: var(--text-secondary); margin: 0 0 8px; max-width: 60ch; }
.feature-card-status { font-size: 13px; color: var(--text-muted); margin: 0; }
.feature-card-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: 8px;
  background: var(--text-primary); color: var(--surface-1);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.feature-card-cta:hover { background: var(--accent-strong); color: var(--accent-ink); }
.feature-card-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Part 22 §17: Currently Active collapse — reuses .show-more-btn as-is ---- */
.active-creatives-more { margin-top: 10px; }

/* ---- Part 23: pattern scorecard (verdict pane) — color discipline
   unchanged from Part 22 §3: series-3/series-2/critical, gold stays
   reserved for winners. ---- */
.ai-brain-scorecard { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 24px; }
.ai-brain-scorecard-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-radius: 10px; background: var(--surface-2);
}
.ai-brain-scorecard-icon { flex: 0 0 auto; font-size: 15px; line-height: 1.5; }
.ai-brain-scorecard-icon[data-status="present"] { color: var(--series-3); }
.ai-brain-scorecard-icon[data-status="partial"] { color: var(--series-2); }
.ai-brain-scorecard-icon[data-status="absent"]  { color: var(--critical); }
.ai-brain-scorecard-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-brain-scorecard-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ai-brain-scorecard-evidence { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.ai-brain-scorecard-unavailable { font-size: 13px; color: var(--text-muted); margin: 8px 0 24px; }

/* ---- forecast strip ---- */
.ai-brain-forecast { margin: 0 0 24px; padding: 16px 20px; border-radius: 10px; background: var(--surface-2); }
.ai-brain-forecast-score { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
.ai-brain-forecast-ranges { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.ai-brain-forecast-confidence {
  display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 100px;
  padding: 2px 8px; margin-top: 2px;
}
.ai-brain-forecast-cold { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ---- beats timeline ---- */
.ai-brain-beats { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 24px; }
.ai-brain-beat { display: flex; gap: 12px; }
.ai-brain-beat-time {
  flex: 0 0 auto; width: 92px; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--text-muted); padding-top: 2px;
}
.ai-brain-beat-body { flex: 1; min-width: 0; }
.ai-brain-beat-label {
  display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin-bottom: 2px;
}
.ai-brain-beat-what { font-size: 14px; color: var(--text-primary); line-height: 1.5; margin: 0; }

/* ---- strengths / risks two-column ---- */
.ai-brain-sr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 8px 0 24px; }
.ai-brain-sr-col ul { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.ai-brain-sr-col li { margin-bottom: 6px; }

/* ---- fix-these-N-things, priority + why ---- */
.ai-brain-fix-why { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

@media (max-width: 900px) {
  .ai-brain-sr-grid { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Part 23: Pattern Library page (admin/ai-brain-patterns.php) ---- */
.ai-brain-patterns-body { max-width: 900px; }
.ai-brain-pattern-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 14px;
}
/* Part 24 §3 — rule is now the headline (the instruction someone can act on
   immediately), name is a small reference label beneath it, proof sits
   behind a collapsed evidence toggle. */
.ai-brain-pattern-card-rule {
  font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--text-primary);
  margin: 0 0 6px;
}
.ai-brain-pattern-card-name {
  font-size: 12px; font-weight: 500; color: var(--text-muted); margin: 0 0 12px;
}
.ai-brain-pattern-card-evidence-toggle {
  border: none; background: none; padding: 0; font-family: inherit; font-size: 12px;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.ai-brain-pattern-card-evidence-toggle:hover { color: var(--accent-strong); }
.ai-brain-pattern-card-evidence { margin-top: 10px; }
.ai-brain-pattern-card-evidence p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; }

/* ---- Part 25 §3b: pattern-card evidence thumbnails — small row of tiles
   that turn an abstract rule into something visibly grounded. ---- */
.ai-brain-pattern-card-evidence-thumbs { display: flex; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.creative-thumb--evidence,
.creative-thumb-placeholder.creative-thumb--evidence { width: 44px; height: 44px; font-size: 14px; cursor: default; }
.creative-thumb--source,
.creative-thumb-placeholder.creative-thumb--source { width: 48px; height: 48px; font-size: 16px; cursor: default; }

/* ---- Part 25 §1b: adoption strip — 10 dots, honest about what's actually
   measured (present / scored-but-absent / not-yet-scored are 3 distinct
   states, never conflated). Colour band on the wrapper, read by dot fill via
   currentColor so there's one source of truth per band. ---- */
.ai-brain-pattern-adoption { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.ai-brain-pattern-adoption--unmeasured { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; }
.ai-brain-adoption-dots { display: flex; gap: 3px; }
.ai-brain-adoption-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gridline); display: inline-block; }
.ai-brain-pattern-adoption[data-band="low"] .ai-brain-adoption-dot.is-present { background: var(--critical); }
.ai-brain-pattern-adoption[data-band="mid"] .ai-brain-adoption-dot.is-present { background: var(--series-2); }
.ai-brain-pattern-adoption[data-band="high"] .ai-brain-adoption-dot.is-present { background: var(--series-3); }
.ai-brain-adoption-dot.is-absent { background: var(--border); }
.ai-brain-adoption-dot.is-unscored { background: var(--gridline); opacity: 0.4; }
.ai-brain-adoption-label { font-size: 12px; color: var(--text-secondary); }

/* ---- Part 25 §2: per-pattern performance rollup — real numbers, no AI ---- */
.ai-brain-pattern-card-rollup { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }

/* ---- §5: "Built from these creatives" — heading + one-line explainer are
   always visible (no expanding needed); only the actual row list sits
   behind a collapsed disclosure, so it's supporting material that doesn't
   compete visually with the pattern cards above it. ---- */
.ai-brain-source-header { margin: 20px 0 0; }
.ai-brain-source-header h2 { margin: 0 0 4px; }
.ai-brain-source-explainer { margin: 0 0 10px; }
.ai-brain-source-panel { margin: 0 0 24px; padding: 4px 0; }
.ai-brain-source-panel summary {
  cursor: pointer; font-size: 12px; color: var(--accent);
  text-decoration: underline; padding: 4px 0; list-style: revert;
}
.ai-brain-source-panel summary:hover { color: var(--accent-strong); }
.ai-brain-source-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
.ai-brain-source-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; padding: 8px 12px; background: var(--surface-2); border-radius: 8px;
}
.ai-brain-source-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ai-brain-source-row-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ai-brain-source-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-brain-source-stats { color: var(--text-muted); flex: 0 0 auto; }
.ai-brain-source-evidence { color: var(--text-secondary); margin: 0; line-height: 1.5; }

/* ---- §6: pattern-library / concepts version history ---- */
.ai-brain-history-panel { margin: 0 0 24px; }
.ai-brain-history-panel > summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-primary);
  padding: 8px 0; list-style: revert;
}
.ai-brain-history-version {
  margin: 10px 0 0 4px; padding: 12px 16px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 10px;
}
.ai-brain-history-version summary {
  cursor: pointer; font-size: 13px; color: var(--text-primary); list-style: revert;
}
.ai-brain-history-active-badge {
  display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--series-3); border: 1px solid var(--series-3); border-radius: 100px;
  padding: 1px 8px; margin-left: 8px;
}
.ai-brain-history-cards { margin-top: 12px; }
.ai-brain-history-cards .ai-brain-pattern-card,
.ai-brain-history-cards .ai-brain-idea-card { background: var(--surface-2); }
.ai-brain-history-actions { display: flex; gap: 10px; margin-top: 10px; }
.ai-brain-history-restore, .ai-brain-history-delete {
  font-family: inherit; font-size: 12px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
  cursor: pointer;
}
.ai-brain-history-restore:hover:not(:disabled) { color: var(--text-primary); border-color: var(--neutral-mid); }
.ai-brain-history-restore:disabled { opacity: 0.5; cursor: default; }
.ai-brain-history-delete:hover { color: var(--critical); border-color: var(--critical); }
.ai-brain-rebuild-panel {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 24px; margin-bottom: 24px;
}
/* Part 25 §4 item 5 — rebuild panel is now a <details>, collapsed by
   default (it's monthly maintenance, not a per-visit action); its <summary>
   carries the same visual weight the old plain <h2> had. */
details.ai-brain-rebuild-panel > summary {
  cursor: pointer; font-size: 18px; font-weight: 700; color: var(--text-primary);
  list-style: revert;
}
details.ai-brain-rebuild-panel[open] > summary { margin-bottom: 12px; }

/* ---- Part 25 §1c: adoption sort toolbar ---- */
.ai-brain-pattern-cards-toolbar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.ai-brain-pattern-cards-toolbar button {
  font-family: inherit; font-size: 12px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary);
  cursor: pointer;
}
.ai-brain-pattern-cards-toolbar button:hover { color: var(--text-primary); border-color: var(--neutral-mid); }

/* ---- Part 25 §4 item 1: action strip — reuses .stat-row/.stat-tile, adds a
   critical variant for "under-used" (the headline number) and clickable
   link tiles that jump to the relevant section. ---- */
.ai-brain-action-strip { margin: 0 0 24px; }
a.ai-brain-action-tile { text-decoration: none; display: block; transition: border-color .15s; }
a.ai-brain-action-tile:hover { border-color: var(--neutral-mid); }
.ai-brain-action-tile--critical { border-color: var(--critical); }
.ai-brain-action-tile--critical .value { color: var(--critical); }
.ai-brain-action-tile-value--compact { font-size: 14px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }

/* ---- Part 25 §0: dismissable legacy-Chinese notice ---- */
.callout.ai-brain-dismissable { position: relative; padding-right: 40px; }
.ai-brain-notice-dismiss {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px;
  border: none; background: none; color: var(--text-muted); font-size: 18px;
  line-height: 1; cursor: pointer; border-radius: 6px;
}
.ai-brain-notice-dismiss:hover { color: var(--text-primary); background: var(--surface-2); }
.ai-brain-target-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.ai-brain-target-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--surface-2); border-radius: 10px; flex-wrap: wrap;
}
.ai-brain-target-meta { flex: 1 1 220px; min-width: 0; }
.ai-brain-target-name {
  font-size: 13px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.ai-brain-target-stats { font-size: 12px; color: var(--text-muted); }

/* ---- Hotfix #2: per-row upload state (sequential per-file uploads) ---- */
.ai-brain-target-upload { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; flex-wrap: wrap; }
.ai-brain-target-file-input { max-width: 220px; font-size: 12px; }
.ai-brain-target-progress { flex: 1 1 120px; min-width: 90px; }
.ai-brain-target-row-status { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ai-brain-target-row[data-status="uploaded"] .ai-brain-target-row-status { color: var(--series-3); font-weight: 600; }
.ai-brain-target-row[data-status="error"] .ai-brain-target-row-status { color: var(--critical); }
.ai-brain-target-row[data-status="uploading"] { opacity: 0.85; }

.ai-brain-idea-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 14px;
}
.ai-brain-idea-title {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px;
}
.ai-brain-idea-hook {
  font-family: 'Big Shoulders', system-ui, sans-serif; font-size: 22px; font-weight: 700;
  color: var(--text-primary); margin: 0 0 10px; line-height: 1.25;
}
.ai-brain-idea-card h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin: 14px 0 4px;
}
.ai-brain-idea-card p, .ai-brain-idea-card li { font-size: 13px; line-height: 1.6; color: var(--text-primary); margin: 0; }
.ai-brain-idea-card ul, .ai-brain-idea-card ol { margin: 4px 0 0; padding-left: 18px; }
.ai-brain-patterns-nav-link { font-size: 13px; text-decoration: none; color: var(--text-secondary); }
.ai-brain-patterns-nav-link:hover { color: var(--text-primary); }

@media (max-width: 900px) {
  .ai-brain-target-row { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Part 26 — weekly brief layout (admin/ai-brain-patterns.php rebuild)
   ========================================================================== */

/* ========== Part 51: AI Brain v3 (abx-) ==========
   Single contiguous block. No hex values — tokens only. New `abx-` namespace
   so a surviving legacy rule cannot reach the new markup. See spec §10.
   ------------------------------------------------------------------------ */

.abx-body { background: var(--page-plane); }

/* Part 51 Patch 1 §1 — one shared column for the whole page. */
.abx-col { width: 100%; max-width: 720px; margin: 0 auto; padding-inline: 16px; box-sizing: border-box; }
.abx-header-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.abx-daterow-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Part 51 Patch 1 §2 — single sticky parent; both bands render static. */
.abx-topbar { position: sticky; top: 0; z-index: 20; background: var(--page-plane); }

.abx-header { position: static; background: transparent; border-bottom: 1px solid var(--border); }
.abx-h1 { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.1; margin: 0; }
.abx-sub { font-size: 13px; color: var(--text-secondary); margin: 4px 0 0; }
.abx-batch-line { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; border-top: 3px solid var(--neutral-strong); padding-top: 6px; }

.abx-daterow { position: static; padding-block: 10px; background: transparent; border-bottom: 1px solid var(--border); }
.abx-presets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.abx-preset { min-height: 44px; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; }
.abx-preset.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.abx-preset:disabled { opacity: 0.5; cursor: default; }
.abx-range-btn { margin-left: auto; min-height: 44px; padding: 8px 14px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.abx-range-clamped { flex-basis: 100%; font-size: 12px; color: var(--critical); margin: 4px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .abx-preset { transition: background-color 120ms ease-out, color 120ms ease-out; }
}

.abx-main { padding-block: 20px 80px; }
@media (prefers-reduced-motion: no-preference) {
  #abx-list-wrap { transition: opacity 120ms ease-out; }
}

.abx-stale { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 7px; margin: 0 0 16px; font-size: 13px; }
.abx-stale--quiet { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--neutral-mid); }
.abx-stale--critical { background: var(--critical-wash); border: 1px solid var(--critical); }
.abx-stale a { color: var(--text-primary); font-weight: 600; text-decoration: none; margin-left: auto; }

.abx-list { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface-1); box-shadow: var(--elev-1); }
.abx-row + .abx-row { border-top: 1px solid var(--border); }
.abx-row-head { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas:
  "n title chev"
  "n from  chev"; align-items: center; column-gap: 12px; row-gap: 2px;
  width: 100%; padding: 14px 16px; min-height: 68px; text-align: left;
  background: transparent; border: none; cursor: pointer; color: var(--text-primary); }
.abx-row-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.abx-row-n { grid-area: n; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-muted); line-height: 1; padding-right: 6px; }
.abx-row.is-open .abx-row-n { color: var(--accent); }
.abx-row-title { grid-area: title; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; }
.abx-row-from { grid-area: from; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); overflow: hidden; }
.abx-row-from-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abx-from-thumb { width: 22px; height: 22px; border-radius: 4px; flex: 0 0 auto; object-fit: cover; }
.abx-from-thumb.creative-thumb-placeholder { background: var(--surface-2); display: inline-block; }
.abx-row-chev { grid-area: chev; font-size: 20px; color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .abx-row-chev { transition: transform 180ms ease-out; display: inline-block; }
}
.abx-row.is-open .abx-row-chev { transform: rotate(90deg); }

.abx-row-body { display: grid; grid-template-rows: 0fr; }
@media (prefers-reduced-motion: no-preference) {
  .abx-row-body { transition: grid-template-rows 200ms ease-out; }
}
.abx-row.is-open .abx-row-body { grid-template-rows: 1fr; }
.abx-row-body-inner { overflow: hidden; }
.abx-row.is-open .abx-row-body-inner { padding: 8px 16px 20px; }

.abx-block { margin: 12px 0; }
.abx-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.abx-block-h { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }

.abx-say-line { background: var(--accent-wash); border-left: 3px solid var(--accent); padding: 12px 14px; margin: 0;
  font-size: 16px; line-height: 1.55; border-radius: 0 7px 7px 0; color: var(--text-primary); }

.abx-beats { list-style: none; padding: 0; margin: 0; display: grid; row-gap: 6px; }
.abx-beat { display: grid; grid-template-columns: 58px 1fr; column-gap: 10px; font-size: 13.5px; line-height: 1.55; }
.abx-beat-time { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.abx-beat-text { color: var(--text-primary); }

.abx-watch { background: var(--surface-2); border-radius: 7px; padding: 12px 14px; }
.abx-watch-body { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: start; }
.abx-watch-thumb { width: 104px; height: 104px; border-radius: 6px; object-fit: cover; }
.abx-watch-thumb.creative-thumb-placeholder { background: var(--surface-1); display: block; }
.abx-watch-name { font-size: 13px; color: var(--text-muted); margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; }
.abx-watch-stat { font-size: 15px; font-weight: 600; color: var(--accent-strong); margin: 0 0 6px; }
.abx-watch-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-primary); margin: 0 0 8px; }
.abx-openad { font-size: 13px; color: var(--text-primary); text-decoration: none; font-weight: 600; }
.abx-openad:hover { color: var(--accent-strong); }
@media (max-width: 560px) {
  .abx-watch-body { grid-template-columns: 1fr; }
  .abx-watch-thumb { width: 100%; height: 150px; }
}

.abx-aim { background: var(--surface-2); border-radius: 7px; padding: 10px 14px; font-size: 13px; color: var(--text-secondary); margin: 12px 0; }

.abx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.abx-btn { min-height: 44px; padding: 9px 14px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-primary); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.abx-btn:hover { border-color: var(--accent); }
.abx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.abx-btn--primary { background: var(--text-primary); color: var(--surface-1); border-color: var(--text-primary); }
.abx-btn:disabled { opacity: 0.5; cursor: default; }
.abx-btn.is-copied { color: var(--accent-strong); }

.abx-variations { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.abx-variation { background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.abx-variation-title { font-size: 14px; font-weight: 600; margin: 0; }
.abx-variation-source { font-size: 12px; color: var(--text-secondary); margin: 0; }
.abx-variation-basis { font-size: 13px; color: var(--text-secondary); margin: 0; font-style: italic; }
.abx-variation-hook { font-size: 13.5px; margin: 0; color: var(--text-primary); }
/* Part 58 chunk-1b — storyboard-inside-variation. Reuses .abx-idea-beat but
   packs tighter so three variation cards fit comfortably in the pane. */
.abx-variation-storyboard { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; padding: 6px 0; border-top: 1px dashed var(--border); }
.abx-variation-storyboard .abx-idea-beat { display: grid; grid-template-columns: 56px 1fr; gap: 8px; font-size: 12.5px; }
.abx-variation-storyboard .abx-idea-beat-time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.abx-variation-storyboard .abx-idea-beat-text { color: var(--text-primary); }
.abx-variation-test { font-size: 12.5px; margin-top: 4px; }
.abx-variation-test summary { cursor: pointer; color: var(--text-secondary); user-select: none; }
.abx-variation-test summary:hover { color: var(--text-primary); }
.abx-variation-test p { margin: 6px 0 0; color: var(--text-secondary); line-height: 1.5; }
.abx-variation-promote { align-self: flex-start; margin-top: 4px; }

/* Part 58 chunk-1b (D5) — probe result mount + <pre>. Long status_url /
   sent_body / detail strings would overflow horizontally without these
   guards; CSS-variable surface/border keeps this theme-aware without
   duplicating rules per theme block. */
.abx-probe-mount { background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; margin-top: 10px; font-size: 12.5px; }
.abx-probe-mount .abx-probe-json,
.abx-probe-json { white-space: pre-wrap; word-break: break-all; overflow: auto; max-height: 40vh; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-primary); background: transparent; }

/* Part 58 chunk-1b (D7) — .abx-mlt inside .abx-idea-body was stretching to
   full card width because the body is `display: flex; flex-direction: column`.
   Its sibling .abx-idea-script-link already has this exact rule. Scope to
   .abx-idea-body so the legacy .abx-row placement is unaffected. */
.abx-idea-body .abx-mlt { align-self: flex-start; }

.abx-jobstrip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-2); font-size: 13px; margin-top: 10px; }
.abx-jobstrip--global { position: fixed; bottom: 88px; right: 24px; z-index: 1250; box-shadow: var(--elev-3); }
@media (max-width: 640px) {
  .abx-jobstrip--global { left: 12px; right: 12px; bottom: 88px; }
}
.abx-jobstrip-icon { width: 12px; height: 12px; border-radius: 50%; background: var(--neutral-mid); flex: 0 0 auto; }
.abx-jobstrip[data-state="run"] .abx-jobstrip-icon { background: var(--accent); }
.abx-jobstrip[data-state="done"] .abx-jobstrip-icon { background: var(--accent-strong); }
.abx-jobstrip[data-state="fail"] .abx-jobstrip-icon { background: var(--critical); }
.abx-jobstrip-msg { flex: 1 1 auto; }
.abx-jobstrip-timer { font-variant-numeric: tabular-nums; color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .abx-jobstrip[data-state="run"] .abx-jobstrip-icon { animation: abx-spin 900ms linear infinite; }
}
@keyframes abx-spin { to { transform: rotate(360deg); } }

.abx-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin: 28px 0 10px; }
.abx-winning { margin-top: 32px; }
.abx-win-list { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface-1); }
.abx-win-row + .abx-win-row { border-top: 1px solid var(--border); }
.abx-win-row { display: grid; grid-template-columns: 46px 1fr auto; column-gap: 12px; padding: 12px 14px; align-items: center; }
.abx-win-thumb { width: 46px; height: 46px; border-radius: 4px; object-fit: cover; }
.abx-win-thumb.creative-thumb-placeholder { background: var(--surface-2); display: block; }
.abx-win-desc { font-size: 13.5px; margin: 0; color: var(--text-primary); }
.abx-win-name { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; }
.abx-noideas-tag { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 100px; padding: 1px 8px; }
.abx-win-cpa { text-align: right; }
.abx-win-cpa-val { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--accent); }
.abx-win-cpa-lbl { font-size: 11px; color: var(--text-muted); }
@media (max-width: 560px) {
  .abx-win-cpa { display: none; }
}

.abx-batches { margin-top: 24px; }
.abx-batches summary { font-size: 13px; color: var(--text-muted); cursor: pointer; }
.abx-batches ul { list-style: none; padding: 8px 0 0; margin: 0; }
.abx-batches a { font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.abx-batches a:hover { color: var(--text-primary); }

.abx-state { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 44px 20px; text-align: center; }
.abx-state-h { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; }
.abx-state-p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); max-width: 340px; margin: 0 auto 16px; }
.abx-state-action { min-height: 44px; }

.abx-inline-error { background: var(--critical-wash); border: 1px solid var(--critical); color: var(--text-primary); padding: 10px 12px; border-radius: 7px; margin-bottom: 12px; font-size: 13px; }

@media (max-width: 560px) {
  .abx-row-title { font-size: 19px; }
  .abx-daterow { padding-block: 10px; }
  .abx-range-btn { flex-basis: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .abx-row-chev, .abx-row-body, .abx-preset, #abx-list-wrap, .abx-jobstrip-icon { transition: none !important; animation: none !important; }
}

/* Batches selector — replaces the retired <details> disclosure. */
.abx-batches { display: flex; align-items: center; gap: 8px; margin-block: 20px; }
.abx-batches-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.abx-batches-select { min-height: 44px; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); font-size: 13px; }
.abx-batches-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Part 55 §2.4 — Check-an-ad modal removed. The header slot is now used by
   the §3.3 Ask AI entry; the modal CSS is intentionally deleted. */

/* ---------- Home: Monthly Report entry — deliberately NOT another
   client-card in the client-grid, so it reads as a separate tool sharing
   the page shell, not a bolted-on extra client (spec Part 5B). ---------- */
.home-section-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 28px;
  margin: 8px 0 -4px;
}
.monthly-report-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 28px 8px;
  max-width: 904px;
  background: var(--surface-1);
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.monthly-report-entry:hover { border-color: var(--accent-strong); }
.monthly-report-entry h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 4px;
}
.monthly-report-entry .muted { font-size: 13px; }
.monthly-report-entry .arrow { font-size: 22px; color: var(--accent); flex-shrink: 0; }

/* ---------- Monthly Report page ---------- */
.mr-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.mr-tabs button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease;
}
.mr-tabs button:hover { color: var(--text-primary); }
.mr-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

.mr-panel { display: none; }
.mr-panel.active { display: block; }

.mr-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.mr-kpi-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
}
.mr-kpi-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--accent-wash); color: var(--accent);
  padding: 3px 8px; border-radius: 4px;
}
.mr-kpi-card .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.mr-kpi-card .value { font-family: var(--font-display); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.mr-kpi-card .sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.mr-compare-selector {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; font-size: 12px; color: var(--text-muted);
}
.mr-compare-selector select {
  padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--page-plane); color: var(--text-primary); font-size: 13px;
}
.mr-compare-selector .vs { color: var(--accent); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; }

.mr-compare-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
.mr-compare-col {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.mr-compare-col.wins { border-top: 2px solid var(--series-3); }
.mr-compare-col.watch { border-top: 2px solid var(--critical); }
.mr-compare-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 12px; font-weight: 600;
}
.mr-compare-col.wins .mr-compare-head { color: var(--series-3); }
.mr-compare-col.watch .mr-compare-head { color: var(--critical); }
.mr-compare-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--gridline); gap: 10px;
}
.mr-compare-item:last-child { border-bottom: none; }
.mr-compare-item .name { font-size: 13px; }
.mr-compare-item .detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.mr-compare-item .delta { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; white-space: nowrap; }
.mr-compare-col.wins .delta { color: var(--series-3); }
.mr-compare-col.watch .delta { color: var(--critical); }
.mr-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }

.mr-delta-chip { font-size: 10px; font-variant-numeric: tabular-nums; }
.mr-delta-chip.good { color: var(--series-3); }
.mr-delta-chip.bad { color: var(--critical); }
.mr-delta-chip.placeholder { visibility: hidden; }
.mr-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
td.mr-empty-cell { color: var(--neutral-soft); font-size: 12px; }
td.mr-overall-col, th.mr-overall-col { background: var(--accent-wash); font-weight: 600; }
td.mr-active-col { background: var(--page-plane); }

.mr-brand-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.mr-brand-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.mr-brand-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 0 0 2px; }
.mr-brand-card .sub { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.mr-brand-card-row {
  display: flex; justify-content: space-between; padding: 6px 0;
  border-bottom: 1px solid var(--gridline); font-size: 13px;
}
.mr-brand-card-row:last-child { border-bottom: none; }
.mr-brand-card-row .k { color: var(--text-muted); }
.mr-brand-card-row .v { font-weight: 600; font-variant-numeric: tabular-nums; }

.mr-lead { font-weight: 700; }
.mr-lead.good { color: var(--series-3); }
.mr-lead.tie { color: var(--text-muted); font-weight: 400; }
th.mr-brand-a { color: var(--series-1); }
th.mr-brand-b { color: var(--accent); }

/* ---------- Part 6: "This Month's Story" hero, mirroring winner-hero's
   information hierarchy (headline first, everything else in support). ---------- */
.mr-story {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mr-story-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.mr-story-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 3vw, 26px);
  line-height: 1.25;
  color: var(--text-primary);
}

/* "What Moved" synthesized headline, above the Improved/Declined lists */
.mr-headline { margin-bottom: 16px; }
.mr-headline-text {
  font-size: 15px;
  color: var(--text-primary);
  background: var(--accent-wash);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0;
}
.mr-headline-text.mr-empty {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- Part 10: deeper Acuity analytics (funnel section) ---------- */
.funnel-note { font-size: 12px; color: var(--text-muted); margin: 4px 0 20px; }
.funnel-subsection { margin-top: 24px; }
.funnel-subsection h3 { margin-bottom: 10px; }
.funnel-subnote { font-size: 12px; font-weight: 400; color: var(--text-muted); }

.proportion-bar {
  display: flex;
  height: 14px;
  border-radius: 100px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.proportion-segment { height: 100%; }
.proportion-segment--new { background: var(--series-3); }
.proportion-segment--returning { background: var(--series-1); }
.proportion-segment--unknown { background: var(--neutral-mid); }

.heatmap-caption { font-size: 12px; color: var(--text-secondary); margin: 0 0 10px; }
.heatmap-scroll { overflow-x: auto; padding-bottom: 4px; }
.heatmap-grid {
  display: grid;
  grid-template-columns: 44px repeat(24, minmax(26px, 1fr));
  gap: 2px;
  width: max-content;
  min-width: 100%;
}
.heatmap-corner { }
.heatmap-hour-label, .heatmap-day-label {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Part 17 Item 1 — every hour still gets its own gridline (so the grid
   stays 24 real columns, unambiguous), but only every 3rd is LABELED
   (12am/3am/6am/... ), matching the spec's "lighter gridlines at the
   unlabeled columns" — the label text itself is just empty for those,
   still occupying its column so nothing shifts. */
.heatmap-hour-label--minor { color: var(--gridline); font-size: 14px; }
.heatmap-day-label { justify-content: flex-start; padding-right: 4px; }
.heatmap-cell {
  aspect-ratio: 1;
  min-width: 26px;
  border-radius: 3px;
  background: var(--gridline);
  box-shadow: inset 0 0 0 1px var(--border);
}
.heatmap-cell.heat-1 { background: var(--heat-1); }
.heatmap-cell.heat-2 { background: var(--heat-2); }
.heatmap-cell.heat-3 { background: var(--heat-3); }
.heatmap-cell.heat-4 { background: var(--heat-4); }

/* ---------- Part 17 Item 2: shared heatmap intensity legend ---------- */
.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  margin: 8px 0 0;
}
.heatmap-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--border);
  background: var(--gridline);
}
.heatmap-legend-swatch.heat-1 { background: var(--heat-1); }
.heatmap-legend-swatch.heat-2 { background: var(--heat-2); }
.heatmap-legend-swatch.heat-3 { background: var(--heat-3); }
.heatmap-legend-swatch.heat-4 { background: var(--heat-4); }

/* ---------- Part 11 Item 1: anomaly alert banners ---------- */
.anomaly-alerts { display: flex; flex-direction: column; gap: 8px; margin: 0 28px 4px; max-width: 904px; }
.anomaly-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--critical);
  background: var(--critical-wash);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
}
.anomaly-icon { color: var(--critical); flex-shrink: 0; }
.anomaly-text { flex: 1; }
.anomaly-dismiss {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.anomaly-dismiss:hover { color: var(--text-primary); }

/* ---------- Part 20 §4: stale-data banner ---------- */
/* Client dashboards use .dash-body's centered 1180px column, not
   index.php's narrower left-aligned 960px scheme that .anomaly-alerts was
   originally sized for. */
.dash-anomaly-alerts { max-width: 1180px; margin: 0 auto 4px; padding: 0 28px; box-sizing: border-box; }
/* Calm/informational, not the red "something broke" tone of a real anomaly —
   this is a heads-up about timing, not a metric spike. */
.stale-data-banner { border-color: var(--accent); background: var(--accent-wash); }
.stale-data-banner .anomaly-icon { color: var(--accent); }

/* ---------- Part 11 Item 7: general CSV/PNG export ---------- */
.chart-export-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.chart-export-btn:hover { color: var(--text-primary); border-color: var(--accent); }

.table-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.table-export-btn:hover { color: var(--text-primary); border-color: var(--accent); }

/* ---------- Part 11 Item 4: ad-level notes ---------- */
.note-indicator {
  border: none;
  background: transparent;
  color: var(--text-muted);
  opacity: 0.35;
  font-size: 13px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
/* Part 16 Item 2 — matches .row-share-btn/.tag-editor-btn's hover exactly
   (opacity 0.9 + color var(--text-primary)); this one previously stopped at
   opacity 0.8 with no color change, a visible mismatch among three icons
   that sit in the same row. */
.note-indicator:hover { opacity: 0.9; color: var(--text-primary); }
.note-indicator--has-note { opacity: 1; color: var(--accent); }

.notes-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,8,4,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.notes-modal-overlay.open { display: flex; }
.notes-modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  width: min(90vw, 420px);
}
.notes-modal h3 { margin: 0 0 12px; font-size: 15px; }
.notes-modal textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
}
.notes-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---------- Part 11 Item 5: compare mode ---------- */
.compare-checkbox { align-self: flex-start; margin-top: 6px; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.compare-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-primary);
}
/* [hidden] handled by the global rule at the top of the file (Part 57 §8.2). */
.compare-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,8,4,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.compare-modal-overlay.open { display: flex; }
.compare-modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  width: min(94vw, 1000px);
  max-height: 88vh;
  overflow-y: auto;
}
.compare-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.compare-modal-header h3 { margin: 0; }
.compare-modal-close { border: none; background: transparent; font-size: 20px; color: var(--text-secondary); cursor: pointer; line-height: 1; }
.compare-modal-close:hover { color: var(--text-primary); }
.compare-modal-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.compare-col { border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.compare-col .creative-thumb, .compare-col .creative-thumb-placeholder { width: 64px; height: 64px; margin-bottom: 10px; }
.compare-col .compare-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 10px; }
.compare-col .stat-row { grid-template-columns: 1fr 1fr; margin-bottom: 10px; }

/* ---------- Part 11 Item 3: shareable creative card export ---------- */
.row-share-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  opacity: 0.35;
  font-size: 13px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.row-share-btn:hover { opacity: 0.9; color: var(--text-primary); }

/* ---------- Part 11 Item 6: quick-jump search ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,8,4,0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1100;
  padding: 12vh 20px 20px;
}
.search-overlay.open { display: flex; }
.search-panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(94vw, 560px);
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(20,16,8,0.25);
}
.search-input {
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  padding: 16px 18px;
  font-family: inherit;
  font-size: 15px;
}
.search-input:focus { outline: none; }
.search-results { overflow-y: auto; padding: 6px; }
.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}
.search-result-item .search-result-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-left: auto; }
.search-result-item.active { background: var(--accent-wash); }
.search-empty { padding: 14px 12px; color: var(--text-muted); font-size: 13px; }
.search-hint { padding: 10px 12px; color: var(--text-muted); font-size: 11px; border-top: 1px solid var(--border); }
.search-highlight { animation: search-flash 2s ease-out; }
@keyframes search-flash {
  0%, 40% { box-shadow: inset 0 0 0 2px var(--accent); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}

/* ---------- Part 15: language toggle ---------- */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-toggle-btn {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-1);
  text-decoration: none;
  line-height: 1.3;
}
.lang-toggle-btn:hover { color: var(--text-primary); background: var(--surface-2); }
.lang-toggle-btn.active { background: var(--accent); color: var(--accent-ink); }
.lang-toggle-btn + .lang-toggle-btn { border-left: 1px solid var(--border); }

.page-header-actions { display: flex; align-items: center; gap: 14px; }

/* dash-header's .range-controls already positions the lang toggle inline
   with the range picker; login is a centered card with nothing else in its
   header row, so the toggle floats in the page corner instead. */
.login-body .lang-toggle { position: fixed; top: 20px; right: 20px; }

/* ---------- Part 13 Item 3: dark/light theme toggle ---------- */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.theme-toggle-btn:hover { border-color: var(--accent); }
.theme-toggle-icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle-icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle-icon--sun { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .theme-toggle-icon--moon { display: none; }
  :root:where(:not([data-theme="light"])) .theme-toggle-icon--sun { display: inline; }
}
.login-body .theme-toggle-btn { position: fixed; top: 20px; right: 106px; }

/* ---------- Part 13 Item 2: Export Center ---------- */
.export-center-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.export-center-btn:hover { color: var(--text-primary); border-color: var(--accent); }
/* [hidden] handled by the global rule at the top of the file. */
.export-center-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,8,4,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.export-center-panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  width: min(94vw, 520px);
  max-height: 88vh;
  overflow-y: auto;
}
.export-center-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.export-center-head h3 { margin: 0; font-family: var(--font-display); font-size: 19px; }
.export-center-close { border: none; background: transparent; font-size: 20px; color: var(--text-secondary); cursor: pointer; line-height: 1; }
.export-center-close:hover { color: var(--text-primary); }
.export-center-help { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; }
.export-center-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  border-bottom: 1px solid var(--gridline);
}
.export-center-select-all { border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.export-center-list .export-center-item:last-child { border-bottom: none; }
.export-center-item-label { flex: 1; font-size: 13px; }
.export-center-item-type { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.export-center-error { color: var(--critical); font-size: 13px; margin: 10px 0 0; }
/* [hidden] handled by the global rule at the top of the file. */
.export-center-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ---------- Part 14: Cross-Brand Insights ---------- */
.xbrand-gap-item {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}
.xbrand-gap-item:last-child { margin-bottom: 0; }
.xbrand-gap-item.good { border-color: var(--series-3); background: rgba(27,175,122,0.08); }
.xbrand-gap-item.watch { border-color: var(--critical); background: var(--critical-wash); }
.xbrand-suggestion-item {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  border: 1px solid var(--accent);
  background: var(--accent-wash);
}
.xbrand-suggestion-item:last-child { margin-bottom: 0; }
.xbrand-suggestion-item .xbrand-suggestion-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent-strong);
  margin-right: 6px;
}
.xbrand-suggestion-item.possible { border-color: var(--border); background: var(--surface-2); }
.xbrand-suggestion-item.possible .xbrand-suggestion-tag { color: var(--text-muted); }

/* ---------- Part 14: creative tag badges (leaderboard rows) ---------- */
.tag-badge-list { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--neutral-soft);
  color: var(--neutral-strong);
  white-space: nowrap;
}
:root[data-theme="dark"] .tag-badge { background: var(--surface-2); color: var(--text-secondary); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .tag-badge { background: var(--surface-2); color: var(--text-secondary); }
}
.tag-badge--guessed { border: 1px dashed var(--neutral-mid); background: transparent; color: var(--text-muted); }
.tag-editor-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  opacity: 0.35;
  font-size: 13px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.tag-editor-btn:hover { opacity: 0.9; color: var(--text-primary); }
.tag-picker-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tag-picker-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.tag-picker-option.selected { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tag-picker-guessed-note { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.tag-confirm-btn {
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  color: var(--accent-strong);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
  margin-left: 4px;
}

/* ---------- Part 16 Item 1: client switcher ---------- */
.client-switcher-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  margin-top: 4px;
  max-width: 160px;
  cursor: pointer;
}
.client-switcher-select:hover { color: var(--text-primary); border-color: var(--accent); }

/* ---------- Part 16 Item 8: funnel shape ---------- */
.funnel-shape { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px auto; max-width: 440px; }
.funnel-stage {
  width: 100%;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 8px;
  text-align: center;
  box-sizing: border-box;
}
.funnel-stage-value { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; }
.funnel-stage-label { font-size: 11px; margin-top: 2px; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.03em; }
.funnel-dropoff { font-size: 11px; color: var(--text-muted); }

/* ---------- Part 16 Item 6: changelog markers on trend charts ---------- */
.changelog-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  transform: translateY(-100%);
  cursor: pointer;
  z-index: 5;
  outline: none;
}
.changelog-marker::before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--neutral-mid);
  opacity: 0.5;
}
.changelog-marker:hover::before,
.changelog-marker:focus-visible::before,
.changelog-marker.active::before {
  opacity: 1;
  border-top-color: var(--accent);
}
.changelog-marker-tip {
  display: none;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 10;
}
.changelog-marker:hover .changelog-marker-tip,
.changelog-marker:focus-visible .changelog-marker-tip,
.changelog-marker.active .changelog-marker-tip {
  display: block;
}

/* ---------- Part 16 Item 4: leaderboard row sparklines ---------- */
.leaderboard-sparklines { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.sparkline-item { display: flex; align-items: center; gap: 5px; }
.sparkline-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.sparkline { display: block; flex-shrink: 0; opacity: 0.85; }
.sparkline-empty { font-size: 10px; color: var(--text-muted); }

/* ---------- Part 16 Item 7: calendar heatmap ---------- */
.cal-heatmap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal-heatmap-head h3 { margin: 0; }
.cal-heatmap-metric {
  font-family: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.cal-heatmap-scroll { overflow-x: auto; padding-bottom: 4px; }
.cal-heatmap-wrap { width: max-content; min-width: 100%; }
.cal-heatmap-months { display: grid; gap: 2px; margin-bottom: 2px; }
.cal-heatmap-month-label { font-size: 10px; color: var(--text-muted); }
.cal-heatmap-grid { display: grid; gap: 2px; }
.cal-heatmap-daylabel { font-size: 9px; color: var(--text-muted); display: flex; align-items: center; }
.cal-heatmap-cell {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: var(--gridline);
  box-shadow: inset 0 0 0 1px var(--border);
  position: relative;
  cursor: pointer;
  outline: none;
}
.cal-heatmap-cell.heat-1 { background: var(--heat-1); }
.cal-heatmap-cell.heat-2 { background: var(--heat-2); }
.cal-heatmap-cell.heat-3 { background: var(--heat-3); }
.cal-heatmap-cell.heat-4 { background: var(--heat-4); }
.cal-heatmap-cell--outside { background: transparent; box-shadow: none; cursor: default; }
.cal-heatmap-cell:hover, .cal-heatmap-cell:focus-visible, .cal-heatmap-cell.active {
  box-shadow: inset 0 0 0 1.5px var(--text-primary);
}
.cal-heatmap-tip {
  display: none;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 10;
}
.cal-heatmap-cell:hover .cal-heatmap-tip,
.cal-heatmap-cell:focus-visible .cal-heatmap-tip,
.cal-heatmap-cell.active .cal-heatmap-tip {
  display: block;
}

/* ---------- Part 16 Item 5: scatter view ---------- */
.leaderboard-view-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
/* Part 16 Item 2 — this is the same segmented-toggle pattern as
   .lang-toggle-btn (border-radius/border on the container already matched
   it), so its buttons should match that family's rest/hover treatment too:
   surface-1 at rest (not surface-2, which belongs to the separate button/
   select family — .table-export-btn, .client-switcher-select, etc.),
   12px text (was 13px), and an explicit hover background shift. */
.view-toggle button {
  border: none;
  background: var(--surface-1);
  color: var(--text-secondary);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.view-toggle button:hover { color: var(--text-primary); background: var(--surface-2); }
.view-toggle button.active { background: var(--accent); color: var(--accent-ink); }
.view-toggle button + button { border-left: 1px solid var(--border); }
.scatter-view { min-height: 420px; position: relative; }
.scatter-view canvas { max-width: 100%; }
.scatter-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 20;
  max-width: 240px;
}
.scatter-tooltip-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.scatter-tooltip-thumb--placeholder { display: flex; align-items: center; justify-content: center; background: var(--surface-2); font-size: 16px; }
.scatter-tooltip-name { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.scatter-tooltip-line { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.scatter-quadrant-label {
  position: absolute;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  pointer-events: none;
  max-width: 42%;
  line-height: 1.3;
}

/**
 * Part 16 Item 3 — mobile bottom sheets. One shared pattern (comma-grouped
 * selectors, identical rule bodies — not three copy-drifted blocks) applied
 * to the three named surfaces: Export Center, the tag picker (shares
 * .notes-modal-overlay/.notes-modal with the ad-notes modal, which is
 * deliberately NOT in scope here — targeted by #tag-modal-overlay's own ID
 * so the plain notes modal stays a centered dialog, unchanged), and compare
 * mode. Desktop behavior (centered dialog) is completely untouched — this
 * block only exists inside the media query. Same 560px breakpoint as Part
 * 12's calendar modal, for one consistent "mobile changes shape here"
 * threshold across the app. Slide animation already respects
 * prefers-reduced-motion for free via the global rule further up this file
 * (animation-duration forced to ~0 for every animated element site-wide);
 * Escape-to-close, click-outside-to-close, and role="dialog"/aria-modal are
 * all pre-existing behavior on every one of these three, untouched by a
 * pure-CSS layout change.
 */
@media (max-width: 560px) {
  #export-center-modal .export-center-backdrop,
  #tag-modal-overlay,
  .compare-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  #export-center-modal .export-center-panel,
  #tag-modal-overlay .notes-modal,
  .compare-modal {
    width: 100%;
    max-width: none;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: sheet-slide-up 0.22s ease-out;
    position: relative;
  }
  #export-center-modal .export-center-panel::before,
  #tag-modal-overlay .notes-modal::before,
  .compare-modal::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }
  #export-center-modal .export-center-panel,
  .compare-modal {
    overflow-y: auto;
  }
}
@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ---------- Part 30: AI chat box ---------- */
/* z-index 1200 — above everything else on the page; current highest in use
   elsewhere is 1100 (.export-center-modal). */
/* ---- Part 55: sparkle Ask AI launcher ---- */
.ai-chat-toggle{
  position:fixed; right:24px; bottom:24px; z-index:1200;
  display:inline-flex; align-items:center; gap:9px;
  height:52px; padding:0 19px 0 15px;
  border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--surface-1); color:var(--text-primary);
  font:600 14px/1 var(--font-body); cursor:pointer;
  box-shadow:var(--elev-3);
  transition:transform .22s var(--ease-spring), box-shadow .22s var(--ease),
             border-color .22s var(--ease);
}
.ai-chat-toggle:hover{
  transform:translateY(-2px);
  box-shadow:var(--elev-4);
  border-color:var(--accent);
}
.ai-chat-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.ai-chat-toggle-icon{
  display:block; width:22px; height:22px; flex:none;
  color:var(--accent); overflow:visible;
}
.ai-chat-toggle-icon .spark-lg,
.ai-chat-toggle-icon .spark-sm{
  fill:currentColor;
  transform-box:fill-box;
  transform-origin:center;
}

@media (prefers-reduced-motion:no-preference){
  .ai-chat-toggle-icon .spark-lg{ animation:abx-tw-lg var(--abx-tw,2.6s) var(--ease) infinite; }
  .ai-chat-toggle-icon .spark-sm{ animation:abx-tw-sm var(--abx-tw,2.6s) var(--ease) infinite;
                                  animation-delay:calc(var(--abx-tw,2.6s) / 5); }
}
.ai-chat-toggle[data-state="hover"]{ --abx-tw:1.6s; }
.ai-chat-toggle[data-state="think"]{ --abx-tw:1.05s; }

@keyframes abx-tw-lg{
  0%,100%{ transform:scale(1) rotate(0deg);      opacity:1; }
  45%    { transform:scale(.72) rotate(38deg);   opacity:.72; }
}
@keyframes abx-tw-sm{
  0%,100%{ transform:scale(.6);   opacity:.35; }
  45%    { transform:scale(1.25); opacity:1; }
}

.ai-chat-toggle[data-state="think"] .ai-chat-toggle-icon{ color:var(--accent-strong); }

@media (max-width:640px){
  .ai-chat-toggle{ right:16px; bottom:16px; height:48px; padding:0 16px 0 13px; font-size:13.5px; }
  .ai-chat-toggle-icon{ width:20px; height:20px; }
}

/* ---------- Part 44: chat nudge + starters ---------- */
@keyframes ai-chat-nudge-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-chat-nudge {
  position: fixed;
  right: 24px;
  bottom: 84px;
  z-index: 1199;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 248px;
  padding: 12px 14px;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: var(--elev-3);
  transform-origin: bottom right;
  animation: ai-chat-nudge-in 0.32s var(--ease-spring) both;
}
.ai-chat-nudge::after {
  content: '';
  position: absolute;
  right: 22px;
  bottom: -6px;
  width: 11px;
  height: 11px;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
.ai-chat-nudge-x {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1;
  padding: 0 0 0 2px;
  cursor: pointer;
  transition: color 0.14s var(--ease);
}
.ai-chat-nudge-x:hover { color: var(--text-primary); }

.ai-chat-starters-intro {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 2px 0 10px;
  line-height: 1.45;
}
.ai-chat-starter {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 7px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
              transform 0.15s var(--ease-spring);
}
.ai-chat-starter:hover {
  background: var(--surface-1);
  border-color: var(--accent);
  transform: translateX(3px);
}
.ai-chat-starter:active { transform: translateX(1px) scale(0.99); }
@keyframes ai-chat-starter-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-chat-starter { animation: ai-chat-starter-in 0.3s var(--ease) both; }
.ai-chat-starter:nth-of-type(1) { animation-delay: 0.06s; }
.ai-chat-starter:nth-of-type(2) { animation-delay: 0.13s; }
.ai-chat-starter:nth-of-type(3) { animation-delay: 0.20s; }

/* ---------- Part 44: chat panel + message motion ---------- */
@keyframes ai-chat-panel-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-chat-panel {
  transform-origin: bottom right;
  animation: ai-chat-panel-in 0.26s var(--ease-spring) both;
  border-radius: var(--r-lg);
  box-shadow: var(--elev-4);
}

@keyframes ai-chat-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-chat-msg {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 9px 13px;
  animation: ai-chat-msg-in 0.26s var(--ease-spring) both;
}
.ai-chat-msg--user  { border-radius: var(--r-md) var(--r-md) 4px var(--r-md); }
.ai-chat-msg--model { border-radius: var(--r-md) var(--r-md) var(--r-md) 4px; }

.ai-chat-msg--thinking {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 13px;
}
.ai-chat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  animation: ai-chat-bounce 1.3s var(--ease) infinite;
}
.ai-chat-dot:nth-child(2) { animation-delay: 0.16s; }
.ai-chat-dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes ai-chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.ai-chat-input {
  border-radius: var(--r-sm);
  font-size: 13.5px;
  padding: 9px 12px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.ai-chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.ai-chat-send {
  border-radius: var(--r-sm);
  width: 36px;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease-spring);
}
.ai-chat-send:hover:not(:disabled) { background: var(--accent-strong); transform: scale(1.06); }
.ai-chat-send:active:not(:disabled) { transform: scale(0.94); }

.ai-chat-elapsed {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  padding: 0 4px;
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-toggle,
  .ai-chat-starter,
  .ai-chat-send { transition: none; }
  .ai-chat-toggle:hover,
  .ai-chat-starter:hover,
  .ai-chat-send:hover:not(:disabled) { transform: none; }
  .ai-chat-panel,
  .ai-chat-msg,
  .ai-chat-nudge,
  .ai-chat-starter { animation: none; }
  .ai-chat-dot { animation: ai-chat-bounce 1.3s var(--ease) infinite; }
  /* PATCH CHART-MOTION-01 — kill the first-paint stagger under reduced motion. */
  .chart-card--enter { animation: none; }
}

.ai-chat-panel {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 1200;
  width: 340px;
  max-width: calc(100vw - 40px);
  height: 460px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20,16,8,0.18);
  animation: drp-fade-in 0.12s ease-out;
}
:root[data-theme="dark"] .ai-chat-panel { box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .ai-chat-panel { box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
}
/* [hidden] handled by the global rule at the top of the file. */

.ai-chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-chat-panel-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.ai-chat-panel-close { border: none; background: transparent; font-size: 20px; color: var(--text-secondary); cursor: pointer; line-height: 1; }
.ai-chat-panel-close:hover { color: var(--text-primary); }

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-chat-empty-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.ai-chat-msg {
  max-width: 85%;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-chat-msg--user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-ink);
  border-bottom-right-radius: 2px;
}
.ai-chat-msg--model {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text-primary);
  border-bottom-left-radius: 2px;
}
.ai-chat-msg--thinking { color: var(--text-muted); }

.ai-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-chat-input {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
}
.ai-chat-input:focus { outline: none; border-color: var(--accent); }
.ai-chat-input:disabled { opacity: 0.6; }
.ai-chat-send {
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 8px;
  width: 34px;
  flex-shrink: 0;
  font-size: 16px;
  cursor: pointer;
}
.ai-chat-send:hover:not(:disabled) { background: var(--accent-strong); }
.ai-chat-send:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 560px) {
  .ai-chat-panel {
    right: 12px;
    bottom: 80px;
    width: calc(100vw - 24px);
  }
}

/* ---------- Part 45 §D1: chat copy-reply button ---------- */
.ai-chat-msg--model { position: relative; }
.ai-chat-msg-copy {
  position: absolute; top: 5px; right: 5px;
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px;
  background: var(--surface-1); color: var(--text-muted);
  opacity: 0; cursor: pointer;
  transition: opacity 0.15s var(--ease), color 0.15s var(--ease);
}
.ai-chat-msg--model:hover .ai-chat-msg-copy,
.ai-chat-msg-copy:focus-visible { opacity: 1; }
.ai-chat-msg-copy:hover { color: var(--text-primary); }
.ai-chat-msg-copy.is-copied { color: var(--series-3); opacity: 1; }
@media (hover: none) {
  .ai-chat-msg-copy { opacity: 1; }
}

/* ---------- Part 45 §D2: follow-up chips ---------- */
.ai-chat-followups {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 8px;
  padding: 0 4px;
}
.ai-chat-followups-intro {
  flex: 1 0 100%;
  margin: 0 0 2px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-chat-followup { /* inherits .ai-chat-starter styling */ }

/* ---------- Part 45 §D3: expanded chat panel ---------- */
.ai-chat-panel {
  transition: width 0.22s var(--ease), height 0.22s var(--ease);
}
.ai-chat-panel--expanded { width: 560px; height: min(720px, 80vh); }
@media (max-width: 620px) {
  .ai-chat-panel--expanded {
    right: 0; bottom: 0; width: 100vw; height: 88vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-chat-panel { transition: none; }
}

/* ---------- Part 45 §D5: header actions + context meta ---------- */
.ai-chat-header-actions {
  display: inline-flex; align-items: center; gap: 4px;
}
.ai-chat-header-btn {
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.ai-chat-header-btn:hover { background: var(--surface-1); color: var(--text-primary); }
.ai-chat-header-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-chat-header-meta {
  padding: 4px 14px 8px;
  font-size: 11px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

/* ---------- Part 45 §D6: textarea input ---------- */
.ai-chat-input {
  resize: none;
  min-height: 36px;
  max-height: 200px;
  overflow-y: hidden;
  font-family: inherit;
  line-height: 1.4;
}

/* Part 50 — creative scorecard, prepended to a model reply. Sits inside the
   Part 49 §A2 answer card, so it inherits that card's width and padding. */
.ai-chat-scorecard {
  margin: 0 0 12px;
  padding: 0 0 2px;
}
.ai-chat-sc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.ai-chat-sc-thumb,
.ai-chat-sc-glyph {
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-1);
}
.ai-chat-sc-glyph {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--text-muted);
}
.ai-chat-sc-meta { min-width: 0; }   /* required — lets the name ellipsis */
.ai-chat-sc-name {
  margin: 0;
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-chat-sc-stats {
  margin: 2px 0 0;
  font-size: 12px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.ai-chat-sc-strip {
  background: var(--surface-1);
  border-radius: 8px;
  padding: 10px 11px;
}
.ai-chat-sc-leg {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px;
}
.ai-chat-sc-leg:last-of-type { margin-bottom: 0; }
.ai-chat-sc-leg-label { width: 34px; flex: 0 0 auto; font-size: 11px; color: var(--text-secondary); }
.ai-chat-sc-track { flex: 1; height: 16px; position: relative; min-width: 0; }
.ai-chat-sc-centre {
  position: absolute; left: 50%; top: 0;
  width: 1px; height: 16px; background: var(--border-strong);
}
.ai-chat-sc-fill { position: absolute; top: 5px; height: 6px; }
.ai-chat-sc-fill--better { left: 50%; border-radius: 0 3px 3px 0; background: var(--series-3); }
.ai-chat-sc-fill--worse  { right: 50%; border-radius: 3px 0 0 3px; background: var(--series-2); }
.ai-chat-sc-leg-value {
  width: 38px; flex: 0 0 auto; text-align: right;
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ai-chat-sc-caption { margin: 8px 0 0; font-size: 11px; color: var(--text-muted); }

/* ---- Part 52 (AI Brain, winner-led generation) — additive rules only.
 * Reuses Part 51 --surface-1/2 tokens; no new hex. */
.abx-winning--selectable .abx-win-row { display: grid; grid-template-columns: 44px auto 1fr auto auto; align-items: center; gap: 12px; cursor: pointer; }
.abx-winner-check { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.abx-winner-check-input { position: absolute; opacity: 0; pointer-events: none; }
.abx-winner-check-box { width: 22px; height: 22px; border: 1.5px solid var(--border); border-radius: 5px; background: var(--surface-1); display: inline-block; position: relative; }
.abx-winner-check-input:checked + .abx-winner-check-box { background: var(--accent); border-color: var(--accent); }
.abx-winner-check-input:checked + .abx-winner-check-box::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 12px; border: solid var(--surface-1); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.abx-winner-check-input:disabled + .abx-winner-check-box { opacity: .4; cursor: not-allowed; }
.abx-needs-video-tag { display: inline-block; font-size: 11px; color: var(--text-muted); padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; margin-top: 4px; }
.abx-win-openad { font-size: 12px; color: var(--text-secondary); text-decoration: none; }
.abx-win-openad:hover { color: var(--text-primary); }

.abx-action-bar { position: sticky; bottom: 0; left: 0; right: 0; background: var(--surface-1); border-top: 1px solid var(--border); box-shadow: var(--elev-2); z-index: 40; margin-top: 12px; }
/* [hidden] handled by the global rule at the top of the file. */
.abx-action-bar-inner { display: flex; align-items: center; gap: 16px; padding: 12px 0; flex-wrap: wrap; }
.abx-action-count { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.abx-mode { display: inline-flex; gap: 12px; border: none; padding: 0; margin: 0; }
/* [hidden] handled by the global rule at the top of the file. */
.abx-mode-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
#abx-generate-btn { margin-left: auto; min-height: 44px; }
#abx-generate-btn:disabled { opacity: .5; cursor: not-allowed; }

.abx-upload-panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 16px; margin-top: 12px; }
/* [hidden] handled by the global rule at the top of the file. */
.abx-upload-h { margin: 0 0 10px; font-size: 14px; color: var(--text-primary); }
.abx-upload-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 13px; }
.abx-upload-name { flex: 1; color: var(--text-secondary); }
.abx-upload-choose { min-height: 44px; cursor: pointer; }
.abx-upload-status { font-size: 12px; color: var(--text-muted); min-width: 20px; }

.abx-idea-mount:empty { display: none; }
/* Part 57 polish §1 — cap the card width instead of dividing the pane. The
 * pane is fluid and can be 2000px wide; `1fr 1fr` inherited the old fixed
 * 600px column and blew each image to 1240px tall on wide viewports, pushing
 * title/one-liner/script link entirely below the fold. */
.abx-idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); gap: 16px; margin: 20px 0; }
.abx-idea-group-h { font-family: var(--font-display); font-size: 15px; color: var(--text-secondary); margin: 20px 0 8px; }
@media (max-width: 620px) { .abx-idea-grid { grid-template-columns: 1fr; } }
.abx-idea-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
/* Part 57 polish 2 §1 — max-height removed. The image is now bounded by its
 * column: 320px in .abx-idea-detail, whatever the grid gives it in
 * .abx-idea-grid. A max-height on top of a fixed column distorts the
 * aspect ratio rather than protecting the layout. */
.abx-idea-image { aspect-ratio: 4 / 5; background: var(--surface-2); overflow: hidden; }
.abx-idea-image .creative-thumb { border: 0; border-radius: 0; cursor: default; }
.abx-idea-image img, .abx-idea-image .abx-idea-thumb-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.abx-idea-image .abx-idea-thumb-fallback { opacity: .82; }
.abx-idea-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
/* Part 57 polish §8 — hierarchy reconciliation. Was 19px display / weight 600. */
.abx-idea-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0; color: var(--text-primary); }
.abx-idea-line { font-size: 14px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.abx-idea-source { font-size: 12px; color: var(--text-muted); margin: 0; }
.abx-idea-script-link { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }

.abx-script-view { margin: 24px 0; }
.abx-script-back { font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.abx-script-title { font-family: var(--font-display); font-size: 24px; margin: 8px 0 20px; }
.abx-script-h { font-family: var(--font-display); font-size: 16px; margin: 20px 0 8px; color: var(--text-primary); }
.abx-script-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.abx-script-table th, .abx-script-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.abx-script-table th { font-weight: 600; color: var(--text-muted); background: var(--surface-2); }
.abx-script-dir { font-size: 14px; line-height: 1.6; color: var(--text-secondary); background: var(--surface-2); border-radius: 8px; padding: 14px; }
.abx-script-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.abx-saved-sets { margin-top: 32px; }
.abx-saved-sets-list { display: flex; flex-direction: column; gap: 8px; }
.abx-saved-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.abx-saved-set-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.abx-saved-set-date { font-weight: 600; color: var(--text-primary); }
.abx-saved-set-mode, .abx-saved-set-count { color: var(--text-muted); }
.abx-saved-set-source { color: var(--text-secondary); }
.abx-saved-set-actions { display: flex; gap: 8px; }

/* Part 55 §2.7 — replaces the retired <details> disclosure with the button
   + grid-template-rows pattern used by idea rows. */
.abx-last-monday { margin-top: 32px; }
.abx-last-monday-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 8px 0; cursor: pointer; font-size: 13px; color: var(--text-muted); }
.abx-last-monday-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.abx-last-monday-toggle .abx-lm-chev { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .abx-last-monday-toggle .abx-lm-chev { transition: transform 180ms ease-out; }
}
.abx-last-monday.is-open .abx-lm-chev { transform: rotate(90deg); }
.abx-last-monday-body { display: grid; grid-template-rows: 0fr; }
@media (prefers-reduced-motion: no-preference) {
  .abx-last-monday-body { transition: grid-template-rows 200ms ease-out; }
}
.abx-last-monday.is-open .abx-last-monday-body { grid-template-rows: 1fr; }
.abx-last-monday-body > div { overflow: hidden; }

/* Part 55 §1.3 — cold start panel above winners. */
.abx-cold { margin: 0 0 16px; }

/* Part 55 §2.5 — Change selection quiet link at top of the idea set. */
.abx-change-selection { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 0; font-size: 13px; color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.abx-change-selection:hover { color: var(--text-primary); }

/* Part 55 §2.6 — per-idea dismiss + show-dismissed toggle. */
.abx-idea-card { position: relative; }
.abx-idea-dismiss { position: absolute; top: 8px; right: 8px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; font-size: 11px; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .15s var(--ease); }
.abx-idea-card:hover .abx-idea-dismiss,
.abx-idea-card:focus-within .abx-idea-dismiss { opacity: 1; }
@media (max-width: 620px) { .abx-idea-dismiss { opacity: 1; } }
.abx-idea-card.is-dismissed { display: none; }
.abx-idea-set.is-showing-dismissed .abx-idea-card.is-dismissed { display: flex; opacity: 0.6; }
.abx-show-dismissed { display: inline-block; margin-top: 12px; background: none; border: 0; padding: 6px 0; font-size: 13px; color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.abx-show-dismissed:hover { color: var(--text-primary); }

/* Part 55 §3.1 — contextual "Ask about this" affordances. Hover/focus on
   desktop, always visible on mobile. */
.abx-ctx-ask { background: none; border: 0; padding: 4px 0; font-size: 12px; color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; opacity: 0; transition: opacity .15s var(--ease); }
.abx-ctx-ask:hover { color: var(--text-primary); }
.abx-win-row:hover .abx-ctx-ask,
.abx-win-row:focus-within .abx-ctx-ask,
.abx-idea-card:hover .abx-ctx-ask,
.abx-idea-card:focus-within .abx-ctx-ask,
.abx-script-view .abx-ctx-ask { opacity: 1; }
@media (max-width: 620px) { .abx-ctx-ask { opacity: 1; } }

/* Part 55 §3.3 — header Ask AI entry, secondary button styling. */
.abx-hdr-ask { font-size: 13px; color: var(--text-secondary); text-decoration: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; background: transparent; cursor: pointer; font-family: inherit; }
.abx-hdr-ask:hover { color: var(--text-primary); border-color: var(--accent); }

/* Part 55 §2.2 — set heading is focusable for the post-render focus move. */
.abx-idea-set-heading { font-family: var(--font-display); font-size: 15px; color: var(--text-secondary); margin: 0 0 8px; }
.abx-idea-set-heading:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.abx-live-announce { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Part 54 §1.4 / §3 — trends section notes */
.trends-note { margin: 4px 0 8px; font-size: 13px; color: var(--text-secondary); }
.trends-note--footnote { color: var(--text-muted); font-size: 12px; }
/* [hidden] handled by the global rule at the top of the file. */

/* ---- Part 56 §5 — Market Intelligence ---- */
#market-table th, #market-table td { padding: 8px 10px; }
.market-delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.market-delta--up { color: #158a4b; }
.market-delta--down { color: #b1341e; }
.market-delta--flat, .market-delta--null { color: var(--text-muted); font-weight: 400; }
.market-est { font-size: 10px; color: var(--text-muted); cursor: help; margin-left: 2px; }
.market-caveat { color: var(--text-muted); cursor: help; }
.market-dark-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--border); color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.market-error { color: #b1341e; cursor: help; }
.market-role-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.market-role-badge--client { background: var(--accent); color: #fff; }
.market-muted { color: var(--text-muted); font-size: 13px; }
.market-deadline { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.market-deadline--urgent { color: #b1341e; font-weight: 600; }
.market-quote { color: var(--text-muted); font-size: 12px; }
.market-movers-list { list-style: none; padding: 0; margin: 0; }
.market-movers-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.market-tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; margin-right: 4px; }
.market-tag--warning { background: #fbe6df; color: #7a2010; }
.market-tag--info { background: #dceffc; color: #114b73; }
.market-client-card { border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.market-audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .market-audit-grid { grid-template-columns: 1fr; } }
.market-tiers { margin: 6px 0; padding-left: 20px; font-size: 13px; }
.market-claim-check { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.market-claim-url { font-size: 12px; word-break: break-all; margin-bottom: 6px; }
.market-mismatches { margin: 8px 0; }
.market-mismatches--high { border-left: 3px solid #b1341e; padding-left: 10px; background: #fdf5f3; }
.market-mismatches--medium { border-left: 3px solid #d18a1e; padding-left: 10px; }
.market-mismatches--low { border-left: 3px solid var(--border); padding-left: 10px; }
.market-mismatches h5 { margin: 0 0 6px; font-size: 13px; }
.market-mismatches ul { margin: 0; padding-left: 18px; font-size: 13px; }
.market-mismatch-kind { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.market-new-brand { padding: 8px 0; border-bottom: 1px solid var(--border); }
.market-new-brand h4 { margin: 0 0 4px; font-size: 14px; }
#market-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }

/* ---- Part 54 Fix 7 — cross-brand ops strip ---- */
.ops-strip { margin: 12px 0 20px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg, transparent); }
.ops-strip h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.ops-strip-fallback { color: var(--text-muted); font-weight: 400; }
.ops-strip-list { list-style: none; padding: 0; margin: 0; }
.ops-strip-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 13px; }
.ops-strip-item:first-child { border-top: 0; }
.ops-strip-kind { display: inline-block; min-width: 92px; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-align: center; }
.ops-strip-item--fail .ops-strip-kind { background: #b1341e; color: #fff; }
.ops-strip-item--date_gap .ops-strip-kind { background: #d18a1e; color: #fff; }
.ops-strip-item--skip_ratelimit .ops-strip-kind { background: var(--border); color: var(--text-secondary); }
.ops-strip-detail { color: var(--text-muted); flex: 1; }
.ops-strip-dismiss { margin-left: auto; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 6px; }

/* ---- Part 56 (SPEC filename Part 55) — verdict-list leaderboard ----
   All new rules scoped through .leaderboard-row--verdict and .leaderboard--verdict
   so shared classes (.leaderboard-row, .leaderboard-main, .leaderboard-name-row,
   .leaderboard-numbers, .num-item .label, .num-item .value) stay unchanged —
   the Currently Active section and the landing-page expand detail must still
   render identically (spec §2.1). */
.leaderboard-header-row--verdict {
  display: grid;
  grid-template-columns: 24px 40px 56px 1fr auto auto;
  gap: 12px;
  padding: 0 12px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.leaderboard-header-row--verdict .lb-header-col-name { grid-column: 4; }
.leaderboard-header-row--verdict .lb-header-col-metric { text-align: right; min-width: 56px; }
.verdict-group-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 12px 6px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.verdict-group-header:first-child { border-top: 0; margin-top: 0; }
.verdict-group-label { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
.verdict-group-count { color: var(--text-secondary); font-weight: 600; }
.verdict-group-spend { color: var(--text-muted); margin-left: auto; letter-spacing: 0; text-transform: none; font-size: 12px; }
.verdict-group-header--scaling .verdict-group-label { color: #158a4b; }
.verdict-group-header--steady .verdict-group-label { color: var(--text-secondary); }
.verdict-group-header--too_early .verdict-group-label { color: #6b6b6b; }
.verdict-group-header--cut .verdict-group-label { color: #b1341e; }
.verdict-reason {
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 0 4px;
}
.verdict-reason--scaling { color: #158a4b; }
.verdict-reason--cut { color: #b1341e; }
.verdict-reason--too_early { color: var(--text-muted); }
/* 52px thumbnail — under Meta's 64px signed-url ceiling, no upscaling, no
   thumbnail-pipeline change needed. */
.creative-thumb--verdict-row {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 6px;
  object-fit: cover;
}
/* Numbers block — two figures, no labels (labels moved to the header row). */
.leaderboard-row--verdict .leaderboard-numbers--verdict {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.leaderboard-row--verdict .leaderboard-numbers--verdict .num-item {
  display: block;
  min-width: 56px;
  text-align: right;
}
.leaderboard-row--verdict .leaderboard-numbers--verdict .num-item .value {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Impressions/clicks/CTR/CPC block inside the expand detail. */
.verdict-extra-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.verdict-extra-stats .num-item { display: block; }
.verdict-extra-stats .num-item .label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.verdict-extra-stats .num-item .value { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.verdict-guessed-tag-wrap { padding: 6px 0; }
/* Mobile — verdict rows get their own two-column numbers grid (scoped, so
   the shared .leaderboard-numbers mobile rule stays untouched — spec §2.1). */
@media (max-width: 620px) {
  .leaderboard-row--verdict .leaderboard-numbers--verdict {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
  }
  .leaderboard-header-row--verdict { grid-template-columns: 20px 40px 40px 1fr auto auto; gap: 8px; font-size: 10px; }
  .verdict-group-header { flex-wrap: wrap; }
  .verdict-extra-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Part 58 UI brief §C/§D — Build Visual action + shot strip ---- */
.visual-action-wrap { display: inline-flex; align-items: center; gap: 8px; }
.visual-action-hint { color: var(--text-muted); font-size: 12px; }
.visual-strip-mount { margin-top: 16px; }
.visual-strip-header { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.visual-strip-state { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 3px; background: var(--border); color: var(--text-secondary); }
.visual-strip-state--running { background: #dceffc; color: #114b73; }
.visual-strip-state--awaiting_approval { background: #fef2c7; color: #7a4d10; }
.visual-strip-state--done { background: #d3f0e0; color: #14522f; }
.visual-strip-state--failed, .visual-strip-state--abandoned { background: #fbe6df; color: #7a2010; }
.visual-strip-remaining { color: var(--text-muted); font-size: 12px; }
.visual-strip-warning { padding: 6px 10px; margin: 6px 0; background: #fdf5f3; border-left: 3px solid #b1341e; color: #7a2010; font-size: 13px; }
.visual-strip-loading, .visual-strip-error { padding: 16px; color: var(--text-muted); font-size: 13px; }
.visual-strip-error-inline { padding: 6px 10px; margin-bottom: 8px; background: #fdf5f3; color: #7a2010; font-size: 12px; border-radius: 4px; }
/* §11.6 — horizontal scroll on mobile. */
.visual-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 12px; overflow-x: auto; padding: 8px 0 12px; }
.visual-shot { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card-bg, transparent); }
.visual-shot--must { border-left: 3px solid #d18a1e; }
.visual-shot--gen { border-left: 3px solid #158a4b; }
/* Part 75 §6 — plate has its own left border colour so must/gen/plate read
 * apart at a glance. Sits between the two hues; wins over --must when both
 * classes are present (visual-shot--plate applies to must-shoot + plateReady). */
.visual-shot--plate { border-left-color: #5b7cba; }
.visual-shot { position: relative; }
.visual-shot-plate-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.65); color: #fff;
}
.visual-shot-state--plate { color: #3f5f96; }
.visual-strip-plate-hint {
  padding: 6px 10px; margin: 6px 0;
  background: rgba(91, 124, 186, 0.08); border-left: 3px solid #5b7cba;
  color: var(--text-secondary); font-size: 12px;
}
/* Part 79 §4 — board-frame reuse (real image, no PLATE badge) and the
 * terminal scene card (no image, text panel, muted). */
.visual-shot--from-board { border-left-color: #5b7cba; }
.visual-shot-state--board { color: #3f5f96; }
.visual-shot--card { border-left-color: #888; opacity: 0.9; }
.visual-shot-state--card { color: var(--text-muted); }
.visual-shot-scene-card {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; aspect-ratio: 9/16;
  padding: 12px;
  background: repeating-linear-gradient(
    45deg,
    var(--surface-1, #f7f7f7),
    var(--surface-1, #f7f7f7) 12px,
    #eee 12px, #eee 24px
  );
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-primary); overflow: hidden;
}
.visual-shot-scene-card-head { display: flex; gap: 8px; align-items: center; }
.visual-shot-scene-card-n { font-weight: 700; color: var(--text-secondary); }
.visual-shot-scene-card-time { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.visual-shot-scene-card-camera { color: var(--text-primary); }
.visual-shot-scene-card-reason { color: #b1341e; font-size: 11px; }

/* Part 81 §1b — cap counter under the Generate button. */
.abx-cap-counter { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.abx-cap-line { color: var(--text-muted); }
.abx-cap-line--reached { color: #b1341e; font-weight: 600; }
.abx-cap-line--total-warn { color: #b1341e; }
.abx-cap-hint { color: var(--text-secondary); margin-left: 6px; font-weight: 400; }
/* Part 81 §2b — thumbnail-only marker. */
.abx-winner-thumb-only { font-size: 10px; margin-left: 4px; }

/* ============================================================
 * Part 87 §2 — pattern rollup rows (teardown + numbers). The three classes
 * were emitted but had no styling; rows collapsed into an underline wall.
 * ============================================================ */
.ai-brain-numbers-rollups { display: flex; flex-direction: column; gap: 10px; }
.ai-brain-numbers-rollup-row {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1, transparent);
}
.ai-brain-numbers-rollup-row.--cites-top { border-left-width: 3px; padding-left: 10px; }
.ai-brain-numbers-rollup-name {
  display: block;
  font-size: 14px; font-weight: 700;
  color: var(--text-primary); text-decoration: none;
  margin-bottom: 6px;
}
.ai-brain-numbers-rollup-name:hover { text-decoration: underline; }
.ai-brain-numbers-rollup-metrics {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ai-brain-numbers-rollup-metrics b { font-weight: 700; color: var(--text-secondary); }
.abx-metric i { font-style: normal; margin-left: 4px; font-size: 11px; }
.abx-metric-good b { color: var(--accent, #158a4b); }
.abx-metric-good i { color: var(--accent, #158a4b); }
.abx-metric-bad b { color: #b1341e; }
.abx-metric-bad i { color: #b1341e; }
.abx-metric--cites { color: var(--text-secondary); font-style: italic; }

/* Part 87 §5 — compact stat strip replacing the two full-width tiles. */
.abx-stat-strip {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 6px 0 10px;
  font-variant-numeric: tabular-nums;
}
.abx-stat-strip-item { display: inline-flex; align-items: baseline; gap: 6px; }
.abx-stat-strip-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.abx-stat-strip-value { font-size: 14px; color: var(--text-primary); font-weight: 600; }

/* Part 87 §7 — storyboard strip wraps into rows instead of scrolling. Height
 * cap keeps a 6-shot strip readable at 1440px. */
.visual-strip { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; grid-auto-flow: initial !important; overflow-x: visible !important; }
.visual-shot-img, .visual-shot-placeholder, .visual-shot-scene-card { max-height: 300px; }

/* Part 87 §8 / Part 88 §1 — Ask AI dock collapse. The whole aside is hidden
 * so the border/background/min-height/scroll box all vanish in one move.
 * Header Ask AI button (already present) is the only entry point when
 * collapsed; the loose in-dock chip is retired. */
body.ai-chat-dock-collapsed .abx-body--shell .abx-main.abx-shell {
  grid-template-columns: 260px minmax(0, 1fr);
}
body.ai-chat-dock-collapsed .abx-body--shell .abx-ask-dock { display: none; }

/* Part 87 §3a — muted attribution sub-line under section titles. */
.dash-section-source { margin: -6px 0 12px; font-size: 12px; color: var(--text-muted); }
/* Part 87 §3f — compact device split line under the Clarity tiles. */
.clarity-device { margin: 4px 0 8px; font-size: 12px; font-variant-numeric: tabular-nums; }

/* ============================================================
 * Part 88 §2a — working-set scope. The rows inside were sized for a 260px
 * rail; at pane width they left a large dead gap and huge blank band under
 * the heading. Override inside this scope only so the rail-context rules
 * keep working wherever else they are used.
 * ============================================================ */
.abx-working-set { max-width: 820px; margin: 0 0 16px; }
.abx-working-set .abx-rail-group-header { padding: 6px 0; }
.abx-working-set .abx-winning { padding: 0; }
.abx-working-set .abx-rail-list { margin-top: 4px; }
.abx-working-set .abx-win-row {
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.abx-working-set .abx-win-row .abx-win-row-body { min-width: 0; }
.abx-working-set .abx-win-row .abx-win-row-meta { justify-self: end; text-align: right; }
.abx-working-set .abx-batches { display: none; } /* moved back to rail (§3) */

/* ============================================================
 * Part 83 §3/§4 — richer pending copy + stale-worker banner.
 * ============================================================ */
/* Part 85 §5 — determinate board progress + typical-frame line. */
.visual-strip-count { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
.visual-strip-progress {
  height: 4px; background: var(--surface-2, #e6e6e6);
  border-radius: 4px; overflow: hidden;
  margin: 6px 0 2px;
}
.visual-strip-progress-fill {
  height: 100%;
  width: calc(var(--done) / var(--total) * 100%);
  background: var(--accent, #158a4b);
  transition: width 300ms var(--ease);
  border-radius: 4px;
}
.visual-strip-typical { font-size: 11px; color: var(--text-muted); margin: 0 0 4px; }
/* Elapsed-time span the shared ticker updates in-place. */
.visual-shot-elapsed { font-variant-numeric: tabular-nums; }

.visual-strip-worker-stale {
  padding: 6px 10px; margin: 6px 0;
  background: #fdf5f3; border-left: 3px solid #b1341e;
  color: #7a2010; font-size: 12px;
}

/* ============================================================
 * Part 84 — motion & polish. All motion inherits the global
 * `prefers-reduced-motion: reduce` kill switch at styles.css:213.
 * Transform/opacity/color only; nothing that reflows.
 * ============================================================ */

/* 1a — images fade in on decode. Wired from JS: class is set at render
 * time, `.is-loaded` is added on the `load` event (and immediately for
 * cached images). */
.abx-img-in { opacity: 0; transition: opacity 220ms var(--ease); }
.abx-img-in.is-loaded { opacity: 1; }

/* 1b — staggered card entry. Cap delay index at 9 so a ten-shot board
 * finishes appearing within ~600ms of the first card. */
@keyframes abx-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.abx-stagger > * {
  animation: abx-card-in 200ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* 1c — pane cross-fade in only. Outgoing pane is replaced without an
 * out-transition; a fade-in on the new pane reads as smooth without
 * holding stale content. */
@keyframes abx-pane-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.abx-pane-view { animation: abx-pane-in 160ms var(--ease) both; }

/* 1d — skeletons: aspect-correct shimmer that keeps the layout stable
 * once the image lands. Sized to 9:16 by default (storyboard + shot
 * cells); overridable per host. */
@keyframes abx-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.abx-skeleton {
  aspect-ratio: 9/16;
  background: linear-gradient(
    100deg,
    var(--surface-1, #f0f0f0) 30%,
    var(--surface-2, #e6e6e6) 50%,
    var(--surface-1, #f0f0f0) 70%
  );
  background-size: 200% 100%;
  animation: abx-shimmer 1.4s linear infinite;
  border-radius: 4px;
}

/* 2a — buttons acknowledge the press + async is-busy state. */
.abx-btn { transition: transform 80ms var(--ease), background-color 140ms var(--ease); }
.abx-btn:active:not(:disabled) { transform: scale(0.98); }
.abx-btn.is-busy {
  position: relative;
  color: transparent !important;
}
.abx-btn.is-busy::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--text-primary);
  animation: abx-spin 700ms linear infinite;
}

/* 2b — job strip badges: colour + one-time completion pulse. */
.visual-strip-state { transition: background-color 200ms var(--ease), color 200ms var(--ease); }
@keyframes abx-badge-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.visual-strip-state--done,
.visual-strip-state--awaiting_approval {
  animation: abx-badge-pulse 320ms var(--ease-spring);
}

/* 2c — small badges pop in. */
@keyframes abx-badge-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: none; }
}
.abx-idea-badge,
.visual-shot-plate-badge,
.abx-sb-cell-badge {
  animation: abx-badge-in 180ms var(--ease-spring) both;
}

/* 2d — rail row selection transitions. */
.abx-rail-row {
  transition: background-color 140ms var(--ease), border-color 140ms var(--ease);
}
@keyframes abx-check-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.abx-winner-check-input:checked + .abx-winner-check-box {
  animation: abx-check-pop 120ms var(--ease-spring);
}

/* 3a — lightbox open/close. */
.abx-sb-lightbox { animation: abx-lightbox-in 140ms var(--ease) both; }
.abx-sb-lightbox img { animation: abx-lightbox-img-in 180ms var(--ease-spring) both; }
@keyframes abx-lightbox-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes abx-lightbox-img-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* 3c — idea card hover lift, grid only (detail-pane card is not a
 * click target and should stay put). */
.abx-idea-card { transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.abx-idea-grid .abx-idea-card:hover,
.abx-list .abx-idea-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.abx-idea-detail .abx-idea-card:hover {
  transform: none; box-shadow: none;
}
.visual-shot.is-blocked { border-left-color: #b1341e; }
.visual-shot.is-approved { box-shadow: 0 0 0 2px #158a4b40 inset; }
.visual-shot.is-dropped { opacity: 0.55; }
.visual-shot-img, .visual-shot-placeholder { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; background: var(--border); }
.visual-shot-placeholder { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-muted); }
.visual-shot-placeholder--must-shoot { background: #fef7ec; }
.visual-shot-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.visual-shot-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.visual-shot-n { font-weight: 700; color: var(--text-secondary); }
.visual-shot-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 3px; }
.visual-shot-label--gen { background: #d3f0e0; color: #14522f; }
.visual-shot-label--must { background: #fef2c7; color: #7a4d10; }
.visual-shot-block-reason { font-size: 11px; color: #b1341e; }
.visual-shot-time { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.visual-shot-camera { color: var(--text-primary); font-size: 12px; }
.visual-shot-dialogue { color: var(--text-secondary); font-size: 12px; font-style: italic; }
.visual-shot-foot { display: flex; justify-content: flex-end; }
.visual-shot-state { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 3px; background: var(--border); color: var(--text-secondary); }
.visual-shot-state--completed { background: #d3f0e0; color: #14522f; }
.visual-shot-state--blocked, .visual-shot-state--nsfw, .visual-shot-state--failed { background: #fbe6df; color: #7a2010; }
.visual-shot-actions { display: flex; flex-wrap: wrap; gap: 4px; }

/* Part 58 chunk 4 §3 — idea-visual engine styles.
   Mirror .visual-strip / .visual-shot so the idea-visual strip and the
   shot-board strip read as siblings. `.abx-visual-idea-generate` gets its
   button styling from `abx-btn` (added in visual.js's injector) — no new
   button rule here. */
.visual-idea-strip { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.visual-idea-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* auto-fill with a floor: 1 variant reads at ~78px rather than stretching to
   a third of the card width; 3 fit at card width; 4 wrap evenly. (Part 58 UI polish §5) */
.visual-idea-variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.visual-idea-variant { position: relative; padding: 0; border: 1px solid var(--border); background: var(--border); border-radius: 6px; cursor: pointer; overflow: hidden; aspect-ratio: 9 / 16; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 18px; }
.visual-idea-variant img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.visual-idea-variant:hover { border-color: var(--text-secondary); }
.visual-idea-variant.is-selected, .visual-idea-variant.is-picked { box-shadow: 0 0 0 2px #158a4b inset; border-color: #158a4b; }
.visual-idea-variant.is-pending, .visual-idea-variant.is-failed { cursor: default; }
.visual-idea-variant.is-failed { color: #b1341e; }
.visual-idea-status, .visual-idea-hint, .visual-idea-warn { color: var(--text-secondary); font-size: 12px; margin-top: 6px; }
.visual-idea-error { color: #b1341e; font-size: 12px; margin-top: 6px; }
.visual-idea-loading { padding: 12px; color: var(--text-muted); font-size: 12px; }
/* --sm shrinks the label only. The 44px min-height on .abx-btn is a deliberate
   touch target that already overrides a padding shrink, so setting padding here
   was a no-op that read as inconsistency. (Part 58 UI polish §6) */
.abx-btn--sm { font-size: 11px; }
.abx-btn--secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
/* §B — reference-frame modal + gallery */
.visual-ref-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 900; }
.visual-ref-modal-inner { background: var(--body-bg, #fff); padding: 16px; border-radius: 10px; max-width: 640px; width: 90vw; display: flex; flex-direction: column; gap: 10px; }
.visual-ref-video { width: 100%; max-height: 60vh; background: #000; }
.visual-ref-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.visual-ref-status { color: var(--text-muted); font-size: 12px; min-height: 16px; }
#visual-reference-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
.visual-ref-thumb { position: relative; margin: 0; }
.visual-ref-thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; background: var(--border); }
.visual-ref-thumb figcaption { font-size: 11px; padding-top: 4px; color: var(--text-secondary); }
.visual-ref-delete { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); color: #fff; border: 0; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; font-size: 12px; }
/* Part 58 addendum §B3 — keyframe preview in the promote modal (image, not video). */
.visual-ref-keyframe { width: 100%; max-height: 60vh; object-fit: contain; background: #000; }

/* ---- Part 57 §3 / Part 66 §1 — three-column shell (rail / main / ask ai).
 * `minmax(0, 1fr)` on the middle column (not `1fr`) so unbreakable strings
 * (ad names, URLs) can't blow the track out. `max-width: none` is scoped to
 * this shell only — the global 960/1180 caps are untouched. */
.abx-body--shell .abx-main.abx-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 380px;
  gap: 20px;
  max-width: none;
  margin: 0;
  padding: 16px 20px;
  align-items: start;
}
/* Part 66 §1 — rail, pane and ask-ai each scroll independently with their
 * own height so long rails don't push the pane off screen. */
.abx-body--shell .abx-rail,
.abx-body--shell .abx-pane,
.abx-body--shell .abx-ask-dock {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.abx-body--shell .abx-ask-dock {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  min-height: 480px;
  display: flex;
  flex-direction: column;
}
/* Part 66 §4 — the docked panel overrides. Static, fills the dock, no shadow,
 * no entrance animation. */
.ai-chat-panel--docked {
  position: static;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  box-shadow: none;
  border: 0;
  border-radius: inherit;
  animation: none;
}
.abx-body--shell .abx-topbar { max-width: none; }
.abx-body--shell .abx-topbar .abx-col.abx-header-inner { max-width: none; padding: 0 20px; }
.abx-body--shell .abx-stale {
  grid-column: 1 / -1;
  margin: 0 0 8px;
}
.abx-body--shell .abx-cold {
  grid-column: 1 / -1;
}
.abx-body--shell .abx-live-announce { grid-column: 1 / -1; }
/* Part 58 chunk 4 §1 — full-width siblings above the two-pane grid. Without
   grid-column, .abx-visual-caps-drawer auto-places into column 1 (320px rail
   track) and shifts every subsequent sibling, breaking the whole layout.
   .abx-probe-mount had the same latent bug — only hidden today because it
   renders `hidden` until "Probe Higgsfield" is clicked. */
.abx-body--shell .abx-visual-caps-drawer { grid-column: 1 / -1; }
.abx-body--shell .abx-visual-caps-warn--standalone { grid-column: 1 / -1; }
.abx-body--shell .abx-probe-mount        { grid-column: 1 / -1; }
/* Theme-aware capabilities drawer (was inline #666/#ddd/#fafafa on ai-brain.php). */
/* Padding/radius/margin aligned with sibling banners (.abx-stale, .abx-probe-mount,
   .abx-variation) — see Part 58 UI polish §3, §4. */
.abx-visual-caps-drawer { font-size: 12px; color: var(--text-secondary); padding: 10px 12px; border: 1px solid var(--border); background: var(--surface-2); margin: 0 0 16px; border-radius: 7px; }
.abx-visual-caps-drawer strong { color: var(--text-primary); }
.abx-visual-caps-drawer ul { margin: 4px 0 0 16px; padding: 0; }
/* Part 65 §3 — <details> summary uses existing tokens only; no new colours. */
.abx-visual-caps-drawer > summary { color: var(--text-primary); cursor: pointer; list-style: revert; }

/* Part 58 UI polish §1 — variation card image slot. Mirrors .abx-idea-image
   (styles.css:3249) but caps height so a full 9:16 at column width doesn't make
   the variation taller than the idea it derives from. */
.abx-variation-image { width: 100%; aspect-ratio: 9 / 16; max-height: 260px; overflow: hidden; border-radius: 6px; background: var(--border); }
.abx-variation-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abx-variation-thumb-fallback { opacity: .82; }

/* Part 58 UI polish §2 — winners with no pattern cited: read as unavailable
   without having to look at the checkbox. Class emitted conditionally by
   abx_winner_rail_row_html(). */
.abx-rail-row--blocked { opacity: .6; cursor: default; }
.abx-rail-row--blocked:hover { background: transparent; }
.abx-rail-row--blocked .abx-rail-row-title { color: var(--text-secondary); }
.abx-rail { display: block; }
.abx-rail-group { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1, transparent); margin-bottom: 12px; overflow: hidden; }
.abx-rail-group[open] > .abx-rail-group-header,
.abx-rail-group > details > summary.abx-rail-group-header { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.abx-rail-group-header { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; }
.abx-rail-group-label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.abx-rail-group-count { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.abx-rail-group-actions { padding: 6px 12px 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.abx-rail-list-wrap { padding: 0 8px 8px; }
.abx-rail-list { display: flex; flex-direction: column; gap: 2px; }
.abx-rail-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 6px;
  text-decoration: none; color: inherit;
  cursor: pointer;
  min-height: 44px;
}
.abx-rail-row:hover { background: var(--surface-2, rgba(0,0,0,0.04)); }
.abx-rail-row.is-selected { background: var(--accent-tint, rgba(0,120,200,0.08)); border-left: 3px solid var(--accent); padding-left: 7px; }
.abx-rail-row-title { font-size: 13px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.abx-rail-row-sub { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.abx-rail-row--winner { flex-direction: row; align-items: center; gap: 10px; padding: 6px 10px; }
.abx-rail-row--winner .abx-rail-row-body { flex: 1; background: transparent; border: 0; text-align: left; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: inherit; }
.abx-rail-row--winner .abx-rail-row-body:hover { background: transparent; }
.abx-rail-drawer-link { padding: 8px 12px 12px; }
.abx-pane { min-width: 0; }
.abx-pane-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
.abx-hdr-admin { font-size: 13px; color: var(--text-secondary); text-decoration: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; margin-right: 8px; }
.abx-hdr-admin:hover { color: var(--text-primary); border-color: var(--accent); }
.abx-batches { padding: 10px 12px; }
.abx-batches-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.abx-batches-select { width: 100%; }
/* Part 66 §1 responsive:
 *   < 1400px — Ask AI drops to a full-width row beneath main.
 *   < 1000px — single column; rail collapses (see .abx-rail--collapsible below).
 */
@media (max-width: 1400px) {
  .abx-body--shell .abx-main.abx-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .abx-body--shell .abx-ask-dock {
    grid-column: 1 / -1;
    max-height: 520px;
  }
}
@media (max-width: 1000px) {
  .abx-body--shell .abx-main.abx-shell { grid-template-columns: minmax(0, 1fr); }
  .abx-rail { order: 1; max-height: none; }
  .abx-pane { order: 2; max-height: none; }
  .abx-body--shell .abx-ask-dock { order: 3; }
}
/* Part 66 §2 — main-pane view containers. Structural only; content styling
 * lives on the reused ai-brain-* helper output. */
.abx-pane-view { padding: 4px 0 24px; }
.abx-pane-view--teardown,
.abx-pane-view--patterns,
.abx-pane-view--verdicts,
.abx-pane-view--numbers,
.abx-pane-view--batches { min-width: 0; }
.abx-pane-view > h2 { margin: 0 0 12px; font-size: 20px; }
.abx-rail-group--current-set { margin-bottom: 8px; }
/* Part 66 — is-current mirrors the existing :hover state; no new --accent spend. */
.abx-rail-external-link.is-current { border-color: var(--text-primary); color: var(--text-primary); background: var(--surface-2); }
.abx-idea-set--detail { padding: 0; }
.ai-brain-numbers-rollup-row--cites-top { border-left: 3px solid var(--border); padding-left: 8px; }

/* Part 66 §1 — sub-1000px rail becomes a <details> disclosure. When the rail
 * is rendered inside <details class="abx-rail--collapsible">, only the summary
 * shows until the user opens it. Above 1000px, force the details open so the
 * rail always shows regardless of markup. */
@media (min-width: 1001px) {
  details.abx-rail--collapsible > summary { display: none; }
  details.abx-rail--collapsible { display: contents; }
}

/* Part 57 — batch-idea preview inside the pane (no set_id yet). */
.abx-batch-idea-preview { padding: 20px; max-width: 640px; }
.abx-batch-idea-preview-title { margin: 0 0 8px; font-size: 20px; }
.abx-batch-idea-preview-line { color: var(--text-secondary); font-size: 15px; margin: 0 0 10px; }
.abx-batch-idea-preview-source { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; }
.abx-batch-idea-preview-hint { color: #b1341e; font-size: 12px; margin: 6px 0 16px; }
.abx-batch-idea-generate { padding: 8px 14px; font-size: 13px; font-weight: 600; }
.abx-jobstrip-preview { min-height: 20px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
button.abx-rail-row { background: transparent; border: 0; text-align: left; font: inherit; color: inherit; width: 100%; cursor: pointer; }

/* ---- Part 57 polish pass ---- */

/* §3b — one left edge for header, daterow, rail and pane. The prior override
 * only widened the header inner; the daterow-inner still capped at 720px and
 * centred, which visually detached the chips from the 20px shell inset below.
 * Both now share `padding: 0 20px; max-width: none`. */
.abx-body--shell .abx-topbar .abx-daterow-inner {
  max-width: none;
  padding: 0 20px;
  margin: 0;
}
/* Daterow container itself — remove the auto centring margin so the whole
 * row aligns with the shell. */
.abx-body--shell .abx-daterow { padding: 0; }

/* §4 — job strip goes to the left so the Ask AI launcher (bottom-right) does
 * not cover it. Do NOT raise the strip's z-index above the launcher — that
 * just swaps which one is unusable. */
.abx-jobstrip--global { right: auto; left: 16px; }

/* §5 — action bar padding was 12px 0. Inside the 320px rail that's flush
 * against both borders. Add horizontal inset matching the rest of the rail. */
.abx-action-bar-inner { padding: 12px; }
/* One horizontal inset for the whole rail. Rail groups already use 10px 12px
 * on their header; the list wrap was 0 8px 8px which put rows 4px off. Use
 * 12px everywhere so header + rows share one edge. */
.abx-rail-list-wrap { padding: 0 12px 12px; }
.abx-rail-group-actions { padding: 8px 12px 10px; }
.abx-rail-drawer-link { padding: 10px 12px 12px; }
.abx-batches { padding: 12px; }

/* §7 — empty pane state now reads as an instruction, not a rendering failure. */
.abx-pane-empty {
  max-width: 420px;
  padding: 24px;
  margin: 0;
  text-align: left;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
}

/* §8 — rail typography: three emphasis mechanisms on the group label
 * (weight 700 + uppercase + letter-spacing) outweighed the content. Drop the
 * weight; keep the uppercase and letter-spacing for the "index" affordance.
 * Row title drops from 600 to 500 so the pane content leads. */
.abx-rail-group-label { font-weight: 600; }
.abx-rail-row-title { font-weight: 500; }

/* §9b — Patterns / Reviews are external links to Admin, not collapsibles. */
.abx-rail-external-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  background: var(--surface-1, transparent);
}
.abx-rail-external-link:hover { border-color: var(--accent); color: var(--text-primary); }
.abx-rail-external-label { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.abx-rail-external-arrow { color: var(--text-muted); font-size: 13px; }

/* ---- Part 57 polish 2 §1 — single-idea detail layout ---- */
/* Two presentations, two rules, no shared CSS between them:
 *   .abx-idea-detail — one idea filling the pane (image left, body right,
 *                       storyboard strip full width beneath)
 *   .abx-idea-grid   — multi-card "Suggest concepts" preview (unchanged from
 *                       polish 1: repeat(auto-fill, minmax(240px, 300px)))
 * The card structure is identical in both — the wrapper decides layout. */
.abx-idea-detail {
  display: block;
  margin: 8px 0 24px;
}
.abx-idea-detail .abx-idea-card {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-areas:
    "image body"
    "storyboard storyboard";
  gap: 20px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
}
.abx-idea-detail .abx-idea-image { grid-area: image; aspect-ratio: 4 / 5; }
.abx-idea-detail .abx-idea-body {
  grid-area: body;
  padding: 20px 20px 20px 0;
  gap: 12px;
  align-content: start;
}
.abx-idea-detail .abx-idea-title { font-size: 22px; font-weight: 600; }
.abx-idea-detail .abx-idea-line { font-size: 16px; line-height: 1.55; }
.abx-idea-detail .abx-idea-source { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.abx-idea-detail .abx-idea-script-link {
  align-self: flex-start;
  margin-top: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
}
.abx-idea-detail .abx-idea-storyboard-strip {
  grid-area: storyboard;
  /* Part 68 §7.3 — filmstrip layout for the storyboard cells. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
/* Part 68 §7.3 — single storyboard cell (9:16 image, timing chip, beat text). */
.abx-sb-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-1);
  min-width: 0;
}
.abx-sb-cell-img,
.abx-sb-cell-media {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 0;
  cursor: zoom-in;
}
.abx-sb-cell-media {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: default;
}
.abx-sb-cell.is-cover { box-shadow: 0 0 0 2px #158a4b inset; border-color: #158a4b; }
.abx-sb-cell.is-failed { border-color: #b1341e; }
.abx-sb-cell.is-failed .abx-sb-cell-media--failed { color: #b1341e; }
.abx-sb-cell-beat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px 10px;
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.4;
  min-width: 0;
}
.abx-sb-cell-time {
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  color: var(--text-secondary);
}
.abx-sb-cell-text { color: var(--text-primary); }
.abx-sb-cell-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #158a4b;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  pointer-events: none;
}
.abx-sb-controls {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.abx-sb-cell:hover .abx-sb-controls,
.abx-sb-cell:focus-within .abx-sb-controls { display: flex; }
.abx-sb-cell-cover,
.abx-sb-cell-regen {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 11px;
  cursor: pointer;
}
.abx-sb-cell-cover:hover,
.abx-sb-cell-regen:hover { border-color: var(--text-secondary); }
/* Part 68 §7.1 — full-size lightbox for a single frame. Existing surface
 * tokens only, no new colours. */
.abx-sb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  padding: 24px;
  cursor: zoom-out;
}
.abx-sb-lightbox img {
  max-width: 96vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.abx-sb-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 18px;
  font-size: 16px;
  cursor: pointer;
}
.abx-idea-detail .abx-idea-beat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  min-width: 0;
}
.abx-idea-detail .abx-idea-beat-time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.abx-idea-detail .abx-idea-beat-text {
  color: var(--text-primary);
  line-height: 1.4;
}
/* Multi-card grid mode: storyboard is redundant — the compact stacked card
 * has no room for it. Hidden here so the single card renderer can emit it
 * unconditionally without polluting the preview. */
.abx-idea-grid .abx-idea-storyboard-strip { display: none; }
/* Below 900px, detail card falls back to stacked (image top, body below). */
@media (max-width: 900px) {
  .abx-idea-detail .abx-idea-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "image" "body" "storyboard";
  }
  .abx-idea-detail .abx-idea-image { aspect-ratio: 16 / 9; }
  .abx-idea-detail .abx-idea-body { padding: 16px; }
}

/* Part 57 polish 2 §3 — rail subheadings between the batch and set ideas. */
.abx-rail-subheading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 4px 6px;
  border-top: 1px solid var(--border);
}
.abx-rail-subheading:first-child { border-top: 0; padding-top: 6px; }
.abx-rail-subheading-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.abx-rail-subheading-close {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.abx-rail-subheading-close:hover { color: var(--text-primary); }
.abx-rail-subheading--secondary { border-top-style: dashed; }

/* Part 57 polish 2 §2 — saved-set row now carries a first-idea title for distinction. */
.abx-saved-set-first-title { display: block; color: var(--text-muted); font-size: 12px; font-style: italic; margin-top: 4px; }

/* Part 58 chunk 6 §5 — rules for classes emitted since chunk 5 with no styling.
   Both sit inside containers that already span, so absence was cosmetic only,
   but bin/check-css-parity.sh now catches this class of regression. */
.abx-visual-caps-warn { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--text-secondary); }
/* Part 65 §3 — standalone budget warn (rendered above the collapsed drawer)
   uses existing tokens; no top border since it isn't inside the drawer body. */
/* Part 65 Phase 2 folded item 3 — was `border` + `border-top` redundantly
   declared. Kept the full-border shorthand (the warn is a standalone box, not
   a divider) and dropped the extra border-top. */
.abx-visual-caps-warn--standalone { margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); border-radius: 7px; font-size: 12px; }
.visual-action-warn   { margin-left: 8px; font-size: 12px; color: var(--text-secondary); }

/* Part 59.1 §2 — saved-ideas grouping. Header sits above its rows; "Show older"
   disclosure uses the shared .abx-btn look but stays a plain summary. */
.abx-saved-set-group { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.abx-saved-set-group:first-child { margin-top: 0; }
.abx-saved-set-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px; }
.abx-saved-set-group-name { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.abx-saved-set-group-count { color: var(--text-muted); font-size: 12px; }
.abx-saved-set-group-list { display: flex; flex-direction: column; gap: 8px; }
.abx-saved-set-more { margin-top: 4px; }
.abx-saved-set-more-summary { cursor: pointer; color: var(--text-secondary); font-size: 12px; padding: 4px 2px; list-style: none; user-select: none; }
.abx-saved-set-more-summary::-webkit-details-marker { display: none; }
.abx-saved-set-more-summary:hover { color: var(--text-primary); }
.abx-saved-set-more[open] .abx-saved-set-more-summary { color: var(--text-primary); }
.abx-saved-set-more-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* ---- Part 59 §3c — unified controls for the ops page ---- */

/* Sticky section nav (§3b). Text-only, current section marked via :target. */
.ai-brain-section-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 10px 16px;
  margin: 0 0 20px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.ai-brain-section-nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.ai-brain-section-nav a:hover,
.ai-brain-section-nav a:focus-visible {
  color: var(--text-primary);
  outline: none;
  border-bottom-color: var(--accent);
}

/* One button style, primary / secondary distinction (§3c). */
.ai-brain-btn {
  display: inline-block;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ai-brain-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ai-brain-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.ai-brain-btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.ai-brain-btn--primary:disabled { opacity: 0.55; cursor: not-allowed; }
.ai-brain-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}
.ai-brain-btn--secondary:hover { background: var(--surface-2); }

/* Style native selects to match input fields (§3c). */
.ai-brain-select,
select.ai-brain-select {
  font: inherit;
  padding: 6px 10px;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ai-brain-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Field grid + help text under control (§3b). */
.ai-brain-upload-form--verdict .ai-brain-upload-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.ai-brain-field-help {
  display: block;
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.ai-brain-upload-help {
  margin-top: 2px;
}
.ai-brain-input {
  font: inherit;
  padding: 6px 10px;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ai-brain-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Placeholder label text (§2). */
.creative-thumb-placeholder {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 2px;
}
.creative-thumb-placeholder.creative-thumb--hero { font-size: 12px; }

/* Upload panel always open (§3b) — margin so it doesn't crowd the next section. */
.ai-brain-uploads-open { margin: 0 0 24px; }

/* ---- Part 61 §7 — Landing Pages (Clarity) panel ---- */
.clarity-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 8px 0 12px;
}
.clarity-tile {
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 12px 14px;
}
.clarity-tile-label {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 4px;
}
.clarity-tile-value {
  font-size: 20px;
  font-weight: 600;
}
.clarity-sub {
  margin: 20px 0 8px;
  font-size: 15px;
}
.clarity-window {
  font-size: 12px;
  margin: 4px 0 12px;
}
.clarity-partial {
  font-size: 12px;
  font-style: italic;
  margin: 0 0 8px;
}
.clarity-table {
  font-size: 13px;
}
.clarity-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-all;
  max-width: 320px;
}

/* ==========================================================================
   Part 65 Phase 2 (§7) — grid = scanning unit, detail = pick surface.
   DOM order (body → image → actions) already reordered in the template.
   These rules make grid cards uniform-height with title-first hierarchy,
   and turn the detail-view standalone hero into the strip's picked variant.
   ========================================================================== */

/* Grid card — title first + concept clamp for uniform height. The image
   drops to a small thumbnail (~64px) and sits inline with actions so the
   card scans without reading images. Ask + more-like-this hide entirely
   on the grid (moved to detail); Dismiss keeps its hover-reveal. */
.abx-idea-grid .abx-idea-card {
  padding: 12px;
  gap: 8px;
}
.abx-idea-grid .abx-idea-body { padding: 0; gap: 4px; }
.abx-idea-grid .abx-idea-title { font-size: 17px; }
.abx-idea-grid .abx-idea-line {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Grid: body stacks on top; image + actions form a horizontal foot row so
   the small thumb sits alongside the primary action (a reminder of a
   decision already made, per §7 mock). */
.abx-idea-grid .abx-idea-card { flex-direction: column; }
.abx-idea-grid .abx-idea-image {
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  flex: 0 0 auto;
}
.abx-idea-grid .abx-idea-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
/* Grid cards: no variant strip (moved to detail) and no Ask/MLT clutter. */
.abx-idea-grid .abx-idea-card .visual-idea-strip { display: none; }
.abx-idea-grid .abx-idea-card .visual-idea-actions { display: none; }
.abx-idea-grid .abx-idea-card .abx-ctx-ask { display: none; }
.abx-idea-grid .abx-idea-card .abx-mlt { display: none; }
/* Storyboard strip stays hidden in grid (existing rule already). */

/* Detail view — text column first, then the variant strip is the hero.
   The standalone image is redundant (the picked variant carries the green
   ring inline in the row per §7). Actions land at the bottom, primary
   first, matching pipeline order. Constrain the text column to a readable
   measure (~80ch) rather than letting concept run full page width. */
.abx-idea-detail .abx-idea-card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "body"
    "image"
    "strip"
    "actions"
    "storyboard";
  padding: 20px;
  gap: 16px;
}
.abx-idea-detail .abx-idea-body { grid-area: body; padding: 0; max-width: 80ch; }
.abx-idea-detail .abx-idea-image { grid-area: image; display: none; } /* picked variant is the hero */
.abx-idea-detail .visual-idea-strip { grid-area: strip; margin-top: 0; padding-top: 0; border-top: 0; }
.abx-idea-detail .abx-idea-actions {
  grid-area: actions;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.abx-idea-detail .abx-idea-storyboard-strip { grid-area: storyboard; }
/* Detail-context variant floor: ≥200px per §7. Grid context (if the strip
   ever appears there) keeps the original 78px floor via the selector at
   line 3537. */
.abx-idea-detail .visual-idea-variants {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

/* ---------- Part 67 — Teardown redesign (variant D · filmstrip) ---------- */
.aibrain-section-h {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 20px 0 10px;
}
.aibrain-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
}
.aibrain-kpi { display: flex; flex-direction: column; gap: 3px; }
.aibrain-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.aibrain-kpi-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.aibrain-kpi-delta { font-size: 12px; font-variant-numeric: tabular-nums; }

.aibrain-verdict-line {
  display: flex;
  gap: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 14px;
}
.aibrain-verdict-line-edge {
  flex: 0 0 3px;
  background: var(--accent);
  border-radius: 2px;
}
.aibrain-verdict-line-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.aibrain-verdict-line-body strong { color: var(--text-primary); font-weight: 700; }

.aibrain-filmstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.aibrain-filmstrip-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aibrain-filmstrip-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.aibrain-filmstrip-frame--empty { display: flex; align-items: flex-end; justify-content: flex-start; }
.aibrain-filmstrip-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aibrain-filmstrip-tc {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 2px 5px;
  border-radius: 4px;
}
.aibrain-filmstrip-label { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.aibrain-filmstrip-what { font-size: 12px; line-height: 1.4; color: var(--text-secondary); }

.aibrain-pattern-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.aibrain-pattern-chip {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 100%;
}
.aibrain-pattern-chip--present { background: rgba(27,175,122,0.10); border-color: rgba(27,175,122,0.35); }
.aibrain-pattern-chip--partial { background: var(--surface-1); }
.aibrain-pattern-chip--absent  { background: rgba(220,53,69,0.10); border-color: rgba(220,53,69,0.35); }
.aibrain-pattern-chip-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}
.aibrain-pattern-chip-name { font-weight: 600; font-size: 12px; }
.aibrain-pattern-chip-status { font-size: 11px; color: var(--text-secondary); }
.aibrain-pattern-chip-body {
  padding: 6px 12px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  border-top: 1px solid var(--border);
}
.aibrain-pattern-chip-head[aria-expanded="true"] { border-bottom: 1px solid var(--border); }

.aibrain-sr-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
}
.aibrain-sr-col { min-width: 0; }
.aibrain-sr-col ul { margin: 6px 0 0; padding-left: 18px; }
.aibrain-sr-col li { font-size: 13px; line-height: 1.5; margin-bottom: 4px; color: var(--text-primary); }
.aibrain-sr-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.aibrain-sr-h--good { color: var(--series-3); }
.aibrain-sr-h--bad  { color: var(--critical); }
@media (max-width: 620px) {
  .aibrain-sr-card { grid-template-columns: 1fr; }
}

.aibrain-fix-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.aibrain-fix-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
}
.aibrain-fix-card-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.aibrain-fix-card-fix { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.aibrain-fix-card-why { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }

/* Part 76 — idea status/verdict badges and Results section. */
.abx-idea-badge {
  display: inline-block; margin-left: 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 3px;
  vertical-align: middle;
}
.abx-idea-badge--shipped { background: #dfe8f8; color: #2b477d; }
.abx-idea-badge--shot    { background: #e6e6e6; color: #444; }
.abx-idea-badge--killed  { background: #e9dcdc; color: #7a2010; }
.abx-idea-badge--win     { background: #d3f0e0; color: #14522f; }
.abx-idea-badge--par     { background: #fef2c7; color: #7a4d10; }
.abx-idea-badge--loss    { background: #fdd6cd; color: #7a2010; }

.abx-idea-status { margin-top: 8px; font-size: 12px; }
.abx-idea-status-summary { cursor: pointer; color: var(--text-secondary); user-select: none; }
.abx-idea-status-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 10px;
  padding: 8px; margin-top: 6px;
  background: var(--surface-1, #f7f7f7); border-radius: 6px;
}
.abx-idea-status-form label { display: flex; flex-direction: column; font-size: 11px; color: var(--text-secondary); gap: 2px; }
.abx-idea-status-form input,
.abx-idea-status-form select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.abx-idea-status-msg { font-size: 11px; color: var(--text-muted); align-self: end; }
.abx-idea-status-outcome { grid-column: 1 / -1; margin: 4px 0 0; color: var(--text-secondary); }
/* Part 77 §3 — ad picker inside the status control. */
.abx-idea-status-picker-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.abx-idea-status-picker-label { font-size: 11px; color: var(--text-secondary); }
.abx-idea-status-picker {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 4px; background: #fff;
}
.abx-idea-status-picker-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px;
  align-items: center; padding: 4px 6px; font-size: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.abx-idea-status-picker-row:last-child { border-bottom: 0; }
.abx-idea-status-picker-row:hover { background: var(--surface-1, #f7f7f7); }
.abx-idea-status-picker-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.abx-idea-status-picker-spend { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.abx-idea-status-picker-date { font-size: 11px; font-variant-numeric: tabular-nums; }
.abx-idea-status-picker-empty { grid-column: 1 / -1; padding: 6px; font-size: 12px; }
.abx-idea-status-manual { grid-column: 1 / -1; }

.abx-pane-view--results { padding: 12px 16px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 6px; }
.abx-results-funnel { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; margin-top: 6px; }
.abx-results-funnel-label { color: var(--text-secondary); }
.abx-results-winrate, .abx-results-median { margin-top: 6px; font-size: 13px; }
.abx-results-empty { color: var(--text-muted); font-size: 12px; }
.abx-results-top { margin-top: 10px; }
.abx-results-top-h { font-size: 12px; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 4px; letter-spacing: 0.05em; }
.abx-results-top-row {
  display: grid; grid-template-columns: 1fr auto auto 1fr; gap: 8px;
  padding: 6px 8px; text-decoration: none; color: var(--text-primary);
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.abx-results-top-row:hover { background: var(--surface-1, #f7f7f7); }
.abx-results-top-title { font-weight: 600; }
.abx-results-top-cpa, .abx-results-top-ratio { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.abx-results-top-patterns { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }