/* ============================================================================
   milrank — "Command Deck" design language
   TOC:
     1. Font + tokens + base
     2. Primitives (buttons, chips, segmented, inputs, sliders, icons, scrollbars)
     3. Header
     4. Rankings (controls, Index Lab, region chips, table)
     5. Country profile (detail head, score banner, conflict strip, stat boxes)
     6. Assets (inventory tables)
     7. Compare
     8. Methodology + footer
     9. Theaters — list (cards, orbit, atlas card)
    10. Theaters — detail (toolbar, map, tooltip, legend, camps, backers, fractures)
    11. Influence atlas
    12. Responsive
   ============================================================================ */

/* ---------- 1. Font + tokens + base ---------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* surfaces */
  --bg0: #0a0d12; --bg1: #11151c; --bg2: #171c25; --bg3: #1f2530;
  /* hairlines (alpha, not solid grey) */
  --line: rgba(148,163,184,0.10); --line-strong: rgba(148,163,184,0.22);
  /* text */
  --ink: #e9eef5; --ink-2: #a8b3c0; --ink-3: #8a96a5; /* U-04: clears 4.5:1 on bg0..bg3 (5.12-6.47) */
  /* brand */
  --gold: #e3b341; --gold-hi: #f0c75e; --gold-ink: #1a1205;
  --blue: #5a9cf8; --blue-dim: #3b5f9e;
  --up: #3fb950; --down: #f85149;
  --ring: 0 0 0 3px rgba(227,179,65,0.35);
  /* radii & shadow */
  --r-s: 6px; --r-m: 10px; --r-l: 14px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 6px 24px -8px rgba(0,0,0,0.55);
  /* legacy aliases — keep so any missed rule still resolves */
  --bg: var(--bg0); --panel: var(--bg1); --panel-2: var(--bg2);
  --border: var(--line); --text: var(--ink); --muted: var(--ink-2);
  --accent: var(--gold); --accent-2: var(--blue); --good: var(--up);
  --bar-bg: var(--bg2);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg0);
  background-image:
    radial-gradient(1100px 500px at 75% -10%, rgba(90,156,248,0.07), transparent 60%),
    radial-gradient(900px 420px at 10% -10%, rgba(227,179,65,0.05), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
/* axe link-in-text-block: links inside prose must not rely on color alone */
p a, .ph-intro a { text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.icon { width: 16px; height: 16px; vertical-align: -3px; flex: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Scrollbars: style ONLY the page scrollbar. Styling ::-webkit-scrollbar on inner
   containers disables macOS overlay scrollbars and forces a permanently visible
   bar onto every overflow:auto card — never do that. Inner panels keep native
   overlay scrollbars (invisible unless actually scrolled). */
html { scrollbar-width: thin; scrollbar-color: var(--bg3) transparent; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 6px; }

/* ============ HARD RULE: no horizontal scrolling anywhere ============ */
/* The page is locked against x-overflow, and every content box clips rather than
   scrolls — no horizontal scrollbar appears site-wide. (The map keeps its own
   overflow:hidden and is not in this list, so its tooltips aren't clipped.) */
html, body { max-width: 100%; overflow-x: hidden; }
.table-card, .asset-section, .section-card, .prose,
.cmp-table, .cmp-kind-grid, .power-cmp, .ph-card { overflow-x: clip; }
/* Belt-and-suspenders: never render a horizontal scrollbar on a webkit container. */
*::-webkit-scrollbar:horizontal { display: none; height: 0; }

/* shared focus ring */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: none; box-shadow: var(--ring);
}

/* ---------- 2. Primitives ---------- */
button { font-family: inherit; }
.btn, .nav-refresh, .lab-reset, .cmp-swap {
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: var(--r-s); padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.btn:hover, .nav-refresh:hover, .lab-reset:hover, .cmp-swap:hover {
  color: var(--ink); border-color: var(--line-strong); background: var(--bg3);
}

.chip {
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink-2);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.active { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }

.seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 3px; gap: 3px; }
.seg-btn {
  background: none; color: var(--ink-2); border: none; padding: 6px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; border-radius: calc(var(--r-s) - 2px);
  transition: background-color .14s ease, color .14s ease;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--gold); color: var(--gold-ink); }

input, select { font-family: inherit; }
.search, .cmp-sel {
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-s); transition: border-color .14s ease, box-shadow .14s ease;
}
.search::placeholder { color: var(--ink-3); }

/* range sliders (Index Lab) */
input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--fill,50%), var(--bg3) var(--fill,50%), var(--bg3) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--gold); box-shadow: var(--shadow-1); margin-top: -6px; cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--gold); cursor: pointer;
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: transparent; }
input[type="checkbox"] { accent-color: var(--gold); width: 15px; height: 15px; }

/* ---------- 3. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,13,18,0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); padding: 0;
}
.header-row { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; flex: none; display: block; }
.brand-mark svg { width: 100%; height: 100%; border-radius: 7px; display: block; }
.brand-text { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; }
.brand-text small { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); margin-left: 6px; }
nav { display: flex; align-items: center; gap: 6px; }
.nav-link {
  color: var(--ink-2); font-weight: 600; font-size: 13px; padding: 6px 10px;
  border-radius: var(--r-s); border-bottom: 2px solid transparent;
  transition: color .14s ease, background-color .14s ease;
}
.nav-link:hover { color: var(--ink); text-decoration: none; background: var(--bg2); }
.nav-link.active { color: var(--ink); border-bottom-color: var(--gold); border-radius: 0; }
.nav-refresh {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 6px;
  color: var(--ink-3); padding: 7px 9px;
}
.nav-refresh:hover { color: var(--ink); }

/* ---------- 4. Rankings ---------- */
.controls { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; flex-wrap: wrap; }
.search { flex: 1; min-width: 220px; padding: 10px 14px; font-size: 15px; }
.count { color: var(--ink-3); font-size: 12px; }
.back { display: inline-block; margin: 22px 0 4px; color: var(--ink-3); font-size: 13px; }
.back:hover { color: var(--ink); }

/* Index Lab */
.lab {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.03); margin: 0 0 14px;
}
.lab > summary {
  list-style: none; cursor: pointer; padding: 13px 18px; display: flex; align-items: center; gap: 12px;
}
.lab > summary::-webkit-details-marker { display: none; }
.lab > summary::after {
  content: ""; width: 8px; height: 8px; margin-left: auto; flex: none;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform .14s ease;
}
.lab[open] > summary::after { transform: rotate(45deg); }
.lab-summary-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.lab-state { font-weight: 600; font-size: 12px; color: var(--ink-3); }
.lab-state.on { color: var(--gold); }
.lab-body { padding: 8px 18px 16px; border-top: 1px solid var(--line); }
.lab-row { display: grid; grid-template-columns: 120px 1fr 52px; align-items: center; gap: 12px; padding: 7px 0; }
.lab-row:has(.seg) { grid-template-columns: 120px auto 1fr; }
.lab-label { color: var(--ink-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.lab-row input[type="range"] { width: 100%; max-width: 340px; }
.lab-val { text-align: right; font-weight: 700; font-size: 13px; color: var(--ink); }
.lab-hint { color: var(--ink-3); font-size: 12px; }
.lab-reset { margin-left: auto; }
.delta { font-size: 10px; font-weight: 800; margin-left: 6px; padding: 1px 5px; border-radius: 4px; }
.delta.up { color: var(--up); background: rgba(63,185,80,0.12); }
.delta.down { color: var(--down); background: rgba(248,81,73,0.12); }

/* Region chips */
.region-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }

/* Table */
.table-card {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.03); overflow: hidden;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: right; padding: 13px 12px; color: var(--ink-3); font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; user-select: none;
  background: var(--bg2); position: sticky; top: 0; z-index: 1;
}
thead th:nth-child(2) { text-align: left; }
thead th.active { color: var(--gold); }
thead th .arrow { font-size: 9px; }
/* U-02: the sort control is a real <button> inside the <th>; visually identical
   to the previous bare text (inherits the th's typography completely). */
.th-sort {
  all: unset; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; white-space: inherit; display: inline;
}
.th-sort:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
tbody td { padding: 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--ink-2); }
tbody td:nth-child(2) { text-align: left; }
tbody tr { cursor: pointer; transition: background-color .12s ease; }
tbody tr:hover { background: var(--bg3); }
tbody tr:last-child td { border-bottom: none; }
.rank-cell { color: var(--ink-3); }
.name-cell { font-weight: 650; color: var(--ink); }
.atlas-matrix-details { margin: 18px 0; }
.atlas-matrix-details summary { cursor: pointer; color: var(--ink-2); font-weight: 600; padding: 6px 0; }
.atlas-matrix-details td, .atlas-matrix-details th { white-space: normal; }
/* U-08: per-row metric expand — hidden on wide screens (nothing is shed there),
   shown from the first column-shedding breakpoint down. */
.row-expand-toggle {
  display: none; width: 22px; height: 22px; margin-right: 6px; border: 1px solid var(--line-strong);
  border-radius: 5px; background: var(--bg2); color: var(--ink-2); font-size: 13px; line-height: 1;
  cursor: pointer; vertical-align: middle;
}
@media (max-width: 1020px) { .row-expand-toggle { display: inline-flex; align-items: center; justify-content: center; } }
.rank-detail-row td { text-align: left; white-space: normal; background: var(--bg2); }
.row-detail-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; margin: 4px 0; }
.row-detail-dl div { display: flex; justify-content: space-between; gap: 8px; }
.row-detail-dl dt { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.row-detail-dl dd { color: var(--ink); font-variant-numeric: tabular-nums; }

.stat-pct { font-style: normal; font-size: 10px; color: var(--ink-3); margin-left: 4px; }

/* U-05/U-10 helpers */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100; padding: 8px 14px;
  background: var(--gold); color: var(--bg0); font-weight: 700; border-radius: 6px;
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
.load-fail { margin: 48px auto; max-width: 480px; text-align: center; color: var(--ink-2); }
.load-fail h1 { color: var(--ink); font-size: 20px; margin-bottom: 10px; }
.empty-row td { text-align: center; color: var(--ink-2); padding: 28px 12px; }

/* U-03: main is the programmatic focus target on route change; no ring for that. */
#app:focus { outline: none; }

/* U-01: country names are real links (Tab+Enter navigation) styled like the plain
   text they replaced; hover gets a subtle underline, focus the standard ring. */
.name-link { color: inherit; text-decoration: none; }
.name-link:hover { text-decoration: underline; }
.name-with-flag { display: inline-flex; align-items: center; gap: 9px; }
.row-flag {
  width: 22px; height: 15px; flex: none; object-fit: cover; border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.show-more-wrap { display: flex; justify-content: center; margin: 16px 0 4px; }
.show-more {
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: var(--r-s); padding: 9px 20px; font-size: 13px; font-weight: 650; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.show-more:hover { color: var(--ink); border-color: var(--line-strong); background: var(--bg3); }
.score-pill {
  display: inline-block; min-width: 52px; text-align: center;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink);
  font-weight: 800; padding: 4px 10px; border-radius: 999px; box-shadow: 0 1px 4px rgba(227,179,65,0.25);
}
td.num { font-variant-numeric: tabular-nums; }

/* ---------- 5. Country profile ---------- */
.detail-head { margin: 22px 0 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.detail-head h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.01em; }
.detail-rank { color: var(--ink-3); font-size: 13px; }
.cmp-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: var(--r-s); padding: 7px 14px; font-size: 13px; font-weight: 700;
  transition: border-color .14s ease, color .14s ease, background-color .14s ease;
}
.cmp-btn:hover { border-color: var(--line-strong); color: var(--ink); background: var(--bg3); text-decoration: none; }

.score-banner {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.03);
  padding: 22px 24px; margin: 8px 0 24px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.big-score { font-size: 48px; font-weight: 850; color: var(--gold); line-height: 1; letter-spacing: -0.02em; }
.big-score small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.cat-bars { flex: 1; min-width: 280px; display: grid; gap: 9px; }
.cat-row { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: 12px; font-size: 13px; }
.cat-row .label { color: var(--ink-2); }
.bar { background: var(--bg2); border-radius: 5px; height: 10px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--blue); border-radius: 5px; }
.cat-row .val { text-align: right; font-weight: 650; color: var(--ink); }

/* "Active in conflicts" strip */
.conflict-strip { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin: -8px 0 24px; }
.ci-label { display: flex; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); font-weight: 700; }
.conflict-item {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 9px 14px; display: flex; flex-direction: column; gap: 2px; color: var(--ink);
  transition: border-color .14s ease, transform .14s ease, background-color .14s ease;
}
.conflict-item:hover { border-color: var(--line-strong); background: var(--bg2); transform: translateY(-1px); text-decoration: none; }
.ci-theater { font-weight: 700; font-size: 13px; }
.ci-role { color: var(--ink-3); font-size: 11.5px; }
.conflict-item.rel-opp { border-left: 3px solid var(--down); }
.conflict-item.rel-same { border-left: 3px solid var(--up); }

/* Stat boxes (masonry) */
.sections { columns: 330px; column-gap: 22px; }
.section-card {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.03);
  overflow: hidden; break-inside: avoid; margin: 0 0 22px; width: 100%;
}
.section-card h3, .asset-title {
  margin: 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
}
.section-card h3 { padding: 12px 16px; color: var(--ink-3); background: var(--bg2); border-bottom: 1px solid var(--line); }
.stat-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 16px 12px; border-bottom: 1px solid var(--line); position: relative;
}
.stat-row:last-child { border-bottom: none; }
.stat-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bg2); }
.pct-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--blue); opacity: 0.6; z-index: 1; pointer-events: none; }
.pct-bar.top { background: var(--gold); opacity: 1; }
.stat-label { color: var(--ink-2); font-size: 13px; }
.stat-value { font-weight: 650; font-size: 14px; color: var(--ink); text-align: right; }
.stat-value .ready { color: var(--up); font-weight: 500; font-size: 12px; }
.stat-rank { color: var(--ink-3); font-size: 11px; margin-left: 8px; }

/* ---------- 6. Assets ---------- */
.asset-section {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.03);
  padding: 16px 18px; margin: 0 0 22px; overflow-x: clip;
}
.asset-title { font-size: 16px; text-transform: none; letter-spacing: 0; font-weight: 700; margin: 0 0 12px; color: var(--ink); }
.asset-asof { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 6px; }
/* No min-width: the table must FIT its container (no horizontal scrollbars).
   Headers may wrap between words ("In service" → two lines is fine); mid-word
   breaks are impossible because overflow-wrap:anywhere is banned site-wide. */
.asset-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.asset-table th {
  text-align: left; color: var(--ink-3); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: bottom;
  white-space: normal; /* headers wrap ("In / service") instead of forcing width */
}
.asset-table th.num, .asset-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
/* Full (non-compact, non-expandable) tables use fixed layout so they ALWAYS fit the
   box — numbers never get clipped or scrolled off. Columns: System / Origin / Role /
   Eff / In service / On order. */
.asset-table:not(.compact):not(.expandable) { table-layout: fixed; }
.asset-table:not(.compact):not(.expandable) th:nth-child(1) { width: 34%; }
.asset-table:not(.compact):not(.expandable) th:nth-child(2) { width: 15%; }
.asset-table:not(.compact):not(.expandable) th.num,
.asset-table:not(.compact):not(.expandable) td.num { width: 9%; }
.asset-table:not(.compact):not(.expandable) .asset-origin { min-width: 0; }
.asset-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); text-align: left; }
.asset-table tr:last-child td { border-bottom: none; }
.asset-model { overflow-wrap: break-word; }
.asset-name { font-weight: 650; color: var(--ink); }
.asset-expand-toggle {
  appearance: none; border: 0; background: none; padding: 0; font: inherit;
  color: var(--ink); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.asset-expand-toggle:hover { color: var(--gold-hi); }
.asset-expand-toggle:focus { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.asset-photo-trigger { cursor: zoom-in; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.asset-photo-trigger:focus { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.asset-note-inline { display: block; color: var(--ink-3); font-size: 12px; margin-top: 3px; line-height: 1.45; }
.asset-origin { min-width: 120px; }
.origin-item { display: inline-flex; align-items: center; gap: 5px; margin: 0 10px 3px 0; white-space: nowrap; }
.asset-origin .asset-flag { width: 18px; height: 12px; flex: none; }
.asset-role { color: var(--ink-3); }
.asset-table tfoot td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line-strong); border-bottom: none; }
.asset-disclaimer { color: var(--ink-3); font-size: 12px; margin: 12px 0 0; line-height: 1.5; }
.asset-table.expandable .asset-summary-row.asset-row-open td { border-bottom-color: transparent; }
.asset-detail-row[hidden] { display: none; }
.asset-detail-row td { padding-top: 0; background: rgba(255,255,255,0.02); }
.asset-detail-panel {
  display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 16px;
  padding: 4px 0 12px; align-items: start;
}
.asset-detail-panel.no-photo { grid-template-columns: 1fr; }
.asset-detail-photo { margin: 0; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--bg2); }
.asset-detail-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.asset-detail-photo figcaption {
  display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px;
  color: var(--ink-3); font-size: 11px; line-height: 1.35;
}
.asset-detail-photo a { color: var(--gold-hi); }
.asset-detail-copy { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.asset-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 10px; }
.asset-detail-grid span { display: block; color: var(--ink-3); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; }
.asset-detail-grid strong { display: block; color: var(--ink); font-weight: 600; }
.asset-detail-copy p { margin: 0; color: var(--ink-3); }
.aircraft-hover {
  position: fixed; z-index: 1000; width: 260px; /* U-06: pointer-enterable (was pointer-events:none) so the Source link is reachable */
  background: var(--bg0); border: 1px solid var(--line-strong); border-radius: var(--r-s);
  box-shadow: 0 18px 48px rgba(0,0,0,0.34); opacity: 0; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease; overflow: hidden;
}
.aircraft-hover.show { opacity: 1; transform: translateY(0); }
.aircraft-hover img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg2); }
.aircraft-hover-body { padding: 9px 10px 10px; font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.aircraft-hover-body strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 4px; }
.aircraft-hover-body div { display: flex; justify-content: space-between; gap: 12px; }
.aircraft-hover-body a { color: var(--gold-hi); pointer-events: auto; }

/* ---------- 7. Compare ---------- */
.cmp-head { display: flex; align-items: center; gap: 14px; margin: 18px 0; }
.cmp-side {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1); padding: 14px;
}
.cmp-side.right { align-items: flex-end; text-align: right; }
.cmp-sel {
  width: 100%; max-width: 100%; min-width: 0; padding: 9px 34px 9px 12px;
  font-size: 16px; font-weight: 700; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8b3c0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.cmp-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.score-pill.gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.cmp-swap {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg2); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; align-self: center;
}
.cmp-swap:hover { color: var(--ink); border-color: var(--line-strong); background: var(--bg3); }

.cmp-cat { display: flex; align-items: center; gap: 14px; padding: 7px 0; }
.cmp-cat-label { width: 120px; flex: none; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.cmp-bars { flex: 1; display: grid; gap: 5px; }
.cmp-track { display: flex; align-items: center; background: var(--bg2); border-radius: 3px; height: 14px; position: relative; overflow: hidden; }
/* U-04: the bar value sits on a solid dark chip so contrast holds no matter how
   far the colored fill extends beneath it (white on a bar tint failed 2.4:1). */
.cmp-track b { position: absolute; right: 3px; font-size: 10px; font-weight: 800; line-height: 12px; color: var(--ink); background: var(--bg0); padding: 0 4px; border-radius: 3px; }
.cmp-bar { display: block; height: 100%; }
.cmp-bar.a { background: var(--blue); }
/* brighter gold than --gold (#e3b341 reads "brown" on the dark track) so B's bar
   pops as strongly as A's blue */
.cmp-bar.b { background: var(--gold-hi); }

/* Head-to-head table: fixed layout (never overflows), values flank the centre
   label (A right-aligned, B left-aligned) so the two numbers sit together. */
.cmp-table { margin-top: 18px; }
.cmp-table table { table-layout: fixed; }
.cmp-table table thead th { cursor: default; position: static; }
.cmp-table th.num, .cmp-table td.num { width: 38%; }
.cmp-table th.cmp-stat, .cmp-table td.cmp-stat { width: 24%; }
/* Name headers carry their country's colour underline (blue=A / gold=B) so each
   column is anchored to its category-bar colour above. */
.cmp-table th.num { text-align: right; font-size: 15px; color: var(--ink); white-space: normal; overflow-wrap: break-word; text-transform: none; letter-spacing: 0; border-bottom: 2px solid var(--blue); }
.cmp-table th.num.cmp-right { text-align: left; border-bottom-color: var(--gold-hi); }
.cmp-table .cmp-stat { text-align: center; color: var(--ink-2); font-size: 12.5px; white-space: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cmp-table td.num { text-align: right; white-space: nowrap; }
.cmp-table td.num.cmp-right { text-align: left; }
/* Winner highlight = the WINNING country's own colour, matching the chart above
   (blue=A / gold=B). A gold-highlighted number therefore always means country B
   won — never a clash with whoever happens to be the stronger country. */
.cmp-table td.win { font-weight: 800; }
.cmp-table td.num.win:not(.cmp-right) { color: var(--blue); background: rgba(90,156,248,0.10); }
.cmp-table td.num.cmp-right.win { color: var(--gold-hi); background: rgba(227,179,65,0.08); }
.cmp-table tbody tr { cursor: default; }
.cmp-table tbody tr:hover { background: none; }

/* Inventories grouped by kind; each country's compact table side by side under its
   own label. Squared boxes, compact 3-col tables — fits, no horizontal scroll. */
.cmp-assets { margin-top: 8px; }
.cmp-kind { margin-top: 24px; }
.cmp-kind-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 700; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); }
.cmp-kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cmp-kind-col { min-width: 0; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; }
.cmp-kind-country { font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.cmp-empty { color: var(--ink-3); font-size: 12.5px; padding: 8px 0; }
.cmp-kind .asset-table { font-size: 12.5px; }
.cmp-kind .asset-table th, .cmp-kind .asset-table td { padding: 7px 6px; }
.asset-table.compact .asset-origin { min-width: 0; }
.asset-table.compact .origin-item { white-space: normal; }
@media (max-width: 760px) {
  .asset-detail-panel { grid-template-columns: 1fr; }
  .asset-detail-grid { grid-template-columns: 1fr; }
}

/* ---------- 8. Methodology + footer ---------- */
.prose {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.03);
  padding: 26px 30px; margin: 22px 0;
}
.prose h2 { margin-top: 0; font-size: 24px; font-weight: 800; }
.prose p { color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.prose strong { color: var(--ink); }
.prose code { background: var(--bg2); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.prose table { width: 100%; font-size: 14px; margin-top: 12px; border-collapse: collapse; }
.prose th, .prose td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }

.site-footer { border-top: 1px solid var(--line); margin-top: 44px; padding: 28px 0; }
.site-footer p { color: var(--ink-3); font-size: 12.5px; margin: 0; }

/* ---------- 9. Theaters — list ---------- */
.theater-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); margin-bottom: 24px; }
.theater-card {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.03);
  padding: 20px; color: var(--ink); display: block;
  transition: border-color .14s ease, transform .14s ease;
}
.theater-card:hover { border-color: var(--line-strong); transform: translateY(-2px); text-decoration: none; }
.theater-card h3 { margin: 12px 0 6px; font-size: 19px; font-weight: 750; text-align: center; }
.theater-card p { margin: 0 0 12px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.theater-asof { color: var(--ink-3); font-size: 12px; }
.theater-mini { display: flex; gap: 5px; }
.mini-swatch { width: 26px; height: 10px; border-radius: 3px; display: inline-block; }

/* VS orbit board */
.vs-board { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 10px 12px; margin: 14px 0 16px; }
.vs-display { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.cluster { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.orbit { position: relative; width: 168px; height: 168px; }
.orbit::before { content: ""; position: absolute; inset: 20px; border: 1px dashed var(--line-strong); border-radius: 50%; }
.orbit-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.orbit-core.multi { display: flex; align-items: center; justify-content: center; gap: 4px; }
.orbit-sat { position: absolute; left: 50%; top: 50%; }
.flag-core { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.35); box-shadow: 0 2px 9px rgba(0,0,0,0.55); display: block; }
.flag-core.paired { width: 52px; height: 52px; }
.flag-sat { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 1px 4px rgba(0,0,0,0.5); display: block; }
.flag-sat.merc { border: 2px dashed var(--up); }
.flag-sat.cobel { width: 42px; height: 42px; border: 2px solid var(--blue); box-shadow: 0 0 7px rgba(90,156,248,0.55); }
.flag-core.no-flag, .flag-sat.no-flag { display: flex; align-items: center; justify-content: center; background: var(--bg3); color: #fff; font-weight: 800; }
.flag-core.no-flag { font-size: 24px; }
.flag-sat.no-flag { font-size: 13px; }
.cluster-name { font-weight: 700; font-size: 13px; text-align: center; line-height: 1.25; }
.vs-label {
  align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong);
  font-weight: 800; font-size: 11px; text-transform: uppercase; color: var(--ink-3);
}

/* Atlas card visual */
.atlas-card-visual { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 14px 13px; margin: 14px 0 16px; }
.atlas-card-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 800; margin-bottom: 10px; }
.atlas-power-strip { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.atlas-power-dot { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.atlas-power-dot img { width: 23px; height: 16px; object-fit: cover; border-radius: 2px; }
.atlas-card-meta { margin-top: 10px; font-size: 12px; color: var(--ink-3); }

/* ---------- 10. Theaters — detail ---------- */
.theater-subtitle { margin: 12px 0 8px; font-size: 24px; font-weight: 800; color: var(--ink); }
.theater-desc { color: var(--ink-2); margin: 0 0 14px; line-height: 1.65; max-width: 75ch; }

/* Theater hero photo with belligerent flags pinned to the lower edge.
   Fixed 16:9 frame so every theater card crops to the same size. */
.theater-hero { position: relative; margin: 6px 0 18px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.28); line-height: 0; aspect-ratio: 16 / 9; }
.theater-hero-img { display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%; }
.theater-hero-flags { position: absolute; left: 0; right: 0; bottom: 0; line-height: normal;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 28px 16px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%); }
.theater-hero-flag { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); font-size: 15px; }
.theater-hero-flag.is-right { flex-direction: row-reverse; }
.theater-hero-flag img { width: 38px; height: 26px; object-fit: cover; border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.35); }
@media (max-width: 560px) {
  .theater-hero-flag { font-size: 13px; }
  .theater-hero-flag img { width: 30px; height: 20px; }
}
/* Atlas intro spans the full map width (the map below is full-width, not in the
   narrower map+legend layout that standard theaters use). */
.atlas-desc { max-width: none; }
.theater-toolbar { margin: 8px 0 16px; }
.theater-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }

.map-wrap {
  position: relative; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 8px; box-shadow: var(--shadow-2);
}
.atlas-map-wrap { margin-bottom: 18px; }
#theater-map { width: 100%; height: auto; display: block; }

/* base badges */
.base-badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 5px 26px; }
.legend-detail .base-badges { padding: 3px 0 4px; }
.ld-bases-label { padding-top: 6px; }
.base-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;
  padding: 2px 7px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.22); white-space: nowrap;
}
.base-flag { width: 17px; height: 12px; object-fit: cover; flex: none; border-radius: 1px; border: 1px solid rgba(255,255,255,0.45); display: block; }
.base-alleged { padding: 1px 4px; border-radius: 2px; background: rgba(255,255,255,0.16); color: inherit; font-size: 9px; letter-spacing: 0.04em; }

/* map svg behavior — DO NOT change the blend-mode rule */
.c-country { transition: fill 0.15s ease; }
.c-country.is-active, .c-region { mix-blend-mode: color; }
.c-region { opacity: 1; }
.atlas-hit-country, .atlas-hit-region { cursor: pointer; }
#hover-outline { pointer-events: none; }
#layer-lakes, #layer-rivers { pointer-events: none; }
.c-lake { fill: #16324e; stroke: #2a4f72; stroke-width: 0.4; vector-effect: non-scaling-stroke; }
.c-river { fill: none; stroke: #3f6f9e; stroke-width: 0.9; vector-effect: non-scaling-stroke; opacity: 0.7; }

/* city labels (overlay inset MUST match .map-wrap padding) */
#geo-overlay { position: absolute; inset: 8px; pointer-events: none; z-index: 2; overflow: hidden; }
.city { position: absolute; }
.city::before { content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #e6ebf0; box-shadow: 0 0 2px #000; }
.city.capital::before { left: -3px; top: -3px; width: 6px; height: 6px; background: #ffd34d; }
.city-name { position: absolute; left: 7px; top: -7px; white-space: nowrap; font-size: 9.5px; font-weight: 600; color: #e6ebf0; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.city.capital .city-name { font-size: 10.5px; }

/* tooltip */
.map-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(13,17,23,0.92); backdrop-filter: blur(6px);
  border: 1px solid var(--line-strong); border-radius: var(--r-m);
  padding: 8px 12px; max-width: 240px; box-shadow: var(--shadow-2);
}
.map-tooltip .tip-head { display: flex; align-items: center; gap: 8px; }
.map-tooltip .tip-flag { width: 28px; height: 19px; object-fit: contain; border-radius: 2px; border: 1px solid rgba(255,255,255,0.2); flex: none; }
.map-tooltip .tip-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.map-tooltip .tip-sub { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.map-tooltip .tip-bases { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; max-width: 220px; }
.map-tooltip.atlas-tip { width: 500px; max-width: min(500px, calc(100vw - 32px)); padding: 9px 11px 10px; }
.atlas-tip-matrix { display: grid; gap: 6px; margin-top: 8px; }
.atlas-tip-row { display: grid; grid-template-columns: 135px 1fr; gap: 8px; align-items: start; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.07); }
.atlas-tip-sector { color: var(--ink-2); font-size: 11px; line-height: 1.25; }
.atlas-tip-shares { display: flex; flex-wrap: wrap; gap: 4px; }
.atlas-tip-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; background: rgba(255,255,255,0.05); padding: 2px 5px; font-size: 11px; }
.atlas-tip-chip img { width: 17px; height: 12px; object-fit: cover; border-radius: 1px; border: 1px solid rgba(255,255,255,0.22); }
.atlas-tip-initial { width: 17px; height: 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 1px; font-size: 9px; font-weight: 900; color: #fff; background: var(--bg3); }
.atlas-tip-chip b { font-size: 11px; font-weight: 700; }
.atlas-tip-chip em { color: var(--gold); font-style: normal; font-weight: 800; }
.atlas-tip-chip.rest { opacity: 0.85; }
.atlas-tip-note { margin-top: 8px; color: var(--ink-2); font-size: 11.5px; line-height: 1.45; }
.map-disclaimer { position: absolute; right: 12px; bottom: 11px; z-index: 3; pointer-events: none; font-size: 10.5px; font-style: italic; color: var(--ink-2); background: rgba(13,17,23,0.6); padding: 2px 8px; border-radius: 4px; }

/* legend (right column) */
.legend {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.03); padding: 14px 16px;
}
.legend-section + .legend-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.legend-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); font-weight: 700; margin-bottom: 10px; }
.legend-hint { color: var(--ink-3); text-transform: none; letter-spacing: 0; font-weight: 400; }
.legend-item { border-bottom: 1px solid var(--line); }
.legend-item:last-of-type { border-bottom: none; }
.legend-item.off { opacity: 0.4; }
.legend-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13.5px; min-height: 36px; }
.legend-row.static { cursor: default; }
.legend-row input { accent-color: var(--gold); flex: none; }
.swatch { width: 16px; height: 16px; border-radius: 4px; display: inline-block; border: 1px solid rgba(255,255,255,0.15); flex: none; }
.legend-name-btn { flex: 1; display: flex; align-items: center; gap: 8px; background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.legend-name { font-weight: 650; }
.support-badge { margin-left: auto; font-size: 11px; color: var(--ink-2); background: var(--bg2); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.caret { color: var(--ink-3); font-size: 10px; width: 10px; flex: none; }
.legend-detail { padding: 2px 0 10px 26px; font-size: 12.5px; }
.ld-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: var(--ink-2); }
.ld-row b { color: var(--ink); font-weight: 650; text-align: right; }
.ld-note { color: var(--ink-2); font-style: italic; margin: 7px 0 0; line-height: 1.45; }
.legend-foot { color: var(--ink-3); font-size: 12px; margin: 12px 0 0; line-height: 1.5; }

/* camp columns */
.camps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.camp-col {
  background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.03); padding: 12px 16px;
}
.camp-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.camp-flags { display: flex; align-items: center; gap: 4px; flex: none; }
.camp-flag { width: 34px; height: 23px; }
.camp-head-text { line-height: 1.25; }
.camp-title { font-weight: 800; font-size: 16px; }
.camp-sub { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.camp-swatch { width: 34px; height: 23px; border-radius: 4px; flex: none; }

/* commitment meter */
.meter { display: inline-flex; gap: 2px; margin-left: auto; }
.meter-seg { width: 8px; height: 12px; border-radius: 2px; border: none; box-shadow: inset 0 0 0 1px var(--line); box-sizing: border-box; }
.merc-bar, .cobel-bar { margin-left: auto; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
/* U-04: dark ink on the green pill (7.66:1 vs 2.54 for white); the blue pill's
   white already clears (6.33:1) and dark ink there would fail (3.07). */
.merc-bar { background: var(--up); color: var(--bg0); }
.cobel-bar { background: var(--blue-dim); }
.camp-listhead { display: flex; justify-content: space-between; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); padding: 4px 0 2px; margin-top: 2px; }
.camp-listhead .lh-meter { padding-right: 14px; }
.camp-subhead { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 3px; padding-bottom: 3px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); }
.camp-subhead .lh-meter { font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; padding-right: 14px; }
.camp-subhead ~ .camp-subhead { margin-top: 26px; }

/* backer tier boxes — left-accent treatment */
.backer-box { background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-s); padding: 8px 12px 4px; margin-top: 12px; }
.backer-box.key { border-left-color: var(--up); }
.backer-box.minor { border-left-color: #b0ba26; }
.backer-box.cobelbox { border-left-color: var(--blue); }
.backer-box.mercs { border-left-color: #9aa6b2; }
.backer-box.neutral { border-left-color: #98a1ab; }
.backer-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 5px; margin-bottom: 3px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); }
.backer-box.key .backer-head { color: #5fd07a; }
.backer-box.minor .backer-head { color: #cdd84a; }
.backer-box.cobelbox .backer-head { color: #6ba3e8; }
.backer-box.mercs .backer-head { color: #9aa6b2; }
.backer-box.neutral .backer-head { color: #98a1ab; }
.backer-head .lh-meter { font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; padding-right: 14px; }
.sub-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); opacity: 0.85; margin: 7px 0 1px; padding-left: 2px; }
.bloc-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; border: 1px solid; border-radius: 3px; padding: 0 4px; margin-left: 7px; white-space: nowrap; flex: none; }
.bloc-flag { width: 19px; height: 13px; object-fit: cover; border-radius: 2px; border: 1px solid rgba(255,255,255,0.25); margin-left: 7px; flex: none; }
.ns-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-left: 7px; white-space: nowrap; }

/* fracture points */
.fractures { margin-top: 30px; }
.fractures-title { font-size: 19px; margin: 0 0 8px; font-weight: 750; }
.fractures-intro { color: var(--ink-2); max-width: 820px; margin: 0 0 18px; line-height: 1.6; }
.fractures-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; align-items: start; }
.fracture {
  background: var(--bg1); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
}
.fracture > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 16px; font-size: 15px; font-weight: 650; color: var(--ink); }
.fracture > summary:hover { color: var(--gold); }
.fracture[open] > summary { color: var(--gold); border-bottom: 1px solid var(--line); }
.fracture > summary::-webkit-details-marker { display: none; }
.fracture > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; flex: none; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .14s ease; }
.fracture[open] > summary::after { transform: rotate(45deg); }
.fracture-body { padding: 12px 16px 14px; }
.fracture-body p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.fracture-body p:last-child { margin-bottom: 0; }

/* legend flag (replaces swatch where a flag exists) */
.flag { width: 24px; height: 16px; object-fit: contain; flex: none; display: block; border-radius: 2px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }

/* ---------- 11. Influence atlas ---------- */
.atlas-section { margin-top: 24px; }
.atlas-section-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin: 0 0 12px; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.atlas-section-head h3 { margin: 0; font-size: 18px; font-weight: 750; }
.atlas-section-head span { color: var(--ink-3); font-size: 12px; text-align: right; }
.atlas-target-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 14px; align-items: start; }
.atlas-target-card { background: var(--bg1); border: 1px solid var(--line); border-top: 3px solid; border-radius: var(--r-m); box-shadow: var(--shadow-1); padding: 14px 16px; }
.atlas-target-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.atlas-target-head h4 { margin: 0; font-size: 16px; font-weight: 700; }
.atlas-target-head span { color: var(--ink-3); font-size: 11px; font-weight: 900; letter-spacing: 0.07em; }
.atlas-target-compact { padding: 12px 14px; }
.atlas-target-compact .atlas-target-head { margin-bottom: 0; }

/* Competing powers: circular leaderboard + per-power cards */
.atlas-leaderboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; margin: 4px 0 26px; }
.atlas-ring-item { width: 92px; text-align: center; }
.atlas-ring-wrap { position: relative; width: 84px; height: 84px; margin: 0 auto 8px; }
.atlas-ring { width: 100%; height: 100%; display: block; }
.atlas-ring-track { fill: none; stroke: var(--bg3); stroke-width: 3; }
.atlas-ring-fill { fill: none; stroke-width: 3; stroke-linecap: round; }
.atlas-ring-flag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 32px; height: 22px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,0.25);
}
.atlas-ring-flag.no-flag { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; }
.atlas-ring-rank {
  position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--line-strong); color: var(--ink-2);
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.atlas-ring-name { font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.atlas-ring-pct { font-size: 14px; font-weight: 800; margin-top: 1px; }

.atlas-power-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; align-items: start; }
.atlas-power-card {
  background: var(--bg1); border: 1px solid var(--line); border-top: 3px solid; border-radius: var(--r-m);
  box-shadow: var(--shadow-1); padding: 14px 16px;
}
.atlas-pc-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.atlas-pc-flag { width: 34px; height: 23px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,0.22); flex: none; }
.atlas-pc-flag.no-flag { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.atlas-pc-id { min-width: 0; }
.atlas-pc-name { font-size: 16px; font-weight: 800; }
.atlas-pc-meta { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atlas-pc-share { margin-left: auto; font-size: 20px; font-weight: 800; flex: none; }
.atlas-pc-states { display: grid; gap: 7px; }
.atlas-pc-state { display: grid; grid-template-columns: 1fr 90px 36px; align-items: center; gap: 9px; }
.atlas-pc-state-name { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atlas-pc-bar { height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; }
.atlas-pc-bar > span { display: block; height: 100%; border-radius: 3px; }
.atlas-pc-state-pct { text-align: right; font-size: 12.5px; font-weight: 650; color: var(--ink); }

/* ---------- 12. Responsive ---------- */
@media (max-width: 900px) {
  .cmp-head { flex-direction: column; }
  .cmp-side.right { align-items: flex-start; text-align: left; }
}
@media (max-width: 720px) { .cmp-kind-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .theater-layout { grid-template-columns: 1fr; } }
/* Rankings columns shed progressively so the table always FITS — never scrolls.
   Cols: 1 #, 2 Country, 3 Score, 4 Active, 5 Aircraft, 6 Tanks, 7 Naval, 8 Subs,
   9 Budget (+10 lab col when active). */
@media (max-width: 1020px) {
  thead th:nth-child(8), tbody td:nth-child(8) { display: none; } /* Subs */
}
@media (max-width: 900px) {
  thead th:nth-child(6), tbody td:nth-child(6) { display: none; } /* Tanks */
}
@media (max-width: 760px) {
  .sections { columns: 1; }
  .brand-text small { display: none; }
  table { font-size: 13px; }
  thead th, tbody td { padding: 10px 10px; }
  thead th:nth-child(7), tbody td:nth-child(7) { display: none; } /* Naval */
  .atlas-section-head { display: block; }
  .atlas-section-head span { display: block; text-align: left; margin-top: 5px; }
  .atlas-target-grid { grid-template-columns: 1fr; }
  .map-tooltip.atlas-tip { width: 360px; }
  .atlas-tip-row { grid-template-columns: 1fr; }
  .lab-row { grid-template-columns: 100px 1fr 48px; }
  .lab-row:has(.seg) { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  thead th:nth-child(4), tbody td:nth-child(4) { display: none; } /* Active */
  .origin-item { white-space: normal; } /* U-08: full asset tables wrap origins at 320px */
  .name-cell { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .cmp-table .cmp-stat { min-width: 0; font-size: 12px; }
  .lab-label { width: 92px; }
  .detail-head h2 { font-size: 24px; }
  .wrap { padding: 0 16px; }
}

/* ============ Geopolitical Power Hierarchy ============ */
/* Tier palette: cool→warm as magnitude rises. */
.t-super    { --tier: #f0c75e; --tier-ink: #2a1d02; }
.t-great    { --tier: #e3853f; --tier-ink: #2a1402; }
.t-major    { --tier: #d4604a; --tier-ink: #2a0d06; }
.t-middle   { --tier: #6f8fd4; --tier-ink: #06112a; }
.t-minor    { --tier: #5c7088; --tier-ink: #fff; }
.t-marginal { --tier: #44505f; --tier-ink: #cdd6e2; }

.power-section { margin-top: 18px; }
.power-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: center; }
.power-radar-wrap { display: flex; justify-content: center; }
.power-radar { width: 100%; max-width: 300px; height: auto; }
.power-radar .pr-ring { fill: none; stroke: var(--line); }
.power-radar .pr-spoke { stroke: var(--line); }
.power-radar .pr-axis { fill: var(--ink-2); font-size: 11px; font-weight: 600; }
.power-radar .pr-blob { stroke-width: 2; }
.power-radar .pr-blob.a { fill: rgba(90,156,248,0.22); stroke: var(--blue); }
.power-radar .pr-blob.b { fill: rgba(227,179,65,0.20); stroke: var(--gold); }

.pwr-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pwr-chip {
  display: grid; grid-template-columns: auto auto; align-items: baseline;
  gap: 2px 8px; padding: 9px 12px; border-radius: var(--r-s);
  background: var(--bg2); border: 1px solid var(--line);
  border-left: 3px solid var(--tier);
}
.pwr-dim { font-size: 12px; color: var(--ink-2); }
.pwr-tier { font-size: 13px; font-weight: 700; color: var(--tier); text-align: right; }
.pwr-floor { font-size: 9px; vertical-align: super; opacity: 0.8; margin-left: 2px; }
.pwr-score { font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pwr-score small { color: var(--ink-2); font-size: 10px; }
.pwr-chip .reach {
  grid-column: 1 / -1; font-size: 11px; color: var(--ink-2);
  margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--line); line-height: 1.4;
}
.reach-k { color: var(--tier); font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 0.04em; margin-right: 5px; }

/* compact tier label used in tables/legend */
.pwr-mini {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--tier); color: var(--tier-ink);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}

.power-cmp { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: center; }
.power-cmp-table table { width: 100%; }
.power-cmp-table .pwr-mini { margin-right: 4px; }

/* Power Hierarchy page */
.ph-intro { color: var(--ink-2); line-height: 1.6; margin: 4px 0 14px; }
.ph-count, .ph-card .ph-count { color: var(--muted); font-style: italic; }
.ph-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ph-table th.ph-dim { cursor: pointer; text-align: center; font-size: 11px; line-height: 1.25; }
.ph-table th.ph-dim.active { color: var(--gold); }
.ph-table td.ph-cell { text-align: center; }
.ph-table td.ph-cell.col-active { background: rgba(227,179,65,0.06); }
.ph-table .ph-name { text-align: left; position: sticky; left: 0; background: var(--bg1); }
.ph-table thead .ph-name { background: var(--bg2); z-index: 2; }
.ph-score { display: block; font-size: 11px; color: var(--ink-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ph-table tbody tr { cursor: pointer; }
.cmp-empty-inline { color: var(--muted); }

@media (max-width: 760px) {
  .power-grid, .power-cmp { grid-template-columns: 1fr; }
  .power-radar-wrap { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .pwr-chips { grid-template-columns: 1fr; }
}

/* Per-model effectiveness pill (researched quality layer) */
.eff-pill {
  display: inline-block; min-width: 30px; text-align: center; padding: 2px 7px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; background: var(--bg3);
}
.eff-pill.hi { color: var(--up, #2ecc71); border: 1px solid rgba(46,204,113,0.35); }
.eff-pill.mid { color: var(--gold-hi); border: 1px solid rgba(227,179,65,0.35); }
.eff-pill.lo { color: #e07b6a; border: 1px solid rgba(224,123,106,0.35); }
.eff-scale { color: var(--ink-3); font-size: 10px; margin-left: 3px; }
td.asset-eff { width: 1%; }

/* Out-of-service / grounded equipment */
.grounded-tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  color: #e07b6a; background: rgba(224,123,106,0.12); border: 1px solid rgba(224,123,106,0.4);
  text-transform: uppercase;
}
.grounded-dot { color: #e07b6a; font-weight: 700; margin-left: 4px; }
.grounded-row .asset-model .asset-name,
.grounded-row .asset-model .asset-expand-toggle { color: var(--ink-3); text-decoration-color: rgba(224,123,106,0.5); }
.grounded-row td { opacity: 0.82; }

/* Arms self-sufficiency (M8-3) — per-tier domestic production share. Band colours
   reuse the eff-pill palette so "more domestic" reads the same as "more effective". */
.ss-bars { display: grid; gap: 8px; }
.ss-row { display: grid; grid-template-columns: 68px 1fr 52px; align-items: center; gap: 10px; }
.ss-tier { font-size: 12px; color: var(--ink-2); }
.ss-track { height: 8px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--line); overflow: hidden; }
.ss-fill { display: block; height: 100%; border-radius: 999px; }
.ss-fill.hi { background: var(--up); }
.ss-fill.mid { background: var(--gold); }
.ss-fill.lo { background: #e07b6a; }
.ss-val { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ss-suppliers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.ss-sup-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.ss-sup {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: var(--r-s); background: var(--bg2); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2);
}
.ss-sup b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .ss-row { grid-template-columns: 56px 1fr 46px; gap: 8px; }
}

/* Alliance & proxy rollup (M8-4) — standing relationships aggregated across theaters. */
.ar-block { display: grid; grid-template-columns: 132px 1fr; gap: 10px; align-items: start; margin-bottom: 8px; }
.ar-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); padding-top: 5px; }
.ar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  border-radius: var(--r-s); background: var(--bg2); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2); text-decoration: none;
}
a.ar-chip:hover { border-color: var(--line-strong); color: var(--ink); }
a.ar-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.ar-chip em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.ar-flag { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; flex: none; }
@media (max-width: 560px) {
  .ar-block { grid-template-columns: 1fr; gap: 4px; }
  .ar-label { padding-top: 0; }
}

/* Stale-data badge (M9-1) — a section past its refresh window says so. */
.stale-badge {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: #f0c75e; background: rgba(227,179,65,0.12); border: 1px solid rgba(227,179,65,0.45);
  vertical-align: middle; white-space: nowrap; cursor: help;
}