@font-face{font-family:'InterVar';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/intervar.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'GeistMonoVar';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/geistmonovar.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root{
 /* ============ colour styles ============
    Ramps assembled only from the specified palette. No hex below is invented. */
 --purple-300:#4F55F1; --purple-400:#494FDF; --purple-500:#3A40C4;
 --purple-tint:rgba(73,79,223,.18);
 --grey-100:#FFFFFF; --grey-200:#F4F4F4; --grey-300:#E2E2E7; --grey-400:#C9C9CD;
 --grey-500:#8D969E; --grey-600:#5C5E60; --grey-650:#505A63; --grey-700:#3A3D40;
 --grey-800:#1F2226; --grey-900:#191C1F; --grey-950:#16181A; --grey-975:#0A0A0A;
 --grey-1000:#000000;
 --teal-400:#00A87E; --blue-400:#376CD5; --blue-500:#007BC2; --green-400:#428619;
 --green-600:#006400; --yellow-400:#B09000; --orange-400:#EC7E00; --pink-400:#E61E49;
 --red-400:#E23B4A; --red-600:#8B0000; --brown-400:#936D62;

 --p-primary:var(--purple-400); --p-primary-bright:var(--purple-300); --p-primary-deep:var(--purple-500);
 --p-white:var(--grey-100); --p-off-white:var(--grey-200);
 --p-ink:var(--grey-900); --p-body:var(--grey-800); --p-charcoal:var(--grey-700);
 --p-muted:var(--grey-650); --p-ash:var(--grey-600); --p-stone:var(--grey-500); --p-faint:var(--grey-400);
 --p-black:var(--grey-1000); --p-surface-deep:var(--grey-975); --p-surface-elevated:var(--grey-950);
 --p-teal:var(--teal-400); --p-blue:var(--blue-400); --p-light-blue:var(--blue-500);
 --p-green:var(--green-400); --p-yellow:var(--yellow-400); --p-orange:var(--orange-400);
 --p-pink:var(--pink-400); --p-danger:var(--red-400);

 /* ============ semantic — dark canvas is the default ============ */
 --color-bg-primary:var(--p-black);
 --color-bg-secondary:var(--p-surface-deep);
 --color-surface:var(--p-surface-elevated);
 --color-surface-elevated:var(--p-surface-elevated);
 --color-surface-sunken:var(--p-surface-deep);
 --color-text-primary:var(--p-white);
 --color-text-secondary:var(--p-faint);
 --color-text-tertiary:var(--p-stone);
 --color-text-quiet:var(--p-ash);
 --color-border:rgba(255,255,255,.12);
 --color-border-strong:var(--p-charcoal);
 --color-divider:rgba(255,255,255,.06);
 --color-accent:var(--p-primary);
 --color-accent-hover:var(--p-primary-bright);
 --color-accent-soft:var(--purple-tint);
 --color-on-accent:var(--p-white);
 --color-success:var(--p-teal);
 --color-warning:var(--p-orange);
 --color-danger:var(--p-danger);
 --color-info:var(--p-light-blue);
 /* Land has to sit clearly above the sea without competing with the plotted data,
    so it takes two adjacent steps of the grey ramp and the coast one step brighter. */
 --map-sea:var(--grey-975); --map-land:var(--grey-800); --map-coast:var(--grey-600);
 /* Borders sit between land and coast in weight: present enough to orient by,
    quiet enough that they never compete with a plotted route. */
 --map-border:var(--grey-650);
 --color-neutral-series:var(--p-stone);
 --color-neutral-series-faint:var(--p-ash);

 /* ============ radius ============ */
 --radius-small:8px; --radius-medium:12px; --radius-large:20px;
 --radius-xl:28px; --radius-pill:9999px;

 /* ============ spacing ============ */
 --sp-1:4px; --sp-2:8px; --sp-3:14px; --sp-4:16px; --sp-5:24px;
 --sp-6:32px; --sp-7:48px; --sp-8:80px; --sp-9:120px;

 /* ============ type ============ */
 --font-display:'InterVar','Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
 --font-body:'InterVar','Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
 --font-mono:'GeistMonoVar','Geist Mono','SF Mono',SFMono-Regular,Consolas,monospace;
 --fs-hero:clamp(48px,7.2vw,88px);
 --fs-display:clamp(34px,4.2vw,48px);
 --fs-section:clamp(26px,2.8vw,34px);
 --fs-heading:24px; --fs-subheading:20px;
 --fs-body-lg:18px; --fs-body:16px; --fs-ui:14px; --fs-caption:13px; --fs-micro:11px;

 /* ============ motion ============ */
 --ease:cubic-bezier(.2,.7,.3,1);
 --t-fast:150ms; --t-base:200ms; --t-slow:250ms;

 /* ---- compatibility aliases: the chart code reads these ---- */
 --bg:var(--color-bg-primary);
 --panel:var(--color-surface);
 --panel-2:var(--color-surface-elevated);
 --line:var(--color-divider);
 --line-2:var(--color-border);
 --text:var(--color-text-primary);
 --muted:var(--color-text-secondary);
 --dim:var(--color-text-tertiary);
 --faint:var(--color-text-quiet);
 --accent:var(--color-accent);
 --accent-dim:var(--p-primary-deep);
 --accent-soft:var(--color-accent-soft);
 --warn:var(--color-warning);
 --hot:var(--color-danger);
 --mid:var(--color-success);
 --cool:var(--color-info);
 --vio:var(--p-green);
 --series:var(--color-neutral-series);
 --series-faint:var(--color-neutral-series-faint);
 --radius:var(--radius-medium);
 --sans:var(--font-body);
 --mono:var(--font-mono);
 --fs-2xs:11px; --fs-xs:12px; --fs-sm:14px; --fs-md:16px;
 --fs-lg:18px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:32px;
 --dur:.62s;
}
/* a section can flip decisively to the light canvas */
.band-light{
 --color-bg-primary:var(--p-white);
 --color-bg-secondary:var(--p-off-white);
 --color-surface:var(--p-white);
 --color-surface-elevated:var(--p-off-white);
 --color-text-primary:var(--p-ink);
 --color-text-secondary:var(--p-muted);
 --color-text-tertiary:var(--p-ash);
 --color-text-quiet:var(--p-stone);
 --color-border:var(--grey-300);
 --color-border-strong:var(--p-faint);
 --color-divider:var(--grey-300);
 background:var(--p-white); color:var(--p-ink);
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--color-bg-primary);color:var(--color-text-primary);
 font-family:var(--font-body);font-size:var(--fs-body);line-height:1.5;letter-spacing:.01em;
 font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
 font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px 120px}

/* ---------- editorial masthead on the light canvas ---------- */
.band-light{padding:0}
header.mast{max-width:1280px;margin:0 auto;padding:var(--sp-8) 32px var(--sp-7)}
.eyebrow{font-size:var(--fs-caption);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
 color:var(--color-accent);margin-bottom:var(--sp-5)}
h1{font-family:var(--font-display);font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.028em;
 font-weight:500;margin:0 0 var(--sp-5);max-width:16ch;color:var(--p-ink)}
.lede{font-size:var(--fs-body-lg);line-height:1.55;color:var(--p-muted);max-width:56ch;margin:0 0 var(--sp-6)}
.meta{display:flex;gap:var(--sp-2) var(--sp-5);flex-wrap:wrap;font-size:var(--fs-ui);color:var(--p-ash);
 padding-top:var(--sp-5);border-top:1px solid var(--color-border)}
.meta b{color:var(--p-ink);font-weight:600}
.meta .tx{border-bottom:0}

/* ---------- sticky index ---------- */
nav.spy{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);
 border-bottom:1px solid var(--color-divider);display:flex;flex-wrap:wrap;gap:2px;
 padding:10px 0;margin-bottom:var(--sp-2)}
nav.spy a{color:var(--color-text-tertiary);text-decoration:none;font-size:var(--fs-ui);font-weight:500;
 padding:7px 14px;border-radius:var(--radius-pill);white-space:nowrap;border:1px solid transparent;
 transition:color var(--t-base) var(--ease),background var(--t-base) var(--ease)}
nav.spy a:hover{color:var(--color-text-primary);background:rgba(255,255,255,.06)}
nav.spy a.on{color:var(--color-on-accent);background:var(--color-accent);border-color:var(--color-accent)}

/* ---------- sections ---------- */
section{padding:var(--sp-8) 0 var(--sp-5);border-bottom:1px solid var(--color-divider);scroll-margin-top:92px}
section:last-of-type{border-bottom:0}
.snum{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--color-accent);
 letter-spacing:.14em;margin-bottom:var(--sp-2);font-weight:500}
h2{font-family:var(--font-display);font-size:var(--fs-section);margin:0 0 var(--sp-6);font-weight:500;
 letter-spacing:-.022em;line-height:1.1;display:flex;align-items:center;gap:12px}
p{margin:0 0 var(--sp-3);max-width:68ch;color:var(--color-text-secondary)}
p strong,li strong{color:var(--color-text-primary);font-weight:600}
.note{font-size:var(--fs-ui);color:var(--color-text-secondary);margin-top:var(--sp-3);line-height:1.6}
.hint{font-size:var(--fs-caption);color:var(--color-text-quiet)}
ul{margin:0 0 var(--sp-3);padding-left:20px;color:var(--color-text-secondary)}
li{margin-bottom:6px}

/* ---------- figures ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-3);
 margin:var(--sp-5) 0 var(--sp-6)}
.kpi{background:var(--color-surface);border:1px solid var(--color-border);
 border-radius:var(--radius-large);padding:var(--sp-5)}
.kpi .v{font-family:var(--font-display);font-size:36px;font-weight:500;letter-spacing:-.02em;
 line-height:1.05;color:var(--color-text-primary);font-variant-numeric:tabular-nums}
.kpi .v.hot{color:var(--color-danger)}.kpi .v.warn{color:var(--color-warning)}
.kpi:first-child .v{color:var(--color-accent)}
.kpi .k{font-size:var(--fs-caption);color:var(--color-text-tertiary);margin-top:10px;
 letter-spacing:.01em;text-transform:none;display:flex;align-items:center;gap:6px;line-height:1.4}

/* ---------- panels ---------- */
.panel{background:var(--color-surface);border:1px solid var(--color-border);
 border-radius:var(--radius-large);padding:var(--sp-5);margin:var(--sp-3) 0;min-width:0;
 transition:border-color var(--t-base) var(--ease)}
.panel:hover{border-color:var(--color-border-strong)}
.panel-h{font-size:var(--fs-ui);font-weight:500;letter-spacing:0;text-transform:none;
 color:var(--color-text-primary);margin-bottom:var(--sp-4);
 display:flex;justify-content:space-between;gap:12px;align-items:center;position:relative}
.panel-h span{color:var(--color-text-quiet);font-weight:400}
.panel-h-l{display:inline-flex;align-items:center;min-width:0}
.panel-h-l>span:not(.tip){margin-left:10px;font-size:var(--fs-caption)}

/* ---------- collapse ----------
   Collapsing hides the panel body with a sibling selector rather than by wrapping
   the content in a new element. Charts, map toggles and sortable tables all reach
   into the panel by id or by parentNode, so restructuring the DOM here would break
   them; a CSS rule leaves every one of those relationships intact. */
.panel.is-shut{padding-bottom:calc(var(--sp-5) - 2px)}
.panel.is-shut>*:not(.panel-h){display:none}
.panel.is-shut .panel-h{margin-bottom:0}
.cllps{appearance:none;background:none;border:0;padding:4px;margin:-4px -4px -4px 8px;
 cursor:pointer;color:var(--color-text-tertiary);line-height:0;border-radius:var(--radius-small);
 flex:0 0 auto;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.cllps:hover{color:var(--color-text-primary);background:rgba(255,255,255,.06)}
.cllps:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}
.cllps svg{width:14px;height:14px;display:block;transition:transform var(--t-base) var(--ease)}
.is-shut>.panel-h .cllps svg,.is-shut>h2 .cllps svg{transform:rotate(-90deg)}
.panel-h{cursor:pointer}
section>h2{cursor:pointer}
section.is-shut>*:not(h2):not(.snum){display:none}
section.is-shut{padding-bottom:var(--sp-5)}
section.is-shut>h2{margin-bottom:0}
.band-light .cllps:hover{background:rgba(0,0,0,.06)}
.allx{margin-left:auto;display:inline-flex;gap:4px;flex:0 0 auto}
.allx button{appearance:none;background:none;border:1px solid var(--color-border);
 color:var(--color-text-tertiary);font:inherit;font-size:var(--fs-caption);font-weight:500;
 padding:5px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;
 transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.allx button:hover{color:var(--color-text-primary);border-color:var(--color-border-strong)}
.mzr{position:absolute;right:10px;bottom:10px;z-index:3;appearance:none;
 background:rgba(10,10,10,.82);backdrop-filter:blur(8px);
 border:1px solid var(--color-border-strong);color:var(--color-text-secondary);
 font:inherit;font-size:var(--fs-caption);font-weight:500;padding:5px 11px;
 border-radius:999px;cursor:pointer;transition:opacity var(--t-base) var(--ease),color var(--t-fast) var(--ease)}
.mzr:hover{color:var(--color-text-primary)}
.corr,.corw{cursor:pointer}
.corr:hover{stroke-opacity:1}
.corrd{margin-top:var(--sp-4)}
.corrl{display:flex;flex-wrap:wrap;gap:6px}
.corrb{appearance:none;background:none;border:1px solid var(--color-border);
 color:var(--color-text-secondary);font:inherit;font-size:var(--fs-caption);font-weight:500;
 padding:5px 11px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
 transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.corrb:hover,.corrb.on{color:var(--color-text-primary);border-color:var(--color-border-strong)}
.corrb i{width:7px;height:7px;border-radius:2px;flex:0 0 auto}
.corrh{margin-top:var(--sp-3);color:var(--color-text-tertiary);font-size:var(--fs-caption);max-width:78ch}
.corrt{margin-top:var(--sp-4);font-size:var(--fs-ui);font-weight:600;color:var(--color-text-primary)}
.corrm{color:var(--color-text-tertiary);font-size:var(--fs-caption);margin-top:2px}
.corrw{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--color-border)}
.corrwt{font-size:var(--fs-ui);font-weight:500;color:var(--color-text-primary)}
.corrwty{display:inline-block;font-size:var(--fs-micro);font-weight:500;text-transform:uppercase;
 letter-spacing:.06em;color:var(--color-text-quiet);border:1px solid var(--color-border);
 border-radius:3px;padding:1px 5px;margin-right:8px;vertical-align:1px}
.corrwd{margin-top:5px;color:var(--color-text-tertiary);font-size:var(--fs-ui);max-width:82ch;line-height:1.55}

/* ---------- multi-page furniture ----------
   Used only by the built site; harmless in the single file. */
.mast-sub h1{font-size:clamp(30px,5vw,52px)}
.mast-sub .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.mast-sub .eyebrow a:hover{color:var(--color-accent);border-color:var(--color-accent)}
.secnav{display:flex;flex-wrap:wrap;gap:6px;margin:var(--sp-5) 0 var(--sp-2)}
.secnav a{color:var(--color-text-tertiary);text-decoration:none;font-size:var(--fs-caption);
 font-weight:500;padding:5px 11px;border:1px solid var(--color-border);border-radius:999px;
 transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.secnav a:hover{color:var(--color-text-primary);border-color:var(--color-border-strong)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
 gap:var(--sp-3);margin:var(--sp-6) 0}
.pcard{display:block;text-decoration:none;background:var(--color-surface);
 border:1px solid var(--color-border);border-radius:var(--radius-large);padding:var(--sp-5);
 transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.pcard:hover{border-color:var(--color-accent);transform:translateY(-2px)}
.pcard-t{font-size:var(--fs-body-lg);font-weight:600;color:var(--color-text-primary)}
.pcard-b{margin-top:6px;color:var(--color-text-tertiary);font-size:var(--fs-ui);line-height:1.5}
.pcard-m{margin-top:var(--sp-4);color:var(--color-text-quiet);font-size:var(--fs-micro);
 font-family:var(--font-mono);letter-spacing:.04em}
@media(max-width:960px){.allx{display:none}}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);align-items:start}
.g23{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sp-3);align-items:start}
@media(max-width:960px){.g2,.g3,.g23{grid-template-columns:minmax(0,1fr)}}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--fs-ui);margin:var(--sp-1) 0 0}
th{text-align:left;font-size:var(--fs-caption);letter-spacing:.01em;text-transform:none;
 color:var(--color-text-tertiary);font-weight:600;padding:10px 12px;
 border-bottom:1px solid var(--color-border)}
td{padding:11px 12px;border-bottom:1px solid var(--color-divider);color:var(--color-text-secondary);
 overflow-wrap:anywhere}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums;
 color:var(--color-text-primary)}
td.lbl{color:var(--color-text-primary);font-weight:500}
tr.hi td{background:var(--color-accent-soft)}tr.hi td.num{color:var(--color-accent)}
tbody tr{transition:background var(--t-fast) var(--ease)}
tbody tr:hover td{background:rgba(255,255,255,.03)}

/* ---------- controls ---------- */
.badge{display:inline-block;font-size:var(--fs-caption);font-weight:600;font-family:var(--font-body);
 padding:3px 10px;border-radius:var(--radius-pill);border:1px solid currentColor;letter-spacing:.01em}
.b-no{color:var(--color-danger)}.b-vol{color:var(--color-warning)}.b-yes{color:var(--color-success)}
.src{font-size:var(--fs-caption);color:var(--color-text-quiet);margin-top:var(--sp-4);
 padding-top:var(--sp-3);border-top:1px solid var(--color-divider);line-height:1.6}
.src a{color:var(--color-text-tertiary);text-decoration:none;border-bottom:1px solid var(--color-border);
 transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.src a:hover{color:var(--color-accent);border-color:var(--color-accent)}
svg{display:block;width:100%;height:auto}
.axis{fill:var(--color-text-tertiary);font-size:var(--fs-micro);font-family:var(--font-mono)}
.vlab{fill:var(--color-text-primary);font-size:var(--fs-micro);font-family:var(--font-mono)}
.glab{fill:var(--color-text-secondary);font-size:var(--fs-micro);font-family:var(--font-body)}
.axis.w,.vlab.w{font-family:var(--font-body);font-variant-numeric:normal}
.glab.n{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
footer{padding:var(--sp-7) 0 0;color:var(--color-text-quiet);font-size:var(--fs-caption);line-height:1.6}
footer a{color:var(--color-text-tertiary)}

/* ---------- timeline / range controls ---------- */
.tl{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-2) 0 var(--sp-4);flex-wrap:wrap}
.tl label{font-size:var(--fs-caption);color:var(--color-text-tertiary);font-weight:600;
 letter-spacing:.01em;text-transform:none;display:inline-flex;align-items:center;gap:6px}
.tl input[type=range]{-webkit-appearance:none;appearance:none;color:var(--color-text-primary);height:4px;background:var(--color-border);
 border-radius:var(--radius-pill);flex:1;min-width:200px;outline:none}
.tl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
 border-radius:50%;background:var(--color-accent);cursor:pointer;border:3px solid var(--color-bg-primary);
 transition:transform var(--t-fast) var(--ease)}
.tl input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.tl input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
 background:var(--color-accent);cursor:pointer;border:3px solid var(--color-bg-primary)}
.tl input[type=range]:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}
.tl .rd{font-family:var(--font-mono);font-size:var(--fs-ui);color:var(--color-text-primary);min-width:170px}
.tl button{height:40px;padding:0 20px;background:transparent;color:var(--color-text-secondary);
 border:1px solid var(--color-border);border-radius:var(--radius-pill);
 font-size:var(--fs-ui);font-weight:600;font-family:var(--font-body);cursor:pointer;
 transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.tl button:hover{color:var(--color-text-primary);border-color:var(--color-border-strong);
 background:rgba(255,255,255,.05)}
.tl button.on{background:var(--p-white);color:var(--p-black);border-color:var(--p-white)}
.tl button:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

/* ---------- chart / map switch ---------- */
.seg{display:inline-flex;margin-left:auto;flex:0 0 auto;background:var(--color-surface-elevated);
 border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:3px;gap:2px}
.seg button{background:none;border:0;color:var(--color-text-tertiary);font-family:var(--font-body);
 font-size:var(--fs-caption);font-weight:600;letter-spacing:.01em;text-transform:none;
 padding:5px 14px;cursor:pointer;border-radius:var(--radius-pill);line-height:1.5;
 transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.seg button+button{border-left:0}
.seg button:hover{color:var(--color-text-primary)}
.seg button.on{background:var(--color-accent);color:var(--color-on-accent)}
.seg button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ---------- explainers ---------- */
.tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
 border-radius:50%;border:1px solid var(--color-border);color:var(--color-text-tertiary);
 font-size:var(--fs-micro);font-family:var(--font-body);text-transform:none;letter-spacing:0;
 margin-left:8px;cursor:help;flex:0 0 auto;position:relative;font-weight:600;
 transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease),
  background var(--t-base) var(--ease)}
.tip:hover{border-color:var(--color-accent);color:var(--color-on-accent);background:var(--color-accent)}
.tip::after{content:attr(data-tip);position:absolute;left:50%;top:26px;transform:translateX(-50%);
 background:var(--color-surface-elevated);border:1px solid var(--color-border);
 border-radius:var(--radius-medium);padding:12px 14px;width:300px;font-size:var(--fs-caption);
 line-height:1.55;color:var(--color-text-primary);text-align:left;font-weight:400;
 pointer-events:none;z-index:80;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.tip:hover::after{display:block}
.tx{position:relative;cursor:help}
.tx::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 8px);
 background:var(--color-surface-elevated);border:1px solid var(--color-border);
 border-radius:var(--radius-medium);padding:12px 14px;width:270px;font-size:var(--fs-caption);
 line-height:1.55;color:var(--color-text-primary);text-align:left;text-transform:none;
 letter-spacing:.01em;font-weight:400;font-family:var(--font-body);white-space:normal;
 pointer-events:none;z-index:90;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.tx:hover::after{display:block}
th.tx:last-child::after,td:last-child .tx::after{left:auto;right:0}
th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-right:22px;
 transition:color var(--t-base) var(--ease)}
th.sortable:hover{color:var(--color-text-primary)}
th.sortable::before{content:'';position:absolute;right:8px;top:50%;margin-top:-2px;
 border-left:3px solid transparent;border-right:3px solid transparent;
 border-top:4px solid var(--color-text-quiet)}
th.sortable:hover::before{border-top-color:var(--color-text-secondary)}
th.sortable.sorted{color:var(--color-accent)}
th.sortable.sorted::before{border-top-color:var(--color-accent)}
th.sortable.sorted[data-dir=asc]::before{border-top:0;border-bottom:4px solid var(--color-accent)}

/* ---------- scrolling regions ---------- */
.scrollbox{max-height:460px;overflow-y:auto;overscroll-behavior:contain;position:relative;
 scroll-margin-top:104px}
*{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-pill);
 border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
.scrollbox::after{content:'';position:sticky;bottom:0;left:0;display:block;height:28px;
 pointer-events:none;background:linear-gradient(to bottom,rgba(22,24,26,0),var(--p-surface-elevated));
 margin-top:-28px}
.globe-wrap{position:relative;background:var(--color-surface);border:1px solid var(--color-border);
 border-radius:var(--radius-xl);overflow:hidden;margin:var(--sp-3) 0}
.globe-legend{position:absolute;left:24px;bottom:20px;font-size:var(--fs-caption);
 color:var(--color-text-secondary);display:flex;gap:18px;flex-wrap:wrap}
.globe-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;
 vertical-align:-1px}
.flag{width:22px;height:15px;border-radius:3px;display:inline-block;vertical-align:-3px;
 margin-right:9px;border:1px solid var(--color-border);object-fit:cover;background:var(--color-surface-elevated)}
/* ---------- country cross-reference ---------- */
.cllps{cursor:pointer;border-radius:4px;padding:1px 3px;margin:0 -2px;
 transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.cllps:hover{background:rgba(255,255,255,.08);color:var(--color-text-primary)}
.cx.on{background:var(--color-accent-soft);color:var(--color-accent);
 box-shadow:inset 0 0 0 1px var(--color-accent)}
.cx.cur{background:var(--color-accent);color:var(--color-on-accent);box-shadow:none;font-weight:600}
tspan.cllps{cursor:pointer}
tspan.cx.on{fill:var(--color-accent);font-weight:600}
tspan.cx.cur{fill:var(--color-accent);font-weight:700}
text.cxs{cursor:pointer}
text.cxs.on{fill:var(--color-accent);font-weight:600}
text.cxs.cur{fill:var(--color-accent);font-weight:700}
text.hcol{cursor:pointer;transition:fill var(--t-base) var(--ease)}
text.hcol:hover{fill:var(--color-text-primary)}
text.hcol.hon{fill:var(--color-accent)}
image.cxf{cursor:pointer}
image.cxf.on{outline:2px solid var(--color-accent);outline-offset:1px}
img.fin{width:18px;height:13px;border-radius:2px;display:inline-block;vertical-align:-2px;
 margin-right:6px;border:1px solid var(--color-border);object-fit:cover;
 background:var(--color-surface-elevated)}
img.fin.on{border-color:var(--color-accent)}
td .cx,th .cx,p .cx,li .cllps{white-space:nowrap}

/* ---------- country index ---------- */
.cxui{position:fixed;right:24px;bottom:24px;z-index:120;width:296px;
 background:var(--color-surface);border:1px solid var(--color-border);
 border-radius:var(--radius-large);font-size:var(--fs-ui);
 box-shadow:0 12px 40px rgba(0,0,0,.55);overflow:hidden}
.cxhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;
 border-bottom:1px solid var(--color-divider)}
.cxttl{font-size:var(--fs-caption);letter-spacing:.01em;text-transform:none;font-weight:600;
 color:var(--color-text-primary);display:inline-flex;align-items:center}
.cxbtn{background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-pill);
 color:var(--color-text-tertiary);font-family:var(--font-body);font-size:var(--fs-caption);
 font-weight:600;padding:5px 12px;cursor:pointer;line-height:1.4;
 transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
  background var(--t-base) var(--ease)}
.cxbtn:hover{color:var(--color-text-primary);border-color:var(--color-border-strong);
 background:rgba(255,255,255,.05)}
.cxbtn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.cxbtn svg{width:10px;height:10px;display:block;stroke:currentColor;stroke-width:2;fill:none}
.cxui.min .cxbody,.cxui.min .cxbar{display:none}
.cxbody{padding:14px 16px 16px}
.cxq{width:100%;height:44px;background:var(--color-bg-secondary);
 border:1px solid var(--color-border);border-radius:var(--radius-medium);
 color:var(--color-text-primary);font-family:var(--font-body);font-size:var(--fs-ui);
 padding:0 14px;outline:none;-webkit-appearance:none;appearance:none;
 transition:border-color var(--t-base) var(--ease)}
.cxq:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}
.cxq::placeholder{color:var(--color-text-quiet)}
.cxq::-webkit-search-cancel-button,.cxq::-webkit-search-decoration{-webkit-appearance:none;display:none}
.cxlist{max-height:264px;overflow-y:auto;margin-top:10px;overscroll-behavior:contain}
.cxrow{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--radius-small);
 cursor:pointer;color:var(--color-text-secondary);font-size:var(--fs-ui);
 transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.cxrow:hover{background:rgba(255,255,255,.05);color:var(--color-text-primary)}
.cxrow.on{background:var(--color-accent);color:var(--color-on-accent)}
.cxrow img{width:20px;height:14px;border-radius:2px;border:1px solid var(--color-border);
 object-fit:cover;flex:0 0 auto}
.cxrow b{font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxrow i{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-caption);
 color:var(--color-text-quiet);font-variant-numeric:tabular-nums}
.cxrow.on i{color:rgba(255,255,255,.75)}
.cxbar{display:none;align-items:center;gap:10px;padding:12px 16px;
 border-top:1px solid var(--color-divider);background:var(--color-surface-elevated)}
.cxbar.on{display:flex}
.cxbar img{width:22px;height:16px;border-radius:2px;border:1px solid var(--color-border);
 object-fit:cover;flex:0 0 auto}
.cxbar .cxname{flex:1;color:var(--color-accent);font-size:var(--fs-ui);font-weight:600;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxbar .cxpos{font-family:var(--font-mono);font-size:var(--fs-caption);
 color:var(--color-text-tertiary);font-variant-numeric:tabular-nums;flex:0 0 auto}

/* ---------- arrival animation ---------- */
.panel svg{--dur:.62s}
.an-hide{opacity:0}
.panel.lit svg .an-bar{transform-box:fill-box;transform-origin:left center;
 animation:anBar var(--dur) var(--ease) both}
.panel.lit svg .an-col{transform-box:fill-box;transform-origin:center bottom;
 animation:anCol var(--dur) var(--ease) both}
.panel.lit svg .an-cell{animation:anFade .42s ease-out both}
.panel.lit svg .an-line{animation:anDraw .95s cubic-bezier(.4,.05,.2,1) both}
.panel.lit svg .an-dot{transform-box:fill-box;transform-origin:center;
 animation:anPop .5s cubic-bezier(.2,1.1,.4,1) both}
.panel.lit svg .an-txt,.panel.lit svg .an-img{animation:anFade .5s ease-out both}
.panel.lit svg .an-area{animation:anWipe .82s var(--ease) both}
.panel.lit .an-whole{animation:anRise .6s var(--ease) both}
@keyframes anBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes anCol{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes anFade{from{opacity:0}to{opacity:1}}
@keyframes anPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes anRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes anDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes anWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.kpi .v{animation:none}
.panel.lit .kpi .v{animation:anRise .5s var(--ease) both}
@media(prefers-reduced-motion:reduce){
 .an-hide{opacity:1}
 .panel.lit svg *,.panel.lit .an-whole,.panel.lit .kpi .v{animation:none!important}
 *{transition:none!important}
}

/* ---------- phones ---------- */
@media(max-width:820px){
 .wrap{padding:0 18px 72px}
 header.mast{padding:var(--sp-6) 18px var(--sp-5)}
 h1{letter-spacing:-.024em;max-width:none}
 .lede{font-size:var(--fs-body)}
 .meta{gap:6px 14px;font-size:var(--fs-caption)}
 nav.spy{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:8px 0;gap:2px}
 nav.spy::-webkit-scrollbar{display:none}
 nav.spy a{padding:6px 12px;flex:0 0 auto}
 section{padding:var(--sp-6) 0 var(--sp-4);scroll-margin-top:58px}
 h2{margin-bottom:var(--sp-4)}
 .panel{padding:16px;margin:10px 0;border-radius:var(--radius-medium)}
 .panel,.scrollbox{scroll-margin-top:68px}
 .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:var(--sp-4) 0}
 .kpi{padding:14px;border-radius:var(--radius-medium)}
 .kpi .v{font-size:26px}
 .chartscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;margin:0 -16px;padding:0 16px}
 .chartscroll::-webkit-scrollbar{display:none}
 .chartscroll>svg{max-width:none}
 .swipe{display:block;font-size:var(--fs-caption);color:var(--color-text-quiet);margin-top:8px}
 .tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0 -16px;padding:0 16px}
 .tblscroll::-webkit-scrollbar{display:none}
 .tblscroll>table{min-width:420px}
 table{font-size:var(--fs-caption)}
 /* Wrap prose, never a figure: "109,685" broken across two lines reads as two
    numbers. Numeric cells are tagged in JS and held on one line, which also makes
    the table's true width honest so the overflow test can decide correctly. */
 td,th{overflow-wrap:break-word}
 td.num,th.num{white-space:nowrap;overflow-wrap:normal}
 td,th{padding:9px 10px}
 .globe-legend{position:static;padding:12px 4px 0;gap:12px}
 .globe-wrap{border-radius:var(--radius-large)}
 .tl{gap:10px}
 .tl input[type=range]{min-width:120px}
 .tl .rd{min-width:0}
 .cxui{left:14px;right:14px;width:auto;bottom:14px;border-radius:var(--radius-medium)}
 .cxlist{max-height:30vh}
 .tip::after{width:min(280px,74vw)}
 .tx::after{width:min(260px,72vw)}
 .seg button{padding:5px 11px}
}