/* ============================================================================
   PARLE COMMAND CENTER — SCIKIQ Plaza design system
   ----------------------------------------------------------------------------
   Rebuilt to match plaza.scikiq.org, whose palette, type stack and component
   idiom were read off the live site rather than approximated:

     · navy #003A5C / #001F33 grounds, teal #008C8C accent, gold #C4962C mark
     · Playfair Display for figures and section headings, Source Sans 3 for UI,
       Source Serif 4 for reading copy, JetBrains Mono for data and labels
     · SQUARE corners throughout — Plaza uses no border radius; that restraint
       is most of its character
     · hairline #E0DCD6 borders, shadow only on hover
     · KPIs are a joined strip, not separate cards: one outer border, cell
       dividers, and a 3px coloured stripe over each cell
     · micro-labels are 9-10px, 600-700 weight, 1.5-2px letter-spacing, upper

   Light is the committed theme, as it is on Plaza. The dark token block below
   still resolves if anything opts into it, but the app pins light so the look
   holds regardless of the viewer's OS setting.

   Sorento (Homera's licensed face) remains self-hosted; set
   --font-ui: var(--font-sorento) to put the UI back on it.
   ========================================================================== */

@font-face { font-family: "Sorento"; src: url("fonts/Sorento-Light.woff")        format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Sorento"; src: url("fonts/Sorento-Regular.woff")      format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sorento"; src: url("fonts/Sorento-Italic.woff")       format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Sorento"; src: url("fonts/Sorento-Medium.woff")       format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Sorento"; src: url("fonts/Sorento-MediumItalic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Sorento"; src: url("fonts/Sorento-Semibold.woff")     format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sorento"; src: url("fonts/Sorento-Bold.woff")         format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- tokens */
:root {
  /* Plaza palette, verbatim */
  --navy:        #003A5C;
  --navy-deep:   #001F33;
  --navy-light:  #1A5276;
  --teal:        #008C8C;
  --teal-light:  #00B2A9;
  --gold:        #C4962C;
  --gold-light:  #E8B84B;
  --white:       #FFFFFF;
  --off-white:   #FAFBFC;
  --wg1:         #F4F2EF;
  --wg2:         #E8E4DE;
  --wg3:         #C9C2B6;
  --wg4:         #9E9588;
  --red:         #C0392B;
  --green:       #1E8449;

  /* Chart series — Plaza's mc1..mc8 */
  --mc1: #003A5C; --mc2: #008C8C; --mc3: #C4962C; --mc4: #5B8C5A;
  --mc5: #8E6BAD; --mc6: #C0392B; --mc7: #2471A3; --mc8: #D4A03C;

  /* Roles */
  --bg:          var(--off-white);
  --surface:     var(--white);
  --surface-2:   var(--wg1);
  --inset:       var(--wg1);
  --line:        #E0DCD6;
  --line-strong: var(--wg3);
  --ink:         #1A1A1A;
  --ink-2:       #3D3D3D;
  --ink-3:       #6B6B6B;
  --ink-4:       #9B9B9B;
  --accent:      var(--navy);
  --brand:       var(--teal);

  /* Severity — fixed meaning, never decoration */
  --good:    var(--green);
  --warn:    var(--gold);
  --serious: #B3541E;
  --crit:    var(--red);
  --info:    var(--teal);
  --good-wash: rgba(30, 132, 73, .10);
  --warn-wash: rgba(196, 150, 44, .16);
  --crit-wash: rgba(192, 57, 43, .10);
  --info-wash: rgba(0, 140, 140, .10);

  /* Type */
  --font-sorento: "Sorento";
  --font-ui:      "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-serif:   "Source Serif 4", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

  --shadow-hover: 0 2px 12px rgba(0, 0, 0, .06);
  --pad-page: 40px;
}

/* Dark remains defined so an explicit opt-in still resolves; the app pins light. */
:root[data-theme="dark"] {
  --bg: var(--navy-deep); --surface: #002B45; --surface-2: #003A5C; --inset: #001827;
  --line: rgba(244,242,239,.12); --line-strong: rgba(244,242,239,.26);
  --ink: #F4F2EF; --ink-2: #B3C2CC; --ink-3: #8DA2AF; --ink-4: #7F95A3;
  --accent: var(--teal-light); --good: #35B46B; --warn: var(--gold-light);
  --crit: #E0574F; --info: var(--teal-light);
  --good-wash: rgba(53,180,107,.16); --warn-wash: rgba(196,150,44,.18);
  --crit-wash: rgba(224,87,79,.18); --info-wash: rgba(0,140,140,.18);
  --shadow-hover: 0 2px 12px rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font-family: var(--font-ui); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0; text-wrap: balance; }
a { color: inherit; }
::selection { background: rgba(0, 140, 140, .16); }
* { scrollbar-width: thin; scrollbar-color: var(--wg3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--wg3); }
*::-webkit-scrollbar-track { background: transparent; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid var(--navy); background: none; color: var(--navy);
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 8px 16px; cursor: pointer; transition: .2s; border-radius: 0;
}
.btn:focus { outline: none; }
.btn:focus-visible { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--teal); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-light); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink-3); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.22); padding: 4px 10px;
  white-space: nowrap; text-decoration: none;
}
.chip.live { color: #7FD9A6; border-color: rgba(127,217,166,.4); }
.chip.btn {
  cursor: pointer; color: var(--gold-light); border-color: rgba(196,150,44,.55);
  text-transform: none; letter-spacing: 0; font-size: 10.5px; padding: 4px 10px;
  background: none; font-family: var(--font-mono); font-weight: 400;
}
.chip.btn:hover { background: rgba(196,150,44,.14); color: #fff; }

/* ---------------------------------------------------------------- cards */
.card, .panel {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 0; padding: 18px 20px; min-width: 0;
  transition: box-shadow .25s;
}
.panel:hover { box-shadow: var(--shadow-hover); }
/* Plaza section head: tiny letterspaced teal label, then a Playfair title */
.panel > h2 {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: var(--teal);
  margin: 0 0 6px;
}
.panel .sub { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-3); font-style: italic; }

/* ---------------------------------------------------------------- forms */
.input, textarea {
  width: 100%; border: 1px solid var(--line); background: var(--white);
  padding: 10px 14px; color: var(--ink); font-family: var(--font-ui);
  font-size: 13px; border-radius: 0; transition: .2s;
}
.input::placeholder, textarea::placeholder { color: var(--ink-4); font-style: italic; }
.input:focus, textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 2px rgba(0,140,140,.18); }
.input:disabled, textarea:disabled { cursor: not-allowed; border-style: dashed; background: var(--wg1); color: var(--ink-4); }
textarea { min-height: 62px; resize: vertical; }
.label { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 600; color: var(--ink-2); }

/* ---------------------------------------------------------------- pills */
.pill, .tag {
  display: inline-flex; align-items: center; border-radius: 0;
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase; padding: 3px 7px; white-space: nowrap;
}
.pill-red, .tag.neg    { background: var(--crit-wash); color: var(--crit); }
.pill-amber, .tag.watch{ background: var(--warn-wash); color: #8A6A1E; }
.pill-green, .tag.pos  { background: var(--good-wash); color: var(--good); }
.pill-info, .tag.info  { background: var(--info-wash); color: var(--teal); }

.overline-brand {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 2px; color: var(--teal);
}
.heading-italic { font-style: italic; }

/* ============================================================================
   COMMAND CENTER
   ========================================================================== */
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad-page) 56px; }

/* masthead — Plaza's navy bar with the gold brand mark */
header.hdr {
  background: var(--navy-deep); color: #fff; height: 56px;
  padding: 0 var(--pad-page); display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
  position: sticky; top: 0; z-index: 200;
}
.hdr .brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hdr .bm {
  width: 32px; height: 32px; background: var(--gold); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--navy-deep);
}
.hdr .bt { font-weight: 600; font-size: 14px; letter-spacing: .3px; color: #fff; white-space: nowrap; }
.hdr .bt span { font-weight: 300; color: rgba(255,255,255,.5); margin-left: 8px; font-size: 12px; }
.mastmeta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }

/* crisis strip — Plaza alert cards: severity bar, letterspaced category */
.crisis {
  max-width: 1360px; margin: 20px auto 0; padding: 0 var(--pad-page);
  display: flex; flex-direction: column; gap: 10px;
  max-height: 188px; overflow-y: auto;
}
.alert {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line); background: var(--surface);
  padding: 13px 18px; border-radius: 0; transition: box-shadow .25s;
  position: relative; font-size: 13px;
}
.alert:hover { box-shadow: var(--shadow-hover); }
.alert::before {
  content: ""; width: 8px; align-self: stretch; min-height: 38px;
  background: var(--crit); flex-shrink: 0;
}
.alert.warn::before { background: var(--gold); }
.alert > span:nth-child(2) {
  min-width: 0; flex: 1; color: var(--ink-3); font-size: 12.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.alert b { display: block; font-weight: 600; font-size: 14px; color: var(--navy-deep); }
.alert a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.alert a:hover { color: var(--teal); border-bottom-color: var(--teal); }
.sev {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; padding: 0; background: none !important; align-self: center;
  min-width: 82px;
}
.sev.crit { color: var(--crit); }
.sev.warn { color: var(--gold); }
.alert-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-left: auto; }
.lead-time { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); white-space: nowrap; }

/* tabs — pinned under the header */
nav {
  position: sticky; top: 56px; z-index: 180;
  margin: 20px 0 0; padding: 0 max(var(--pad-page), calc((100vw - 1360px) / 2));
  display: flex; gap: 0; flex-wrap: wrap;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
nav button {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-3); font: 400 13.5px/1 var(--font-ui); padding: 14px 18px;
  cursor: pointer; border-radius: 0; letter-spacing: .2px;
}
nav button:hover { color: var(--navy); background: var(--wg1); }
nav button:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
nav button.on { color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }

.screen { display: none; padding-top: 24px; }
.screen.on { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .screen.on { animation: fade .18s ease; }
  @keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
}

/* grids */
.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-map { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
@media (max-width: 1024px) { .cols-2, .cols-map, .kpis { grid-template-columns: 1fr !important; } }
section.band { margin-top: 24px; }

/* KPI strip — joined, cell dividers, 3px coloured stripe per cell */
.kpis {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0; border: 1px solid var(--line); background: var(--surface);
}
.kpi {
  padding: 20px 16px; border-right: 1px solid var(--line); text-align: center;
  position: relative; display: flex; flex-direction: column; gap: 2px;
  background: none; border-radius: 0; box-shadow: none;
}
.kpi:last-child { border-right: none; }
.kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--mc1); }
.kpi:nth-child(2)::before { background: var(--mc2); }
.kpi:nth-child(3)::before { background: var(--mc3); }
.kpi:nth-child(4)::before { background: var(--mc4); }
.kpi:nth-child(5)::before { background: var(--mc5); }
.kpi:nth-child(6)::before { background: var(--mc6); }
.kpi .label {
  font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-4); margin: 0 0 4px;
}
.kpi .value {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  color: var(--navy-deep); line-height: 1.1; margin-bottom: 2px;
}
.kpi .value small { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.kpi .note { font-size: 11px; color: var(--ink-4); margin-top: 4px; line-height: 1.4; }
.kpi svg { margin-top: 6px; width: 100%; height: 28px; display: block; }
.delta { font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.delta.up { color: var(--good); } .delta.down { color: var(--crit); } .delta.flat { color: var(--ink-4); }

/* signal rows */
.rows { display: flex; flex-direction: column; }
.row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 2px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.row:first-child { border-top: none; }
.row .t { flex: 1 1 240px; min-width: 0; }
.row .t b { font-weight: 600; color: var(--navy-deep); font-size: 13.5px; }
.row .t .src { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.row .t a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.row .t a:hover { color: var(--teal); border-bottom-color: var(--teal); }
.empty { color: var(--ink-4); font-size: 12.5px; padding: 12px 2px; font-style: italic; }

.ago {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4);
  white-space: nowrap; cursor: help; padding-top: 2px;
}
.alert-meta .ago { margin-left: 0; }

/* recommended actions — Plaza's italic teal action line */
.action {
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  background: var(--wg1); padding: 9px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; margin-top: 8px; border-radius: 0;
}
.action:first-child { margin-top: 0; }
.action .head { display: flex; gap: 10px; align-items: baseline; flex-wrap: nowrap; }
.action .head b { font-weight: 600; color: var(--navy-deep); font-size: 13px; line-height: 1.3; }
.action p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.action p.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.action.open p.clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
.rec-foot { display: flex; align-items: center; gap: 8px; }
.rec-foot .dec-log { margin-left: auto; padding: 2px 8px; font-size: 9px; flex-shrink: 0; }
.action .win { font-size: 11.5px; color: var(--teal); font-style: italic; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action.open .win { white-space: normal; }
.conf { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); white-space: nowrap; }

/* charts */
.chart-wrap { overflow-x: auto; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 12px; font-size: 11.5px; color: var(--ink-3); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
svg text { font-family: var(--font-mono); fill: var(--ink-4); }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600; text-align: left; padding: 10px;
  border-bottom: 1px solid var(--line-strong);
}
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 11.5px; }
tr:hover td { background: var(--wg1); }

/* share of voice */
.sov-bar { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.sov-bar .nm { width: 108px; font-size: 12.5px; color: var(--ink-2); }
.sov-bar .bar { flex: 1; height: 14px; background: var(--wg2); overflow: hidden; }
.sov-bar .bar i { display: block; height: 100%; }
.sov-bar .val { width: 76px; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* simulation */
.sim-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 14px 0; border: 1px solid var(--line); }
.sim-kpi { background: var(--surface); padding: 14px; border-right: 1px solid var(--line); text-align: center; }
.sim-kpi:last-child { border-right: none; }
.sim-kpi .l { font-size: 9.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-4); }
.sim-kpi .v { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--navy-deep); margin-top: 3px; }
.sim-kpi .v.bad { color: var(--crit); } .sim-kpi .v.ok { color: var(--good); }

/* launch scrubber */
.scrub { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.scrub input[type=range] { flex: 1 1 260px; accent-color: var(--teal); height: 24px; }
.scrub input[type=range]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.daybadge { font-family: var(--font-mono); font-size: 12.5px; color: var(--navy); white-space: nowrap; min-width: 150px; }

/* verdict — Plaza's executive-summary device: cream field, gold rule */
.verdict {
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  background: var(--wg1); padding: 14px 18px; font-size: 13px;
  color: var(--ink-2); margin-top: 14px; border-radius: 0;
}
.verdict b { color: var(--navy-deep); }

footer {
  max-width: 1360px; margin: 40px auto 0; padding: 18px var(--pad-page);
  border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-4); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* internal panel scrolling — a screen costs about one viewport */
#threatList, #recList, #newsPos, #newsNeg, #compFeed, #murmurFeed,
#radarReg, #radarAct, #radarLegal, #radarMedia {
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px;
}
#stateTable { max-height: 440px; overflow: auto; }
#stateTable thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
#complaintChart svg { max-height: 170px; }

/* ---------------------------------------------------------------- india map */
.map-controls { display: flex; gap: 0; flex-wrap: wrap; margin-bottom: 14px; border: 1px solid var(--line); width: fit-content; }
.map-controls button {
  appearance: none; background: var(--surface); border: none; border-right: 1px solid var(--line);
  color: var(--ink-3); font: 600 10px var(--font-ui); letter-spacing: 1.2px;
  text-transform: uppercase; padding: 8px 13px; cursor: pointer; border-radius: 0;
}
.map-controls button:last-child { border-right: none; }
.map-controls button:hover { color: var(--navy); background: var(--wg1); }
.map-controls button:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.map-controls button.on { color: #fff; background: var(--navy); }

.map-shell { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; align-items: start; }
@media (max-width: 1180px) { .map-shell { grid-template-columns: 1fr; } }
.map-holder { min-width: 0; }
.map-holder svg { display: block; width: 100%; height: min(430px, 52vh); }
.map-holder path { stroke: var(--surface); stroke-width: 1; transition: opacity 120ms; cursor: pointer; }
.map-holder path:hover { opacity: .8; stroke: var(--navy-deep); stroke-width: 1.6; }
.map-holder path.sel { stroke: var(--teal); stroke-width: 2; }

.map-side { display: flex; flex-direction: column; gap: 14px; }
.map-legend { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--ink-3); }
.map-legend .swatches { display: flex; height: 12px; overflow: hidden; }
.map-legend .swatches i { flex: 1; }
.map-legend .ends { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); }
.map-legend .nodata { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-4); }
.map-legend .nodata i { width: 12px; height: 12px; background: var(--wg2); border: 1px solid var(--line); }

.map-detail { background: var(--wg1); border: 1px solid var(--line); padding: 12px 14px; min-height: 116px; }
.map-detail h3 { font-family: var(--font-display); margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--navy-deep); }
.map-detail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 11.5px; }
.map-detail dt { color: var(--ink-4); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; align-self: center; }
.map-detail dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.map-detail .flag { margin-top: 8px; font-size: 11.5px; color: var(--gold); font-style: italic; }
.map-note { margin: 0; font-size: 10.5px; color: var(--ink-4); line-height: 1.5; }

/* ============================================================================
   MORNING BRIEF — a document; same system, editorial rhythm
   ========================================================================== */
.brief { max-width: 760px; margin: 0 auto; padding: 48px 24px 72px; }
.brief h1 { font-family: var(--font-display); font-size: 30px; font-weight: 700; margin: 8px 0 6px; line-height: 1.22; color: var(--navy-deep); }
.brief .date { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); }
.brief .mood {
  display: inline-block; margin-top: 12px; padding: 4px 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; border: 1px solid currentColor;
}
.brief .mood.calm { color: var(--good); }
.brief .mood.watchful { color: var(--gold); }
.brief .mood.stormy { color: var(--crit); }
.brief .stats {
  display: flex; gap: 20px; flex-wrap: wrap; margin: 20px 0; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3);
}
.brief h2 {
  font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin: 30px 0 8px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.brief ul { margin: 10px 0; padding-left: 20px; }
.brief li { margin: 8px 0; font-family: var(--font-serif); font-size: 15px; color: var(--ink-2); }
.brief .act {
  background: var(--wg1); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  padding: 12px 16px; margin: 12px 0;
}
.brief .act b { display: block; font-size: 14px; font-weight: 600; color: var(--navy-deep); }
.brief .act span { font-family: var(--font-serif); font-size: 13px; color: var(--ink-3); }
.brief footer { margin-top: 36px; border: none; padding: 0; justify-content: flex-start; max-width: none; }

/* ---------------------------------------------------------------- storylines */
/* The narrative entry point: each card is one storyline — severity bar on the
   left (the alert-card device), status in Plaza micro-caps, Playfair headline,
   dated arc in italics, teal action line, and the evidence one toggle away. */
.stories { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1024px) { .stories { grid-template-columns: 1fr; } }
.story {
  border: 1px solid var(--line); background: var(--surface);
  padding: 16px 18px 13px 24px; position: relative; min-width: 0;
}
.story::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--wg3); }
.story.critical::before { background: var(--red); }
.story.warning::before { background: var(--gold); }
.story.opportunity::before { background: var(--green); }
.story.neutral::before { background: var(--teal); }
.story-head { display: flex; gap: 12px; justify-content: space-between; }
.story-status {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
}
.story-status.breaking { color: var(--red); }
.story-status.developing { color: var(--gold); }
.story-status.fading { color: var(--ink-4); }
.story h3 { font-family: var(--font-display); font-size: 17.5px; font-weight: 700; color: var(--navy-deep); margin: 5px 0 7px; line-height: 1.3; }
.story p { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.story .arc { font-size: 12px; color: var(--ink-3); font-style: italic; margin-bottom: 8px; }
.story .act-line { font-size: 12.5px; color: var(--teal); font-style: italic; margin-bottom: 4px; }
.story-meta {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-4);
}
.story-meta .toggle {
  cursor: pointer; border: none; background: none; padding: 0; margin-left: auto;
  font: 600 10px var(--font-mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--navy);
}
.story-meta .toggle:hover { color: var(--teal); }
.story-evidence { margin-top: 10px; border-top: 1px solid var(--line); max-height: 224px; overflow-y: auto; }
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.spark i { width: 5px; display: block; background: var(--wg3); }
.spark i.hot { background: var(--teal); }
/* the hidden attribute must always win — display:flex on .rows was beating it */
[hidden] { display: none !important; }

/* Compact story cards — the Command Center must fit near one viewport.
   Summaries clamp to two lines, arc and action to one; full text lives in the
   evidence toggle and the title attribute. */
.stories { gap: 14px; }
.story { padding: 13px 16px 10px 22px; }
.story h3 { font-size: 16px; margin: 4px 0 5px; }
.story p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.story .arc, .story .act-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }

/* Command Center layering: numbers (KPI strip) -> narrative (stories, wide)
   with actions as its side rail -> nothing else. Raw feeds live on Signals. */
.story-row { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
@media (max-width: 1024px) { .story-row { grid-template-columns: 1fr; } }
.story-row .stories { grid-template-columns: 1fr; }
@media (min-width: 1240px) { .story-row .stories { grid-template-columns: 1fr 1fr; } }
#recList { max-height: 560px; }
#prodFeed { max-height: 470px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }

/* ---------------------------------------------------------------- activity drawer */
/* The pipeline made visible: a right-hand slide-over streaming what every agent
   is doing. Auto-opens on Ingest; also shows the scheduler's own cycles, which
   is the honest proof the system runs itself. */
#actPanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 94vw;
  background: var(--surface); border-left: 1px solid var(--line); z-index: 400;
  display: flex; flex-direction: column; box-shadow: -10px 0 28px rgba(0, 31, 51, .14);
}
.act-head {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--line); background: var(--navy-deep);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--gold-light);
}
.act-busy { color: rgba(255,255,255,.55); letter-spacing: .5px; text-transform: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-busy.on { color: #7FD9A6; }
#actClose {
  margin-left: auto; border: none; background: none; color: rgba(255,255,255,.7);
  font-size: 18px; cursor: pointer; line-height: 1; padding: 0 2px;
}
#actClose:hover { color: #fff; }
.act-log { flex: 1; overflow-y: auto; padding: 8px 14px 14px; }
.act-row {
  display: flex; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--wg1);
  align-items: baseline; font-size: 12px;
}
.act-time { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); white-space: nowrap; }
.act-agent {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; color: var(--navy); white-space: nowrap; width: 92px; flex-shrink: 0;
}
.act-row.ok .act-agent { color: var(--green); }
.act-row.warn .act-agent { color: #8A6A1E; }
.act-row.error .act-agent { color: var(--red); }
.act-msg { flex: 1; min-width: 0; color: var(--ink-2); line-height: 1.4; overflow-wrap: break-word; }
.act-msg small { display: block; color: var(--ink-4); font-size: 11px; }
.busydot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #7FD9A6; animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .busydot { animation: none; } }


/* ---------------------------------------------------------------- P&L strip */
/* The boardroom line: three rupee totals a JMD opens the tool for. */
.pnl-strip {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  background: var(--wg1); padding: 10px 16px; margin-bottom: 14px;
}
.pnl-item { display: flex; flex-direction: column; gap: 1px; }
.pnl-item i {
  font-style: normal; font-family: var(--font-ui); font-size: 9px; font-weight: 700;
  letter-spacing: 1.6px; color: var(--ink-4);
}
.pnl-item b { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--navy-deep); }
.pnl-item.risk b { color: var(--red); }
.pnl-item.up b { color: var(--green); }
.pnl-note { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); max-width: 300px; text-align: right; }
.pnl-line { font-family: var(--font-mono); font-size: 11px; margin-bottom: 6px; cursor: help; }
.pnl-line.risk { color: var(--red); } .pnl-line.up { color: var(--green); }
.pnl-line small { color: var(--ink-4); margin-left: 6px; }

/* ---------------------------------------------------------------- supply radar */
.supply-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.driver { border: 1px solid var(--line); background: var(--surface); padding: 14px 16px 11px 22px; position: relative; min-width: 0; }
.driver::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--wg3); }
.driver.up::before { background: var(--red); }        /* cost pressure = margin risk */
.driver.down::before { background: var(--green); }
.driver.stable::before { background: var(--teal); }
.drv-dir { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.drv-dir.risk { color: var(--red); } .drv-dir.up { color: var(--green); } .drv-dir.flat { color: var(--ink-4); }
.drv-sens { font-size: 12.5px; color: var(--ink-2); margin: 6px 0; }
.drv-sens b { font-family: var(--font-display); font-size: 16px; color: var(--navy-deep); }
.drv-sens small { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); }
.driver p { margin: 0 0 7px; font-size: 12.5px; color: var(--ink-2); }


/* ---------------------------------------------------------------- alert ticker */
/* The crisis strip as a broadcast ticker: one slim line instead of three cards,
   ~190px of prime real estate returned to the story. Full detail lives in the
   tooltip and the linked source; hover pauses the scroll. */
.ticker {
  max-width: 1360px; margin: 10px auto 0; padding: 0 var(--pad-page);
  display: flex; align-items: center; gap: 0; height: 34px;
}
.tk-tag {
  flex-shrink: 0; align-self: stretch; display: flex; align-items: center;
  background: var(--red); color: #fff; padding: 0 12px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 2px;
}
.tk-window {
  flex: 1; min-width: 0; overflow: hidden; align-self: stretch;
  border: 1px solid var(--line); border-left: none; background: var(--surface);
  display: flex; align-items: center;
}
.tk-track {
  display: inline-flex; align-items: center; white-space: nowrap; will-change: transform;
  animation: tk-scroll 60s linear infinite;  /* JS overrides duration to width/55px-per-s */
}
.tk-window:hover .tk-track, .tk-track:focus-within { animation-play-state: paused; }
@keyframes tk-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tk-track { animation: none !important; }
  .tk-window { overflow-x: auto; }
}
.tk-item {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 0 14px;
  font-size: 12.5px; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
a.tk-item:hover { color: var(--navy); }
a.tk-item:hover, .tk-item:hover { background: var(--wg1); }
.tk-kind {
  font-style: normal; font-family: var(--font-mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase; align-self: center;
}
.tk-kind.crit { color: var(--red); }
.tk-kind.warn { color: #8A6A1E; }
.tk-kind.info { color: var(--teal); }
.tk-ago { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); }
.tk-sep { font-style: normal; color: var(--wg3); font-size: 8px; }


/* ---------------------------------------------------------------- gist tooltip */
#gistTip {
  position: fixed; z-index: 500; max-width: 410px;
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 8px 28px rgba(0, 31, 51, .16);
  padding: 10px 13px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  pointer-events: none;
}
#gistTip em { color: var(--ink-4); }
.gist-label {
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 500;
  letter-spacing: 1.6px; color: var(--teal);
}
.gist-why { margin-top: 6px; font-size: 12px; font-style: italic; color: var(--teal); }
[data-gist] { cursor: help; }
[data-gist] a { cursor: pointer; }


/* ---------------------------------------------------------------- story view */
/* The stitching: click a storyline, get the whole dossier — arc, money, and
   live spokes into Battlegrounds, Supply, Regional, Simulation. Tabs are
   lenses; the story is the thread. */
#storyView, #twModal {
  position: fixed; inset: 0; z-index: 450;
  background: rgba(0, 31, 51, .45); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 46px 20px; overflow-y: auto;
}
.sv-panel {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  max-width: 880px; width: 100%; padding: 26px 30px 22px;
  box-shadow: 0 18px 60px rgba(0, 31, 51, .35);
}
#svClose, #twModalClose {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 22px; color: var(--ink-4); cursor: pointer; line-height: 1;
}
#svClose:hover, #twModalClose:hover { color: var(--red); }
.sv-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--navy-deep); margin: 6px 0 8px; line-height: 1.25; }
.sv-sum { font-family: var(--font-serif); font-size: 14.5px; color: var(--ink-2); margin: 0 0 8px; }
.sv-pnl { border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--wg1); padding: 9px 14px; margin: 10px 0; }
.sv-pnl b { font-family: var(--font-display); font-size: 17px; margin-right: 10px; }
.sv-pnl.risk b { color: var(--red); } .sv-pnl.up b { color: var(--green); }
.sv-pnl span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.sv-pnl small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); margin-top: 2px; }
.sv-stitch { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.sv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--wg1); }
.sv-row i {
  font-style: normal; width: 158px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1.6px; color: var(--ink-4);
}
.sv-row em { font-size: 11.5px; color: var(--ink-4); }
.sv-chip {
  border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer;
  font: 600 11px var(--font-ui); color: var(--navy); padding: 5px 11px; border-radius: 0;
}
.sv-chip:hover { border-color: var(--teal); color: var(--teal); }
.sv-chip.sim { background: var(--navy); border-color: var(--navy); color: #fff; }
.sv-chip.sim:hover { background: var(--navy-light); color: #fff; }
.sv-evhead { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1.6px; color: var(--teal); margin: 14px 0 2px; }
.sv-ev { max-height: 300px; overflow-y: auto; }
.story { cursor: pointer; }
.story:hover { box-shadow: var(--shadow-hover); }


/* market line on driver cards — live external price fused with the seeded book */
.drv-mkt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 7px 0 2px; font-size: 12px; }
.drv-mkt .mkt-nm { color: var(--ink-3); }
.drv-mkt .mkt-nm em { font-style: italic; color: var(--ink-4); font-size: 10.5px; }
.drv-mkt b { font-family: var(--font-display); font-size: 15px; color: var(--navy-deep); }
.mkt-chg { font-family: var(--font-mono); font-size: 10px; }
.mkt-chg.neg { color: var(--red); }   /* cost UP = margin pain */
.mkt-chg.pos { color: var(--green); }
.drv-mkt small { flex-basis: 100%; font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); }
.drv-mkt.none small { flex-basis: auto; }


/* ---------------------------------------------------------------- ask bar */
/* Plaza's centrepiece, finally: one question over every layer. */
.askwrap { max-width: 1360px; margin: 14px auto 0; padding: 0 var(--pad-page); }
.askbar { display: flex; gap: 0; }
.askbar input {
  flex: 1; border: 1px solid var(--line-strong); border-right: none; background: var(--surface);
  padding: 13px 18px; font-family: var(--font-display); font-style: italic; font-size: 16px;
  color: var(--ink); border-radius: 0;
}
.askbar input::placeholder { color: var(--wg3); }
.askbar input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 2px rgba(0,140,140,.15); }
.askbar .btn { padding: 0 26px; font-size: 12px; }
.ask-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ask-chips button {
  border: 1px solid var(--line); background: var(--wg1); color: var(--ink-3);
  font: 400 11.5px var(--font-ui); padding: 5px 12px; cursor: pointer; border-radius: 0;
}
.ask-chips button:hover { color: var(--navy); border-color: var(--line-strong); }
#askOut {
  position: relative; margin-top: 10px; border: 1px solid var(--line);
  border-left: 3px solid var(--teal); background: var(--surface); padding: 16px 20px 12px;
}
#askClose { position: absolute; top: 8px; right: 10px; border: none; background: none;
  font-size: 18px; color: var(--ink-4); cursor: pointer; }
#askClose:hover { color: var(--red); }
.ask-q { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--ink-4);
  text-transform: uppercase; margin-bottom: 8px; }
.ask-a { font-family: var(--font-serif); font-size: 14.5px; color: var(--ink-2); line-height: 1.65; max-width: 76ch; }
.ask-a sup.cite { color: var(--teal); font-family: var(--font-mono); font-size: 9px; }
.ask-mods, .ask-cites { border-top: 1px solid var(--wg1); margin-top: 12px; padding-top: 8px; }
.ask-mods i, .ask-cites i { font-style: normal; display: block; font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: 1.6px; color: var(--ink-4); margin-bottom: 6px; }
.ask-mods { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ask-mods i { margin-bottom: 0; }
.ask-cites .row { padding: 7px 0; }

/* early-catch badge — the lead-time proof, per storyline */
.lead-chip {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1px;
  color: var(--green); border: 1px solid rgba(30,132,73,.35); padding: 2px 7px; cursor: help;
}


/* ask answer typography — real lists, quiet headings */
.ask-a p { margin: 0 0 9px; }
.ask-a ul { margin: 2px 0 10px; padding-left: 20px; }
.ask-a li { margin: 5px 0; }
.ask-h { font: 600 11px var(--font-ui); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--navy); margin: 12px 0 5px; }

/* decision log panel (shares the activity drawer chrome) */
#decPanel { position: fixed; top: 0; right: 0; bottom: 0; width: 430px; max-width: 94vw;
  background: var(--surface); border-left: 1px solid var(--line); z-index: 400;
  display: flex; flex-direction: column; box-shadow: -10px 0 28px rgba(0, 31, 51, .14); }
.dec-add { display: flex; gap: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dec-add input { flex: 1; border: 1px solid var(--line-strong); border-right: none;
  padding: 8px 12px; font: 13px var(--font-ui); border-radius: 0; }
.dec-add input:focus { outline: none; border-color: var(--teal); }
.dec-add .btn { padding: 0 16px; }
.dec-row { padding: 10px 2px; border-bottom: 1px solid var(--wg1); }
.dec-row.done { opacity: .75; } .dec-row.dropped { opacity: .5; }
.dec-top { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.dec-top b { font-size: 13px; color: var(--navy-deep); }
.dec-st { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1.6px; text-transform: uppercase; }
.dec-st.open { color: var(--gold); } .dec-st.done { color: var(--green); } .dec-st.dropped { color: var(--ink-4); }
.dec-act { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.dec-out { font-size: 12px; font-style: italic; color: var(--teal); margin-top: 2px; }
.dec-meta { display: flex; gap: 12px; align-items: center; margin-top: 5px;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); }
.dec-btn { border: 1px solid var(--line-strong); background: none; cursor: pointer;
  font: 600 9.5px var(--font-mono); padding: 2px 8px; border-radius: 0; color: var(--ink-3); }
.dec-btn.done:hover { color: var(--green); border-color: var(--green); }
.dec-btn.drop:hover { color: var(--red); border-color: var(--red); }
.action .dec-log { margin-top: 6px; padding: 4px 10px; font-size: 9.5px; }

/* ============ Demand-Supply Twin ============ */
.tw-toggle { cursor: pointer; user-select: none; }
.tw-caret { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal); margin-left: 10px; }
.tw-toggle:hover .tw-caret { text-decoration: underline; }
#twGraphSec.tw-collapsed .tw-graph-body { display: none; }
#twGraphSec.tw-collapsed { padding-bottom: 12px; }
.tw-key { font-size: 12px; color: var(--ink-soft, #5A6B76); margin-left: 8px; }
.tw-key .lk { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin: 0 4px 2px 8px; }
.lk.learned, .lk-chip.learned { background: var(--teal); }
.lk.book, .lk-chip.book { background: var(--gold); }
.lk.assumed, .lk-chip.assumed { background: #9AA8B0; }
.lk.identity, .lk-chip.identity { background: var(--navy); }
.lk-chip { color: #fff; font-size: 10px; padding: 1px 6px; letter-spacing: .04em; text-transform: uppercase; }

.tw-graph-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 16px; }
@media (max-width: 1024px) { .tw-graph-wrap { grid-template-columns: 1fr; } }
.tw-graph svg { width: 100%; height: auto; display: block; }
.tw-col { font-size: 12px; font-weight: 700; letter-spacing: .1em; fill: var(--navy); }
.tw-edge { fill: none; stroke-width: 1.2; opacity: .35; cursor: pointer; }
.tw-edge.learned { stroke: var(--teal); }
.tw-edge.book { stroke: var(--gold); }
.tw-edge.assumed { stroke: #9AA8B0; stroke-dasharray: 5 4; }
.tw-edge.identity { stroke: var(--navy); }
.tw-edge.hot { opacity: 1; stroke-width: 2.4; }
.tw-node { cursor: pointer; }
.tw-node rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.tw-node.driver rect { stroke: var(--teal); }
.tw-node.cost rect { stroke: var(--gold); }
.tw-node.pnl rect { fill: var(--navy); stroke: var(--navy); }
.tw-node.pnl .tw-lab, .tw-node.pnl .tw-val { fill: #fff; }
.tw-node.sel rect { stroke-width: 2.5; }
.tw-node.demand.sel rect, .tw-node.demand:hover rect { stroke: var(--navy); }
.tw-lab { font-size: 13px; font-weight: 700; fill: var(--ink); }
.tw-val { font-size: 11px; fill: #5A6B76; }
.tw-live { fill: var(--green); }
.tw-detail { border: 1px solid var(--line); background: var(--inset); padding: 12px; overflow-y: auto; max-height: 660px; position: relative; }
.tw-dhead { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 8px; }
.tw-dhead b { display: block; font-size: 15px; }
.tw-dhead span { font-size: 12px; color: #5A6B76; }
.tw-link { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12px; line-height: 1.5; }
.tw-link b { font-size: 13px; }
.tw-dir { color: var(--teal); font-weight: 700; margin-right: 4px; }
.tw-el { display: block; color: #5A6B76; font-family: var(--font-mono, monospace); font-size: 11px; }

.tw-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tw-presets .btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.tw-slider { display: grid; grid-template-columns: 150px 1fr 76px; gap: 10px; align-items: center; padding: 4px 0; }
.tw-sl-lab { font-size: 13px; }
.tw-sl-val { text-align: right; font-size: 13px; color: var(--navy); font-weight: 700; }
.tw-slider input[type="range"] { accent-color: var(--teal); }

/* the lab's result box: bounded + scrollable so the panel never balloons,
   and the row's panels align to their own content instead of stretching */
.tw-lab-row { align-items: start; }
.tw-lastrun { margin-top: 12px; font-size: 13px; color: #5A6B76; display: flex;
  align-items: center; gap: 10px; flex-wrap: wrap; }
#twModal .sv-panel { max-width: 760px; }

.tw-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.tw-table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: #5A6B76; border-bottom: 1px solid var(--line-strong); padding: 4px 8px 4px 0; }
.tw-table td { border-bottom: 1px solid var(--line); padding: 5px 8px 5px 0; }
.tw-table td.num { text-align: right; font-family: var(--font-mono, monospace); }
.tw-table td.gap { color: var(--crit); font-weight: 700; }
.tw-narr { margin-top: 12px; padding: 10px 12px; background: var(--info-wash); border-left: 3px solid var(--teal); font-size: 13px; line-height: 1.55; }
.tw-counter { margin-top: 8px; padding: 10px 12px; background: var(--warn-wash); border-left: 3px solid var(--gold); font-size: 13px; line-height: 1.55; }
.tw-counter .btn { margin-left: 8px; }

.tw-chart { width: 100%; height: auto; display: block; background: var(--inset); border: 1px solid var(--line); }
.tw-actual { fill: none; stroke: var(--navy); stroke-width: 2; }
.tw-fitted { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 6 4; }
.tw-anchor { stroke: var(--crit); stroke-width: 1; stroke-dasharray: 3 3; }
.tw-anno { font-size: 10px; fill: #5A6B76; }
.tw-bar { fill: var(--teal); opacity: .85; }
.tw-bar.dn { fill: #9AA8B0; }
.tw-base { stroke: var(--navy); stroke-width: 1.6; }
.tw-cap { stroke: var(--crit); stroke-width: 1; stroke-dasharray: 2 3; }
.tw-chart-key { display: flex; gap: 16px; align-items: center; font-size: 12px; margin: 6px 0 2px; color: #5A6B76; }
.tw-chart-key .sw { display: inline-block; width: 16px; height: 3px; margin-right: 5px; vertical-align: middle; }
.sw.actual { background: var(--navy); }
.sw.fitted { background: var(--teal); }
.sw.bar { background: var(--teal); height: 9px; }
.sw.base { background: var(--navy); }
.sw.cap { background: var(--crit); height: 1px; border-bottom: 1px dashed var(--crit); }

.tw-heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.hchip { padding: 6px 8px; border: 1px solid var(--line); position: relative; min-height: 46px; }
.hchip b { display: block; font-size: 17px; line-height: 1.1; }
.hchip span { font-size: 11px; line-height: 1.25; display: block; margin-top: 2px; }
.hchip.dark, .hchip.dark span { color: #fff; }
.hchip .an { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 10px; font-weight: 700;
  padding: 1px 5px; background: rgba(255,255,255,.85); color: var(--ink); }
.hchip .an.hot { color: var(--crit); }
.hchip .an.cool { color: var(--navy); }

/* twin: signal-source nodes + feed edges + campaign block */
.tw-node.source rect { stroke: #9AA8B0; fill: var(--inset); }
.tw-node.source .tw-lab { font-size: 11.5px; }
.tw-node.source .tw-val { font-size: 10px; }
.tw-edge.feed { stroke: #8FB3B3; stroke-dasharray: 2 3; }
.lk.feed { background: #8FB3B3; }
.tw-camp-row { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.tw-div { border: none; border-top: 1px solid var(--line); margin: 18px 0 14px; }
.tw-camp b { font-family: var(--font-display); font-size: 17px; color: var(--navy-deep); }
.tw-camp-line { margin: 6px 0; font-size: 13px; }
.tw-tag { font-family: var(--font-mono); font-style: normal; font-size: 9px; letter-spacing: .12em;
  color: var(--teal); margin-right: 8px; }
.tw-tl { padding-left: 18px; margin: 10px 0; font-size: 13px; }
.tw-tl li { margin: 3px 0; }

/* twin: training-history nodes + trained-on edges */
.tw-node.history rect { stroke: var(--navy); stroke-dasharray: 4 3; fill: var(--inset); }
.tw-node.history .tw-lab { font-size: 11.5px; }
.tw-node.history .tw-val { font-size: 10px; }
.tw-edge.trained { stroke: var(--navy); stroke-dasharray: 1 4; opacity: .15; }
.tw-edge.trained.hot { opacity: .8; }
.lk.trained { background: var(--navy); }

/* twin: supply-chain nodes + chain edges */
.tw-node.supply rect { stroke: var(--navy-light); stroke-width: 1.4; }
.tw-edge.chain { stroke: var(--navy-light); opacity: .3; }
.tw-edge.chain.hot { opacity: 1; }

.lk-chip.chain { background: var(--navy-light); }
.lk-chip.feed { background: #8FB3B3; }
.lk-chip.trained { background: var(--navy); }

/* campaign provenance chips — the belief hierarchy, visible */
.pv { font-family: var(--font-mono); font-style: normal; font-size: 8.5px; font-weight: 700;
  letter-spacing: .1em; padding: 1px 6px; color: #fff; vertical-align: middle; }
.pv.computed { background: var(--navy); }
.pv.data { background: var(--teal); }
.pv.composed { background: #9AA8B0; }
.pv-note { margin-top: 12px; padding: 8px 10px; background: var(--inset);
  border-left: 3px solid #9AA8B0; font-size: 11.5px; color: #5A6B76; line-height: 1.5; }

/* assumptions editor */
#twAsm { position: fixed; inset: 0; z-index: 460; background: rgba(0, 31, 51, .45);
  backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center;
  padding: 46px 20px; overflow-y: auto; }
#twAsmClose { position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 22px; color: var(--ink-4); cursor: pointer; line-height: 1; }
#twAsmClose:hover { color: var(--red); }
#twAsmForm input[type="number"] { width: 100%; border: 1px solid var(--line-strong);
  padding: 5px 8px; font-family: var(--font-mono); font-size: 13px; background: var(--surface); }

/* custom graph nodes + the node manager form */
.tw-node.custom rect { stroke: var(--gold); stroke-dasharray: 5 3; }
.tw-node-form { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 10px; }
.tw-node-form input, .tw-node-form select { border: 1px solid var(--line-strong);
  padding: 6px 8px; font-family: var(--font-ui); font-size: 12.5px; background: var(--surface); }
.tw-node-form button { grid-column: span 2; }

.tw-dhide { display: block; margin-top: 8px; padding: 3px 10px; font-size: 10px; }

/* command-center risk countdown strip */
.cc-risk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 8px 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--warn); background: var(--surface); }
.cc-risk-lab { font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .14em; color: var(--warn); }
.cc-risk-item { border: 1px solid var(--line); background: var(--inset); cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-2); padding: 3px 10px; }
.cc-risk-item b { font-family: var(--font-mono); font-size: 10px; color: var(--crit); margin-right: 4px; }
.cc-risk-item.critical { border-left: 3px solid var(--crit); }
.cc-risk-item.warning { border-left: 3px solid var(--warn); }
.cc-risk-item.more { color: var(--teal); border-style: dashed; }
.cc-risk-item:hover { border-color: var(--navy); }

/* stress-this buttons sit inside rows and story cards */
.row .stress-this { padding: 2px 8px; font-size: 9.5px; white-space: nowrap; align-self: center; }

/* twin sub-tabs */
.tw-subnav { display: flex; gap: 4px; margin-top: 18px; border-bottom: 1px solid var(--line); }
.tw-subnav button { border: none; background: none; cursor: pointer; padding: 8px 16px 9px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tw-subnav button:hover { color: var(--navy); }
.tw-subnav button.on { color: var(--navy); border-bottom-color: var(--gold); }
.tw-flow { margin: 14px 2px 0; }
.tw-flow b { color: var(--navy); }

/* heat map -> regional demand pulse */
.hm-pulse { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.hm-p { border: 1px solid var(--line); background: var(--inset); padding: 4px 10px;
  font-size: 12px; color: var(--ink-2); }
.hm-p b { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; margin-right: 4px; }
.hm-p.hot { border-left: 3px solid var(--crit); }
.hm-p.cool { border-left: 3px solid var(--navy-light); }

/* simulation derivation — the visible arithmetic */
.sim-why { border: 1px solid var(--line); background: var(--inset); padding: 4px 12px 10px; margin-top: 12px; }
.sim-step { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 5px 0;
  border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.sim-step:last-child { border-bottom: none; }
.sim-step-t { color: var(--ink-2); }
.sim-step code { font-family: var(--font-mono); font-size: 11.5px; color: var(--navy);
  background: var(--surface); padding: 1px 6px; border: 1px solid var(--line); }

.tw-dclose { position: absolute; top: 6px; right: 8px; border: none; background: none;
  font-size: 20px; line-height: 1; color: var(--ink-4); cursor: pointer; }
.tw-dclose:hover { color: var(--red); }
.tw-dhead b { padding-right: 22px; }

/* competition page spine */
.band-head { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--navy); }
.band-head b { color: var(--gold); font-size: 13px; }
.band-head::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.band-head.illus { color: var(--ink-4); }
.band-head.illus::after { background: var(--line); }
.war-jump { cursor: pointer; }
.war-jump:hover { box-shadow: var(--shadow-hover); }

/* battleground popup */
#bgModal { position: fixed; inset: 0; z-index: 455; background: rgba(0, 31, 51, .45);
  backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto; }
#bgClose { position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 22px; color: var(--ink-4); cursor: pointer; line-height: 1; }
#bgClose:hover { color: var(--red); }
.bg-panel { max-width: 1140px; }
#bgModal .panel { background: var(--inset); }

/* simulation scenario builder */
.sim-build { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.sim-build select { border: 1px solid var(--line-strong); background: var(--surface);
  font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-2); padding: 6px 8px; }
.sim-mag { display: inline-flex; align-items: center; gap: 3px; }
.sim-mag input { width: 58px; border: 1px solid var(--line-strong); background: var(--surface);
  font-family: var(--font-mono); font-size: 12.5px; padding: 6px 8px; }
.sim-mag input:disabled { opacity: .4; }
.sim-mag b { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }

/* state stories popup */
#stModal { position: fixed; inset: 0; z-index: 456; background: rgba(0, 31, 51, .45);
  backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto; }
#stClose { position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 22px; color: var(--ink-4); cursor: pointer; line-height: 1; }
#stClose:hover { color: var(--red); }
.st-stats { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline;
  font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.st-stats .ok { color: var(--green); }
.st-stats .bad { color: var(--crit); }
#stRows { max-height: 56vh; overflow-y: auto; margin-top: 8px; }

/* live launch tracker */
.lw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.lw-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.lw-chip .lw-x { font-style: normal; margin-left: 6px; opacity: .6; }
.lw-chip .lw-x:hover { opacity: 1; color: var(--red); }
.lw-form input[type="date"] { font-family: var(--font-mono); }