/* meta_si.css — the Experiments (Meta-SI) section (#sec-meta_si): a read-only
   monitor of live ad experiments. Board of experiment cards → per-experiment
   Detail (tabs Verdict / Trends / Learnings).

   TOKENS ONLY — every color/space/radius is a var(--token) from theme.css; no
   hardcoded hex. The clay accent is DIRECTION / CHROME ONLY, never a trust-state
   color. Trust-state → semantic status token mapping (the iron rule):
     underpowered            → --warn    (amber)
     readable_effect         → --success (green)
     settled_null            → --msi-neutral (NEW warm-gray, derived below)
     hold_delivery_imbalanced→ --danger  (red)

   The clay-on-ivory layout mirrors the approved mockup
   (.superpowers/brainstorm/.../experiments-layout.html), re-themed onto the
   admin's three-tier token system. Light-only (dark not built this pass), but
   authored against semantic tokens so a future dark pass re-skins for free.
   Wide tables/matrix scroll inside their own overflow-x container; the section
   is responsive (the mockup's <=780px media query, copied at the bottom). */

/* NEW token: the warm-gray neutral for the settled_null trust state. Derived
   from the theme's warm-gray ramp (NOT a new hue) so it sits in the same family
   as --text-muted / --border. settled_null = "no real difference" — a calm,
   non-alarming gray, distinct from the amber/green/red of the other states. */
#sec-meta_si {
  --msi-neutral:      var(--c-gray-500);            /* warm-gray, from the ramp */
  --msi-neutral-tint: rgba(110, 108, 102, 0.12);    /* c-gray-500 @12%, soft fill */

  /* ── Hybrid design pass (spec decision #36) — the CONSOLE base ───────────
     The working surfaces (board / feed / inspect / fill / pipeline) sit on the
     warm-gray ramp, SQUARE UP, and go FLAT: --radius-lg/--radius-md collapse to
     --radius-sm and --shadow-sm to none. The EDITORIAL human moments (masthead,
     verdict, decision card, receipt) opt back into serif-on-paper below and are
     deliberately left on --radius-xl (16px) + --shadow-md (a real soft shadow) —
     those two tokens are NOT remapped here, so the decision/receipt cards keep
     their rounded, lifted "report on paper" finish. That Console/Editorial split
     is what Alex approved at the mockup checkpoint. Token-only (theme ramp vars).
     a11y: --text-faint is nudged one ramp step (c-gray-450 -> c-gray-500) inside
     the section so the quiet eyebrows / identifiers / mono stamps clear WCAG AA
     4.5:1 on the darker console surfaces (c-gray-450 landed at ~3.1-3.5:1). */
  --bg:             var(--c-gray-75);
  --surface:        var(--c-gray-25);
  --surface-raised: var(--c-gray-0);
  --surface-sunken: var(--c-gray-100);
  --surface-hover:  var(--c-gray-100);
  --border:         var(--c-gray-200);
  --border-strong:  var(--c-gray-300);
  --text-faint:     var(--c-gray-500);   /* a11y: clear AA on the console surfaces */
  --radius-lg: var(--radius-sm);         /* console surfaces square up */
  --radius-md: var(--radius-sm);
  --shadow-sm: none;                     /* console panels are flat */
}

/* ── hero + freshness ──────────────────────────────────────────────────── */
#sec-meta_si .content { max-width: 1140px; }
#sec-meta_si .msi-hero { margin-bottom: var(--space-2); }
#sec-meta_si .msi-hero-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
#sec-meta_si .msi-title {
  font-family: var(--font-serif); font-weight: var(--fw-semibold);
  font-size: var(--text-4xl); letter-spacing: -.022em; line-height: 1.08; margin: 0;
}
#sec-meta_si .msi-fresh {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-muted);
}
#sec-meta_si .msi-dot {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--success); flex: none;
}
#sec-meta_si .msi-dot.is-stale { background: var(--warn); }
#sec-meta_si .msi-dot.is-failed { background: var(--danger); }
#sec-meta_si .msi-sub {
  font-size: var(--text-lg); line-height: 1.5; color: var(--text-muted);
  max-width: 62ch; margin: var(--space-3) 0 var(--space-5);
}
#sec-meta_si .msi-sample-flag {
  display: inline-block; background: var(--surface-sunken);
  border: 1px solid var(--border); color: var(--text-muted);
  font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-xs);
  margin-bottom: var(--space-4);
}

/* ── section labels (uppercase eyebrow) ────────────────────────────────── */
#sec-meta_si .msi-label {
  font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}

/* ════════════════════════════════════════════════════════════════════════
   BOARD CARD — RECOMMENDED-MOCKUP.html (calm/Anthropic). Borderless at rest,
   lift on hover. A fixed-track grid keeps slot N aligned across every card; the
   1fr slack sits under the signal so the progress bar pins to a shared baseline.
   The top-pinned SERIF finding is the one loud thing. Semantic color lives ONLY
   in the chip + the bar fill + the freshness dot (locked #6) — no left rail, no
   colored finding/signal text. All colors are theme.css tokens (no raw hex).
   ════════════════════════════════════════════════════════════════════════ */
#sec-meta_si .msi-board {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-6);
}
#sec-meta_si .msi-empty {
  color: var(--text-muted); font-size: var(--text-base);
  padding: var(--space-6) 0;
}

/* ── card ──────────────────────────────────────────────────────────────── */
#sec-meta_si .msi-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer;
  display: grid; grid-template-rows: auto auto auto auto 1fr auto; row-gap: var(--space-2);
  min-height: 0;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
#sec-meta_si .msi-card:hover {
  transform: none; box-shadow: none;
  border-color: var(--accent); background: var(--surface-raised);
}
#sec-meta_si .msi-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 1 — eyebrow: ID in bold tracked-caps (an identifier) + name sentence-case
   faint (preserves the word-shape operators scan by) — never competes with the
   hero. Clamps to two lines. */
#sec-meta_si .msi-name {
  font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--text-faint);
  letter-spacing: .01em; margin: 0; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#sec-meta_si .msi-name .msi-id {
  font-weight: var(--fw-bold); letter-spacing: .06em; color: var(--text-muted); margin-right: 1px;
}

/* 2 — status chip (semantic color) + freshness, one quiet row */
#sec-meta_si .msi-meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
#sec-meta_si .msi-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 20px; padding: 0 10px; border-radius: var(--radius-xs);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
#sec-meta_si .msi-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor;
}
/* AA-passing chip text values (the *-700 / *-600 ramp steps). */
#sec-meta_si .msi-chip.collecting { color: var(--accent-contrast-text); background: var(--accent-tint); }
#sec-meta_si .msi-chip.winner     { color: var(--c-green-700);          background: var(--c-green-50); }
#sec-meta_si .msi-chip.nodiff     { color: var(--c-blue-700);           background: var(--c-blue-50); }
#sec-meta_si .msi-chip.paused     { color: var(--c-amber-700);          background: var(--c-amber-50); }

#sec-meta_si .msi-fresh {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-faint);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
#sec-meta_si .msi-fresh .msi-fdot {
  width: 7px; height: 7px; border-radius: var(--radius-full); flex: none;
}
#sec-meta_si .msi-fresh.live  .msi-fdot { background: var(--c-green-500); }
#sec-meta_si .msi-fresh.stale .msi-fdot { background: var(--c-amber-500); }
/* strict #6: the amber DOT carries staleness; the age text stays neutral. */
#sec-meta_si .msi-fresh.stale .msi-age { color: var(--text-muted); }

/* 3 — THE HERO: the finding, set in serif like a stated conclusion. One weight;
   the number lives in the words, not a colored span (locked #6). Top-pinned. */
#sec-meta_si .msi-finding {
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--text-md); line-height: 1.35; letter-spacing: 0;
  color: var(--text); margin: 0; align-self: start; min-height: 0; text-wrap: balance;
}

/* 4 — signal: how trustworthy the finding is. Names the leading arm ONLY when
   the hero didn't. Never restates the number. No semantic color. */
#sec-meta_si .msi-signal {
  font-size: var(--text-sm); color: var(--text-muted); margin: 0; min-height: 0;
}

/* 5 — slack: the 1fr row that pins the progress bar to a shared baseline. */
#sec-meta_si .msi-slack { min-height: 0; }

/* 6 — progress: thin bar = the board's shared rhythm. The fill carries the only
   other semantic color. Honest fills: neutral null, hatched paused. */
#sec-meta_si .msi-progress { display: grid; row-gap: 7px; }
#sec-meta_si .msi-track {
  height: 4px; background: var(--surface-sunken); border-radius: var(--radius-full); overflow: hidden;
}
#sec-meta_si .msi-fill { height: 100%; border-radius: var(--radius-full); }
#sec-meta_si .msi-fill.collecting { background: var(--accent); }
#sec-meta_si .msi-fill.winner     { background: var(--c-green-500); }
/* a settled null is not a "win" — neutral gray fill. */
#sec-meta_si .msi-fill.nodiff     { background: var(--border-strong); }
/* paused — hatched amber, signalling "held / not trustworthy". */
#sec-meta_si .msi-fill.paused {
  background: repeating-linear-gradient(45deg,
    var(--c-amber-500) 0 3px, var(--c-amber-600) 3px 6px);
}
#sec-meta_si .msi-pbar {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: var(--text-sm); color: var(--text-faint);
}
#sec-meta_si .msi-pct { color: var(--text-muted); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
/* winner's "N% · powered" gets the only emphasis on the progress row (the green
   chip + full green bar carry the color; bold weight carries the celebration). */
#sec-meta_si .msi-pct.done { font-weight: var(--fw-semibold); }
#sec-meta_si .msi-view {
  color: var(--accent-contrast-text); font-weight: var(--fw-semibold);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
#sec-meta_si .msi-card:hover .msi-view { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  #sec-meta_si .msi-card, #sec-meta_si .msi-view { transition: none; }
}

/* ── trust-state pill (DETAIL VIEW — kept; the verdict tab + meter use it) ── */
#sec-meta_si .msi-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  padding: 3px 9px; border-radius: var(--radius-full);
}
#sec-meta_si .msi-pill.s-warn    { background: var(--warn-tint); color: var(--c-amber-700); }
#sec-meta_si .msi-pill.s-success { background: var(--success-tint); color: var(--success); }
#sec-meta_si .msi-pill.s-neutral { background: var(--msi-neutral-tint); color: var(--msi-neutral); }
#sec-meta_si .msi-pill.s-danger  { background: var(--danger-tint); color: var(--danger); }

/* ── sample meter (NET-NEW; fill bound to trust_state) — the verdict hero's
   prominent confidence bar (detail-mockup.html: a 6px track + a two-part cap). */
#sec-meta_si .msi-meter { margin: 0; }
#sec-meta_si .msi-meter-block { margin: 0 0 var(--space-6); }
#sec-meta_si .msi-meter-track {
  height: 6px; background: var(--surface-sunken);
  border-radius: var(--radius-full); overflow: hidden;
}
#sec-meta_si .msi-meter-fill {
  height: 100%; border-radius: var(--radius-full); min-width: 3px;
  background: var(--border-strong);
}
/* FILL COLOR = trust_state (NOT the accent). */
#sec-meta_si .msi-meter-fill.s-warn    { background: var(--warn-line); }
#sec-meta_si .msi-meter-fill.s-success { background: var(--success-line); }
#sec-meta_si .msi-meter-fill.s-neutral { background: var(--border-strong); }
#sec-meta_si .msi-meter-fill.s-danger  { background: var(--danger); }
#sec-meta_si .msi-meter-cap {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: 12.5px; color: var(--text-muted); margin-top: var(--space-2);
}
#sec-meta_si .msi-meter-cap .num { color: var(--text); }
#sec-meta_si .msi-meter-eta {
  font-size: var(--text-xs); color: var(--text-faint); margin-top: 3px;
}

/* ── VERDICT HERO (detail-mockup.html) — the pill+toggle row, the SERIF
   headline (a stated conclusion, never a semibold sans), and the "why" line.
   Semantic color lives ONLY in the pill (never on the serif hero/body). */
#sec-meta_si .msi-vhead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-6); margin-bottom: var(--space-2); flex-wrap: wrap;
}
#sec-meta_si .msi-verdict {
  font-family: var(--font-serif); font-weight: var(--fw-regular);
  font-size: var(--text-4xl); line-height: 1.16; letter-spacing: -.016em;
  color: var(--text); margin: var(--space-4) 0 var(--space-3);
  max-width: 24ch; text-wrap: balance;
}
#sec-meta_si .msi-why {
  font-size: var(--text-md); line-height: 1.6; color: var(--text-muted); margin: 0 0 var(--space-5);
}
#sec-meta_si .msi-why b { color: var(--text); font-weight: var(--fw-semibold); }

/* section block eyebrow (evidence / matrix / chart panels). */
#sec-meta_si .blk-label {
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--space-3);
}

/* ── per-arm EVIDENCE ROWS (board-language, not a table) ─────────────────── */
#sec-meta_si .msi-arms { margin: 0; }
#sec-meta_si .arm {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: var(--space-1) var(--space-3); padding: 11px 0;
  border-top: 1px solid var(--border);
}
#sec-meta_si .arm:first-child { border-top: none; }
/* WINNER row — unmistakable at a glance: a soft green-tint plaque (inset via
   negative margin so it reads as a highlighted band, not a full-width block) +
   bold name + green CPA + a Winner tag + a green relative-cpa bar. */
#sec-meta_si .arm.win {
  background: var(--success-tint); border-top-color: transparent;
  border-radius: var(--radius-md);
  margin: 0 calc(var(--space-3) * -1); padding: 11px var(--space-3);
}
#sec-meta_si .arm.win + .arm { border-top-color: transparent; }
#sec-meta_si .arm .an { font-size: var(--text-md); color: var(--text); }
#sec-meta_si .arm.win .an { font-weight: var(--fw-semibold); }
#sec-meta_si .arm .code {
  font-size: var(--text-xs); color: var(--text-faint); margin-left: var(--space-2);
}
#sec-meta_si .arm .tag {
  font-size: 10px; font-weight: var(--fw-semibold); color: var(--success);
  background: var(--success-tint); border-radius: var(--radius-xs);
  padding: 1px 6px; margin-left: var(--space-2); letter-spacing: .03em;
  text-transform: uppercase;
}
#sec-meta_si .arm .cpa {
  font-size: var(--text-lg); font-weight: var(--fw-semibold);
  color: var(--text); text-align: right; font-family: var(--font-mono);
}
#sec-meta_si .arm.win .cpa { color: var(--success); }
#sec-meta_si .arm .sub {
  grid-column: 1 / -1; display: flex; gap: var(--space-4);
  font-size: 11.5px; color: var(--text-faint);
}
#sec-meta_si .arm .track {
  grid-column: 1 / -1; height: 3px; background: var(--surface-sunken);
  border-radius: var(--radius-full); overflow: hidden; margin-top: 2px;
}
#sec-meta_si .arm .track span {
  display: block; height: 100%; background: var(--border-strong);
  border-radius: var(--radius-full);
}
#sec-meta_si .arm.win .track span { background: var(--success-line); }
#sec-meta_si .num, #sec-meta_si .mono {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}

/* ── detail ────────────────────────────────────────────────────────────── */
#sec-meta_si .msi-detail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
#sec-meta_si .msi-crumb {
  font-size: var(--text-sm); color: var(--text-muted);
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
}
#sec-meta_si .msi-crumb b { color: var(--text); }
#sec-meta_si .msi-back {
  background: none; border: 0; font: inherit; color: var(--accent-contrast-text);
  cursor: pointer; padding: 0; font-weight: var(--fw-semibold);
}
#sec-meta_si .msi-back:hover { text-decoration: underline; }

/* tab bar */
#sec-meta_si .msi-tabs {
  display: flex; gap: var(--space-1); padding: var(--space-3) var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
#sec-meta_si .msi-tab {
  border: 0; background: none; font: inherit; cursor: pointer;
  color: var(--text-muted); font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-3); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
#sec-meta_si .msi-tab:hover { color: var(--text); }
#sec-meta_si .msi-tab.is-active { color: var(--accent-contrast-text); border-bottom-color: var(--accent); }

#sec-meta_si .msi-dbody { padding: var(--space-5); }
#sec-meta_si .msi-dhead {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4);
}
/* attribution toggle (reports filter-select idiom, rendered as a segmented control) */
#sec-meta_si .msi-attr { text-align: right; }
#sec-meta_si .msi-attr-label {
  font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); font-weight: var(--fw-semibold); margin-bottom: 5px;
}
#sec-meta_si .msi-toggle {
  display: inline-flex; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); overflow: hidden; font-size: var(--text-sm);
}
#sec-meta_si .msi-toggle button {
  border: 0; background: var(--surface); padding: 7px 13px; font: inherit;
  color: var(--text-muted); cursor: pointer; font-weight: var(--fw-semibold);
}
#sec-meta_si .msi-toggle button.is-on { background: var(--accent-tint); color: var(--accent-contrast-text); }
#sec-meta_si .msi-toggle button + button { border-left: 1px solid var(--border-strong); }

/* labeled AI-commentary block (narrative) — a calm --accent-tint panel
   (detail-mockup.html): the tag on its own line, muted body below. */
#sec-meta_si .msi-ai {
  background: var(--accent-tint); border: 0; border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4); margin: var(--space-7) 0 0;
}
#sec-meta_si .msi-ai .msi-ai-tag {
  display: block; font-size: 10px; font-weight: var(--fw-semibold);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-contrast-text); margin-bottom: var(--space-2);
}
#sec-meta_si .msi-ai p {
  margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.55;
}

/* a degraded / pending notice (last-click pending; NOT an error) */
#sec-meta_si .msi-pending {
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-4);
  color: var(--text-muted); font-size: var(--text-base);
}

#sec-meta_si .msi-grid2 {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-8);
  align-items: start; margin-top: var(--space-2);
}
/* ── lower-triangular Holm HEATMAP (detail-mockup.html) — rounded sunken cells;
   significant → success-tint + a success outline; gap% bold on top, Holm p
   muted below. The lower-triangular LOGIC + all 3 modes are unchanged (tested);
   only the cells are restyled. */
#sec-meta_si .msi-matrix-wrap { overflow-x: auto; }
#sec-meta_si table.msi-matrix { border-collapse: separate; border-spacing: 4px; margin: 0; }
#sec-meta_si .msi-matrix td, #sec-meta_si .msi-matrix th { padding: 0; }
#sec-meta_si .msi-mh {
  font-size: var(--text-xs); color: var(--text-faint); text-align: right;
  font-weight: var(--fw-medium); padding: 2px 6px; white-space: nowrap;
}
#sec-meta_si .msi-cell {
  width: 82px; min-height: 52px; border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: var(--text-xs); padding: 4px; gap: 2px;
  background: var(--surface-sunken); border: 0;
}
#sec-meta_si .msi-cell .msi-cell-gap {
  font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text);
}
#sec-meta_si .msi-cell .msi-cell-p { font-size: 10.5px; color: var(--text-muted); }
/* significant → success tint + outline; clay is never a state color here. */
#sec-meta_si .msi-cell.is-sig {
  background: var(--success-tint); outline: 1px solid var(--success-line);
}
#sec-meta_si .msi-cell.is-sig .msi-cell-gap { color: var(--success); }
/* not-yet-judged (underpowered): hatched empty cell. */
#sec-meta_si .msi-cell.is-empty {
  color: var(--text-faint); background: repeating-linear-gradient(45deg,
    var(--surface-sunken), var(--surface-sunken) 6px,
    var(--surface-hover) 6px, var(--surface-hover) 12px);
}
#sec-meta_si .msi-cell.is-na { background: transparent; border: 0; }
#sec-meta_si .msi-matrix-cap {
  color: var(--text-faint); font-size: 11.5px;
  margin-top: var(--space-3); max-width: 34ch;
}
/* 2-arm strip collapse */
#sec-meta_si .msi-strip {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  font-size: var(--text-base); padding: var(--space-4) 0;
}

/* ── footer strip (detail foot) — freshness left, link-outs pushed right ── */
#sec-meta_si .msi-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  align-items: center; margin-top: var(--space-6);
  padding-top: var(--space-4); border-top: 1px solid var(--border);
  font-size: var(--text-sm); color: var(--text-faint);
}
#sec-meta_si .msi-foot-spacer { flex: 1; }
#sec-meta_si .msi-foot .dot {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--success-line); display: inline-block; margin-right: 5px;
}
#sec-meta_si .msi-foot .dot.is-stale { background: var(--warn-line); }

/* ── link-outs ─────────────────────────────────────────────────────────── */
#sec-meta_si .msi-lnk {
  color: var(--accent-contrast-text); font-weight: var(--fw-semibold);
  text-decoration: none; font-size: var(--text-sm);
}
#sec-meta_si .msi-lnk:hover { text-decoration: underline; }

/* ── trends: chart PANELS (bordered --surface cards, eyebrow + context cap) ─ */
#sec-meta_si .msi-attr.msi-attr-left { text-align: left; margin-bottom: var(--space-5); }
#sec-meta_si .msi-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5) var(--space-4);
  margin-bottom: var(--space-5);
}
#sec-meta_si .msi-panel-cap {
  font-size: var(--text-sm); color: var(--text-faint);
  margin: 0 0 var(--space-4);
}
#sec-meta_si .msi-chart-wrap { position: relative; height: 280px; margin: 0; }
#sec-meta_si .msi-chart-empty, #sec-meta_si .msi-tab-empty {
  color: var(--text-muted); font-size: var(--text-base); padding: var(--space-6) 0;
}

/* ── learnings: designed rows (claim emphasis + tinted direction chip + tier
   badge + a muted tabular sub-line) — board/verdict language, not a table. */
#sec-meta_si .msi-learns { display: grid; gap: var(--space-3); }
#sec-meta_si .msi-learn {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}
#sec-meta_si .msi-learn-head {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
#sec-meta_si .msi-learn-claim {
  font-size: var(--text-md); color: var(--text); margin: 0;
  flex: 1 1 auto; min-width: 12ch; font-weight: var(--fw-medium);
}
#sec-meta_si .msi-chiplet {
  display: inline-flex; align-items: center; height: 20px; padding: 0 9px;
  border-radius: var(--radius-full); font-size: 10.5px; font-weight: var(--fw-semibold);
  letter-spacing: .02em; white-space: nowrap; flex: none;
}
#sec-meta_si .msi-chiplet.s-success { color: var(--success); background: var(--success-tint); }
#sec-meta_si .msi-chiplet.s-neutral { color: var(--msi-neutral); background: var(--msi-neutral-tint); }
#sec-meta_si .msi-tier {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  padding: 2px 8px; border-radius: var(--radius-xs); flex: none;
  background: var(--surface-sunken); color: var(--text-muted);
}
#sec-meta_si .msi-learn-stats {
  font-size: var(--text-sm); color: var(--text-faint); margin: var(--space-2) 0 0;
}

/* ── board masthead (self-contained "product" header, not a buried tab) ──── */
#sec-meta_si .msi-masthead { margin-bottom: var(--space-7); }

/* ── jobs banner (a doc→monitor job is mid-flight / awaiting confirm) ─────── */
#sec-meta_si #msi-jobs-banner:empty { display: none; }
#sec-meta_si .msi-jobs-alert {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  text-align: left; font: inherit; cursor: pointer;
  background: var(--accent-tint); border: 1px solid transparent;
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5); color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
#sec-meta_si .msi-jobs-alert:hover { border-color: var(--accent); }
#sec-meta_si .msi-jobs-alert:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#sec-meta_si .msi-jobs-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--accent); flex: none;
  animation: msi-jobpulse 1.6s ease-out infinite;
}
#sec-meta_si .msi-jobs-txt { font-size: var(--text-md); color: var(--text-muted); }
#sec-meta_si .msi-jobs-txt b { color: var(--text); font-weight: var(--fw-semibold); }
#sec-meta_si .msi-jobs-go {
  margin-left: auto; color: var(--accent-contrast-text);
  font-weight: var(--fw-semibold); font-size: var(--text-sm); white-space: nowrap;
}
@keyframes msi-jobpulse { 0% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; } }

/* ════════════════════════════════════════════════════════════════════════
   PROCESSING STEPPER (SIGNATURE) — port of detail-mockup.html. Labeled steps
   with done/active/pending/blocked dots, connector lines, a restrained pulse
   on the ACTIVE step only, and a reduced-motion guard. Read-only mirror.
   ════════════════════════════════════════════════════════════════════════ */
#sec-meta_si #msi-view-stepper .msi-crumb {
  border: 0; background: none; padding: 0 0 var(--space-5);
}
#sec-meta_si .stepper { max-width: 560px; }
#sec-meta_si .stephead {
  font-family: var(--font-serif); font-size: var(--text-3xl);
  font-weight: var(--fw-regular); margin: 0 0 var(--space-1);
}
#sec-meta_si .stepsub { font-size: var(--text-base); color: var(--text-muted); margin: 0 0 var(--space-6); }
#sec-meta_si .stepsub b { color: var(--text); font-weight: var(--fw-semibold); }
#sec-meta_si .step {
  display: grid; grid-template-columns: 28px 1fr; gap: var(--space-4);
  padding-bottom: 22px; position: relative;
}
/* connector line (the rail between dots). Done → green rail. */
#sec-meta_si .step:not(.is-last)::before {
  content: ""; position: absolute; left: 13px; top: 26px; bottom: -4px;
  width: 2px; background: var(--border);
}
#sec-meta_si .step.done:not(.is-last)::before { background: var(--success-line); }
#sec-meta_si .stepdot {
  width: 28px; height: 28px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: var(--fw-semibold); z-index: 1;
  position: relative;
}
#sec-meta_si .step.done .stepdot { background: var(--success-tint); color: var(--success); }
#sec-meta_si .step.active .stepdot { background: var(--accent); color: var(--text-on-accent); }
#sec-meta_si .step.pending .stepdot { background: var(--surface-sunken); color: var(--text-faint); }
#sec-meta_si .step.blocked .stepdot { background: var(--warn-tint); color: var(--warn); }
#sec-meta_si .stepbody .t { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--text); }
#sec-meta_si .step.pending .stepbody .t { color: var(--text-faint); font-weight: var(--fw-medium); }
#sec-meta_si .stepbody .d { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
/* the restrained pulse — ACTIVE step only. */
#sec-meta_si .step.active .stepdot::after {
  content: ""; position: absolute; inset: -4px; border-radius: var(--radius-full);
  border: 2px solid var(--accent); opacity: .4;
  animation: msi-steppulse 1.4s ease-out infinite;
}
@keyframes msi-steppulse {
  0% { transform: scale(.85); opacity: .5; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* the inline confirm card — a display-only mirror of the Slack confirmation. */
#sec-meta_si .confirmcard {
  margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--warn-line);
  border-radius: var(--radius-lg);
}
#sec-meta_si .confirmcard .ct { font-size: var(--text-base); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
#sec-meta_si .confirmcard .cl { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }
#sec-meta_si .confirmbtn {
  margin-top: var(--space-3); background: var(--accent); color: var(--text-on-accent);
  border: 0; border-radius: var(--radius-sm); font-size: var(--text-sm);
  font-weight: var(--fw-semibold); padding: 7px var(--space-4); cursor: pointer;
}
#sec-meta_si .confirmbtn:disabled { opacity: .55; cursor: default; }

/* ════════════════════════════════════════════════════════════════════════
   BUILDS VIEW (web front door, mechanics phase). Submit form + recent-builds
   list + the polled job_event feed. Plain / correct / honest this pass — the
   SSE mission-control visuals land in a later plan. Tokens only (no raw hex).
   Server labels/statuses/doc refs render escaped; these rules only style them.
   ════════════════════════════════════════════════════════════════════════ */
/* Redesigned submit surface (#2): a Doc-URL hero inside a drag-and-drop target,
   a quiet styled "attach a file" affordance hiding the native input, and a
   selected-file chip below. Wraps on narrow so nothing scrolls the page
   sideways (QA caught an 81px overflow at <=760px). */
#sec-meta_si #msi-build-form { display: block; margin: var(--space-3) 0; }
#sec-meta_si .msi-build-dropzone {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
#sec-meta_si .msi-build-dropzone.is-dragover { border-color: var(--accent); background: var(--accent-tint); }
/* The URL field and both buttons share ONE fixed height (demo feedback #4 —
   three different font/border/padding formulas rendered three heights). */
#sec-meta_si #msi-build-url,
#sec-meta_si #msi-build-submit,
#sec-meta_si .msi-build-file-cta { height: 36px; box-sizing: border-box; }
#sec-meta_si #msi-build-url {
  flex: 1 1 320px; font: inherit; padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface); color: var(--text);
}
#sec-meta_si .msi-build-actions { display: flex; align-items: center; gap: var(--space-2); }
#sec-meta_si #msi-build-submit {
  display: inline-flex; align-items: center;
  background: var(--accent); color: var(--text-on-accent); border: 0;
  border-radius: var(--radius-xs); font: inherit; font-weight: var(--fw-semibold);
  padding: 0 var(--space-4); cursor: pointer;
}
#sec-meta_si #msi-build-submit:disabled { opacity: .55; cursor: default; }
/* The in-flight spinner inside Submit (demo feedback #1). Reduced-motion users
   still get the "Submitting…" label — the ring just doesn't spin. */
#sec-meta_si #msi-build-submit .msi-btn-spinner {
  width: 12px; height: 12px; margin-right: var(--space-2); border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; flex: none;
  animation: msi-spin .7s linear infinite;
}
@keyframes msi-spin { to { transform: rotate(360deg); } }
#sec-meta_si .msi-build-file-label { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
#sec-meta_si .msi-build-file-cta {
  display: inline-flex; align-items: center;
  font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--fw-semibold);
  padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface); white-space: nowrap;
}
#sec-meta_si .msi-build-file-label:hover .msi-build-file-cta { border-color: var(--border-strong); color: var(--text); }
#sec-meta_si .msi-build-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
#sec-meta_si .msi-build-file-input:focus-visible + .msi-build-file-cta { outline: 2px solid var(--accent); outline-offset: 2px; }
#sec-meta_si .msi-build-drophint { flex-basis: 100%; font-size: var(--text-xs); color: var(--text-faint); }
#sec-meta_si .msi-build-filechip {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2);
  font-size: var(--text-sm); color: var(--text); background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: var(--radius-xs); padding: var(--space-1) var(--space-2);
}
#sec-meta_si .msi-build-filechip .msi-build-filechip-x { cursor: pointer; color: var(--text-muted); font-weight: var(--fw-semibold); }
@media (prefers-reduced-motion: reduce) {
  #sec-meta_si .msi-build-dropzone { transition: none; }
  #sec-meta_si #msi-build-submit .msi-btn-spinner { animation: none; }
}
#sec-meta_si .msi-build-error { color: var(--danger); margin: var(--space-2) 0; }
#sec-meta_si .msi-builds-head {
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--text-xs); letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin: var(--space-5) 0 var(--space-2);
}
/* row wrap: the open-detail row + its archive affordance side by side (both are real
   <button>s — never nested). The affordance stays invisible until the row is hovered
   or focused; coarse pointers (no hover) get it always-on at reduced emphasis. */
#sec-meta_si .msi-build-rowwrap {
  display: flex; align-items: stretch; gap: var(--space-1); margin-bottom: var(--space-2);
}
#sec-meta_si .msi-build-rowwrap .msi-build-row { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
#sec-meta_si .msi-build-archive {
  flex: none; align-self: center; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: var(--text-sm); color: var(--text-faint); padding: 0 var(--space-2);
  border-radius: var(--radius-xs); opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
#sec-meta_si .msi-build-rowwrap:hover .msi-build-archive,
#sec-meta_si .msi-build-rowwrap:focus-within .msi-build-archive { opacity: 1; }
#sec-meta_si .msi-build-archive:hover,
#sec-meta_si .msi-build-archive:focus-visible { color: var(--text); background: var(--surface-hover); }
@media (hover: none) { #sec-meta_si .msi-build-archive { opacity: .6; } }
#sec-meta_si .msi-build-when {
  color: var(--text-faint); font-size: var(--text-xs); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#sec-meta_si .msi-build-row {
  display: flex; gap: var(--space-3); width: 100%; text-align: left; align-items: baseline;
  padding: var(--space-1) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-xs); background: var(--surface);
  margin-bottom: var(--space-2); cursor: pointer; font: inherit;
}
#sec-meta_si .msi-build-row:hover { background: var(--surface-hover); }
#sec-meta_si .msi-build-status {
  text-transform: uppercase; font-size: var(--text-xs);
  font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap;
}
#sec-meta_si .msi-build-doc {
  flex: 1; color: var(--text); font-size: var(--text-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#sec-meta_si .msi-build-by { color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; }
#sec-meta_si .msi-build-detail-head { margin: var(--space-4) 0 var(--space-2); }
#sec-meta_si .msi-events {
  display: flex; flex-direction: column;
  max-height: 15rem;              /* ~9 rows; the log scrolls internally, pinned to newest (r3 §2.2) */
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  padding: var(--space-2) var(--space-3);
}
#sec-meta_si .msi-ev { display: flex; gap: var(--space-2); padding: 3px 0; font-size: var(--text-xs); }
#sec-meta_si .msi-ev-ts { color: var(--text-muted); white-space: nowrap; font-family: var(--font-mono); }
#sec-meta_si .msi-ev-host {
  text-transform: uppercase; font-size: var(--text-xs);
  color: var(--text-muted); width: 52px; flex: none; font-family: var(--font-mono);
}
#sec-meta_si .msi-ev.sev-warn .msi-ev-label { color: var(--warn); }
#sec-meta_si .msi-ev.sev-error .msi-ev-label { color: var(--danger); }

/* ════════════════════════════════════════════════════════════════════════
   MISSION CONTROL (Task 6) — the animated pipeline diagram across the top of a
   build's detail + the mission grid (live feed | event-inspect panel). Modest,
   purposeful motion this pass (the full Anthropic design/animation pass is
   Plan 3). Node states: is-pending | is-active | is-done | is-warn | is-error,
   mapped to the same semantic status tokens as the trust-state iron rule. The
   ACTIVE node's dot breathes; the edge into a node briefly pulses as the flow
   reaches it. Both animations are killed under prefers-reduced-motion below.
   Tokens only (no raw hex — the categorical palette lives in meta_si.js).
   ════════════════════════════════════════════════════════════════════════ */
#sec-meta_si .msi-pipeline {
  display: flex; align-items: flex-start; gap: 2px;   /* was center — center put the 2px edge below the 10px dot (#3) */
  margin: var(--space-2) 0 var(--space-3); padding: var(--space-2) 0;
  overflow-x: auto;
}
#sec-meta_si .msi-node {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: none; cursor: pointer; padding: 0 2px;
}
#sec-meta_si .msi-node-dot {
  width: 10px; height: 10px; border-radius: var(--radius-full);
  background: var(--surface-sunken); border: 2px solid var(--border);
  position: relative;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
#sec-meta_si .msi-node-lbl {
  font-size: 10px; color: var(--text-muted); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .02em;
  transition: color var(--dur) var(--ease);
}
/* state → token mapping (mirrors the trust-state iron rule) */
#sec-meta_si .msi-node.is-pending .msi-node-dot { background: var(--surface-sunken); border-color: var(--border); }
#sec-meta_si .msi-node.is-done .msi-node-dot { background: var(--success); border-color: var(--success); }
#sec-meta_si .msi-node.is-done .msi-node-lbl { color: var(--text); }
#sec-meta_si .msi-node.is-active .msi-node-dot { background: var(--accent); border-color: var(--accent); }
#sec-meta_si .msi-node.is-active .msi-node-lbl { color: var(--text); font-weight: var(--fw-semibold); }
#sec-meta_si .msi-node.is-warn .msi-node-dot { background: var(--warn); border-color: var(--warn); }
#sec-meta_si .msi-node.is-warn .msi-node-lbl { color: var(--warn); }
#sec-meta_si .msi-node.is-error .msi-node-dot { background: var(--danger); border-color: var(--danger); }
#sec-meta_si .msi-node.is-error .msi-node-lbl { color: var(--danger); }
/* the active node's dot breathes — a restrained expanding ring (ACTIVE only) */
#sec-meta_si .msi-node.is-active .msi-node-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: var(--radius-full);
  border: 2px solid var(--accent); opacity: .5;
  animation: msi-nodepulse 1.6s ease-out infinite;
}
@keyframes msi-nodepulse {
  0% { transform: scale(.8); opacity: .55; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* edges: thin rails that flex-grow between nodes; .pulse sends a short highlight
   travelling across on each new event (added/removed on a timeout in JS). */
#sec-meta_si .msi-edge {
  flex: 1 1 auto; min-width: 12px; height: 2px; background: var(--border);
  /* dot is 10px tall (center 5px), edge is 2px (center 1px) → 4px lines the
     connector up with the dot center now that the pipeline is flex-start (#3). */
  margin-top: 4px;
  position: relative; overflow: hidden;
}
#sec-meta_si .msi-edge.pulse::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  animation: msi-edgepulse .7s ease-out;
}
@keyframes msi-edgepulse {
  0% { transform: translateX(-100%); opacity: .85; }
  100% { transform: translateX(100%); opacity: 0; }
}
/* the mission grid: the live feed (1fr) + the event-inspect panel (fixed rail) */
#sec-meta_si .msi-mission {
  display: grid; grid-template-columns: 1fr 320px; gap: var(--space-3);
  align-items: start;
}
/* Overflow containment: a grid/flex item defaults to min-width:auto (won't shrink
   below its content), so a long unbreakable label would widen the 1fr column and
   scroll the page body sideways. Let the feed cell + rows shrink, and break long
   words in the label — this keeps the existing multi-line wrap (no ellipsis
   truncation) while guaranteeing the page never scrolls horizontally. */
#sec-meta_si .msi-events { min-width: 0; }
#sec-meta_si .msi-ev { min-width: 0; }
#sec-meta_si .msi-ev-label { min-width: 0; overflow-wrap: anywhere; }

/* Task 15: the ×N chip on a collapsed reconcile_needed row (consecutive repeats
   dedup client-side — the drain re-emits per tick by design). */
#sec-meta_si .msi-ev-count {
  margin-left: auto;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--warn-tint);
  color: var(--warn);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
}
/* the feed line is now a <button> (keyboard-accessible) — strip button chrome
   but keep the .msi-ev flex layout / sizing from the BUILDS VIEW rules above. */
#sec-meta_si button.msi-ev {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  font-family: inherit; color: inherit; border-radius: var(--radius-xs);
}
#sec-meta_si button.msi-ev:hover { background: var(--surface-hover); }
#sec-meta_si .msi-inspect {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-sunken); padding: var(--space-2) var(--space-3); align-self: start;
}
#sec-meta_si .msi-inspect-head {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-2);
}
#sec-meta_si .msi-inspect-kind {
  font-weight: var(--fw-semibold); color: var(--text); font-size: var(--text-sm);
}
#sec-meta_si .msi-inspect-meta { font-size: var(--text-xs); color: var(--text-muted); }
#sec-meta_si .msi-inspect-empty { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }
#sec-meta_si .msi-inspect pre {
  margin: 0; overflow: auto; max-height: 40vh;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--text); white-space: pre;
}

/* ════════════════════════════════════════════════════════════════════════
   DECISION SURFACE (Task 10) — the on-page approve/reject card rendered under
   the pipeline from the card_ready payload. Clean but plain (the Anthropic
   design pass is Task 17). Tokens only (no raw hex — the token guard enforces).
   The manual-input advisory callout gets a distinct accent-tint treatment so a
   human-typed value (not from the doc) is visually flagged before approval.
   ════════════════════════════════════════════════════════════════════════ */
#sec-meta_si .msi-decision { margin: var(--space-3) 0 var(--space-4); }
#sec-meta_si .msi-decision-card {
  border: 1px solid var(--border); background: var(--surface-raised);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
#sec-meta_si .msi-dec-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
#sec-meta_si .msi-dec-title {
  font-family: var(--font-serif); font-weight: var(--fw-semibold);
  font-size: var(--text-xl); letter-spacing: -.01em; color: var(--text);
}
#sec-meta_si .msi-hash {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 2px var(--space-1); white-space: nowrap;
}
#sec-meta_si .msi-dec-chip {
  font-size: var(--text-xs); color: var(--warn); background: var(--warn-tint);
  border-radius: var(--radius-xs); padding: 0 var(--space-1); flex: none;
}
/* nested-by-adset tree (r3 §3): campaign header → the card-level total + targeting
   line → adset groups (name + budget + PAUSED chip) → each adset's creative inline
   (renderCreativeBlock) → the ad_study last. An orphaned entity (broken parent_op_id)
   renders as a flat .msi-tree-row below the tree, flagged with a warn edge so a
   linkage bug can never hide it. */
#sec-meta_si .msi-dec-tree { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
#sec-meta_si .msi-tree-campaign { display: flex; flex-direction: column; gap: var(--space-1); }
#sec-meta_si .msi-tree-adset { display: flex; flex-direction: column; gap: var(--space-1); margin-left: var(--space-3); }
#sec-meta_si .msi-tree-row { display: flex; align-items: baseline; gap: var(--space-2); }
#sec-meta_si .msi-tree-camp .msi-tree-ename { font-weight: var(--fw-semibold); color: var(--text); }
/* the total + targeting line under the campaign header — old .msi-dec-total
   prominence restored (text-md label, bold text-lg number) so a wrong-magnitude
   budget still pops on the redesigned card. */
#sec-meta_si .msi-tree-total { font-size: var(--text-md); color: var(--text); }
#sec-meta_si .msi-tree-total b { font-size: var(--text-lg); }
#sec-meta_si .msi-tree-etype {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); flex: none;
}
#sec-meta_si .msi-tree-ename { color: var(--text); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#sec-meta_si .msi-tree-ebudget { color: var(--text-muted); flex: none; }
#sec-meta_si .msi-tree-orphan { border-left: 3px solid var(--warn); padding-left: var(--space-2); }
#sec-meta_si .msi-tree-adset .msi-creative { margin-left: var(--space-3); }
#sec-meta_si .msi-dec-consequence { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-2) 0; }
/* creatives (#7): one block per reused ad — thumb (click-to-enlarge), headline/
   body copy, and the always-present Ads Manager deep-link. No preview_url renders
   the dashed .msi-creative-noimg placeholder, no <img>. */
#sec-meta_si .msi-creative {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border);
}
#sec-meta_si .msi-creative-thumb {
  flex: none; width: 96px; height: 60px; border-radius: var(--radius-xs);
  overflow: hidden; background: var(--surface-sunken); display: block;
}
#sec-meta_si .msi-creative-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#sec-meta_si .msi-creative-noimg { border: 1px dashed var(--border); }
#sec-meta_si .msi-creative-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#sec-meta_si .msi-creative-name {
  /* a literal asset filename — render its TRUE case (operators eyeball it against the doc;
     an uppercase transform here misled the 2026-07-08 demo QA). Never case-transform data. */
  font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere;
}
#sec-meta_si .msi-creative-title { font-weight: var(--fw-semibold); color: var(--text); }
#sec-meta_si .msi-creative-body { font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
#sec-meta_si .msi-creative-link { font-size: var(--text-xs); color: var(--accent); align-self: flex-start; }
#sec-meta_si .msi-creative-thumb:focus-visible,
#sec-meta_si .msi-creative-link:focus-visible {
  outline: 2px solid var(--accent-ring); outline-offset: 2px;
}
#sec-meta_si .msi-advisories {
  margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1);
}
#sec-meta_si .msi-advisory { font-size: var(--text-sm); color: var(--text-muted); }
#sec-meta_si .msi-advisory-manual {
  color: var(--text); background: var(--accent-tint); border-left: 3px solid var(--accent);
  border-radius: var(--radius-xs); padding: var(--space-1) var(--space-2);
  list-style: none; margin-left: calc(-1 * var(--space-4));
}
#sec-meta_si .msi-dec-needsdoc { font-size: var(--text-sm); color: var(--warn); }
#sec-meta_si .msi-dec-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
#sec-meta_si .msi-btn-approve,
#sec-meta_si .msi-btn-reject,
#sec-meta_si .msi-btn-cancel {
  font-family: inherit; font-size: var(--text-sm); cursor: pointer;
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
}
#sec-meta_si .msi-btn-approve {
  background: var(--accent); color: var(--text-on-accent); border-color: var(--accent);
}
#sec-meta_si .msi-btn-approve:hover { background: var(--accent-hover); }
#sec-meta_si .msi-btn-reject { background: var(--surface); color: var(--danger); border-color: var(--danger); }
#sec-meta_si .msi-btn-reject:hover { background: var(--danger-tint); }
#sec-meta_si .msi-btn-cancel { background: var(--surface); color: var(--text-muted); }
#sec-meta_si .msi-btn-cancel:hover { background: var(--surface-hover); }
#sec-meta_si .msi-btn-approve:focus-visible,
#sec-meta_si .msi-btn-reject:focus-visible,
#sec-meta_si .msi-btn-cancel:focus-visible {
  outline: 2px solid var(--accent-ring); outline-offset: 2px;
}
#sec-meta_si .msi-dec-strip {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--surface-sunken); border: 1px solid var(--border);
}
#sec-meta_si .msi-reject-reason {
  flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
#sec-meta_si .msi-dec-stale {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--warn-tint); color: var(--warn); font-size: var(--text-sm);
  border: 1px solid var(--warn);
}
#sec-meta_si .msi-ev-optimistic { color: var(--text-muted); font-style: italic; }

/* ── inline fill form (Task 11) — the needs-input surface (#msi-build-fills) ── */
#sec-meta_si .msi-fills { margin: var(--space-3) 0 var(--space-4); }
#sec-meta_si .msi-fill-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
#sec-meta_si .msi-fill-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
#sec-meta_si .msi-fill-title { font-size: var(--text-sm); color: var(--text); font-weight: var(--fw-medium); }
#sec-meta_si .msi-fill-item { display: flex; flex-direction: column; gap: var(--space-1); }
#sec-meta_si .msi-fill-label { font-size: var(--text-sm); color: var(--text); }
#sec-meta_si .msi-fill-input {
  font-family: inherit; font-size: var(--text-sm); color: var(--text); width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
}
#sec-meta_si .msi-fill-input:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
#sec-meta_si .msi-fill-money { display: flex; align-items: stretch; }
#sec-meta_si .msi-fill-money-sym {
  display: inline-flex; align-items: center; padding: 0 var(--space-2);
  background: var(--surface-sunken); border: 1px solid var(--border); border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); color: var(--text-muted); font-size: var(--text-sm);
}
#sec-meta_si .msi-fill-money .msi-fill-input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
#sec-meta_si .msi-fill-help { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
#sec-meta_si .msi-fill-conflict {
  font-size: var(--text-sm); color: var(--warn); background: var(--warn-tint);
  border: 1px solid var(--warn); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}
#sec-meta_si .msi-fill-docrow {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); background: var(--surface-sunken);
}
#sec-meta_si .msi-fill-doclabel { font-size: var(--text-sm); color: var(--text); }
#sec-meta_si .msi-fill-docnote { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
#sec-meta_si .msi-fill-doclink { color: var(--accent); }
#sec-meta_si .msi-fill-doclink:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
#sec-meta_si .msi-fill-prov { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
#sec-meta_si .msi-fill-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
#sec-meta_si .msi-fill-applied { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }

/* ── run-now button (Task 12) — build-detail header; drain-waiting only ────── */
#sec-meta_si .msi-build-detail-head {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
#sec-meta_si .msi-run-now {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--accent); background: var(--surface);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 2px 10px; cursor: pointer; margin-left: auto;
}
#sec-meta_si .msi-run-now:hover:not(:disabled) { background: var(--accent-tint); }
#sec-meta_si .msi-run-now:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
#sec-meta_si .msi-run-now:disabled {
  color: var(--text-muted); border-color: var(--border);
  background: var(--surface-sunken); cursor: default;
}
#sec-meta_si .msi-run-now-glyph { font-size: var(--text-xs); line-height: 1; }

/* ── replay scrubber (Task 14) — header toggle + the timeline bar ──────────── */
/* the header Replay toggle mirrors the run-now button's outline treatment. */
#sec-meta_si .msi-replay-toggle {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--accent); background: var(--surface);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 2px 10px; cursor: pointer;
}
#sec-meta_si .msi-replay-toggle:hover { background: var(--accent-tint); }
#sec-meta_si .msi-replay-toggle:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
#sec-meta_si .msi-replay-glyph { font-size: var(--text-xs); line-height: 1; }

/* the timeline bar: play/pause + scrubber + 1x/4x + exit, then the caption. */
#sec-meta_si .msi-replay { margin: var(--space-2) 0 var(--space-3); }
#sec-meta_si .msi-replay-bar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
#sec-meta_si .msi-replay-btn {
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--accent-contrast-text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 2px 10px; cursor: pointer;
}
#sec-meta_si .msi-replay-btn:hover { background: var(--surface-sunken); }
#sec-meta_si .msi-replay-btn.is-on {
  background: var(--accent-tint); border-color: var(--accent); color: var(--accent-contrast-text);
}
#sec-meta_si .msi-replay-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
#sec-meta_si .msi-replay-exit { margin-left: auto; color: var(--text-muted); }
#sec-meta_si .msi-replay-speed { display: inline-flex; gap: var(--space-1); }
#sec-meta_si .msi-replay-range {
  flex: 1 1 160px; min-width: 120px; accent-color: var(--accent); cursor: pointer;
}
#sec-meta_si .msi-replay-range:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
#sec-meta_si .msi-replay-caption {
  font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2);
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
}
#sec-meta_si .msi-replay-cap-idx { font-variant-numeric: tabular-nums; color: var(--text-faint); }
#sec-meta_si .msi-replay-cap-label { color: var(--text); }
#sec-meta_si .msi-replay-cap-time { font-variant-numeric: tabular-nums; color: var(--text-faint); }

/* ── system-health (Task 12 + v3.1 #5) — builds masthead; a single aggregate
   status pill (worst-of-three) with a hover/focus/tap detail popover breaking
   down brain/drain/builder. The strip container anchors the absolute popover. */
#sec-meta_si .msi-health-strip { position: relative; margin-top: var(--space-2); }
#sec-meta_si .msi-health-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font: inherit; font-size: var(--text-xs); color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 2px var(--space-2); cursor: pointer;
}
#sec-meta_si .msi-health-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#sec-meta_si .msi-health-pill-lbl { font-weight: var(--fw-semibold); letter-spacing: .02em; }
/* the status dot (reused by the popover rows) */
#sec-meta_si .msi-health-dot {
  width: 7px; height: 7px; border-radius: var(--radius-full); flex: none;
  background: var(--msi-neutral);
}
#sec-meta_si .msi-health-dot.is-fresh { background: var(--success); }
#sec-meta_si .msi-health-dot.is-stale { background: var(--warn); }
#sec-meta_si .msi-health-dot.is-dark  { background: var(--msi-neutral); }
#sec-meta_si .msi-health-name {
  font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .06em;
}
#sec-meta_si .msi-health-val { color: var(--text-faint); font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
/* the per-component detail popover */
#sec-meta_si .msi-health-detail {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 5;
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-3); min-width: 180px;
}
#sec-meta_si .msi-health-detail[hidden] { display: none; }
#sec-meta_si .msi-health-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
#sec-meta_si .msi-health-row .msi-health-val { margin-left: auto; }

/* ── build receipt (Task 13) — the terminal summary (#msi-build-receipt) ────── */
#sec-meta_si .msi-receipt { margin: var(--space-3) 0 var(--space-4); }
#sec-meta_si .msi-receipt-card {
  border: 1px solid var(--border); background: var(--surface-raised);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-3);
}
#sec-meta_si .msi-receipt-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
#sec-meta_si .msi-receipt-title {
  font-family: var(--font-serif); font-weight: var(--fw-semibold);
  font-size: var(--text-2xl); letter-spacing: -.012em; color: var(--text);
}
#sec-meta_si .msi-receipt-qa {
  border: 0; border-left: 4px solid var(--border-strong);
  background: transparent; border-radius: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
}
#sec-meta_si .msi-receipt-qa.is-pass { border-left-color: var(--success); background: transparent; }
#sec-meta_si .msi-receipt-qa.is-fail { border-left-color: var(--danger); background: transparent; }
#sec-meta_si .msi-receipt-qa-headline {
  font-family: var(--font-serif); font-weight: var(--fw-regular);
  font-size: var(--text-2xl); line-height: 1.25; letter-spacing: -.01em; color: var(--text);
}
#sec-meta_si .msi-receipt-qa.is-pass .msi-receipt-qa-headline { color: var(--success); }
#sec-meta_si .msi-receipt-qa.is-fail .msi-receipt-qa-headline { color: var(--danger); }
#sec-meta_si .msi-receipt-qa-sub { font-size: var(--text-md); color: var(--text-muted); margin-top: var(--space-2); }
/* the receipt reuses the review card's .msi-tree-* skin (campaign→adset→ad); a
   per-entity node adds a PAUSED/rolled-back badge + Ads Manager link where the
   review card carried a budget. A rolled-back row dims + strikes through. */
#sec-meta_si .msi-receipt-node { padding: var(--space-1) 0; }
#sec-meta_si .msi-receipt-node.is-rolled { opacity: .7; }
#sec-meta_si .msi-receipt-node.is-rolled .msi-tree-ename { text-decoration: line-through; }
/* an ad row nests under its adset (mirrors the review card's creative indent) */
#sec-meta_si .msi-tree-adset .msi-receipt-ad { margin-left: var(--space-3); }
#sec-meta_si .msi-receipt-badge {
  font-size: var(--text-xs); border-radius: var(--radius-xs);
  padding: 0 var(--space-1); white-space: nowrap; flex: none;
}
#sec-meta_si .msi-receipt-badge.is-paused { color: var(--warn); background: var(--warn-tint); }
#sec-meta_si .msi-receipt-badge.is-active { color: var(--success); background: var(--success-tint); }
#sec-meta_si .msi-receipt-badge.is-rolled { color: var(--text-muted); background: var(--surface-sunken); }
#sec-meta_si .msi-receipt-am { font-size: var(--text-xs); color: var(--accent); flex: none; white-space: nowrap; }
#sec-meta_si .msi-receipt-am:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
#sec-meta_si .msi-receipt-empty { font-size: var(--text-sm); color: var(--text-muted); }
#sec-meta_si .msi-receipt-approver { font-size: var(--text-sm); color: var(--text-muted); }
#sec-meta_si .msi-receipt-close { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--fw-medium); }

/* ── launch/pause controls (Lane B Task 10) — the receipt's launch beat. Sits
   between the approver footer and the closing reassurance, set off by a hairline
   rule so it reads as the one live-spend action on the record surface. Launch is
   a PRIMARY action (accent, mirrors .msi-btn-approve); Pause is a SECONDARY /
   caution action (surface + warn, always available per ruling 3). A mid-flight
   request renders a muted in-progress note in place of any button. The confirm
   strip reuses the .msi-dec-strip skin (sunken well) and leads with the QA
   verdict chip (PASS green / FAIL danger). Token-only. */
#sec-meta_si .msi-launch-controls {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-top: var(--space-2); padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
#sec-meta_si .msi-btn-launch,
#sec-meta_si .msi-btn-pause {
  font-family: inherit; font-size: var(--text-sm); cursor: pointer;
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
}
#sec-meta_si .msi-btn-launch {
  background: var(--accent); color: var(--text-on-accent); border-color: var(--accent);
  font-weight: var(--fw-medium);
}
#sec-meta_si .msi-btn-launch:hover { background: var(--accent-hover); }
#sec-meta_si .msi-btn-pause { background: var(--surface); color: var(--warn); border-color: var(--warn); }
#sec-meta_si .msi-btn-pause:hover { background: var(--warn-tint); }
#sec-meta_si .msi-btn-launch:focus-visible,
#sec-meta_si .msi-btn-pause:focus-visible {
  outline: 2px solid var(--accent-ring); outline-offset: 2px;
}
#sec-meta_si .msi-launch-progress { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }
#sec-meta_si .msi-launch-strip {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--surface-sunken); border: 1px solid var(--border);
  flex: 1 1 100%;
}
#sec-meta_si .msi-launch-qa {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); white-space: nowrap;
  color: var(--text); flex: none;
}
#sec-meta_si .msi-launch-qa.is-pass { color: var(--success); }
#sec-meta_si .msi-launch-qa.is-fail { color: var(--danger); }
#sec-meta_si .msi-launch-qa.is-pending { color: var(--warn); }
#sec-meta_si .msi-launch-strip-msg { font-size: var(--text-sm); color: var(--text-muted); flex: 1 1 auto; min-width: 0; }

/* ── design-pass motion (Task 17) — the human moments settle in; the console
   telemetry TRANSITIONS (node dot + label above) rather than pops. Opacity-only
   on the cards: the receipt legitimately renders twice (once at execute_done,
   again at qa_done with the QA verdict), so a soft fade reads as a settle on the
   update, never a position jump. The confirm strip reveals on the operator's
   click (a one-shot user action, never a poll re-fire). The live event feed has
   NO per-row entrance BY DESIGN (§4.9 no gratuitous motion — a high-frequency
   feed animating every row reads as noise; the edge pulse already signals flow
   reaching a node). All disabled under prefers-reduced-motion in the guard just
   below. Durations compose --dur. */
@keyframes msi-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes msi-reveal  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
#sec-meta_si .msi-decision-card,
#sec-meta_si .msi-receipt-card { animation: msi-fade-in var(--dur) var(--ease) both; }
#sec-meta_si .msi-dec-strip,
#sec-meta_si .msi-launch-strip:not(.hidden) { animation: msi-reveal var(--dur) var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  #sec-meta_si .step.active .stepdot::after { animation: none; }
  #sec-meta_si .msi-jobs-dot { animation: none; }
  #sec-meta_si .msi-node.is-active .msi-node-dot::after { animation: none; }
  #sec-meta_si .msi-edge.pulse::after { animation: none; }
  /* design-pass additions: the node transitions + human-moment entrances */
  #sec-meta_si .msi-node-dot,
  #sec-meta_si .msi-node-lbl { transition: none; }
  #sec-meta_si .msi-decision-card,
  #sec-meta_si .msi-receipt-card,
  #sec-meta_si .msi-dec-strip,
  #sec-meta_si .msi-launch-strip { animation: none; }
}

/* the mission grid collapses to a single column on narrow viewports */
@media (max-width: 900px) {
  #sec-meta_si .msi-mission { grid-template-columns: 1fr; }
}

/* ── responsive (mockup's <=780px media query, token-fied) ─────────────── */
@media (max-width: 780px) {
  #sec-meta_si .msi-board { grid-template-columns: 1fr; }
  #sec-meta_si .msi-grid2 { grid-template-columns: 1fr; gap: var(--space-6); }
  #sec-meta_si .msi-title { font-size: var(--text-3xl); }
  #sec-meta_si .msi-vhead { gap: var(--space-3); }
  #sec-meta_si .msi-attr { text-align: left; }
}