/* =====================================================================================
   RASHTRA v41 — "NATIONAL COMMAND" DESIGN LAYER
   One presentation layer loaded LAST, so it is the single place the product's visual grammar
   is defined: tokens (motion, elevation, z-order, signal colours, numerals), then chrome
   (topbar, status capsule, Advance Month, ticker, alerts, rail), then surfaces (hero, instruments,
   cards, charts, modals, drawer, toasts, the month sequence, the boot sequence), then responsive
   and accessibility rules.
   Rules of this file:
   - presentation only: no selector here is read by the simulation, and nothing hides data;
   - every colour is a token from the two theme blocks in style.css (or defined below for both themes);
   - motion uses the four duration tokens and is removed under prefers-reduced-motion;
   - MOTION CHARTER: every animation explains state, hierarchy, navigation, consequence or interaction. Entrances play
     once, when something is NEW (a section opened, an alert that just arrived, a month that just turned), never on an
     ordinary re-render. Only transform and opacity animate. Nothing loops to look busy. Nothing blocks input.
     Cinematic timing is reserved for the month turnover, crises and elections;
   - no fixed width wider than a 390px phone; touch targets stay >= 44px.
   ===================================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Motion — four categories, one easing family. */
  --dur-micro:140ms;      /* hover, focus, press, toggles */
  --dur-ui:240ms;         /* cards, panels, drawers, tabs, menus */
  --dur-major:480ms;      /* view transitions, charts, dashboard changes */
  --dur-cine:820ms;       /* rare moments only: boot, month turnover, crises */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-emph:cubic-bezier(.16,1,.3,1);   /* decisive, no overshoot */

  /* Z-order — one ladder for every layer that floats. */
  --z-chrome:40; --z-menu:60; --z-drawer:90; --z-sequence:95; --z-modal:100; --z-toast:600; /* above onboarding cards (500), so confirmations shown from them are visible */ --z-boot:1000; /* the month sequence sits under modals so its Why? tiles open on top */

  /* Numerals — headline figures read as instruments: Plex Sans, tabular, tight. Small data stays mono. */
  --font-display:'IBM Plex Sans', -apple-system, sans-serif;
  --num-hero:44px; --num-xl:30px; --num-lg:24px;

  /* Signal colours by domain (never the only cue — every use also carries an icon or a label). */
  --sig-politics:#FF9933; --sig-economy:#34d399; --sig-society:#a78bfa; --sig-security:#e0616a; --sig-world:#60A5FA; --sig-governance:#F2C14E;

  /* Tricolour — identity accents only (the topbar hairline, the seal, the boot mark). */
  --tri-saffron:#FF9933; --tri-white:#f4f6f9; --tri-green:#138808; --tri-navy:#0b2a7a;

  --cmd-radius:10px;
  --cmd-hair:rgba(148,163,184,.14);
}
body.theme-dark{
  --elev-1:0 1px 0 rgba(255,255,255,.035) inset, 0 1px 2px rgba(0,0,0,.35);
  --elev-2:0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.38);
  --elev-3:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 64px rgba(0,0,0,.55);
  --glass:rgba(12,16,23,.78);
  --glass-strong:rgba(14,19,27,.92);
  --cmd-hair:rgba(148,163,184,.14);
  --hero-wash:radial-gradient(120% 140% at 0% 0%, rgba(255,153,51,.10) 0%, rgba(255,153,51,0) 46%), radial-gradient(90% 120% at 100% 100%, rgba(52,211,153,.07) 0%, rgba(52,211,153,0) 50%);
  --spark-fill-op:.16;
}
:root{
  --elev-1:0 1px 2px rgba(15,28,48,.06);
  --elev-2:0 6px 18px rgba(15,28,48,.10);
  --elev-3:0 20px 50px rgba(15,28,48,.20);
  --glass:rgba(247,249,252,.92);
  --glass-strong:#ffffff;
  --hero-wash:radial-gradient(120% 140% at 0% 0%, rgba(224,123,0,.10) 0%, rgba(224,123,0,0) 46%), radial-gradient(90% 120% at 100% 100%, rgba(22,101,52,.07) 0%, rgba(22,101,52,0) 50%);
  --spark-fill-op:.12;
}
body:not(.theme-dark){ --cmd-hair:rgba(15,28,48,.10); --sig-politics:#c25e00; --sig-economy:#166534; --sig-society:#6d28d9; --sig-security:#b42318; --sig-world:#1d4ed8; --sig-governance:#855400; }

/* ---------------------------------------------------------------- 2. BASE */
body{ font-feature-settings:"ss01" 0, "tnum" 0; text-rendering:optimizeLegibility; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:6px;
}
.btn{ transition:background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); border-radius:8px; }
.btn:active:not(:disabled){ transform:translateY(0) scale(.975); }
.btn-outline{ border-color:var(--accent-line); }
.btn-outline:hover{ border-color:var(--accent-line-strong); }
.btn-small{ border-radius:6px; }
.tag{ border-radius:999px; padding:3px 9px; }

/* ---------------------------------------------------------------- 3. TOPBAR */
.topbar{
  position:relative; z-index:var(--z-chrome); gap:16px; padding:10px 20px 10px 16px; min-height:64px;
  background:var(--glass); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--cmd-hair); box-shadow:none;
  transition:box-shadow var(--dur-ui) var(--ease-out);
}
body.theme-dark .topbar{ background:var(--glass); }
/* The identity hairline: a restrained tricolour thread along the top edge. */
.topbar::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg, var(--tri-saffron) 0 33.33%, var(--tri-white) 33.33% 66.66%, var(--tri-green) 66.66% 100%);
  opacity:.75;
}
.topbar.cmd-scrolled{ box-shadow:0 10px 30px -12px rgba(0,0,0,.55); }
body:not(.theme-dark) .topbar.cmd-scrolled{ box-shadow:0 10px 26px -14px rgba(15,28,48,.35); }
.topbar-left{ gap:12px; }
.seal{ width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; filter:none; font-size:0; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(255,153,51,.18), transparent 70%); box-shadow:0 0 0 1px var(--cmd-hair), 0 0 22px -4px var(--accent-glow); }
.seal svg{ width:28px; height:28px; display:block; }
.eyebrow{ font-size:11px; letter-spacing:.2em; color:var(--text-faint); }
.title{ font-family:var(--serif); font-size:var(--fs-lg); font-weight:600; letter-spacing:.005em; }
.title .title-accent{ color:var(--accent-text); }
.topbar-right{ gap:12px; min-width:0; }

/* Tools: quiet icon+label buttons that recede behind the status capsule and Advance Month. */
.cmd-tools{ display:flex; align-items:center; gap:4px; min-width:0; }
.cmd-tool-icon{ display:inline-block; min-width:1.1em; text-align:center; }
.cmd-tools .btn-ghost{ border-color:transparent; color:var(--text-dim); background:transparent; padding:8px 10px; font-weight:500; }
.cmd-tools .btn-ghost:hover, .cmd-tools .btn-ghost[aria-expanded="true"]{ background:var(--accent-tint); color:var(--text); border-color:var(--cmd-hair); }
.settings-menu{ z-index:var(--z-menu); border-radius:12px; border:1px solid var(--line-strong); border-top:2px solid var(--accent); background:var(--glass-strong); backdrop-filter:blur(16px); box-shadow:var(--elev-3); padding:6px; animation:cmdMenuIn var(--dur-ui) var(--ease-out); }
@keyframes cmdMenuIn{ from{ opacity:0; transform:translateY(-4px) scale(.98); } to{ opacity:1; transform:none; } }

/* Status capsule: approval trend · month · actions left — one instrument, three readings. */
.cmd-status{
  display:flex; align-items:stretch; min-width:0; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--panel-sunken); box-shadow:var(--elev-1);
}
.cmd-status > *{ border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
.cmd-status > * + *{ border-left:1px solid var(--line) !important; }
.cmd-status .approval-trend{ padding:6px 12px; gap:8px; }
.cmd-status .approval-trend svg{ width:56px; height:22px; }
#approvalTrendLabel{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-md); font-variant-numeric:tabular-nums; }
.cmd-status .clock{ display:flex; align-items:center; gap:6px; padding:6px 14px; font-size:var(--fs-sm); letter-spacing:.14em; color:var(--text-dim); }
.clock #monthLabel{ margin-right:0; }
.clock.cmd-month-tick #monthLabel, .clock.cmd-month-tick #yearLabel{ animation:cmdTick var(--dur-major) var(--ease-out); }
@keyframes cmdTick{ 0%{ opacity:0; transform:translateY(-8px); } 100%{ opacity:1; transform:none; } }
.cmd-status .actions-chip{ display:flex; align-items:center; gap:6px; padding:6px 12px; }
.actions-chip::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--positive-glow); flex:0 0 7px; }
.actions-chip[data-tone="partial"]::before{ background:var(--gold); box-shadow:none; }
.actions-chip[data-tone="spent"]::before{ background:var(--red); box-shadow:none; }

/* ---------------------------------------------------------------- 4. ADVANCE MONTH — the signature control */
#advanceBtn{
  position:relative; isolation:isolate; overflow:hidden; white-space:nowrap;
  padding:12px 20px; min-height:46px; border-radius:10px; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(180deg, var(--accent-fill-hover), var(--accent-fill)); color:var(--on-accent);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 8px 22px -8px var(--accent-glow), 0 0 0 1px rgba(0,0,0,.25);
}
#advanceBtn::after{ /* a light sweep: hover acknowledgement, and the processing stripe */
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.38) 50%, transparent 80%);
  transform:translateX(-120%);
}
#advanceBtn:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 12px 28px -8px var(--accent-glow), 0 0 0 1px rgba(0,0,0,.25); }
#advanceBtn:hover::after{ transform:translateX(120%); transition:transform var(--dur-cine) var(--ease-out); }
#advanceBtn:active{ transform:translateY(0) scale(.97); }
#advanceBtn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
/* Ready: the player has acted this month — one soft ring breathes to say "the month is yours to close". */
#advanceBtn::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; opacity:0;
  background:radial-gradient(120% 140% at 50% 50%, rgba(255,255,255,.34), transparent 70%); }
/* Ready: the player has acted this month; the button brightens twice to say the month is theirs to close, then rests. */
#advanceBtn[data-ready="1"]::before{ animation:cmdReady 1.6s var(--ease-in-out) 2; }
@keyframes cmdReady{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }
/* Gated: the National Budget comes first — the button still works (it takes you there) but reads as a step. */
#advanceBtn[data-gated="1"]{ background:transparent; color:var(--accent-text); border:1px dashed var(--accent-line-strong); box-shadow:none; }
/* Processing: the simulation is resolving the month. */
#advanceBtn.is-processing{ pointer-events:none; }
#advanceBtn.is-processing::after{ inset:0 -40px 0 0; transform:translateX(-40px); background:repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 10px, rgba(255,255,255,.22) 10px 20px); animation:cmdStripe .7s linear infinite; }
@keyframes cmdStripe{ to{ transform:translateX(-12px); } }   /* the only loop in the layer: it states the month is resolving, and stops when it is done */

/* ---------------------------------------------------------------- 5. TICKER */
.ticker{ height:32px; background:var(--panel-sunken); border-bottom:1px solid var(--cmd-hair);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
.ticker-track{ font-size:11.5px; letter-spacing:.06em; }
.ticker-track span{ margin-right:18px; }
.ticker-track span::after{ content:'◆'; margin-left:18px; color:var(--accent); opacity:.45; font-size:8px; vertical-align:2px; }
.ticker:hover .ticker-track{ animation-play-state:paused; }

/* ---------------------------------------------------------------- 6. ALERT BARS — severity by bar + icon, never red for everything */
.crisis-alert{
  position:relative; margin:10px 16px 0; padding:14px 18px 14px 20px; border-radius:var(--cmd-radius);
  border-width:1px 1px 1px 4px; border-style:solid; border-top-color:var(--line) !important; border-right-color:var(--line) !important; border-bottom-color:var(--line) !important;
  background:var(--glass-strong); backdrop-filter:blur(12px); box-shadow:var(--elev-2);
  animation:none;
}
.crisis-alert[data-severity], .crisis-room-card{ animation:none; }   /* style.css entrances replayed on every render */
.crisis-alert.cmd-alert-new, .crisis-room-card.cmd-alert-new{ animation:cmdAlertIn var(--dur-ui) var(--ease-out); }
.crisis-alert-mini{ padding:8px 14px 8px 16px; min-height:44px; }
.crisis-alert-mini:hover{ background:var(--glass-strong); box-shadow:var(--elev-2), inset 0 0 0 999px var(--accent-tint); }
.crisis-alert-title{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-lg); letter-spacing:-.005em; }
@keyframes cmdAlertIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Crisis options (render.js renderCrisisAlertBar): cost, then signed effect chips, then the note in reading type. */
.crisis-option-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; border-radius:12px; transition:border-color var(--dur-micro), transform var(--dur-micro), box-shadow var(--dur-ui); }
.crisis-option-btn:hover{ transform:translateY(-2px); box-shadow:var(--elev-2); }
.crisis-option-label{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-md); line-height:1.3; }
.cmd-option-cost{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-dim); }
.cmd-eff-row{ display:flex; flex-wrap:wrap; gap:6px; }
.cmd-eff{ display:inline-flex; align-items:baseline; gap:4px; padding:3px 8px; border-radius:999px; font-size:var(--fs-xs); border:1px solid var(--line); background:var(--panel-sunken); color:var(--text-dim); }
.cmd-eff b{ font-family:var(--font-display); font-variant-numeric:tabular-nums; }
.cmd-eff-good{ border-color:rgba(52,211,153,.35); } .cmd-eff-good b, .cmd-eff-good > span{ color:var(--positive-text); }
.cmd-eff-bad{ border-color:rgba(224,97,106,.4); } .cmd-eff-bad b, .cmd-eff-bad > span{ color:var(--red); }
.cmd-option-note{ font-family:var(--sans) !important; font-style:normal !important; font-size:var(--fs-sm); line-height:1.45; color:var(--text-dim); }

/* War Room: the UN deadline as a decision (render.js warDeadlineHTML) */
.cmd-deadline-choices{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cmd-deadline-state{ margin-top:10px; padding:10px 12px; border-radius:8px; background:var(--panel-sunken); border:1px dashed var(--accent-line-strong); font-size:var(--fs-sm); line-height:1.5; }
.cmd-war-warn{ }

/* The command bar, ticker and alert bars never shrink: #app is a fixed-height flex column, and tall alerts used to squash
   the topbar (its status row overlapped the first alert) and collapse the ticker to nothing on phones. */
.topbar, .ticker, #crisisAlertBar, #oppositionAlertBar, #foreignEventAlertBar, #electionAlertBar, #scandalAlertBar{ flex-shrink:0; }
/* Phones: an alert starts compact (tag + title + "Show options"); one tap shows its text and choices (command-ui.js). */
.crisis-alert.cmd-alert-compact .crisis-alert-text, .crisis-alert.cmd-alert-compact .crisis-facts{ display:none; }
.crisis-alert.cmd-alert-compact > :not(.crisis-alert-head):not(.cmd-alert-toggle){ display:none; }
.cmd-alert-toggle{ display:none; margin-top:10px; }
@media (max-width:640px){
  .cmd-alert-toggle{ display:inline-flex; align-items:center; min-height:44px; }
  .crisis-alert{ padding:12px 14px 12px 16px; }
  .crisis-alert-title{ font-size:var(--fs-md); }
}

/* ---------------------------------------------------------------- 7. RAIL — the command rail */
.rail{ width:244px; padding:12px 10px; background:var(--glass); border-right:1px solid var(--cmd-hair); transition:width var(--dur-ui) var(--ease-out); }
body.theme-dark .rail{ background:var(--glass); }
.rail-group + .rail-group{ border-top:1px solid var(--cmd-hair); margin-top:8px; padding-top:6px; }
.rail-group-header{ min-height:30px; padding:8px 10px 4px; font-size:10.5px; letter-spacing:.2em; color:var(--text-faint); border-radius:6px; }
.rail-group-icon{ opacity:.8; }
.rail-group.has-active .rail-group-header{ color:var(--text-dim); }
.rail-btn.rail-hub{ position:relative; border-radius:8px; padding:9px 10px 9px 12px; min-height:42px; color:var(--text-dim); font-size:var(--fs-sm);
  transition:background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.rail-btn.rail-hub .rail-icon{ transition:transform var(--dur-micro) var(--ease-out); filter:saturate(.8); }
.rail-btn.rail-hub:hover{ background:var(--accent-tint); color:var(--text); }
.rail-btn.rail-hub:hover .rail-icon{ transform:translateX(1px) scale(1.06); filter:none; }
/* Active: an indicator bar that grows in, plus a lifted surface — "you are here" at a glance. */
.rail-btn.rail-hub::before{ content:''; position:absolute; left:0; top:50%; width:3px; height:0; border-radius:0 3px 3px 0; background:var(--accent);
  transform:translateY(-50%); transition:height var(--dur-ui) var(--ease-emph); box-shadow:0 0 12px var(--accent-glow); }
.rail-btn.rail-hub.active, .rail-btn.rail-hub.hub-active,
body.theme-dark .rail-btn.rail-hub.active, body.theme-dark .rail-btn.rail-hub.hub-active{
  background:linear-gradient(90deg, var(--accent-tint-strong), var(--accent-tint) 70%, transparent); color:var(--text); box-shadow:none; font-weight:600;
}
.rail-btn.rail-hub.active::before, .rail-btn.rail-hub.hub-active::before{ height:60%; }
.rail-btn.rail-hub.active .rail-icon, .rail-btn.rail-hub.hub-active .rail-icon{ filter:none; }
.rail-count{ border-radius:6px; border-color:var(--cmd-hair); background:transparent; }
.rail-badge{ box-shadow:0 0 0 2px var(--panel-sunken); }
.rail-footer{ border-top-color:var(--cmd-hair); display:flex; flex-direction:column; gap:8px; }
.cmd-rail-collapse{ display:none; align-items:center; gap:10px; min-height:40px; padding:8px 10px; border-radius:8px; color:var(--text-faint); font-size:var(--fs-xs); letter-spacing:.06em; }
.cmd-rail-collapse:hover{ background:var(--accent-tint); color:var(--text); }
.cmd-rail-collapse-icon{ display:inline-block; width:20px; text-align:center; transition:transform var(--dur-ui) var(--ease-out); }
@media (min-width:901px){
  .cmd-rail-collapse{ display:flex; }
  /* Compact rail: icons only, labels as tooltips (title attribute set by command-ui.js). */
  body.rail-compact .rail{ width:72px; padding-left:8px; padding-right:8px; }
  body.rail-compact .rail .rail-label, body.rail-compact .rail .rail-count, body.rail-compact .rail .rail-group-title,
  body.rail-compact .rail .rail-group-caret, body.rail-compact .rail .dev-credit, body.rail-compact .cmd-rail-collapse-text{ display:none; }
  body.rail-compact .rail .rail-btn.rail-hub{ justify-content:center; padding:10px 0; }
  body.rail-compact .rail .rail-group-header{ justify-content:center; padding:6px 0; }
  body.rail-compact .rail .rail-group.collapsed .rail-group-items{ display:flex; } /* compact mode shows every icon */
  body.rail-compact .rail .rail-badge{ position:absolute; top:4px; right:6px; margin:0; }
  body.rail-compact .cmd-rail-collapse{ justify-content:center; }
  body.rail-compact .cmd-rail-collapse-icon{ transform:rotate(180deg); }
}

/* ---------------------------------------------------------------- 8. MAIN SURFACE — headers, section titles, tabs */
.main{ scroll-behavior:auto; min-width:0; }
.p28-strip, .p28-strip-row.cmd-deck{ min-width:0; max-width:100%; }
.view-title{ font-family:var(--font-display); font-weight:600; letter-spacing:-.018em; }
.section-title{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--text-dim);
  border-left:0; padding-left:0; padding-bottom:8px; margin:28px 0 12px; border-bottom:1px solid var(--cmd-hair);
  align-items:center; justify-content:flex-start;
}
.section-title::before{ content:''; flex:0 0 auto; width:6px; height:6px; margin-right:2px; border-radius:1px; background:var(--accent); transform:rotate(45deg); box-shadow:0 0 10px var(--accent-glow); }
.section-title .hint{ margin-left:auto; font-size:var(--fs-xs); }
.dashboard-detail-well > summary.section-title{ font-size:12px; }
.hub-tabs{ background:transparent; border-bottom-color:var(--cmd-hair); }
.hub-tabs .rail-btn.hub-tab{ border-radius:8px 8px 0 0; transition:background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
.screen-intro{ color:var(--text-dim); }

/* In-screen tab rows (render.js groupTabBar): one segmented control. The selected tab is a lifted surface with a
   saffron underline — the solid saffron fill stays reserved for real actions (Advance Month, "Do it"). */
.cmd-seg[role="tablist"]{ gap:4px !important; padding:4px; border-radius:12px; background:var(--panel-sunken); border:1px solid var(--cmd-hair); }
.cmd-seg > .btn{ position:relative; min-height:44px; padding:10px 14px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--text-dim); font-weight:500; box-shadow:none; }
.cmd-seg > .btn:hover{ background:var(--accent-tint); color:var(--text); transform:none; box-shadow:none; }
.cmd-seg > .btn-primary, body.theme-dark .cmd-seg > .btn-primary, body:not(.theme-dark) .cmd-seg > .btn-primary{
  background:var(--glass-strong); color:var(--text); font-weight:600; border-color:var(--line); box-shadow:var(--elev-1);
}
.cmd-seg > .btn-primary::after{ content:''; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:var(--accent); }

/* ---------------------------------------------------------------- 9. CARDS — one family, distinct roles */
.card{ border-radius:var(--cmd-radius); border-color:var(--cmd-hair); box-shadow:var(--elev-1); }
body.theme-dark .card{ border-color:var(--cmd-hair); box-shadow:var(--elev-1); }
.card-clickable, [data-decisiongoto].card{ transition:transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.card-clickable:hover, body.theme-dark .card-clickable:hover{ transform:translateY(-2px); box-shadow:var(--elev-2); border-color:var(--line-strong); }
.stat-label{ font-size:11px; letter-spacing:.14em; }
.stat-value{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; }
.stat-delta{ font-size:11.5px; }
/* Decision cards on the dashboard: severity carried by the left bar + the priority tag. */
.card[data-decisiongoto]{ border-width:1px 1px 1px 3px; border-top-color:var(--cmd-hair) !important; border-right-color:var(--cmd-hair) !important; border-bottom-color:var(--cmd-hair) !important; }
.card[data-pressure]{ border-top-color:var(--cmd-hair); border-right-color:var(--cmd-hair); border-bottom-color:var(--cmd-hair); }
.grid{ gap:14px; }
.modal-row{ border-bottom-color:var(--cmd-hair); }

/* ---------------------------------------------------------------- 10. DASHBOARD HERO */
.view-header.cmd-hero{
  position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center;
  padding:26px 28px; margin:0 0 18px; border-radius:16px; border:1px solid var(--line);
  background:var(--hero-wash), var(--glass-strong); box-shadow:var(--elev-2);
}
body:not(.theme-dark) .view-header.cmd-hero{ box-shadow:var(--elev-2); }
/* A fine plotting grid + orbit arcs in the corner: depth without noise. */
.cmd-hero::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--tile-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tile-grid) 1px, transparent 1px); background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0%, #000, transparent 70%); mask-image:radial-gradient(120% 100% at 100% 0%, #000, transparent 70%); }
.cmd-hero-orbit{ position:absolute; right:-80px; top:-120px; width:420px; height:420px; pointer-events:none; opacity:.5; color:var(--accent); }
.cmd-hero-orbit circle{ fill:none; stroke:currentColor; stroke-width:.6; vector-effect:non-scaling-stroke; }
.cmd-hero-orbit .o2{ stroke-dasharray:2 6; opacity:.7; }
.cmd-hero-orbit .o3{ opacity:.35; }
.cmd-hero > *{ position:relative; }
.cmd-hero > .cmd-hero-orbit{ position:absolute; }
.cmd-hero-eyebrow{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); }
.cmd-live-dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); }
.cmd-hero-title{ margin:8px 0 0; font-family:var(--font-display); font-size:clamp(26px, 3vw, 36px); line-height:1.1; font-weight:600; letter-spacing:-.025em; color:var(--text); }
.cmd-hero-title-sub{ display:block; margin-top:2px; font-size:.5em; font-weight:500; letter-spacing:.01em; color:var(--text-dim); }
.cmd-hero-status{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; flex-wrap:wrap; }
.cmd-sit-pill{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 9px; border-radius:999px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; border:1px solid currentColor; white-space:nowrap; }
.cmd-sit-pill[data-situation="calm"]{ color:var(--positive-text); background:var(--positive-tint); }
.cmd-sit-pill[data-situation="watchful"]{ color:var(--gold); background:var(--warning-tint); }
.cmd-sit-pill[data-situation="strained"]{ color:var(--accent-text); background:var(--accent-tint-strong); }
.cmd-sit-pill[data-situation="acute"]{ color:var(--red); background:var(--danger-tint); }
.cmd-sit-shape{ font-size:9px; line-height:1; }
.cmd-hero-headline{ flex:1 1 280px; min-width:0; font-size:var(--fs-md); line-height:1.45; color:var(--text); padding-top:2px; }
.cmd-hero-facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.cmd-fact{ display:inline-flex; align-items:baseline; gap:6px; padding:6px 10px; border-radius:8px; background:var(--panel-sunken); border:1px solid var(--cmd-hair); font-size:var(--fs-xs); color:var(--text-dim); min-height:32px; }
.cmd-fact b{ font-family:var(--font-display); font-size:var(--fs-sm); font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
button.cmd-fact{ cursor:pointer; min-height:44px; align-items:center; transition:border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
button.cmd-fact:hover{ border-color:var(--accent-line-strong); background:var(--accent-tint); }
.cmd-fact-warn b{ color:var(--gold); }
.cmd-fact-bad b{ color:var(--red); }
/* Approval gauge */
.cmd-gauge{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:150px; background:none; border:0; padding:4px; border-radius:14px; cursor:pointer; color:inherit; }
.cmd-gauge:hover .cmd-gauge-ring-fg{ filter:drop-shadow(0 0 6px currentColor); }
.cmd-gauge-svg{ width:132px; height:132px; display:block; overflow:visible; }
.cmd-gauge-track{ fill:none; stroke:var(--panel-sunken); stroke-width:9; }
.cmd-gauge-ticks{ fill:none; stroke:var(--line-strong); stroke-width:1; stroke-dasharray:1 7.17; opacity:.8; }
.cmd-gauge-ring-fg{ fill:none; stroke:currentColor; stroke-width:9; stroke-linecap:round; transform:rotate(-90deg); transform-origin:60px 60px; transition:stroke-dashoffset var(--dur-cine) var(--ease-out); }
.cmd-gauge-half{ stroke:var(--text-faint); stroke-width:1.5; }
.cmd-gauge[data-tone="good"]{ color:var(--teal); }
.cmd-gauge[data-tone="mid"]{ color:var(--gold); }
.cmd-gauge[data-tone="bad"]{ color:var(--red); }
.cmd-gauge-num{ font-family:var(--font-display); font-weight:600; font-size:34px; letter-spacing:-.03em; fill:var(--text); font-variant-numeric:tabular-nums; }
.cmd-gauge-unit{ font-family:var(--mono); font-size:9px; letter-spacing:.2em; fill:var(--text-faint); text-transform:uppercase; }
.cmd-gauge-label{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }
.cmd-gauge-delta{ font-size:var(--fs-xs); color:var(--text-dim); font-variant-numeric:tabular-nums; }
.cmd-gauge-delta .up{ color:var(--positive-text); } .cmd-gauge-delta .down{ color:var(--red); }
.main.view-enter .cmd-hero-reveal{ animation:cmdRise var(--dur-major) var(--ease-out) backwards; }
.main.view-enter .cmd-hero-reveal.cmd-gauge{ animation-delay:60ms; }
@keyframes cmdRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------------- 11. INSTRUMENT DECK (the pinned-numbers strip, upgraded) */
.p28-strip{ background:transparent; box-shadow:none; }
.p28-strip > .section-title{ margin-top:6px; }
.p28-strip-row.cmd-deck{ display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:12px; overflow:visible; flex-wrap:initial; }
.cmd-inst{
  position:relative; display:flex; flex-direction:column; min-width:0; padding:0; border-radius:12px; overflow:hidden;
  background:var(--glass-strong); border:1px solid var(--cmd-hair); box-shadow:var(--elev-1);
  transition:transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.cmd-inst{ align-items:stretch; gap:0; min-height:0; cursor:default; }
.cmd-inst.p28-tone-good, .cmd-inst.p28-tone-bad{ border-color:var(--cmd-hair); }
.cmd-inst::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--inst-sig, var(--accent)); opacity:.8; }
.cmd-inst[data-domain="politics"]{ --inst-sig:var(--sig-politics); }
.cmd-inst[data-domain="economy"]{ --inst-sig:var(--sig-economy); }
.cmd-inst[data-domain="society"]{ --inst-sig:var(--sig-society); }
.cmd-inst[data-domain="security"]{ --inst-sig:var(--sig-security); }
.cmd-inst[data-domain="world"], .cmd-inst[data-domain="diplomacy"]{ --inst-sig:var(--sig-world); }
.cmd-inst[data-domain="governance"], .cmd-inst[data-domain="fiscal"]{ --inst-sig:var(--sig-governance); }
.cmd-inst:hover{ transform:translateY(-2px); box-shadow:var(--elev-2); border-color:var(--line-strong); }
.cmd-inst-main{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; padding:14px 14px 8px; text-align:left; background:none; border:0; color:inherit; cursor:pointer; min-height:44px; }
.cmd-inst .p28-chip-k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cmd-inst .p28-chip-v{ font-family:var(--font-display); font-size:var(--num-lg); font-weight:600; letter-spacing:-.025em; line-height:1.1; margin-top:6px; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cmd-inst-delta{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--text-faint); }
.cmd-inst.p28-tone-good .cmd-inst-delta{ color:var(--positive-text); }
.cmd-inst.p28-tone-bad .cmd-inst-delta{ color:var(--red); }
.cmd-inst-spark{ display:block; width:100%; height:30px; margin-top:8px; }
.cmd-inst-foot{ display:flex; border-top:1px solid var(--cmd-hair); margin-top:auto; }
.cmd-inst-foot > button{ flex:1; min-height:36px; font-size:var(--fs-xs); font-weight:600; color:var(--text-dim); background:none; border:0; letter-spacing:.03em; transition:background-color var(--dur-micro), color var(--dur-micro); }
.cmd-inst-foot > button + button{ border-left:1px solid var(--cmd-hair); }
.cmd-inst-foot > button:hover{ background:var(--accent-tint); color:var(--accent-text); }

/* Sparklines (render.js cmdSparkSVG): line + soft area, coloured by tone via currentColor. */
.cmd-spark{ display:block; width:100%; height:100%; overflow:visible; color:var(--text-faint); }
.cmd-spark .cmd-spark-line{ fill:none; stroke:currentColor; stroke-width:1.75; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.cmd-spark .cmd-spark-area{ fill:currentColor; opacity:var(--spark-fill-op); stroke:none; }
.cmd-spark[data-tone="good"]{ color:var(--teal); }
.cmd-spark[data-tone="bad"]{ color:var(--red); }
.cmd-spark[data-tone="flat"]{ color:var(--text-faint); }
.cmd-spark-empty{ display:flex; align-items:center; height:100%; font-size:11px; color:var(--text-faint); border-top:1px dashed var(--cmd-hair); }

/* ---------------------------------------------------------------- 12. NATIONAL SITUATION card */
.cmd-sit-card{ padding:6px 18px 8px; border-width:1px 1px 1px 3px; }
.cmd-sit-lead{ padding:12px 0 10px; font-size:var(--fs-sm); color:var(--text-dim); line-height:1.5; }
.cmd-sit-row{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:14px; padding:11px 0; border-top:1px solid var(--cmd-hair); align-items:baseline; }
.cmd-sit-q{ display:flex; gap:8px; align-items:baseline; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.cmd-sit-a{ font-size:var(--fs-base); line-height:1.5; min-width:0; }
.cmd-sit-a .tag{ margin-right:4px; }
.cmd-sit-moves{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.cmd-move{ display:inline-flex; gap:6px; align-items:baseline; }
.cmd-move-k{ color:var(--text-faint); }
.cmd-move-v{ font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; }
.cmd-move-v.good{ color:var(--positive-text); } .cmd-move-v.bad{ color:var(--red); }
.cmd-quiet{ color:var(--text-faint); }
.cmd-note-warn{ margin-top:6px; color:var(--gold); }

/* ---------------------------------------------------------------- 12b. PARLIAMENT CHAMBER (render.js renderParliamentHemicycle)
   Seats sweep in party by party from the government benches, the majority line draws last, and a party under the
   pointer (chamber or legend) is spotlit with its legend chip. The seat data and the modal are unchanged. */
.cmd-chamber-wrap{ margin:10px 0 14px; padding:8px 0 2px; border-radius:12px; background:radial-gradient(70% 90% at 50% 100%, var(--accent-tint), transparent 70%); }
.parl-svg{ max-width:620px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.25)); }
.parl-group{ transition:opacity var(--dur-ui) var(--ease-out); transform-origin:50% 100%; transform-box:view-box; }
/* Seats sweep in once, when the chamber's screen is opened: government benches first, then across the aisle. */
.main.view-enter .parl-group{ animation:cmdSeatsIn var(--dur-major) var(--ease-out) backwards; }
.main.view-enter .parl-group:nth-child(2){ animation-delay:70ms; } .main.view-enter .parl-group:nth-child(3){ animation-delay:140ms; } .main.view-enter .parl-group:nth-child(4){ animation-delay:190ms; }
.main.view-enter .parl-group:nth-child(5){ animation-delay:240ms; } .main.view-enter .parl-group:nth-child(n+6){ animation-delay:290ms; }
.main.view-enter .parl-majority-line{ animation:cmdFade var(--dur-major) ease 420ms backwards; }   /* the majority line lands after the seats */
@keyframes cmdSeatsIn{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }
.parl-majority-line{ stroke:var(--accent); stroke-width:1.6; opacity:.95; filter:drop-shadow(0 0 3px var(--accent-glow)); stroke-dasharray:3 3; }
.parl-centre-num{ font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; }
.parl-chamber.cmd-hl .parl-group{ opacity:.18; }
.parl-chamber.cmd-hl .parl-group.is-hl{ opacity:1; }
.parl-chamber.cmd-hl .parl-chip{ opacity:.55; }
.parl-chamber.cmd-hl .parl-chip.is-hl{ opacity:1; border-color:var(--chip); background:var(--panel-raised); color:var(--text); }
.parl-chip{ transition:opacity var(--dur-micro), border-color var(--dur-micro), background-color var(--dur-micro); min-height:44px; }

/* ---------------------------------------------------------------- 12c. PEOPLE & MEETINGS (js/phase15-characters-ui.js)
   Person cards: monogram from the real name (no invented portraits), opinion as a labelled band with a shape, meters
   for the attributes the simulation holds, the latest remembered interaction, and what is open with them. */
.cmd-ppl-grid{ gap:14px; }
.cmd-ppl-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:14px; border-left-width:3px; }
.cmd-ppl-edge-teal{ border-left-color:var(--teal); } .cmd-ppl-edge-red{ border-left-color:var(--red); } .cmd-ppl-edge-gold{ border-left-color:var(--gold); }
.cmd-ppl-head{ display:flex; align-items:center; gap:12px; min-width:0; }
.cmd-ppl-id{ flex:1 1 auto; min-width:0; }
.cmd-ppl-name{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-md); line-height:1.25; }
.cmd-ppl-role{ font-size:var(--fs-xs); color:var(--text-dim); line-height:1.35; margin-top:2px; }
.cmd-ppl-avatar{ position:relative; flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-md); letter-spacing:.02em; color:var(--text);
  background:var(--panel-sunken); border:1px solid var(--line-strong); box-shadow:inset 0 0 0 3px var(--glass-strong); }
.cmd-ppl-avatar-sm{ width:34px; height:34px; font-size:var(--fs-xs); } .cmd-ppl-avatar-lg{ width:64px; height:64px; font-size:var(--fs-xl); }
.cmd-ppl-avatar.cmd-ppl-tone-teal{ border-color:var(--teal); } .cmd-ppl-avatar.cmd-ppl-tone-red{ border-color:var(--red); } .cmd-ppl-avatar.cmd-ppl-tone-gold{ border-color:var(--gold); }
.cmd-ppl-avatar-role{ position:absolute; right:-4px; bottom:-4px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:11px; background:var(--glass-strong); border:1px solid var(--line); }
.cmd-ppl-stance-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.cmd-ppl-stance{ display:inline-flex; align-items:baseline; gap:5px; padding:3px 10px; border-radius:999px; font-size:var(--fs-xs); font-weight:600; border:1px solid currentColor; }
.cmd-ppl-stance b{ font-family:var(--font-display); font-variant-numeric:tabular-nums; }
.cmd-ppl-stance.cmd-ppl-tone-teal{ color:var(--positive-text); background:var(--positive-tint); }
.cmd-ppl-stance.cmd-ppl-tone-red{ color:var(--red); background:var(--danger-tint); }
.cmd-ppl-stance.cmd-ppl-tone-gold{ color:var(--gold); background:var(--warning-tint); }
.cmd-ppl-stance-k{ font-size:var(--fs-xs); color:var(--text-faint); }
.cmd-ppl-meters{ display:flex; flex-direction:column; gap:7px; }
.cmd-ppl-meter{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"k v" "t t"; gap:3px 8px; align-items:baseline; }
.cmd-ppl-meter-k{ grid-area:k; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.cmd-ppl-meter-v{ grid-area:v; justify-self:end; font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
.cmd-ppl-meter-v small{ font-size:.75em; color:var(--text-faint); font-weight:500; }
.cmd-ppl-meter-track{ grid-area:t; position:relative; height:6px; border-radius:3px; background:var(--panel-sunken); overflow:hidden; }
.cmd-ppl-meter-centred::after{ content:''; position:absolute; left:50%; top:-1px; bottom:-1px; width:1px; background:var(--line-strong); }
.cmd-ppl-meter-fill{ position:absolute; top:0; bottom:0; border-radius:3px; background:var(--text-dim); }
.cmd-ppl-fill-teal{ background:var(--teal); } .cmd-ppl-fill-red{ background:var(--red); } .cmd-ppl-fill-gold{ background:var(--gold); } .cmd-ppl-fill-neutral{ background:var(--accent); opacity:.75; }
.cmd-ppl-latest{ display:flex; gap:8px; align-items:baseline; padding:8px 10px; border-radius:8px; background:var(--panel-sunken); font-size:var(--fs-xs); line-height:1.4; }
.cmd-ppl-latest-none{ color:var(--text-faint); font-style:italic; }
.cmd-ppl-latest-dir{ flex:0 0 auto; font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; }
.cmd-ppl-latest-dir.cmd-ppl-tone-teal{ color:var(--positive-text); } .cmd-ppl-latest-dir.cmd-ppl-tone-red{ color:var(--red); }
.cmd-ppl-latest-t{ flex:1 1 auto; min-width:0; color:var(--text-dim); }
.cmd-ppl-latest-m{ color:var(--text-faint); white-space:nowrap; }
.cmd-ppl-flags{ margin:0; }
.cmd-ppl-traits{ display:flex; flex-wrap:wrap; gap:4px; }
.cmd-ppl-open{ align-self:flex-start; margin-top:auto; }
.cmd-ppl-filter{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.cmd-ppl-note{ margin:4px 0 12px; }

/* ---------------------------------------------------------------- 12d. BUSINESS MEETINGS (render.js renderBusiness + js/biz-pipeline-ui.js)
   A deal room: the 3D investment pipeline, money on the table by sector, and the deals grouped by urgency. */
.biz3d{ position:relative; margin:0 0 12px; border-radius:16px; border:1px solid var(--line); overflow:hidden;
  background:radial-gradient(90% 120% at 30% 0%, rgba(255,153,51,.07), transparent 60%), radial-gradient(120% 100% at 50% 100%, #0b1320, #070b12); box-shadow:var(--elev-2); }
body:not(.theme-dark) .biz3d{ background:radial-gradient(90% 120% at 30% 0%, rgba(224,123,0,.10), transparent 60%), radial-gradient(120% 100% at 50% 100%, #1a2a40, #0f1a2a); }
.biz3d-stage{ position:relative; height:420px; touch-action:pan-y; }
.biz3d-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; opacity:0; transition:opacity var(--dur-major) var(--ease-out); }
.biz3d-ready .biz3d-canvas{ opacity:1; }
.biz3d-fallback{ display:none; position:absolute; inset:0; place-items:center; padding:24px; text-align:center; font-size:var(--fs-sm); color:#c7d0dc; }
.biz3d-off .biz3d-fallback{ display:grid; }
.biz3d-off .biz3d-stage{ height:auto; min-height:90px; }
.biz3d-off .biz3d-foot{ display:none; }
.biz3d-tip{ position:absolute; left:0; top:0; z-index:2; display:flex; flex-direction:column; gap:2px; max-width:220px; padding:8px 10px; border-radius:10px; pointer-events:none;
  background:rgba(8,12,18,.94); border:1px solid rgba(148,163,184,.34); color:#e8ecf2; font-size:var(--fs-xs); line-height:1.4; box-shadow:0 10px 24px rgba(0,0,0,.45); }
.biz3d-tip[hidden]{ display:none; }
.biz3d-tip b{ font-size:var(--fs-sm); }
.biz3d-tip em{ font-style:normal; color:#FFAD5C; margin-top:2px; }
.biz3d-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; padding:10px 14px; border-top:1px solid rgba(148,163,184,.16); font-size:var(--fs-xs); color:#a9b4c4; background:rgba(5,8,12,.5); }
.biz3d-urgent-key{ display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-2px; border-radius:3px; background:rgba(224,97,106,.45); border:1px solid #e0616a; }
.biz-mix{ margin:0 0 6px; padding:12px 14px; border-radius:12px; border:1px solid var(--cmd-hair); background:var(--glass-strong); }
.biz-mix-bar{ display:flex; height:12px; border-radius:6px; overflow:hidden; gap:2px; }
.biz-mix-bar span{ display:block; min-width:3px; }
.biz-mix-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:var(--fs-xs); color:var(--text-dim); }
.biz-mix-legend i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:0; }
.biz-mix-legend b{ color:var(--text); font-family:var(--font-display); font-weight:600; }
.biz-band{ margin:0 0 18px; }
.biz-band-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 10px; }
.biz-band-t{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-md); }
.biz-band-urgent .biz-band-t{ color:var(--red); }
.biz-band-h{ font-size:var(--fs-xs); color:var(--text-faint); }
.biz-deal{ position:relative; display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:14px; border-top:3px solid var(--sector, var(--accent)); }
.biz-deal.is-urgent{ box-shadow:var(--elev-2), inset 0 0 0 1px rgba(224,97,106,.45); }
.biz-deal-head{ display:flex; align-items:center; gap:10px; min-width:0; }
.biz-deal-id{ flex:1 1 auto; min-width:0; }
.biz-deal-id .sector-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.biz-mono{ flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm);
  color:var(--text); background:var(--panel-sunken); border:1px solid var(--line-strong); box-shadow:inset 0 -3px 0 var(--sector, var(--accent)); }
.biz-sector{ display:inline-flex; align-items:center; gap:6px; margin-top:2px; font-size:var(--fs-xs); color:var(--text-dim); }
.biz-sector i{ width:8px; height:8px; border-radius:2px; background:var(--sector, var(--accent)); }
.biz-deal-amt{ font-size:var(--fs-sm); color:var(--text-dim); }
.biz-deal-amt b{ font-family:var(--font-display); font-weight:600; font-size:var(--num-lg); letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; }
.biz-deal-what{ line-height:1.45; }
.biz-ring{ position:relative; flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px; }
.biz-ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.biz-ring-track{ fill:none; stroke:var(--panel-sunken); stroke-width:4; }
.biz-ring-fg{ fill:none; stroke-width:4; stroke-linecap:round; }
.biz-ring-good .biz-ring-fg{ stroke:var(--teal); } .biz-ring-mid .biz-ring-fg{ stroke:var(--gold); } .biz-ring-bad .biz-ring-fg{ stroke:var(--red); }
.biz-ring b{ position:relative; font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm); line-height:1; font-variant-numeric:tabular-nums; }
.biz-ring small{ position:absolute; bottom:6px; font-size:8px; letter-spacing:.08em; color:var(--text-faint); text-transform:uppercase; }
@media (max-width:640px){ .biz3d-stage{ height:300px; } .biz3d-hint{ display:none; } }
@media (prefers-reduced-motion: reduce){ .biz3d-canvas{ transition:none; } }

/* ---------------------------------------------------------------- 12e. ECONOMY (js/phase18-economy-ui.js)
   Macro instruments (value, move, trend, Why?) and the RBI inflation-target gauge. */
.cmd-eco-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; margin-bottom:14px; }
.cmd-eco-inst .cmd-inst-main{ cursor:default; }
.cmd-eco-inst[data-band="warn"]::before{ background:var(--gold); } .cmd-eco-inst[data-band="bad"]::before{ background:var(--red); }
.cmd-eco-sub{ margin-top:4px; font-size:var(--fs-xs); color:var(--text-dim); line-height:1.35; }
.cmd-eco-gauge{ margin:12px 0 10px; }
.cmd-eco-gauge-track{ position:relative; height:14px; border-radius:7px; background:var(--panel-sunken); border:1px solid var(--cmd-hair); }
.cmd-eco-gauge-band{ position:absolute; top:0; bottom:0; background:rgba(52,211,153,.22); border-left:1px solid var(--teal); border-right:1px solid var(--teal); }
body:not(.theme-dark) .cmd-eco-gauge-band{ background:rgba(22,101,52,.14); }
.cmd-eco-gauge-mid{ position:absolute; top:-3px; bottom:-3px; width:1px; background:var(--teal); opacity:.7; }
.cmd-eco-gauge-exp{ position:absolute; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; border:2px solid var(--text-dim); background:var(--panel-sunken); }
.cmd-eco-gauge-now{ position:absolute; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; border:2px solid var(--glass-strong); }
.cmd-eco-gauge-now.is-in{ background:var(--teal); } .cmd-eco-gauge-now.is-out{ background:var(--red); }
.cmd-eco-gauge-now b{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm); color:var(--text); font-variant-numeric:tabular-nums; }
.cmd-eco-gauge{ padding-top:20px; }
.cmd-eco-gauge-scale{ position:relative; height:16px; margin-top:4px; font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.cmd-eco-gauge-scale span{ position:absolute; transform:translateX(-50%); }
.cmd-eco-gauge-scale span:first-child{ transform:none; } .cmd-eco-gauge-scale span:last-child{ transform:translateX(-100%); }
.cmd-eco-gauge-key{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; font-size:var(--fs-xs); color:var(--text-dim); }
.cmd-eco-gauge-key i{ display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px; border-radius:2px; }
.cmd-eco-gauge-key .k-band{ background:rgba(52,211,153,.35); border:1px solid var(--teal); }
.cmd-eco-gauge-key .k-now{ border-radius:50%; background:var(--teal); }
.cmd-eco-gauge-key .k-exp{ border-radius:50%; border:2px solid var(--text-dim); }

/* ---------------------------------------------------------------- 12f. ELECTIONS (js/phase17-elections-ui.js)
   The majority meter: seats on 0–543 with the projection's range, the 272 line and today's seats; then the vote split. */
.cmd-el-cards .stat-value{ font-family:var(--font-display); }
.cmd-el-meter{ margin-top:14px; }
.cmd-el-meter-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cmd-el-verdict{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; border:1px solid currentColor; white-space:nowrap; }
.cmd-el-verdict.cmd-el-safe{ color:var(--positive-text); background:var(--positive-tint); }
.cmd-el-verdict.cmd-el-tossup{ color:var(--gold); background:var(--warning-tint); }
.cmd-el-verdict.cmd-el-short{ color:var(--red); background:var(--danger-tint); }
.cmd-el-seats{ margin:26px 0 8px; }
.cmd-el-track{ position:relative; height:18px; border-radius:9px; background:var(--panel-sunken); border:1px solid var(--cmd-hair); }
.cmd-el-band{ position:absolute; top:2px; bottom:2px; border-radius:7px; opacity:.55; }
.cmd-el-band.cmd-el-safe{ background:var(--teal); } .cmd-el-band.cmd-el-tossup{ background:var(--gold); } .cmd-el-band.cmd-el-short{ background:var(--red); }
.cmd-el-maj{ position:absolute; top:-8px; bottom:-8px; width:2px; margin-left:-1px; background:var(--text); }
.cmd-el-maj em{ position:absolute; top:-18px; left:50%; transform:translateX(-50%); white-space:nowrap; font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--text-dim); }
.cmd-el-proj{ position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:var(--accent); border:3px solid var(--glass-strong); box-shadow:0 0 0 1px var(--accent); }
.cmd-el-proj b{ position:absolute; top:22px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-weight:600; font-size:var(--fs-md); color:var(--text); font-variant-numeric:tabular-nums; }
.cmd-el-now{ position:absolute; top:-5px; bottom:-5px; width:3px; margin-left:-1.5px; border-radius:2px; background:var(--blue); }
.cmd-el-scale{ position:relative; height:16px; margin-top:26px; font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.cmd-el-scale span{ position:absolute; transform:translateX(-50%); } .cmd-el-scale span:first-child{ transform:none; } .cmd-el-scale span:last-child{ transform:translateX(-100%); }
.cmd-el-key, .cmd-el-vote-key{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; font-size:var(--fs-xs); color:var(--text-dim); align-items:center; }
.cmd-el-key i, .cmd-el-vote-key i{ display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px; border-radius:2px; }
.cmd-el-key .k-band{ opacity:.6; } .cmd-el-key .k-band.cmd-el-safe{ background:var(--teal); } .cmd-el-key .k-band.cmd-el-tossup{ background:var(--gold); } .cmd-el-key .k-band.cmd-el-short{ background:var(--red); } .cmd-el-key .k-proj{ border-radius:50%; background:var(--accent); } .cmd-el-key .k-now{ width:3px; background:var(--blue); } .cmd-el-key .k-maj{ width:2px; background:var(--text); }
.cmd-el-vote{ margin-top:16px; }
.cmd-el-vote-bar{ display:flex; height:14px; border-radius:7px; overflow:hidden; gap:2px; }
.cmd-el-vote-bar span{ display:block; }
.v-r{ background:var(--teal); } .v-o{ background:var(--red); } .v-x{ background:var(--text-faint); }
.cmd-el-vote-key b{ color:var(--text); font-family:var(--font-display); font-weight:600; }
.cmd-el-lead{ margin-left:auto; font-weight:600; } .cmd-el-lead.up{ color:var(--positive-text); } .cmd-el-lead.down{ color:var(--red); }
@media (max-width:640px){ .cmd-el-lead{ margin-left:0; flex-basis:100%; } .cmd-el-maj em{ font-size:10px; } }

/* ---------------------------------------------------------------- 12g. MEDIA & PUBLIC OPINION (js/phase23-mediaroom-ui.js)
   Opinion instruments, the poll-of-polls gauge (spread, sampling error, and the real figure), action chips, slice bars. */
.cmd-eco-inst .p28-chip-v small{ font-size:.55em; color:var(--text-faint); font-weight:500; margin-left:2px; }
.cmd-med-poll{ padding-top:22px; }
.cmd-med-poll-track{ position:relative; height:16px; border-radius:8px; background:var(--panel-sunken); border:1px solid var(--cmd-hair); }
.cmd-med-poll-range{ position:absolute; top:3px; bottom:3px; border-radius:6px; background:var(--gold); opacity:.3; }
.cmd-med-poll-moe{ position:absolute; top:1px; bottom:1px; border-radius:6px; border:2px solid var(--gold); }
.cmd-med-poll-mean{ position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--gold); border:2px solid var(--glass-strong); }
.cmd-med-poll-mean b{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-family:var(--font-display); font-weight:600; font-size:var(--fs-md); color:var(--text); font-variant-numeric:tabular-nums; }
.cmd-med-poll-actual{ position:absolute; top:-6px; bottom:-6px; width:3px; margin-left:-1.5px; border-radius:2px; background:var(--teal); }
.cmd-med-poll-actual em{ position:absolute; top:26px; left:50%; transform:translateX(-50%); white-space:nowrap; font-style:normal; font-size:11px; color:var(--positive-text); }
.cmd-med-poll-scale{ position:relative; height:16px; margin-top:24px; font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.cmd-med-poll-scale span{ position:absolute; transform:translateX(-50%); } .cmd-med-poll-scale span:first-child{ transform:none; } .cmd-med-poll-scale span:last-child{ transform:translateX(-100%); }
.cmd-med-poll-key{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:4px; font-size:var(--fs-xs); color:var(--text-dim); align-items:center; }
.cmd-med-poll-key i{ display:inline-block; width:10px; height:10px; margin-right:6px; vertical-align:-1px; border-radius:2px; }
.cmd-med-poll-key .k-range{ background:var(--gold); opacity:.4; } .cmd-med-poll-key .k-moe{ border:2px solid var(--gold); } .cmd-med-poll-key .k-actual{ width:3px; background:var(--teal); }
.cmd-med-poll-gap{ margin-left:auto; font-weight:600; color:var(--text); }
.cmd-med-needs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.cmd-med-needs .cmd-eff{ min-height:36px; cursor:pointer; font:inherit; font-size:var(--fs-xs); }
.cmd-med-needs .cmd-eff:hover{ border-color:var(--accent-line-strong); color:var(--text); }
.cmd-med-slices{ display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
.cmd-med-slice{ display:grid; grid-template-columns:minmax(0,1.5fr) 44px minmax(80px,1fr) 64px; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--cmd-hair); font-size:var(--fs-sm); }
.cmd-med-slice-k .sector-meta{ display:block; font-size:11px; }
.cmd-med-slice-now{ font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.cmd-med-slice-bar{ position:relative; height:10px; border-radius:5px; background:var(--panel-sunken); }
.cmd-med-slice-bar::after{ content:''; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--line-strong); }
.cmd-med-slice-bar span{ position:absolute; top:1px; bottom:1px; border-radius:4px; }
.cmd-med-slice-bar span.up{ left:50%; background:var(--teal); } .cmd-med-slice-bar span.down{ right:50%; background:var(--red); }
.cmd-med-slice-ch{ text-align:right; font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; }
.cmd-med-slice-ch.up{ color:var(--positive-text); } .cmd-med-slice-ch.down{ color:var(--red); }
@media (max-width:640px){ .cmd-med-poll-gap{ margin-left:0; flex-basis:100%; } .cmd-med-slice{ grid-template-columns:minmax(0,1fr) 40px 56px; } .cmd-med-slice-bar{ display:none; } }

/* ---------------------------------------------------------------- 12h. STORY OF THE TERM — the journey (phase26-storylog-ui.js) */
.cmd-journey{ margin-bottom:14px; }
.cmd-journey-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.cmd-journey-head .hint{ text-transform:none; letter-spacing:0; color:var(--text-faint); font-family:var(--sans); }
.cmd-journey-delta{ font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; }
.cmd-journey-delta.up{ color:var(--positive-text); } .cmd-journey-delta.down{ color:var(--red); }
.cmd-journey-svg{ display:block; width:100%; height:230px; margin-top:10px; overflow:visible; }
.cmd-journey-50{ stroke:var(--line-strong); stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.cmd-journey-ap{ fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.cmd-journey-gr{ fill:none; stroke:var(--teal); stroke-width:1.8; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.cmd-journey-mark line{ stroke:var(--gold); stroke-dasharray:2 3; opacity:.7; vector-effect:non-scaling-stroke; }
.cmd-journey-mark path{ fill:var(--gold); }
.cmd-journey-key{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; font-size:var(--fs-xs); color:var(--text-dim); }
.cmd-journey-key i{ display:inline-block; width:14px; height:3px; margin-right:6px; vertical-align:3px; border-radius:2px; }
.cmd-journey-key .k-ap{ background:var(--accent); } .cmd-journey-key .k-gr{ background:var(--teal); } .cmd-journey-key .k-mark{ width:8px; height:8px; vertical-align:0; transform:rotate(45deg); background:var(--gold); }
.cmd-journey-turn{ display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--cmd-hair); font-size:var(--fs-sm); }
.cmd-journey-turn-m{ font-family:var(--mono); font-size:11px; color:var(--gold); }
@media (max-width:640px){ .cmd-journey-turn{ grid-template-columns:64px minmax(0,1fr); } .cmd-journey-turn .ui-chip{ display:none; } }

/* ---------------------------------------------------------------- 13. CHARTS */
.chart-box{ border-radius:12px; border-color:var(--cmd-hair); background:var(--glass-strong); box-shadow:var(--elev-1); padding:16px 18px 12px; }
.chart-box-title{ font-family:var(--font-display); letter-spacing:-.005em; }
@keyframes cmdFade{ from{ opacity:0; } to{ opacity:1; } }
.chart-range-btn{ border-radius:999px; }

/* ---------------------------------------------------------------- 14. MODALS */
.modal-overlay{ z-index:var(--z-modal); background:var(--overlay); backdrop-filter:blur(6px) saturate(.9); -webkit-backdrop-filter:blur(6px) saturate(.9); animation:cmdFade var(--dur-ui) var(--ease-out); }
.modal, body.theme-dark .modal{ border-radius:16px; border:1px solid var(--line-strong); border-top:2px solid var(--accent); padding:28px; box-shadow:var(--elev-3), 0 0 0 1px rgba(0,0,0,.2); overscroll-behavior:contain;
  animation:cmdModalIn var(--dur-ui) var(--ease-emph); }
@keyframes cmdModalIn{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
.modal h2{ font-family:var(--font-display); font-weight:600; letter-spacing:-.018em; }
.modal-close{ border-radius:8px; transition:background-color var(--dur-micro), color var(--dur-micro); }

/* "Why?" — the causality breakdown as an analytical artefact (app.js openWhyModal). */
.why-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:6px 0 18px; }
.why-now{ display:flex; flex-direction:column; }
.why-now-k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }
.why-now-v{ font-family:var(--font-display); font-size:var(--num-xl); font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.why-total{ text-align:right; }
.why-total .why-now-v.good{ color:var(--positive-text); } .why-total .why-now-v.bad{ color:var(--red); }
.why-section{ margin-top:18px; }
.why-section-title{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; }
.why-section-title .why-count{ margin-left:auto; letter-spacing:.04em; color:var(--text-faint); text-transform:none; }
/* Driver waterfall: each bar starts where the previous one ended, so the total is visibly the sum of its causes. */
.why-fall{ display:flex; flex-direction:column; gap:6px; }
.why-bar-row{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 64px; gap:12px; align-items:center; font-size:var(--fs-sm); }
.why-bar-k{ min-width:0; line-height:1.35; }
.why-bar-src{ display:block; font-size:11px; color:var(--text-faint); }
.why-bar-track{ position:relative; height:14px; border-radius:4px; background:var(--panel-sunken); overflow:hidden; }
.why-bar-track::after{ content:''; position:absolute; top:0; bottom:0; left:var(--zero,50%); width:1px; background:var(--line-strong); }
.why-bar-fill{ position:absolute; top:2px; bottom:2px; border-radius:3px; animation:cmdGrow var(--dur-major) var(--ease-out) backwards; transform-origin:left center; }
.why-bar-fill.pos{ background:var(--teal); } .why-bar-fill.neg{ background:var(--red); } .why-bar-fill.other{ background:var(--text-faint); opacity:.6; }
.why-bar-fill.total{ background:var(--accent); }
@keyframes cmdGrow{ from{ transform:scaleX(0); opacity:.4; } to{ transform:none; opacity:1; } }
.why-bar-v{ text-align:right; font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; }
.why-bar-v.pos{ color:var(--positive-text); } .why-bar-v.neg{ color:var(--red); } .why-bar-v.other{ color:var(--text-faint); }
.why-bar-row.is-total{ padding-top:8px; border-top:1px solid var(--line-strong); font-weight:600; }
.why-empty{ padding:10px 12px; border:1px dashed var(--line-strong); border-radius:8px; color:var(--text-faint); font-size:var(--fs-sm); }
.why-timeline{ position:relative; padding-left:18px; }
.why-timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line-strong); }
.why-tl-item{ position:relative; display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:var(--fs-sm); }
.why-tl-item::before{ content:''; position:absolute; left:-17px; top:10px; width:9px; height:9px; border-radius:50%; background:var(--panel-sunken); border:2px solid var(--line-strong); }
.why-tl-item.pending::before{ border-color:var(--gold); background:var(--warning-tint); }
.why-tl-item.pending .why-tl-when{ color:var(--gold); }
.why-tl-when{ font-family:var(--mono); font-size:11px; color:var(--text-faint); white-space:nowrap; }
.why-tl-v{ font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.why-tl-v.pos{ color:var(--positive-text); } .why-tl-v.neg{ color:var(--red); }
.why-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:11px; color:var(--text-faint); }
.why-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }

/* ---------------------------------------------------------------- 14b. DECISION REPORT (app.js openReportModal)
   What changed now (before → after, Why?), what is still to land (the engine's queue: when, why, how much), what to watch. */
.decision-impact{ border-radius:12px; border-color:var(--line); background:var(--panel-sunken); padding:14px 16px; gap:4px; }
.decision-impact .decision-impact-title{ margin-top:4px; }
.report-change{ align-items:center; }
.report-change-vals b{ font-family:var(--font-display); font-weight:600; }
.report-why{ margin-left:8px; min-height:30px; padding:2px 10px; border-radius:999px; border:1px solid var(--accent-line); background:transparent; color:var(--accent-text); font-size:var(--fs-xs); font-weight:600; cursor:pointer; }
.report-why:hover{ background:var(--accent-tint); border-color:var(--accent-line-strong); }
.report-later-title{ display:flex; align-items:center; gap:8px; margin-top:12px !important; }
.report-later-count{ margin-left:auto; font-family:var(--sans); letter-spacing:0; text-transform:none; color:var(--gold); font-weight:600; }
.report-timeline{ position:relative; padding-left:18px; }
.report-timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line-strong); }
.report-tl{ position:relative; display:flex; flex-direction:column; gap:4px; padding:6px 0; }
.report-tl::before{ content:''; position:absolute; left:-17px; top:10px; width:9px; height:9px; border-radius:50%; background:var(--warning-tint); border:2px solid var(--gold); }
.report-tl-when{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--gold); }
.report-tl-what{ font-size:var(--fs-sm); color:var(--text); }
.report-tl-fx{ display:flex; flex-wrap:wrap; gap:6px; }
.report-watch{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid var(--cmd-hair); }
.report-watch .decision-impact-title{ margin:0 6px 0 0; }
.report-watch .cmd-eff{ cursor:pointer; min-height:34px; font:inherit; font-size:var(--fs-xs); }
.report-watch .cmd-eff:hover{ border-color:var(--accent-line-strong); color:var(--text); }

/* ---------------------------------------------------------------- 15. DRAWER + TOASTS */
.entity-drawer, body.theme-dark .entity-drawer{ z-index:var(--z-drawer); background:var(--glass-strong); backdrop-filter:blur(18px); box-shadow:-24px 0 60px -20px rgba(0,0,0,.55); }
.entity-drawer.open{ transition:transform var(--dur-ui) var(--ease-out), visibility 0s; }
.toast-root{ z-index:var(--z-toast); }
.toast, body.theme-dark .toast{ border-radius:12px; border:1px solid var(--line-strong); border-left:3px solid var(--accent); background:var(--glass-strong); backdrop-filter:blur(14px); box-shadow:var(--elev-3); padding:12px 16px; animation:cmdToastIn var(--dur-ui) var(--ease-emph); }
@keyframes cmdToastIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------------- 16. ADVANCE MONTH SEQUENCE — the monthly national briefing */
.advmonth{ z-index:var(--z-sequence); background:radial-gradient(90% 80% at 50% 30%, rgba(20,28,40,.96), rgba(4,6,10,.985)); backdrop-filter:blur(8px); }
body:not(.theme-dark) .advmonth{ background:radial-gradient(90% 80% at 50% 30%, rgba(247,249,252,.97), rgba(220,226,234,.985)); }
.advmonth-processing{ position:relative; max-width:440px; padding:32px 28px; }
.advmonth-processing::before{ /* orbit rings behind the stage list */
  content:''; position:absolute; left:50%; top:50%; width:420px; height:420px; max-width:90vw; max-height:90vw; transform:translate(-50%,-50%); z-index:-1; border-radius:50%;
  border:1px solid var(--cmd-hair); box-shadow:0 0 0 60px rgba(255,153,51,.02), inset 0 0 0 40px rgba(255,153,51,.015);
 
}
.advmonth-eyebrow{ color:var(--accent-text); letter-spacing:.24em; }
.advmonth-stage{ font-family:var(--font-display); font-size:var(--fs-md); letter-spacing:.01em; display:flex; align-items:center; justify-content:center; gap:10px; }
.advmonth-check{ width:20px; height:20px; border-radius:50%; border:1px solid var(--line-strong); display:inline-grid; place-items:center; font-size:11px; }
.advmonth-stage.advmonth-stage-done .advmonth-check{ border-color:var(--teal); background:var(--positive-tint); color:var(--teal); }
.advmonth-results{ border-radius:18px; border:1px solid var(--line-strong); border-top:2px solid var(--accent); background:var(--glass-strong); box-shadow:var(--elev-3); animation:cmdModalIn var(--dur-major) var(--ease-emph); }
.advmonth-results-title{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; color:var(--text); }
.advmonth-results-title::before{ content:'NATIONAL PULSE'; display:block; font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--accent-text); margin-bottom:6px; }
.advmonth-metric{ border-radius:12px; border:1px solid var(--cmd-hair); background:var(--panel-sunken); text-align:left; animation:cmdRise var(--dur-major) var(--ease-out) backwards; transition:border-color var(--dur-micro), transform var(--dur-micro); }
.advmonth-metric:nth-child(2){ animation-delay:50ms; } .advmonth-metric:nth-child(3){ animation-delay:100ms; } .advmonth-metric:nth-child(4){ animation-delay:150ms; } .advmonth-metric:nth-child(5){ animation-delay:200ms; } .advmonth-metric:nth-child(6){ animation-delay:250ms; }
.advmonth-metric:hover{ border-color:var(--accent-line-strong); }
.advmonth-metric-value{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-xl); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.advmonth-metric-hint{ color:var(--accent-text); }
.advmonth-section-title{ letter-spacing:.18em; }
.advmonth-mover-row{ border-bottom-color:var(--cmd-hair); }
.advmonth-war-ended{ margin:0 0 16px; padding:14px 16px; border-radius:12px; border:1px solid var(--line-strong); border-left:4px solid var(--accent); background:var(--accent-tint); animation:cmdRise var(--dur-major) var(--ease-out) backwards; }
.advmonth-war-ended-k{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-lg); }
.advmonth-war-ended-t{ margin-top:4px; font-size:var(--fs-sm); line-height:1.5; color:var(--text-dim); }
.advmonth-war-ended-foot{ margin-top:6px; font-size:var(--fs-xs); color:var(--text-faint); }
.advmonth-briefing{ padding:12px 14px; border-radius:10px; background:var(--panel-sunken); border-left:3px solid var(--accent); }

/* Login title seal */
.onboard-seal{ display:inline-block; width:30px; height:30px; margin-right:12px; vertical-align:-5px; }
.onboard-seal svg{ width:100%; height:100%; display:block; }
.onboard-card--login{ border-radius:18px; border-top:2px solid var(--accent); }

/* ---------------------------------------------------------------- 16b. ELECTION NIGHT (app.js / phase17-elections-ui.js playElectionNight)
   A cinematic moment by design (motion charter: elections are one of the few). Presentation only; the count is unchanged. */
.election-night{ background:radial-gradient(80% 70% at 50% 20%, rgba(20,30,46,.98), rgba(4,6,10,.99)); padding:28px 20px; }
body:not(.theme-dark) .election-night{ background:radial-gradient(80% 70% at 50% 20%, rgba(247,249,252,.98), rgba(220,226,234,.99)); }
.election-night-head{ max-width:640px; }
.election-night-eyebrow{ letter-spacing:.24em; color:var(--accent-text); }
.election-night-tally{ gap:36px; margin-top:14px; }
.tally-num{ font-family:var(--font-display); font-size:clamp(40px, 7vw, 64px); font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.tally-label{ font-family:var(--mono); letter-spacing:.14em; }
.tally-majority{ padding:6px 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--panel-sunken); font-weight:600; }
.election-night-latest{ font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; }
.election-night .modal-row{ border-bottom-color:var(--cmd-hair); }
.election-night .bar{ border-radius:6px; }

/* ---------------------------------------------------------------- 17. BOOT SEQUENCE (command-ui.js — once per session, skippable) */
.cmd-boot{
  position:fixed; inset:0; z-index:var(--z-boot); display:grid; place-items:center; pointer-events:none; /* never blocks input: the first click or key reaches the game and dismisses this */
  background:radial-gradient(70% 60% at 50% 45%, #111826 0%, #06080c 70%);
  color:#e8ecf2; animation:cmdBootOut 420ms var(--ease-in-out) forwards; animation-delay:1500ms;
}
.cmd-boot.cmd-boot-leave{ animation:cmdBootOut 320ms var(--ease-in-out) forwards; animation-delay:0ms; }
@keyframes cmdBootOut{ to{ opacity:0; visibility:hidden; } }
.cmd-boot::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px); background-size:40px 40px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0, transparent 60%); mask-image:radial-gradient(circle at 50% 45%, #000 0, transparent 60%); }
.cmd-boot-stage{ position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.cmd-boot-mark{ width:132px; height:132px; }
.cmd-boot-mark .ring{ fill:none; stroke:rgba(255,153,51,.55); stroke-width:1; animation:cmdFade 700ms var(--ease-out) backwards; }
.cmd-boot-mark .ring.r2{ stroke:rgba(148,163,184,.35); stroke-dasharray:2 5; stroke-dashoffset:0; animation:cmdFade 600ms ease 200ms backwards; }
.cmd-boot-mark .ring.r3{ stroke:rgba(19,136,8,.5); animation-delay:120ms; }
.cmd-boot-mark .chakra{ transform-origin:66px 66px; animation:cmdChakra 1200ms var(--ease-out) both; }
.cmd-boot-mark .chakra line, .cmd-boot-mark .chakra circle{ stroke:#6f8fd6; stroke-width:1; fill:none; }
@keyframes cmdChakra{ from{ opacity:0; transform:rotate(-60deg) scale(.7); } to{ opacity:1; transform:none; } }
.cmd-boot-word{ font-family:var(--serif); font-size:34px; font-weight:600; letter-spacing:.42em; margin-right:-.42em; animation:cmdBootWord 700ms var(--ease-out) 250ms both; }
@keyframes cmdBootWord{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.cmd-boot-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:#8e9aad; animation:cmdFade 500ms ease 550ms both; }
.cmd-boot-lines{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#6b778a; }
.cmd-boot-lines span{ opacity:0; animation:cmdFade 300ms ease forwards; }
.cmd-boot-lines span::before{ content:'● '; color:#34d399; }
.cmd-boot-bar{ width:220px; height:2px; background:rgba(148,163,184,.15); overflow:hidden; border-radius:2px; }
.cmd-boot-bar i{ display:block; height:100%; width:100%; background:linear-gradient(90deg, #FF9933, #f4f6f9, #138808); transform-origin:left; animation:cmdGrow 1300ms var(--ease-in-out) both; }
.cmd-boot-skip{ position:absolute; bottom:28px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:#5c6578; text-transform:uppercase; }

/* ---------------------------------------------------------------- 18. STATES — empty, error, loading */
.empty-state{ border:1px dashed var(--line-strong); border-radius:var(--cmd-radius); padding:40px 20px; background:var(--glass); }
.empty-state .icon{ opacity:.8; }
[data-view-failure]{ border-radius:var(--cmd-radius); }
.cmd-skeleton{ position:relative; overflow:hidden; background:var(--panel-sunken); border-radius:8px; }
.cmd-skeleton::after{ content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(148,163,184,.10), transparent); animation:cmdShimmer 1.3s ease-in-out infinite; }
@keyframes cmdShimmer{ to{ transform:translateX(100%); } }

/* ---------------------------------------------------------------- 19. SCREEN TRANSITIONS */
#mainView{ animation:none; }
.main.view-enter > :nth-child(-n+3){ animation:cmdRise var(--dur-ui) var(--ease-out) backwards; }
.main.view-enter > :nth-child(2){ animation-delay:30ms; } .main.view-enter > :nth-child(3){ animation-delay:60ms; }
.main.view-enter .grid > .card{ animation:none; } /* the section itself enters once; cards don't re-stagger inside it */
/* Month turnover: after Advance Month, the main surface settles in with one soft pulse along the top edge. */
.topbar::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; opacity:0; pointer-events:none; }
body.cmd-month-turned .topbar::after{ animation:cmdTurn var(--dur-cine) var(--ease-out); }   /* the month turned: one sweep under the command bar */
@keyframes cmdTurn{ 0%{ transform:scaleX(0); opacity:1; } 70%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(1); opacity:0; } }

/* ---------------------------------------------------------------- 20. RESPONSIVE */
@media (max-width:1500px){
  .cmd-tools .btn-ghost{ padding:8px 8px; }
  .eyebrow{ letter-spacing:.14em; }
}
@media (max-width:1320px){
  /* Tools collapse to their icon glyph; labels remain as aria-label / title for every button. */
  .cmd-tools .btn-ghost{ min-width:44px; padding:8px 10px; }
  .cmd-tool-label{ display:none; }
}
@media (max-width:1200px){
  .topbar{ flex-wrap:nowrap; }
  .topbar-right{ flex-wrap:nowrap; }
  .cmd-status .approval-trend{ display:none; }
  .title-block .eyebrow{ display:none; }
}
@media (max-width:900px){
  .topbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"left adv" "status tools"; row-gap:8px; column-gap:10px; padding:10px 12px; }
  .topbar-left{ grid-area:left; min-width:0; }
  .topbar-right{ display:contents; }
  .cmd-tools{ grid-area:tools; justify-self:end; }
  #advanceBtn{ grid-area:adv; padding:10px 14px; min-height:44px; font-size:var(--fs-sm); }
  .cmd-status-row{ grid-area:status; display:flex; gap:8px; align-items:center; min-width:0; }
  .cmd-status{ flex:1 1 auto; }
  .cmd-status .clock{ padding:6px 10px; font-size:var(--fs-xs); }
  .cmd-status .actions-chip{ flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .title{ font-size:var(--fs-md); }
  .seal{ width:30px; height:30px; flex-basis:30px; } .seal svg{ width:24px; height:24px; }
  .view-header.cmd-hero{ grid-template-columns:minmax(0,1fr); padding:20px 18px; }
  .cmd-gauge{ flex-direction:row; justify-content:flex-start; gap:14px; min-width:0; }
  .cmd-gauge-svg{ width:96px; height:96px; }
  .cmd-gauge-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
  .cmd-sit-row{ grid-template-columns:minmax(0,1fr); gap:4px; }
  .crisis-alert{ margin:8px 10px 0; }
}
@media (min-width:901px){ .cmd-status-row{ display:contents; } .cmd-gauge-meta{ display:contents; } }
@media (max-width:640px){
  .cmd-tools{ gap:0; }
  .cmd-tools .btn-ghost{ padding:8px 8px; }
  .p28-strip-row.cmd-deck{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(160px, 72%); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; overscroll-behavior-x:contain; }
  .p28-strip-row.cmd-deck > .cmd-inst{ scroll-snap-align:start; }
  .cmd-hero-title{ font-size:26px; }
  .section-title{ flex-wrap:wrap; row-gap:4px; }
  .section-title .hint{ flex:1 1 100%; margin-left:14px; text-align:left; }
  .cmd-hero-facts{ gap:6px; }
  .why-bar-row{ grid-template-columns:minmax(0,1fr) 56px; }
  .why-bar-track{ grid-column:1 / -1; order:3; }
  .modal, body.theme-dark .modal{ padding:22px 18px; border-radius:16px 16px 0 0; max-width:100vw; width:100vw; max-height:90vh; align-self:flex-end; animation:cmdSheetIn var(--dur-ui) var(--ease-out); }
  .modal-overlay{ align-items:flex-end; }
  .cmd-boot-word{ font-size:26px; }
}
@media (max-width:640px){
  /* Diplomacy trade partners: country + amount on one line, relation bar and standing below. */
  .cmd-trade-head{ display:none !important; }
  .cmd-trade-row{ grid-template-columns:minmax(0,1fr) auto !important; row-gap:6px !important; }
  .cmd-trade-row > .bar{ grid-column:1 / 2; }
}
@media (max-width:640px){
  /* Trade explorer: each country becomes a small labelled card instead of six squeezed columns. */
  .cmd-it-row{ grid-template-columns:1fr 1fr !important; gap:4px 12px !important; padding:10px 0 !important; }
  .cmd-it-row > span:first-child{ grid-column:1 / -1; }
  .cmd-it-row > span:nth-child(2)::before{ content:'India sells: '; color:var(--text-faint); font-size:var(--fs-xs); }
  .cmd-it-row > span:nth-child(3)::before{ content:'India buys: '; color:var(--text-faint); font-size:var(--fs-xs); }
  .cmd-it-row > span:nth-child(4)::before{ content:'Balance: '; color:var(--text-faint); font-size:var(--fs-xs); }
  .cmd-it-row > span:nth-child(5)::before{ content:'In the game: '; color:var(--text-faint); font-size:var(--fs-xs); }
  .cmd-it-row > span:last-child{ grid-column:1 / -1; }
}
@keyframes cmdSheetIn{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } }
@media (max-width:420px){
  .topbar-left .title-block{ max-width:52vw; }
  #advanceBtn{ padding:10px 12px; }
  .cmd-status .clock{ letter-spacing:.06em; }
}

/* ---------------------------------------------------------------- 21. ACCESSIBILITY */
@media (hover:none){
  .card-clickable:hover, .cmd-inst:hover, #advanceBtn:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .cmd-boot{ display:none; }
  #advanceBtn[data-ready="1"]::before, #advanceBtn.is-processing::after, .ticker-track, body.cmd-month-turned .topbar::after, .crisis-alert.cmd-alert-new, .crisis-room-card.cmd-alert-new{ animation:none !important; }
  .rail-btn.rail-hub::before, .cmd-gauge-ring-fg, .rail, .btn, .cmd-inst, .crisis-option-btn{ transition:none; }
  .main.view-enter > *, .main.view-enter .cmd-hero-reveal, .advmonth-metric, .advmonth-war-ended, .why-bar-fill, .main.view-enter .parl-group, .main.view-enter .parl-majority-line, .settings-menu, .toast, .modal, .modal-overlay{ animation:none !important; }
  .parl-group, .parl-chip{ transition:none; }
  .ticker-track{ padding-left:16px; }
}
@media (forced-colors: active){
  .cmd-inst, .cmd-sit-pill, .cmd-fact, .crisis-alert{ border:1px solid CanvasText; }
  #advanceBtn{ border:2px solid ButtonText; }
  .rail-btn.rail-hub.active::before{ background:Highlight; }
}