/* STRAIT styles. Accessibility notes:
   - All text sizes are rem (min 0.75rem) so the Accessibility panel's text size works; palettes meet WCAG 2.2 AA contrast.
   - There are no keyframe animations and nothing flashes. "Calm mode" (default) also removes the few transitions.
   - Themes are classes on <html>: theme-light, hc (high contrast), cb (colour-blind-safe palette), calm, t1/t2 (larger text). */
:root {
  color-scheme: dark;
  --bg: #0f1216; --surface: #171b21; --surface-2: #1e232b; --line: #343b47; --edge: #808794;
  --text: #ebe9e4; --text-2: #b9bec7; --muted: #9aa1ad;
  --oil: #e0a030; --oil-fill: #e0a030; --on-oil: #1a1405; --blue: #6aa8f5; --focus: #8ab8ff;
  --s4: #3fd0a0; --s3: #e0a030; --s2: #f07a4a; --s1: #f28b8b; --s0: #8a919c;
  --up: #52c9a0; --down: #f28b8b; --danger: #f5b0b0; --danger-line: #a04444; --node-ink: #10141a;
  --map1: #1a2029; --map2: #12161b; --hl: rgba(224,160,48,.13);
  --tip-bg: #0b0e12; --tip-line: #566074;
  --tag-bad-bg: #4a2020; --tag-bad-fg: #f8c0c0; --tag-warn-bg: #4a3314; --tag-warn-fg: #f5d08a; --tag-info-bg: #1c3350; --tag-info-fg: #b5d3f8;
  --tag-good-bg: #17392e; --tag-good-fg: #a9e4cb; --tag-real-bg: #173d4e; --tag-real-fg: #b3e2f5;
  --chip-hard-bg: #4a2a14; --chip-hard-fg: #f5c4a0;
  --claude: #e8916b; --claude-bg: #4a2a1c; --gpt: #5fd0b8; --gpt-bg: #153f37; --engine-bg: #262b33;
  --radius: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html.theme-light {
  color-scheme: light;
  --bg: #f4f2ec; --surface: #ffffff; --surface-2: #edeae2; --line: #d3cdc0; --edge: #6b665b;
  --text: #1b1a17; --text-2: #403f3a; --muted: #595750;
  --oil: #8a5800; --oil-fill: #e0a030; --on-oil: #1a1405; --blue: #0b5cc4; --focus: #0b5cc4;
  --s4: #0a7a54; --s3: #8a5c00; --s2: #b53f0e; --s1: #b3261e; --s0: #5b616b;
  --up: #066a47; --down: #b3261e; --danger: #a1281f; --danger-line: #c06a62; --node-ink: #ffffff;
  --map1: #ebe8de; --map2: #dedbcf; --hl: rgba(224,160,48,.22);
  --tag-bad-bg: #fbdcdc; --tag-bad-fg: #7a1d1d; --tag-warn-bg: #fbe6c4; --tag-warn-fg: #6b4300; --tag-info-bg: #d6e6fb; --tag-info-fg: #12407a;
  --tag-good-bg: #d3f0e4; --tag-good-fg: #0d5a3c; --tag-real-bg: #d3ecf7; --tag-real-fg: #0a4a66; --chip-hard-bg: #fbe0cc; --chip-hard-fg: #7a3300;
  --claude: #a3461f; --claude-bg: #f8e0d4; --gpt: #0b6b58; --gpt-bg: #d2efe8; --engine-bg: #e4e1d8;
}
html.hc {
  --bg: #000000; --surface: #0a0a0a; --surface-2: #141414; --line: #ffffff; --edge: #ffffff;
  --text: #ffffff; --text-2: #ffffff; --muted: #e4e4e4; --oil: #ffd34d; --oil-fill: #ffd34d; --blue: #8ab8ff; --focus: #ffff00;
  --s4: #5cffc4; --s3: #ffd34d; --s2: #ff9966; --s1: #ff9a9a; --s0: #d0d0d0; --up: #5cffc4; --down: #ff9a9a; --danger: #ffb3b3; --danger-line: #ffffff;
  --map1: #000000; --map2: #000000; --tip-bg: #000000; --tip-line: #ffffff;
  --claude: #ffb38f; --claude-bg: #000000; --gpt: #7fffe4; --gpt-bg: #000000; --engine-bg: #000000;
}
html.hc.theme-light { --bg: #ffffff; --surface: #ffffff; --surface-2: #f2f2f2; --line: #000000; --edge: #000000; --text: #000000; --text-2: #000000; --muted: #1a1a1a; --oil: #6b4400; --blue: #0036a3; --focus: #0036a3;
  --s4: #005c3d; --s3: #6b4400; --s2: #8f2f00; --s1: #8f0000; --s0: #333333; --up: #005c3d; --down: #8f0000; --danger: #8f0000; --danger-line: #000000; --node-ink: #ffffff; --map1: #ffffff; --map2: #ffffff; }
/* colour-blind-safe status colours (Okabe-Ito); every status also has a number and a word, never colour alone */
html.cb { --s4: #56b4e9; --s3: #f0e442; --s2: #e69f00; --s1: #ff7a45; --s0: #9aa1ad; --up: #56b4e9; --down: #ff7a45; }
html.cb.theme-light { --s4: #0072b2; --s3: #7a6a00; --s2: #a85d00; --s1: #b33d00; --s0: #5b616b; --up: #0072b2; --down: #b33d00; }
html.cb .up::before { content: '\25B2\00a0'; } html.cb .down::before { content: '\25BC\00a0'; }
html.t1 { font-size: 112.5%; } html.t2 { font-size: 125%; }
/* calm mode (default) and the OS reduced-motion setting: no transitions or animation at all */
html.calm *, html.calm *::before, html.calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 0.875rem; line-height: 1.45; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--oil-fill); color: var(--on-oil); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 8px; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; background: var(--surface-2); border: 1px solid var(--edge); border-radius: 7px; padding: 6px 12px; min-height: 2rem; }
button:hover:not(:disabled) { border-color: var(--text); }
button:disabled { opacity: .55; cursor: not-allowed; }
button.primary { background: var(--oil-fill); color: var(--on-oil); border-color: var(--oil-fill); font-weight: 600; }
button.danger { border-color: var(--danger-line); color: var(--danger); }
button.ghost { background: transparent; }
select, input[type=text], input[type=number] { background: var(--surface-2); border: 1px solid var(--edge); border-radius: 7px; padding: 6px 8px; width: 100%; min-height: 2rem; }
input[type=checkbox] { width: 1.5rem; height: 1.5rem; margin: 0 .25rem 0 0; accent-color: var(--oil-fill); vertical-align: middle; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html.hc :focus-visible { outline-width: 4px; }
html.hc .card, html.hc button, html.hc select, html.hc input[type=text] { border-width: 2px; }
a { color: var(--blue); } html.hc a { text-decoration: underline; }
h1, h2 { margin: 0; }
h3, .h3 { margin: 0 0 8px; font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
h3 small, .h3 small { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; margin-left: 6px; }
small { color: var(--muted); }

#top { display: flex; align-items: center; gap: 22px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: baseline; gap: 8px; margin-right: 6px; font-size: 1rem; }
.brand b { font-size: 1.25rem; letter-spacing: .18em; }
.brand small { font-size: 0.75rem; }
.drop { width: 12px; height: 16px; background: var(--oil-fill); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; align-self: center; transform: rotate(180deg); }
.hstat { display: flex; flex-direction: column; min-width: 78px; }
.hstat .lbl { font-size: 0.75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.hstat b { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.hstat small { font-size: 0.75rem; }
.timer .bar { height: 4px; background: var(--line); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.timer .bar i { display: block; height: 100%; background: var(--oil-fill); width: 0; }
.hright { margin-left: auto; display: flex; gap: 10px; align-items: center; color: var(--text-2); flex-wrap: wrap; }

main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); gap: 12px; padding: 12px; align-items: start; }
main:focus { outline: none; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.card:has(table) { overflow-x: auto; }
#left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.row2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
#mapCard { position: relative; padding: 8px; }
#map { width: 100%; height: auto; display: block; background: radial-gradient(ellipse at 60% 45%, var(--map1) 0%, var(--map2) 70%); border-radius: 8px; }
.t1c { fill: var(--text); } .t2c { fill: var(--text-2); } .t3c { fill: var(--muted); } .ink { fill: var(--node-ink); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px 4px 0; color: var(--text-2); font-size: 0.8125rem; }
.legend .note { margin-left: auto; color: var(--muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.s4 { background: var(--s4); } .s3 { background: var(--s3); } .s2 { background: var(--s2); } .s1 { background: var(--s1); } .s0 { background: var(--s0); }
.selcard { position: absolute; left: 16px; bottom: 48px; width: 260px; background: var(--surface); border: 1px solid var(--edge); border-radius: 9px; padding: 10px; font-size: 0.8125rem; }
.selcard h4 { margin: 0 0 4px; font-size: 0.9375rem; }
.selcard .kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.selcard .kv span:nth-child(odd) { color: var(--muted); }

#news { list-style: none; margin: 0; padding: 0; max-height: 232px; overflow: auto; font-size: 0.8125rem; }
#news li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; }
#news li:last-child { border: 0; }
.tag { flex: none; font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); height: fit-content; margin-top: 2px; }
.tag.coup, .tag.collapse, .tag.final { background: var(--tag-bad-bg); color: var(--tag-bad-fg); }
.tag.strike, .tag.choke, .tag.war { background: var(--tag-warn-bg); color: var(--tag-warn-fg); }
.tag.headline, .tag.statement { background: var(--tag-info-bg); color: var(--tag-info-fg); }
.tag.deal { background: var(--tag-good-bg); color: var(--tag-good-fg); }
.tag.real { background: var(--tag-real-bg); color: var(--tag-real-fg); }
#news time { color: var(--muted); font-size: 0.75rem; display: block; }

nav#tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; background: var(--surface); padding: 4px; border-radius: 10px; border: 1px solid var(--line); }
nav#tabs button { flex: 1 0 15%; border: 0; background: transparent; padding: 8px 2px; color: var(--text-2); font-size: 0.8125rem; }
nav#tabs button[aria-selected=true] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 2px var(--edge); font-weight: 600; }
#panel { display: flex; flex-direction: column; gap: 10px; }
#panel:focus { outline: none; }
#right { position: sticky; top: 64px; max-height: calc(100vh - 76px); overflow: auto; padding-right: 2px; }

.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.hero .name { font-size: 1.125rem; font-weight: 700; }
.hero .score { font-size: 1.875rem; font-weight: 700; color: var(--oil); font-variant-numeric: tabular-nums; line-height: 1; }
.meter { height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 6px 0 2px; }
.meter i { display: block; height: 100%; border-radius: 5px; }
.kvgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kvgrid div { background: var(--surface-2); border-radius: 8px; padding: 7px 9px; }
.kvgrid label { display: block; font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kvgrid b { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.kvgrid .neg b { color: var(--down); } .kvgrid .pos b { color: var(--up); }
.lever { margin: 10px 0; }
.lever .top { display: flex; justify-content: space-between; }
.lever .top b { font-variant-numeric: tabular-nums; }
.lever p { margin: 2px 0 0; font-size: 0.8125rem; color: var(--muted); }
input[type=range] { width: 100%; accent-color: var(--oil-fill); min-height: 1.5rem; }
.seg { display: flex; gap: 4px; }
.seg button { flex: 1; padding: 6px 4px; }
.seg button.on { background: var(--oil-fill); color: var(--on-oil); border-color: var(--oil-fill); font-weight: 600; }
.btnrow { display: flex; flex-wrap: wrap; gap: 6px; }
.act { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.act:last-child { border: 0; }
.act span small { display: block; }
.rel { display: inline-block; width: 70px; height: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; position: relative; vertical-align: middle; }
.rel i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.rel::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--text-2); }
table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
th { text-align: left; font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 4px 6px; }
td { padding: 6px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
tr.me td { background: var(--hl); }
tr.out td { color: var(--muted); text-decoration: line-through; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--surface-2); }
.pill { font-size: 0.75rem; padding: 1px 7px; border-radius: 9px; background: var(--surface-2); color: var(--text-2); margin-left: 4px; }
.pill.me { background: var(--oil-fill); color: var(--on-oil); }
/* who leads each nation: a human, Claude, ChatGPT, the game engine or a Claude regent (also said in words, never by colour alone) */
.pill.ctl-claude { background: var(--claude-bg); color: var(--claude); border: 1px solid var(--claude); }
.pill.ctl-gpt { background: var(--gpt-bg); color: var(--gpt); border: 1px solid var(--gpt); }
.pill.ctl-engine { background: var(--engine-bg); color: var(--text-2); }
.pill.ctl-human { background: var(--tag-info-bg); color: var(--tag-info-fg); }
.field { margin: 8px 0; } .field label { display: block; font-size: 0.8125rem; color: var(--text-2); margin-bottom: 3px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.msg { font-size: 0.8125rem; color: var(--text-2); margin-top: 6px; min-height: 18px; }
.leader { font-size: 0.8125rem; color: var(--text-2); }
.leader b { color: var(--text); font-weight: 600; }
.up { color: var(--up); } .down { color: var(--down); }
.sitrep { font-size: 0.8125rem; color: var(--text-2); margin: 6px 0 0; padding-left: 18px; }
.sitrep li { margin: 4px 0; }
.segs { display: flex; gap: 4px; margin: 6px 0; }
.segs button { flex: 1; padding: 6px 2px; font-size: 0.8125rem; }
.segs button.on { background: var(--oil-fill); color: var(--on-oil); border-color: var(--oil-fill); font-weight: 600; }
.fundrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* tooltips */
.hint { border-bottom: 1px dotted var(--muted); cursor: help; }
.info:not(.tag) { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--edge); color: var(--text-2); font-size: 0.75rem; font-weight: 700; font-style: italic; cursor: help; vertical-align: middle; }
.info:not(.tag)::after { content: ''; position: absolute; inset: -4px; }
[data-tip] { cursor: help; }
#tipbox { position: fixed; z-index: 40; max-width: 340px; background: var(--tip-bg); color: #ebe9e4; border: 1px solid var(--tip-line); border-radius: 9px; padding: 9px 11px; font-size: 0.8125rem; line-height: 1.45; box-shadow: 0 8px 28px rgba(0,0,0,.45); pointer-events: none; }
#tipbox .tt-title { font-weight: 700; color: #f0b441; margin-bottom: 3px; font-size: 0.875rem; }
#tipbox .tt-body { color: #c9ced6; margin: 2px 0; }
#tipbox .tt-up { color: #7ee0b8; margin: 2px 0; } #tipbox .tt-up::before { content: '\25B2\00a0'; }
#tipbox .tt-down { color: #f6a0a0; margin: 2px 0; } #tipbox .tt-down::before { content: '\25BC\00a0'; }
#tipbox .tt-eq { color: #c3cde0; margin: 2px 0; font-style: italic; }
#tipbox .tt-link { color: #a4c6f5; margin: 2px 0; } #tipbox .tt-link::before { content: '\2192\00a0'; }
/* trilemma */
.tri-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 10px; align-items: center; margin: 8px 0; }
.tri { width: 100%; max-width: 300px; height: auto; }
.tri g { cursor: help; }
.tri-note p { margin: 4px 0; }
.ipbox { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 8px 0; }
.inl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.inl select { width: auto; max-width: 170px; }
/* coalitions, deals */
.coal { border: 1px solid var(--line); border-radius: 9px; padding: 9px; margin: 8px 0; background: var(--surface-2); }
.coal .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.members { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.chip { font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 9px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
.chip.me { background: var(--oil-fill); color: var(--on-oil); border-color: var(--oil-fill); }
.chip.hard { background: var(--chip-hard-bg); color: var(--chip-hard-fg); } .chip.easy { background: var(--tag-good-bg); color: var(--tag-good-fg); }
.invlist { max-height: 150px; overflow: auto; border: 1px solid var(--edge); border-radius: 8px; padding: 4px 8px; }
.invrow { display: flex; align-items: center; gap: 4px; padding: 4px 0; cursor: pointer; }
.invrow small { margin-left: auto; }
.tpls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.tpls button { padding: 4px 9px; font-size: 0.8125rem; }
.sweet { margin: 8px 0; }
.sweet .seg { margin: 6px 0; }
.chk { display: block; margin: 6px 0; font-size: 0.8125rem; cursor: pointer; }
.dmeter { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.dmeter .bar { flex: 1; height: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.dmeter .bar i { display: block; height: 100%; width: 0; border-radius: 6px; transition: width .25s; }
.reasons { list-style: none; margin: 4px 0; padding: 0; font-size: 0.8125rem; color: var(--text-2); }
.reasons li { padding: 1px 0; } .reasons li.up { color: var(--up); } .reasons li.down { color: var(--down); } .reasons li.muted { color: var(--muted); }
.counter { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--hl); border: 1px solid var(--oil); border-radius: 8px; padding: 8px; margin-top: 6px; font-size: 0.8125rem; }
.empty { text-align: center; padding: 22px 10px; color: var(--text-2); }
/* real-world card */
.real .rv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.real .rv div { background: var(--surface-2); border-radius: 8px; padding: 7px 9px; }
.real .rv label { display: block; font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.real .rv b { font-size: 1rem; font-variant-numeric: tabular-nums; } .real .rv small { display: block; }
.real ul.heads { list-style: none; padding: 0; margin: 6px 0; font-size: 0.8125rem; }
.real ul.heads li { padding: 5px 0; border-top: 1px solid var(--line); }
.real details { margin-top: 6px; font-size: 0.8125rem; } .real summary { cursor: pointer; color: var(--text-2); min-height: 1.5rem; }
details.datatable { margin-top: 8px; font-size: 0.8125rem; } details.datatable summary { cursor: pointer; color: var(--text-2); }

#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--edge); padding: 9px 16px; border-radius: 9px; opacity: 0; pointer-events: none; transition: opacity .25s; max-width: 90vw; z-index: 20; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
#toast.on { opacity: 1; }
#toast.bad { border-color: var(--danger-line); border-width: 2px; }
#overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 94%, transparent); z-index: 10; overflow: auto; padding: 24px 16px; }
#overlay .wrap { max-width: 1080px; margin: 0 auto; }
#overlay .ttl { margin: 0 0 4px; letter-spacing: .12em; font-size: 2rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 16px 0; }
.ccard { background: var(--surface); border: 1px solid var(--edge); border-radius: 10px; padding: 12px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.ccard:hover:not(:disabled) { border-color: var(--oil); }
.ccard b { font-size: 0.9375rem; }
.ccard p { margin: 0; font-size: 0.8125rem; color: var(--text-2); flex: 1; }
.podium { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.podium > div { flex: 1; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.podium .first { border-color: var(--oil); border-width: 2px; }
.podium big { font-size: 1.625rem; color: var(--oil); display: block; }
/* accessibility dialog */
.a11y h2 { font-size: 1.25rem; margin-bottom: 6px; }
.a11y .opt { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.a11y .opt p { margin: 2px 0 0; font-size: 0.8125rem; color: var(--text-2); max-width: 46ch; }
.a11y .box { max-width: 640px; margin: 0 auto; background: var(--surface); border: 2px solid var(--edge); border-radius: 12px; padding: 18px; }

svg text { font-family: inherit; }
.node { cursor: pointer; }
.node:hover circle.body { stroke: var(--text); }
.lane { fill: none; stroke-linecap: round; }
.owner table { min-width: 560px; }

@media (forced-colors: active) {
  .meter i, .rel i, .dmeter .bar i, .dot { forced-color-adjust: none; }
  button, select, input { border: 1px solid ButtonText; } :focus-visible { outline: 3px solid Highlight; }
}
@media (max-width: 960px) {
  .tri-wrap { grid-template-columns: 1fr; }
  main { display: flex; flex-direction: column; }
  #left { display: contents; }
  #mapCard { order: 1; } #right { order: 2; } .row2 { order: 3; }
  #right { position: static; max-height: none; }
  .row2 { grid-template-columns: 1fr; }
  #top { gap: 14px; }
  .selcard { position: static; width: auto; margin-top: 8px; }
  #top { position: static; }          /* a tall sticky header would eat a phone screen (also helps zoomed-in reading) */
}

/* reflow at 320px (WCAG 1.4.10): nothing may force the page to scroll sideways; wide tables scroll inside their own card */
main > *, #panel > *, .card, .row2 > * { min-width: 0; }
.card { overflow-wrap: break-word; }
.kvgrid > div, .real .rv > div { min-width: 0; }
#tabs { overflow-x: auto; max-width: 100%; }
@media (max-width: 480px) {
  main { padding: 8px; gap: 8px; }
  .kvgrid, .real .rv { gap: 6px; }
  .kvgrid div, .real .rv div { padding: 6px 7px; }
  .kvgrid label, .real .rv label { font-size: 0.6875rem; letter-spacing: .03em; }
  .act { flex-wrap: wrap; }
  #top { padding-left: 8px; padding-right: 8px; }
}
.tag { overflow-wrap: normal; white-space: nowrap; flex: none; }
@media (max-width: 960px) { main { align-items: stretch; } #right, #tabs { min-width: 0; max-width: 100%; } }
.kvgrid label, .real .rv label { overflow-wrap: anywhere; }

/* ---------- world map: ocean, land, nations shaded by stability, leader lines to a nation's true location ---------- */
:root { --land: #1c232d; --land-line: #323b48; --ocean: #0f141b; }
html.theme-light { --land: #dde1e6; --land-line: #b9bfc7; --ocean: #eef2f6; }
html.hc { --land: #141414; --land-line: #8a8a8a; --ocean: #000000; }
html.hc.theme-light { --land: #ececec; --land-line: #444444; --ocean: #ffffff; }
#map { background: var(--ocean); border-radius: 8px; }
.land { fill: var(--land); stroke: var(--land-line); stroke-width: .5; }
.cpoly { stroke: var(--land-line); stroke-width: .6; cursor: pointer; fill-opacity: .34; }
.cpoly.s4 { fill: var(--s4); } .cpoly.s3 { fill: var(--s3); } .cpoly.s2 { fill: var(--s2); } .cpoly.s1 { fill: var(--s1); }
.cpoly.s0 { fill: var(--s0); fill-opacity: .2; }
.cpoly.off { fill: var(--land); fill-opacity: 1; cursor: default; pointer-events: none; }
.cpoly:hover:not(.off) { fill-opacity: .5; }
.cpoly.sel { stroke: var(--text); stroke-width: 1.4; fill-opacity: .52; }
html.hc .cpoly { fill-opacity: .55; stroke-width: 1; }
.anch line { stroke: var(--text-2); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 2 2; }
.anch circle { fill: var(--text-2); fill-opacity: .85; }
/* ---------- Level Field chip and the top banner ---------- */
.modechip { margin-left: 6px; padding: 1px 8px; border: 1px solid var(--edge); border-radius: 999px; font-size: 0.6875rem; color: var(--text-2); white-space: nowrap; }
#banner { margin: 8px 12px 0; }
#banner > div { padding: 8px 12px; border: 1px solid var(--edge); border-radius: 8px; background: var(--surface-2); line-height: 1.45; }
#banner > div + div { margin-top: 6px; }
#banner button { margin-left: 8px; }
.stancegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }

.cklab { paint-order: stroke; stroke: var(--ocean); stroke-width: 3px; stroke-linejoin: round; }   /* keeps chokepoint labels readable over land and lines */
.node text { paint-order: stroke; stroke: var(--ocean); stroke-width: 0; }
.nlab { paint-order: stroke; stroke: var(--ocean); stroke-width: 3px; stroke-linejoin: round; }

/* the map keeps a readable size on phones and scrolls sideways inside its own box (maps are exempt from the reflow rule); the page itself never scrolls sideways */
.mapwrap { overflow-x: auto; max-width: 100%; }
@media (max-width: 700px) { #map { min-width: 640px; } }

.datanote { margin: 12px; padding: 8px 12px; font-size: 0.75rem; color: var(--text-2); text-align: center; }

#tabs button[hidden] { display: none; }

/* wars on the map: static dashed lines and markers; the one slow fade-in of a new trail is removed by calm mode and by reduced motion */
.warline { fill: none; stroke: var(--s1); stroke-width: 2.5; stroke-dasharray: 8 5; stroke-opacity: .85; pointer-events: none; }
.opline { fill: none; stroke: var(--s1); stroke-width: 1.8; stroke-dasharray: 3 4; stroke-opacity: .9; pointer-events: none; }
.opline.fresh { animation: opdraw 3.5s ease-out 1 both; }
.opx { fill: none; stroke: var(--s1); stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }
@keyframes opdraw { from { stroke-dashoffset: 60; stroke-opacity: .15; } to { stroke-dashoffset: 0; stroke-opacity: .9; } }

/* ---------- Briefings inbox, political-capital chips ---------- */
.badge { display: inline-block; min-width: 1.3em; margin-left: 4px; padding: 0 5px; border-radius: 9px; border: 2px solid var(--s1); background: var(--surface); color: var(--text); font-size: 0.7rem; line-height: 1.35; font-weight: 700; }
.badge[hidden] { display: none; }
#briefbar { margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--edge); border-left: 5px solid var(--s1); border-radius: 8px; background: var(--surface-2); line-height: 1.45; }
#briefbar[hidden] { display: none; }
#briefbar button { margin-left: 6px; }
.pcchip { font-size: 0.75em; font-weight: 400; opacity: 0.85; }
.pcchip.short { color: var(--s2); opacity: 1; }
.brief.closed { opacity: 0.8; }

/* ---------- link to the BLITZ 1914 scenario ---------- */
.bzlink { margin: 0 0 8px; padding: 7px 12px; border: 1px solid var(--edge); border-left: 5px solid var(--blue); border-radius: 8px; background: var(--surface-2); font-size: 0.875rem; line-height: 1.4; }
.bzlink a { font-weight: 600; margin-left: 4px; }