/* domicile.wiki styles, in this order (later sections may rely on overriding earlier ones):
   1 tokens · 2 base and controls · 3 legends · 4 shared panels (chips, cards, folds, facts)
   5 layout: guide and stage · 6 the guide · 7 stage and modes · 8 country pages: immigration, flags
   9 settings · 10 narrow screens */

/* ===================================================================== 1 Fonts and tokens
   Light is the default; dark applies when the system prefers it (unless the reader picked light) or
   when the reader picks dark. Keep the two dark blocks identical. */
/* Fonts, served from the site (the CSP allows no font hosts): Newsreader for headings and the wordmark,
   Manrope for text. Both SIL Open Font License 1.1; see ATTRIBUTION.md. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../vendor/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../vendor/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../vendor/fonts/newsreader-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../vendor/fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Theme "Private bank": stone and bottle green in light, near-black green and brass in dark. The score
   spectrum, the knock-out red and Compare's blue/orange are data colours and stay the same in both. */
:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #f0ece3;
  --surface-3: #e7e1d4;
  --text: #1a1d1b;
  --muted: #5f6660;
  --border: #e2dbcd;
  --border-strong: #cec4b0;
  --accent: #1f4d3a;
  --accent-soft: rgba(31, 77, 58, 0.08);
  --accent-text: #f7f2e6;
  --tld: #8c6d2f;
  --elev-1: 0 1px 2px rgba(40, 32, 16, 0.05);
  --elev-2: 0 6px 18px rgba(40, 32, 16, 0.10), 0 2px 4px rgba(40, 32, 16, 0.05);
  --ocean: #e3e9e3;
  --graticule: rgba(31, 77, 58, 0.10);
  --sphere-stroke: rgba(31, 77, 58, 0.30);
  --land-stroke: rgba(255, 255, 255, 0.9);
  --unscored: #dad4c8;
  --band-blue: #2563b8;
  --band-green: #2f9e6e;
  --band-yellow: #e7b544;
  --band-orange: #e9873f;
  --band-red: #cf5353;
  --chip-yellow-text: #2a2205;
  --label-halo: rgba(255, 255, 255, 0.92);
  --error: #b42318;
  --focus: #b8860b;
  /* Score spectrum (js/colors.js), best to weakest; red also marks knock-outs. */
  --spec-violet: #7a3fc4; --spec-blue: #2563b8; --spec-green: #2f9e6e; --spec-yellow: #e2b23c; --spec-orange: #e9823a; --spec-red: #cf4747;
  --eu: #1d3f8a;
  --eu-soft: rgba(29, 63, 138, 0.08);
  --better: #1747c9;
  --worse: #b45309;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Newsreader", Georgia, "Times New Roman", serif;
  --r-l: 6px;   /* cards, panels */
  --r-m: 4px;   /* buttons, inputs, chips */
  --r-s: 3px;   /* segments inside a control */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1210; --surface: #161d19; --surface-2: #1c2520; --surface-3: #25302a; --text: #ece6d9; --muted: #9da49e;
    --border: #2b3530; --border-strong: #3a4741; --accent: #cdb27a; --accent-soft: rgba(205, 178, 122, 0.13); --accent-text: #17140c;
    --tld: #cdb27a; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4); --elev-2: 0 6px 18px rgba(0, 0, 0, 0.5);
    --ocean: #13211b; --graticule: rgba(205, 178, 122, 0.08); --sphere-stroke: rgba(205, 178, 122, 0.22); --land-stroke: rgba(10, 14, 12, 0.85);
    --unscored: #333c37; --band-blue: #4f8fe6; --band-green: #3fb47f; --band-yellow: #e3b64e; --band-orange: #e88b4a; --band-red: #dc6463;
    --chip-yellow-text: #1d1704; --label-halo: rgba(14, 18, 16, 0.9); --error: #ff8a80; --focus: #e0c27f;
    --spec-violet: #a77cf2; --spec-blue: #4f8fe6; --spec-green: #3fb47f; --spec-yellow: #e3b64e; --spec-orange: #e88b4a; --spec-red: #dc5a59;
    --eu: #9db9f0; --eu-soft: rgba(157, 185, 240, 0.12); --better: #7fb2ff; --worse: #f5a05a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1210; --surface: #161d19; --surface-2: #1c2520; --surface-3: #25302a; --text: #ece6d9; --muted: #9da49e;
  --border: #2b3530; --border-strong: #3a4741; --accent: #cdb27a; --accent-soft: rgba(205, 178, 122, 0.13); --accent-text: #17140c;
  --tld: #cdb27a; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4); --elev-2: 0 6px 18px rgba(0, 0, 0, 0.5);
  --ocean: #13211b; --graticule: rgba(205, 178, 122, 0.08); --sphere-stroke: rgba(205, 178, 122, 0.22); --land-stroke: rgba(10, 14, 12, 0.85);
  --unscored: #333c37; --band-blue: #4f8fe6; --band-green: #3fb47f; --band-yellow: #e3b64e; --band-orange: #e88b4a; --band-red: #dc6463;
  --chip-yellow-text: #1d1704; --label-halo: rgba(14, 18, 16, 0.9); --error: #ff8a80; --focus: #e0c27f;
  --spec-violet: #a77cf2; --spec-blue: #4f8fe6; --spec-green: #3fb47f; --spec-yellow: #e3b64e; --spec-orange: #e88b4a; --spec-red: #dc5a59;
  --eu: #9db9f0; --eu-soft: rgba(157, 185, 240, 0.12); --better: #7fb2ff; --worse: #f5a05a;
  color-scheme: dark;
}

/* ===================================================================== 2 Base and controls */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 2px; }
button, select, input { font: inherit; color: inherit; }
button {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: 5px 11px; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
button:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-2); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
/* A <label> that opens a file picker, styled as a button. */
.button-like { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: 5px 11px; cursor: pointer; }
.button-like:hover { border-color: var(--border-strong); background: var(--surface-2); }
select, input[type="number"], input[type="search"], input[type="text"] {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); padding: 5px 8px; min-width: 0;
}
select:hover, input:hover { border-color: var(--border-strong); }
input[type="range"], input[type="checkbox"] { accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 10; background: var(--surface); padding: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.error { color: var(--error); }
.linklike { background: none; border: none; padding: 0; color: var(--accent); text-decoration: none; font-weight: 500; cursor: pointer; text-align: left; }
.linklike:hover:not(:disabled) { background: none; text-decoration: underline; }
.icon { padding: 2px 7px; }
.ctl { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.ctl span { color: var(--muted); }
.chk { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.chk.big { font-size: 14px; }
.actions, .row-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; align-items: center; }
.loading, .fatal { position: absolute; inset: auto 0 50% 0; text-align: center; color: var(--muted); margin-top: 30vh; }
.loading p { max-width: 560px; margin: 6px auto; padding: 0 16px; }
.page-link { margin-left: 4px; }
.fatal { background: var(--surface); color: var(--error); padding: 12px; margin: 30vh 16px 0; border-radius: var(--r-l); box-shadow: var(--elev-2); }

/* ===================================================================== 3 Legends (globe) */
.legend-item { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.band-blue { background: var(--band-blue); } .band-green { background: var(--band-green); } .band-yellow { background: var(--band-yellow); }
.band-orange { background: var(--band-orange); } .band-red { background: var(--band-red); } .unscored { background: var(--unscored); }
.eu-swatch { background: transparent; border: 1.5px dotted var(--text); }
/* Spectrum legend: one bar from best (left) to weakest (right). Stops match js/colors.js on a 95-30 score axis. */
.spectrum { display: inline-flex; align-items: center; gap: 6px; }
.spectrum-bar { display: inline-block; width: 120px; height: 10px; border-radius: 5px;
  background: linear-gradient(to right, var(--spec-violet) 7.7%, var(--spec-blue) 23.1%, var(--spec-green) 40%, var(--spec-yellow) 57.7%, var(--spec-orange) 75.4%, var(--spec-red) 93.8%); }
/* Occupied territories and buffer zones: stripes, never a score colour. */
.hatch-bg { fill: var(--unscored); }
.hatch-line { stroke: var(--muted); stroke-width: 1.4; }
.hatch-swatch { background: repeating-linear-gradient(45deg, var(--unscored) 0 3px, var(--muted) 3px 4.4px); }

/* ===================================================================== 4 Shared panels */
.chip {
  display: inline-block; min-width: 40px; text-align: center; padding: 1px 7px; border-radius: var(--r-m); font-weight: 700;
  font-size: 12px; color: #fff; font-variant-numeric: tabular-nums;
}
.chip.unscored { color: var(--text); }
.chip.band-yellow { color: var(--chip-yellow-text); }
.chip.big { font-size: 21px; padding: 5px 12px; border-radius: var(--r-l); min-width: 66px; box-shadow: var(--elev-1); }
.badge {
  display: inline-block; padding: 1px 7px; border-radius: var(--r-m); font-size: 11px; background: var(--surface-2);
  border: 1px solid var(--border); margin-left: 4px; color: var(--text);
}
.status-verified { border-color: var(--band-green); }
.status-provisional { border-color: var(--band-yellow); }
.status-insufficient { border-color: var(--unscored); }
.status-knocked_out { border-color: var(--band-red); color: var(--band-red); }
/* Tags next to a name: EU membership and red flags. */
.eu-badge {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--eu); background: var(--eu-soft); border: 1px solid var(--eu); vertical-align: 1px; line-height: 1.5;
}
.not-eu { font-size: 11px; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: 4px; padding: 0 5px; }
.flag-badge { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 700;
  color: var(--band-red); border: 1px solid var(--band-red); background: color-mix(in srgb, var(--band-red) 10%, transparent); vertical-align: 1px; line-height: 1.5; }
.flag-line { color: var(--band-red); margin: 2px 0 4px; }
.conf { font-weight: 600; }
.conf-high { color: var(--band-green); } .conf-medium { color: var(--band-orange); } .conf-low { color: var(--band-red); }
.profile-head .score-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin: 12px 0; }
.big-score { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--muted); gap: 3px; }
.card {
  border: 1px solid var(--border); border-radius: var(--r-l); padding: 12px 14px; margin: 10px 0; background: var(--surface);
  box-shadow: var(--elev-1);
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.eff { background: var(--accent-soft); padding: 6px 10px; border-radius: var(--r-m); margin: 8px 0; font-size: 13px; }
dl { margin: 6px 0; }
.field { display: grid; grid-template-columns: 170px 1fr; gap: 8px; padding: 3px 0; }
.field dt { color: var(--muted); font-size: 12px; }
.field dd { margin: 0; }
details summary { cursor: pointer; color: var(--accent); margin: 4px 0; }
.meta-line { font-size: 11px; color: var(--muted); margin-top: 8px; }
.sources { font-size: 12px; padding-left: 18px; }
.notice { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 0 var(--r-m) var(--r-m) 0; }
.disclaimer { font-size: 12px; background: var(--surface-2); padding: 8px 12px; border-radius: var(--r-m); border: 1px solid var(--border); }
/* Knock-outs and red flags (solid red), knock-outs waived by the reader's settings (dashed). */
.ko-box { border: 1.5px solid var(--band-red); border-radius: var(--r-l); padding: 10px 14px; margin: 10px 0; overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--band-red) 8%, var(--surface)); }
.ko-box ul { margin: 4px 0; padding-left: 18px; }
.ko-box.red-flag p { margin: 6px 0 0; }
.trap-note ul { margin: 4px 0 6px; padding-left: 18px; }
.trap-note li { margin: 3px 0; }
.trap-note p { margin: 0; }
.ko-waived { border: 1.5px dashed var(--band-red); border-radius: var(--r-l); padding: 10px 14px; margin: 10px 0; }
.open-q { font-size: 12px; }
.table-wrap { overflow-x: auto; max-width: 100%; }
table.grid { border-collapse: collapse; width: 100%; }
.grid th, .grid td { border-bottom: 1px solid var(--border); padding: 6px 7px; text-align: left; vertical-align: top; }
.grid thead th { font-size: 12px; font-weight: 600; color: var(--muted); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.grid tbody tr:hover td { background: var(--surface-2); }
.grid tr.best td, .grid tr.sel td, .grid tr.current td { background: var(--accent-soft); }
.grid td.up { color: var(--band-green); } .grid td.down { color: var(--band-red); }
.filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; margin: 10px 0; }
.weight-row { display: grid; grid-template-columns: 1fr 140px 110px; gap: 4px 8px; align-items: center; margin: 8px 0; }
.weight-row .small { grid-column: 1 / -1; }
.calc-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
.calc-form input, .calc-form select, .filters select { width: 100%; }
.calc-out { margin-top: 14px; }
.region-list { columns: 2; padding-left: 18px; font-size: 13px; }
.markdown h2, .markdown h3 { font-size: 15px; }
.markdown .md-table { border-collapse: collapse; font-size: 12px; }
.markdown .md-table td, .markdown .md-table th { border: 1px solid var(--border); padding: 4px 6px; }
.markdown pre { overflow-x: auto; background: var(--surface-2); padding: 8px; border-radius: var(--r-m); }
.markdown code { background: var(--surface-2); padding: 0 4px; border-radius: 4px; }
.dossier { margin-top: 8px; }
/* "Who is this for?" persona card */
.persona-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-l); padding: 14px 16px; margin: 12px 0; }
.persona-card h3 { margin: 0 0 4px; font-size: 15px; }
.persona-card h4 { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.persona-card ul { margin: 0; padding-left: 18px; }
.persona-card li { margin: 3px 0; }
.persona-card .priorities { list-style: none; padding-left: 0; }
.persona-card .priorities li { display: flex; gap: 8px; align-items: baseline; }
.persona-card .share { flex: 0 0 auto; min-width: 42px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-text); background: var(--accent); border-radius: var(--r-s); padding: 1px 6px; font-size: 12px; }
.persona-fold { margin: 8px 0 12px; }
.persona-fold > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
/* Folded sections: the heading is the toggle. */
details.fold { border-top: 1px solid var(--border); margin: 4px 0; }
details.fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 0; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform 0.15s; }
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary h3 { margin: 0; }
details.fold > summary:hover h3 { color: var(--accent); }
details.fold[open] { padding-bottom: 8px; }
/* Key facts at the top of a country page: label left, value right, one line each. */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 14px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-l); }
.facts .fact { display: contents; }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts dd .muted { font-weight: 400; }

/* ===================================================================== 5 Layout: guide (left) + stage */
.app { display: grid; grid-template-columns: 290px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.guide {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; overflow-y: auto; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--border);
}
.stage { min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 28px 48px; position: relative; }
.stage:focus { outline: none; }
.stage > * { max-width: 1100px; }

/* ===================================================================== 6 The guide */
.brand h1 { margin: 0; }
.brand .wordmark { font-family: var(--font-head); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: baseline; }
.brand .globe-o { width: 0.64em; height: 0.64em; color: var(--accent); align-self: baseline; margin: 0 0.01em; transform: translateY(0.05em); }
.brand .tld { color: var(--tld); font-weight: 400; font-style: normal; }
.tagline { margin: 4px 0 0; line-height: 1.4; }
.guide-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 6px; font-weight: 600; }

/* The four modes */
.modes { display: flex; flex-direction: column; gap: 4px; }
.mode {
  display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px 10px; border-radius: var(--r-l);
  border: 1px solid transparent; background: transparent;
}
.mode:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border); }
.mode[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); }
.mode-letter {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-m); display: grid; place-items: center; font-weight: 700;
  background: var(--surface-3); color: var(--text); font-size: 13px;
}
.mode[aria-current="page"] .mode-letter { background: var(--accent); color: var(--accent-text); }
.mode-text { display: flex; flex-direction: column; line-height: 1.25; }
.mode-text .small { color: var(--muted); }

/* Search */
.search-wrap { position: relative; }
#search { width: 100%; padding: 8px 10px; }
#search-results {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); max-height: 320px; overflow: auto;
  box-shadow: var(--elev-2);
}
#search-results li { padding: 6px 8px; cursor: pointer; border-radius: var(--r-s); }
#search-results li:hover, #search-results li[aria-selected="true"] { background: var(--accent-soft); }

/* Globe */
.globe-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.guide > .globe-box { margin-bottom: 26px; }
.globe { width: fit-content; max-width: 100%; margin: 0 auto; display: flex; justify-content: center; position: relative; }
.globe-tools { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 4px; pointer-events: none; }
.globe-tools button { pointer-events: auto; width: 26px; height: 26px; padding: 0; font-size: 14px; line-height: 1; border-radius: var(--r-s); box-shadow: var(--elev-1); }
.globe-tools button:nth-child(3) { margin-left: auto; }
.globe-here { fill: var(--accent); stroke: var(--surface); stroke-width: 2; pointer-events: none; }
.globe-svg { display: block; cursor: grab; touch-action: none; border-radius: 50%; }
.globe-svg:active { cursor: grabbing; }
.globe-sphere { fill: var(--ocean); stroke: var(--sphere-stroke); stroke-width: 1; }
.globe-graticule { fill: none; stroke: var(--graticule); stroke-width: 0.6; }
.globe-land { stroke: var(--land-stroke); stroke-width: 0.35; cursor: pointer; }
.globe-land:hover { fill-opacity: 0.8; }
/* EU outline: a neutral dotted line, so it never reads as a score colour on the spectrum. */
.globe-eu path { fill: none; stroke: var(--text); stroke-opacity: 0.85; stroke-width: 0.9; stroke-dasharray: 1.6 1.4; stroke-linecap: round; pointer-events: none; }
.globe-selected { fill: none; stroke: var(--text); stroke-width: 2; pointer-events: none; }
.globe-dot { fill: none; stroke: var(--text); stroke-width: 2; pointer-events: none; }
.globe-caption { margin: 0; text-align: center; min-height: 2.6em; }
.globe-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; }
.globe-legend .spectrum { flex-basis: 100%; justify-content: center; }

/* Settings: pinned to the bottom of the column (spare height goes above it), with a rule above. */
.situation { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-l); }
.guide > .situation { margin-top: auto; position: relative; }
.guide > .situation::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; border-top: 1px solid var(--border-strong); }
.situation-h { margin: 0; }
.situation-h .cog { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.situation-h .settings-link { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); padding: 0; }
.situation-h .settings-link:hover, .situation-h .settings-link[aria-pressed="true"] { color: var(--accent); }
.situation select { width: 100%; }
.situation .ctl { flex-direction: row; align-items: center; gap: 8px; }
.situation .ctl span { flex: none; width: 58px; }
.weights-line { margin: 2px 0 0; }

/* Simple and Advanced (js/state.js view): Simple hides the .adv-only parts of the guide. */
body[data-view="simple"] .adv-only { display: none !important; }
.view-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); }
.view-switch button { border: none; background: transparent; border-radius: var(--r-s); padding: 6px; color: var(--muted); font-weight: 500; font-size: 13px; }
.view-switch button:hover { background: var(--surface-3); color: var(--text); }
.view-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); box-shadow: var(--elev-1); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.chip-btn { border-radius: 999px; padding: 5px 14px; }
.advanced-link { margin: 18px 0 4px; }
.worth-knowing { background: var(--surface-2); border-left: 3px solid var(--worse); border-radius: 0 var(--r-l) var(--r-l) 0; padding: 10px 14px; margin: 16px 0; }
.worth-knowing p { margin: 6px 0 0; }
.simple-proj { margin-top: 18px; }
.proj-ceiling { stroke: var(--muted); background: var(--muted); }
.settings-link { border: none; background: transparent; padding: 0 2px; font-size: 12px; color: var(--accent); }
.settings-link:hover:not(:disabled) { background: transparent; text-decoration: underline; }
.settings-link[aria-pressed="true"] { background: transparent; color: var(--accent); font-weight: 700; }

/* Theme switch and small print */
.theme-switch { display: inline-flex; align-self: flex-start; padding: 2px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); }
.theme-switch button { border: none; background: transparent; padding: 3px 9px; border-radius: var(--r-s); font-size: 12px; line-height: 1.3; color: var(--muted); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--elev-1); }
.guide-foot { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.guide-foot p { margin: 0; }
.foot-row { display: flex; align-items: center; gap: 8px; }
.version { padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.version:hover { color: var(--accent); border-color: var(--accent); }
.repo-link { display: inline-flex; padding: 2px; color: var(--muted); }
.repo-link:hover { color: var(--accent); }

/* ===================================================================== 7 Stage and modes */
.stage h2 { font-family: var(--font-head); font-size: 26px; font-weight: 600; margin: 4px 0 6px; letter-spacing: -0.005em; }
.stage h3 { font-family: var(--font-head); font-size: 19px; font-weight: 600; margin: 20px 0 6px; }
.stage h4 { font-size: 15px; margin: 0; }
.stage-head { margin-bottom: 14px; }
.stage-head p { margin: 0; }
.back { margin-bottom: 8px; }
.subtabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-l); width: fit-content; }
.subtabs button { border: none; background: transparent; border-radius: var(--r-s); padding: 5px 14px; }
.subtabs button:hover:not(:disabled) { background: var(--surface-3); }
.subtabs button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--elev-1); text-shadow: 0 0 0.6px currentColor; } /* bolder without getting wider, so the tabs never shift */
.article, .explorer-body { max-width: 860px; }

/* A · Guided */
.step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.step-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent); color: var(--accent-text); }
.step h3 { margin: 3px 0 2px; }
.step p { margin: 0 0 8px; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.choice { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: var(--r-l); line-height: 1.35; }
.choice[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice[aria-pressed="true"] .muted { color: var(--text); }
.dealbreakers { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.results { margin-top: 18px; }
.result-list { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.result {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); box-shadow: var(--elev-1);
}
.result-rank { font-size: 18px; font-weight: 700; color: var(--muted); text-align: center; }
.result-main p { margin: 2px 0 6px; }
.result-main .linklike { font-size: 16px; font-weight: 600; }
.result-figures { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.result-figures dt { font-size: 11.5px; color: var(--muted); }
.result-figures dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.result-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.leftout { padding-left: 18px; font-size: 13px; }
.leftout li { margin: 4px 0; }

/* B · Factbook index */
.index section h3 { border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.index-list { list-style: none; padding: 0; margin: 0; columns: 3 220px; column-gap: 18px; }
.index-list li { display: flex; gap: 8px; align-items: center; padding: 2px 0; break-inside: avoid; }
.index-score .chip { min-width: 38px; font-size: 11px; }

/* C · Explorer: table and chart */
.rank-table td:last-child { white-space: nowrap; }
.chart-wrap { max-width: 860px; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .axis text { fill: var(--muted); font-size: 11px; }
.chart-svg .axis path, .chart-svg .axis line { stroke: var(--border-strong); }
.chart-svg .axis-label { fill: var(--muted); font-size: 11px; }
.chart-svg .dot { cursor: pointer; }
.chart-svg .dot circle { stroke: var(--surface); stroke-width: 1; fill-opacity: 0.9; }
.chart-svg .dot circle.eu { stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 1.6 1.2; }
.chart-svg .dot circle.selected { stroke: var(--text); stroke-width: 2.5; }
.chart-svg .dot text { font-size: 11px; fill: var(--text); paint-order: stroke; stroke: var(--label-halo); stroke-width: 3px; }
.chart-svg .dot:hover circle { stroke: var(--text); }
/* Wealth over 60 years (panels/projection.js) */
.proj-chart .proj-line { fill: none; stroke-width: 2.2; }
.proj-chart .proj-death { stroke: var(--border-strong); stroke-dasharray: 3 3; }
.proj-s0 { stroke: var(--accent); background: var(--accent); }
.proj-s1 { stroke: var(--spec-orange); background: var(--spec-orange); }
.proj-s2 { stroke: var(--spec-blue); background: var(--spec-blue); }
.proj-s3 { stroke: var(--spec-violet); background: var(--spec-violet); }
.proj-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 6px 0 10px; }
.proj-key { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.proj-home { stroke: var(--text); background: var(--text); }
.proj-chart .proj-dashed { stroke-dasharray: 7 4; }
.proj-key.proj-dashed { background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 9px); color: var(--text); }
.proj-missing { margin-top: 0; }

/* D · Compare */
.compare-pick { align-items: flex-end; gap: 12px; }
.compare-pick select { min-width: 220px; }
.cmp-places { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; align-self: flex-end; }
.cmp-place { padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.compare-home th[scope="col"] { min-width: 150px; }
.compare-home th[scope="col"] .linklike { white-space: normal; }
.compare-home .col-remove { margin-left: 4px; padding: 0 6px; line-height: 1.4; vertical-align: 1px; }
.compare-home th[scope="row"] { font-weight: 500; min-width: 200px; }
.compare-home .home-col { background: var(--surface-2); }
.compare-home td.better, .better { color: var(--better); font-weight: 600; }
.compare-home td.worse, .worse { color: var(--worse); font-weight: 600; }
.compare-home .delta { display: block; font-size: 11.5px; font-weight: 600; }
.compare-home .net-row td, .compare-home .net-row th { background: var(--surface-2); }
.compare-home td.big { font-size: 18px; font-weight: 700; }
.compare-home tbody th[scope="row"] { position: sticky; left: 0; background: var(--surface); z-index: 1; }

/* ===================================================================== 8 Country pages: immigration paths */
details.route { border: 1px solid var(--border); border-radius: var(--r-l); padding: 0 12px; margin: 6px 0; background: var(--surface); }
details.route[open] { padding-bottom: 10px; }
details.route > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 0; color: var(--text); }
details.route > summary::-webkit-details-marker { display: none; }
details.route > summary::before { content: "▸"; color: var(--muted); font-size: 12px; }
details.route[open] > summary::before { content: "▾"; }
details.route.closed .route-name { text-decoration: line-through; text-decoration-color: var(--muted); }
details.route.not-for-you { opacity: 0.85; }
details.others > summary { color: var(--muted); font-size: 13px; margin-top: 10px; }
.route-name { font-weight: 600; }
.route-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.route-key { flex-basis: 100%; padding-left: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tag { font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.tag-closed { color: var(--worse); border-color: var(--worse); }
.tag-cz.you { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.fold h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 12px 0 4px; }

/* ===================================================================== 9 Settings */
.settings-grid { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.settings-card { border: 1px solid var(--border); border-radius: var(--r-l); padding: 4px 16px 14px; background: var(--surface); }
.settings-card h3 { margin-top: 12px; }
.saved-list { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.saved-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-m); }
.saved-list .row-actions { margin: 0; }
.ko-rules { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; }
.ko-rules li { border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.ko-rules p { margin: 2px 0 2px 24px; }
.ko-rules details { margin-left: 24px; }
.weights-box { border-top: 1px solid var(--border); margin-top: 10px; }
.weights-box > h2 { display: none; } /* the Settings card already names the persona */

/* ===================================================================== 10 Narrow screens */
@media (max-width: 960px) {
  /* One column: the guide's parts flow above the content, its footer below it. */
  .app { display: flex; flex-direction: column; height: auto; }
  .guide { display: contents; }
  .guide > * { margin: 0 16px 10px; }
  .guide > .situation { margin-top: 0; }
  .guide > .situation::before { display: none; }
  .brand { margin-top: 12px !important; }
  .stage { order: 5; border-top: 1px solid var(--border); overflow: visible; padding: 14px 16px 36px; }
  .guide > .theme-switch { order: 6; margin: 12px 16px 0; }
  .guide > .guide-foot { order: 7; margin: 0; padding: 12px 16px 20px; }
  .modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode { padding: 6px 8px; }
  .tagline { display: none; }
  .globe-box { max-width: 320px; align-self: center; width: calc(100% - 32px); }
}
/* Phones: no room for the globe; tablets keep it (pinch to zoom). */
@media (max-width: 600px) {
  .globe-box { display: none; }
}
@media (max-width: 520px) {
  .mode-text .small { display: none; }
  .filters, .calc-form { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr; gap: 0; }
  .weight-row { grid-template-columns: 1fr 1fr; }
  .weight-row output { text-align: right; }
  .region-list { columns: 1; }
  .step { grid-template-columns: minmax(0, 1fr); }
  .step-num { display: none; }
  .result { grid-template-columns: minmax(0, 1fr) auto; }
  .result-rank { display: none; }
  .compare-pick select { min-width: 0; width: 100%; }
  .compare-pick .ctl { flex: 1 1 100%; }
  .compare-home th[scope="col"] { min-width: 120px; }
  .compare-home th[scope="row"] { min-width: 130px; }
  .subtabs button { padding: 5px 10px; }
}