/* ============================================================
   AC Listening — v3 "AppleCommand" design system
   Warm charcoal palette · Newsreader serif + JetBrains Mono +
   Inter sans · monogram portraits · two-row command bar.
   Graduated from artifacts/mockup-sandbox/.../AppleCommand.tsx
   ============================================================ */

:root {
  --bg-canvas:        #13110F;
  --bg-surface-1:     #1A1714;
  --bg-surface-2:     #221E1A;
  --bg-surface-3:     #2A251F;
  --bg-elevated:      #1F1B17;

  --border-hairline:  rgba(245,235,220,0.06);
  --border-strong:    rgba(245,235,220,0.10);
  --border-bright:    rgba(245,235,220,0.16);

  --text-primary:     #F5EFE6;
  --text-secondary:   #A8A199;
  --text-tertiary:    #6E6862;
  --text-muted:       #4F4945;

  --accent:           #D0AB78;          /* warm amber — primary action */
  --accent-soft:      rgba(208,171,120,0.14);

  --tone-favorable:   #7FB069;
  --tone-neutral:     #A8A199;
  --tone-critical:    #D86A5C;
  --tone-warning:     #D0AB78;

  --serif:  'Newsreader', 'Source Serif Pro', Georgia, serif;
  --mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

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

  --sidebar-w: 248px;
}

/* ─── Base ─── */
html, body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--sans);
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--text-primary); text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: var(--accent-soft); color: var(--text-primary); }

/* Scrollbar (subtle, dark) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-canvas); }
::-webkit-scrollbar-thumb { background: var(--bg-surface-3); border-radius: 6px; border: 2px solid var(--bg-canvas); }
::-webkit-scrollbar-thumb:hover { background: #36363c; }

/* ─── Typography utilities ─── */
.font-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.font-mono  { font-family: var(--mono);  font-weight: 400; }
.font-sans  { font-family: var(--sans); }

.label-caps {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Eyebrow normalizer (final pass — May 2026):
   Every inline mono-caps eyebrow/meta across all 11 templates has been
   collapsed to a SINGLE visual: 0.72rem / .10em letter-spacing / mono /
   weight 600. The dozens of inline `font-size:0.58-0.78rem` and
   `letter-spacing:.06em-.5px` variants were the dominant source of
   "fonts look inconsistent" noise. Tier badges, chip-tone-* pills, and
   intentionally-colored eyebrows keep their colors via more-specific rules. */
[style*="text-transform:uppercase"][style*="font-size:0.58rem"],
[style*="text-transform:uppercase"][style*="font-size:0.59rem"],
[style*="text-transform:uppercase"][style*="font-size:0.6rem"],
[style*="text-transform:uppercase"][style*="font-size:0.62rem"],
[style*="text-transform:uppercase"][style*="font-size:0.63rem"],
[style*="text-transform:uppercase"][style*="font-size:0.65rem"],
[style*="text-transform:uppercase"][style*="font-size:0.66rem"],
[style*="text-transform:uppercase"][style*="font-size:0.68rem"],
[style*="text-transform:uppercase"][style*="font-size:0.7rem"],
[style*="text-transform:uppercase"][style*="font-size:0.72rem"],
[style*="text-transform:uppercase"][style*="font-size:0.74rem"],
[style*="text-transform:uppercase"][style*="font-size:0.78rem"],
[style*="text-transform: uppercase"][style*="font-size:0.7rem"] {
  font-size: 0.72rem !important;
  letter-spacing: 0.10em !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
}

/* NOTE: Bootstrap utility-class remaps (.text-*, .bg-*, .btn-*, .card,
   .form-*, .badge.bg-*, .alert-*) live in the consolidated block at the
   end of this file (~line 700+). Do not duplicate them here — earlier
   definitions are silently shadowed by the later block, which causes
   "my edits don't seem to work" debugging traps. */

.text-secondary-soft { color: var(--text-secondary) !important; }
.text-tertiary       { color: var(--text-tertiary)  !important; }

/* ─── Surfaces ─── */
.surface-raised {
  background: linear-gradient(180deg, var(--bg-surface-1) 0%, var(--bg-canvas) 100%);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(245,235,220,0.04), 0 1px 2px rgba(0,0,0,0.3);
}
.surface-elevated {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.surface-flat {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
}

/* ─── Sidebar ─── */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: #100E0C;
  border-right: 1px solid var(--border-hairline);
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  display: flex; flex-direction: column;
}
.sidebar .brand {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border-hairline);
}
.sidebar .brand-mark {
  display: flex; align-items: center; gap: 10px;
}
.sidebar .brand-mono {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 500; font-size: 15px;
  color: var(--accent);
}
.sidebar .brand-text { line-height: 1.1; }
.sidebar .brand-text .t1 { font-family: var(--serif); font-size: 15px; color: var(--text-primary); font-weight: 400; letter-spacing: -.012em; line-height: 1.05; }
.sidebar .brand-text .t2 { font-family: var(--mono);  font-size: 9px;  color: var(--text-tertiary); letter-spacing: .14em; text-transform: uppercase; margin-top:3px; }

.sidebar .nav-link {
  color: var(--text-secondary);
  padding: 9px 22px;
  font-size: 0.84rem;
  font-family: var(--sans);
  display: flex; align-items: center; gap: 10px;
  border-left: 2px solid transparent;
  transition: color .12s, background .12s, border-color .12s;
}
.sidebar .nav-link i { font-size: 0.95rem; color: var(--text-tertiary); width: 16px; text-align: center; }
.sidebar .nav-link:hover { color: var(--text-primary); background: rgba(245,235,220,0.03); }
.sidebar .nav-link:hover i { color: var(--text-secondary); }
.sidebar .nav-link.active {
  color: var(--text-primary);
  background: rgba(208,171,120,0.06);
  border-left-color: var(--accent);
}
.sidebar .nav-link.active i { color: var(--accent); }

.sidebar hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: 14px 22px;
}
.sidebar .footer-meta {
  margin-top: auto;
  padding: 14px 22px 18px;
  font-family: var(--mono); font-size: 9.5px;
  color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase;
  border-top: 1px solid var(--border-hairline);
}

/* Fetch button + result panel — dark-tone version */
#fetchNewsBtn {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  font-family: var(--sans);
  font-size: 0.78rem !important;
  letter-spacing: .02em;
  padding: 8px 10px !important;
  border-radius: 6px !important;
}
#fetchNewsBtn:hover { background: var(--bg-surface-3) !important; border-color: var(--border-bright) !important; }
#fetchResultPanel {
  margin: 8px 16px 0 !important;
  padding: 9px 11px !important;
  border-radius: 6px !important;
  font-family: var(--mono);
  font-size: 0.7rem !important;
  background: var(--bg-canvas) !important;
  border: 1px solid var(--border-hairline) !important;
  color: var(--text-secondary) !important;
}
#fetchResultPanel .fetch-val { color: var(--text-primary) !important; }
#fetchResultPanel .fetch-ok  { color: var(--tone-favorable) !important; }
#fetchResultPanel .fetch-err { color: var(--tone-critical)  !important; }

/* ─── Main content ─── */
.main-content {
  margin-left: var(--sidebar-w);
  padding: 0;
  min-height: 100vh;
  background: var(--bg-canvas);
}
.content-inner {
  padding: 22px 36px 48px;
  max-width: 1480px;
}

/* ─── Two-row command bar ─── */
.command-bar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(19,17,15,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-hairline);
  padding: 10px 36px 14px;
}
.command-ribbon {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-hairline);
}
.command-ribbon .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tone-favorable);
  box-shadow: 0 0 10px rgba(127,176,105,.6);
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .55; transform: scale(.85); }
}
.command-ribbon .ribbon-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  color: var(--text-secondary);
  background: var(--bg-surface-1);
}
.command-ribbon .ribbon-chip.amber { color: var(--accent); border-color: rgba(208,171,120,0.32); background: var(--accent-soft); }
.command-ribbon .ribbon-sep { color: var(--text-muted); }
.command-ribbon .ribbon-grow { margin-left: auto; }

.command-title-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-top: 22px;
}
.command-title-row .page-h1 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.command-title-row .page-sub {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.55;
}
.command-title-row .page-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: right;
}
.command-title-row .page-meta strong { color: var(--text-secondary); font-weight: 500; }

/* ─── Monogram (reused for SOV figures, sources, voices) ─── */
.monogram {
  display: inline-grid; place-items: center;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--accent);
  user-select: none;
  flex-shrink: 0;
}
.monogram.size-sm { width: 24px; height: 24px; font-size: 11px; }
.monogram.size-md { width: 32px; height: 32px; font-size: 13px; }
.monogram.size-lg { width: 36px; height: 36px; font-size: 14px; }
.monogram.size-xl { width: 44px; height: 44px; font-size: 17px; }

/* Candidate photo avatars (Share of Voice) — same footprint as .monogram */
.candidate-avatar {
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 1px solid rgba(245,235,220,0.14);
  background: var(--surface-1);
  flex-shrink: 0;
  display: block;
}
.candidate-avatar.size-sm { width: 24px; height: 24px; }
.candidate-avatar.size-md { width: 32px; height: 32px; }
.candidate-avatar.size-lg { width: 36px; height: 36px; }
.candidate-avatar.size-xl { width: 44px; height: 44px; }
/* Per-candidate crop tuning so the face sits in the circle, not the backdrop */
.candidate-avatar.avatar-cummings { object-position: center 25%; }
.candidate-avatar.avatar-boakai   { object-position: center 30%; }
.candidate-avatar.avatar-weah     { object-position: center 28%; }
/* Mention card body snippet — v3 themed, no Bootstrap muted/light classes */
.mention-snippet {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 8px 0;
  font-family: var(--sans, Inter, system-ui, sans-serif);
  /* clamp to 2 lines so long descriptions don't blow out card height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sov-entry:not(.is-rival) .candidate-avatar { border-color: rgba(208,171,120,0.55); }
.monogram.is-platform { color: var(--text-secondary); border-radius: 6px; }

/* ─── Sparkline ─── */
.sparkline { width: 80px; height: 18px; display: block; }
.sparkline path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sparkline.tone-critical path  { stroke: var(--tone-critical); }
.sparkline.tone-favorable path { stroke: var(--tone-favorable); }
.sparkline.tone-neutral  path  { stroke: var(--text-tertiary); }

/* ─── KPI tiles ─── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.kpi-tile {
  background: linear-gradient(180deg, var(--bg-surface-1) 0%, var(--bg-canvas) 100%);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
  box-shadow: inset 0 1px 0 rgba(245,235,220,0.04);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, transform .15s;
}
.kpi-tile:hover { border-color: var(--border-strong); }
.kpi-tile .kpi-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); }
.kpi-tile .kpi-row-mid { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kpi-tile .kpi-num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.kpi-tile .kpi-delta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 3px;
}
.kpi-tile .kpi-delta.up   { color: var(--tone-favorable); background: rgba(127,176,105,.12); }
.kpi-tile .kpi-delta.down { color: var(--tone-critical);  background: rgba(216,106,92,.12); }
.kpi-tile .kpi-delta.flat { color: var(--text-tertiary);  background: rgba(168,161,153,.08); }
.kpi-tile .kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-tile .kpi-sub { font-family: var(--sans); font-size: 11.5px; color: var(--text-secondary); }

/* ─── Today's Pulse strip — restyled to v3 palette ─── */
.pulse-strip {
  background: linear-gradient(180deg, var(--bg-surface-1) 0%, var(--bg-canvas) 100%) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius) !important;
  padding: 18px 24px !important;
  box-shadow: inset 0 1px 0 rgba(245,235,220,0.04) !important;
  margin-top: 26px !important;
}
.pulse-num {
  font-family: var(--serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
}
.pulse-text { font-family: var(--sans) !important; font-size: 14.5px !important; font-weight: 600 !important; color: var(--text-primary) !important; letter-spacing: -.005em; }
.pulse-lab {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  color: var(--text-tertiary) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}
.pulse-delta { font-family: var(--mono) !important; font-size: 11px !important; padding: 1px 7px !important; border-radius: 3px !important; }
.pulse-delta.up   { background: rgba(127,176,105,.12) !important; color: var(--tone-favorable) !important; }
.pulse-delta.down { background: rgba(216,106,92,.12) !important;  color: var(--tone-critical) !important; }
.pulse-sep { color: var(--text-tertiary) !important; font-weight: 300 !important; margin: 0 2px; }
.pulse-spike-list { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25 !important; }
.pulse-link { color: var(--text-primary) !important; border-bottom: 1px dotted rgba(245,235,220,.3) !important; }
.pulse-link:hover { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
.pulse-cell-link:hover { background: rgba(245,235,220,.03) !important; }
.pulse-arrow { color: var(--accent) !important; opacity: 0; transition: opacity .12s, transform .12s; font-size: .85rem; vertical-align: -2px; }
.pulse-sub  { font-family: var(--sans) !important; font-size: 11px !important; color: var(--text-secondary) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; margin-top: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pulse layout primitives (preserved from legacy template) */
.pulse-cells { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.pulse-cell  { min-width: 120px; }
.pulse-grow  { flex: 1 1 180px; min-width: 0; }
.pulse-text  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-cell-link {
  text-decoration: none !important; color: inherit !important; display: block;
  border-radius: 6px; padding: 6px 10px; margin: -6px -10px;
  transition: background .12s ease, transform .12s ease;
}
.pulse-cell-link:hover { background: rgba(245,235,220,.04) !important; transform: translateY(-1px); }
.pulse-cell-link:hover .pulse-arrow { opacity: 1; transform: translateX(2px); }

/* ─── Share-of-Voice section (Apple-V3: separate elevated cards, no outer chrome) ─── */
.sov-strip {
  margin-top: 28px;
  margin-bottom: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.sov-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 2px;
}
.sov-header .label-caps { color: var(--text-secondary); }
.sov-header .sov-window {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-tertiary);
  letter-spacing: .12em; text-transform: uppercase;
}
.sov-grid {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.sov-entry {
  flex: 1 1 220px;
  min-width: 220px;
  background: var(--bg-elevated, var(--bg-surface-1));
  border: 1px solid var(--border-strong, var(--border-hairline));
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .15s ease;
  box-shadow: inset 0 1px 0 rgba(245,235,220,0.03);
}
.sov-entry:hover { border-color: rgba(245,235,220,0.15); }
.sov-entry .sov-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.sov-entry .sov-id {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
}
.sov-entry .sov-meta { display: flex; flex-direction: column; min-width: 0; }
.sov-entry .sov-name {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--text-primary); line-height: 1.2;
  letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sov-entry .sov-party {
  font-family: var(--sans); font-size: 11px; color: var(--text-tertiary);
  line-height: 1.2; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sov-entry .sov-pct {
  font-family: var(--serif); font-size: 36px; font-weight: 400;
  color: var(--text-primary); letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.sov-entry .sov-bottom {
  display: flex; flex-direction: column; gap: 6px;
}
.sov-bar {
  height: 3px; border-radius: 2px;
  background: var(--bg-surface-2);
  overflow: hidden;
}
.sov-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.sov-entry.is-rival .sov-bar > span { background: var(--text-tertiary); }
.sov-entry.is-rival .monogram { color: var(--text-secondary); }
.sov-entry .sov-count {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-tertiary);
  letter-spacing: .08em;
}

/* ─── Social Pulse panel ─── */
.social-pulse {
  margin-top: 18px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  padding: 14px 22px 18px;
}
.social-pulse-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.social-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.social-tile {
  background: var(--bg-canvas);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  transition: border-color .15s;
}
.social-tile:hover { border-color: var(--border-strong); }
.social-tile .social-meta { flex: 1; min-width: 0; }
.social-tile .social-platform { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; }
.social-tile .social-num { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--text-primary); font-variant-numeric: lining-nums; }
.social-tile .social-sub { font-family: var(--mono); font-size: 10px; color: var(--text-secondary); margin-top: 4px; letter-spacing: .04em; }
.social-tile .tone-strip { display: flex; gap: 2px; margin-top: 6px; }
.social-tile .tone-strip > span { height: 3px; border-radius: 2px; flex: 1; background: var(--bg-surface-2); }
.social-tile .tone-strip > span.fav { background: var(--tone-favorable); }
.social-tile .tone-strip > span.neu { background: var(--text-tertiary); }
.social-tile .tone-strip > span.crit{ background: var(--tone-critical); }

/* ═════════════════════════════════════════════════════════════
   Bootstrap dark overrides — converts the rest of the existing
   index.html (Bootstrap 5 light cards, badges, buttons) into the
   warm-charcoal palette without touching every template.
   ═════════════════════════════════════════════════════════════ */

/* Cards */
.card {
  background-color: var(--bg-surface-1) !important;
  color: var(--text-primary);
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
}
.card-body, .card-header, .card-footer { color: var(--text-primary); }
.card-header {
  background-color: var(--bg-surface-2) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
.card-footer {
  background-color: var(--bg-surface-2) !important;
  border-top: 1px solid var(--border-hairline) !important;
}

/* Headings inside cards */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }

/* Backgrounds frequently used inline */
[style*="background:#fff"], [style*="background: #fff"],
[style*="background:#ffffff"], [style*="background: #ffffff"],
[style*="background:#f8fafc"], [style*="background: #f8fafc"],
[style*="background:#f4f6f8"], [style*="background: #f4f6f8"] {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}

/* Common text-color overrides */
.text-muted, .text-secondary { color: var(--text-tertiary) !important; }
.text-dark { color: var(--text-primary) !important; }
small, .small { color: var(--text-secondary); }

/* Catch the legacy navy/dark inline colors used for headlines and labels
   throughout index.html / briefing.html so they remain readable on dark. */
[style*="color:#1a2332"], [style*="color: #1a2332"],
[style*="color:#0f1f33"], [style*="color: #0f1f33"],
[style*="color:#1f2937"], [style*="color: #1f2937"],
[style*="color:#111827"], [style*="color: #111827"],
[style*="color:#0f172a"], [style*="color: #0f172a"],
[style*="color:#1e293b"], [style*="color: #1e293b"],
[style*="color:#334155"], [style*="color: #334155"],
[style*="color:#374151"], [style*="color: #374151"],
[style*="color:#4b5563"], [style*="color: #4b5563"] {
  color: var(--text-primary) !important;
}
[style*="color:#475569"], [style*="color: #475569"],
[style*="color:#64748b"], [style*="color: #64748b"],
[style*="color:#6b7280"], [style*="color: #6b7280"],
[style*="color:#6c757d"], [style*="color: #6c757d"],
[style*="color:#94a3b8"], [style*="color: #94a3b8"],
[style*="color:#adb5bd"], [style*="color: #adb5bd"],
[style*="color:#cbd5e1"], [style*="color: #cbd5e1"],
[style*="color:#e2e8f0"], [style*="color: #e2e8f0"],
[style*="color:#4a5568"], [style*="color: #4a5568"] {
  color: var(--text-secondary) !important;
}

/* ─── Legacy chip/badge color remap → v3 palette ────────────────────────────
   The legacy index.html uses ~50 different inline pastel backgrounds (Bootstrap
   primary blue, Tailwind sky/indigo/violet/emerald/rose, etc.) for source
   pills, topic tags, frame chips, briefing card headers, and so on. We collapse
   all of them onto the warm-charcoal palette so the page reads as one design
   system instead of a "rainbow of categories". Semantics (favorable / critical
   / accent) are preserved via text color where it matters.
*/
/* Saturated brights → muted charcoal surface, keep semantic accent on text */
[style*="background:#0d6efd"], [style*="background: #0d6efd"],
[style*="background:#1d4ed8"], [style*="background: #1d4ed8"],
[style*="background:#1e40af"], [style*="background: #1e40af"],
[style*="background:#1a4b8c"], [style*="background: #1a4b8c"],
[style*="background:#3b82f6"], [style*="background: #3b82f6"],
[style*="background:#4f46e5"], [style*="background: #4f46e5"],
[style*="background:#7c3aed"], [style*="background: #7c3aed"],
[style*="background:#6f42c1"], [style*="background: #6f42c1"],
[style*="background:#5b21b6"], [style*="background: #5b21b6"] {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
}
[style*="background:#22c55e"], [style*="background: #22c55e"],
[style*="background:#16a34a"], [style*="background: #16a34a"],
[style*="background:#15803d"], [style*="background: #15803d"],
[style*="background:#0a8f5a"], [style*="background: #0a8f5a"],
[style*="background:#1a7a4a"], [style*="background: #1a7a4a"],
[style*="background:#20c997"], [style*="background: #20c997"] {
  background: rgba(127,176,105,.16) !important;
  color: var(--tone-favorable) !important;
  border: 1px solid rgba(127,176,105,.28) !important;
}
[style*="background:#ef4444"], [style*="background: #ef4444"],
[style*="background:#dc2626"], [style*="background: #dc2626"],
[style*="background:#b91c1c"], [style*="background: #b91c1c"] {
  background: rgba(216,106,92,.16) !important;
  color: var(--tone-critical) !important;
  border: 1px solid rgba(216,106,92,.28) !important;
}
[style*="background:#f59e0b"], [style*="background: #f59e0b"],
[style*="background:#ca8a04"], [style*="background: #ca8a04"] {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(208,171,120,.28) !important;
}
/* Dark navy backgrounds (used for headers/panels) → warm surface */
[style*="background:#0f172a"], [style*="background: #0f172a"],
[style*="background:#1e293b"], [style*="background: #1e293b"],
[style*="background:#1a2332"], [style*="background: #1a2332"],
[style*="background:#94a3b8"], [style*="background: #94a3b8"] {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}
/* Pale pastel backgrounds (Tailwind 50–100, light greys, white) → subtle surface */
[style*="background:#fff"], [style*="background: #fff"],
[style*="background:#fafbfc"], [style*="background: #fafbfc"],
[style*="background:#f8fafc"], [style*="background: #f8fafc"],
[style*="background:#f8f9fa"], [style*="background: #f8f9fa"],
[style*="background:#f4f6f8"], [style*="background: #f4f6f8"],
[style*="background:#f3f4f6"], [style*="background: #f3f4f6"],
[style*="background:#f1f5f9"], [style*="background: #f1f5f9"],
[style*="background:#f0f4f8"], [style*="background: #f0f4f8"],
[style*="background:#eef2f7"], [style*="background: #eef2f7"],
[style*="background:#e9ecef"], [style*="background: #e9ecef"],
[style*="background:#e8eef5"], [style*="background: #e8eef5"],
[style*="background:#e8edf2"], [style*="background: #e8edf2"],
[style*="background:#e2e8f0"], [style*="background: #e2e8f0"] {
  background: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-hairline) !important;
}
/* Pale tinted pastels (sky/indigo/violet/emerald/yellow/rose 50-100) → muted surface w/ tinted text */
[style*="background:#dbeafe"], [style*="background: #dbeafe"],
[style*="background:#e0f2fe"], [style*="background: #e0f2fe"],
[style*="background:#e8f0fe"], [style*="background: #e8f0fe"],
[style*="background:#eff6ff"], [style*="background: #eff6ff"] {
  background: rgba(126,168,176,.10) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(126,168,176,.22) !important;
}
[style*="background:#ede9fe"], [style*="background: #ede9fe"],
[style*="background:#f3e8ff"], [style*="background: #f3e8ff"] {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-hairline) !important;
}
[style*="background:#dcfce7"], [style*="background: #dcfce7"],
[style*="background:#f0fdf4"], [style*="background: #f0fdf4"],
[style*="background:#d1f0e0"], [style*="background: #d1f0e0"] {
  background: rgba(127,176,105,.10) !important;
  color: var(--tone-favorable) !important;
  border: 1px solid rgba(127,176,105,.22) !important;
}
[style*="background:#fde8e8"], [style*="background: #fde8e8"] {
  background: rgba(216,106,92,.10) !important;
  color: var(--tone-critical) !important;
  border: 1px solid rgba(216,106,92,.22) !important;
}
[style*="background:#fefce8"], [style*="background: #fefce8"],
[style*="background:#fef9c3"], [style*="background: #fef9c3"],
[style*="background:#fffbeb"], [style*="background: #fffbeb"],
[style*="background:#fff7ed"], [style*="background: #fff7ed"],
[style*="background:#fef3c7"], [style*="background: #fef3c7"] {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(208,171,120,.22) !important;
}
/* Public Mood platform brand colors — collapse to muted accents */
[style*="background:#bbf7d0"], [style*="background: #bbf7d0"],
[style*="background:#fed7aa"], [style*="background: #fed7aa"] {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--border-hairline) !important;
  color: var(--text-primary) !important;
}
[style*="color:#1877f2"], [style*="color: #1877f2"],
[style*="color:#1da1f2"], [style*="color: #1da1f2"],
[style*="color:#d97706"], [style*="color: #d97706"],
[style*="color:#28a745"], [style*="color: #28a745"],
[style*="color:#198754"], [style*="color: #198754"] {
  color: var(--text-primary) !important;
}
[style*="color:#dee2e6"], [style*="color: #dee2e6"],
[style*="color:#212529"], [style*="color: #212529"] {
  color: var(--text-secondary) !important;
}
/* Saturated colored TEXT (when used standalone on dark backgrounds) → palette tokens */
[style*="color:#0d6efd"], [style*="color: #0d6efd"],
[style*="color:#1d4ed8"], [style*="color: #1d4ed8"],
[style*="color:#1e40af"], [style*="color: #1e40af"],
[style*="color:#1a4b8c"], [style*="color: #1a4b8c"],
[style*="color:#075985"], [style*="color: #075985"],
[style*="color:#3b82f6"], [style*="color: #3b82f6"] {
  color: var(--text-primary) !important;
}
[style*="color:#0a8f5a"], [style*="color: #0a8f5a"],
[style*="color:#15803d"], [style*="color: #15803d"],
[style*="color:#166534"], [style*="color: #166534"],
[style*="color:#16a34a"], [style*="color: #16a34a"],
[style*="color:#1a7a4a"], [style*="color: #1a7a4a"],
[style*="color:#22c55e"], [style*="color: #22c55e"],
[style*="color:#20c997"], [style*="color: #20c997"] {
  color: var(--tone-favorable) !important;
}
[style*="color:#dc2626"], [style*="color: #dc2626"],
[style*="color:#b91c1c"], [style*="color: #b91c1c"],
[style*="color:#ef4444"], [style*="color: #ef4444"] {
  color: var(--tone-critical) !important;
}
[style*="color:#f59e0b"], [style*="color: #f59e0b"],
[style*="color:#ca8a04"], [style*="color: #ca8a04"],
[style*="color:#854d0e"], [style*="color: #854d0e"],
[style*="color:#92400e"], [style*="color: #92400e"],
[style*="color:#713f12"], [style*="color: #713f12"],
[style*="color:#78350f"], [style*="color: #78350f"] {
  color: var(--accent) !important;
}
[style*="color:#5b21b6"], [style*="color: #5b21b6"],
[style*="color:#4f46e5"], [style*="color: #4f46e5"],
[style*="color:#6f42c1"], [style*="color: #6f42c1"],
[style*="color:#7c3aed"], [style*="color: #7c3aed"],
[style*="color:#a78bfa"], [style*="color: #a78bfa"] {
  color: var(--text-secondary) !important;
}

/* Bootstrap utility background classes used throughout the page */
.bg-light, .bg-white { background: var(--bg-surface-1) !important; color: var(--text-primary) !important; }
.bg-primary   { background: var(--bg-surface-2) !important; color: var(--text-primary) !important; border: 1px solid var(--border-strong) !important; }
.bg-info, .bg-purple { background: var(--bg-surface-2) !important; color: var(--text-secondary) !important; }
.bg-success   { background: rgba(127,176,105,.16) !important; color: var(--tone-favorable) !important; border: 1px solid rgba(127,176,105,.28) !important; }
.bg-danger    { background: rgba(216,106,92,.16)  !important; color: var(--tone-critical)  !important; border: 1px solid rgba(216,106,92,.28)  !important; }
.bg-warning   { background: var(--accent-soft)    !important; color: var(--accent)         !important; border: 1px solid rgba(208,171,120,.28) !important; }
.bg-secondary { background: var(--bg-surface-2)   !important; color: var(--text-secondary) !important; border: 1px solid var(--border-hairline) !important; }

/* Bootstrap btn-outline-* variants → all collapse to a single muted-charcoal
   pill style (used by saved-search pills on the Mentions Feed page so AC
   Core / Economy / Corruption / Youth / Diaspora / Rivals stop reading as a
   rainbow). The active/hover state lifts to amber. */
.btn-outline-primary, .btn-outline-success, .btn-outline-info,
.btn-outline-warning, .btn-outline-danger, .btn-outline-secondary,
.btn-outline-light, .btn-outline-dark {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-strong) !important;
  font-weight: 500 !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-info:hover,
.btn-outline-warning:hover, .btn-outline-danger:hover, .btn-outline-secondary:hover,
.btn-outline-light:hover, .btn-outline-dark:hover,
.btn-outline-primary.active, .btn-outline-success.active, .btn-outline-info.active,
.btn-outline-warning.active, .btn-outline-danger.active, .btn-outline-secondary.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: rgba(208,171,120,.4) !important;
}

/* Sentiment / review status badges (Positive / Neutral / Critical / Negative)
   used on mention cards — keep semantic but mute */
.badge-positive, .badge-favorable {
  background: rgba(127,176,105,.14) !important; color: var(--tone-favorable) !important;
  border: 1px solid rgba(127,176,105,.26) !important;
}
.badge-neutral {
  background: var(--bg-surface-2) !important; color: var(--text-secondary) !important;
  border: 1px solid var(--border-hairline) !important;
}
.badge-negative, .badge-critical {
  background: rgba(216,106,92,.14) !important; color: var(--tone-critical) !important;
  border: 1px solid rgba(216,106,92,.26) !important;
}
.review-badge-verified, .review-badge-confirmed {
  background: rgba(127,176,105,.14) !important; color: var(--tone-favorable) !important;
  border: 1px solid rgba(127,176,105,.26) !important;
}
.review-badge-pending {
  background: var(--accent-soft) !important; color: var(--accent) !important;
  border: 1px solid rgba(208,171,120,.26) !important;
}
.review-badge-rejected {
  background: rgba(216,106,92,.14) !important; color: var(--tone-critical) !important;
  border: 1px solid rgba(216,106,92,.26) !important;
}

/* Bootstrap text utility classes — keep semantic but use palette tokens */
.text-primary   { color: var(--accent)           !important; }
.text-success   { color: var(--tone-favorable)  !important; }
.text-danger    { color: var(--tone-critical)   !important; }
.text-warning   { color: var(--accent)          !important; }
.text-info      { color: var(--text-secondary)  !important; }
.text-white     { color: var(--text-primary)    !important; }

/* Force the legacy "Executive Briefing" header bar (often inline-styled with
   gradient/blue) and any remaining colored card headers onto the v3 surface */
.card-header,
[class*="briefing-header"], [id*="briefing-header"],
[class*="exec-brief"], [id*="exec-brief"] {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-hairline) !important;
}
/* Remove gradient/strong background images on inline-styled headers */
[style*="linear-gradient"][style*="#0d6efd"],
[style*="linear-gradient"][style*="#1e40af"],
[style*="linear-gradient"][style*="#1d4ed8"],
[style*="linear-gradient"][style*="#3b82f6"],
[style*="linear-gradient"][style*="#1a4b8c"] {
  background-image: linear-gradient(180deg, var(--bg-surface-2) 0%, var(--bg-surface-1) 100%) !important;
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}

/* Ensure all chip/pill/badge inner text stays readable after the remaps */
.badge, [class*="chip"], [class*="pill"] {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .04em;
}

/* Buttons */
.btn { font-family: var(--sans); font-weight: 500; letter-spacing: .01em; border-radius: 6px; transition: all .12s; }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #1a1310 !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: #f0c074; border-color: #f0c074; color: #1a1310 !important;
}
.btn-outline-primary {
  color: var(--accent) !important; border-color: rgba(208,171,120,.35) !important; background: transparent !important;
}
.btn-outline-primary:hover { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent) !important; }
.btn-secondary, .btn-outline-secondary {
  background: var(--bg-surface-2) !important; color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}
.btn-outline-secondary { background: transparent !important; }
.btn-outline-secondary:hover, .btn-secondary:hover {
  background: var(--bg-surface-3) !important; color: var(--text-primary) !important; border-color: var(--border-bright) !important;
}
.btn-dark { background: var(--accent) !important; color: #1a1310 !important; border-color: var(--accent) !important; }
.btn-link { color: var(--text-secondary) !important; }
.btn-link:hover { color: var(--accent) !important; }
.btn-success { background: var(--tone-favorable) !important; border-color: var(--tone-favorable) !important; color: #0f1a0a !important; }
.btn-danger  { background: var(--tone-critical)  !important; border-color: var(--tone-critical)  !important; color: #1a0a08 !important; }

/* Badges */
.badge { font-family: var(--sans); font-weight: 500; letter-spacing: .01em; }
.badge.bg-primary, .badge[style*="background:#0d6efd"] {
  background: var(--accent-soft) !important; color: var(--accent) !important;
  border: 1px solid rgba(208,171,120,.25);
}
.badge.bg-secondary, .badge[style*="background:#1a2332"], .badge[style*="background:#6c757d"] {
  background: var(--bg-surface-2) !important; color: var(--text-secondary) !important;
  border: 1px solid var(--border-hairline);
}
.badge.bg-success, .badge[style*="background:#198754"], .badge[style*="background:#0a8f5a"] {
  background: rgba(127,176,105,.14) !important; color: var(--tone-favorable) !important;
  border: 1px solid rgba(127,176,105,.28);
}
.badge.bg-danger { background: rgba(216,106,92,.14) !important; color: var(--tone-critical) !important; border: 1px solid rgba(216,106,92,.28); }
.badge.bg-warning, .badge.bg-warning.text-dark { background: rgba(208,171,120,.14) !important; color: var(--accent) !important; border: 1px solid rgba(208,171,120,.28); }

/* Sentiment badges (legacy) */
.badge-positive { background: rgba(127,176,105,.14) !important; color: var(--tone-favorable) !important; }
.badge-negative { background: rgba(216,106,92,.14)  !important; color: var(--tone-critical)  !important; }
.badge-neutral  { background: rgba(168,161,153,.10) !important; color: var(--text-secondary) !important; }

/* Forms */
.form-control, .form-select {
  background: var(--bg-canvas) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  font-family: var(--sans);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-soft) !important;
  background: var(--bg-canvas) !important; color: var(--text-primary) !important;
}
.form-control::placeholder { color: var(--text-muted); }
.form-label { color: var(--text-secondary); font-weight: 500; }
.form-check-input { background-color: var(--bg-surface-2); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* Alerts */
.alert {
  background: var(--bg-surface-1) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-hairline) !important;
  border-left: 3px solid var(--text-tertiary) !important;
  border-radius: var(--radius) !important;
}
.alert-primary, .alert-info { border-left-color: var(--accent) !important; color: var(--text-primary) !important; }
.alert-success { border-left-color: var(--tone-favorable) !important; }
.alert-danger  { border-left-color: var(--tone-critical)  !important; }
.alert-warning { border-left-color: var(--accent) !important; }
.alert-link { color: var(--accent) !important; }

/* Tables */
.table {
  color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-hairline);
  --bs-table-striped-bg: rgba(245,235,220,0.025);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: rgba(245,235,220,0.04);
  --bs-table-hover-color: var(--text-primary);
}
.table > :not(caption) > * > * { background-color: transparent; color: var(--text-primary); border-color: var(--border-hairline); }
.table thead th { color: var(--text-tertiary); font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; border-bottom-color: var(--border-strong); }

/* Modals */
.modal-content {
  background: var(--bg-surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.modal-header, .modal-footer { border-color: var(--border-hairline); }
.btn-close { filter: invert(1) opacity(.7); }

/* Page-title legacy class — aligned with .page-h1 (500 weight). The page
   title is wayfinding; the data below is the visual hero. */
.page-title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.014em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.page-subtitle { font-family: var(--sans); font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; max-width: 76ch; line-height: 1.55; }
.command-title-row .page-sub { max-width: 76ch; line-height: 1.55; }

/* Narratives card tone-mix bar — same DNA as social-tile .tone-strip */
.narrative-tone-row { margin-top: 10px; }
.narrative-tone-bar { display: flex; gap: 2px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--bg-surface-2); }
.narrative-tone-bar > span { height: 100%; background: var(--bg-surface-2); transition: flex .2s ease; }
.narrative-tone-bar > span.fav  { background: var(--tone-favorable); }
.narrative-tone-bar > span.neu  { background: var(--text-tertiary); opacity: .55; }
.narrative-tone-bar > span.crit { background: var(--tone-critical); }
.narrative-tone-cap { font-family: var(--mono); font-size: 10.5px; color: var(--text-tertiary); letter-spacing: .04em; margin-top: 6px; }

/* Narrative section divider — same eyebrow+sub pattern as Briefing &
   Executive Brief. Single source of visual truth for "section header"
   across all pages: gold mono caps eyebrow + sans white sub-line. */
.narrative-section { margin-bottom: 28px; }
.narrative-section-head { margin-bottom: 12px; }
.narrative-section-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
.narrative-section-sub {
  font-family: var(--sans);
  font-size: 1.04rem;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -.008em;
  margin-top: 4px;
  line-height: 1.3;
}
/* Default all section-level headings to sans-serif at sensible dashboard sizes —
   serif is reserved for the four hero numerics from the mockup */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card-title, h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.005em;
}

/* Stat cards (legacy) */
.stat-card {
  background: var(--bg-surface-1) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: inset 0 1px 0 rgba(245,235,220,0.04) !important;
}
.stat-card .stat-number { font-family: var(--serif); font-size: 32px; color: var(--text-primary); letter-spacing: -0.02em; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
/* Narrative card titles — sans, not serif */
.stat-card h2, .stat-card h3, .stat-card h4, .stat-card h5, .stat-card h6,
.stat-card .stat-title { font-family: var(--sans); font-weight: 600; }
.stat-card .stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--text-tertiary); text-transform: uppercase; }

/* Mention card */
.mention-card {
  background: var(--bg-surface-1) !important;
  border: 1px solid var(--border-hairline) !important;
  border-left: 3px solid var(--text-tertiary) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  color: var(--text-primary);
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
}
.mention-card + .mention-card { margin-top: 0 !important; }
.mention-card .meta { margin-top: 6px; }
.mention-card .mention-snippet { margin: 6px 0 4px; }
.mention-card.positive { border-left-color: var(--tone-favorable) !important; }
.mention-card.negative { border-left-color: var(--tone-critical)  !important; }
.mention-card.neutral  { border-left-color: var(--text-tertiary)  !important; }
.mention-card h6 { color: var(--text-primary); font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: -.005em; line-height: 1.4; margin-bottom: 4px; }

/* Tame "SHOUTING" article titles — Smart News Liberia, Front Page Africa
   and several Liberian outlets ship headlines in ALL CAPS. Without this
   rule those headlines visually dominate the dashboard and read as
   typographically inconsistent next to the rest of the carefully-set
   sans 600 titles. CSS lowercases the whole string then capitalizes the
   first letter — sentence case, no SHOUT. Cost: proper nouns inside
   already-uppercase headlines get lowercased; acceptable trade vs the
   visual chaos of mixed sentence-case + ALL CAPS in the same list. */
/* Headlines render in their natural case — JS title-caser in base.html
   detects ALL-CAPS publisher headlines and converts them to title case
   while preserving acronyms (AC, ANC, CDC, NOCAL, etc.) and proper
   nouns. Targets the same selectors via [data-headline] attribute. */
.mention-card h6,
.mention-card h6 a,
.briefing-section .item-title,
.narrative-section .mention-card h6,
.narrative-section .mention-card h6 a {
  text-transform: none;
  display: block;
}
.mention-card .meta { color: var(--text-tertiary); font-family: var(--mono); font-size: .68rem; letter-spacing: .04em; }
.mention-card .mention-snippet { font-size: .78rem; line-height: 1.45; color: var(--text-secondary); }

/* Chart card */
.chart-card {
  background: var(--bg-surface-1) !important;
  border: 1px solid var(--border-hairline) !important;
  border-radius: var(--radius) !important;
  box-shadow: inset 0 1px 0 rgba(245,235,220,0.04) !important;
}

/* Tier badges — restyled for dark */
.tier-badge { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; border-radius: 3px; }
.tier-badge.tier1 { background: rgba(127,176,105,.10) !important; color: var(--tone-favorable) !important; border-color: rgba(127,176,105,.25) !important; }
.tier-badge.tier1 .dot { background: var(--tone-favorable) !important; }
.tier-badge.tier2 { background: rgba(168,161,153,.08) !important; color: var(--text-secondary) !important; border-color: var(--border-strong) !important; }
.tier-badge.tier2 .dot { background: var(--text-secondary) !important; }
.tier-badge.tier3 { background: rgba(208,171,120,.10) !important; color: var(--accent) !important; border-color: rgba(208,171,120,.25) !important; }
.tier-badge.tier3 .dot { background: var(--accent) !important; }

/* Print: revert critical surfaces to white so PDFs read */
/* ─── Responsive: collapse sidebar + tighten command bar at narrow widths ─── */
@media (max-width: 1024px) {
  /* Sidebar folds to a top horizontal strip; main content reclaims full width */
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-hairline);
    padding: 8px 14px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .sidebar .brand {
    margin: 0; padding: 0 12px 0 0;
    border-bottom: 0;
    border-right: 1px solid var(--border-hairline);
  }
  .sidebar .brand-mono { width: 26px; height: 26px; font-size: 13px; }
  .sidebar .brand-text .t1 { font-size: 12.5px; }
  .sidebar .brand-text .t2 { font-size: 8.5px; }
  .sidebar > nav, .sidebar nav.mt-2 {
    margin-top: 0 !important;
    flex: 1 1 auto;
    display: flex; flex-direction: row; flex-wrap: wrap;
    gap: 2px 4px;
    align-items: center;
  }
  .sidebar .nav-link {
    padding: 5px 9px;
    font-size: 11.5px;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .sidebar .nav-link.active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }
  .sidebar hr,
  .sidebar .footer-meta,
  .sidebar #fetchNewsBtn,
  .sidebar nav > div:has(#fetchNewsBtn),
  .sidebar #fetchResultPanel { display: none !important; }
  .main-content { margin-left: 0; }
  .content-inner { padding: 18px 18px 40px; }
  .command-bar { padding: 10px 18px 12px; }
  .command-ribbon { gap: 10px; font-size: 9.5px; flex-wrap: wrap; }
  .command-ribbon .ribbon-grow { margin-left: 0; flex-basis: 100%; text-align: left; padding-top: 4px; }
  .command-title-row { padding-top: 12px; gap: 12px; }
  .command-title-row .page-h1 { font-size: 26px; }
  .command-title-row .page-meta { text-align: left; }
  .pulse-strip { padding: 14px 18px; }
  .pulse-cells { gap: 16px; }
  .pulse-cell { min-width: 100px; }
  .sov-strip, .social-pulse { padding: 14px 18px; }
  .sov-grid { gap: 16px; }
  .kpi-tile .kpi-num { font-size: 30px; }
  .kpi-tile .kpi-label { font-size: 9.5px; }
}
@media (max-width: 600px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sov-grid { flex-direction: column; gap: 10px; }
  .sov-entry { flex-basis: 100%; min-width: 0; }
  .social-grid { grid-template-columns: 1fr; }
  .command-title-row .page-h1 { font-size: 22px; }
}

@media print {
  html, body, .main-content { background: #fff !important; color: #1a1410 !important; }
  .card, .stat-card, .surface-raised, .surface-elevated, .surface-flat,
  .pulse-strip, .sov-strip, .sov-entry, .social-pulse, .kpi-tile, .mention-card, .chart-card {
    background: #fff !important; color: #1a1410 !important;
    border-color: #d8d2c8 !important; box-shadow: none !important;
  }
  h1,h2,h3,h4,h5,h6, .page-title, .page-h1, .kpi-num, .pulse-num,
  .sov-name, .sov-pct, .social-num { color: #1a1410 !important; }
  .label-caps, .pulse-lab, .kpi-label, .form-label,
  .text-muted, .text-secondary, .text-tertiary, small, .small { color: #5a5550 !important; }
  .command-bar, .sidebar, #fetchNewsBtn, #fetchResultPanel,
  .btn, [data-bs-toggle="modal"], .modal,
  .corpus-scope-toggle, #notesToggleBtn,
  .no-print { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 16px !important; }
  .print-header { display: block !important; }
}
.print-header { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL TYPE NORMALIZATION (v3 final pass — locks the scale)
   One scale, applied everywhere. !important wins against Bootstrap
   defaults and the dozens of inline `style="font-size:..."` in templates
   (especially public_mood.html). If you change a size, change it here.
   ─────────────────────────────────────────────────────────────────
   Scale:
     hero number  30px serif    (kpi-num, stat-number, sov-pct, page-h1)
     page title   24px sans 600 (bare <h1> on mentions/narratives/alerts/
                                 public-mood/web-search)
     section h2   17px sans 600
     panel h3-h6  13px sans 600
     body         13px sans
     meta/mono    11px mono
     micro label  10px mono caps
   ═══════════════════════════════════════════════════════════════════════ */

/* Base */
body { font-size: 13px; line-height: 1.5; }

/* Page titles — bare <h1> on every page that doesn't use .page-h1 */
h1, .h1 {
  font-family: var(--sans) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -.012em !important;
  line-height: 1.2 !important;
  color: var(--text-primary);
  margin-bottom: 4px;
}
/* Page-h1 — sans medium, demoted so KPI numerics carry the visual hero weight */
.command-title-row .page-h1, .page-h1 {
  font-family: var(--sans) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -.014em !important;
}
/* Section headings */
h2, .h2 { font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; }
h3, .h3 { font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; }
h4, .h4, h5, .h5, h6, .h6 { font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; }
/* Restore the deliberate exceptions */
.mention-card h6 { font-size: 0.82rem !important; line-height: 1.4 !important; }
.briefing-head .title h1 { font-family: var(--sans) !important; font-size: 24px !important; font-weight: 700 !important; }

/* Hero numbers — ONE size for every "feature stat" across the dashboard */
.kpi-tile .kpi-num,
.stat-card .stat-number,
.sov-entry .sov-pct {
  font-size: 30px !important;
  letter-spacing: -.02em;
}
/* Supporting numbers (Today's Pulse, social tile) */
.pulse-num { font-size: 24px !important; }
.social-tile .social-num { font-size: 20px !important; }
/* Public Mood inline 1.35rem overrides on stat-numbers — clamp to scale */
.stat-card .stat-number[style*="font-size:1.35rem"],
.stat-card .stat-number[style*="font-size: 1.35rem"] {
  font-size: 22px !important;
}

/* Bootstrap text utilities — keep them on-scale */
.lead { font-size: 14px !important; line-height: 1.5; }
.small, small { font-size: 12px !important; }

/* Inline `font-size:0.7-0.85rem` on Public Mood etc. — clamp to floor */
[style*="font-size:0.7rem"]:not(.kpi-tile *):not(.kpi-num):not(.stat-number),
[style*="font-size:0.71rem"], [style*="font-size:0.72rem"],
[style*="font-size:0.75rem"], [style*="font-size:0.77rem"],
[style*="font-size:0.78rem"] {
  font-size: 11.5px !important;
}
[style*="font-size:0.8rem"], [style*="font-size:0.82rem"],
[style*="font-size:0.84rem"], [style*="font-size:0.85rem"],
[style*="font-size:0.86rem"], [style*="font-size:0.88rem"] {
  font-size: 12.5px !important;
}
[style*="font-size:0.9rem"], [style*="font-size:0.92rem"],
[style*="font-size:0.95rem"] {
  font-size: 13px !important;
}

/* Bootstrap leftover light-theme colors that still leak from public_mood
   inline styles — remap to v3 dark palette */
[style*="color:#6c757d"], [style*="color: #6c757d"],
[style*="color:#64748b"], [style*="color: #64748b"],
[style*="color:#adb5bd"], [style*="color: #adb5bd"] {
  color: var(--text-tertiary) !important;
}
[style*="color:#212529"], [style*="color: #212529"] {
  color: var(--text-primary) !important;
}
[style*="background:#f4f6f8"], [style*="background: #f4f6f8"],
[style*="background:#f8f9fa"], [style*="background: #f8f9fa"] {
  background: var(--bg-surface-1) !important;
}
[style*="background:#fff7ed"], [style*="background: #fff7ed"] {
  background: var(--bg-surface-2) !important;
}
[style*="background:#f0fdf4"], [style*="background: #f0fdf4"] {
  background: rgba(127,176,105,.10) !important;
}
[style*="border:1px solid #fed7aa"],
[style*="border: 1px solid #fed7aa"],
[style*="border:1px solid #bbf7d0"],
[style*="border: 1px solid #bbf7d0"],
[style*="border:1px solid #e2e8f0"],
[style*="border: 1px solid #e2e8f0"],
[style*="border:1px solid #dee2e6"],
[style*="border: 1px solid #dee2e6"] {
  border-color: var(--border-hairline) !important;
}
[style*="color:#92400e"], [style*="color: #92400e"],
[style*="color:#d97706"], [style*="color: #d97706"] {
  color: var(--accent) !important;
}
[style*="color:#15803d"], [style*="color: #15803d"],
[style*="color:#166534"], [style*="color: #166534"] {
  color: var(--tone-favorable) !important;
}

/* Bootstrap .alert-info on Public Mood — match v3 surface */
.alert-info {
  background: var(--bg-surface-1) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-hairline) !important;
}

/* Narrative card big number override (was 1.7rem inline) */
.stat-card span[style*="font-size:1.7rem"],
.stat-card span[style*="font-size: 1.7rem"] {
  font-size: 30px !important;
}

/* ─── Candidate accent lock (AC=gold / Boakai=blue-grey / Weah=clay) ───
   Used on Share-of-Voice rows so the percentage and the bar always
   match the candidate, regardless of order or .is-rival fallback. */
.sov-entry.cand-ac      .sov-pct { color: var(--accent); }
.sov-entry.cand-boakai  .sov-pct { color: #6B8FA8; }
.sov-entry.cand-weah    .sov-pct { color: #D86A5C; }
.sov-entry.cand-ac      .sov-bar > span { background: var(--accent) !important; }
.sov-entry.cand-boakai  .sov-bar > span { background: #6B8FA8 !important; }
.sov-entry.cand-weah    .sov-bar > span { background: #D86A5C !important; }
.sov-entry.cand-ac      .candidate-avatar { border-color: rgba(208,171,120,0.55); }
.sov-entry.cand-boakai  .candidate-avatar { border-color: rgba(107,143,168,0.55); }
.sov-entry.cand-weah    .candidate-avatar { border-color: rgba(216,106,92,0.55); }

/* ─── v3 dark-canvas compatibility shim ───────────────────────────────────
   The templates were originally drafted on a Bootstrap light theme, so a
   lot of inline `style="color:#1a2332"`, `background:#f8f9fa`, badges using
   `#dbeafe / #fef9c3 / #f1f5f9`, and `text-dark / text-muted / bg-light /
   bg-white` classes leaked through. This block remaps them to the locked
   v3 AppleCommand palette without rewriting every template.
   Anything below uses `!important` deliberately to win against inline
   `style=""` attributes on Bootstrap markup.
   ----------------------------------------------------------------------- */

/* Bare cards rendered with Bootstrap light defaults. */
.card.border-0,
.card.border-0.shadow-sm,
.card.border-0.bg-light,
.card.border-0.bg-white {
  background: var(--bg-surface-1) !important;
  border: 1px solid var(--border-hairline) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}
.card.border-0 .card-body { color: var(--text-primary); }
.card.border-0 .card-body h6,
.card.border-0 .card-body .fw-semibold { color: var(--text-primary) !important; }

/* Bootstrap text utility classes leaking light theme.
   (.text-dark/.text-muted/.text-secondary/.text-primary and
   .bg-light/.bg-white are already remapped earlier in this file —
   keeping only the success/danger/warning additions here.) */
.text-success   { color: var(--tone-favorable) !important; }
.text-danger    { color: var(--tone-critical)  !important; }
.text-warning   { color: var(--accent)         !important; }

/* Mention card title links — were `text-decoration-none text-dark`,
   which renders dark text on the dark mention-card background. */
.mention-card h6 a,
.mention-card h6 a:link,
.mention-card h6 a:visited {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}
.mention-card h6 a:hover { color: var(--accent) !important; }

/* Mention snippet body text — was implicit dark theme. */
.mention-card .mention-snippet,
.mention-card p { color: var(--text-secondary) !important; }

/* Topic Breakdown / Tone Toward AC / Dominant Frames — labels and counts
   that used inline `color:#6c757d` (Bootstrap muted) or no color at all. */
.card .card-body span[style*="color:#6c757d"],
.card .card-body span[style*="color: #6c757d"] {
  color: var(--text-tertiary) !important;
}
.card .card-body p[style*="color:#6c757d"],
.card .card-body p[style*="color: #6c757d"] {
  color: var(--text-tertiary) !important;
}

/* Bootstrap progress bar background — light grey on dark canvas reads weak. */
.progress {
  background: var(--bg-surface-2) !important;
  border: 1px solid var(--border-hairline) !important;
}
.progress-bar.bg-primary { background: var(--accent) !important; }

/* Inline badges that hard-coded light theme tints. */
[style*="background:#dbeafe"],
[style*="background: #dbeafe"] {
  background: rgba(107,143,168,.18) !important;
  color: #6B8FA8 !important;
  border: 1px solid rgba(107,143,168,.35) !important;
}
[style*="background:#f1f5f9"],
[style*="background: #f1f5f9"] {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-hairline) !important;
}
[style*="background:#fef9c3"],
[style*="background: #fef9c3"] {
  background: rgba(208,171,120,.10) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(208,171,120,.30) !important;
}
[style*="background:#fffbeb"],
[style*="background: #fffbeb"] {
  background: var(--bg-surface-1) !important;
  border: 1px solid rgba(208,171,120,.30) !important;
}

/* Dominant Frames stat blocks — `background:#f8f9fa` light cards on dark canvas. */
[style*="background:#f8f9fa"],
[style*="background: #f8f9fa"] {
  background: var(--bg-surface-1) !important;
  border: 1px solid var(--border-hairline) !important;
}
[style*="color:#1a2332"],
[style*="color: #1a2332"] { color: var(--text-primary) !important; }
[style*="color:#0d6efd"],
[style*="color: #0d6efd"] { color: var(--accent) !important; }
[style*="color:#0a8f5a"],
[style*="color: #0a8f5a"] { color: var(--tone-favorable) !important; }
[style*="color:#16a34a"],
[style*="color: #16a34a"] { color: var(--tone-favorable) !important; }
[style*="color:#92400e"],
[style*="color: #92400e"] { color: var(--accent) !important; }
[style*="color:#78350f"],
[style*="color: #78350f"] { color: var(--text-secondary) !important; }
[style*="color:#713f12"],
[style*="color: #713f12"] { color: var(--accent) !important; }
[style*="color:#1d4ed8"],
[style*="color: #1d4ed8"] { color: #6B8FA8 !important; }
[style*="color:#475569"],
[style*="color: #475569"] { color: var(--text-secondary) !important; }
[style*="color:#64748b"],
[style*="color: #64748b"] { color: var(--text-secondary) !important; }
[style*="border-top:1px solid #f0f0f0"],
[style*="border-top: 1px solid #f0f0f0"] { border-top-color: var(--border-hairline) !important; }
[style*="background:#e9ecef"],
[style*="background: #e9ecef"] { background: var(--bg-surface-2) !important; }

/* Bootstrap buttons used as secondary controls. */
.btn-outline-secondary {
  color: var(--text-secondary) !important;
  border-color: var(--border-hairline) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}
.btn-outline-primary {
  color: var(--accent) !important;
  border-color: rgba(208,171,120,.35) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: rgba(208,171,120,.10) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.btn-dark {
  background: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-hairline) !important;
}
.btn-primary {
  background: var(--accent) !important;
  color: var(--bg-canvas) !important;
  border-color: var(--accent) !important;
}

/* Bootstrap table on dark surface. */
.table { color: var(--text-primary); }
.table thead { color: var(--text-tertiary); }
.table > :not(caption) > * > * { background: transparent !important; color: inherit !important; border-bottom-color: var(--border-hairline) !important; }

/* Alerts page banner — `alert-danger` and `alert-success` inherited bootstrap. */
.alert-danger {
  background: rgba(216,106,92,.10) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(216,106,92,.35) !important;
}
.alert-danger .bi { color: var(--tone-critical) !important; }
.alert-success {
  background: rgba(127,176,105,.10) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(127,176,105,.35) !important;
}
.alert-success .bi { color: var(--tone-favorable) !important; }

/* Code chips inside note callouts. */
code {
  background: var(--bg-surface-2);
  color: var(--accent);
  padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--border-hairline);
  font-family: var(--mono); font-size: .85em;
}

/* "Border-start" left-bar decoration on cards. */
.border-start.border-primary { border-left-color: var(--accent) !important; }

/* ── Consolidated ops-bar (freshness · views · CSV/Print) ── */
.ops-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 18px 0 22px;
  padding: 10px 14px;
  background: transparent;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.ops-bar .ops-left,
.ops-bar .ops-right {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ops-bar .ops-fresh {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
}
.ops-bar .ops-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.ops-bar .ops-meta { color: var(--text-secondary); }
.ops-bar .ops-meta strong { color: var(--text-primary); font-weight: 600; }
.ops-bar .ops-dim { color: var(--text-tertiary); }
.ops-bar .ops-toggle {
  font-size: 10.5px; letter-spacing: .04em;
  padding: 2px 9px; border-radius: 4px;
  border: 1px solid var(--border-hairline);
  color: var(--text-tertiary); text-decoration: none;
  background: transparent;
}
.ops-bar .ops-toggle:hover { color: var(--accent); border-color: var(--accent); }
.ops-bar .ops-toggle.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.ops-bar .ops-view-wrap { display: inline-flex; align-items: center; gap: 2px; }
.ops-bar .ops-view {
  font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: 4px;
  color: var(--text-secondary); text-decoration: none;
  border: 1px solid var(--border-hairline);
  background: transparent;
}
.ops-bar .ops-view:hover { color: var(--accent); border-color: var(--accent); }
.ops-bar .ops-view.is-active {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-soft); font-weight: 600;
}
.ops-bar .ops-view-x {
  background: none; border: 0; padding: 0 4px;
  color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer;
}
.ops-bar .ops-view-x:hover { color: var(--tone-critical); }
.ops-bar .ops-action {
  font-size: 10.5px; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 4px;
  border: 1px solid var(--border-hairline);
  color: var(--text-tertiary); text-decoration: none;
  background: transparent; cursor: pointer;
}
.ops-bar .ops-action:hover { color: var(--accent); border-color: var(--accent); }
.ops-bar .ops-sep {
  display: inline-block; width: 1px; height: 14px;
  background: var(--border-hairline); margin: 0 2px;
}

/* ─── Page purpose pill — used at the top of /executive and /briefing
       to make the differentiation between the two pages explicit at a
       glance. Eyebrow-style tag on the left, prose middle, cross-link right. */
.page-purpose-pill {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(212,175,55,0.06), rgba(212,175,55,0.02));
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: var(--radius);
  margin-bottom: 22px;
  font-family: var(--sans);
}
.page-purpose-pill .ppp-tag {
  font-family: var(--mono);
  font-size: 0.62rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 4px;
  background: rgba(212,175,55,0.06);
  white-space: nowrap;
  flex-shrink: 0;
}
.page-purpose-pill .ppp-body {
  flex: 1 1 auto;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.page-purpose-pill .ppp-body strong { color: var(--text-primary); font-weight: 600; }
.page-purpose-pill .ppp-link {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-family: var(--sans);
}
.page-purpose-pill .ppp-link a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(212,175,55,0.5);
  padding-bottom: 1px;
}
.page-purpose-pill .ppp-link a:hover { border-bottom-style: solid; }
@media (max-width: 880px) {
  .page-purpose-pill { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ─── Slim hero variant for executive brief — drops the dense KPI tile row
       since those numbers already live in War Room / Daily Briefing. Hero
       becomes a prose-led intro instead of a data dashboard. */
.exec-hero-slim .exec-hero-meta { display: none !important; }
.exec-hero-slim {
  padding-bottom: 28px !important;
}
.exec-hero-slim .exec-hero-headline {
  margin-bottom: 12px;
}

/* ─── Executive handoff row — replaces the redundant "source confidence
       strip" + "two strategic maps" + "featured CTA" stack at the bottom
       of /executive. Two cards: primary route (Briefing) + secondary
       route (War Room). The Brief is a strategic READ; once the analyst
       has the read, they need a clear next step — print it or dig in. */
.exec-handoff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
}
@media (max-width: 880px) { .exec-handoff-row { grid-template-columns: 1fr; } }
.handoff-card {
  display: block;
  padding: 22px 24px;
  background: var(--bg-surface-1);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, transform .12s, background .12s;
}
.handoff-card:hover {
  border-color: rgba(212,175,55,0.45);
  transform: translateY(-1px);
  background: var(--bg-surface-2);
}
.handoff-card.handoff-primary {
  background: linear-gradient(180deg, rgba(212,175,55,0.08), rgba(212,175,55,0.02));
  border-color: rgba(212,175,55,0.35);
}
.handoff-card .handoff-eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.handoff-card .handoff-title {
  font-family: var(--sans);
  font-size: 1.4rem; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.handoff-card .handoff-body {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.handoff-card .handoff-cta {
  font-family: var(--sans);
  font-size: 0.85rem; font-weight: 600;
  color: var(--accent);
}

/* Tighten exec section spacing so 5 insight cards breathe */
.exec-section-head { margin-top: 36px !important; margin-bottom: 18px !important; }
.insight-grid { gap: 18px !important; }
.tldr-strip { margin-top: 10px !important; margin-bottom: 8px !important; gap: 14px !important; }

/* ── Story of the day (Executive Brief) — dark theme, matches insight cards ── */
.story-of-day {
  margin: 22px 0 30px;
  padding: 22px 26px 18px;
  background:
    linear-gradient(135deg, rgba(208,171,120,0.05) 0%, transparent 55%),
    var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--accent, #c49e4c);
  border-radius: 10px;
}
.story-of-day .sod-eyebrow {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent, #c49e4c);
  font-weight: 600;
  margin-bottom: 12px;
}
.story-of-day .sod-prose {
  font-family: var(--sans);
  font-size: .96rem;
  line-height: 1.62;
  color: var(--text-primary);
  letter-spacing: -.005em;
}
.story-of-day .sod-prose strong { color: var(--accent, #c49e4c); font-weight: 600; }
.story-of-day .sod-prose em { color: var(--text-secondary, #B8AC9A); font-style: normal; }
.story-of-day .sod-prose .delta-up { color: #6EC177; font-weight: 600; }
.story-of-day .sod-prose .delta-down { color: #D17B6E; font-weight: 600; }
.story-of-day .sod-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border-hairline);
  gap: 12px; flex-wrap: wrap;
}
.story-of-day .sod-tag {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .68rem; letter-spacing: .04em;
  color: var(--text-tertiary);
}
.story-of-day .sod-copy {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .68rem; letter-spacing: .06em;
  color: var(--text-secondary, #B8AC9A);
  background: rgba(245,239,230,0.04);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 5px 11px; cursor: pointer;
  transition: all .15s ease;
}
.story-of-day .sod-copy:hover {
  background: rgba(208,171,120,0.10);
  border-color: var(--accent, #c49e4c);
  color: var(--accent, #c49e4c);
}
@media print {
  .story-of-day {
    background: #fff !important;
    color: #1f2937 !important;
    border-color: #e5e7eb !important;
    border-left-color: var(--accent, #c49e4c) !important;
    page-break-inside: avoid;
  }
  .story-of-day .sod-prose { color: #1f2937 !important; }
  .story-of-day .sod-prose strong { color: #0f172a !important; }
  .story-of-day .sod-prose em { color: #475569 !important; }
  .story-of-day .sod-copy { display: none !important; }
}

/* ── Live "Saved Xs ago" pill (Analyst Notes header) ─────────────────────── */
.notes-saved-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .60rem; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  background: #f0fdf4; color: #166534;
  border: 1px solid #bbf7d0;
  transition: all .25s ease;
}
.notes-saved-pill .nsp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34,197,94,.5);
}
.notes-saved-pill.is-saving { background: #fefce8; color: #854d0e; border-color: #fde68a; }
.notes-saved-pill.is-saving .nsp-dot { background: #eab308; animation: nsp-pulse 1.2s infinite; }
.notes-saved-pill.is-error  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.notes-saved-pill.is-error  .nsp-dot { background: #ef4444; }
.notes-saved-pill.is-idle   { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.notes-saved-pill.is-idle   .nsp-dot { background: #cbd5e1; }
@keyframes nsp-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(234,179,8,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(234,179,8,0);   }
  100% { box-shadow: 0 0 0 0   rgba(234,179,8,0);   }
}