/* Decisioning Console—mission-control tokens
   Dark, dense, scannable at distance. Color is *state*, not decoration. */

:root {
  /* Surfaces—near-black with subtle blue lift */
  --bg-0: #07090d;          /* page */
  --bg-1: #0c1118;          /* panels */
  --bg-2: #131a24;          /* tiles */
  --bg-3: #1a2331;          /* hover */
  --bg-4: #232f42;          /* active */
  --line: #1e2836;          /* hairline */
  --line-2: #2a3850;
  --line-bright: #3b4d6b;

  /* Text */
  --t-1: #e6edf7;
  --t-2: #a3b1c6;
  --t-3: #6b7a93;
  --t-4: #4a5670;

  /* Verdict states (color-coded—primary signal carrier) */
  --go: #4ade80;            /* high opportunity—sodium green */
  --go-bg: rgba(74,222,128,.08);
  --go-line: rgba(74,222,128,.30);
  --test: #fbbf24;          /* worth testing—amber */
  --test-bg: rgba(251,191,36,.08);
  --test-line: rgba(251,191,36,.30);
  --skip: #f87171;          /* skip—coral */
  --skip-bg: rgba(248,113,113,.07);
  --skip-line: rgba(248,113,113,.30);
  --monitor: #14b8a6;       /* monitor—TH-validated, search-demand unproven—teal (greener than --kept cyan for KPI-row separation) */
  --monitor-bg: rgba(20,184,166,.07);

  /* Decision states (overlaid on verdict) */
  --kept: #38bdf8;          /* committed—cyan */
  --kept-bg: rgba(56,189,248,.10);
  --skipped: #94a3b8;       /* passed—slate */
  --deferred: #c084fc;      /* parked—violet */

  /* Content-type taxonomy (kept from spec; muted to match dark mode) */
  --ct-orange: #f97316;
  --ct-purple: #a855f7;
  --ct-green:  #10b981;
  --ct-blue:   #3b82f6;
  --ct-untyped:#64748b;

  /* Tail class */
  --long: #4ade80;          /* working surface—emphasized */
  --mid:  #fbbf24;
  --head: #f87171;

  /* Type */
  --font-sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 4px;
  --radius-lg: 8px;

  /* z-index ladder—single source of truth for stacking. Update here, not
     inline. Order from back to front: base content < drawer < popover <
     command palette < tweaks panel. */
  --z-base: 1;
  --z-drawer: 10;
  --z-popover: 100;
  --z-cmdk: 200;
  --z-tweaks: 300;

  /* Outcome-aware tile-shading tokens (item 4.6). Subtle alpha tints
     overlaid on .brief—alpha < 15% so the tile chrome stays the primary
     visual. Lifted to :root so the BriefRow wrapper can pass them via
     `--outcome-state` inline, with no per-tile case lookup. */
  --c-confident-green:  rgba(74, 222, 128, 0.12);   /* in_zone—kept-track */
  --c-on-track:         rgba(251, 191, 36, 0.10);   /* foothold—building  */
  --c-underperforming:  rgba(248, 113, 113, 0.08);  /* cold—soft warn     */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--t-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

body {
  /* faint mission-control grid */
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 40px 40px;
  min-height: 100vh;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }
a { color: inherit; }

/* ──────────────── App shell ──────────────── */

.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(160px,200px) 1fr minmax(180px,220px);
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0a0f17 0%, #07090d 100%);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(8px);
}

.brand { min-width: 0; }
.brand b, .brand .ver { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--t-2);
}
.brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--go);
  box-shadow: 0 0 10px var(--go);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.8 } 50% { opacity: .3 } }
.brand b { color: var(--t-1); font-weight: 600; letter-spacing: 0; font-family: var(--font-sans); }
.brand .ver { color: var(--t-4); }

/* Lens switcher—pill-strip */
.lenses {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: fit-content;
  margin: 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.lens {
  background: transparent;
  border: 0;
  color: var(--t-2);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 8px;
  border-radius: 3px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .12s, color .12s;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
@media (hover: hover) {
  .lens:hover { color: var(--t-1); background: var(--bg-2); }
}
.lens.active {
  background: var(--bg-3);
  color: var(--t-1);
  box-shadow: inset 0 0 0 1px var(--line-bright);
}
.lens .k {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  border: 1px solid var(--line-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.lens.active .k { color: var(--t-2); border-color: var(--line-bright); }
.lens .count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-3);
}

.topbar-right { display: flex; align-items: center; gap: 12px; }
.cmd-trigger {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--t-3);
  padding: 6px 10px 6px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.cmd-trigger > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.cmd-trigger:hover { border-color: var(--line-bright); color: var(--t-1); }
.cmd-trigger .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--t-3);
}

/* Status strip—mission-control telemetry, REPLACES yellow threshold-info bar */
.telemetry {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}
.tel-cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-right: 1px solid var(--line);
  color: var(--t-3);
  white-space: nowrap;
}
.tel-cell .lbl { color: var(--t-4); }
.tel-cell .val { color: var(--t-1); }
.tel-cell .val.go { color: var(--go); }
.tel-cell .val.test { color: var(--test); }
.tel-cell .val.skip { color: var(--skip); }
.tel-cell .val.kept { color: var(--kept); }
.tel-cell.right { margin-left: auto; border-right: 0; border-left: 1px solid var(--line); }

/* ──────────────── Main ──────────────── */

.main {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 0;
  min-width: 0;
}

/* Side rail—filters/state */
.rail {
  border-right: 1px solid var(--line);
  background: var(--bg-1);
  padding: 16px 14px;
  overflow-y: auto;
  font-size: 12px;
  min-width: 0;
}
.rail h4 {
  margin: 18px 0 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-4);
  font-family: var(--font-mono);
}
.rail h4:first-child { margin-top: 0; }

/* Top-of-rail clear buttons—filters and sort cleared independently */
.rail-clear-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.rail-clear {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--t-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rail-clear.dirty {
  border-color: var(--accent, #4ea1f3);
  color: var(--t-1);
}
.rail-clear.dirty:hover { background: var(--bg-3, var(--bg-2)); }
.rail-clear.idle {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Sort controls—own row beneath the title row, left-aligned, expands right
   as selections are made. flex: 1 0 100% forces it onto its own line within
   the .lens-header flex-wrap container. */
.lens-sort-row {
  display: flex;
  gap: 5px;
  align-items: center;
  flex: 1 0 100%;
  margin-top: 4px;
}
.lens-sort-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-4);
  padding-right: 2px;
}
.sort-by {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--t-1);
  cursor: pointer;
  max-width: 200px;
}
.sort-dir {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--t-2);
  cursor: pointer;
  white-space: nowrap;
  min-width: 56px;
  text-align: center;
}
.sort-dir:hover:not(:disabled) { background: var(--bg-3, var(--bg-2)); color: var(--t-1); }
.sort-dir:disabled { opacity: 0.45; cursor: not-allowed; }
.lens-sort-clear {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--t-3);
  cursor: pointer;
  white-space: nowrap;
}
.lens-sort-clear.dirty { color: var(--t-1); border-color: var(--accent, #4ea1f3); }
.lens-sort-clear.dirty:hover { background: var(--bg-2); }
.lens-sort-clear.idle { opacity: 0.4; cursor: not-allowed; }

/* Reality-encoded note in the verdict-breakdown panel—explains that the
   composite score is an opportunity-surface signal, not a PV predictor.
   Direct response to ETRP finding (negative Spearman with PV outcomes). */
.vb-reality-note {
  margin-top: 10px;
  padding: 9px 11px;
  background: var(--bg-2);
  border-left: 2px solid var(--t-3);
  border-radius: 2px;
  font-size: 11px;
  color: var(--t-2);
  line-height: 1.5;
}
.vb-reality-note b { color: var(--t-1); }
.vb-reality-note em { color: var(--t-1); font-style: italic; }

/* Trend input */
.trend-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 0 8px;
}
.trend-input-wrap:focus-within {
  border-color: var(--kept);
  box-shadow: 0 0 0 3px rgba(56,189,248,.10);
}
.trend-input-wrap .glyph {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  margin-right: 4px;
}
.trend-input {
  background: transparent;
  border: 0;
  outline: 0;
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  color: var(--t-1);
}
.trend-input::placeholder { color: var(--t-4); }
.trend-clear {
  background: transparent; border: 0;
  color: var(--t-3);
  font-size: 14px;
  padding: 0 4px;
}
.trend-hits {
  margin-top: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--t-3);
}
.trend-hits b { color: var(--kept); font-weight: 500; }

/* Filter chip groups */
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--t-2);
  padding: 4px 9px;
  font-size: 11px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
@media (hover: hover) {
  .chip:hover { background: var(--bg-3); color: var(--t-1); }
}
.chip.active {
  background: var(--bg-4);
  border-color: var(--line-bright);
  color: var(--t-1);
}
.chip .n { color: var(--t-4); font-size: 10px; }
.chip.active .n { color: var(--t-2); }

.chip-dot { width: 6px; height: 6px; border-radius: 50%; }

/* Stat KPI strip in rail */
.kpi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.kpi > div {
  background: var(--bg-2);
  padding: 10px 10px;
}
.kpi .v {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--t-1);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.kpi .v.go { color: var(--go); }
.kpi .v.test { color: var(--test); }
.kpi .v.skip { color: var(--skip); }
.kpi .v.kept { color: var(--kept); }
.kpi .l {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-4);
  margin-top: 2px;
  font-family: var(--font-mono);
}

/* ──────────────── Content area ──────────────── */

.content {
  overflow-y: auto;
  padding: 16px 18px 80px;
  min-width: 0;
}

.lens-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  min-width: 0;
}
.lens-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Discreet (?) help icon next to a lens title—small, low-contrast, easy
   to miss but findable on second look. Click reveals popover with the
   "what's this for?" blurb. Same content surfaces in the Docs lens. */
.lens-help {
  position: relative;
  display: inline-flex;
  margin-left: 8px;
  vertical-align: middle;
}
.lens-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--t-4);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
/* Small variant for drawer-section headings (smaller than lens h1s) */
.lens-help.lens-help-sm { margin-left: 4px; }
.lens-help-sm .lens-help-icon {
  width: 13px;
  height: 13px;
  font-size: 9px;
  font-weight: 700;
}
@media (hover: hover) {
  .lens-help-icon:hover {
    color: var(--t-1);
    border-color: var(--t-3);
    background: var(--bg-2);
  }
}
.lens-help-icon.active {
  color: var(--t-1);
  border-color: var(--t-3);
  background: var(--bg-2);
}
.lens-help-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: var(--z-popover);
  width: 460px;
  /* Clamp so the popover never exceeds viewport width, with 16px gutter on
     each side. Handles narrow viewports + edge-of-screen icons. */
  max-width: min(460px, calc(100vw - 32px));
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-2);
  text-wrap: pretty;
  white-space: normal;
  letter-spacing: normal;
  font-weight: 400;
  text-transform: none;
  font-family: var(--font-sans, inherit);
}
/* Icons in the right-side drawer column anchor their popovers RIGHT so
   they extend leftward instead of overflowing the viewport's right edge.
   Same rule for icons in the strategy-map quadrants (right-side quadrants).
   Note: portal'd popovers (.lens-help-popover-portal) compute their anchor
   in JS—these CSS rules apply only to legacy non-portal'd ones, kept as
   a fallback so any future inline-rendered popovers stay on-screen. */
.t2-side .lens-help-popover:not(.lens-help-popover-portal),
.gapmap-quad .lens-help-popover:not(.lens-help-popover-portal) {
  left: auto;
  right: 0;
}

/* Portal-rendered popover. Rendered into document.body to escape any
   ancestor with overflow: hidden + position: relative (specifically
   .brief, which would otherwise clip the popover when it extends below
   the tile's meta row). Position is computed in JS via
   _popoverAnchorFor() and set as inline style. */
.lens-help-popover-portal {
  position: fixed;
}
.lens-help-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.lens-help-purpose {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #4ea1f3);
}
.lens-help-close {
  background: transparent;
  border: none;
  color: var(--t-4);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.lens-help-close:hover { color: var(--t-1); }
.lens-help-body {
  margin: 0 0 10px;
  color: var(--t-1);
}
.lens-help-when {
  margin: 0;
  color: var(--t-3);
  font-size: 12px;
  font-style: italic;
}

/* Collapsed disclosure inside the Recipe coordinates panel—production
   handoff details (platforms / canonical / diff) hide by default, expand
   on click. Keeps the triage-essential trio (TH Collection / Format /
   Persona) visible while preserving the rest behind one click. */
.recipe-extra {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.recipe-extra summary {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-4);
  cursor: pointer;
  padding: 2px 0;
  list-style: none;
}
.recipe-extra summary::-webkit-details-marker { display: none; }
.recipe-extra summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.12s;
}
.recipe-extra[open] summary::before { content: '▾ '; }
.recipe-extra summary:hover { color: var(--t-2); }
.recipe-extra .kv { margin-top: 6px; }

/* Decisions sync-status pill in the footer—visible signal that operator
   actions are persisting to D1 (or not, if worker is offline). */
.sync-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.sync-pill.sync-ok::before {
  content: '●';
  color: var(--go);
  margin-right: 4px;
}
.sync-pill.sync-err::before {
  content: '⚠';
  color: var(--skip);
  margin-right: 4px;
}
.sync-pill.sync-pending::before {
  content: '○';
  color: var(--t-4);
  margin-right: 4px;
}


/* Lens cheat-sheet grid in the Docs lens—surfaces all four blurbs (same
   content as the per-lens (?) popover) for at-a-glance reference. */
.lens-cheat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.lens-cheat-card {
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lens-cheat-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.lens-cheat-purpose {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #4ea1f3);
  margin-bottom: 10px;
}
.lens-cheat-body {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-1);
  text-wrap: pretty;
}
.lens-cheat-when {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--t-3);
  text-wrap: pretty;
}
.lens-header .sub {
  color: var(--t-3);
  font-size: 12px;
  font-family: var(--font-mono);
  flex: 1 1 200px;
  min-width: 0;
}
.lens-header .right {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* ──────────────── Brief tile (atomic unit—preserved across all lenses) ──────────────── */

.brief {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 6px;
  transition: border-color .12s, background .12s;
  display: grid;
  grid-template-columns: 4px 1fr;
  overflow: hidden;
}
.brief:hover { border-color: var(--line-bright); background: var(--bg-2); }
.brief.expanded {
  border-color: var(--line-bright);
  background: var(--bg-2);
}

/* Left rail = verdict accent (the primary state signal) */
.brief-rail {
  background: var(--t-4);
}
.brief.v-high-opportunity .brief-rail { background: var(--go); }
.brief.v-worth-testing .brief-rail { background: var(--test); }
.brief.v-skip .brief-rail { background: var(--skip); }
/* When decided, decision color overrides verdict rail */
.brief.d-keep .brief-rail { background: var(--kept); box-shadow: 0 0 12px var(--kept); }
.brief.d-skip-decided .brief-rail { background: var(--skipped); }
.brief.d-defer .brief-rail { background: var(--deferred); }

.brief-body { padding: 0; }

/* Tier-1 row—single horizontal scan line */
.t1 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  min-width: 0;
}
.t1:hover { background: rgba(255,255,255,.01); }

/* Verdict glyph—dot only */
.verdict-glyph {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 12px;
}
.verdict-glyph .vd {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--t-4);
  flex-shrink: 0;
}
.brief.v-high-opportunity .verdict-glyph .vd { background: var(--go); box-shadow: 0 0 8px var(--go); }
.brief.v-worth-testing .verdict-glyph .vd { background: var(--test); box-shadow: 0 0 6px var(--test); }
.brief.v-skip .verdict-glyph .vd { background: var(--skip); }

/* Topic title */
.t1-topic {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.t1-topic .topic {
  font-size: 14px;
  font-weight: 500;
  color: var(--t-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.t1-topic .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  row-gap: 4px;
  font-size: 11px;
  color: var(--t-4);
  margin-top: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  line-height: 1.4;
  min-width: 0;
}
/* Chip = one logical meta unit (tier, content type, KD, vol, cpc, ...).
   Dots between chips are rendered via ::before on the *following* chip
   so they wrap with their content—no dangling dots at line starts.
   Each chip is itself an inline-flex so internal Sparklines, TermHelp
   icons, and DiffValue spans align center-vertically with the text. */
.t1-topic .meta .meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.t1-topic .meta .meta-chip + .meta-chip::before {
  content: '·';
  color: var(--t-4);
  margin: 0 6px 0 0;
}
.t1-topic .meta .ct { color: var(--t-2); }
.ct-orange .t1-topic .meta .ct { color: var(--ct-orange); }
.ct-purple .t1-topic .meta .ct { color: var(--ct-purple); }
.ct-green  .t1-topic .meta .ct { color: var(--ct-green); }
.ct-blue   .t1-topic .meta .ct { color: var(--ct-blue); }
.ct-untyped .t1-topic .meta .ct { color: var(--ct-untyped); }

/* End column—decision badge or open chevron */
.t1-end {
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
}
.open-hint { font-size: 14px; color: var(--t-4); font-family: var(--font-mono); }

/* Numeric stats—tabular */
.t1-stat {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
  min-width: 0;
  white-space: nowrap;
}
.t1-stat .v {
  color: var(--t-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.t1-stat .l {
  color: var(--t-4);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 1px;
}

/* KD bar—visual rendering of difficulty */
.kdbar {
  width: 64px;
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 5px;
  margin-left: auto;
}
.kdbar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--long) 0%, var(--mid) 50%, var(--head) 100%);
}

/* Decision badge if recorded—overlay on tile.
   Fixed min-width + center alignment so Keep / Skip / Defer all render
   the same width, keeping the .t1-end slot stable across rows so the
   ScoreDecompBar inside .t1-topic doesn't get squished by variable-
   width detail. The action plan (article count + target keywords +
   window) lives in the badge's title tooltip and in the drawer. */
.decision-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid;
  min-width: 56px;
}
.decision-badge.keep { color: var(--kept); border-color: var(--kept); background: var(--kept-bg); }
.decision-badge.skip { color: var(--skipped); border-color: rgba(148,163,184,.4); background: rgba(148,163,184,.08); }
.decision-badge.defer { color: var(--deferred); border-color: rgba(192,132,252,.4); background: rgba(192,132,252,.08); }
.decision-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.decision-badge.insufficient-data {
  background: rgba(140,140,140,0.18);
  color: var(--t-2);
  border-color: rgba(140,140,140,0.35);
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 3px 10px;
}
.decision-badge.insufficient-data::before { display: none; }

/* Verdict pill—runtime-verdict label on undecided tiles. Sister to
   .decision-badge in the .t1-end slot, but shown only when no decision
   exists. Padding/font tuned to match the decision-badge so the slot
   stays visually consistent on hover-flip between states. */
.verdict-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  margin-right: 2px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: var(--t-2);
  white-space: nowrap;
}

/* Shared base for the small inline pills on the tile topic row.
   Variant classes layer color/severity. Replaces a previous mix of
   per-pill inline styles + ad-hoc classes so vertical alignment +
   metrics stay uniform across them. */
.tile-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  border-radius: 2px;
  vertical-align: middle;
  white-space: nowrap;
  background: rgba(255,255,255,0.05);
  color: var(--t-2);
}
.tile-pill-warn   { background: rgba(220,140,140,0.40); color: var(--t-1); }
.tile-pill-stale  { background: rgba(220,180,120,0.40); color: var(--t-1); }
.tile-pill-danger { background: rgba(220, 80, 80,0.40); color: var(--t-1); }
.tile-pill-soft   { background: rgba(180,150,200,0.14); color: var(--t-2); }

/* Revenue chips inside the meta row—ex-inline styles consolidated. */
.t1-topic .meta .rev-range { color: var(--kept); }
.t1-topic .meta .rev-paused { text-decoration: line-through; }
.t1-topic .meta .rev-unstable { color: #c66; margin-left: 4px; }

/* Trend match highlight */
.brief.match-hit { box-shadow: inset 4px 0 0 var(--kept), 0 0 0 1px rgba(56,189,248,.4); }
.brief.match-dim { opacity: 0.35; }

/* ──────────────── Tier 2—drawer (opens BELOW tile, not stacked panels) ──────────────── */
.t2 {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 0;
}
@media (max-width: 1100px) {
  /* On narrow viewports, stack drawer vertically instead of forcing a 460px sidebar */
  .t2 { grid-template-columns: 1fr; }
}
/* Container-query rule: when ANY brief is rendered inside a container narrower
   than ~720px (= drawer's natural 2-column min ≈ 260px main + 460px side), the
   drawer stacks vertically. Covers every narrow-container context—BeachLens
   rail-tiles, GapMapLens quadrants, QueueLens intake-strip in narrow viewports,
   and any future lens that places briefs in a sub-page-width column. The brief
   itself becomes a containing element via `container-type: inline-size`, so the
   @container query reads the brief's own rendered width regardless of viewport. */
.brief {
  container-type: inline-size;
  container-name: brief;
}
@container brief (max-width: 720px) {
  .t2 {
    grid-template-columns: 1fr;
  }
  .t2-side {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  /* Drawer internals—stack everything that's flex-row when narrow so
     nothing bleeds past the column edge. */
  .t2-main, .t2-side { padding: 12px 14px; min-width: 0; }
  .t2 .tve-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .t2 .tve-label { white-space: normal; }
  .t2 .tve-options { gap: 4px; }
  .t2 .decide-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .t2 .decide-actions .btn {
    flex: 1 1 100%;
    min-width: 0;
    padding: 8px 10px;
    justify-content: flex-start;
  }
  .t2 .outcome-form { grid-template-columns: 1fr; }
  /* Keyword table: let it scroll horizontally rather than overflow. */
  .t2 .kwtbl {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .t2 .xlinks { gap: 4px; }
  .t2 .xlink { padding: 3px 6px; font-size: 9px; }
}
/* Belt-and-suspenders: explicit selectors for the known narrow contexts
   (in case a browser fails the container query for any reason). Keeps
   BeachLens + GapMapLens drawers always-stacked regardless of CSS-feature
   detection variance. */
.rail-tiles .brief.expanded .t2,
.gapmap-quad .brief.expanded .t2,
.brief.in-narrow .t2 {
  grid-template-columns: 1fr;
}
.rail-tiles .brief.expanded .t2-side,
.gapmap-quad .brief.expanded .t2-side,
.brief.in-narrow .t2-side {
  border-left: none;
  border-top: 1px solid var(--line);
}
/* Same belt-and-suspenders: stack drawer internals + scroll kwtbl in
   known-narrow contexts so the column query isn't load-bearing. */
.rail-tiles .brief.expanded .tve-bar,
.gapmap-quad .brief.expanded .tve-bar,
.brief.in-narrow .tve-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.rail-tiles .brief.expanded .decide-actions,
.gapmap-quad .brief.expanded .decide-actions,
.brief.in-narrow .decide-actions {
  flex-wrap: wrap;
  gap: 6px;
}
.rail-tiles .brief.expanded .decide-actions .btn,
.gapmap-quad .brief.expanded .decide-actions .btn,
.brief.in-narrow .decide-actions .btn {
  flex: 1 1 100%;
  min-width: 0;
  padding: 8px 10px;
  justify-content: flex-start;
}
.rail-tiles .brief.expanded .outcome-form,
.gapmap-quad .brief.expanded .outcome-form,
.brief.in-narrow .outcome-form {
  grid-template-columns: 1fr;
}
.rail-tiles .brief.expanded .kwtbl,
.gapmap-quad .brief.expanded .kwtbl,
.brief.in-narrow .kwtbl {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.t2-main { padding: 16px 18px; min-width: 0; }
.t2-side {
  border-left: 1px solid var(--line);
  background: var(--bg-0);
  padding: 14px 16px;
  font-size: 12px;
  min-width: 0;
}
@media (max-width: 1100px) {
  .t2-side { border-left: none; border-top: 1px solid var(--line); }
}

.section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--t-4);
  margin: 0 0 8px;
}

.why {
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-1);
  text-wrap: pretty;
  margin-bottom: 14px;
}
.angle {
  font-size: 12px;
  line-height: 1.55;
  color: var(--t-2);
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-left: 2px solid var(--go);
  padding: 10px 12px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 14px;
  text-wrap: pretty;
}
.brief.v-worth-testing .angle { border-left-color: var(--test); }
.brief.v-skip .angle { border-left-color: var(--skip); }

/* Keyword table */
.kwtbl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}
.kwtbl-head .section-title { margin: 0; }
.btn-copy-kws {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-2);
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 9px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
  white-space: nowrap;
}
.btn-copy-kws:hover { color: var(--t-1); border-color: var(--t-4); }
.btn-copy-kws.copied { color: var(--go); border-color: var(--go); background: color-mix(in srgb, var(--go) 8%, var(--bg-0)); }
.btn-copy-kws.error  { color: var(--skip); border-color: var(--skip); }
.kwtbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
  margin-bottom: 6px;
}
.kwtbl th, .kwtbl td {
  padding: 5px 6px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kwtbl th {
  font-weight: 500;
  color: var(--t-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
}
.kwtbl th.kw-rank, .kwtbl td.kw-rank {
  text-align: right;
  width: 22px;
  color: var(--t-4);
  padding-right: 4px;
}
.kwtbl td.kw-rank { font-size: 10px; }
.kwtbl th:nth-child(2), .kwtbl td:nth-child(2) { text-align: left; white-space: normal; }
.kwtbl td.kw { color: var(--t-1); }
.kwtbl td.pos999 { color: var(--skip); }
.kwtbl td.posLow { color: var(--go); }
.kwtbl-foot {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  margin: 0 0 14px;
  letter-spacing: 0.04em;
}

/* Side panel sections */
.side-block { margin-bottom: 16px; }
.side-block:last-child { margin-bottom: 0; }
.kv {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px 10px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.kv dt { color: var(--t-4); text-transform: uppercase; letter-spacing: 0.08em; }
.kv dd { margin: 0; color: var(--t-1); }
.kv dd .pill {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  margin: 1px 2px 1px 0;
  font-size: 10px;
  color: var(--t-2);
}

/* Competitors */
.comp-list {
  display: flex; flex-wrap: wrap; gap: 4px;
  font-family: var(--font-mono); font-size: 11px;
}
.comp { background: var(--bg-2); padding: 3px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--t-2); }

/* Decision panel—primary action zone */
.decide {
  margin-top: 6px;
  padding: 12px;
  background: var(--bg-1);
  border: 1px dashed var(--line-bright);
  border-radius: var(--radius);
}
.decide-actions { display: flex; gap: 6px; margin-bottom: 10px; }
.btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--t-1);
  padding: 8px 14px;
  border-radius: var(--radius);
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .12s;
}
.btn:hover { background: var(--bg-3); border-color: var(--line-bright); }
.btn .gl {
  width: 6px; height: 6px; border-radius: 50%; background: var(--t-3);
}
.btn.keep .gl { background: var(--kept); box-shadow: 0 0 6px var(--kept); }
.btn.skip-btn .gl { background: var(--skipped); }
.btn.defer .gl { background: var(--deferred); }
.btn.keep:hover { background: var(--kept-bg); border-color: var(--kept); color: var(--kept); }
.btn.skip-btn:hover { background: rgba(148,163,184,.1); border-color: var(--skipped); }
.btn.defer:hover { background: rgba(192,132,252,.1); border-color: var(--deferred); }
.btn.active.keep { background: var(--kept-bg); border-color: var(--kept); color: var(--kept); }
.btn.active.skip-btn { background: rgba(148,163,184,.1); border-color: var(--skipped); color: var(--skipped); }
.btn.active.defer { background: rgba(192,132,252,.1); border-color: var(--deferred); color: var(--deferred); }
.btn.primary {
  background: var(--kept-bg);
  border-color: var(--kept);
  color: var(--kept);
}

.note-input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--t-1);
  padding: 8px 10px;
  font-size: 12px;
  resize: vertical;
  min-height: 56px;
  outline: 0;
}
.note-input:focus { border-color: var(--kept); }

.autosave-status {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-4);
  margin-top: 4px;
  height: 12px;
  transition: color .15s;
}
.autosave-status.autosave-pending { color: var(--test); }
.autosave-status.autosave-saved   { color: var(--kept); }

/* Cross-page deep links inside drawer */
.xlinks {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
}
.xlink {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-3);
  background: transparent;
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 3px;
  display: inline-flex; align-items: center; gap: 6px;
}
.xlink:hover { color: var(--kept); border-color: var(--kept); }
.xlink::before { content: '→'; color: var(--t-4); }

/* Outcome capture form (replaces prompt()—Flow 5/9) */
.outcome-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.outcome-form label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-4);
  display: block;
  margin-bottom: 3px;
}
.outcome-form input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--t-1);
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  outline: 0;
}
.outcome-form input:focus { border-color: var(--kept); }

/* ──────────────── Beach lens (Authority Ladder reimagined) ──────────────── */

.beach {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.beach-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.beach-head .name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.beach-head .name .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  margin-left: 8px;
  letter-spacing: 0.04em;
}
.beach-head .ladder {
  display: flex; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.rung {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--t-3);
}
.rung.long { color: var(--long); border-color: var(--long); background: rgba(74,222,128,.06); }
.rung.long b { font-size: 11px; }
.rung.locked { opacity: 0.4; }

/* Beach body—rails stack vertically with full-width header bars */
.beach-body { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.rail-strip {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-1);
}
.rail-strip.now { border-color: var(--long); }
.rail-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-family: var(--font-mono);
  min-width: 0;
}
.rail-name {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  flex-shrink: 0;
}
.rail-name.long { color: var(--long); }
.rail-name.mid  { color: var(--mid); }
.rail-name.head { color: var(--head); }
.rail-meta {
  color: var(--t-4);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.rail-count {
  color: var(--t-3);
  font-weight: 600;
  flex-shrink: 0;
}
.rail-tiles { padding: 4px 0; }
.rail-tiles .brief { border-bottom: 1px solid var(--line); }
.rail-tiles .brief:last-child { border-bottom: 0; }
.rail-empty {
  padding: 16px 14px;
  font-size: 12px;
  color: var(--t-4);
  font-style: italic;
}
.rail-strip.locked .rail-tiles { opacity: 0.5; pointer-events: none; filter: blur(0.5px) saturate(0.5); }
.rail-label {
  padding: 14px 14px;
  border-right: 1px solid var(--line);
  background: var(--bg-1);
  position: relative;
}
.rail-label .nm {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-3);
}
.rail-label .nm.long { color: var(--long); }
.rail-label .nm.mid { color: var(--mid); }
.rail-label .nm.head { color: var(--head); }
.rail-label .kd-band {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  margin-top: 2px;
  letter-spacing: 0.05em;
}
.rail-label .role {
  font-size: 11px;
  color: var(--t-2);
  margin-top: 6px;
  text-wrap: balance;
}
.rail-label .role.now {
  color: var(--long);
  font-weight: 500;
}
.rail-strip.now {
  background:
    linear-gradient(90deg, rgba(74,222,128,.04) 0%, transparent 60%);
}
.rail-strip.collapsed .rail-tiles { padding: 6px 14px; min-height: 0; }
.rail-strip.collapsed .rail-tiles .brief { background: var(--bg-2); }

.rail-tiles {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rail-empty {
  padding: 14px;
  font-size: 12px;
  color: var(--t-4);
  font-style: italic;
}

.rail-strip.locked .rail-tiles { opacity: 0.4; pointer-events: none; }
.rail-strip.locked .rail-label::after {
  content: 'locked · ' attr(data-unlock);
  position: absolute;
  bottom: 8px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-4);
  width: 110px;
}

/* ──────────────── Gap Map lens (Breaking News replacement—fake-functional) ──────────────── */

.gapmap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.gapmap-quad {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  min-height: 160px;
}
.quad-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.quad-head .name {
  font-size: 13px;
  font-weight: 600;
}
.quad-head .desc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  letter-spacing: 0.02em;
}
.quad-head .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
}

/* ──────────────── Decision Log lens ──────────────── */

.log-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
@media (max-width: 800px) {
  .log-stats { grid-template-columns: repeat(3, 1fr); }
}
.log-stats > div { background: var(--bg-1); padding: 12px 14px; }
.log-stats .v {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--t-1);
}
.log-stats .v.kept { color: var(--kept); }
.log-stats .v.skipped { color: var(--skipped); }
.log-stats .v.deferred { color: var(--deferred); }
.log-stats .l {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-4);
  margin-top: 2px;
}

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--t-3);
  font-size: 13px;
}
.empty .big {
  font-family: var(--font-mono);
  color: var(--t-4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}
.empty .hint { margin-top: 16px; font-size: 12px; color: var(--t-4); }
.empty .hint code {
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
}

/* ──────────────── Command palette ──────────────── */

.cmdk-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  /* cmdK sits above the help popover so it never gets visually trapped behind. */
  z-index: var(--z-cmdk);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.cmdk {
  width: min(640px, 92vw);
  background: var(--bg-1);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  overflow: hidden;
}
.cmdk-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 16px 18px;
  font-size: 15px;
  color: var(--t-1);
  border-bottom: 1px solid var(--line);
}
.cmdk-input::placeholder { color: var(--t-4); }
.cmdk-list { max-height: 60vh; overflow-y: auto; }
.cmdk-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  border-left: 2px solid transparent;
}
.cmdk-item:hover, .cmdk-item.sel {
  background: var(--bg-3);
  border-left-color: var(--kept);
}
.cmdk-item .vd { width: 7px; height: 7px; border-radius: 50%; background: var(--t-4); }
.cmdk-item.go .vd { background: var(--go); }
.cmdk-item.test .vd { background: var(--test); }
.cmdk-item.skip .vd { background: var(--skip); }
.cmdk-item .label { color: var(--t-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-item .meta { font-family: var(--font-mono); font-size: 11px; color: var(--t-4); }
.cmdk-section {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-4);
  padding: 10px 16px 4px;
  border-top: 1px solid var(--line);
}
.cmdk-section:first-child { border-top: 0; }
.cmdk-foot {
  border-top: 1px solid var(--line);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  display: flex; gap: 14px;
}

/* ──────────────── Footer status ──────────────── */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  padding: 6px 18px;
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.footer .right { margin-left: auto; }

/* ──────────────── Docs lens ──────────────── */

.docs-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  margin: -16px -20px -80px;
  height: calc(100vh - 50px); /* topbar */
  min-height: 0;
}

.docs-toc {
  border-right: 1px solid var(--line);
  background: var(--bg-1);
  padding: 18px 16px 40px;
  overflow-y: auto;
  font-size: 12px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100%;
}
.docs-toc .toc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-1);
  letter-spacing: -0.01em;
}
.docs-toc .toc-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-4);
  letter-spacing: 0.05em;
  margin-top: 2px;
  margin-bottom: 12px;
}
.toc-search {
  display: block;
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--t-1);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  margin-bottom: 14px;
  outline: none;
}
.toc-search:focus { border-color: var(--kept); background: var(--bg-1); }
.toc-empty {
  font-size: 11px;
  color: var(--t-4);
  font-style: italic;
  padding: 8px;
  background: var(--bg-2);
  border-radius: 3px;
  margin-bottom: 12px;
}
.toc-group { margin-bottom: 14px; }
.toc-group-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--t-4);
  margin-bottom: 4px;
  padding: 0 8px;
}
.toc-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--t-2);
  padding: 5px 8px 5px 10px;
  font-size: 12px;
  letter-spacing: -0.005em;
  border-radius: 0 3px 3px 0;
  line-height: 1.35;
}
.toc-item:hover { color: var(--t-1); background: var(--bg-2); }
.toc-item.active {
  color: var(--kept);
  border-left-color: var(--kept);
  background: var(--bg-2);
}

.docs-content {
  overflow-y: auto;
  padding: 0;
  scroll-behavior: smooth;
}
.docs-prose {
  max-width: 760px;
  padding: 30px 48px 120px;
  color: var(--t-1);
  font-size: 14px;
  line-height: 1.65;
}
.docs-prose section {
  padding-top: 8px;
  margin-bottom: 32px;
  scroll-margin-top: 16px;
}
.docs-prose h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 36px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.docs-prose section:first-child h1 { margin-top: 0; }
.docs-prose h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 24px 0 10px;
  color: var(--t-1);
}
.docs-prose p {
  margin: 0 0 12px;
  color: var(--t-2);
  text-wrap: pretty;
}
.docs-prose .lede {
  font-size: 16px;
  color: var(--t-1);
  margin-bottom: 16px;
  text-wrap: balance;
}
.docs-prose ul, .docs-prose ol {
  margin: 0 0 12px;
  padding-left: 22px;
  color: var(--t-2);
}
.docs-prose li { margin-bottom: 6px; line-height: 1.55; }
.docs-prose b { color: var(--t-1); font-weight: 600; }
.docs-prose em { color: var(--t-1); font-style: italic; }
.docs-prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;             /* relative so it scales with surrounding text */
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 0 5px;                /* zero vertical padding—the border sits inside the line-box */
  border-radius: 3px;
  color: var(--t-1);
  word-break: break-word;        /* long identifiers / urls don't blow out a parent cell */
  vertical-align: baseline;
}
.docs-prose a {
  color: var(--kept);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed rgba(56,189,248,.4);
}
.docs-prose a:hover { border-bottom-style: solid; }
/* In-prose anchor buttons (docs.jsx cross-section jumps)—visually identical
   to <a> but properly focusable + Enter-firing by default. */
.docs-prose .docs-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--kept);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(56,189,248,.4);
  display: inline;
  line-height: inherit;
}
@media (hover: hover) {
  .docs-prose .docs-link:hover { border-bottom-style: solid; }
}
.docs-prose .docs-link:focus-visible {
  outline: 2px solid var(--kept);
  outline-offset: 2px;
}
.docs-prose .warn {
  border-left: 2px solid var(--test);
  padding: 8px 12px;
  background: rgba(251,191,36,.05);
  font-size: 13px;
  color: var(--t-1);
  border-radius: 0 3px 3px 0;
}

/* Tables in docs */
.docs-tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 16px;
  font-size: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.docs-tbl th, .docs-tbl td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--t-2);
  vertical-align: top;
}
.docs-tbl tr:last-child td { border-bottom: 0; }
.docs-tbl th {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-4);
  font-weight: 500;
  background: var(--bg-2);
}
.docs-tbl td b { color: var(--t-1); }
.docs-tbl.kbd-tbl td:first-child {
  font-family: var(--font-mono);
  width: 140px;
}

kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--line-bright);
  border-bottom-width: 2px;
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--t-1);
  margin: 0 2px;
}

/* Inline keyword color words */
.kw-keep { color: var(--kept); font-weight: 600; }
.kw-skip { color: var(--skipped); font-weight: 600; }
.kw-defer { color: var(--deferred); font-weight: 600; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin: 0 4px; }
.dot.go { background: var(--go); box-shadow: 0 0 6px var(--go); }
.dot.test { background: var(--test); }
.dot.skip { background: var(--skip); }

/* Rail name highlights */
.rail-r { color: var(--long); }
.rail-y { color: var(--mid); }
.rail-d { color: var(--head); }

/* Content type chip in docs lists */
.ct-chip {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

.docs-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-2);
  border: 1px solid var(--line-bright);
  color: var(--t-1);
  padding: 6px 12px;
  border-radius: 3px;
  margin-top: 4px;
}
.docs-cta:hover { background: var(--kept-bg); border-color: var(--kept); color: var(--kept); }

/* Docs prose: tables, code blocks, part banners, third-level headings */
.docs-prose h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-1);
  letter-spacing: -0.005em;
  margin: 22px 0 8px;
}
.docs-prose .docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 12px 0 18px;
  background: var(--bg-1);
  table-layout: auto;
  word-break: break-word;        /* prevents overflow when a cell holds a long URL or identifier */
}
.docs-prose .docs-table th,
.docs-prose .docs-table td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.docs-prose .docs-table td > p:last-child,
.docs-prose .docs-table td > ul:last-child { margin-bottom: 0; }
.docs-prose .docs-table th {
  background: var(--bg-2);
  font-weight: 600;
  color: var(--t-1);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.docs-prose .docs-table tbody tr:hover { background: var(--bg-2); }
.docs-prose .docs-table code {
  font-size: 11px;
  background: var(--bg-2);
  padding: 1px 4px;
  border-radius: 2px;
}
.docs-prose .docs-block {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--t-1);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px;
  margin: 8px 0 18px;
  overflow-x: auto;
  white-space: pre;
  /* never let a code block bleed past the prose column even on small screens */
  max-width: 100%;
  box-sizing: border-box;
}
.docs-prose .docs-part-banner {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kept);
  background: var(--kept-bg);
  border: 1px solid var(--kept);
  border-radius: 3px;
  padding: 10px 14px;
  margin: 32px 0 14px;
}
.docs-prose .docs-part-banner:first-child { margin-top: 0; }

/* Inline color-coded text labels used in docs prose. NOT compounded with .dot —
   .dot is an 8×8 inline-block circle bullet, and chaining color-text classes
   onto it constrained the bold text to a tiny box (bug fixed 2026-04-29).
   Scoped under .docs-prose so they outrank the generic `.docs-prose b` color
   override (specificity 0,0,2,1 vs 0,0,1,1). */
.docs-prose .go-text   { color: var(--go); }
.docs-prose .test-text { color: var(--test); }
.docs-prose .kept-text { color: var(--kept); }
.docs-prose .skip-text { color: var(--skip); }
.docs-prose .rail-r,
.docs-prose .rail-y,
.docs-prose .rail-d { /* same specificity hoist for the Beach-rail color words */ }
.docs-prose .rail-r { color: var(--long); }
.docs-prose .rail-y { color: var(--mid); }
.docs-prose .rail-d { color: var(--head); }

/* Stylized callout block in docs (definition / implication / how-to) */
.docs-prose .docs-callout {
  border-left: 3px solid var(--kept);
  background: var(--bg-2);
  padding: 8px 12px;
  margin: 8px 0 14px;
  font-size: 13px;
  line-height: 1.55;
}
.docs-prose .docs-callout.warn { border-left-color: var(--skip); }
.docs-prose .docs-callout-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kept);
  margin-bottom: 3px;
}
.docs-prose .docs-callout.warn .docs-callout-label { color: var(--skip); }

.docs-end {
  margin-top: 40px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* small utilities */
.sr { position: absolute; left: -9999px; }
.flex { display: flex; }
.gap-6 { gap: 6px; }
.gap-12 { gap: 12px; }
.mono { font-family: var(--font-mono); }
.mut { color: var(--t-3); }
.dim { color: var(--t-4); }
.tnum { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════
   2026-04-28 · TrendHunter pivot—overlay tokens & treatments
   ════════════════════════════════════════════════════════════════ */

:root {
  --engagement: #38bdf8;       /* engagement signal—same family as 'kept' but distinct */
  --engagement-bg: rgba(56,189,248,.10);
  --engagement-line: rgba(56,189,248,.28);
  --paused-fg: #6b7a93;        /* paused content foreground */
  --paused-bg: rgba(107,122,147,.06);
  --paused-line: rgba(107,122,147,.22);
}

/* ── Pivot banner (sitewide context strip) ─────────────────────── */
.pivot-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  background: linear-gradient(90deg, rgba(74,222,128,.05), rgba(56,189,248,.04) 50%, transparent);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--t-2);
}
.pb-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--go);
  box-shadow: 0 0 8px var(--go);
  animation: pb-pulse 2.4s ease-in-out infinite;
}
@keyframes pb-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.pb-label { color: var(--go); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.pb-sep { color: var(--t-4); }
.pb-link {
  cursor: pointer;
  color: var(--kept);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.pb-link:hover { color: var(--t-1); }

/* ── TH collection chip ─────────────────────────────────────────── */
.coll-chip { letter-spacing: .02em; }
.coll-glyph {
  display: inline-block;
  margin-right: 4px;
  color: var(--t-2);
  font-family: var(--font-mono);
  transform: translateY(-1px);
}
.coll-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--t-2);
}
.coll-tag.big {
  font-size: 11px;
  padding: 3px 8px;
  letter-spacing: .05em;
  color: var(--t-1);
  text-transform: uppercase;
}

/* Subtle left-border accent when filtering by collection (3-collection IA) */
.brief.coll-mind-body   { --coll-tint: #4ade80; }
.brief.coll-experiences { --coll-tint: #fbbf24; }
.brief.coll-everyday    { --coll-tint: #38bdf8; }

/* ── Content-type chip ranking (Orange primary, Purple paused) ── */
.ct-chips .chip { transition: opacity .15s ease, border-color .15s ease; }
.ct-chip-btn.tone-primary {
  border-color: var(--ct-orange);
  background: rgba(249,115,22,.07);
  color: var(--t-1);
  font-weight: 500;
}
.ct-chip-btn.tone-primary:hover { background: rgba(249,115,22,.14); }
.ct-chip-btn.tone-secondary { opacity: .82; }
.ct-chip-btn.tone-paused {
  opacity: .55;
  border-style: dashed;
  border-color: var(--paused-line);
  color: var(--t-3);
  background: var(--paused-bg);
}
.ct-chip-btn.tone-paused:hover { opacity: .85; }

.chip-tag {
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid;
}
.primary-tag {
  color: var(--ct-orange);
  border-color: rgba(249,115,22,.4);
  background: rgba(249,115,22,.07);
}
.paused-tag {
  color: var(--paused-fg);
  border-color: var(--paused-line);
  background: var(--paused-bg);
}

/* ── Paused-state treatment for L&E briefs ──────────────────────── */
.brief.paused .brief-rail { background: var(--paused-line); opacity: .5; }
.brief.paused .topic { color: var(--t-2); }
.brief.paused .meta { color: var(--t-4); }
.brief.paused:not(.expanded) { opacity: .72; filter: saturate(.55); }
.brief.paused:hover { opacity: 1; filter: saturate(.85); }

.paused-inline {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paused-fg);
  background: var(--paused-bg);
  border: 1px dashed var(--paused-line);
  border-radius: 2px;
  vertical-align: middle;
}

.paused-banner {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-left: 2px solid var(--paused-fg);
  background: var(--paused-bg);
  color: var(--t-2);
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0 3px 3px 0;
}
.paused-banner b { color: var(--t-1); }

.t2.t2-paused { /* slight tint on whole drawer when paused */
  background: linear-gradient(180deg, var(--paused-bg) 0%, transparent 80px);
}

.row-paused { opacity: .55; }
.pill-paused {
  background: var(--paused-bg) !important;
  color: var(--paused-fg) !important;
  border-color: var(--paused-line) !important;
  text-decoration: line-through;
}

/* Disabled keep button when paused */
.btn.keep:disabled, .btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  filter: grayscale(.6);
}

/* ── Engagement signal pill + bar ───────────────────────────────── */
.eng-pill {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--engagement);
  background: var(--engagement-bg);
  border: 1px solid var(--engagement-line);
  border-radius: 2px;
}
.eng-bar-wrap { margin-top: 4px; }
.eng-bar {
  height: 4px;
  width: 100%;
  background: var(--bg-2);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.eng-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--engagement) 0%, var(--go) 100%);
  border-radius: 2px;
}
.eng-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
}
.eng-v {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--engagement);
  font-variant-numeric: tabular-nums;
}

/* KPI engagement (rail card) */
.kpi-engagement {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--engagement-line);
  border-radius: var(--radius);
}
.kpi-engagement .ke-bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
}
.kpi-engagement .ke-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--engagement), var(--go));
}
.kpi-engagement .ke-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.kpi-engagement .ke-v {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--engagement);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.kpi-engagement .ke-l {
  font-size: 11px;
  color: var(--t-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: var(--font-mono);
}
.kpi-engagement .ke-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--test);
  border: 1px solid var(--test-line);
  background: var(--test-bg);
  padding: 1px 6px;
  border-radius: 2px;
}

/* ── Fit pills (persona overlay) ────────────────────────────────── */
.fit-pill {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  border-radius: 2px;
  border: 1px solid;
}
.fit-pill.fit-high   { color: var(--go);   background: var(--go-bg);   border-color: var(--go-line); }
.fit-pill.fit-medium { color: var(--test); background: var(--test-bg); border-color: var(--test-line); }
.fit-pill.fit-low    { color: var(--skip); background: var(--skip-bg); border-color: var(--skip-line); }
.fit-pill.fit-n\/a   { color: var(--t-4);  background: var(--bg-2);    border-color: var(--line); }

/* ── Persona picker ─────────────────────────────────────────────── */
.persona-picker {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.persona-picker label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.persona-select {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-bright);
  color: var(--t-1);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 2px;
}
.persona-select:focus {
  outline: none;
  border-color: var(--ct-orange);
}

/* ── Throughput strikethrough (legacy targets) ──────────────────── */
.strike-old {
  color: var(--t-4);
  text-decoration: line-through;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Ensure the chip-row wraps cleanly when chips multiply */
.chip-row { flex-wrap: wrap; gap: 4px; }

/* ════════════════════════════════════════════════════════════════
   Collections lens—refined header, breathable beaches, clear rails
   ════════════════════════════════════════════════════════════════ */

/*—Lens header—*/
.collections-header {
  display: block;                 /* override flex from .lens-header */
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.lens-header-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.collections-header h1 {
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 0;
}
.lens-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-3);
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: 2px 8px;
  border-radius: 2px;
}
.lens-blurb {
  margin: 0 0 14px;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-2);
  text-wrap: pretty;
}
.lens-blurb b { color: var(--t-1); font-weight: 600; }
.lens-targets {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.lt-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-4);
}
.lt-val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--long);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.lt-unit {
  font-size: 12px;
  color: var(--t-3);
}

/*—Beach card—generous padding, three clear blocks—*/
.beach { margin-bottom: 22px; border-radius: 4px; }
.beach .beach-head {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(280px, auto) minmax(280px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 20px 24px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border-bottom: 1px solid var(--line);
}

/* Identity (glyph + name + descriptor) */
.beach-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.beach-glyph {
  font-family: var(--font-mono);
  font-size: 32px;
  line-height: 1;
  color: var(--t-2);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
  background: var(--bg-1);
  flex-shrink: 0;
}
.beach[data-coll="mind-body"] .beach-glyph        { color: #4ade80; border-color: rgba(74,222,128,.45); }
.beach[data-coll="experiences"] .beach-glyph      { color: #fbbf24; border-color: rgba(251,191,36,.45); }
.beach[data-coll="everyday-living"] .beach-glyph  { color: #38bdf8; border-color: rgba(56,189,248,.45); }
.beach-naming { min-width: 0; }
.beach-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--t-1);
}
.beach-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--t-3);
  line-height: 1.4;
  text-wrap: pretty;
}

/* Stats (numeric block) */
.beach-stats {
  display: flex;
  gap: 24px;
  padding: 4px 18px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.bs-cell { display: flex; flex-direction: column; align-items: flex-start; }
.bs-v {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--t-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.bs-pct { font-size: 14px; color: var(--t-3); margin-left: 1px; }
.bs-l {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--t-4);
  margin-top: 4px;
}

/* Progress (rail unlock state) */
.beach-progress { min-width: 0; }
.bp-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bp-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--t-3);
}
.bp-step.done { color: var(--long); }
.bp-step.pending { color: var(--t-4); }
.bp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  flex-shrink: 0;
}
.bp-step.done .bp-dot { background: currentColor; }
.bp-frac {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: inherit;
  opacity: .8;
}

/*—Rails—two-line headers, plain-language purpose—*/
.beach-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 16px;
  background: var(--bg-0, var(--bg-1));
}
.rail-strip {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-1);
}
.rail-strip.now {
  border-color: var(--long);
  box-shadow: inset 3px 0 0 var(--long);
}
.rail-strip.locked { opacity: 0.78; }

.rail-strip .rail-bar {
  display: flex !important;       /* override generic .rail-bar */
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);  /* override mono */
  white-space: normal;
}
.rail-bar-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rail-bar-main .rail-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}
.rail-bar-main .rail-purpose {
  font-size: 13px;
  color: var(--t-2);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  text-wrap: pretty;
}
.rail-strip.locked .rail-bar-main .rail-purpose { color: var(--t-3); font-style: italic; }

.rail-bar-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
  letter-spacing: .03em;
}
.rail-bar-meta .rail-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.rail-bar-meta .rail-meta-item b {
  color: var(--t-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rail-bar-meta .rail-count {
  font-size: 16px;
  font-weight: 600;
  color: var(--t-1);
  font-variant-numeric: tabular-nums;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  margin-left: 4px;
}

/* ─────── Beach columns layout (3 collections side-by-side) ─────── */
/* Each .beach becomes a narrow column with vertically-stacked head/snapshot/rails. */
.beach-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}
.beach-columns .beach {
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-1);
  min-width: 0;
}
.beach-columns .beach .beach-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 14px 14px 12px;
}
.beach-columns .beach-identity {
  gap: 10px;
}
.beach-columns .beach-glyph {
  font-size: 22px;
  width: 32px;
  height: 32px;
}
.beach-columns .beach-name { font-size: 15px; }
.beach-columns .beach-desc { font-size: 11px; line-height: 1.35; margin-top: 2px; }
.beach-columns .beach-stats {
  gap: 14px;
  padding: 8px 0;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
}
.beach-columns .bs-v { font-size: 17px; }
.beach-columns .bs-l { font-size: 8px; }
.beach-columns .beach-progress { width: 100%; }
.beach-columns .bp-row { gap: 4px; font-size: 9px; }
.beach-columns .topic-snapshot { padding: 10px 14px; }
.beach-columns .topic-snapshot .ts-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.beach-columns .beach-body {
  padding: 12px 10px;
  gap: 10px;
}
.beach-columns .rail-strip .rail-bar {
  /* Override the !important horizontal flex from the wide layout—at column
     widths the meta block has to stack under the main block. */
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}
.beach-columns .rail-bar-main .rail-name { font-size: 10px; }
.beach-columns .rail-bar-main .rail-purpose { font-size: 12px; line-height: 1.35; }
.beach-columns .rail-bar-meta {
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10px;
}
.beach-columns .rail-bar-meta .rail-count {
  padding-left: 8px;
  font-size: 13px;
}
.beach-columns .rail-tiles {
  padding: 0;
}
/* At narrower viewports, fall back to 2-up then 1-up rather than crushing
   columns into unusable widths. */
@media (max-width: 1280px) {
  .beach-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .beach-columns { grid-template-columns: 1fr; }
}

.rail-strip .rail-tiles {
  padding: 6px 0;
  display: block;
  background: var(--bg-1);
}
.rail-strip.locked .rail-tiles {
  opacity: 0.45;
  pointer-events: none;
  filter: saturate(.4);
}

/* Responsive collapse for the beach header on narrower viewports */
@media (max-width: 1180px) {
  .beach .beach-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .beach-stats { border-left: 0; border-right: 0; padding: 0; }
}

/* ── v4 audit additions ───────────────────────────────────────────────── */

/* Compounding strip—global, bottom of Beach lens */
.compounding-strip {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.cs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.cs-head h3 { font-size: 14px; font-weight: 600; color: var(--t-1); margin: 0; }
.cs-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--t-3); }
.cs-help { font-size: 12px; color: var(--t-2); margin: 0 0 14px; line-height: 1.55; }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 12px; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr; } }
.cs-cell {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.cs-cell-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.cs-glyph { font-size: 16px; }
.cs-name { font-weight: 600; font-size: 13px; color: var(--t-1); }
.cs-delta { margin-left: auto; font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 3px; }
.cs-delta.up   { color: var(--go);    background: var(--go-bg);   border: 1px solid var(--go-line); }
.cs-delta.down { color: var(--skip);  background: var(--skip-bg); border: 1px solid var(--skip-line); }
.cs-delta.flat { color: var(--t-3);   background: rgba(255,255,255,.04); border: 1px solid var(--line-2); }
.cs-spark { width: 100%; height: 28px; color: var(--t-2); margin: 4px 0 6px; }
.cs-cell[data-coll="mind-body"]       .cs-spark { color: var(--go); }
.cs-cell[data-coll="experiences"]     .cs-spark { color: var(--test); }
.cs-cell[data-coll="everyday-living"] .cs-spark { color: var(--kept); }
.cs-foot { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; color: var(--t-3); }
.cs-caveat {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(248,113,113,.05);
  border-left: 2px solid var(--skip);
  border-radius: 3px;
  font-size: 11px;
  color: var(--t-2);
  line-height: 1.55;
}
.cs-caveat b { color: var(--t-1); }
@media (max-width: 1180px) {
  .cs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Authority context—drawer section (data team's position-1-25 framework) */
.authority-context {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 4px 0 10px;
}
.authority-context.in-zone   { border-left: 3px solid var(--go); }
.authority-context.foothold  { border-left: 3px solid var(--test); }
.authority-context.cold-start{ border-left: 3px solid var(--t-3); }
.ac-pill {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ac-pill.in   { background: var(--go-bg);   color: var(--go);   border: 1px solid var(--go-line); }
.ac-pill.mid  { background: var(--test-bg); color: var(--test); border: 1px solid var(--test-line); }
.ac-pill.cold { background: rgba(107,122,147,.10); color: var(--t-3); border: 1px solid var(--line-2); }
.ac-text { font-size: 12px; color: var(--t-2); line-height: 1.55; }

/* Worth Testing operational meaning—inline drawer note */
.verdict-operational {
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: var(--test-bg);
  border-left: 2px solid var(--test);
  border-radius: 3px;
  font-size: 12px;
  color: var(--t-2);
}
.verdict-operational b { color: var(--test); }
/* Monitor banner: teal, not the default Worth-Testing amber, so the operational
   note's color matches the Monitor verdict (else it reads as Worth Testing). */
.verdict-operational.v-monitor { background: var(--monitor-bg); border-left-color: var(--monitor); }
.verdict-operational.v-monitor b { color: var(--monitor); }

/* Cross-pub multiplication—Revenue overlay */
.cross-pub-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(56,189,248,.12);
  color: var(--kept);
  border: 1px solid rgba(56,189,248,.30);
  padding: 1px 6px;
  border-radius: 3px;
}
.cross-pub-total td { border-top: 1px solid var(--line-bright); padding-top: 8px !important; }

/* Revenue · portfolio projection (Stage 1, 2026-04-28) */
.rev-assumption-bar {
  margin: 8px 0 10px;
  padding: 7px 10px;
  background: var(--bg-1);
  border-left: 2px solid var(--kept);
  border-radius: 3px;
  font-size: 11px;
  color: var(--t-2);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.rev-assumption-bar b { color: var(--t-1); font-weight: 600; }
.rev-portfolio { font-size: 11px; table-layout: fixed; width: 100%; }
.rev-portfolio th { font-size: 9px; }
.rev-portfolio td, .rev-portfolio th { padding: 5px 4px; }
/* Column sizing—sized to fit even paused/small-N pills without clipping. */
.rev-portfolio col.col-pub  { width: 38%; }
.rev-portfolio col.col-ecpm { width: 14%; }
.rev-portfolio col.col-rank { width: 18%; }
.rev-portfolio col.col-pv   { width: 14%; }
.rev-portfolio col.col-rev  { width: 16%; }
.rev-portfolio td.kw {
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.rev-portfolio td.kw .pill {
  display: inline-block;
  margin-top: 1px;
}
.rev-portfolio .rev-section-row td {
  padding: 6px 0 2px !important;
  border-top: 1px solid var(--line-2);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-3);
}
.rev-portfolio .rev-section-row:first-child td { border-top: none; }
.rev-caveats {
  margin-top: 12px;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 11px;
}
.rev-caveats summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t-2);
  user-select: none;
}
.rev-caveats summary:hover { color: var(--t-1); }
.rev-caveats ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--t-2);
  line-height: 1.5;
}
.rev-caveats li { margin-bottom: 4px; }
.rev-caveats li b { color: var(--t-1); }
.rev-footer {
  font-size: 10px;
  margin-top: 8px;
  letter-spacing: 0.04em;
  color: var(--t-3);
}
.gsc-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(56,189,248,.12);
  color: var(--kept);
  border: 1px solid rgba(56,189,248,.30);
  padding: 1px 6px;
  border-radius: 3px;
}
.rev-rank-cell { font-size: 11px; white-space: nowrap; }
.rank-gsc {
  color: var(--kept);
  font-weight: 600;
}
.rank-kd {
  color: var(--t-2);
}
.rank-src {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 3px;
  padding: 0 4px;
  border-radius: 2px;
  vertical-align: 1px;
}
.rank-gsc .rank-src {
  background: rgba(56,189,248,.15);
  color: var(--kept);
  border: 1px solid rgba(56,189,248,.28);
}
.rank-kd .rank-src {
  background: var(--bg-2);
  color: var(--t-3);
  border: 1px solid var(--line-2);
}

/* ──────── Verdict breakdown panel (2026-04-28) ──────────────── */
/* Show-your-work for the verdict—score components, hard-skip checks,
   authority context, drift between hardcoded and runtime verdicts. */
.verdict-breakdown {
  margin: 14px 0 18px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--t-3);
  border-radius: var(--radius);
}
.verdict-breakdown[open] { border-left-color: var(--kept); }
.verdict-breakdown summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.vb-summary-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-2);
}
.verdict-breakdown summary:hover .vb-summary-label { color: var(--t-1); }

/* Verdict header in drawer—inline color-coded pill next to the section
   title, so operator sees the call before reading the prose. */
.verdict-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verdict-header-pill {
  font-family: var(--font-sans, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  padding: 3px 10px;
  border-radius: 3px;
}
.verdict-header.v-high-opportunity .verdict-header-pill {
  background: var(--go);
  color: var(--bg-0);
}
.verdict-header.v-worth-testing .verdict-header-pill {
  background: var(--test);
  color: var(--bg-0);
}
.verdict-header.v-skip .verdict-header-pill {
  background: var(--skip);
  color: var(--bg-0);
}

/* Monitor verdict — a TH-pipeline trend below the search-demand floor (advisory,
   not skip). Mirrors the go/test/skip verdict styling across every surface. */
.kpi .v.monitor { color: var(--monitor); }
.brief.v-monitor .brief-rail { background: var(--monitor); }
.brief.v-monitor .verdict-glyph .vd { background: var(--monitor); box-shadow: 0 0 6px var(--monitor); }
.brief.v-monitor .angle { border-left-color: var(--monitor); }
.cmdk-item.monitor .vd { background: var(--monitor); }
.vb-final-verdict.v-monitor { background: var(--monitor); color: var(--bg-0); }
.compare-verdict.v-monitor { color: var(--monitor); }
.sens-v-monitor .sens-replay-v { color: var(--monitor); }
.verdict-header.v-monitor .verdict-header-pill { background: var(--monitor); color: var(--bg-0); }
.vb-summary-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--t-4);
  margin-left: 6px;
}
.verdict-breakdown[open] .vb-summary-hint::before { content: 'expanded—'; }
.verdict-breakdown[open] .vb-summary-hint { content: 'click to collapse'; }
.vb-drift-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--test-bg);
  color: var(--test);
  border: 1px solid var(--test-line);
  padding: 2px 6px;
  border-radius: 3px;
}
.vb-soft-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-2);
  color: var(--t-3);
  border: 1px solid var(--line-2);
  padding: 2px 6px;
  border-radius: 3px;
}
.vb-grid {
  margin-top: 12px;
  display: grid;
  gap: 14px;
}
.vb-section h4 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-3);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.vb-section h4 .vb-h-meta {
  font-weight: 400;
  color: var(--t-4);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 9px;
}
.vb-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}
.vb-tbl th, .vb-tbl td {
  padding: 4px 6px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.vb-tbl th {
  font-weight: 500;
  color: var(--t-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
}
.vb-tbl th:first-child, .vb-tbl td:first-child {
  text-align: left;
  color: var(--t-1);
}
.vb-tbl .vb-detail {
  color: var(--t-4);
  font-size: 10px;
  margin-left: 4px;
}
.vb-tbl .vb-contrib { color: var(--t-1); font-weight: 500; }
.vb-tbl .vb-total-row td {
  border-top: 1px solid var(--line-bright);
  border-bottom: none;
  padding-top: 6px;
  font-size: 12px;
}
.vb-cuts {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-3);
  letter-spacing: 0.04em;
}
.vb-cuts b { color: var(--t-1); margin: 0 3px; }
.vb-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}
.vb-checks li {
  display: grid;
  grid-template-columns: 14px auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 3px 6px;
  background: var(--bg-2);
  border-left: 2px solid var(--line-2);
  border-radius: 2px;
}
.vb-checks li.pass { border-left-color: var(--go); }
.vb-checks li.fail { border-left-color: var(--skip); background: var(--skip-bg); }
.vb-checks li.advisory { border-left-color: var(--monitor); background: var(--monitor-bg); }
.vb-check-icon { font-family: var(--font-mono); font-weight: 600; }
.vb-checks li.pass .vb-check-icon { color: var(--go); }
.vb-checks li.fail .vb-check-icon { color: var(--skip); }
.vb-checks li.advisory .vb-check-icon { color: var(--monitor); }
.vb-check-label { color: var(--t-1); }
.vb-check-detail {
  color: var(--t-3);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: right;
}
.vb-gap-pill {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--test-bg);
  color: var(--test);
  border: 1px solid var(--test-line);
  padding: 0 4px;
  border-radius: 2px;
}
.vb-auth {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
}
.vb-auth-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 3px;
}
.vb-auth-pill.auth-in-zone { background: var(--go); color: var(--bg-0); }
.vb-auth-pill.auth-foothold { background: var(--test-bg); color: var(--test); border: 1px solid var(--test-line); }
.vb-auth-pill.auth-cold-start { background: var(--skip-bg); color: var(--skip); border: 1px solid var(--skip-line); }
.vb-auth-detail { color: var(--t-3); font-family: var(--font-mono); font-size: 10px; }
.vb-gaps-callout {
  font-size: 11px;
  color: var(--t-2);
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  line-height: 1.5;
}
.vb-gaps-callout b { color: var(--t-1); }
.vb-final {
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--bg-0);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
}
.vb-final-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-3);
}
.vb-final-verdict {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 3px;
}
.vb-final-verdict.v-high-opportunity    { background: var(--go);    color: var(--bg-0); }
.vb-final-verdict.v-worth-testing { background: var(--test);  color: var(--bg-0); }
.vb-final-verdict.v-skip       { background: var(--skip);  color: var(--bg-0); }
.vb-final-detail {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-3);
  letter-spacing: 0.02em;
}
.vb-final-detail code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--t-2);
}

/* ──────── Engagement panel—content strategist's framework, 2026-04-28 ──────── */
.eng-pill.eng-live {
  background: rgba(56,189,248,.12);
  color: var(--kept);
  border: 1px solid rgba(56,189,248,.30);
}
.eng-pill.eng-proxy {
  background: var(--bg-2);
  color: var(--t-3);
  border: 1px dashed var(--line-2);
}
.eng-source-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}
.eng-source-pill.eng-live {
  background: rgba(56,189,248,.15);
  color: var(--kept);
  border: 1px solid rgba(56,189,248,.30);
}
.eng-source-pill.eng-proxy {
  background: var(--bg-2);
  color: var(--t-3);
  border: 1px dashed var(--line-2);
}
.eng-framework-label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--t-2);
}
.eng-components {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 8px;
}
.eng-components th, .eng-components td {
  padding: 4px 6px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.eng-components th {
  font-weight: 500;
  color: var(--t-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
}
.eng-components th:first-child, .eng-components td:first-child {
  text-align: left;
  color: var(--t-1);
}
.eng-components tr.src-proxy td:first-child { color: var(--t-2); }
.eng-components tr.src-missing td { color: var(--t-4); font-style: italic; }
.eng-asterisk { color: var(--t-4); margin-left: 2px; font-weight: 400; }
.eng-gap {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--test-bg);
  color: var(--test);
  border: 1px solid var(--test-line);
  padding: 0 4px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: 1px;
}
.eng-foot {
  font-size: 10px;
  margin-top: 8px;
  letter-spacing: 0.04em;
  color: var(--t-3);
}

/* ──────── Persona-fit content-aware panel, 2026-04-28 ──────── */
.pf-prose {
  font-size: 12px;
  color: var(--t-2);
  line-height: 1.5;
  margin-bottom: 8px;
}
.pf-prose b { color: var(--t-1); }
.pf-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}
.pf-tbl th, .pf-tbl td {
  padding: 5px 6px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.pf-tbl th {
  font-weight: 500;
  color: var(--t-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
}
.pf-tbl td:nth-child(2),
.pf-tbl td:nth-child(4),
.pf-tbl th:nth-child(2),
.pf-tbl th:nth-child(4) {
  text-align: right;
}
.pf-row.pf-high td:first-child { color: var(--t-1); font-weight: 500; }
.pf-row.pf-medium td:first-child { color: var(--t-2); }
.pf-row.pf-low td:first-child { color: var(--t-3); }
.pf-row.pf-selected {
  background: rgba(56,189,248,.06);
  outline: 1px solid rgba(56,189,248,.20);
}
.pf-primary-tag, .pf-selected-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 2px;
  vertical-align: 1px;
}
.pf-primary-tag { background: var(--bg-2); color: var(--t-3); border: 1px solid var(--line-2); }
.pf-selected-tag { background: rgba(56,189,248,.15); color: var(--kept); border: 1px solid rgba(56,189,248,.30); }
.pf-match-count {
  display: inline-block;
  font-weight: 600;
  color: var(--t-1);
  min-width: 16px;
}
.pf-match-sample {
  font-size: 10px;
  color: var(--t-4);
  letter-spacing: 0.02em;
}
.pf-score { color: var(--t-2); font-weight: 500; }
.pf-foot {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--t-3);
}

/* ──────── TH Framework v1—Tier badge + Web Role ──────── */
.tier-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: 1px;
}
.tier-pill.tier-1 { background: var(--go-bg);   color: var(--go);   border: 1px solid var(--go-line); }
.tier-pill.tier-2 { background: var(--test-bg); color: var(--test); border: 1px solid var(--test-line); }
.tier-pill.tier-3 { background: var(--skip-bg); color: var(--skip); border: 1px solid var(--skip-line); }

.vb-tier-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
  flex-wrap: wrap;
}
.vb-tier-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 3px;
}
.vb-tier-pill.tier-1 { background: var(--go);    color: var(--bg-0); }
.vb-tier-pill.tier-2 { background: var(--test);  color: var(--bg-0); }
.vb-tier-pill.tier-3 { background: var(--skip);  color: var(--bg-0); }
.vb-tier-pill.superseded {
  background: var(--bg-2);
  color: var(--t-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  border: 1px solid var(--line-2);
}
.vb-tier-desc.superseded { color: var(--t-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.vb-reconcile-note {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 2px solid var(--warn, #f59e0b);
  border-radius: 2px;
  font-size: 11px;
  color: var(--t-2);
  line-height: 1.45;
}
.vb-webrole-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--t-1);
  border: 1px solid var(--line-2);
}
.vb-tier-detail { color: var(--t-3); font-family: var(--font-mono); font-size: 10px; }
.vb-tier-desc {
  margin-top: 6px;
  font-size: 11px;
  color: var(--t-2);
  line-height: 1.4;
}
.vb-tier-foot { margin-top: 6px; font-size: 10px; color: var(--t-3); }
.vb-da-shift-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(56,189,248,.12);
  color: var(--kept);
  border: 1px solid rgba(56,189,248,.30);
}
.vb-opp-row {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg-2);
  border-left: 2px solid var(--line-2);
  border-radius: 3px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vb-opp-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-3);
}
.vb-opp-detail { color: var(--t-2); line-height: 1.5; }
.vb-opp-detail b { color: var(--t-1); font-weight: 600; }
.vb-opp-clear {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.vb-opp-clear.pass { color: var(--go); }
.vb-opp-clear.fail { color: var(--test); }

/* Production-mix tracker—top of Beach lens */
.production-mix {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.production-mix-empty .pm-empty {
  font-size: 11px;
  color: var(--t-3);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  display: block;
  margin-top: 4px;
}
.production-mix-empty .pm-empty b { color: var(--t-1); }
.pm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.pm-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-2);
  font-weight: 600;
}
.pm-keeps {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-3);
}
.pm-bar {
  display: flex;
  height: 22px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-2);
}
.pm-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--bg-0);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 6px;
}
.pm-seg.pm-t1 { background: var(--go); }
.pm-seg.pm-t2 { background: var(--test); }
.pm-seg.pm-t3 { background: var(--skip); }
.pm-deltas {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-3);
}
.pm-delta {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  margin-left: 4px;
  font-size: 9px;
  letter-spacing: 0.04em;
}
.pm-delta.pm-on-target { background: var(--go-bg);   color: var(--go);   border: 1px solid var(--go-line); }
.pm-delta.pm-over      { background: var(--test-bg); color: var(--test); border: 1px solid var(--test-line); }
.pm-delta.pm-under     { background: var(--skip-bg); color: var(--skip); border: 1px solid var(--skip-line); }

/* Topic-level snapshot—within each beach header */
.topic-snapshot {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.01);
}
.ts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ts-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-3);
}
.ts-meta {
  font-size: 9px;
  letter-spacing: 0.04em;
}
.ts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ts-cell {
  padding: 6px 10px;
  background: var(--bg-1);
  border-radius: 3px;
  border-left: 2px solid var(--line-2);
}
.ts-cell.pass { border-left-color: var(--go); }
.ts-cell.fail { border-left-color: var(--skip); }
.ts-v {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--t-1);
}
.ts-l {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-4);
  margin-top: 2px;
}
.ts-min {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--t-4);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
@media (max-width: 800px) { .ts-grid { grid-template-columns: repeat(2, 1fr); } }

/* TVE bar—Trend Velocity Exception toggle in the Decision area */
.tve-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: var(--bg-1);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  font-size: 11px;
}
.tve-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-3);
  flex-shrink: 0;
}
.tve-options { display: flex; gap: 4px; flex-wrap: wrap; }
.tve-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--t-3);
  border: 1px solid var(--line-2);
  cursor: pointer;
}
.tve-chip:hover { background: var(--bg-3); color: var(--t-1); }
.tve-chip.active { background: var(--kept); color: var(--bg-0); border-color: var(--kept); }

/* ──────── Platform Reach panel (Layer 7 + Layer 8 combined) ──────── */
.pr-source-badges { display: inline-flex; gap: 4px; margin-left: 8px; }
.pr-src-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(56,189,248,.10);
  color: var(--kept);
  border: 1px solid rgba(56,189,248,.30);
}
.pr-total {
  margin: 4px 0 8px;
  font-size: 11px;
  color: var(--t-2);
}
.pr-total b { color: var(--t-1); font-weight: 600; }
.pr-gap-note {
  display: block;
  margin-top: 4px;
  padding: 4px 8px;
  background: var(--test-bg);
  color: var(--test);
  border: 1px dashed var(--test-line);
  border-radius: 3px;
  font-size: 10px;
}
.pr-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}
.pr-tbl th, .pr-tbl td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.pr-tbl th {
  font-weight: 500;
  color: var(--t-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
}
.pr-tbl td.pr-pvs { text-align: right; color: var(--t-1); font-weight: 600; }
.pr-tbl td.pr-top { font-size: 10px; color: var(--t-3); }
.pr-src-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 4px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: 1px;
}
.pr-src-tag.src-snowflake { background: rgba(56,189,248,.15); color: var(--kept); border: 1px solid rgba(56,189,248,.28); }
.pr-src-tag.src-tarrow    { background: var(--test-bg); color: var(--test); border: 1px solid var(--test-line); }
.pr-foot {
  font-size: 10px;
  margin-top: 8px;
  letter-spacing: 0.04em;
  color: var(--t-3);
}

/* ──────── Author authority panel (Layer 9) ──────── */
.pending-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--t-3);
  border: 1px dashed var(--line-2);
  margin-left: 8px;
}
.aa-live-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(56,189,248,.10);
  color: var(--kept);
  border: 1px solid rgba(56,189,248,.30);
  margin-left: 8px;
}
.aa-pending {
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--bg-1);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  font-size: 11px;
  line-height: 1.5;
}
.aa-summary { margin: 4px 0 8px; font-size: 11px; }
.aa-summary b { color: var(--t-1); font-weight: 600; }
.aa-tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}
.aa-tbl th, .aa-tbl td {
  padding: 4px 6px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.aa-tbl th {
  font-weight: 500;
  color: var(--t-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 9px;
}
.aa-tbl th:first-child, .aa-tbl td:first-child {
  text-align: left;
  color: var(--t-1);
}
.aa-tbl tr.aa-top td { font-weight: 600; }
.aa-hash {
  font-family: var(--font-mono);
  color: var(--t-1);
}
.aa-hit { color: var(--go); font-weight: 600; }
.aa-pvs { color: var(--kept); }
.aa-foot {
  font-size: 10px;
  margin-top: 8px;
  letter-spacing: 0.04em;
  color: var(--t-3);
  line-height: 1.5;
}

/* ──────── Worked example (Sleep & Recovery vs Set Jetting) in Docs lens ──────── */
.ex-pull {
  margin: 16px 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  border-left: 3px solid var(--line-2);
}
.ex-pull h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.ex-pull-strong { background: rgba(74, 222, 128, .04); border-left-color: var(--go); }
.ex-pull-weak   { background: rgba(251, 191, 36, .04); border-left-color: var(--test); }
.ex-stats {
  margin: 0 0 10px;
  padding-left: 18px;
  color: var(--t-2);
  line-height: 1.55;
}
.ex-stats li { margin-bottom: 4px; }
.ex-stats li b { color: var(--t-1); }
.ex-verdict {
  padding: 6px 10px;
  background: var(--bg-1);
  border-radius: 3px;
  font-size: 12px;
  margin: 8px 0;
  color: var(--t-2);
}
.ex-verdict b { color: var(--t-1); }
.ex-attack-order {
  margin: 10px 0 6px;
  font-size: 12px;
  color: var(--t-2);
}
.ex-attack-order b { color: var(--t-1); }
.ex-list {
  margin: 0;
  padding-left: 22px;
  font-size: 12px;
  color: var(--t-2);
  line-height: 1.6;
}
.ex-list li { margin-bottom: 5px; }
.ex-list li b { color: var(--t-1); }

/* SEMrush credit pill—read-only footer display */
.credit-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t-3);
  cursor: help;
}

/* CSV export button—Decision Log */
.export-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--bg-2);
  color: var(--t-2);
  border: 1px solid var(--line-2);
  padding: 6px 12px;
  border-radius: var(--radius);
  transition: background .12s, color .12s, border-color .12s;
}
.export-btn:hover:not(:disabled) {
  background: var(--bg-3);
  color: var(--t-1);
  border-color: var(--line-bright);
}
.export-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* eCPM staleness nudge—quarterly refresh discipline */
.ecpm-staleness {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
}
.ecpm-staleness.due-soon {
  background: var(--test-bg); color: var(--test); border: 1px solid var(--test-line);
}
.ecpm-staleness.overdue {
  background: var(--skip-bg); color: var(--skip); border: 1px solid var(--skip-line);
}

/* Auto-sync badge—Decision Log header + drawer outcome row.
   Surfaces zero-effort daily TRACKER_ENRICHED join state. */
.auto-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kept);
  background: rgba(56,189,248,.10);
  border: 1px solid rgba(56,189,248,.28);
  padding: 3px 8px;
  border-radius: 999px;
  margin-right: 10px;
}
.auto-sync-badge.inline {
  margin-left: 8px;
  margin-right: 0;
  padding: 1px 6px;
  font-size: 9px;
}
.auto-sync-dot {
  width: 6px; height: 6px;
  background: var(--kept);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(56,189,248,.55);
  animation: auto-sync-pulse 2.4s ease-out infinite;
}
@keyframes auto-sync-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(56,189,248,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(56,189,248,0); }
  100% { box-shadow: 0 0 0 0   rgba(56,189,248,0); }
}

/* Brief lifecycle (2026-04-28, content-team-aligned) —
   fresh ≤14d / active 15-89d / serp-reverify 90-179d / refresh-due 180d+ / decided.
   TH content is evergreen 99.9% of the time (per content team lead)—the
   pills don't say "stale," they prompt SERP re-verification at 90d (per
   content strategist's working assumption) and a wholesale refresh at 180d. */
.life-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}
.life-pill-fresh {
  background: rgba(56,189,248,.14);
  color: var(--kept);
  border: 1px solid rgba(56,189,248,.32);
}
.life-pill-reverify {
  background: var(--test-bg);
  color: var(--test);
  border: 1px solid var(--test-line);
}
.life-pill-refresh {
  background: var(--skip-bg);
  color: var(--skip);
  border: 1px solid var(--skip-line);
}
.brief.life-serp-reverify:not(.d-keep):not(.d-skip-decided):not(.d-defer) {
  opacity: 0.85;
}
.brief.life-refresh-due:not(.d-keep):not(.d-skip-decided):not(.d-defer) {
  opacity: 0.7;
}
.brief.life-refresh-due:not(.d-keep):not(.d-skip-decided):not(.d-defer):hover {
  opacity: 0.95;
}
.brief.life-fresh .brief-rail {
  background: linear-gradient(180deg, var(--kept), transparent);
  opacity: 0.6;
}

/* Intake strip—fresh briefs surface at top of Queue lens for triage */
.intake-strip {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(56,189,248,.06), transparent 60%);
  border: 1px solid rgba(56,189,248,.22);
  border-left: 3px solid var(--kept);
  border-radius: var(--radius);
}
.intake-strip-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.intake-glyph {
  color: var(--kept);
  font-size: 8px;
  vertical-align: middle;
  animation: auto-sync-pulse 2.4s ease-out infinite;
}
.intake-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--t-1);
  letter-spacing: 0.01em;
}
.intake-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t-3);
  letter-spacing: 0.04em;
}

/* Labeled section-break between the intake strip and the rest of the
   queue. Renders only when both zones have content (see lenses.jsx).
   Subordinate to the intake-strip card head—a hairline rule with a
   centered label, not its own card—so the asymmetry stays clear:
   intake = triage-priority surface, rest = default working queue. */
.queue-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
}
.queue-divider::before,
.queue-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
.queue-divider-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-3);
  white-space: nowrap;
}

/* Decision Log time-window toggle */
.log-window-toggle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--t-2);
  border: 1px solid var(--line-2);
  padding: 5px 10px;
  border-radius: var(--radius);
  margin-right: 10px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.log-window-toggle:hover {
  background: var(--bg-2);
  color: var(--t-1);
  border-color: var(--line-bright);
}
.log-window-toggle.inline {
  margin: 0 0 0 12px;
  padding: 3px 10px;
}
.log-history-footer {
  margin-top: 18px;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

/* Auto-outcome panel—appears in BriefDrawer for kept briefs that
   matched articles in TRACKER_ENRICHED. Operator can override below. */
.auto-outcome-panel {
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--kept);
  border-radius: var(--radius);
}
.aop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.aop-state {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}
.aop-state.aop-in_zone { background: var(--kept); color: var(--bg-0); }
.aop-state.aop-foothold { background: var(--test-bg); color: var(--test); border: 1px solid var(--test-line); }
.aop-state.aop-cold     { background: var(--skip-bg); color: var(--skip); border: 1px solid var(--skip-line); }
.aop-state.aop-no_match { background: var(--bg-2); color: var(--t-3); }
.aop-state.aop-no_data  { background: var(--bg-2); color: var(--t-3); }
.aop-stat {
  font-size: 12px;
  color: var(--t-2);
}
.aop-stat b {
  color: var(--t-1);
  font-weight: 600;
}
.aop-sample {
  margin-top: 8px;
  font-size: 11px;
}
.aop-sample a { color: var(--kept); text-decoration: none; }
.aop-sample a:hover { text-decoration: underline; }
.aop-foot {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* ──────── BriefRow—wrapper for selection / focus / outcome / drag ──────── */
/* The BriefRow div sits between the lens render loop and the BriefTile so
   lens-level state (selection, focus, outcome shading, drag) can live in a
   single shell-owned wrapper without modifying brief.jsx. The wrapper is
   transparent by default—children's chrome renders unchanged. */
.brief-row {
  position: relative;
  /* Shading lives on a pseudo so the BriefTile's own background isn't fought
     for paint priority. --outcome-state defaults to transparent if unset. */
}
.brief-row.has-outcome-state::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--outcome-state, transparent);
  pointer-events: none;
  z-index: 0;
}
.brief-row.has-outcome-state > .brief { position: relative; z-index: 1; }
.brief-row.selected > .brief {
  border-color: var(--kept);
  box-shadow: 0 0 0 1px var(--kept), 0 0 8px rgba(56,189,248,.25);
}
.brief-row.focused-tile > .brief {
  outline: 2px solid var(--accent, #4ea1f3);
  outline-offset: 1px;
}
.brief-row.dragging { opacity: 0.55; }
.brief-row.pinned > .brief { border-left: 3px solid var(--kept); }

/* Drag handle (item 4.5)—visible on hover, near-invisible at rest. */
.drag-handle {
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.05em;
  color: var(--t-4);
  cursor: grab;
  opacity: 0;
  transition: opacity .12s;
  z-index: 2;
}
.brief-row:hover .drag-handle { opacity: 0.7; }
.drag-handle:hover { color: var(--t-2); cursor: grab; }
.drag-handle:active { cursor: grabbing; }

/* Pin badge—surfaces ★ on pinned briefs. */
.pin-badge {
  position: absolute;
  right: 8px;
  top: 6px;
  color: var(--kept);
  font-size: 11px;
  z-index: 2;
  pointer-events: none;
}

/* Recommended-action hint chip (item 4.3). Sits at the right edge of the
   tile row. Dashed border + reduced opacity so it reads visibly as a
   "press-Enter-to-fire" PREVIEW, not a confirmed decision badge —
   the prior solid-bordered styling was getting mis-read as a state. */
.rec-action-hint {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px dashed var(--line-2);
  background: transparent;
  color: var(--t-3);
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
}
.rec-action-hint.rec-action-keep   { color: var(--kept); border-color: rgba(56,189,248,.35); }
.rec-action-hint.rec-action-defer  { color: var(--deferred); border-color: rgba(192,132,252,.35); }
.rec-action-hint.rec-action-skip   { color: var(--skipped); border-color: rgba(148,163,184,.25); }
/* Keep the hint hidden when a decision badge is already on the row—the
   recommendation is implicit once a triage action lands. */
.brief-row > .brief.d-keep ~ .rec-action-hint,
.brief-row > .brief.d-skip-decided ~ .rec-action-hint,
.brief-row > .brief.d-defer ~ .rec-action-hint { display: none; }

/* Narrow-tile layout fixes for Beach rail-tiles + Gap-map quadrants where
   the brief renders inside a ~270-380px column. Prevents meta-row overflow
   and rec-action-hint visual collision when chips wrap to multiple lines.
   Mirrors the @container brief query above with explicit-context selectors
   for the same reason: belt-and-suspenders. */
@container brief (max-width: 480px) {
  /* Reserve room at the bottom of the tile-1 row so the absolute-positioned
     rec-action-hint (right:8 bottom:6) doesn't overlay the wrapping meta
     row. The hint is ~14px tall + 6px bottom-offset → 22px reservation. */
  .t1 { padding-bottom: 22px; }
  /* obj-drift-badge content is compacted in JSX (X↔Y drift / N-way drift),
     but defense in depth: clamp + ellipsify if still long for any reason. */
  .t1-topic .meta .obj-drift-badge {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Hide verdict pill + its help bubble in narrow tiles. The verdict glyph
     (left-rail colored dot) already conveys the tier (green=high-opp /
     yellow=worth-testing / gray=skip); the rec-action-hint at bottom-right
     conveys the recommendation. Showing the pill here ate ~140px of
     .t1-end width, forcing meta chips to wrap one-per-line and clipping
     mid-length chips ("everyday living") at the tile edge. */
  .t1-end .verdict-pill { display: none; }
  .t1-end .verdict-pill + .lens-help { display: none; }
  .t1-end { min-width: 24px; }
}
.rail-tiles .t1,
.gapmap-quad .t1 { padding-bottom: 22px; }
.rail-tiles .obj-drift-badge,
.gapmap-quad .obj-drift-badge {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-tiles .t1-end .verdict-pill,
.gapmap-quad .t1-end .verdict-pill { display: none; }
.rail-tiles .t1-end .verdict-pill + .lens-help,
.gapmap-quad .t1-end .verdict-pill + .lens-help { display: none; }
.rail-tiles .t1-end,
.gapmap-quad .t1-end { min-width: 24px; }

/* ──────── Floating batch-action bar (item 4.2) ──────── */
.batch-bar {
  position: fixed;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(56,189,248,.15);
  z-index: var(--z-popover);
  font-size: 12px;
}
.batch-count {
  font-family: var(--font-mono);
  color: var(--kept);
  font-weight: 600;
  padding-right: 6px;
  border-right: 1px solid var(--line);
  margin-right: 4px;
}
.batch-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  color: var(--t-1);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.batch-btn:hover:not(:disabled) { border-color: var(--line-bright); background: var(--bg-3); }
.batch-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.batch-btn.batch-keep    { color: var(--kept); }
.batch-btn.batch-skip    { color: var(--skipped); }
.batch-btn.batch-defer   { color: var(--deferred); }
.batch-btn.batch-pin     { color: var(--test); }
.batch-btn.batch-compare { color: var(--accent, #4ea1f3); }
.batch-btn.batch-clear   { color: var(--t-3); }

/* Shared-rationale prompt modal */
.batch-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 48px));
  background: var(--bg-1);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  z-index: calc(var(--z-cmdk) + 1);
  box-shadow: 0 12px 48px rgba(0,0,0,.6);
}
.batch-modal h3 { margin: 0 0 6px 0; font-size: 14px; }
.batch-modal p { margin: 0 0 8px 0; font-size: 12px; }
.batch-note-input {
  width: 100%;
  min-height: 96px;
  background: var(--bg-0);
  border: 1px solid var(--line-2);
  color: var(--t-1);
  padding: 8px 10px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 12px;
  resize: vertical;
}
.batch-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.batch-modal-foot { font-size: 10px; margin-top: 8px; text-align: right; }

/* ──────── Side-by-side compare modal (item 4.4) ──────── */
.compare-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(100% - 48px));
  max-height: calc(100vh - 80px);
  background: var(--bg-1);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  z-index: calc(var(--z-cmdk) + 1);
  box-shadow: 0 12px 48px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
}
.compare-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.compare-head h3 { margin: 0; font-size: 14px; }
.compare-close {
  font-size: 18px;
  background: transparent;
  border: 0;
  color: var(--t-2);
  cursor: pointer;
  line-height: 1;
}
.compare-close:hover { color: var(--t-1); }
.compare-body {
  overflow: auto;
  padding: 12px 16px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.compare-table th, .compare-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table th.compare-row-label,
.compare-table td.compare-row-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-3);
  width: 140px;
  white-space: nowrap;
}
.compare-col-topic {
  font-weight: 600;
  color: var(--t-1);
  margin-bottom: 2px;
}
.compare-col-meta { font-size: 10px; }
.compare-verdict.v-high-opportunity { color: var(--go); }
.compare-verdict.v-worth-testing    { color: var(--test); }
.compare-verdict.v-skip             { color: var(--skip); }
.compare-foot {
  padding: 8px 16px;
  font-size: 10px;
  border-top: 1px solid var(--line);
  text-align: right;
}

/* ──────── Shortcuts help overlay (item 4.1) ──────── */
.shortcuts-help {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(540px, calc(100% - 48px));
  background: var(--bg-1);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-lg);
  z-index: calc(var(--z-cmdk) + 1);
  box-shadow: 0 12px 48px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
}
.shortcuts-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.shortcuts-head h3 { margin: 0; font-size: 14px; }
.shortcuts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.shortcuts-table td {
  padding: 6px 16px;
  border-bottom: 1px solid var(--line);
}
.shortcuts-table tr:last-child td { border-bottom: 0; }
.shortcuts-key {
  width: 130px;
  white-space: nowrap;
}
.shortcuts-key kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--t-1);
}
.shortcuts-label { color: var(--t-2); }

/* ──────── Undo toast (item 4.11) ──────── */
.undo-toast {
  position: fixed;
  right: 24px;
  bottom: 56px;
  background: var(--bg-2);
  border: 1px solid var(--line-bright);
  color: var(--t-1);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  z-index: var(--z-popover);
  animation: undoToastIn .18s ease-out;
}
@keyframes undoToastIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.undo-toast-msg { font-family: var(--font-mono); font-size: 11px; color: var(--t-1); }
.undo-toast-dismiss {
  background: transparent;
  border: 0;
  color: var(--t-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.undo-toast-dismiss:hover { color: var(--t-1); }

/* ──────── Decision-velocity footer pill (item 4.10) ──────── */
.velocity-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--t-2);
}
.velocity-up   { color: var(--go); margin-left: 4px; }
.velocity-down { color: var(--skip); margin-left: 4px; }
.velocity-flat { color: var(--t-3); margin-left: 4px; }

/* ──────── Filter presets (item 4.8) ──────── */
.filter-presets {
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.fp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fp-toggle {
  background: transparent;
  border: 0;
  color: var(--t-3);
  cursor: pointer;
  font-size: 12px;
}
.fp-toggle:hover { color: var(--t-1); }
.fp-body { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.fp-empty { font-size: 10px; padding: 4px 0; }
.fp-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fp-apply {
  flex: 1;
  text-align: left;
  padding: 4px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--t-1);
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.fp-apply:hover { border-color: var(--line-bright); background: var(--bg-3); }
.fp-name { font-weight: 500; white-space: nowrap; }
.fp-meta { font-size: 9px; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-del {
  background: transparent;
  border: 1px solid transparent;
  color: var(--t-4);
  cursor: pointer;
  padding: 0 6px;
  font-size: 14px;
  line-height: 1;
  border-radius: 3px;
}
.fp-del:hover { color: var(--skip); border-color: var(--line-2); }
.fp-save {
  margin-top: 4px;
  background: transparent;
  border: 1px dashed var(--line-2);
  color: var(--t-2);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.fp-save:hover { color: var(--t-1); border-color: var(--line-bright); }

/* ──────────────────────────────────────────────────────────────────────────
   Phase-11 BriefTile + BriefDrawer additions
   Promoted from inline `style={{...}}` props in brief.jsx so hover / focus /
   media states have somewhere to attach. Each rule mirrors the inline value
   that brief.jsx still ships as a fallback—the class wins via specificity
   when both apply.
   ────────────────────────────────────────────────────────────────────────── */

/* DiffValue—wraps numerics that changed >10% since last decision snapshot.
   Subtle background tint + small arrow; tooltip carries the prior value. */
.value-changed {
  background: rgba(255, 200, 90, 0.10);
  border-radius: 2px;
  padding: 0 2px;
  cursor: help;
  position: relative;
}
.value-changed::after {
  content: attr(data-arrow);
  font-size: 9px;
  margin-left: 2px;
  opacity: 0.7;
}
.value-changed[data-direction="up"]::after   { color: var(--c-confident-green, rgba(120,180,120,0.9)); }
.value-changed[data-direction="down"]::after { color: var(--c-underperforming, rgba(180,80,80,0.9)); }

/* ScoreDecompBar—4-segment proportional bar showing volume / KD / CPC /
   residual contributions to the brief's compositeScore. Sits inside each
   tile, below the verdict pill. */
.brief-score-decomp {
  display: flex;
  height: 6px;
  width: 100%;
  margin: 4px 0;
  border-radius: 1px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.brief-score-decomp-seg {
  height: 100%;
  transition: opacity 200ms;
}
.brief-score-decomp-seg:hover { opacity: 0.7; }
.brief-score-decomp-seg-volume   { background: rgba(120,170,220,0.55); }
.brief-score-decomp-seg-kd       { background: rgba(220,180,120,0.55); }
.brief-score-decomp-seg-cpc      { background: rgba(180,120,200,0.55); }
.brief-score-decomp-seg-residual { background: rgba(150,200,150,0.55); }

/* WhyNowBadge—inline pill on the tile showing topic-warming state.
   Variants: opening / open / closing / closed (computed from KD + volume
   trajectory). Minimum styling here; the inline width survives layout. */
.why-now-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  border-radius: 2px;
  background: rgba(255,255,255,0.05);
  color: var(--t-2);
  vertical-align: middle;
}
.why-now-opening { color: var(--c-confident-green, rgba(120,180,120,0.95)); }
.why-now-closing { color: rgba(220,180,80,0.9); }
.why-now-closed  { color: var(--c-underperforming, rgba(180,80,80,0.85)); }

/* Play-sequence pill—small chip on Beach-lens tiles showing the brief's
   foothold→headtail position within its Play (#N of M). */
.play-seq-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  border-radius: 2px;
  background: rgba(120,170,220,0.10);
  color: var(--t-2);
  vertical-align: middle;
}

/* TermHelp—inline (?) bubble next to numeric labels (KD, CPC, ourPos, etc.).
   Hover-only tooltip via the title attribute; the visible icon is just a
   styled "?" sup. */
.term-help {
  display: inline-block;
  margin-left: 3px;
  font-size: 10px;
  color: var(--t-3);
  cursor: help;
  user-select: none;
  vertical-align: super;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 150ms;
}
@media (hover: hover) {
  .term-help:hover { opacity: 1; }
}

/* Sparkline—tiny inline SVG inside tile + drawer numeric labels. */
.brief-spark {
  vertical-align: middle;
  margin-left: 3px;
  opacity: 0.7;
}

/* Editorial brief modal—full-screen overlay with centered card. The
   inline style on the JSX root sets position/sizing; the class hooks
   typography + dark-mode token alignment. */
.ed-brief-modal-bg {
  background: rgba(0, 0, 0, 0.6);
}
.ed-brief-modal {
  background: var(--bg-1, #1a1a1c);
  border: 1px solid var(--line);
  color: var(--t-1);
  font-family: var(--font-sans);
}
.ed-brief-body h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t-2);
}

/* Brief card modal—A4 printable; white background regardless of theme.
   On @media print, hide the controls and let the card fill the page. */
.brief-card-modal-bg {
  background: rgba(0, 0, 0, 0.65);
}
.brief-card-modal {
  background: #fff;
  color: #222;
  font-family: Georgia, 'Times New Roman', serif;
  border-radius: 4px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.5);
}
.brief-card-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
}
@media print {
  .brief-card-modal-bg { background: #fff !important; padding: 0 !important; }
  .brief-card-modal    { box-shadow: none !important; }
  .brief-card-controls { display: none !important; }
  body { background: #fff !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Items 6 / 7 / 8 / 26 / 29 / 42 / 43 / 45—shell + lens upgrades.
   Each block is scoped by class prefix so the shared rail / lens chrome
   above is untouched.
   ────────────────────────────────────────────────────────────────────────── */

/* Item 7 / 8—objective + cohort dropdowns at top of rail. */
.rail-objective-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.rail-objective-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-3);
  flex: 0 0 56px;
}
.rail-objective-select {
  flex: 1;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--t-1);
}

/* ── Tweaks panel ── */
/* Floating tweaks shell (tweaks-panel.jsx). Selectors mirror the inline
   __TWEAKS_STYLE that previously injected via <style> from the JSX file. */
.twk-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483646;
  width: 280px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: rgba(250, 249, 247, 0.78);
  color: #29261b;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 0.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 12px 40px rgba(0, 0, 0, 0.18);
  font: 11.5px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
  overflow: hidden;
}
.twk-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 10px 14px;
  cursor: move;
  user-select: none;
}
.twk-hd b { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.twk-x {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(41, 38, 27, 0.55);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: default;
  font-size: 13px;
  line-height: 1;
}
.twk-x:hover { background: rgba(0, 0, 0, 0.06); color: #29261b; }
.twk-body {
  padding: 2px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.twk-body::-webkit-scrollbar { width: 8px; }
.twk-body::-webkit-scrollbar-track { background: transparent; margin: 2px; }
.twk-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.twk-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid transparent;
  background-clip: content-box;
}
.twk-row { display: flex; flex-direction: column; gap: 5px; }
.twk-row-h { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.twk-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: rgba(41, 38, 27, 0.72);
}
.twk-lbl > span:first-child { font-weight: 500; }
.twk-val { color: rgba(41, 38, 27, 0.5); font-variant-numeric: tabular-nums; }

.twk-sect {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(41, 38, 27, 0.45);
  padding: 10px 0 0;
}
.twk-sect:first-child { padding-top: 0; }

.twk-field {
  appearance: none;
  width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.6);
  color: inherit;
  font: inherit;
  outline: none;
}
.twk-field:focus { border-color: rgba(0, 0, 0, 0.25); background: rgba(255, 255, 255, 0.85); }
select.twk-field {
  padding-right: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.twk-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  margin: 6px 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  outline: none;
}
.twk-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: default;
}
.twk-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  cursor: default;
}

.twk-seg {
  position: relative;
  display: flex;
  padding: 2px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  user-select: none;
}
.twk-seg-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: left 0.15s cubic-bezier(0.3, 0.7, 0.4, 1), width 0.15s;
}
.twk-seg.dragging .twk-seg-thumb { transition: none; }
.twk-seg button {
  appearance: none;
  position: relative;
  z-index: 1;
  flex: 1;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  min-height: 22px;
  border-radius: 6px;
  cursor: default;
  padding: 4px 6px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.twk-toggle {
  position: relative;
  width: 32px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.15s;
  cursor: default;
  padding: 0;
}
.twk-toggle[data-on="1"] { background: #34c759; }
.twk-toggle i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.twk-toggle[data-on="1"] i { transform: translateX(14px); }

.twk-num {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 0 0 8px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.6);
}
.twk-num-lbl {
  font-weight: 500;
  color: rgba(41, 38, 27, 0.6);
  cursor: ew-resize;
  user-select: none;
  padding-right: 8px;
}
.twk-num input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 0 8px 0 0;
  outline: none;
  color: inherit;
  -moz-appearance: textfield;
}
.twk-num input::-webkit-inner-spin-button,
.twk-num input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.twk-num-unit { padding-right: 8px; color: rgba(41, 38, 27, 0.45); }

.twk-btn {
  appearance: none;
  height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: default;
}
.twk-btn:hover { background: rgba(0, 0, 0, 0.88); }
.twk-btn.secondary { background: rgba(0, 0, 0, 0.06); color: inherit; }
.twk-btn.secondary:hover { background: rgba(0, 0, 0, 0.1); }

.twk-swatch {
  appearance: none;
  -webkit-appearance: none;
  width: 56px;
  height: 22px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 0;
  cursor: default;
  background: transparent;
  flex-shrink: 0;
}
.twk-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.twk-swatch::-webkit-color-swatch { border: 0; border-radius: 5.5px; }
.twk-swatch::-moz-color-swatch { border: 0; border-radius: 5.5px; }

/* Item 6—sensitivity tester replay panel inside tweaks. */
.sens-replay {
  margin-top: 6px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
}
.sens-replay-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(41,38,27,.55);
}
.sens-replay-meta {
  font-weight: 400;
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
  color: rgba(41,38,27,.45);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sens-replay-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.sens-replay-v {
  font-size: 13px;
  font-weight: 600;
}
.sens-replay-pct,
.sens-replay-reason {
  font-size: 10px;
  color: rgba(41,38,27,.55);
  font-family: var(--font-mono);
}
.sens-v-high-opportunity .sens-replay-v { color: var(--go); }
.sens-v-worth-testing    .sens-replay-v { color: var(--test); }
.sens-v-skip             .sens-replay-v { color: var(--skip); }
.sens-v-none             .sens-replay-v { color: rgba(41,38,27,.45); }

.sens-presets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.sens-preset-row {
  display: flex;
  gap: 4px;
}
.sens-preset-load { flex: 1; text-align: left; }
.sens-preset-del { flex: 0 0 26px; }

/* Item 26—re-decision filter chip + per-row revisit badge. */
.log-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 6px;
}
.log-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--t-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.log-filter-chip:hover { background: var(--bg-3, var(--bg-2)); color: var(--t-1); }
.log-filter-chip.active {
  background: var(--accent, #4ea1f3);
  color: #fff;
  border-color: var(--accent, #4ea1f3);
}
.log-filter-chip.active .lfc-dot { background: #fff; }
.lfc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #4ea1f3);
}
.lfc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 4px;
  height: 14px;
  border-radius: 7px;
  background: rgba(255,255,255,.18);
  font-size: 9px;
  margin-left: 2px;
}
.log-filter-chip:not(.active) .lfc-count {
  background: var(--bg-3, rgba(0,0,0,.06));
  color: var(--t-2);
}

.revisit-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--t-2);
  vertical-align: middle;
}
.revisit-badge.overdue {
  background: rgba(218, 86, 86, 0.18);
  color: var(--skip, #c44d4d);
  border-color: var(--skip, #c44d4d);
  font-weight: 600;
}
.revisit-badge.soon {
  background: rgba(247, 178, 89, 0.16);
  color: var(--test, #b27a2a);
  border-color: var(--test, #b27a2a);
}
.revisit-badge.future {
  color: var(--t-3);
}

/* Items 29 / 43—per-Play summary strip on Beach lens. */
.play-summary-strip {
  margin: 12px 0 14px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.pss-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.pss-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-3);
  font-weight: 600;
}
.pss-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--t-4);
  letter-spacing: 0.04em;
}
.pss-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.pss-card {
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
}
.pss-card-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.pss-glyph { font-size: 14px; }
.pss-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--t-1);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pss-num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--t-4);
  letter-spacing: 0.04em;
}
.pss-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 0;
}
.pss-rk {
  color: var(--t-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.pss-rv {
  color: var(--t-1);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Item 42—Exec one-pager lens. */
.exec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.exec-card {
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.exec-v {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--t-1);
}
.exec-l {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-3);
}
.exec-sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--t-4);
}
.exec-keeps .exec-v { color: var(--kept); }
.exec-revenue .exec-v { color: var(--go); }
.exec-prod .exec-v { color: var(--test); }
.exec-play-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.exec-play-list li {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-top: 1px solid var(--line-2);
  font-size: 12px;
}
.exec-play-list li:first-child { border-top: 0; }
.exec-play-name { color: var(--t-1); }
.exec-play-n {
  color: var(--t-3);
  font-family: var(--font-mono);
  font-size: 10px;
}
.exec-narrative {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border-left: 3px solid var(--accent, #4ea1f3);
  background: var(--bg-1);
}
.exec-narrative-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-3);
  margin-bottom: 4px;
}
.exec-narrative p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-1);
}
.exec-foot {
  margin-top: 14px;
  font-size: 10px;
}
.exec-foot kbd {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
}

/* Item 45—read-only single-brief view. */
.app-readonly {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.topbar-readonly {
  border-bottom: 1px solid var(--line);
}
.content-readonly {
  padding: 24px;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.readonly-brief-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  background: var(--bg-1);
}
.readonly-brief-wrap .decide-bar,
.readonly-brief-wrap button.decide,
.readonly-brief-wrap .batch-bar {
  pointer-events: none;
  opacity: 0.45;
}