/* Inter is self-hosted (vendor/fonts, SIL OFL): first paint never waits on a font server. It is the fallback
   after the system UI fonts, and font-display: swap shows text at once in the system font while it loads. */
@font-face { font-family: "Inter"; src: url("../vendor/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* Shared look for every page.
   Spacing uses only the --s-* tokens (4/8/12/16/20/24/32/36/48), type uses only the --fs-* scale,
   and motion animates transform and opacity only. */
:root {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-9: 36px; --s-12: 48px;
  --fs-1: 12px; --fs-2: 13px; --fs-3: 15px; --fs-4: 17px; --fs-5: 20px; --fs-6: 24px; --fs-7: 32px; --fs-8: 44px;
  --radius-card: 16px; --radius: 12px; --radius-sm: 8px; --pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 140ms; --dur-2: 220ms; --dur-3: 320ms;
  --header-h: 56px;
  --control-h: 36px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;

  --bg: #f3f4f7;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --ink: #1c2230;
  --muted: #566070;
  --faint: #5f6877;
  --line: rgba(28, 34, 48, 0.09);
  --line-strong: rgba(28, 34, 48, 0.18);
  --accent: #2554cf;
  --accent-hover: #1d46b3;
  --accent-ink: #ffffff;
  --accent-soft: rgba(37, 84, 207, 0.09);
  --accent-halo: rgba(37, 84, 207, 0.22);
  --good: #0d7a5c;
  --good-soft: rgba(13, 122, 92, 0.1);
  --bad: #c0352b;
  --bad-soft: rgba(192, 53, 43, 0.09);
  --warn: #8a4f00;
  --warn-soft: rgba(154, 88, 0, 0.1);
  --focus: #2554cf;
  --selected-row: rgba(37, 84, 207, 0.08);
  --shadow: 0 1px 2px rgba(20, 26, 40, 0.04), 0 2px 8px rgba(20, 26, 40, 0.05);
  --shadow-lift: 0 4px 12px rgba(20, 26, 40, 0.07), 0 12px 32px rgba(20, 26, 40, 0.08);
  --shadow-float: 0 8px 24px rgba(20, 26, 40, 0.12), 0 1px 3px rgba(20, 26, 40, 0.08);
  --chart-bg: #ffffff;
  --chart-ink: #1c2230;
  --chart-muted: #626b7a;
  --chart-grid: #e7e9ee;
  --chart-faint: #a2a9b5;
  --chart-highlight: #d9480f;
  color-scheme: light;
}
/* Dark palette: its own steps, not an automatic flip. Applied by the OS setting unless the toggle picked light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --surface: #171a20; --surface-2: #1e2229; --surface-glass: rgba(23, 26, 32, 0.78);
    --ink: #eceef2; --muted: #a6aebb; --faint: #959dab;
    --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
    --accent: #8aa8ff; --accent-hover: #a5bcff; --accent-ink: #0f1115; --accent-soft: rgba(138, 168, 255, 0.13); --accent-halo: rgba(138, 168, 255, 0.3);
    --good: #4cc79c; --good-soft: rgba(76, 199, 156, 0.13); --bad: #ff8070; --bad-soft: rgba(255, 128, 112, 0.13); --warn: #f0b45b; --warn-soft: rgba(240, 180, 91, 0.13);
    --focus: #9bb4ff; --selected-row: rgba(124, 157, 255, 0.12);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
    --chart-bg: #171a20; --chart-ink: #eceef2; --chart-muted: #a6aebb; --chart-grid: #2a2f38; --chart-faint: #5d6574; --chart-highlight: #ff8a4c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115; --surface: #171a20; --surface-2: #1e2229; --surface-glass: rgba(23, 26, 32, 0.78);
  --ink: #eceef2; --muted: #a6aebb; --faint: #959dab;
  --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #8aa8ff; --accent-hover: #a5bcff; --accent-ink: #0f1115; --accent-soft: rgba(138, 168, 255, 0.13); --accent-halo: rgba(138, 168, 255, 0.3);
  --good: #4cc79c; --good-soft: rgba(76, 199, 156, 0.13); --bad: #ff8070; --bad-soft: rgba(255, 128, 112, 0.13); --warn: #f0b45b; --warn-soft: rgba(240, 180, 91, 0.13);
  --focus: #9bb4ff; --selected-row: rgba(124, 157, 255, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --chart-bg: #171a20; --chart-ink: #eceef2; --chart-muted: #a6aebb; --chart-grid: #2a2f38; --chart-faint: #5d6574; --chart-highlight: #ff8a4c;
  color-scheme: dark;
}
/* Touch screens get 44px targets. */
@media (pointer: coarse) { :root { --control-h: 44px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: var(--fs-3); line-height: 1.47; letter-spacing: -0.006em;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 600; letter-spacing: -0.018em; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.num, .tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-2); top: -60px; background: var(--ink); color: var(--bg); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); z-index: 1000; }
.skip-link:focus { top: var(--s-2); }

/* ---------- page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--dur-1) ease-in both; }
::view-transition-new(root) { animation: vt-in var(--dur-3) var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
.site-header { view-transition-name: site-header; }
.page-enter { animation: page-in 260ms var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-6); padding: 0 var(--s-6);
  background: var(--surface-glass); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.brand { display: flex; align-items: center; gap: var(--s-2); color: var(--ink); font-weight: 600; font-size: var(--fs-3); letter-spacing: -0.01em; white-space: nowrap; border-radius: var(--radius-sm); transition: opacity var(--dur-1); }
.brand:hover { text-decoration: none; opacity: 0.75; }
.brand-mark { width: 24px; height: 24px; flex: none; }
.app-nav { display: flex; gap: var(--s-1); padding: var(--s-1); background: var(--accent-soft); background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: var(--pill); }
.app-nav a { color: var(--muted); padding: var(--s-1) var(--s-3); border-radius: var(--pill); font-size: var(--fs-2); font-weight: 500; white-space: nowrap; min-height: 28px; display: inline-flex; align-items: center; transition: color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1); }
.app-nav a:hover { color: var(--ink); text-decoration: none; background: var(--surface); }
.app-nav a:active { transform: scale(0.96); }
.app-nav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
@media (pointer: coarse) { .app-nav a { min-height: 40px; } }
.header-spacer { flex: 1; }
.demo-badge { font-size: var(--fs-1); color: var(--warn); background: var(--warn-soft); padding: var(--s-1) var(--s-2); border-radius: var(--pill); font-weight: 600; white-space: nowrap; }
.theme-toggle { width: var(--control-h); height: var(--control-h); flex: none; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--control-h); padding: 0 var(--s-3); border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-size: var(--fs-2); font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1), border-color var(--dur-1), color var(--dur-1);
}
.btn svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) {
  .btn:hover { background: var(--accent-soft); border-color: var(--accent-halo); color: var(--ink); transform: translateY(-1px); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); text-decoration: none; }
  .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-halo); }
  .btn.ghost:hover { background: var(--accent-soft); border-color: transparent; box-shadow: none; }
}
.btn:active { transform: scale(0.97); box-shadow: none; transition-duration: 60ms; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.small { min-height: 30px; padding: 0 var(--s-2); font-size: var(--fs-1); }
@media (pointer: coarse) { .btn.small { min-height: var(--control-h); padding: 0 var(--s-3); } }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.icon { width: var(--control-h); padding: 0; border-radius: var(--pill); }
.btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.danger { color: var(--bad); }
@media (hover: hover) { .btn.danger:hover { background: var(--bad-soft); border-color: transparent; color: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); } }

/* segmented control (also used for tabs) */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: var(--radius-sm); }
.seg > button, .seg > a { border: 0; background: transparent; color: var(--muted); min-height: calc(var(--control-h) - 4px); padding: 0 var(--s-3); border-radius: 6px; font-size: var(--fs-2); font-weight: 500; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-1); transition: color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1) var(--ease-out); }
@media (hover: hover) { .seg > button:hover, .seg > a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 60%, transparent); text-decoration: none; } }
.seg > button:active, .seg > a:active { transform: scale(0.96); }
.seg > button[aria-pressed="true"], .seg > button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.field > label, .field-label { font-size: var(--fs-1); font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: var(--s-1); }
.input, select.input, textarea.input {
  width: 100%; min-height: var(--control-h); padding: 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
  font-size: var(--fs-2);
  transition: border-color var(--dur-1), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1);
}
textarea.input { padding: var(--s-2) var(--s-3); line-height: 1.4; }
select.input { appearance: none; -webkit-appearance: none; padding-right: var(--s-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23808898' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
@media (hover: hover) { .input:hover { border-color: var(--accent-halo); } }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.input.compact { width: auto; max-width: 240px; }
.input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
input[type="range"] { accent-color: var(--accent); width: 100%; }
.row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.hint { font-size: var(--fs-1); color: var(--muted); }
.tag { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-1); padding: 2px var(--s-2); border-radius: var(--pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.chip { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-1); font-weight: 500; padding: 2px var(--s-1) 2px var(--s-3); min-height: 28px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent); }
.chip button { border: 0; background: transparent; cursor: pointer; color: inherit; width: 24px; height: 24px; border-radius: 50%; transition: background var(--dur-1), transform var(--dur-1) var(--ease-out); }
.chip button:hover { background: var(--accent-halo); }
.chip button:active { transform: scale(0.9); }
.check { display: inline-flex; gap: var(--s-2); align-items: center; font-size: var(--fs-2); cursor: pointer; min-height: 28px; }

/* toggle switch built on a checkbox */
.switch { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-2); color: var(--muted); cursor: pointer; min-height: 28px; }
.switch input { appearance: none; -webkit-appearance: none; width: 32px; height: 20px; border-radius: var(--pill); background: var(--line-strong); position: relative; cursor: pointer; transition: background var(--dur-2); flex: none; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform var(--dur-2) var(--ease-out); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(12px); }

/* (i) info button + popover */
.info {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent;
  color: var(--faint); font: 600 11px/1 Georgia, "Times New Roman", serif; font-style: italic; cursor: pointer; position: relative;
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2);
}
.info::before { content: ""; position: absolute; inset: -12px; }
@media (hover: hover) { .info:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); } }
.info:active { transform: scale(0.9); }
.info[aria-expanded="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.pop {
  position: fixed; z-index: 3000; max-width: 300px; padding: var(--s-3) var(--s-4);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-float); font-size: var(--fs-2); line-height: 1.45;
  opacity: 0; transform: translateY(4px) scale(0.98); transform-origin: top left; pointer-events: none;
  transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-out);
}
.pop.open { opacity: 1; transform: none; pointer-events: auto; }
.pop p + p { margin-top: var(--s-2); }
.pop a { font-weight: 500; }

/* ---------- cards / panels ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow); }
.card-pad { padding: var(--s-5); }
.card-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-5); min-height: 56px; }
.card-head h2, .card-head h3 { font-size: var(--fs-3); font-weight: 600; letter-spacing: -0.01em; }
.lift { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2); }
@media (hover: hover) { .lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--accent-halo); } }
.lift:active { transform: scale(0.99); }
.panel-section { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-3); }
.panel-section > h2, .panel-section > summary { font-size: var(--fs-2); font-weight: 600; color: var(--ink); letter-spacing: -0.005em; display: flex; align-items: center; gap: var(--s-2); }
details.panel-section > summary { cursor: pointer; list-style: none; min-height: 28px; border-radius: var(--radius-sm); transition: color var(--dur-1); }
details.panel-section > summary::-webkit-details-marker { display: none; }
details.panel-section > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint); transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease-out); }
details.panel-section[open] > summary::after { transform: rotate(45deg); }
details.panel-section > summary:hover { color: var(--accent); }
details.panel-section:not([open]) { gap: 0; }

/* ---------- tabs ---------- */
.tabs { display: inline-flex; gap: 2px; padding: 2px; background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: var(--radius-sm); overflow-x: auto; max-width: 100%; }
.tabs [role="tab"] { border: 0; background: transparent; color: var(--muted); min-height: calc(var(--control-h) - 4px); padding: 0 var(--s-3); border-radius: 6px; font-size: var(--fs-2); font-weight: 500; cursor: pointer; white-space: nowrap; transition: color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1) var(--ease-out); }
@media (hover: hover) { .tabs [role="tab"]:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 60%, transparent); } }
.tabs [role="tab"]:active { transform: scale(0.96); }
.tabs [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }

/* ---------- tables ---------- */
.table-wrap { overflow: auto; }
table.data { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.data th:first-child, table.data td:first-child { text-align: left; position: sticky; left: 0; background: inherit; padding-left: var(--s-5); }
table.data thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; font-weight: 500; color: var(--muted); font-size: var(--fs-1); box-shadow: inset 0 -1px 0 var(--line); }
table.data thead th button { border: 0; background: transparent; font-weight: 500; color: inherit; cursor: pointer; padding: var(--s-1) var(--s-2); border-radius: 6px; text-align: inherit; transition: background var(--dur-1), color var(--dur-1); }
table.data thead th button:hover { background: var(--accent-soft); color: var(--ink); }
table.data thead th[aria-sort="ascending"] button, table.data thead th[aria-sort="descending"] button { color: var(--accent); font-weight: 600; }
table.data tbody tr { background: var(--surface); cursor: pointer; transition: background var(--dur-1); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr.is-selected { background: var(--selected-row); }
table.data tbody th { font-weight: 500; }
table.data tbody th .btn.ghost { min-height: 28px; padding: 0 var(--s-2); margin-left: calc(-1 * var(--s-2)); font-weight: 500; font-size: var(--fs-2); }
table.data td.num-swatch .sw { margin-right: var(--s-2); vertical-align: middle; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* ---------- map bits ---------- */
.legend { background: var(--surface-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s-3); font-size: var(--fs-1); max-width: 240px; }
.legend-title { font-weight: 600; font-size: var(--fs-1); margin-bottom: var(--s-2); }
.legend-sub { color: var(--muted); margin-bottom: var(--s-2); margin-top: calc(-1 * var(--s-1)); }
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legend li { display: grid; grid-template-columns: 16px 1fr auto; gap: var(--s-2); align-items: center; font-variant-numeric: tabular-nums; }
.legend .swatch { width: 16px; height: 10px; border-radius: 3px; }
.legend .count { color: var(--faint); }
.map-tip, .chart-tip { pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-float); font-size: var(--fs-1); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); display: none; max-width: 280px; font-variant-numeric: tabular-nums; line-height: 1.4; }
.map-tip { position: absolute; z-index: 5; }
.chart-tip { position: fixed; z-index: 2000; }
.map-tip b, .chart-tip b { font-weight: 600; }
.popup-title { font-weight: 600; margin-bottom: var(--s-1); }
.popup-table { font-size: var(--fs-1); border-collapse: collapse; }
.popup-table th { text-align: left; color: var(--muted); font-weight: 500; padding-right: var(--s-2); vertical-align: top; }
.maplibregl-popup-content { background: var(--surface); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-float); padding: var(--s-3) var(--s-4); }
.maplibregl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }
.maplibregl-ctrl-group { border-radius: var(--radius-sm) !important; box-shadow: var(--shadow) !important; overflow: hidden; background: var(--surface) !important; }
.maplibregl-ctrl-group button { width: 32px !important; height: 32px !important; transition: background var(--dur-1); }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
.maplibregl-ctrl-group button:hover { background: var(--accent-soft) !important; }
@media (pointer: coarse) { .maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; } }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); } }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib.maplibregl-compact-show { background: var(--surface-glass) !important; color: var(--muted); font-size: 11px; border-radius: var(--radius-sm) !important; }
.maplibregl-ctrl-attrib a { color: var(--muted) !important; }
.maplibregl-ctrl-attrib-button { background-color: var(--surface) !important; border-radius: 50% !important; }
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .maplibregl-ctrl-attrib-button { filter: invert(1); } }
.maplibregl-ctrl-scale { background: var(--surface-glass) !important; color: var(--muted) !important; border-color: var(--faint) !important; }

/* ---------- drawer (About this data) ---------- */
dialog { border: 0; padding: 0; color: var(--ink); background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-float); max-width: min(640px, calc(100vw - 32px)); width: 100%; }
dialog::backdrop { background: rgba(10, 12, 16, 0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog[open] { animation: dlg-in var(--dur-3) var(--ease-out); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.dialog-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); max-height: 80vh; overflow: auto; }
.dialog-body h2 { font-size: var(--fs-5); }
.dialog-body dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--s-2) var(--s-4); margin: 0; font-size: var(--fs-2); }
.dialog-body dt { color: var(--muted); }
.dialog-body dd { margin: 0; word-break: break-word; }
dialog.drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; max-width: min(440px, 100vw); border-radius: var(--radius-card) 0 0 var(--radius-card); }
dialog.drawer[open] { animation: drawer-in var(--dur-3) var(--ease-out); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.drawer .dialog-body { max-height: 100vh; height: 100%; }
.drawer-head { display: flex; align-items: center; gap: var(--s-3); }
.drawer-head h2 { flex: 1; }
.drawer-content { display: flex; flex-direction: column; gap: var(--s-6); }
.drawer section { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-2); color: var(--muted); }
.drawer section h3 { font-size: var(--fs-2); color: var(--ink); }
.drawer ul { margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }

/* ---------- status, notes ---------- */
.status { font-size: var(--fs-2); color: var(--muted); }
.error-box { background: var(--bad-soft); color: var(--bad); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); font-size: var(--fs-2); }
.notice { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--fs-2); }
.notice span { flex: 1; min-width: 0; }
.map-off { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.map-off-note { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); font-size: var(--fs-2); }
.note-box { background: var(--warn-soft); color: var(--ink); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); font-size: var(--fs-2); }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-1); font-weight: 600; padding: 2px var(--s-2); border-radius: var(--pill); font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.good { color: var(--good); background: var(--good-soft); }
.delta.bad { color: var(--bad); background: var(--bad-soft); }
.delta.neutral { color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.rel { font-size: var(--fs-1); font-weight: 500; padding: 2px var(--s-2); border-radius: var(--pill); display: inline-block; }
.rel.high { background: var(--good-soft); color: var(--good); }
.rel.medium { background: var(--warn-soft); color: var(--warn); }
.rel.low { background: var(--bad-soft); color: var(--bad); }
.site-footer { padding: var(--s-6) var(--s-6) var(--s-8); font-size: var(--fs-1); color: var(--faint); text-align: center; }
.site-footer button { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: inherit; padding: 0; }

/* ---------- chart entrance (transform/opacity only; first view only) ---------- */
svg.chart-enter .mk { opacity: 0; }
svg.chart-enter.is-in .mk { animation: mk-fade var(--dur-3) var(--ease-out) both; animation-delay: min(calc(var(--i, 0) * 22ms), 520ms); }
svg.chart-enter.is-in .mk-bar-y { transform-box: fill-box; transform-origin: 50% 100%; animation-name: mk-grow-y; animation-duration: 560ms; }
svg.chart-enter.is-in .mk-bar-x { transform-box: fill-box; transform-origin: 0% 50%; animation-name: mk-grow-x; animation-duration: 560ms; }
svg.chart-enter.is-in .mk-line { animation-name: mk-rise; animation-duration: 600ms; }
svg.chart-enter.is-in .mk-dot { transform-box: fill-box; transform-origin: center; animation-name: mk-pop; }
@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-grow-y { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes mk-grow-x { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes mk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mk-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .reveal { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

@media (max-width: 1100px) {
  .site-header { gap: var(--s-3); padding: 0 var(--s-4); }
  .brand-text { display: none; }
}
@media (max-width: 720px) {
  .site-header { padding: 0 var(--s-3); gap: var(--s-2); }
  .demo-badge { display: none; }
  .header-spacer { display: none; }
  .app-nav { overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; justify-content: space-between; }
  .app-nav a { padding: var(--s-1) var(--s-2); }
  .dialog-body dl { grid-template-columns: 1fr; }
  .card-pad { padding: var(--s-4); }
}
/* Phones zoom the page when a field under 16px takes focus, so fields use the 17px step there. */
@media (max-width: 700px) {
  .input, select.input, textarea.input { font-size: var(--fs-4); }
}