:root{
  /* v40 "Situation Room" — the COLOUR tokens live in exactly two blocks further down: the light
     theme's second root block (the one headed "THEME TOKENS ... light half") and the dark theme's body.theme-dark block
     (dark is the default theme; applyTheme() in app.js adds the class). This first block only holds
     theme-independent tokens, plus a dark fallback for the very first paint. */
  --bg: #000000; /* oklch(0 0 0) */
  --panel: rgba(15,20,28,0.86);
  --panel-raised: rgba(21,28,39,0.93);
  --panel-sunken: #05070b;
  --line: rgba(148,163,184,0.17);
  --line-strong: rgba(148,163,184,0.34);
  --text: #E8ECF2;
  --text-dim: #A9B4C4;
  --text-faint: #8E9AAD;
  --gold: #F2C14E;
  --gold-dim: #C9973F;
  --teal: #34d399;
  --teal-bright: #6ee7b7;
  --red: #e0616a;
  --blue: #60A5FA;

  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-num: var(--mono);          /* every figure: tabular mono, so columns and ticking values never jitter */
  --ls-eyebrow: .14em;              /* uppercase eyebrow / small-caps header tracking */
  --hairline: 1px;
}

*{box-sizing:border-box; margin:0; padding:0;}

/* ---------- Accessibility: skip link + visible keyboard focus ----------
   Part 9, Section 11. Added without touching any existing selector — pure addition. */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:9999;
  background:var(--accent-fill); color:var(--on-accent); padding:10px 16px; font-weight:600;
  border-radius:0 0 6px 0; text-decoration:none;
  min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center;
}
.skip-link:focus{ left:0; }
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;
}
.rail-btn:focus-visible{ outline-offset:-2px; }

/* Smart Tooltips (Part 9, Section 7) */
.term-tip{ cursor:help; border-bottom:1px dotted var(--text-faint); }
.term-tip-mark{ color:var(--accent-text); font-size:0.75em; margin-left:1px; }
.term-tip:hover, .term-tip:focus-visible{ color:var(--accent-text); border-bottom-color:var(--accent-text); }
/* Onboarding progressive disclosure — advanced sections hidden until the player clicks
   "Show All Systems" or 3 months into the term have passed (see setActiveRail in render.js). */
.rail.rail-show-all .rail-btn.rail-advanced{ display: flex; }
.rail:not(.rail-show-all) .rail-btn.rail-advanced{ display: none; }
html,body{height:100%;}
body{
  /* Semi-transparent so the persistent 3D Holo-Earth background (mounted behind everything,
     z-index:-1) shows through in the gaps between panels. Only takes effect in the dark
     theme — the light theme's own `body{ background: var(--bg); }` override further down
     this file loads after this rule and wins in the cascade, so switching to Light Theme
     still gets a fully opaque page as before. */
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size:var(--fs-md);
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--accent-fill); color:var(--on-accent); }

button{ font-family: var(--sans); cursor:pointer; border:none; background:none; color:inherit; }
input, select{ font-family: var(--mono); }

#app{ display:flex; flex-direction:column; height:100vh; }

/* ---------- TOP BAR ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--chrome);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 -1px 0 var(--accent-line);
}
.topbar-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.title-block{ min-width:0; overflow:hidden; }
.seal{ font-size:var(--fs-2xl); filter: drop-shadow(0 0 8px var(--accent-glow)); }
.eyebrow{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.14em; color: var(--accent-text); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.title{ font-family: var(--serif); font-size:var(--fs-xl); font-weight:600; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.topbar-right{ display:flex; align-items:center; gap:18px; }
.clock{ font-family: var(--mono); font-size:var(--fs-base); letter-spacing:.08em; color: var(--text-dim); border:1px solid var(--line); padding:8px 14px; border-radius:3px; background: var(--panel-sunken); }
.clock #monthLabel{ color: var(--accent-text); font-weight:600; margin-right:6px; }

.btn{ padding:14px 18px; min-height:44px; box-sizing:border-box; border-radius:3px; font-size:var(--fs-base); font-weight:600; letter-spacing:.02em; transition: all .15s ease; border:1px solid transparent; }
.btn-primary{ background: var(--accent-fill); color:var(--on-accent); box-shadow: 0 0 14px var(--accent-glow); }
.btn-primary:hover{ background: var(--accent-fill-hover); transform: translateY(-1px); box-shadow: 0 0 20px var(--accent-glow); }
.btn-ghost{ border-color: var(--line-strong); color: var(--text-dim); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent-text); }
.btn-small{ padding:6px 12px; font-size:var(--fs-xs); }
.btn-approve{ background: var(--teal); color:var(--on-positive); }
.btn-approve:hover{ background: var(--teal-bright); }
/* Light theme's --teal (#1d7449, a muted dark green) only gives 3.3:1 contrast against the
   near-black #04120f text above — fails WCAG AA (4.5:1), caught by an axe-core pass (v38.10).
   Dark theme's brighter --teal (#34d399) is fine with the same dark text (10.3:1), so only the
   light-theme case needs its own override — white text on the darker green clears AA (5.8:1). */
body:not(.theme-dark) .btn-approve{ color:#ffffff; }
/* Demographics age-structure bar (v38.10 axe-core fix): same root cause as .btn-approve above —
   dark near-black text was tuned for dark theme's bright --teal/--gold/--red (5-9:1, fine) but
   fails badly against light theme's much darker versions of the same variables (2.4-2.9:1). Each
   band needs its own per-theme color since dark theme needs dark text and light theme needs light
   text on the SAME css variable. */
.age-band-children{ color:#04241f; }
.age-band-working{ color:#3a2a06; }
.age-band-elderly{ color:#3a0a0a; }
body:not(.theme-dark) .age-band-seg{ color:#ffffff; }
.btn-reject{ background: transparent; border:1px solid var(--red); color: var(--red); }
.btn-reject:hover{ background: var(--danger-tint); }
.btn-outline{ border:1px solid var(--accent-line-strong); color: var(--accent-text); background:transparent; }
.btn-outline:hover{ background: var(--accent-tint); border-color: var(--accent); }
.btn:disabled{ opacity:.35; cursor:not-allowed; transform:none !important; }

/* ---------- TICKER ---------- */
.ticker{ background: var(--panel-sunken); border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap; height:30px; display:flex; align-items:center; min-width:0; }
.ticker-track{ font-family: var(--mono); font-size:var(--fs-xs); color: var(--text-dim); padding-left:100%; display:inline-block; animation: scroll-left 38s linear infinite; }
.ticker-track span{ margin-right:40px; }
.ticker-track .up{ color: var(--positive-text); }
.ticker-track .down{ color: var(--red); }

/* Crisis Alert Bar — persistent, appears above the layout on every screen */
#crisisAlertBar:empty{ display:none; }
#electionAlertBar:empty{ display:none; }
.election-alert{ background: var(--alert-surface); border-bottom:2px solid var(--gold); padding:16px 24px; text-align:center; animation: crisis-in .25s ease; }
.election-alert-title{ font-family: var(--serif); font-size:var(--fs-xl); font-weight:700; letter-spacing:.01em; }
.election-alert-sub{ color: var(--text-dim); font-size:var(--fs-base); margin-top:6px; }
.crisis-alert{ background: var(--alert-surface); border-bottom:2px solid; padding:16px 24px; animation: crisis-in .25s ease; }
.crisis-alert-mini{ padding:9px 24px; display:flex; align-items:center; gap:10px; cursor:pointer; border-bottom-width:1px; }
.crisis-alert-mini:hover{ background: var(--accent-tint); }
.crisis-alert-mini-text{ font-size:var(--fs-sm); color: var(--text-dim); }
.crisis-alert-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; max-width:1100px; margin:0 auto; }
.crisis-alert-title{ font-family: var(--serif); font-size:var(--fs-lg); font-weight:600; margin-top:8px; }
.crisis-alert-text{ color: var(--text-dim); font-size:var(--fs-base); margin-top:6px; max-width:720px; line-height:1.5; }
.crisis-alert-options{ display:flex; gap:10px; flex-wrap:wrap; max-width:1100px; margin:14px auto 0; }
.crisis-option-btn{ flex:1; min-width:200px; text-align:left; background: var(--panel-raised); border:1px solid var(--line); border-radius:5px; padding:10px 14px; transition: border-color .15s; }
.crisis-option-btn:hover{ border-color: var(--accent); }
.crisis-option-label{ display:block; font-size:var(--fs-base); font-weight:600; }
.crisis-option-meta{ display:block; font-family: var(--mono); font-size:var(--fs-xs); color: var(--text-faint); margin-top:5px; }
@keyframes crisis-in{ from{ opacity:0; transform: translateY(-6px);} to{ opacity:1; transform:translateY(0);} }
@keyframes scroll-left{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-100%); } }

/* ---------- LAYOUT ---------- */
.layout{ flex:1; display:flex; min-height:0; }
.rail{ width:232px; border-right:1px solid var(--line); background: var(--chrome); backdrop-filter: blur(10px); padding:14px 10px; display:flex; flex-direction:column; gap:2px; flex-shrink:0; overflow-y:auto; }
.rail-btn{ display:flex; align-items:center; gap:10px; text-align:left; padding:11px 12px; min-height:44px; box-sizing:border-box; border-radius:4px; font-size:var(--fs-base); color: var(--text-dim); font-weight:500; }
.rail-num{ font-family:var(--mono); font-size:var(--fs-2xs); color: var(--text-faint); }
.rail-btn:hover{ background: var(--accent-tint); color: var(--text); }
.rail-btn.active{ background: var(--accent-tint-strong); color: var(--accent-text); box-shadow: inset 2px 0 0 var(--accent); }
.rail-btn.active .rail-num{ color: var(--accent-text); }

/* ---------- RAIL GROUPS (v38.11 — Phase 1 information architecture) ----------
   Collapsible ministry-of-ministries groups. .rail-group-items is a plain block by default;
   .collapsed hides it. Collapse state is per-group and persisted (see wireRailGroups() in
   app.js), and the group holding the active view is force-expanded on every render so the
   current location is never hidden behind a collapsed header. */
.rail-group{ display:flex; flex-direction:column; gap:1px; margin-bottom:2px; }
.rail-group-header{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:8px 10px 6px; margin-top:6px; background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:var(--fs-2xs); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint); min-height:28px; box-sizing:border-box;
}
.rail-group:first-child .rail-group-header{ margin-top:0; }
.rail-group-header:hover{ color:var(--text-dim); }
.rail-group-header:focus-visible{ outline-offset:-2px; }
.rail-group-caret{ transition: transform .15s ease; font-size:var(--fs-xs); }
.rail-group.collapsed .rail-group-caret{ transform: rotate(-90deg); }
.rail-group-items{ display:flex; flex-direction:column; gap:2px; }
.rail-group.collapsed .rail-group-items{ display:none; }
.rail-group.has-active .rail-group-header{ color:var(--text-dim); }
.rail-btn-system{ margin-top:8px; }

/* ---------- DASHBOARD PROGRESSIVE DISCLOSURE (v38.11 — Phase 1) ----------
   The dashboard's deep-dive numbers (last month's movers, next month's outlook, trend chart,
   status grid, quick links) sit behind a native <details> well instead of always-on screen —
   collapsed by default so the top of the dashboard reads as priority, not a stat dump. Level
   1-3 info (situation card, Needs Your Attention, domain bands) is unaffected and stays open. */
.dashboard-detail-well summary::-webkit-details-marker{ display:none; }
.dashboard-detail-well summary{ list-style:none; }
.dashboard-detail-well summary::before{ content:'▸'; margin-right:8px; font-size:var(--fs-sm); color:var(--text-faint); transition:transform .15s ease; display:inline-block; }
.dashboard-detail-well[open] summary::before{ transform:rotate(90deg); }
.dashboard-detail-well summary:hover{ color:var(--accent-text); }
.rail-footer{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.dev-credit{ margin-top:10px; font-size:var(--fs-xs); color:var(--text-faint); text-align:center; line-height:1.6; }
.dev-credit a{ color:var(--accent-text); text-decoration:none; }
.dev-credit a:hover{ text-decoration:underline; color:var(--accent-text); }

.main{ flex:1; overflow-y:auto; padding:28px 32px 60px; }

/* ---------- SHARED ---------- */
.view-header{ margin-bottom:24px; }
.view-eyebrow{ font-family: var(--mono); font-size:var(--fs-2xs); letter-spacing:.14em; color: var(--accent-text); text-transform:uppercase; margin-bottom:6px; }
.view-eyebrow:empty{ display:none; }
/* Advanced details (render.js ADVANCED_MODE): technical extras stay hidden until the player turns them on. */
body:not(.show-advanced) .adv-only{ display:none !important; }
.settings-version{ padding:8px 12px 4px; font-size:var(--fs-xs); color:var(--text-faint); }
.view-title{ font-family: var(--serif); font-size:var(--fs-2xl); font-weight:600; }
.view-sub{ color: var(--text-dim); font-size:var(--fs-base); margin-top:6px; max-width:640px; }

.grid{ display:grid; gap:16px; }
.grid-5{ grid-template-columns: repeat(5, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media(max-width:1100px){ .grid-5{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }

.card{ background: var(--panel); backdrop-filter: blur(8px); border:1px solid var(--line); border-radius:6px; padding:18px; }
.card-clickable{ cursor:pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.card-clickable:hover{ border-color: var(--accent-line-strong); transform: translateY(-2px); box-shadow: 0 6px 20px var(--accent-glow-soft); }

.stat-label{ font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color: var(--text-faint); margin-bottom:8px; }
.stat-value{ font-family: var(--font-num); font-size:var(--fs-2xl); font-weight:600; letter-spacing:-.01em; }
.stat-delta{ font-family: var(--mono); font-size:var(--fs-xs); margin-top:6px; }
.stat-delta.up{ color: var(--positive-text); }
.stat-delta.down{ color: var(--red); }

.section-title{ font-family: var(--serif); font-size:var(--fs-lg); font-weight:600; margin: 30px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; }
.section-title .hint{ font-family: var(--sans); font-size:var(--fs-xs); color: var(--text-faint); font-weight:400; }

.tag{ display:inline-block; font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.05em; padding:3px 8px; border-radius:3px; text-transform:uppercase; border:1px solid var(--line); color: var(--text-dim); }
.tag-gold{ border-color: var(--gold-dim); color: var(--gold); }
.tag-teal{ border-color: var(--teal); color: var(--positive-text); }
.tag-red{ border-color: var(--red); color: var(--red); }

.bar{ height:6px; background: var(--panel-sunken); border-radius:3px; overflow:hidden; border:1px solid var(--line); }
.bar-fill{ height:100%; background: var(--teal); box-shadow: 0 0 8px var(--positive-glow); }
.bar-fill.teal{ background: var(--teal-bright); }
.bar-fill.red{ background: var(--red); }

.progress-row{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-dim); margin-bottom:5px; }

/* Treasury sector rows */
.sector-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid var(--line); border-radius:5px; background: var(--panel); backdrop-filter: blur(8px); margin-bottom:8px; cursor:pointer; transition: border-color .15s; }
.sector-row:hover{ border-color: var(--accent-line-strong); }
.sector-name{ font-weight:600; font-size:var(--fs-md); }
.sector-meta{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-dim); margin-top:3px; }
.sector-amount{ font-family:var(--mono); font-size:var(--fs-lg); color: var(--gold); font-weight:600; }

/* Investment cards */
.invest-row{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 100px; gap:12px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:5px; margin-bottom:8px; background:var(--panel); backdrop-filter: blur(8px); }
.invest-row:hover{ border-color: var(--accent-line-strong); }
.invest-company{ font-weight:600; font-size:var(--fs-base); }
.invest-country{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-dim); }
.invest-status{ font-family:var(--mono); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.05em; }
.status-pending{ color: var(--gold); }
.status-approved{ color: var(--positive-text); }
.status-rejected{ color: var(--red); }

/* Project cards */
.project-card{ border:1px solid var(--line); border-radius:6px; padding:18px; background:var(--panel); backdrop-filter: blur(8px); margin-bottom:14px; }
.project-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.project-name{ font-family:var(--serif); font-size:var(--fs-lg); font-weight:600; }
.project-cost{ font-family:var(--mono); color:var(--gold); font-size:var(--fs-base); }
.pros-cons{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin:12px 0; }
.pros-cons ul{ list-style:none; font-size:var(--fs-sm); color:var(--text-dim); }
.pros-cons li{ padding:4px 0 4px 16px; position:relative; }
.pros li::before{ content:'+'; position:absolute; left:0; color:var(--positive-text); font-weight:700; }
.cons li::before{ content:'–'; position:absolute; left:0; color:var(--red); font-weight:700; }
.pros-cons .pros-cons-label{ font-family:var(--mono); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:6px; }

/* Country / org rows */
.country-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border:1px solid var(--line); border-radius:5px; margin-bottom:8px; cursor:pointer; background:var(--panel); backdrop-filter: blur(8px); }
.country-row:hover{ border-color: var(--accent-line-strong); }
.country-flag{ font-size:var(--fs-xl); margin-right:12px; }
.country-name{ font-weight:600; font-size:var(--fs-base); }
.country-rel{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-dim); }

.relation-meter{ width:120px; }

.org-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.org-card{ text-align:center; padding:28px 16px; border:1px solid var(--line); border-radius:6px; background:var(--panel); backdrop-filter: blur(8px); cursor:pointer; transition: all .15s; }
.org-card:hover{ border-color: var(--accent-line-strong); transform: translateY(-3px); box-shadow: 0 6px 20px var(--accent-glow-soft); }
.org-emblem{ font-size:var(--fs-3xl); margin-bottom:10px; }
.org-name{ font-family:var(--serif); font-weight:600; font-size:var(--fs-lg); }
.org-sub{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--text-faint); margin-top:4px; }

/* Modal */
.modal-overlay{ position:fixed; inset:0; background: rgba(2,4,6,.78); backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-overlay.hidden{ display:none; }
.modal{ position:relative; background: var(--surface-solid); backdrop-filter: blur(14px); border:1px solid var(--line-strong); border-radius:8px; width:560px; max-width:92vw; max-height:86vh; overflow-y:auto; padding:26px; box-shadow: var(--shadow-lg); }
.modal-close{
  position:absolute; top:14px; right:14px; z-index:20;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xl); line-height:1; color:var(--text-faint); cursor:pointer;
  border-radius:50%; background:transparent; transition:background .12s, color .12s;
}
.modal-close:hover{ color: var(--text); background:var(--accent-tint-strong); }
.modal h2{ font-family: var(--serif); font-size:var(--fs-xl); margin-bottom:4px; padding-right:48px; }
.modal .modal-sub{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-dim); margin-bottom:18px; }
.modal-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:var(--fs-base); }
.modal-row .k{ color: var(--text-dim); }
.modal-row .v{ font-family:var(--mono); font-weight:600; }
.modal-actions{ display:flex; gap:10px; margin-top:20px; }
.modal-actions .btn{ flex:1; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-family:var(--mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:6px; }
.field input[type=number], .field input[type=range], .field textarea{ width:100%; padding:9px 10px; background: var(--panel-sunken); border:1px solid var(--line); color:var(--text); border-radius:4px; font-size:var(--fs-base); font-family:var(--sans); resize:vertical; box-sizing:border-box; }
.field select{ width:100%; padding:9px 10px; background: var(--panel-sunken); border:1px solid var(--line); color:var(--text); border-radius:4px; font-size:var(--fs-base); }
select optgroup{ background: var(--panel-sunken); color: var(--accent-text); font-weight:600; }
select option{ background: var(--panel-sunken); color: var(--text); font-weight:400; }

/* Log */
.log-entry{ border-left:2px solid var(--accent-line-strong); padding:6px 0 6px 16px; margin-bottom:10px; }
.log-date{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--accent-text); text-transform:uppercase; letter-spacing:.06em; }
.log-text{ font-size:var(--fs-base); color:var(--text-dim); margin-top:2px; }

/* Toast */
.toast-root{ position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:8px; z-index:200; }
.toast{ background: var(--surface-solid); backdrop-filter: blur(10px); border:1px solid var(--line-strong); border-left:3px solid var(--accent); padding:12px 16px; border-radius:4px; font-size:var(--fs-base); max-width:320px; box-shadow: var(--shadow-md); animation: toast-in .2s ease; }
@keyframes toast-in{ from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:translateY(0);} }

.empty-state{ text-align:center; padding:60px 20px; color: var(--text-faint); }
.empty-state .icon{ font-size:var(--fs-3xl); margin-bottom:12px; opacity:.6; }

.war-badge{ display:inline-flex; align-items:center; gap:8px; padding:16px 22px; border:1px solid var(--red); border-radius:6px; background: var(--danger-tint); margin-bottom:20px; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent); }
/* =====================================================================================
   THEME TOKENS — v40 "Situation Room" (light half). Light slate paper, navy ink, the SAME accent
   roles as the dark war-room theme: saffron = primary action / "you are here", teal = positive,
   red = danger, gold = warning. Every value was checked for WCAG AA against --bg, --panel,
   --panel-raised and --panel-sunken: body text >= 4.5:1 on every surface, UI strokes
   (--line-strong, --accent) >= 3:1 on --bg. Component rules read these tokens; nothing further
   down hard-codes a light colour.
   ===================================================================================== */
:root{
  --bg: #ffffff; /* oklch(1 0 0) */
  --panel: #f7f9fc;
  --panel-raised: #ffffff;
  --panel-sunken: #dce2ea;
  --line: #c3ccd8;
  --line-strong: #74829a;
  --text: #0f1c30;
  --text-dim: #334158;
  --text-faint: #4a5870;
  --gold: #855400;
  --gold-dim: #6b4400;
  --teal: #166534;        /* v40: good = green */
  --teal-bright: #14532d;
  --red: #b42318;
  --blue: #1d4ed8;
  --saffron: #c25e00;
  --accent: #c25e00;
  --accent-text: #9a4800;
  --accent-fill: #e07b00;
  --accent-fill-hover: #f08a1c;
  --on-accent: #1a0e00;
  --on-positive: #ffffff;
  --on-critical: #ffffff;
  --accent-tint: rgba(194,94,0,.07);
  --accent-tint-strong: rgba(194,94,0,.13);
  --accent-line: rgba(194,94,0,.30);
  --accent-line-strong: #c25e00;
  --accent-glow: rgba(194,94,0,0);
  --accent-glow-soft: rgba(15,28,48,.10);
  --positive-text: #0b5f58;
  --positive-tint: rgba(13,110,102,.08);
  --positive-glow: rgba(13,110,102,0);
  --danger-tint: rgba(180,35,24,.08);
  --warning-tint: rgba(133,84,0,.09);
  --focus-ring: #9a4800;
  --chrome: #f3f5f9;
  --surface-solid: #ffffff;
  --alert-surface: #fbf6ee;
  --overlay: rgba(15,28,48,.42);
  --scrim: rgba(232,236,241,.90);
  --tile-grid: rgba(15,28,48,.035);
  --bg-grid-line: rgba(172,172,172,.18); /* ui-layouts backdrop grid (#acacac2d) */
  --cinema-bg: radial-gradient(ellipse at center, #f7f9fc 0%, #dce2ea 100%);
  --crisis-surface: linear-gradient(180deg, #fff4f2, #ffffff 40%);
  --crisis-head: linear-gradient(180deg, #fff4f2 80%, rgba(255,244,242,0));
  --shadow-sm: 0 1px 2px rgba(15,28,48,.07);
  --shadow-md: 0 4px 14px rgba(15,28,48,.12);
  --shadow-lg: 0 18px 48px rgba(15,28,48,.22);
}
body{ background: var(--bg); }
/* Dark theme only: a soft radial glow BEHIND the globe canvas (a fixed pseudo-element, z-index -2,
   under the globe's own -1 canvas), so the globe's dark limb/night side has something other than
   equally-near-black space to sit against and its rotation reads more clearly. body's own
   background-color stays the flat --bg (unchanged) — deliberately NOT a gradient on a real element,
   so this stays invisible to the contrast-audit script's ancestor walk (tests/browser-qa/audit.js
   treats any real ancestor with a gradient background-image as "skip contrast for this text", which
   would have silently exempted every topbar/rail/card text node from checking). A pseudo-element is
   never part of that walk, so audited contrast numbers are unaffected. v40: retinted from
   teal-black to the war-room slate. */
body.theme-dark[data-globe]:not([data-globe="off"])::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background: radial-gradient(ellipse 78% 62% at 50% 38%, #121a26 0%, #0b1119 35%, #080b10 62%, #040609 100%);
}
/* ---- Shared component skin (both themes, token-driven). v40 replaced the old light-only
        neumorphic overrides with the war-room grammar: crisp 1px hairlines, small radii, flat
        layered surfaces, depth from --shadow-* only. ---- */
.topbar{ border-bottom: 1px solid var(--line); }
.clock{ background:var(--panel-sunken); border:1px solid var(--line-strong); box-shadow:none; }
.btn-ghost, .btn-outline{ background:transparent; box-shadow:none; }
.ticker{ background:var(--panel-sunken); border-bottom-color: var(--line); }
.ticker-track{ color: var(--text-dim); }
.card, .sector-row, .invest-row, .project-card, .country-row, .org-card{
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.card-clickable:hover, .sector-row:hover, .invest-row:hover, .country-row:hover, .org-card:hover{
  box-shadow: var(--shadow-md);
}
.sector-row:hover, .invest-row:hover, .country-row:hover{ border-color: var(--accent-line-strong); }
.rail{ border-right-color: var(--line); }
.modal-overlay{ background: var(--overlay); backdrop-filter: blur(3px); }
.bar{ background:var(--panel-sunken); box-shadow:none; border:1px solid var(--line); }
.field input[type=number], .field input[type=range], .field select, .field textarea{
  background:var(--panel-sunken); color: var(--text); border:1px solid var(--line-strong);
  box-shadow:none;
}
select optgroup, select option{ background:var(--surface-solid); color: var(--text); }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line-strong); }

#consoleInput{ transition: box-shadow .15s, border-color .15s; }
#consoleInput:focus{ outline:none; border-color:var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-strong); }

/* ---------- Onboarding: Login / Setup / Swearing-In ---------- */
.onboard-overlay{ position:fixed; inset:0; background:var(--bg); z-index:500; display:flex; align-items:flex-start; justify-content:center; padding:40px 24px; overflow-y:auto; }
.onboard-card{ max-width:560px; width:100%; background:var(--surface-solid); border:1px solid var(--line-strong); border-top:2px solid var(--accent); border-radius:var(--radius-md,8px); padding:36px 32px; box-shadow:var(--shadow-lg); }
.onboard-title{ font-size:var(--fs-2xl); font-weight:700; text-align:center; margin-bottom:6px; }
.onboard-sub{ font-size:var(--fs-base); color:var(--text-dim); text-align:center; margin-bottom:26px; line-height:1.6; }
.onboard-field{ margin-bottom:16px; }
.onboard-field label{ display:block; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:6px; }
.onboard-field input, .onboard-field select{ width:100%; padding:12px 14px; background:var(--panel-sunken); border:1px solid var(--line-strong); border-radius:6px; color:var(--text); font-size:var(--fs-md); box-shadow:none; }
.onboard-btn{ width:100%; padding:14px; min-height:45px; box-sizing:border-box; border-radius:6px; border:none; font-size:var(--fs-md); font-weight:700; cursor:pointer; margin-top:8px; letter-spacing:.02em; }
.onboard-btn-primary{ background:var(--accent-fill); color:var(--on-accent); box-shadow:0 0 16px var(--accent-glow); }
.onboard-btn-disabled{ background:var(--panel-sunken); color:var(--text-faint); cursor:not-allowed; }
.onboard-note{ font-size:var(--fs-xs); color:var(--text-faint); text-align:center; margin-top:10px; line-height:1.6; }

/* Dark login-screen skin — only the very first "sign in" card, so it can sit on top of the
   rotating onboarding globe the way a game login modal does, without restyling the New Term
   Setup / Swearing-In cards that follow (those use the normal theme-token card skin). */
.onboard-card--login{ background:linear-gradient(180deg,#141a2c,#0b0f1c); border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03); }
.onboard-card--login .onboard-title{ color:#fff; }
.onboard-card--login .onboard-sub{ color:#9aa3ba; }
.onboard-card--login .onboard-field label{ color:#7d859c; }
.onboard-card--login .onboard-field input{ background:#1a2032; border:1px solid rgba(255,255,255,.09); color:#fff; box-shadow:none; }
.onboard-card--login .onboard-field input::placeholder{ color:#5c6480; }
.onboard-card--login .onboard-field input:focus{ outline:none; border-color:var(--gold); }
.onboard-card--login .onboard-note{ color:#7d859c; }
.onboard-card--login .onboard-note a{ color:var(--gold); }
.onboard-divider{ display:flex; align-items:center; gap:10px; margin:20px 0 14px; color:#7d859c; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; }
.onboard-divider::before, .onboard-divider::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.12); }
.onboard-login-row{ display:flex; gap:10px; }
.onboard-pill-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#1a2032; color:#fff; font-weight:600; font-size:var(--fs-md); cursor:pointer; transition:background .15s, transform .1s; }
.onboard-pill-btn:hover{ background:#242c47; }
.onboard-pill-btn:active{ transform:scale(.98); }
.onboard-pill-google{ background:#fff; color:#20242f; }
.onboard-pill-google:hover{ background:#eceef2; }
#onboardGlobeCanvas{ opacity:.55; }
.country-select-grid{ max-height:260px; overflow-y:auto; border-radius:6px; border:1px solid var(--line-strong); background:var(--panel-sunken); padding:8px; }
.country-pick{ display:flex; justify-content:space-between; align-items:center; padding:9px 10px; border-radius:4px; font-size:var(--fs-base); cursor:pointer; }
.country-pick:hover{ background:var(--accent-tint); }
.country-pick.selected{ background:var(--accent-fill); color:var(--on-accent); }
.country-pick.locked{ opacity:.45; cursor:not-allowed; }
.country-pick .lock-tag{ font-size:var(--fs-2xs); color:var(--text-faint); }
.swearing-card{ text-align:center; }
.swearing-seal{ font-size:48px; margin-bottom:12px; }
.swearing-oath{ font-family:var(--serif); font-size:var(--fs-lg); line-height:1.8; color:var(--text-dim); margin:18px 0; font-style:italic; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

/* ---------- THEME TOKENS — v40 "Situation Room" (dark half, the DEFAULT theme; applyTheme() in
   app.js adds body.theme-dark). Near-black slate, layered translucent panels over the globe,
   saffron primary accent, teal positive, red danger, gold warning, neutral slate hairlines.
   --teal and --red keep their long-standing values (statusColor() in JS reads them live and
   tests/theme-status-color-smoke-test.js pins them). Checked for AA on --bg / --panel /
   --panel-raised / --panel-sunken and on the legacy #101c22 surface. ---------- */
body.theme-dark{
  --bg: #000000; /* oklch(0 0 0) */
  --panel: rgba(15,20,28,0.86);
  --panel-raised: rgba(21,28,39,0.93);
  --panel-sunken: #05070b;
  --line: rgba(148,163,184,0.17);
  --line-strong: rgba(148,163,184,0.34);
  --text: #E8ECF2;
  --text-dim: #A9B4C4;
  --text-faint: #8e9aad;
  --gold: #F2C14E;
  --gold-dim: #C9973F;
  --teal: #34d399;
  --teal-bright: #6ee7b7;
  --red: #e0616a;
  --blue: #60A5FA;
  --saffron: #FF9933;
  --accent: #FF9933;
  --accent-text: #FFAD5C;
  --accent-fill: #FF9933;
  --accent-fill-hover: #FFAD5C;
  --on-accent: #1a0e00;
  --on-positive: #04120f;
  --on-critical: #16060a;
  --accent-tint: rgba(255,153,51,.08);
  --accent-tint-strong: rgba(255,153,51,.14);
  --accent-line: rgba(255,153,51,.24);
  --accent-line-strong: rgba(255,153,51,.62);
  --accent-glow: rgba(255,153,51,.26);
  --accent-glow-soft: rgba(255,153,51,.10);
  --positive-text: #6ee7b7;
  --positive-tint: rgba(52,211,153,.10);
  --positive-glow: rgba(52,211,153,.45);
  --danger-tint: rgba(224,97,106,.12);
  --warning-tint: rgba(242,193,78,.10);
  --focus-ring: #FFAD5C;
  --chrome: rgba(10,13,19,0.86);
  --surface-solid: #111722;
  --alert-surface: #16120f;
  --overlay: rgba(2,4,8,.74);
  --scrim: rgba(8,11,16,.82);
  --tile-grid: rgba(148,163,184,.035);
  --bg-grid-line: rgba(255,255,255,.07); /* ui-layouts backdrop grid, lifted for the pure-black page */
  --cinema-bg: radial-gradient(ellipse at center, #141c28 0%, #080b10 100%);
  --crisis-surface: linear-gradient(180deg, #1a1113, #0f0b0d);
  --crisis-head: linear-gradient(180deg, #1a1113 80%, rgba(26,17,19,0));
}
body.theme-dark .card, body.theme-dark .sector-row, body.theme-dark .invest-row, body.theme-dark .project-card, body.theme-dark .country-row, body.theme-dark .org-card{
  background: var(--panel); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
body.theme-dark .modal{ background: var(--surface-solid); backdrop-filter: blur(14px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-line); }
body.theme-dark .field input[type=number], body.theme-dark .field input[type=range], body.theme-dark .field select, body.theme-dark .field textarea, body.theme-dark #consoleInput{
  background: var(--panel-sunken); border:1px solid var(--line-strong); box-shadow:none;
}
body.theme-dark .rail, body.theme-dark .topbar{ background: var(--chrome); backdrop-filter: blur(10px); }
body.theme-dark .ticker{ background: var(--panel-sunken); }
body.theme-dark .clock, body.theme-dark .btn-outline, body.theme-dark .btn-ghost{ box-shadow:none; }
#themeToggleBtn{ margin-top:0; }

/* ---------- Animation Polish ---------- */
.card, .sector-row, .invest-row, .project-card, .country-row, .org-card{ transition: transform .15s ease, box-shadow .15s ease; }
.card-clickable:hover{ transform: translateY(-2px); }
#mainView{ animation: fadeInView .25s ease; }
@keyframes fadeInView{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.modal{ animation: modalPop .18s ease; }
@keyframes modalPop{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:scale(1); } }
.toast{ animation: toastSlide .2s ease; }
@keyframes toastSlide{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:translateX(0); } }
.btn{ transition: transform .1s ease, box-shadow .1s ease; }
.btn:active{ transform: scale(.97); }
.onboard-card{ animation: modalPop .3s ease; }

/* ---------- Mobile Responsive Pass ---------- */
/* Below ~1190px the topbar-right button row (Morning Brief / $⇄₹ / Help / Search / theme / sound /
   approval trend / clock / Advance Month) is wider than it has room for and needs to wrap — but this
   used to only kick in below 900px, leaving a broken 901-1189px band (real 1024px measurement: the row
   needs ~1190px and was overflowing the viewport by exactly 166px there). Split in two: the wrap rule
   moves up to 1200px (where it's actually needed), while the heavier phone-only changes (rail drawer,
   clock hidden, tighter padding) stay gated at 900px so nothing about the tablet/small-desktop range
   in between gets the phone treatment it doesn't need. */
@media (max-width: 1200px){
  .topbar{ flex-wrap:wrap; }
  .topbar-right{ flex-wrap:wrap; }
}
@media (max-width: 900px){
  .topbar{ padding:10px 14px; }
  .clock{ display:none; }
  .layout{ position:relative; }
  .rail{
    position:fixed; top:0; left:0; bottom:0; z-index:200;
    width:260px; max-width:80vw;
    transform:translateX(-100%); transition:transform .2s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }
  .rail.rail-open{ transform:translateX(0); }
  .rail-scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:190; }
  .rail-scrim.rail-open{ display:block; }
  #railToggleBtn{ display:inline-flex !important; }
  .main{ padding:16px 14px 60px; }
  .grid-4, .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-5{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .modal{ width:94vw; padding:18px; }
  .country-select-grid{ max-height:200px; }
  .onboard-card{ padding:24px 18px; }
}
@media (min-width: 901px){
  #railToggleBtn{ display:none !important; }
  .rail-scrim{ display:none !important; }
}
#railToggleBtn{ display:none; background:none; border:none; color:var(--text); font-size:var(--fs-2xl); cursor:pointer; padding:4px 8px; min-width:44px; min-height:44px; align-items:center; justify-content:center; box-sizing:border-box; }

/* Any invest-row wired to a click handler (data-bizmeet, data-investor, data-commodity,
   or any future data-* action attribute) always shows a pointer cursor, even if a
   future row forgets to set it inline. */
.invest-row[data-bizmeet], .invest-row[data-investor], .invest-row[data-commodity]{ cursor:pointer; }
.invest-row[data-bizmeet]:hover, .invest-row[data-investor]:hover, .invest-row[data-commodity]:hover{ border-color:var(--gold-dim); }

/* Fix top-bar toggle button alignment — consistent height/line-height regardless
   of emoji glyph metrics, and a stable width so they don't jump when the label
   text changes (Dark/Light, On/Off). */
#themeToggleBtn, #soundToggleBtn{
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; height:34px; min-width:118px; box-sizing:border-box;
  vertical-align:middle;
}
.topbar-right{ align-items:center; }

/* ---------- Command Palette (Ctrl+K) ---------- */
.cmdk-overlay{ position:fixed; inset:0; background:var(--overlay); z-index:400; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; }
.cmdk-box{ width:560px; max-width:90vw; background:var(--surface-solid); border:1px solid var(--line-strong); border-top:2px solid var(--accent); border-radius:var(--radius-md,8px); box-shadow:var(--shadow-lg); overflow:hidden; animation:modalPop .15s ease; }
.cmdk-input{ width:100%; padding:18px 20px; font-size:var(--fs-lg); border:none; background:transparent; color:var(--text); outline:none; border-bottom:1px solid var(--line); box-sizing:border-box; }
.cmdk-results{ max-height:360px; overflow-y:auto; padding:8px; }
.cmdk-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; min-height:44px; box-sizing:border-box; border-radius:4px; cursor:pointer; font-size:var(--fs-md); }
.cmdk-item.active{ background:var(--accent-fill); color:var(--on-accent); }
.cmdk-item .cmdk-cat{ font-size:var(--fs-2xs); color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.cmdk-item.active .cmdk-cat{ color:var(--on-accent); opacity:.8; }
.cmdk-empty{ padding:20px; text-align:center; color:var(--text-faint); font-size:var(--fs-base); }
body.theme-dark .cmdk-box{ background:var(--surface-solid); box-shadow:var(--shadow-lg); }
body.theme-dark .cmdk-input{ color:var(--text); }

/* ---------- Global Relations Orbit (Diplomacy signature visual, v11.12) ----------
   India at centre; each tracked country sits in its continent's wedge, positioned by
   angle (continent order) and radius (relation score — closer = stronger). Pure SVG,
   no external map assets, reads the same STATE.diplomacy data as the list below it. */
.orbit-card{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:20px 16px 16px; background:radial-gradient(circle at 50% 42%, var(--accent-tint), transparent 60%), var(--panel); }
.relations-orbit{ width:100%; max-width:520px; height:auto; overflow:visible; }
.orbit-boundary{ fill:var(--accent-tint); stroke:var(--line); stroke-width:1; }
.orbit-ring{ fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 4; opacity:.6; }
.orbit-ring-label{ font-family:var(--mono); font-size:var(--fs-2xs); fill:var(--text-faint); }
.orbit-sector-label{ font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.04em; fill:var(--text-dim); text-transform:uppercase; }
.orbit-centre circle{ fill:var(--panel-raised); stroke:var(--gold); stroke-width:1.5; }
.orbit-centre text{ font-size:var(--fs-lg); text-anchor:middle; }
.orbit-node circle{ stroke:var(--bg); stroke-width:1.5; cursor:pointer; transition:r .12s ease, opacity .12s ease; opacity:.9; }
.orbit-node:hover circle{ opacity:1; stroke:#fff; }
.orbit-node--teal circle{ fill:var(--teal); }
.orbit-node--gold circle{ fill:var(--gold); }
.orbit-node--red circle{ fill:var(--red); }
.orbit-node--crisis circle{ fill:var(--red); animation:orbitPulse 1.6s ease-in-out infinite; }
@keyframes orbitPulse{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(178,69,75,.6)); } 50%{ filter:drop-shadow(0 0 5px rgba(178,69,75,.9)); } }
.orbit-legend{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-dim); }
.orbit-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.orbit-dot--teal{ background:var(--teal); }
.orbit-dot--gold{ background:var(--gold); }
.orbit-dot--red{ background:var(--red); }
.orbit-dot--crisis{ background:var(--red); animation:orbitPulse 1.6s ease-in-out infinite; }
.orbit-legend-note{ color:var(--text-faint); width:100%; text-align:center; margin-top:2px; }
@media (max-width:640px){ .orbit-sector-label{ font-size:var(--fs-2xs); } }
.orbit-pm-line{ stroke:var(--line); stroke-width:1; opacity:.5; }
.orbit-tension-line{ stroke:var(--red); opacity:.55; }
.gpr-ally-line{ stroke:var(--teal); stroke-width:1.4; opacity:.5; }
.gpr-rival-line{ stroke:var(--red); stroke-width:1.4; opacity:.5; stroke-dasharray:4 3; }

/* ---------- GDP Sector Wheel (Domestic Economy signature visual, v11.12) ----------
   Companion to the Diplomacy Global Relations Orbit above — same visual family, same
   red/gold/teal tier language, applied to sector share/growth instead of relations. */
.gdp-wheel{ width:100%; max-width:340px; height:auto; margin:0 auto; display:block; }
.wheel-slice{ stroke:var(--bg); stroke-width:1.5; cursor:default; transition:opacity .12s ease; }
.wheel-slice:hover{ opacity:.82; }
.wheel-slice--teal{ fill:var(--teal); }
.wheel-slice--gold{ fill:var(--gold); }
.wheel-slice--red{ fill:var(--red); }
.wheel-centre-value{ font-family:var(--mono); font-size:var(--fs-2xl); font-weight:700; fill:var(--text); text-anchor:middle; }
.wheel-centre-label{ font-family:var(--mono); font-size:var(--fs-2xs); fill:var(--text-faint); text-anchor:middle; text-transform:uppercase; letter-spacing:.05em; }

/* ============================================================
   v11.14 — Next-gen UX pass: approval sparkline, Crisis Room
   cinematic takeover, and general micro-interaction polish.
   ============================================================ */

/* ---- Topbar approval trend sparkline ---- */
.approval-trend{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:3px; padding:6px 12px; background: var(--panel); }
.approval-trend svg{ width:64px; height:24px; display:block; }
.approval-trend svg polyline{ transition: stroke .3s ease; }
#approvalTrendLabel{ font-family: var(--mono); font-size:var(--fs-sm); font-weight:600; min-width:34px; text-align:right; }

/* ---- Crisis Room: full-screen cinematic takeover for Critical-severity crises ---- */
.crisis-room-backdrop{
  position: fixed; inset: 0; z-index: 500;
  background: radial-gradient(ellipse at center, rgba(20,10,10,.55) 0%, rgba(5,3,3,.92) 100%);
  backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  animation: crisis-room-fade .35s ease;
}
.crisis-room-card{
  max-width: 760px; width:100%;
  background: var(--crisis-surface);
  border: 2px solid; border-radius: 10px;
  padding: 28px 32px 24px;
  box-shadow: 0 0 0 1px rgba(178,69,75,.15), 0 24px 80px rgba(0,0,0,.6);
  animation: crisis-room-pulse 2.4s ease-in-out infinite, crisis-room-rise .4s cubic-bezier(.2,.8,.2,1);
}
.crisis-room-eyebrow{
  font-family: var(--mono); font-size:var(--fs-xs); letter-spacing:.14em; color: var(--red);
  display:flex; align-items:center; justify-content:space-between; text-transform:uppercase;
}
.crisis-room-clock{ font-family: var(--mono); color: var(--text-dim); letter-spacing:.05em; }
.crisis-room-title{ font-family: var(--serif); font-size:var(--fs-2xl); font-weight:700; margin-top:12px; line-height:1.3; }
.crisis-room-text{ color: var(--text-dim); font-size:var(--fs-md); line-height:1.6; margin-top:10px; max-width:680px; }
.crisis-room-dossier{ margin-top:16px; padding:14px 16px; background: var(--panel-sunken); border:1px solid var(--line); border-radius:6px; }
.crisis-room-dossier-row{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; font-size:var(--fs-base); line-height:1.55; color: var(--text-dim); }
.crisis-room-dossier-row:last-child{ margin-bottom:0; }
.crisis-room-dossier-label{ font-family: var(--mono); font-size:var(--fs-2xs); letter-spacing:.1em; color: var(--red); text-transform:uppercase; }
.crisis-room-minimize{ margin-top:16px; opacity:.7; }
.crisis-room-minimize:hover{ opacity:1; }
@keyframes crisis-room-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes crisis-room-rise{ from{ opacity:0; transform: translateY(14px) scale(.98); } to{ opacity:1; transform: translateY(0) scale(1); } }
@keyframes crisis-room-pulse{ 0%,100%{ box-shadow: 0 0 0 1px rgba(178,69,75,.15), 0 24px 80px rgba(0,0,0,.6); } 50%{ box-shadow: 0 0 0 1px rgba(178,69,75,.4), 0 0 40px rgba(178,69,75,.25), 0 24px 80px rgba(0,0,0,.6); } }

/* ---- General micro-interaction polish ---- */
.card, .sector-row, .project-card, .invest-row{ transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.card-clickable:hover, .sector-row:hover, .invest-row:hover{ box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.btn{ transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.btn:active{ transform: scale(.97); }
.btn-primary:hover{ filter: brightness(1.08); }
.crisis-option-btn{ transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.crisis-option-btn:hover{ transform: translateY(-1px); background: var(--accent-tint); }
.rail-btn{ transition: background .15s ease, color .15s ease; }

/* Slim, low-contrast scrollbars in the app chrome instead of default OS scrollbars */
.rail::-webkit-scrollbar, #mainView::-webkit-scrollbar{ width:8px; }
.rail::-webkit-scrollbar-thumb, #mainView::-webkit-scrollbar-thumb{ background: var(--line); border-radius:4px; }
.rail::-webkit-scrollbar-track, #mainView::-webkit-scrollbar-track{ background: transparent; }

/* ---- Voter Groups sentiment heatmap ---- */
.heatmap-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.heatmap-tile{
  flex-basis: 110px; flex-shrink:0;
  border:1px solid; border-radius:6px; padding:12px 10px;
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.heatmap-tile:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.heatmap-icon{ font-size:var(--fs-xl); }
.heatmap-name{ font-size:var(--fs-xs); color: var(--text-dim); line-height:1.25; }
.heatmap-val{ font-family: var(--mono); font-weight:700; font-size:var(--fs-lg); }

/* ---- Cinematic opening sequence (plays once after "Begin Term") ---- */
.cinematic-intro{
  position: fixed; inset:0; z-index: 900;
  background: var(--cinema-bg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  animation: cinematic-in .5s ease;
}
.cinematic-intro.cinematic-fadeout{ animation: cinematic-out .38s ease forwards; }
@keyframes cinematic-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes cinematic-out{ from{ opacity:1; } to{ opacity:0; } }
.cinematic-stage{ text-align:center; max-width: 640px; padding: 0 24px; }
.cinematic-seal{ font-size:48px; opacity:0; animation: cin-seal 1s ease forwards .1s; }
.cinematic-title{
  font-family: var(--serif); font-weight:700; font-size:56px; letter-spacing:.08em;
  color: var(--gold); margin-top:10px;
  opacity:0; animation: cin-rise 1s ease forwards .5s;
}
.cinematic-sub{
  font-family: var(--mono); font-size:var(--fs-sm); letter-spacing:.22em; text-transform:uppercase;
  color: var(--text-dim); margin-top:6px;
  opacity:0; animation: cin-rise 1s ease forwards .9s;
}
.cinematic-line{
  font-family: var(--serif); font-size:var(--fs-lg); color: var(--text); margin-top:32px; line-height:1.5;
  opacity:0; animation: cin-rise 1s ease forwards 1.9s;
}
.cinematic-line-2{
  font-size:var(--fs-base); color: var(--text-faint); margin-top:8px;
  animation-delay: 2.5s;
}
.cinematic-skip{
  position:absolute; bottom:28px; left:0; right:0; text-align:center;
  font-family: var(--mono); font-size:var(--fs-xs); color: var(--text-faint); letter-spacing:.05em;
  opacity:0; animation: cin-rise .8s ease forwards 1.4s;
}
@keyframes cin-seal{ from{ opacity:0; transform: scale(.7); } to{ opacity:1; transform: scale(1); } }
@keyframes cin-rise{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }

/* ---- Election Night: full-screen state-by-state results sequence ---- */
.election-night{
  position: fixed; inset:0; z-index: 800;
  background: var(--cinema-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 24px; cursor:pointer;
  animation: cinematic-in .4s ease;
}
.election-night.election-night-fadeout{ animation: cinematic-out .38s ease forwards; }
.election-night-head{ width:100%; max-width:520px; text-align:center; margin-bottom:14px; }
.election-night-eyebrow{ font-family: var(--mono); font-size:var(--fs-xs); letter-spacing:.14em; color: var(--gold); text-transform:uppercase; }
.election-night-tally{ display:flex; align-items:center; justify-content:center; gap:28px; margin-top:10px; }
.tally-block{ text-align:center; }
.tally-num{ font-family: var(--serif); font-size:var(--fs-3xl); font-weight:700; line-height:1; }
.tally-label{ font-size:var(--fs-xs); color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.tally-majority{ font-family: var(--mono); font-size:var(--fs-xs); color: var(--text-dim); }
.election-night-map{ width:100%; max-width:480px; height:auto; max-height:44vh; }
.election-night-latest{ font-family: var(--serif); font-size:var(--fs-lg); color: var(--text); margin-top:14px; min-height:22px; text-align:center; }
.election-night-skip{ font-family: var(--mono); font-size:var(--fs-xs); color: var(--text-faint); margin-top:10px; letter-spacing:.05em; }

/* ---- Advance Month sequence: fast processing checklist -> Month Complete briefing ----
   Same idiom as .election-night (full-screen, click/skip-to-end, fades into the ordinary
   dashboard render) but z-index sits BELOW #modalOverlay (100) on purpose — the results
   screen's metric tiles use the existing [data-why] hook, which opens the small modal via
   showModal(), and that modal must be able to paint on top of this screen. */
.advmonth{
  position: fixed; inset:0; z-index: 95;
  background: var(--cinema-bg);
  display:flex; align-items:center; justify-content:center;
  padding:24px; cursor:pointer;
  animation: cinematic-in .35s ease;
}
.advmonth.advmonth-fadeout{ animation: cinematic-out .32s ease forwards; }
.advmonth-processing{ text-align:center; max-width:420px; }
.advmonth-eyebrow{ font-family: var(--mono); font-size:var(--fs-xs); letter-spacing:.18em; color: var(--gold); text-transform:uppercase; margin-bottom:18px; }
.advmonth-stage{ font-family: var(--serif); font-size:var(--fs-lg); color: var(--text-faint); padding:7px 0; opacity:.4; transition:opacity .25s ease, color .25s ease; }
.advmonth-stage.advmonth-stage-done{ opacity:1; color: var(--text); }
.advmonth-stage.advmonth-stage-done .advmonth-check{ color: var(--teal); }
.advmonth-check{ display:inline-block; width:18px; color:transparent; }
.advmonth-skip{ font-family: var(--mono); font-size:var(--fs-xs); color: var(--text-faint); margin-top:20px; letter-spacing:.05em; }
.advmonth-results{
  width:100%; max-width:640px; max-height:88vh; overflow-y:auto; cursor:default;
  background: var(--surface-solid); backdrop-filter: blur(14px); border:1px solid var(--line-strong); border-top:2px solid var(--accent);
  border-radius:8px; padding:28px; box-shadow: var(--shadow-lg);
  animation: cin-rise .35s ease;
}
.advmonth-results-title{ font-family: var(--serif); font-size:var(--fs-2xl); color: var(--gold); }
.advmonth-results-sub{ font-family: var(--mono); font-size:var(--fs-xs); color: var(--text-dim); margin-top:4px; margin-bottom:18px; }
.advmonth-metrics{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-bottom:18px; }
.advmonth-metric{
  background: var(--panel-raised); border:1px solid var(--line); border-radius:6px; padding:10px 12px;
  cursor:pointer; text-align:left; transition:border-color .15s ease, transform .15s ease;
}
.advmonth-metric:hover{ border-color: var(--line-strong); transform: translateY(-1px); }
.advmonth-metric-label{ font-size:var(--fs-xs); color: var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.advmonth-metric-value{ font-family: var(--mono); font-weight:700; font-size:var(--fs-lg); margin-top:4px; }
.advmonth-metric-delta{ font-family: var(--mono); font-size:var(--fs-xs); margin-top:2px; }
.advmonth-metric-hint{ font-size:var(--fs-2xs); color: var(--text-faint); margin-top:3px; }
.advmonth-section-title{ font-family: var(--mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); margin:16px 0 8px; }
.advmonth-mover-row{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); font-size:var(--fs-base); }
.advmonth-briefing{ font-family: var(--serif); font-size:var(--fs-base); line-height:1.65; color: var(--text-dim); margin-top:6px; }
.advmonth-continue{ width:100%; margin-top:20px; }
@media (max-width: 640px){ .advmonth-metrics{ grid-template-columns: repeat(2, 1fr); } }

/* ---- Chart System: reusable time-range control (Master Prompt §18-20) ----
   One small button row, dropped above any Chart.js trend chart via chartRangeButtonsHtml()
   (js/app.js) instead of being rebuilt per module. */
.chart-range-controls{ display:flex; gap:4px; margin-bottom:8px; }
.chart-range-btn{
  font-family: var(--mono); font-size:var(--fs-xs); letter-spacing:.03em; padding:3px 9px;
  background:transparent; border:1px solid var(--line); border-radius:4px; color: var(--text-faint);
  cursor:pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chart-range-btn:hover{ border-color: var(--line-strong); color: var(--text-dim); }
.chart-range-btn.active{ background: var(--accent-fill); border-color: var(--accent-fill); color:var(--on-accent); font-weight:600; }

/* ---- Chart card header (Phase 4): title / current value / delta / one-line trend read ----
   Dropped via chartCardHeaderHtml() (js/app.js) above a trend chart's range buttons + canvas.
   Deliberately plain — numbers and one sentence, no extra chrome — matching the restrained,
   data-first tone of the rest of the dashboard rather than introducing a new visual language. */
.chart-card-header{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:6px; }
.chart-card-title{ font-size:var(--fs-sm); font-weight:600; color: var(--text-dim); flex-basis:100%; }
.chart-card-value{ font-family: var(--mono); font-size:var(--fs-lg); font-weight:600; color: var(--text); }
.chart-card-delta{ font-family: var(--mono); font-size:var(--fs-xs); }
.chart-card-read{ font-size:var(--fs-xs); color: var(--text-faint); flex-basis:100%; }

/* =====================================================================================
   v38 — DESIGN-SYSTEM CORRECTIONS + TYPE SCALE (UI/UX Master Prompt §5, §7, §71, §89)
   Found by loading the real app in a real browser (Chromium) and scanning every screen:
   the light-theme "neumorphic" overrides further up (buttons, progress-bar tracks, clock,
   toasts, rail highlight, onboarding cards) were never given dark-theme counterparts, so in
   the DEFAULT dark theme every outline/ghost button (every group-screen tab bar!) rendered
   as a pale grey slab with near-white text (measured contrast 1.12:1), progress-bar tracks
   were white, and the first-run tutorial's heading was white-on-white. --text-faint also
   measured 3.4:1 (needs 4.5:1) on ~700 labels. All fixes below are dark-theme-only or token
   changes — the light theme is untouched apart from a contrast bump to --text-faint.
   ===================================================================================== */
body.theme-dark .btn-ghost, body.theme-dark .btn-outline{ background:transparent; }
body.theme-dark .btn-outline:hover{ background:var(--accent-tint); }
body.theme-dark .btn-ghost{ color:var(--text-dim); }
body.theme-dark .clock{ background:var(--panel-raised); border:1px solid var(--line-strong); }
body.theme-dark .bar{ background:var(--panel-sunken); box-shadow:none; border:1px solid var(--line); }
body.theme-dark .toast{ background:var(--surface-solid); border:1px solid var(--line-strong); border-left:3px solid var(--accent); box-shadow:var(--shadow-md); }
body.theme-dark .rail{ border-right-color:var(--line); }
body.theme-dark .rail-btn:hover{ background:var(--accent-tint); box-shadow:none; }
body.theme-dark .rail-btn.active{ background:var(--accent-tint-strong); box-shadow:inset 2px 0 0 var(--accent); color:var(--accent-text); }
body.theme-dark .rail-btn.active .rail-num{ color:var(--accent-text); }
body.theme-dark .country-pick:hover{ background:var(--accent-tint); }
body.theme-dark select optgroup, body.theme-dark select option{ background:var(--surface-solid); color:var(--text); }
body.theme-dark ::-webkit-scrollbar-track{ background:var(--bg); }
body.theme-dark ::-webkit-scrollbar-thumb{ background:var(--line-strong); }
/* Onboarding cards (tutorial, guided first move, setup): dark surface + readable text in dark theme. */
body.theme-dark .onboard-card{ background:var(--surface-solid); border:1px solid var(--line-strong); border-top:2px solid var(--accent); box-shadow:var(--shadow-lg); }
body.theme-dark .onboard-title{ color:var(--text); }
body.theme-dark .onboard-field input, body.theme-dark .onboard-field select{ background:var(--panel-sunken); border:1px solid var(--line-strong); box-shadow:none; color:var(--text); }
body.theme-dark .onboard-btn-disabled{ background:var(--panel-sunken); }
body.theme-dark .onboard-btn-secondary{ background:transparent; color:var(--text); box-shadow:none; border:1px solid var(--line-strong); }
.onboard-btn-secondary{ background:transparent; color:var(--text); box-shadow:none; border:1px solid var(--line-strong); }

/* ---------- Type scale (single source of truth for font sizes) ----------
   Before: 20 distinct sizes (7, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14 ...) picked ad hoc
   inside inline styles. Now: 9 named steps. render.js/app.js inline `font-size:Npx` values were
   snapped to these tokens (nearest step), so a future change to the scale is one edit here. */
:root{
  /* v40: compact but readable — nothing below 12px, headings only a little bigger than text. */
  --fs-2xs:12px;   /* micro meta: footnotes, chart axis captions (12px floor) */
  --fs-xs:12px;    /* labels, badges, table headers, hints */
  --fs-sm:13px;    /* secondary body, list detail */
  --fs-base:14px;  /* default body */
  --fs-md:14px;    /* emphasised body, card titles */
  --fs-lg:16px;    /* section titles */
  --fs-xl:18px;    /* modal headings, card headline numbers */
  --fs-2xl:26px;   /* key numbers (approval, GDP …) */
  --fs-3xl:28px;   /* hero numbers */
  --fs-title:23px; /* page title */
  --lh-tight:1.15; --lh-body:1.4;
  --ls-label:.06em;
}
/* Numbers should read as numbers: tabular figures so columns and animated values don't jitter. */
.stat-value, .num, [data-count], .rail-num, .clock, .ticker-track, table td, .hero-num{ font-variant-numeric: tabular-nums; }
/* Metric hierarchy: a value is the loudest thing on its card, its label is quiet and always the same. */
.stat-label{ font-size:var(--fs-xs); letter-spacing:var(--ls-label); }
.stat-value{ line-height:var(--lh-tight); }

/* Header: keep the title on one line and the action buttons from wrapping (was wrapping to 2 lines at 1440px). */
.topbar .title, .topbar-right .btn{ white-space:nowrap; }
.topbar-right{ gap:10px; }
@media (max-width:1700px){ .topbar .title{ font-size:var(--fs-lg); } .topbar-right .btn-small{ padding:6px 9px; } }
@media (max-width:1300px){ .topbar-right .approval-trend{ display:none; } }
body.theme-dark .btn-primary, body.theme-dark .onboard-btn-primary{ box-shadow:0 0 16px var(--accent-glow); }
#themeToggleBtn, #soundToggleBtn{ padding:6px 9px; font-size:var(--fs-xs); height:auto; min-width:104px; }
.bar-fill.gold{ background:var(--gold); box-shadow:none; }

/* v40: primary buttons in BOTH themes are a saffron fill with near-black ink (--accent-fill / --on-accent:
   light #e07b00 on #1a0e00 = 6.3:1, dark #FF9933 on #1a0e00 = 8.9:1). The old light-only dark-orange
   gradient + white text override is gone; the selectors stay so nothing that targets them breaks. */
body:not(.theme-dark) .btn-primary, body:not(.theme-dark) .onboard-btn-primary{ background:var(--accent-fill); color:var(--on-accent); }
body:not(.theme-dark) .btn-primary:hover{ background:var(--accent-fill-hover); }
body.theme-dark .btn-primary, body.theme-dark .onboard-btn-primary{ color:var(--on-accent); }
body:not(.theme-dark) .chart-range-btn.active{ color:var(--on-accent); }
/* The in-game 3D globe backdrop in the LIGHT theme (v40 — was a 0.10 watermark the player could barely see).
   It is now a real, clearly visible layer: 0.46 opacity, multiplied INTO the paper (mix-blend-mode:multiply) so
   the Earth reads as dark ink on light slate instead of a washed-out photo, with a contrast/saturation lift so
   coastlines and the terminator stay crisp. Multiply also drops the additive halo/stars (light-on-light smudges).
   Text never sits on the bare globe: cards are opaque in this theme and every free-standing heading row gets the
   --scrim plate (see the v40 block at the end of this file), so body-text contrast is unaffected.
   Inline opacity from GLOBE_STYLES (js/app.js) -> needs !important. */
body:not(.theme-dark) #gameplayMapBgCanvas{ opacity:.46 !important; mix-blend-mode:multiply; filter:saturate(1.3) contrast(1.22); }
body:not(.theme-dark) #gameplayMapBgCanvas.bg-globe-suspended{ opacity:0 !important; }
@media (max-width:900px){ body:not(.theme-dark) #gameplayMapBgCanvas{ filter:none; } } /* phones: skip the per-frame CSS filter pass */

/* Nav attention badge (§87): a count of HIGH/CRITICAL decision-queue items living in that section. */
.rail-btn{ position:relative; }
.rail-badge{ margin-left:auto; flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:var(--fs-2xs); font-weight:700; line-height:1; background:var(--gold); color:#1a1206; }
.rail-badge-critical{ background:var(--red); color:var(--on-critical); }
body:not(.theme-dark) .rail-badge{ color:#fff; }

/* ---------- Entity inspector drawer (§78-80) ---------- */
.entity-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(470px,100vw); z-index:90; display:flex; flex-direction:column;
  background:var(--panel); border-left:1px solid var(--line-strong); box-shadow:-18px 0 44px rgba(0,0,0,.38);
  transform:translateX(102%); visibility:hidden; transition:transform .22s ease, visibility 0s linear .22s; }
.entity-drawer.open{ transform:none; visibility:visible; transition:transform .22s ease, visibility 0s; }
.ed-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.ed-label{ flex:1; font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-faint); }
.ed-close{ font-size:var(--fs-xl); line-height:1; padding:2px 10px; min-width:44px; box-sizing:border-box; }
.ed-body{ flex:1 1 auto; overflow-y:auto; padding:16px 18px 28px; }
.ed-body h2{ font-family:var(--serif); font-size:var(--fs-xl); margin:0 0 4px; }
.ed-body .modal-sub{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-dim); margin-bottom:16px; }
body:not(.theme-dark) .entity-drawer{ box-shadow:-14px 0 34px rgba(15,28,48,.18); }
.ed-chip{ display:inline-block; margin:2px 6px 2px 0; padding:3px 9px; border:1px solid var(--line-strong); border-radius:12px; font-size:var(--fs-xs); background:transparent; color:var(--text); cursor:pointer; }
.ed-chip:hover{ background:var(--accent-tint); }
[data-entity]{ cursor:pointer; }
@media (prefers-reduced-motion: reduce){ .entity-drawer, .entity-drawer.open{ transition:none; } }
@media (max-width:700px){ .entity-drawer{ width:100vw; } }

/* The dark --panel token is translucent (cards sit over the globe); the drawer floats over live content so it needs a solid surface. */
body.theme-dark .entity-drawer{ background:var(--surface-solid); }
body:not(.theme-dark) .entity-drawer{ background:var(--surface-solid); }

/* Synchronized-crosshair readout next to a sparkline (§21). */
.spark-wrap{ display:flex; align-items:center; gap:8px; }
.spark-wrap svg{ flex:0 0 auto; }
.spark-readout{ min-width:0; white-space:pre-line; line-height:1.2; font-family:var(--mono); font-size:var(--fs-2xs); color:var(--gold); pointer-events:none; }
body:not(.theme-dark) .spark-readout{ color:var(--gold-dim); }
svg.spark-sync{ cursor:crosshair; }
.spark-readout-block{ display:block; margin-top:3px; min-height:1.25em; white-space:normal; }

/* Cabinet orbit labels (walkthrough fix): readable names/portfolios beside each minister node. */
.orbit-node-label{ fill:var(--text); font-weight:600; paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round; }
.orbit-node-sub{ fill:var(--text-dim); paint-order:stroke; stroke:var(--bg); stroke-width:3px; stroke-linejoin:round; }
.orbit-node{ cursor:pointer; }
.orbit-centre text{ fill:var(--gold); font-weight:700; }
/* `var(--border)` is used in 12 inline styles in render.js but was never defined anywhere, so those dividers silently rendered no border.
   Alias it to the real divider token, per theme (a custom property resolves where it is declared, so it must be re-declared on body.theme-dark). */
:root{ --border:var(--line); }
body.theme-dark{ --border:var(--line); }

/* ---------- Globe look selector (v38.4) ---------- the page background stays the game's own; only the Earth changes. */
body[data-globe="off"] #gameplayMapBgCanvas{ display:none !important; }
#globeStyleBtn{ width:100%; margin-bottom:6px; }

/* =====================================================================================
   v38.12 — PHASE 2: DESIGN SYSTEM TOKENS (spacing / radius / shadow / semantic colour)
   Additive, same discipline as the v38 type-scale block above: define named tokens, then
   point EXISTING selectors at them so the visual result is either unchanged (a token that
   captures a value already in use) or a small, deliberate, documented adjustment (noted
   inline below) — never a silent redesign. No selector was renamed and no Card2/Modal2 was
   created; §"Component System" of the Phase 2 brief is served by reusing .card/.modal/.btn/
   .tag everywhere, now drawing from one shared scale instead of ad hoc per-rule numbers.
   Full per-screen visual pass (§"Data Density", per-component hover/press/loading states
   beyond what already existed) is NOT attempted in this round — 96 screens' worth of inline
   styles in render.js is a scope for its own future phase; see CHANGELOG.md v38.12 for the
   explicit list of what this pass did and did not touch.
   ===================================================================================== */
:root{
  /* SPACING — one scale for gaps/padding/margins. Was 30+ ad hoc pixel values (8,9,10,12,
     14,16,18,20,22,24,26...) across the stylesheet; new call sites should use these, and the
     handful of spots below where an existing value matched a step exactly now reference it. */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;

  /* RADIUS — was 6 distinct raw values (3,4,5,6,8,12px) with no relationship to each other.
     sm covers small controls (buttons, tags, chips), md covers content surfaces (cards,
     modals, rows), lg is reserved for large/hero surfaces, pill for fully-rounded badges. */
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;

  /* SEMANTIC COLOUR — names what each existing colour MEANS, so a future component can ask
     for "the critical colour" instead of reaching for --red by convention/memory. These are
     aliases onto the SAME palette values already in use everywhere (zero visual change on
     their own) — the point is giving the existing meaning a name, not introducing new hues. */
  --success: var(--teal);         /* approvals, positive deltas, "on track" */
  --warning: var(--gold);         /* caution, needs-attention, secondary emphasis */
  --critical: var(--red);         /* crises, rejections, active conflict, danger */
  --info: var(--blue);            /* neutral informational callouts */
  --neutral: var(--text-dim);     /* inactive/default state text */
  /* --accent is a per-theme palette token since v40 (saffron, the primary action colour) — see the two theme blocks. */
}
/* SHADOW — dark-theme only. Light theme keeps its own established neumorphic shadow system
   (untouched by this pass, per the brief's "don't just invert the dark design" instruction —
   that work predates this phase and is a deliberately different, already-complete language).
   Three restrained depth steps replace the ad hoc rgba(0,0,0,.25/.35/.5/.55/.6) values that
   had accumulated with no relationship to each other. */
body.theme-dark{
  --shadow-sm: 0 2px 8px rgba(0,0,0,.28);
  --shadow-md: 0 8px 24px rgba(0,0,0,.40);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.55);
}
/* :root fallback so these resolve even before body.theme-dark is applied (e.g. the very first
   paint, before applyTheme() runs) — same values, since dark is this app's default theme. */
/* v40: the :root fallback that used to repeat the dark shadows here was removed — it came after the light theme block
   and silently gave the light theme heavy black shadows. Light shadows now live in the light token block. */

/* ---- Radius scale applied to existing shared surfaces (values below are UNCHANGED or the
        nearest scale step — see inline note on any that shift by more than 1-2px) ---- */
.btn{ border-radius: var(--radius-sm); }                 /* was 3px -> 4px, imperceptible */
.rail-btn{ border-radius: var(--radius-sm); }             /* was 4px, exact */
.tag{ border-radius: var(--radius-sm); }                  /* was 3px -> 4px, imperceptible */
.toast{ border-radius: var(--radius-sm); }                /* was 4px, exact */
.card{ border-radius: var(--radius-md); }                 /* was 6px -> 8px, slightly softer corners, deliberate */
.invest-row{ border-radius: var(--radius-sm); }           /* was 5px -> 4px, imperceptible */
.crisis-option-btn{ border-radius: var(--radius-sm); }    /* was 5px -> 4px, imperceptible */
.modal{ border-radius: var(--radius-md); }                /* was 8px, exact */

/* ---- Spacing scale applied where an existing value matched a step exactly (no visual change) ---- */
.grid{ gap: var(--space-4); }                             /* was 16px, exact */

/* ---- Semantic colour applied to the components whose whole job IS to carry that meaning ----
   (background-colour identical to before in every case — --success/--critical alias the same
   --teal/--red values already used here, so this documents intent without changing pixels) */
.btn-approve{ background: var(--success); }
.btn-reject{ border-color: var(--critical); color: var(--critical); }
.rail-badge-critical{ background: var(--critical); }

/* ---- Dark-mode atmospheric layering (Phase 2 "the information must remain primary") ----
   The Holo-Earth backdrop's default (Night Lights) opacity was 0.95 — bright enough to compete
   with foreground text through every card's translucent surface. Dimmed all three dark-theme
   globe looks (Off is unaffected — it's already invisible) and gave --panel/--panel-raised a
   touch more opacity so content surfaces read as clearly "in front of" the globe rather than
   floating over it at equal visual weight. Values chosen conservatively: the globe is still
   fully visible and still animates — it's dimmer and content is more legible, not one traded
   for the other. GLOBE_STYLES opacity numbers live in js/app.js (see CHANGELOG v38.12); this
   rule is the corresponding panel-legibility half of the same change. */
body.theme-dark{ --panel: rgba(15,20,28,0.86); --panel-raised: rgba(21,28,39,0.93); } /* v40: kept in step with the theme block */

/* ---- Phase 6 — India Map / World Map interactive control bar, legend, and mobile fallback ----
   Shared by renderIndiaMap() and renderWorldMap() in render.js. Kept as one small block rather
   than scattered inline styles because both maps use the exact same control-bar/legend/mobile
   grammar on purpose (see the "ONE consistent visual grammar" note above renderWorldMap). */
.map-controlbar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 18px; margin-bottom:12px; padding:10px 12px; background:var(--panel-raised); border:1px solid var(--line); border-radius:8px; }
.map-control{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.map-control label, .map-control-label{ font-size:var(--fs-2xs); color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.map-control select{ background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:5px 8px; font-size:var(--fs-sm); font-family:var(--sans); min-height:32px; }
.map-toggle-pair{ display:flex; gap:6px; }

.india-map-svg-scroller{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:8px; }
.india-map-list{ display:none; flex-direction:column; gap:6px; margin-top:10px; max-height:420px; overflow-y:auto; }
.india-map-list-row{ padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--panel); cursor:pointer; min-height:44px; box-sizing:border-box; }
.india-map-list-row:hover, .india-map-list-row:focus-visible{ border-color:var(--accent-line-strong); }

.india-map-tile rect, .india-map-tile circle{ transition:opacity .12s ease; }
.india-map-tile:hover rect, .india-map-tile:focus-visible rect{ opacity:.85; }
.world-map-tile circle{ transition:opacity .12s ease; }
.world-map-tile:hover, .world-map-tile:focus-visible{ opacity:.85; }
.india-map-tile:focus-visible, .world-map-tile:focus-visible, .india-map-list-row:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

.map-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:var(--fs-xs); color:var(--text-dim); border-top:1px solid var(--line); padding-top:10px; }
.map-legend b{ color:var(--text); font-weight:600; }

/* Mobile: a genuinely different layout, not the desktop map shrunk — the ranked list becomes
   primary and the SVG (still reachable by horizontal scroll on the map's own scroller) steps back. */
@media (max-width:640px){
  .india-map-svg-scroller{ display:none; }
  .india-map-list{ display:flex; }
  .map-controlbar{ gap:10px 14px; padding:8px 10px; }
}
@media (prefers-reduced-motion: reduce){
  .india-map-tile rect, .india-map-tile circle, .world-map-tile circle, .india-map-list-row{ transition:none; }
}

/* ---- Phase 7 — Global Command View (js/command-globe.js) ----
   The globe stage + its analytical side panel. Built only from existing tokens so it reads as the
   same RASHTRA surface as every card; the stage keeps a deep-space background in BOTH themes
   because a lit planet needs darkness around it to read as a planet. */
.cg-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--space-4); align-items:stretch; }
.cg-stage{ position:relative; min-height:520px; height:min(64vh, 640px); border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--line); background:radial-gradient(ellipse at 50% 46%, #0d2230 0%, #07121a 48%, #03070a 100%);
  box-shadow: inset 0 0 80px rgba(0,0,0,.55); isolation:isolate; }
.cg-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none; opacity:0; transition:opacity .5s ease; outline:none; }
.cg-stage.cg-ready .cg-canvas{ opacity:1; }
.cg-canvas:focus-visible{ box-shadow: inset 0 0 0 2px var(--focus-ring); }
.cg-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:var(--fs-xs);
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); pointer-events:none; transition:opacity .4s ease; }
.cg-stage.cg-ready .cg-loading{ opacity:0; }
.cg-hud{ position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.cg-hud-btn{ width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:rgba(5,12,16,.72); color:#E7F5F2;
  font-size:var(--fs-lg); line-height:1; backdrop-filter:blur(6px); transition:background .15s ease, border-color .15s ease, transform .1s ease; }
.cg-hud-btn:hover{ border-color:#FF9933; background:rgba(255,153,51,.18); }
.cg-hud-btn:active{ transform:scale(.94); }
.cg-caption{ position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase;
  color:rgba(231,245,242,.72); background:rgba(3,7,10,.55); padding:5px 9px; border-radius:var(--radius-sm); pointer-events:none; }
.cg-tooltip{ position:absolute; z-index:3; max-width:240px; pointer-events:none; padding:8px 10px; border-radius:var(--radius-sm);
  background:rgba(4,10,14,.92); border:1px solid var(--line-strong); color:#E7F5F2; font-size:var(--fs-xs); line-height:1.45; box-shadow:var(--shadow-md); }
.cg-tooltip b{ display:block; font-size:var(--fs-sm); margin-bottom:2px; }
.cg-tooltip .cg-tip-alert{ color:#ff9aa1; margin-top:3px; }
.cg-tooltip .cg-tip-ev{ color:#ffd27a; margin-top:3px; }
.cg-tooltip .cg-tip-hint{ color:rgba(231,245,242,.55); margin-top:4px; font-size:var(--fs-2xs); }

.cg-panel{ background:var(--panel-raised); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-4); display:flex; flex-direction:column;
  gap:12px; max-height:min(64vh, 640px); min-height:520px; overflow:auto; }
.cg-eyebrow{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); }
.cg-title{ font-family:var(--serif); font-size:var(--fs-xl); font-weight:600; margin-top:4px; }
.cg-sub{ font-size:var(--fs-sm); color:var(--text-dim); margin-top:4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cg-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cg-stat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
.cg-stat span{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.cg-stat b{ font-family:var(--serif); font-size:var(--fs-lg); font-weight:600; }
.tone-teal{ color:var(--teal); } .tone-gold{ color:var(--gold); } .tone-red{ color:var(--red); }
.cg-bands{ display:flex; height:8px; border-radius:var(--radius-pill); overflow:hidden; gap:2px; }
.cg-band.tone-teal{ background:var(--teal); } .cg-band.tone-gold{ background:var(--gold); } .cg-band.tone-red{ background:var(--red); }
.cg-block-title{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.cg-block-title .cg-muted{ text-transform:none; letter-spacing:0; font-family:var(--sans); }
.cg-muted{ color:var(--text-faint); font-size:var(--fs-sm); }
.cg-list{ list-style:none; display:flex; flex-direction:column; gap:5px; font-size:var(--fs-sm); color:var(--text-dim); }
.cg-list li{ padding-left:10px; border-left:2px solid var(--line-strong); }
.cg-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.cg-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:8px; }
.cg-actions .btn{ width:100%; }
.cg-country-list{ display:flex; flex-direction:column; gap:2px; }
.cg-row{ display:flex; align-items:center; gap:8px; width:100%; min-height:40px; padding:6px 8px; border-radius:var(--radius-sm); text-align:left;
  border:1px solid transparent; transition:background .12s ease, border-color .12s ease; }
.cg-row:hover{ background:var(--accent-tint); border-color:var(--line); }
.cg-row-name{ flex:1; min-width:0; font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cg-row-val{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--text-faint); white-space:nowrap; }
.india-map-list.cg-fallback-list{ display:flex; max-height:none; } /* no-WebGL fallback: the list IS the view, at every width */
.cg-fallback-note{ margin:0 0 12px; padding:10px 12px; border:1px dashed var(--line-strong); border-radius:var(--radius-sm); font-size:var(--fs-sm); color:var(--text-dim); }

/* Shared status pill — one small component every system uses to state a band (strong/moderate/weak). */
.status-pill{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--radius-pill); border:1px solid currentColor; line-height:1.3; }
.status-teal{ color:var(--teal); } .status-gold{ color:var(--gold); } .status-red{ color:var(--red); } .status-dim{ color:var(--text-dim); }

#gameplayMapBgCanvas{ transition:opacity .4s ease; }
#gameplayMapBgCanvas.bg-globe-suspended{ opacity:0 !important; }

@media (max-width:1024px){
  .cg-wrap{ grid-template-columns:1fr; }
  .cg-panel{ max-height:none; min-height:0; }
  .cg-stage{ min-height:420px; height:56vh; }
}
@media (max-width:640px){
  .cg-stage{ min-height:340px; height:52vh; }
  .cg-caption{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .cg-canvas, .cg-loading, .cg-row, .cg-hud-btn, #gameplayMapBgCanvas{ transition:none; }
}

/* ---- Phase 10 — lean topbar: Settings menu + actions-left chip ---- */
.settings-wrap{ position:relative; }
.settings-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:220px; padding:6px; display:flex; flex-direction:column; gap:2px;
  background:var(--panel-sunken); border:1px solid var(--line-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); }
.settings-menu[hidden]{ display:none; }
.settings-item{ text-align:left; padding:10px 12px; min-height:44px; border-radius:var(--radius-sm); font-size:var(--fs-sm); color:var(--text); transition:background .12s ease; }
.settings-item:hover, .settings-item:focus-visible{ background:var(--accent-tint-strong); }
.settings-item-danger{ color:var(--red); }
.settings-item-danger:hover{ background:rgba(224,97,106,.12); }
.settings-sep{ height:1px; background:var(--line); margin:4px 2px; }
.actions-chip{ font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.04em; padding:8px 12px; border-radius:var(--radius-sm); border:1px solid var(--line);
  color:var(--text-dim); background:var(--panel-sunken); white-space:nowrap; transition:border-color .25s ease, color .25s ease; }
.actions-chip b{ color:var(--teal-bright); font-weight:600; }
.actions-chip[data-tone="partial"]{ border-color:var(--gold-dim); }
.actions-chip[data-tone="partial"] b{ color:var(--gold); }
.actions-chip[data-tone="spent"]{ border-color:var(--red); color:var(--red); }
.actions-chip[data-tone="spent"] b{ color:var(--red); }
body:not(.theme-dark) .actions-chip b{ color:var(--teal); }
@media (max-width:900px){ .approval-trend{ display:none; } }
@media (max-width:640px){ .actions-chip{ padding:6px 8px; } }
@media (prefers-reduced-motion: reduce){ .settings-item, .actions-chip{ transition:none; } }
/* Phase 10 first-user test: "what month is it?" must be answerable on a phone too — the clock used to be
   hidden below 900px. It stays, compact, next to the actions chip and Advance Month. */
@media (max-width:900px){ .clock{ display:inline-block; padding:6px 8px; font-size:var(--fs-xs); } }
/* The menu items keep their legacy ids (#themeToggleBtn etc.), which older topbar/rail rules still size by id —
   neutralise those inside the menu so every item is one consistent left-aligned row. */
.settings-menu .settings-item, .settings-menu #themeToggleBtn, .settings-menu #soundToggleBtn, .settings-menu #globeStyleBtn{
  display:flex; align-items:center; justify-content:flex-start; width:100%; height:auto; min-width:0; margin:0; line-height:1.3; vertical-align:baseline; }
/* The topbar's backdrop-filter makes it its own stacking context; lift it above <main> so the Settings menu
   (and any future topbar popover) paints over page content instead of under it. */
.topbar{ position:relative; z-index:70; }

/* ---- Phase 8 — Parliament chamber (renderParliamentHemicycle) ---- */
.parl-chamber{ margin:6px 0 4px; }
.parl-svg{ width:100%; max-width:560px; height:auto; display:block; margin:0 auto; overflow:visible; }
.parl-group{ cursor:pointer; outline:none; transition:opacity .15s ease; }
.parl-svg:hover .parl-group, .parl-svg:focus-within .parl-group{ opacity:.45; }
.parl-svg .parl-group:hover, .parl-svg .parl-group:focus-visible{ opacity:1; }
.parl-group:focus-visible circle{ stroke:var(--focus-ring); stroke-width:1.2; }
.parl-majority-line{ stroke:var(--text); stroke-width:1.5; stroke-dasharray:3 3; opacity:.8; }
.parl-centre-num{ font-family:var(--serif); font-size:26px; font-weight:700; fill:var(--text); }
.parl-centre-label{ font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; fill:var(--text-faint); }
.parl-legend{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:10px; }
.parl-chip{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 10px; border-radius:var(--radius-pill); border:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--text-dim); background:var(--panel); transition:border-color .12s ease, color .12s ease; }
.parl-chip i{ width:9px; height:9px; border-radius:50%; background:var(--chip); }
.parl-chip b{ color:var(--text); font-family:var(--mono); }
.parl-chip:hover, .parl-chip:focus-visible{ border-color:var(--chip); color:var(--text); }
@media (prefers-reduced-motion: reduce){ .parl-group, .parl-chip{ transition:none; } }

/* ---- Phase 8 — News story (newsStoryHTML): WHAT · WHY · IMPACT · SYSTEM · TIME ---- */
.news-story{ padding:12px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.news-story:last-child{ border-bottom:none; }
.news-meta{ display:flex; gap:10px; align-items:center; font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.news-cat{ color:var(--teal-bright); }
body:not(.theme-dark) .news-cat{ color:var(--teal); }
.news-what{ font-size:var(--fs-base); color:var(--text); line-height:1.5; }
.news-row{ display:flex; gap:10px; align-items:baseline; font-size:var(--fs-sm); color:var(--text-dim); flex-wrap:wrap; }
.news-k{ min-width:56px; font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.news-impacts{ display:flex; flex-wrap:wrap; gap:6px; }
.news-link{ color:var(--teal-bright); font-size:var(--fs-sm); padding:6px 0; min-height:32px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong); }
body:not(.theme-dark) .news-link{ color:var(--teal); }
.news-link:hover{ text-decoration-color:currentColor; }

/* ---- Phase 8 — crisis facts row + Phase 9 severity-scaled alert motion ----
   Critical: a slow, restrained edge pulse. High: a single attention flash on arrival. Medium/low: static.
   Reduced motion: no animation at all — the severity word and colour carry the same information. */
.crisis-facts{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:var(--fs-sm); color:var(--text-dim); }
.crisis-facts b{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-right:4px; font-weight:600; }
.crisis-alert[data-severity="high"]{ animation: alertArrive .9s ease-out 1; }
.crisis-room-card{ animation: criticalEdge 2.8s ease-in-out infinite; }
@keyframes alertArrive{ 0%{ box-shadow:0 0 0 0 rgba(201,151,63,.55); } 100%{ box-shadow:0 0 0 14px rgba(201,151,63,0); } }
@keyframes criticalEdge{ 0%,100%{ box-shadow:0 0 0 1px rgba(224,97,106,.35), var(--shadow-lg); } 50%{ box-shadow:0 0 0 1px rgba(224,97,106,.85), 0 0 36px rgba(224,97,106,.22), var(--shadow-lg); } }
@media (prefers-reduced-motion: reduce){ .crisis-alert[data-severity], .crisis-room-card{ animation:none; } }

/* ---- Phase 9 — motion that explains (change · cause · state · priority · navigation) ----
   Everything here is a short one-shot transition on a user- or simulation-caused change; nothing loops except
   the Critical crisis edge above. Only opacity/transform/colour animate (compositor-cheap, no layout, no filters). */
.kpi-flash-good{ animation:kpiGood 1.4s ease-out 1; border-radius:4px; }
.kpi-flash-bad{ animation:kpiBad 1.4s ease-out 1; border-radius:4px; }
@keyframes kpiGood{ 0%{ background:var(--positive-tint); } 100%{ background:transparent; } }
@keyframes kpiBad{ 0%{ background:rgba(224,97,106,.28); } 100%{ background:transparent; } }
.chip-spent{ animation:chipSpent .7s ease-out 1; }
@keyframes chipSpent{ 0%{ transform:scale(1); border-color:var(--gold); } 35%{ transform:scale(1.07); } 100%{ transform:scale(1); } }
.main.view-enter{ animation:viewEnter .22s ease-out 1; }
@keyframes viewEnter{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* Micro-interactions: press, hover lift, tabs/toggles */
.btn:active:not(:disabled){ transform:translateY(0) scale(.98); }
.card-clickable:active{ transform:translateY(0); } /* hover lift is the existing .card-clickable:hover rule */

/* Reduced motion: identical information, zero movement. Direction is stated by a static marker instead. */
@media (prefers-reduced-motion: reduce){
  .kpi-flash-good, .kpi-flash-bad, .chip-spent, .main.view-enter{ animation:none; }
  [data-kpi-dir="up"]::after{ content:' ▲'; font-size:.6em; vertical-align:super; color:var(--teal); }
  [data-kpi-dir="down"]::after{ content:' ▼'; font-size:.6em; vertical-align:super; color:var(--red); }
  .btn:active:not(:disabled), .card-clickable:hover, .card-clickable:active{ transform:none; }
}
/* Phase 10 a11y: "Skip tutorial" / "I'll explore on my own" were clickable <div>s (not focusable, not announced as
   controls). Now real buttons that keep the same quiet link look, with a full 44px touch target. */
.onboard-link{ display:block; width:100%; min-height:44px; background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; font:inherit; color:inherit; }
/* Phase 10 first-user test: after a long monthly briefing the only way forward ("Continue →") sat below the fold.
   It now stays pinned to the bottom of the results card. */
.advmonth-continue{ position:sticky; bottom:-28px; margin-bottom:-28px; box-shadow:0 -14px 22px 6px var(--surface-solid); }

/* ---- v39.1 fix: Crisis Room must always be escapable and its options always reachable ----
   It was a centred, non-scrolling card: a long NSC / war memo pushed the options and the only exit off-screen.
   Now the backdrop scrolls, the card starts at the top, and a sticky header carries the ✕ (Esc also works). */
.crisis-room-backdrop{ align-items:flex-start; overflow-y:auto; overscroll-behavior:contain; }
.crisis-room-card{ margin:auto 0; }
.crisis-room-head{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; margin:-28px -32px 0; padding:16px 32px 12px;
  background:var(--crisis-head); border-radius:8px 8px 0 0; }
.crisis-room-head .crisis-room-eyebrow{ flex:1; min-width:0; flex-wrap:wrap; gap:6px; }
.crisis-room-close{ flex:none; width:44px; height:44px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); color:var(--text); font-size:var(--fs-lg);
  background:var(--panel-sunken); transition:background .15s ease, border-color .15s ease; }
.crisis-room-close:hover, .crisis-room-close:focus-visible{ background:rgba(224,97,106,.18); border-color:var(--red); }
.crisis-room-forecast{ margin-top:12px; font-size:var(--fs-sm); color:var(--text-dim); }
.crisis-room-more{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.crisis-room-more > summary{ cursor:pointer; font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); min-height:36px; display:flex; align-items:center; }
.crisis-room-more > summary:hover{ color:var(--text); }
.crisis-room-more .crisis-room-dossier{ margin-top:8px; }
@media (max-width:640px){ .crisis-room-backdrop{ padding:10px; } .crisis-room-card{ padding:20px 16px; } .crisis-room-head{ margin:-20px -16px 0; padding:12px 16px 10px; } }
/* v39.1: card titles that open the entity's full inspector (states, orgs, countries, projects) */
.card-title-btn{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; text-align:left; display:inline; }
.card-title-btn:hover, .card-title-btn:focus-visible{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
body:not(.theme-dark) .card-title-btn:hover{ color:var(--accent-text); }

/* ---- v39.1 shared action-detail components (actionCardHTML / relationBarsHTML) ---- */
.action-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:var(--space-4); }
.action-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 16px; display:flex; flex-direction:column; gap:8px;
  transition:border-color .15s ease, transform .15s ease; }
.action-card:hover{ border-color:var(--line-strong); }
.action-card.is-done{ opacity:.72; border-style:dashed; }
.action-card.is-locked{ opacity:.85; }
.action-card-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.action-card-title{ font-weight:600; font-size:var(--fs-base); line-height:1.35; }
.action-card-cost{ font-family:var(--mono); font-size:var(--fs-sm); color:var(--gold); white-space:nowrap; }
.action-card-badge{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.06em; text-transform:uppercase; color:var(--teal-bright); }
body:not(.theme-dark) .action-card-badge{ color:var(--teal); }
.action-card-desc{ font-size:var(--fs-sm); color:var(--text-dim); line-height:1.5; margin:0; }
.action-card-effects, .action-card-timing{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:var(--fs-sm); color:var(--text-dim); }
.action-card-k{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); min-width:48px; }
.action-card-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:6px; }
.action-card-lock{ font-size:var(--fs-xs); color:var(--gold); }
.rel-bars{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.rel-bar-row{ display:grid; grid-template-columns:minmax(120px,1.4fr) 2fr 34px; gap:10px; align-items:center; width:100%; min-height:36px; padding:4px 6px; border-radius:var(--radius-sm); text-align:left; }
.rel-bar-row:hover, .rel-bar-row:focus-visible{ background:var(--accent-tint); }
.rel-bar-name{ font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rel-bar-track{ height:8px; background:var(--panel-sunken); border-radius:var(--radius-pill); overflow:hidden; }
.rel-bar-fill{ display:block; height:100%; border-radius:var(--radius-pill); transition:width .6s ease; }
.tone-bg-teal{ background:var(--teal); } .tone-bg-gold{ background:var(--gold); } .tone-bg-red{ background:var(--red); } .tone-dim{ color:var(--text-dim); }
.rel-bar-val{ font-family:var(--mono); font-size:var(--fs-xs); text-align:right; }
.org-card-v2{ display:flex; flex-direction:column; cursor:default; }
.org-card-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.org-mini-stats{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:10px; font-size:var(--fs-xs); color:var(--text-dim); }
.org-mini-stats b{ color:var(--text); font-family:var(--mono); }
@media (prefers-reduced-motion: reduce){ .action-card, .rel-bar-fill{ transition:none; } }
/* v39.1 — stacked share bar + compact list rows (projects portfolio, investment pipeline, diplomacy) */
.stack-bar{ display:flex; height:14px; border-radius:var(--radius-pill); overflow:hidden; gap:2px; margin:10px 0 8px; background:var(--panel-sunken); }
.stack-bar > span{ display:block; min-width:3px; }
.stack-legend{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:var(--fs-xs); color:var(--text-dim); }
.stack-legend i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.stack-legend b{ color:var(--text); font-family:var(--mono); font-weight:500; }
.mini-row{ display:grid; grid-template-columns:1fr auto; gap:2px 10px; width:100%; text-align:left; padding:8px 6px; border-radius:var(--radius-sm); border-bottom:1px solid var(--line); }
button.mini-row:hover, button.mini-row:focus-visible{ background:var(--accent-tint); }
.mini-row-static{ cursor:default; }
.mini-row-name{ font-size:var(--fs-sm); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-row-val{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--teal-bright); white-space:nowrap; }
body:not(.theme-dark) .mini-row-val{ color:var(--teal); }
.mini-row-sub{ grid-column:1 / -1; font-size:var(--fs-xs); color:var(--text-faint); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mini-row-sub .news-link{ min-height:0; padding:0; font-size:var(--fs-xs); }
.mini-row-bar{ grid-column:1 / -1; height:5px; background:var(--panel-sunken); border-radius:var(--radius-pill); overflow:hidden; }
.mini-row-bar > span{ display:block; height:100%; background:var(--teal); border-radius:var(--radius-pill); }
/* v39.1 — investment funnel */
.funnel{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.funnel-row{ display:grid; grid-template-columns:minmax(120px,1.2fr) 2fr auto; gap:10px; align-items:center; }
.funnel-label{ font-size:var(--fs-sm); color:var(--text-dim); }
.funnel-track{ height:12px; background:var(--panel-sunken); border-radius:var(--radius-pill); overflow:hidden; }
.funnel-fill{ display:block; height:100%; border-radius:var(--radius-pill); transition:width .6s ease; }
.funnel-val{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text); white-space:nowrap; }
@media (max-width:640px){ .funnel-row{ grid-template-columns:1fr auto; } .funnel-track{ grid-column:1 / -1; order:3; } }
@media (prefers-reduced-motion: reduce){ .funnel-fill{ transition:none; } }
/* v39.1 — Decision Report: what the decision actually changed */
.decision-impact{ margin:12px 0 14px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:var(--panel-raised); display:flex; flex-direction:column; gap:8px; }
.decision-impact-title{ font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.decision-impact-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.decision-impact-line{ font-size:var(--fs-sm); color:var(--text-dim); }

/* =====================================================================================
   v40 — "SITUATION ROOM" LAYER (navigation hubs, hub tab strip, eyebrow headers, data tiles,
   globe-safe text plates). Token-driven only: every colour below is a var() from the two
   theme blocks, so light and dark share one set of rules. Nothing here removes a selector
   that JS relies on; the legacy rail anchors (.rail-sub) are kept but never shown.
   ===================================================================================== */

/* ---- Backdrop (v41.1, from ui-layouts' homepage hero): a 50px grid that fades out from the top edge, plus a soft
        accent glow rising from the bottom. Pure CSS: no script, no image, no animation, so it paints once and costs
        nothing per frame (the globe it replaces re-rendered WebGL ~30x a second). Both layers are fixed
        pseudo-elements, not a real element's background, so tests/browser-qa/audit.js's contrast walk is unaffected.
        In the dark theme the glow layer is ::before, which the optional globe's own glow takes over while it is on. ---- */
body.theme-dark::after, body:not(.theme-dark)::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--bg-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-grid-line) 1px, transparent 1px);
  background-size:50px 50px;
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
          mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
}
body.theme-dark:not([data-globe="night"])::before, body:not(.theme-dark)::after{
  content:''; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background: radial-gradient(125% 125% at 50% 10%, transparent 40%, var(--accent-tint) 100%);
  -webkit-mask-image: radial-gradient(ellipse 115% 60% at 50% 100%, #000 70%, transparent 110%);
          mask-image: radial-gradient(ellipse 115% 60% at 50% 100%, #000 70%, transparent 110%);
}

/* ---- Rail: section groups ---- */
.rail{ gap:0; }
.rail-group + .rail-group{ border-top:1px solid var(--line); margin-top:6px; padding-top:4px; }
.rail-group-header{
  justify-content:flex-start; gap:8px; min-height:32px; padding:8px 10px 6px;
  letter-spacing:var(--ls-eyebrow); color:var(--text-faint); border-radius:var(--radius-sm);
}
.rail-group-icon{ flex:0 0 18px; width:18px; text-align:center; font-size:var(--fs-sm); line-height:1; letter-spacing:0; font-family:var(--sans); filter:saturate(.85); }
.rail-group-title{ flex:1 1 auto; min-width:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-group-caret{ flex:0 0 auto; opacity:.8; }
.rail-group-header:hover{ color:var(--text); background:var(--accent-tint); }
.rail-group.has-active .rail-group-header{ color:var(--accent-text); }

/* ---- Rail: hub buttons ---- */
.rail-hub{ gap:10px; padding:10px 10px 10px 12px; }
.rail-icon{ flex:0 0 20px; width:20px; text-align:center; font-size:var(--fs-md); line-height:1; }
.rail-label{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-count{
  margin-left:auto; flex:0 0 auto; min-width:20px; height:18px; padding:0 5px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-num); font-size:var(--fs-2xs); font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
  color:var(--text-faint); border:1px solid var(--line-strong); border-radius:3px; background:var(--panel-sunken);
}
.rail-count + .rail-badge, .rail-badge + .rail-count{ margin-left:6px; }
/* Active hub (its own screen on view) or hub-active (one of the hub's merged screens is on view). */
.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:var(--accent-tint-strong); color:var(--accent-text); font-weight:600; box-shadow:inset 3px 0 0 var(--accent);
}
.rail-btn.rail-hub.active .rail-count, .rail-btn.rail-hub.hub-active .rail-count{ color:var(--accent-text); border-color:var(--accent-line-strong); }
/* Legacy per-screen anchors kept in the DOM for old data-view lookups — never visible, never focusable by layout. */
.rail-sub, .rail-sub[hidden], .rail .rail-sub{ display:none !important; }

/* Phone drawer (< 900px): the rail sits over content, so it gets a solid surface instead of the translucent chrome. */
@media (max-width: 900px){
  body.theme-dark .rail, body:not(.theme-dark) .rail{ background:var(--surface-solid); backdrop-filter:none; border-right:1px solid var(--line-strong); }
}

/* ---- Screen intro: one plain line saying what the screen is for (section-help.js screenIntroHTML) ---- */
.screen-intro{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0 0 16px; min-width:0;
  font-size:var(--fs-md); color:var(--text-dim); line-height:1.45;
}
.screen-intro-text{ flex:1 1 240px; min-width:0; }
.screen-intro-help{ flex:0 0 auto; color:var(--accent-text); }

/* Citations: tucked into a small "Sources" toggle inside a card, plus one Sources link at the foot of every screen. */
.source-note{ margin:6px 0; font-size:var(--fs-xs); color:var(--text-faint); line-height:1.45; }
.source-note > summary{ display:inline-flex; align-items:center; min-height:44px; cursor:pointer; color:var(--accent-text); }
.source-note[open] > summary{ min-height:32px; }
.screen-sources{ margin:28px 0 8px; padding-top:12px; border-top:1px solid var(--line-strong); font-size:var(--fs-xs); color:var(--text-faint); }
.screen-sources a{ display:inline-flex; align-items:center; min-height:44px; margin-right:6px; color:var(--accent-text); font-weight:600; }

.more-info{ margin:6px 0; }
.more-info > summary{ display:inline-flex; align-items:center; min-height:44px; cursor:pointer; font-size:var(--fs-sm); color:var(--accent-text); }
.more-info[open] > summary{ min-height:32px; }

/* The other currency, shown small next to a headline money figure (render.js fmtMoneyHTML). */
.money-alt{ display:block; margin-top:2px; font-size:var(--fs-xs); font-weight:500; color:var(--text-faint); letter-spacing:0; }

/* ---- Hub tab strip (top of a merged screen) ---- */
.hub-tabs{
  display:block; max-width:100%; min-width:0; margin:0 0 20px; position:relative;
  border-bottom:1px solid var(--line-strong); background:var(--scrim); border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.hub-tabs-title{
  font-family:var(--mono); font-size:var(--fs-2xs); font-weight:600; letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--text-faint); padding:8px 4px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hub-tabs-title::before{ content:''; display:inline-block; width:6px; height:6px; margin-right:8px; vertical-align:1px; background:var(--accent); border-radius:1px; }
.hub-tabs-row{
  display:flex; flex-wrap:nowrap; gap:2px; max-width:100%; min-width:0;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:thin; margin-bottom:-1px; /* selected underline sits on the strip's hairline */
}
.hub-tabs-row::-webkit-scrollbar{ height:4px; }
.hub-tabs .rail-btn.hub-tab{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; box-sizing:border-box;
  padding:10px 14px; border-radius:var(--radius-sm) var(--radius-sm) 0 0; white-space:nowrap; scroll-snap-align:start;
  font-size:var(--fs-sm); font-weight:500; color:var(--text-dim); background:transparent;
  border-bottom:2px solid transparent; box-shadow:none;
}
.hub-tab-icon{ font-size:var(--fs-md); line-height:1; }
.hub-tabs .rail-btn.hub-tab:hover{ color:var(--text); background:var(--accent-tint); box-shadow:none; }
.hub-tabs .rail-btn.hub-tab[aria-selected="true"], .hub-tabs .rail-btn.hub-tab.active{
  color:var(--accent-text); font-weight:600; background:var(--accent-tint-strong);
  border-bottom-color:var(--accent); box-shadow:none;
}
.hub-tabs .rail-btn.hub-tab:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-3px; }
@media (max-width: 640px){
  .hub-tabs{ margin-bottom:14px; }
  .hub-tabs .rail-btn.hub-tab{ padding:10px 12px; }
}
@media (forced-colors: active){
  .hub-tabs .rail-btn.hub-tab[aria-selected="true"]{ border-bottom-color:Highlight; }
}

/* ---- Headers: uppercase eyebrow grammar ---- */
.view-title{ font-family:var(--sans); font-weight:600; letter-spacing:-.01em; }
.section-title{
  font-family:var(--mono); font-size:var(--fs-sm); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-dim); border-bottom:1px solid var(--line-strong); gap:10px;
  border-left:3px solid var(--accent); padding-left:10px;
}
.section-title .hint{ text-transform:none; letter-spacing:0; }
.stat-label, .field label, .cg-block-title, .decision-impact-title, .news-k, .action-card-k{ letter-spacing:.1em; }

/* ---- Globe-safe text plates. Free-standing heading rows sit directly over the backdrop globe (it is
        visible through .main in both themes), so they carry a --scrim plate: ~90% page colour, extended
        8px past the box with a spread shadow so the layout does not move. Keeps AA text contrast no
        matter which part of the Earth is behind them. ---- */
.view-header, .section-title, .p31-subtabs, .p28-strip, .dashboard-detail-well > summary, #mainView > p, #mainView > .hint{
  background:var(--scrim); box-shadow:0 0 0 8px var(--scrim); border-radius:2px;
}

/* ---- Data tiles: dense, crisp, figures in tabular mono ---- */
.card{ box-shadow:var(--shadow-sm), inset 0 1px 0 var(--tile-grid); }
.stat-value, .hero-num, .sector-amount, .project-cost, .modal-row .v, .cg-stat b, .p28-chip-v, .heatmap-val, .tally-num{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
}
.cg-stat b{ font-weight:600; }
.stat-delta.up, .stat-delta.down{ font-weight:600; }
.tag{ border-radius:3px; }
.status-pill{ border-radius:3px; }

/* ---- Global Command stage: a dark display wall in BOTH themes (a lit planet needs darkness), retinted to the
        war-room slate; the light theme gets a slightly lifted navy so it sits naturally inside the paper UI.
        Pairs with CG_THEME_TUNE in js/command-globe.js (fill light + brighter graticule in light theme). ---- */
.cg-stage{ background:radial-gradient(ellipse at 50% 46%, #15243a 0%, #0b131f 50%, #05080d 100%); border-color:var(--line-strong); }
body:not(.theme-dark) .cg-stage{ background:radial-gradient(ellipse at 50% 46%, #2a4262 0%, #172a44 50%, #0d1a2c 100%); box-shadow:inset 0 0 60px rgba(0,0,0,.35); }
.cg-caption{ color:#dfe6ef; background:rgba(3,7,12,.66); }
.cg-hud-btn{ background:rgba(6,10,16,.78); border-color:rgba(203,213,225,.34); }

/* ---- Small component alignments ---- */
.actions-chip{ font-variant-numeric:tabular-nums; }
.settings-menu{ border-top:2px solid var(--accent); }
.modal{ border-top:2px solid var(--accent); }
.entity-drawer{ border-left-color:var(--line-strong); }
.ed-head{ border-bottom-color:var(--line-strong); }
.chart-range-btn{ min-height:32px; }

/* ---- v39.6 browser-QA fixes (found in a real-browser pass) ---- */
/* 1. selected scenario/difficulty card: every line inside it uses the ink colour for the saffron fill */
.country-pick.selected, .country-pick.selected *{ color:var(--on-accent) !important; }
/* 2. light theme: view headers sit on an opaque reading plate, so the daylight globe never sits under their text */
body:not(.theme-dark) .view-header{ background:var(--scrim); box-shadow:0 0 0 12px var(--scrim); border-radius:var(--radius-sm); }
/* 3. guided start: "introduced later" rail items stay clearly readable (they are open, just not yet highlighted) */
.rail-btn.p28-rail-later{ opacity:.82; }
/* 4. hub tab row: wraps on wide screens (no clipped tabs, no scrollbar); scrolls sideways only on phones */
@media (min-width:900px){
  .hub-tabs-row{ flex-wrap:wrap; overflow-x:visible; }
}
/* 5. rail: long topic names wrap to a second line instead of being cut off */
.rail-label{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; }


/* ============================================================
   v40 — compact, clearer layout (Part 4). Overrides placed last so they win the cascade.
   ============================================================ */
body{ font-size:var(--fs-base); line-height:var(--lh-body); }
@media (max-width: 640px){ :root{ --fs-base:15px; --fs-md:15px; } }         /* phones: body text a touch larger */
.view-title{ font-size:var(--fs-title); line-height:1.25; }
.view-header{ margin-bottom:16px; }
.view-sub{ font-size:var(--fs-base); line-height:var(--lh-body); max-width:72ch; }
.section-title{ font-size:var(--fs-lg); margin:24px 0 12px; padding-bottom:6px; }
.card{ padding:16px; }
.grid{ gap:18px; }                                                         /* 16–24px between cards */
.stat-value{ font-size:var(--fs-2xl); }
.stat-label{ margin-bottom:6px; }
p, li{ line-height:var(--lh-body); }
@media (max-width: 640px){ .card{ padding:14px; } .grid{ gap:16px; } .view-title{ font-size:21px; } }

/* v40 — gentle motion (off under prefers-reduced-motion via the global rule above and here). Cards in a freshly
   opened screen fade up in a short stagger; icons sit before section names. */
@keyframes cardIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.main.view-enter .grid > .card{ animation:cardIn .32s ease-out both; }
.main.view-enter .grid > .card:nth-child(2){ animation-delay:.04s; }
.main.view-enter .grid > .card:nth-child(3){ animation-delay:.08s; }
.main.view-enter .grid > .card:nth-child(4){ animation-delay:.12s; }
.main.view-enter .grid > .card:nth-child(n+5){ animation-delay:.16s; }
@media (prefers-reduced-motion: reduce){ .main.view-enter .grid > .card{ animation:none; } }
.st-icon{ display:inline-block; margin-right:8px; font-size:.95em; line-height:1; }

/* v40 — charts (Part 6): one consistent frame for every chart. */
.chart-range-btn{ min-height:44px; padding:0 12px; font-family:var(--sans); font-size:var(--fs-xs); }
.chart-range-controls{ flex-wrap:wrap; margin-bottom:0; }
.chart-box{ margin:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md, 8px); padding:14px 16px 12px; min-width:0; }
.chart-box-head{ display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; }
.chart-box-title{ font-size:var(--fs-md); font-weight:600; color:var(--text); }
.chart-box-takeaway{ font-size:var(--fs-sm); color:var(--text-dim); margin:4px 0 10px; line-height:var(--lh-body); }
.chart-box-canvas{ position:relative; width:100%; min-width:0; }
.chart-box-compact .chart-box-title{ font-size:var(--fs-sm); }
.chart-empty{ display:flex; align-items:center; justify-content:center; min-height:120px; margin-top:8px; border:1px dashed var(--line-strong); border-radius:6px; color:var(--text-faint); font-size:var(--fs-sm); text-align:center; padding:12px; }
.chart-table{ margin-top:8px; font-size:var(--fs-xs); }
.chart-table > summary{ display:inline-flex; align-items:center; min-height:44px; cursor:pointer; color:var(--accent-text); }
.chart-table-scroll{ overflow-x:auto; }
.chart-table table{ border-collapse:collapse; width:100%; }
.chart-table th, .chart-table td{ padding:4px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.chart-table th[scope="row"], .chart-table thead th:first-child{ text-align:left; }
.chart-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
@media (max-width: 900px){ .chart-grid{ grid-template-columns:minmax(0,1fr); } }
.chart-select{ min-height:44px; padding:0 10px; background:var(--panel-raised); color:var(--text); border:1px solid var(--line-strong); border-radius:6px; font:inherit; font-size:var(--fs-sm); }

/* v40.1 — Decision Report layout (app.js openReportModal): result first, then key facts, then details. */
.report-head{ margin-bottom:12px; }
.report-head .tag{ margin-bottom:8px; }
.report-head h2{ margin-bottom:4px; }
.report-sub{ font-size:var(--fs-sm); color:var(--text-dim); }
.decision-impact{ gap:6px; }
.report-quiet{ font-size:var(--fs-sm); color:var(--text-dim); }
.report-change{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; padding:6px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.report-change:last-of-type{ border-bottom:none; }
.report-change.is-good .report-change-label{ color:var(--teal); }
.report-change.is-bad .report-change-label{ color:var(--red); }
.report-change-vals{ color:var(--text-dim); font-variant-numeric:tabular-nums; }
.report-change-vals b{ color:var(--text); }
.report-later{ font-size:var(--fs-sm); color:var(--text-dim); padding-top:4px; }
.report-rows{ margin:0; display:grid; grid-template-columns:minmax(110px, 38%) 1fr; }
.report-row{ display:contents; }
.report-row dt, .report-row dd{ margin:0; padding:9px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); line-height:1.4; }
.report-row dt{ color:var(--text-dim); padding-right:12px; }
.report-row dd{ color:var(--text); font-weight:600; overflow-wrap:anywhere; }
.report-est{ font-weight:400; color:var(--text-faint); }
.report-more{ margin-top:6px; }
.report-more > summary{ display:inline-flex; align-items:center; min-height:44px; cursor:pointer; color:var(--accent-text); font-size:var(--fs-sm); }
.report-note{ margin-top:12px; padding:10px 12px; border-radius:6px; background:var(--panel-raised); font-size:var(--fs-sm); color:var(--text-dim); line-height:1.5; }
.report-note-gold{ color:var(--gold); }
.report-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; }
.report-left{ font-size:var(--fs-sm); color:var(--text-dim); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width: 480px){ .report-rows{ grid-template-columns:1fr; } .report-row dt{ padding-bottom:0; border-bottom:none; } }

/* v40.1 — budget first: the Step 1 panel, and the dimmed, unclickable screen behind it. */
.budget-gate{ position:sticky; top:0; z-index:5; margin:0 0 18px; padding:18px 20px; border:1px solid var(--accent); border-radius:var(--radius-md, 8px);
  background:var(--surface-solid, var(--panel-raised)); box-shadow:var(--shadow-lg, 0 8px 24px rgba(0,0,0,.35)); }
.budget-gate-step{ font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); margin-bottom:4px; }
.budget-gate-title{ font-size:var(--fs-lg); font-weight:700; color:var(--text); margin-bottom:6px; }
.budget-gate-text{ font-size:var(--fs-sm); color:var(--text-dim); margin:0 0 12px; max-width:60ch; }
.main.budget-gated > :not(.budget-gate){ opacity:.35; pointer-events:none; user-select:none; filter:saturate(.6); }

/* v40.1 — shared screen kit (render.js uiStat / uiVoteMeter / uiStepper / uiEffects / uiRisk / uiChoices). */
.ui-muted{ color:var(--text-faint); font-size:var(--fs-sm); }
.ui-chip{ display:inline-flex; align-items:center; gap:4px; padding:3px 8px; margin:0 6px 6px 0; border-radius:999px; font-size:var(--fs-xs); font-weight:600; border:1px solid var(--line-strong); color:var(--text-dim); background:var(--panel-raised); }
.ui-chip-good{ color:var(--teal); border-color:color-mix(in srgb, var(--teal) 45%, transparent); }
.ui-chip-bad{ color:var(--red); border-color:color-mix(in srgb, var(--red) 45%, transparent); }
.ui-chip-warn{ color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent); }
.ui-stat .stat-value{ font-size:var(--fs-xl); }
.ui-stat-sub{ font-size:var(--fs-xs); color:var(--text-faint); margin-top:4px; }
.ui-stat-good .stat-value{ color:var(--teal); } .ui-stat-bad .stat-value{ color:var(--red); } .ui-stat-warn .stat-value{ color:var(--gold); }
.ui-meter{ margin:10px 0; }
.ui-meter-head, .ui-meter-foot{ display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-xs); color:var(--text-dim); }
.ui-meter-head{ font-size:var(--fs-sm); color:var(--text); margin-bottom:6px; font-weight:600; }
.ui-meter-verdict.ui-v-pass{ color:var(--teal); } .ui-meter-verdict.ui-v-close{ color:var(--gold); } .ui-meter-verdict.ui-v-fail{ color:var(--red); }
.ui-meter-bar{ position:relative; display:flex; height:14px; border-radius:7px; overflow:visible; background:var(--panel-sunken); }
.ui-meter-bar > span{ display:block; height:100%; }
.ui-meter-bar > span:first-child{ border-radius:7px 0 0 7px; }
.ui-m-for{ background:var(--teal); } .ui-m-abs{ background:var(--gold); } .ui-m-ag{ background:var(--red); }
.ui-m-need{ position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:var(--text); border-radius:1px; }
.ui-meter-foot{ margin-top:6px; }
.ui-stepper{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:6px 4px; counter-reset:none; }
.ui-stepper li{ display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--text-faint); }
.ui-stepper li + li::before{ content:''; width:14px; height:1px; background:var(--line-strong); margin-right:2px; }
.ui-step-dot{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-strong); font-size:11px; font-weight:700; }
.ui-stepper li.is-done{ color:var(--text-dim); } .ui-stepper li.is-done .ui-step-dot{ background:var(--teal); border-color:var(--teal); color:var(--bg); }
.ui-stepper li.is-now{ color:var(--text); font-weight:600; } .ui-stepper li.is-now .ui-step-dot{ border-color:var(--accent); color:var(--accent-text); box-shadow:0 0 0 3px var(--accent-tint); }
.ui-choices{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.ui-panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md, 8px); padding:16px; margin-bottom:16px; }
.ui-panel-title{ font-size:var(--fs-md); font-weight:700; color:var(--text); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.ui-panel-sub{ font-size:var(--fs-sm); color:var(--text-dim); margin-bottom:12px; }
.ui-step-num{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--accent-fill); color:var(--on-accent); font-size:12px; font-weight:700; }
.ui-need{ border-left:3px solid var(--gold); } .ui-need.ui-need-red{ border-left-color:var(--red); }
.ui-kv{ display:grid; grid-template-columns:minmax(120px, 40%) 1fr; }
.ui-kv > div{ padding:8px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.ui-kv > div:nth-child(odd){ color:var(--text-dim); padding-right:12px; }
.ui-kv > div:nth-child(even){ color:var(--text); font-weight:600; overflow-wrap:anywhere; }
@media (max-width: 480px){ .ui-kv{ grid-template-columns:1fr; } .ui-kv > div:nth-child(odd){ border-bottom:none; padding-bottom:0; } }

/* v40.1 — Parliament: "Make a law" layout. Library left, your law + will-it-pass panel right (stacks on phones). */
.p14-draft-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px, 380px); gap:18px; align-items:start; }
.p14-draft-main, .p14-draft-side{ min-width:0; }
.p14-sticky{ position:sticky; top:12px; max-height:calc(100vh - 120px); overflow-y:auto; }
@media (max-width: 1100px){ .p14-draft-layout{ grid-template-columns:minmax(0,1fr); } .p14-draft-side{ order:-1; } .p14-sticky{ position:static; max-height:none; } }
.p14-input{ width:100%; box-sizing:border-box; min-height:44px; padding:8px 10px; margin:6px 0 10px; background:var(--panel-raised); color:var(--text); border:1px solid var(--line-strong); border-radius:8px; font:inherit; font-size:var(--fs-base); }
.p14-chosen{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0 4px 10px; margin-bottom:6px; border-left:3px solid var(--accent); background:var(--panel-raised); border-radius:4px; font-size:var(--fs-sm); }
.p14-clause.is-on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.p14-err{ color:var(--red); font-size:var(--fs-sm); margin:6px 0; }
.p14-note{ color:var(--gold); font-size:var(--fs-sm); margin:6px 0; }

/* v40.1 — Union Budget journey */
.p19-next.is-urgent{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.p19-money{ margin-top:14px; }
.p19-cal{ list-style:none; margin:0; padding:0; }
.p19-cal li{ display:grid; grid-template-columns:22px 80px 1fr; gap:8px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); color:var(--text-dim); }
.p19-cal-dot{ text-align:center; }
.p19-cal-month{ color:var(--text-faint); font-variant-numeric:tabular-nums; }
.p19-cal-now{ color:var(--text); } .p19-cal-now .p19-cal-dot{ color:var(--accent-text); }
.p19-cal-done .p19-cal-dot, .p19-cal-past .p19-cal-dot{ color:var(--teal); }
.p19-ministry{ width:100%; display:grid !important; grid-template-columns:minmax(140px, 1.3fr) minmax(60px, 1fr) auto; gap:10px; align-items:center; text-align:left; }
.p19-min-bar{ height:8px; border-radius:4px; background:var(--panel-sunken); overflow:hidden; }
.p19-min-bar > span{ display:block; height:100%; background:var(--accent-fill); }
.p19-min-num{ white-space:nowrap; font-size:var(--fs-sm); }
@media (max-width: 640px){ .p19-ministry{ grid-template-columns:1fr; } }
.p19-clause.is-on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.p19-quote{ font-size:var(--fs-base); line-height:1.6; color:var(--text-dim); border-left:3px solid var(--line-strong); padding-left:10px; }
.p19-bullets{ margin:6px 0 0 18px; padding:0; font-size:var(--fs-sm); line-height:1.6; }
.p19-chapter > summary{ list-style:none; }

/* v40.1 — Economy screen */
.p18-price-row{ display:grid; grid-template-columns:minmax(150px, 1.4fr) minmax(60px, 1fr) auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.p18-price-bar{ height:10px; border-radius:5px; background:var(--panel-sunken); overflow:hidden; }
.p18-price-bar > span{ display:block; height:100%; background:var(--accent-fill); border-radius:5px; }
@media (max-width: 520px){ .p18-price-row{ grid-template-columns:1fr auto; } .p18-price-bar{ grid-column:1 / -1; order:3; } }
.p18-compare{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:10px 0 12px; padding:12px; border-radius:8px; background:var(--panel-raised); }
.p18-compare .stat-value{ font-size:var(--fs-xl); }
.p18-compare .is-moved .stat-value{ color:var(--accent-text); }
.p18-arrow{ font-size:var(--fs-xl); color:var(--text-faint); }
.p18-member{ padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.p18-member.is-moved{ border-color:var(--teal); }

/* v40.1 — Finance tabs */
.tone-good{ color:var(--teal); } .tone-bad{ color:var(--red); } .tone-warn{ color:var(--gold); }
.ui-m-good{ background:var(--teal); } .ui-m-bad{ background:var(--red); } .ui-m-warn{ background:var(--gold); }
.fin-card{ display:flex; flex-direction:column; gap:6px; }
.fin-card.is-done{ opacity:.6; }
.fin-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.fin-card-desc{ line-height:1.5; }
.fin-card-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.tax-val{ font-family:var(--font-num, var(--mono)); font-size:var(--fs-xl); font-weight:700; color:var(--accent-text); }
.tax-preview{ border-top:1px dashed var(--line-strong); padding-top:8px; }
.tax-preview-head{ font-size:var(--fs-xs); color:var(--text-dim); margin-bottom:6px; }
.tax-preview-idle{ font-size:var(--fs-xs); color:var(--text-faint); border-top:1px dashed var(--line); padding-top:8px; }
.fin-list{ border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.fin-row{ display:grid; grid-template-columns:minmax(160px, 2fr) repeat(4, minmax(70px, 1fr)); gap:8px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:var(--fs-sm); align-items:baseline; }
.fin-row:last-child{ border-bottom:none; }
.fin-row-head{ background:var(--panel-raised); color:var(--text-dim); font-size:var(--fs-xs); font-weight:600; }
@media (max-width: 640px){ .fin-row{ grid-template-columns:1fr 1fr; } .fin-row > span:first-child{ grid-column:1 / -1; } .fin-row-head{ display:none; } }

/* v40.1 — Policy Web cards */
.pw-card.is-changed{ border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pw-levels{ display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr)); gap:6px; }
.pw-level{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:8px; background:var(--panel-raised); color:var(--text-dim); font:inherit; font-size:var(--fs-sm); cursor:pointer; text-align:left; }
.pw-level:hover{ border-color:var(--accent); color:var(--text); }
.pw-level:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.pw-level.is-on{ background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); }
.pw-level.is-start:not(.is-on){ border-style:dashed; }
.pw-level-name{ font-weight:600; }
.pw-level-cost{ font-size:var(--fs-xs); opacity:.85; }

/* v40.1 — Diplomacy country finder */
.diplo-tools{ display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:8px; margin-bottom:6px; }
@media (max-width: 640px){ .diplo-tools{ grid-template-columns:1fr; } }
.diplo-region > summary{ cursor:pointer; list-style:none; }
.diplo-region > summary::-webkit-details-marker{ display:none; }
.diplo-region > summary::after{ content:'▾'; margin-left:auto; color:var(--text-faint); }
.diplo-region:not([open]) > summary::after{ content:'▸'; }
.country-row[hidden]{ display:none; }

.visit-card{ display:block; }
.visit-card[hidden]{ display:none; }

/* v40.1 — PM visit: three deals side by side */
#modalBody:has(.visit-compare){ width:min(1000px, 94vw); }
.visit-compare{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin-top:12px; }
.visit-deal{ display:flex; flex-direction:column; gap:4px; position:relative; }
.visit-deal.is-best{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.visit-best{ position:absolute; top:-10px; right:10px; background:var(--accent-fill); color:var(--on-accent); font-size:var(--fs-xs); font-weight:700; padding:2px 8px; border-radius:999px; }
.visit-money{ font-size:var(--fs-md); margin-top:2px; } .visit-money b{ color:var(--accent-text); font-size:var(--fs-lg); }
.visit-pc{ display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:var(--fs-xs); color:var(--text-dim); margin:8px 0; }
.visit-pc ul{ margin:4px 0 0 16px; padding:0; }

.biz-card{ display:flex; flex-direction:column; gap:6px; }
.biz-card.is-urgent{ border-color:var(--red); }

/* v40.1 — Defence */
.defence-tier{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--line); }
.defence-tier.is-locked{ opacity:.55; }
.defence-tier.is-done b{ color:var(--teal); }

/* v40.1 — War Room */
.war-danger{ border-color:color-mix(in srgb, var(--red) 55%, var(--line)); }
.war-tug{ display:flex; height:30px; border-radius:15px; overflow:hidden; font-size:var(--fs-xs); font-weight:700; }
.war-tug > span{ display:flex; align-items:center; padding:0 10px; white-space:nowrap; }
.war-tug > span:first-child{ background:var(--teal); color:#04140f; justify-content:flex-start; }
.war-tug > span:last-child{ background:var(--red); color:#1a0505; justify-content:flex-end; }
.war-oob{ display:grid; grid-template-columns:minmax(120px,1fr) minmax(80px,1.4fr) minmax(110px,auto); gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.war-oob-bars{ display:flex; flex-direction:column; gap:4px; }
@media (max-width: 520px){ .war-oob{ grid-template-columns:1fr auto; } .war-oob-bars{ grid-column:1 / -1; order:3; } }

/* v40.2 — readable detail text everywhere. Sentences were set in the bold monospace number font (.modal-row .v,
   .sector-meta), which made long values cramped and heavy. Text now uses the normal reading font; digits stay
   tabular so numbers still line up. Detail rows become a two-column grid, so long values wrap under their own column. */
.sector-meta{ font-family:var(--sans); font-size:var(--fs-sm); line-height:1.5; font-variant-numeric:tabular-nums; }
.modal-row{ display:grid; grid-template-columns:minmax(110px, 38%) 1fr; gap:4px 14px; align-items:baseline; }
.modal-row .k{ min-width:0; }
.modal-row .v{ font-family:var(--sans); font-weight:600; font-variant-numeric:tabular-nums; text-align:left; min-width:0; overflow-wrap:anywhere; line-height:1.45; }
@media (max-width: 480px){ .modal-row{ grid-template-columns:1fr; } }
.ui-chip{ font-family:var(--sans); }

/* v40.2 — Policy Web card, simpler */
.pw-now{ margin:10px 0 4px; font-size:var(--fs-sm); color:var(--text-dim); }
.pw-block{ margin-top:10px; }
.pw-block-title{ font-size:var(--fs-xs); font-weight:600; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.pw-more > summary{ display:inline-flex; align-items:center; min-height:32px; cursor:pointer; font-size:var(--fs-xs); color:var(--accent-text); }
.pw-people{ margin-top:8px; font-size:var(--fs-sm); color:var(--text-dim); display:grid; gap:2px; }
.pw-level-cost{ white-space:nowrap; }

/* v40.2 — shared country finder */
.cf-tools{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr) auto; gap:10px; align-items:end; }
@media (max-width: 900px){ .cf-tools{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .cf-tools{ grid-template-columns:1fr; } }
.cf-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cf-field .chart-select{ width:100%; }
.cf-slider{ width:100%; min-height:44px; accent-color:var(--accent); }
.cf-check{ display:flex; align-items:center; gap:8px; min-height:44px; font-size:var(--fs-sm); color:var(--text-dim); }
.cf-check input{ width:20px; height:20px; accent-color:var(--accent); }
.cf-item[hidden], .cf-group[hidden]{ display:none !important; }
.cf-facts{ font-size:var(--fs-xs); color:var(--text-faint); margin-top:2px; }

.war-past{ margin-bottom:10px; }

.cf-facts-group{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin:12px 0 4px; }