/* ===== 00-tokens.css ===== */
/* Tokens: fonts, type scale, geometry, both themes. Sorted first so every
   later layer can rely on them. Structure follows engram; palette is
   peephole's own: near-black with the logo's bloodshot red as brand hue and
   a cool cyan as the interactive accent. */

@font-face { font-family: Inter; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); }

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.5rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shell-max: 80rem;

  /* Light: warm paper, ink, teal-blue accent, the logo's red as brand. */
  --color-bg-base: #f6f5f0;
  --color-bg-surface: #efede6;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #e8e5dc;
  --color-bg-active: #ddd9cd;

  --color-fg-primary: #1f2024;
  --color-fg-secondary: #4f5159;
  --color-fg-muted: #66686f;

  --color-border: #d9d5c9;
  --color-border-strong: #c3beaf;
  --color-border-subtle: #e6e3da;

  --color-accent: #1f6f8b;
  --color-accent-dim: rgba(31, 111, 139, 0.10);
  --color-accent-muted: rgba(31, 111, 139, 0.30);
  --color-accent-fg: #ffffff;

  --color-brand: #b30000;
  --color-brand-dim: rgba(179, 0, 0, 0.10);

  --color-danger: #b3382c;  --color-danger-dim: rgba(179, 56, 44, 0.10);
  --color-warning: #845b16; --color-warning-dim: rgba(132, 91, 22, 0.10);
  --color-success: #2b7048; --color-success-dim: rgba(43, 112, 72, 0.10);

  /* Severity 0..4: grey → amber → orange → red → violet. Text-safe on base. */
  --sev-0: #63656c; --sev-0-dim: rgba(99, 101, 108, 0.14);
  --sev-1: #7f6100; --sev-1-dim: rgba(127, 97, 0, 0.14);
  --sev-2: #b04a00; --sev-2-dim: rgba(176, 74, 0, 0.14);
  --sev-3: #b31c1c; --sev-3-dim: rgba(179, 28, 28, 0.14);
  --sev-4: #7a1fa2; --sev-4-dim: rgba(122, 31, 162, 0.14);

  /* Sequential ramp for the map (accent-based, not severity). */
  --ramp-0: var(--color-bg-hover);
  --ramp-1: rgba(31, 111, 139, 0.25);
  --ramp-2: rgba(31, 111, 139, 0.45);
  --ramp-3: rgba(31, 111, 139, 0.70);
  --ramp-4: #1f6f8b;

  --grid-texture: none;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base: #0a0b10;
    --color-bg-surface: #10121a;
    --color-bg-elevated: #171a24;
    --color-bg-hover: #1f2330;
    --color-bg-active: #282d3c;

    --color-fg-primary: #e4e6ee;
    --color-fg-secondary: #a0a4b8;
    --color-fg-muted: #8a8ea6;

    --color-border: #22263a;
    --color-border-strong: #2f3449;
    --color-border-subtle: #171a26;

    --color-accent: #4fd1e0;
    --color-accent-dim: rgba(79, 209, 224, 0.14);
    --color-accent-muted: rgba(79, 209, 224, 0.35);
    --color-accent-fg: #0a0b10;

    --color-brand: #ff3b3b;
    --color-brand-dim: rgba(255, 59, 59, 0.14);

    --color-danger: #ff6b6b;  --color-danger-dim: rgba(255, 107, 107, 0.15);
    --color-warning: #f0b344; --color-warning-dim: rgba(240, 179, 68, 0.15);
    --color-success: #5fd39a; --color-success-dim: rgba(95, 211, 154, 0.15);

    --sev-0: #9a9eb2; --sev-0-dim: rgba(154, 158, 178, 0.16);
    --sev-1: #f0c34a; --sev-1-dim: rgba(240, 195, 74, 0.16);
    --sev-2: #ff9440; --sev-2-dim: rgba(255, 148, 64, 0.16);
    --sev-3: #ff5c5c; --sev-3-dim: rgba(255, 92, 92, 0.16);
    --sev-4: #d17dff; --sev-4-dim: rgba(209, 125, 255, 0.16);

    --ramp-0: #1a1e2b;
    --ramp-1: rgba(79, 209, 224, 0.22);
    --ramp-2: rgba(79, 209, 224, 0.42);
    --ramp-3: rgba(79, 209, 224, 0.68);
    --ramp-4: #4fd1e0;

    --grid-texture:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 32px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 32px);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg-base: #0a0b10;
  --color-bg-surface: #10121a;
  --color-bg-elevated: #171a24;
  --color-bg-hover: #1f2330;
  --color-bg-active: #282d3c;
  --color-fg-primary: #e4e6ee;
  --color-fg-secondary: #a0a4b8;
  --color-fg-muted: #8a8ea6;
  --color-border: #22263a;
  --color-border-strong: #2f3449;
  --color-border-subtle: #171a26;
  --color-accent: #4fd1e0;
  --color-accent-dim: rgba(79, 209, 224, 0.14);
  --color-accent-muted: rgba(79, 209, 224, 0.35);
  --color-accent-fg: #0a0b10;
  --color-brand: #ff3b3b;
  --color-brand-dim: rgba(255, 59, 59, 0.14);
  --color-danger: #ff6b6b;  --color-danger-dim: rgba(255, 107, 107, 0.15);
  --color-warning: #f0b344; --color-warning-dim: rgba(240, 179, 68, 0.15);
  --color-success: #5fd39a; --color-success-dim: rgba(95, 211, 154, 0.15);
  --sev-0: #9a9eb2; --sev-0-dim: rgba(154, 158, 178, 0.16);
  --sev-1: #f0c34a; --sev-1-dim: rgba(240, 195, 74, 0.16);
  --sev-2: #ff9440; --sev-2-dim: rgba(255, 148, 64, 0.16);
  --sev-3: #ff5c5c; --sev-3-dim: rgba(255, 92, 92, 0.16);
  --sev-4: #d17dff; --sev-4-dim: rgba(209, 125, 255, 0.16);
  --ramp-0: #1a1e2b;
  --ramp-1: rgba(79, 209, 224, 0.22);
  --ramp-2: rgba(79, 209, 224, 0.42);
  --ramp-3: rgba(79, 209, 224, 0.68);
  --ramp-4: #4fd1e0;
  --grid-texture:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 32px);
  color-scheme: dark;
}

/* ===== 10-base.css ===== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0; min-height: 100vh;
  background: var(--color-bg-base); background-image: var(--grid-texture);
  color: var(--color-fg-primary); font-family: var(--font-sans);
  font-size: var(--text-base); line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono, code, pre, kbd { font-family: var(--font-mono); font-size: 0.95em; }
h1 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
h2 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.75rem; }
h3 { font-size: var(--text-md); font-weight: 600; margin: 0 0 0.5rem; }
p { margin: 0 0 0.75rem; }
.label { font-size: var(--text-xs); color: var(--color-fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.muted { color: var(--color-fg-muted); }
.secondary { color: var(--color-fg-secondary); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }
:focus-visible { outline: 1.5px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== 20-layout.css ===== */
.topbar { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-surface) 88%, transparent); backdrop-filter: blur(8px); }
.topbar-row { max-width: var(--shell-max); margin: 0 auto; padding: 0 1rem; height: 3.25rem;
  display: flex; align-items: center; gap: 1.25rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--color-fg-primary); font-weight: 600; letter-spacing: -0.01em; }
.brand img { width: 26px; height: 26px; border-radius: 6px; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 0.25rem; flex: 1; }
.nav a { color: var(--color-fg-secondary); padding: 0.35rem 0.6rem; border-radius: var(--radius-md); font-size: var(--text-sm); }
.nav a:hover { background: var(--color-bg-hover); text-decoration: none; color: var(--color-fg-primary); }
.nav a[aria-current="page"] { color: var(--color-fg-primary); background: var(--color-bg-active); }
.topbar-actions { display: flex; align-items: center; gap: 0.5rem; }
.shell { max-width: var(--shell-max); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stack { display: grid; gap: 1rem; }
.stack > *, .grid-2 > *, .grid-3 > *, .tiles > * { min-width: 0; }
.row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.footer { max-width: var(--shell-max); margin: 0 auto; padding: 1rem; color: var(--color-fg-muted); font-size: var(--text-xs); display: flex; justify-content: space-between; }
@media (max-width: 48rem) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .nav { overflow-x: auto; }
  .topbar-row { gap: 0.75rem; }
  .table-wrap { overflow-x: auto; }
}

/* ===== 30-components.css ===== */
.card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; }
.card > h2:first-child { margin-top: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.tile { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0.9rem 1.1rem; }
.tile .label { display: block; margin-bottom: 0.25rem; }
.tile .value { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.tile .value.brand { color: var(--color-brand); }
.tile .hint { color: var(--color-fg-muted); font-size: var(--text-xs); margin-top: 0.25rem; }

.table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elevated); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; }
th { position: sticky; top: 0; background: var(--color-bg-surface); color: var(--color-fg-muted); font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
tbody tr:hover { background: var(--color-bg-hover); }
tbody tr:last-child td { border-bottom: 0; }
td.path { font-family: var(--font-mono); word-break: break-all; max-width: 40rem; }
td.ip { font-family: var(--font-mono); white-space: nowrap; }
td.ts { white-space: nowrap; color: var(--color-fg-secondary); font-family: var(--font-mono); font-size: var(--text-xs); }
.empty { padding: 2rem; text-align: center; color: var(--color-fg-muted); }

.badge { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 500; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.badge-label { background: var(--color-accent-dim); color: var(--color-accent); border-color: var(--color-accent-muted); font-family: var(--font-mono); }
.badge-tor { background: var(--color-brand-dim); color: var(--color-brand); }
.badge-status { background: var(--color-bg-active); color: var(--color-fg-secondary); }
.badge-status[data-status="running"] { background: var(--color-warning-dim); color: var(--color-warning); }
.badge-status[data-status="done"] { background: var(--color-success-dim); color: var(--color-success); }
.badge-status[data-status="failed"] { background: var(--color-danger-dim); color: var(--color-danger); }
.badge-status[data-status="refused"] { background: var(--color-danger-dim); color: var(--color-danger); }
.badge-status[data-status="superseded"] { background: var(--color-bg-active); color: var(--color-fg-muted); }
.node-via { color: var(--color-fg-muted); font-size: var(--text-xs); }
.break { word-break: break-all; white-space: pre-wrap; }
.small { font-size: var(--text-xs); }
.sev { display: inline-block; min-width: 1.6rem; text-align: center; padding: 0.05rem 0.4rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; }
.sev-0 { background: var(--sev-0-dim); color: var(--sev-0); }
.sev-1 { background: var(--sev-1-dim); color: var(--sev-1); }
.sev-2 { background: var(--sev-2-dim); color: var(--sev-2); }
.sev-3 { background: var(--sev-3-dim); color: var(--sev-3); }
.sev-4 { background: var(--sev-4-dim); color: var(--sev-4); }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong);
  background: var(--color-bg-elevated); color: var(--color-fg-primary); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.btn:hover { background: var(--color-bg-hover); text-decoration: none; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-fg); }
.btn-primary:hover { filter: brightness(1.08); background: var(--color-accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-fg-secondary); }
.btn-ghost:hover { background: var(--color-bg-hover); color: var(--color-fg-primary); }
.btn-danger { background: var(--color-danger-dim); border-color: transparent; color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger); color: #fff; }
.btn-sm { padding: 0.2rem 0.55rem; font-size: var(--text-xs); }
.btn-block { width: 100%; justify-content: center; }

input, select { font: inherit; font-size: var(--text-sm); color: var(--color-fg-primary); background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 0.4rem 0.6rem; }
input:focus, select:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-accent-dim); }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin-bottom: 1rem; }
.filters label { display: grid; gap: 0.2rem; font-size: var(--text-xs); color: var(--color-fg-muted); }
.filters input[name="q"], .filters input[name="path"] { min-width: 16rem; font-family: var(--font-mono); }

.seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; }
.seg a { padding: 0.3rem 0.7rem; font-size: var(--text-xs); color: var(--color-fg-secondary); border-right: 1px solid var(--color-border); }
.seg a:last-child { border-right: 0; }
.seg a:hover { background: var(--color-bg-hover); text-decoration: none; }
.seg a[aria-current="true"], .seg a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-fg); }

.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; color: var(--color-fg-muted); font-size: var(--text-sm); }

.banner { border-radius: var(--radius-md); padding: 0.6rem 0.9rem; margin-bottom: 1rem; font-size: var(--text-sm); border: 1px solid; }
.banner-success { background: var(--color-success-dim); color: var(--color-success); border-color: var(--color-success); }
.banner-warning { background: var(--color-warning-dim); color: var(--color-warning); border-color: var(--color-warning); }

.live { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-xs); color: var(--color-fg-muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-fg-muted); }
.live[data-state="open"] .live-dot { background: var(--color-success); box-shadow: 0 0 0 0 var(--color-success); animation: pulse 1.8s infinite; }
.live[data-state="reconnecting"] .live-dot { background: var(--color-warning); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--color-success-dim); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

dialog { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-bg-elevated); color: var(--color-fg-primary); padding: 1.25rem; max-width: 26rem; }
dialog::backdrop { background: rgba(0,0,0,0.5); }
dialog .actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; font-size: var(--text-sm); }
.kv dt { color: var(--color-fg-muted); }
.kv dd { margin: 0; font-family: var(--font-mono); word-break: break-all; }
pre.panel { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.75rem 1rem; overflow: auto; font-size: var(--text-xs); max-height: 32rem; white-space: pre-wrap; word-break: break-all; }
.ip-head { align-items: center; }
.ip-head h1 { font-family: var(--font-mono); font-size: var(--text-3xl); letter-spacing: 0; }
.ip-head .tiles { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); min-width: min(100%, 20rem); }
.kv dd.plain { font-family: inherit; word-break: normal; }
.intel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.intel { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: 0.75rem 1rem; min-width: 0; }
.intel h3 { margin: 0 0 0.5rem; font-size: var(--text-sm); }
.intel p { margin: 0; }
.intel .intel-src { margin-top: 0.5rem; }
.intel details { margin-top: 0.5rem; }
.intel details .kv { margin-top: 0.5rem; }
.ip-scans h3 { margin: 1.25rem 0 0.5rem; font-size: var(--text-sm); }
.ip-scans .card-head + h3 { margin-top: 0; }
.subnav { display: flex; width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: 1.25rem; }
.subnav a { white-space: nowrap; }
.ip-head .tile .value .sev { font-size: var(--text-lg); vertical-align: middle; }
.meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--color-fg-secondary); font-size: var(--text-sm); }
.danger-zone { border-color: var(--color-danger); }
.auth-card { max-width: 24rem; margin: 4rem auto; text-align: center; }
.auth-card img { width: 72px; height: 72px; border-radius: 16px; margin-bottom: 1rem; }
.auth-card label { display: block; text-align: left; margin-bottom: 0.75rem; }
.auth-card label input { width: 100%; margin-top: 0.25rem; }
.status { min-height: 1.5rem; margin-top: 0.75rem; color: var(--color-danger); font-size: var(--text-sm); }

.bulk-bar { margin-bottom: 0.75rem; }
th.check, td.check { width: 2rem; padding-right: 0; }
td.check input, th.check input { margin: 0; vertical-align: middle; accent-color: var(--color-accent); }
.pace { margin-bottom: 1.25rem; }
.pace .tiles { margin-bottom: 1rem; }
.pace .label { display: block; color: var(--color-fg-muted); font-size: var(--text-xs); margin-bottom: 0.25rem; }
.pace-trend { margin-bottom: 1rem; }
.pace-form { margin-bottom: 0; }
.pace-form input[type="number"] { width: 7rem; }
.pace-note { flex-basis: 100%; margin: 0; font-size: var(--text-xs); }
.pace-rec p { margin: 0 0 0.5rem; font-size: var(--text-sm); }
.pace-retry { margin-top: 1rem; font-size: var(--text-sm); }

/* ===== 40-charts.css ===== */
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .bar { fill: var(--color-accent); }
.chart .bar:hover { fill: var(--color-brand); }
.chart .axis text { fill: var(--color-fg-muted); font-size: 10px; font-family: var(--font-mono); }
.chart .axis line, .chart .grid line { stroke: var(--color-border); }
.chart .hbar-label { fill: var(--color-fg-primary); font-size: 11px; }
.chart .hbar-value { fill: var(--color-fg-muted); font-size: 11px; font-family: var(--font-mono); }
.chart .hbar { fill: var(--color-accent-muted); }
.chart .sev-bar-0 { fill: var(--sev-0); } .chart .sev-bar-1 { fill: var(--sev-1); }
.chart .sev-bar-2 { fill: var(--sev-2); } .chart .sev-bar-3 { fill: var(--sev-3); } .chart .sev-bar-4 { fill: var(--sev-4); }
.chart .empty-note { fill: var(--color-fg-muted); font-size: 12px; }
.map svg { display: block; width: 100%; height: auto; }
.map .sphere { fill: var(--color-bg-surface); }
.map .country { fill: var(--ramp-0); stroke: var(--color-bg-elevated); stroke-width: 0.5; transition: fill 200ms; cursor: pointer; }
.map .country[data-bin="1"] { fill: var(--ramp-1); } .map .country[data-bin="2"] { fill: var(--ramp-2); }
.map .country[data-bin="3"] { fill: var(--ramp-3); } .map .country[data-bin="4"] { fill: var(--ramp-4); }
.map .country:hover { stroke: var(--color-brand); stroke-width: 1; }
.legend { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; font-size: var(--text-xs); color: var(--color-fg-muted); flex-wrap: wrap; }
.legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -2px; margin-right: 0.3rem; border: 1px solid var(--color-border-strong); }
.legend .swatch[data-bin="0"] { background: var(--ramp-0); } .legend .swatch[data-bin="1"] { background: var(--ramp-1); }
.legend .swatch[data-bin="2"] { background: var(--ramp-2); } .legend .swatch[data-bin="3"] { background: var(--ramp-3); }
.legend .swatch[data-bin="4"] { background: var(--ramp-4); }
.tooltip { position: fixed; pointer-events: none; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: 0.3rem 0.55rem; font-size: var(--text-xs); color: var(--color-fg-primary); z-index: 20; display: none; }
.sparkline { width: 100%; height: 2.5rem; }
.sparkline svg { display: block; width: 100%; height: 2.5rem; }
.sparkline rect { fill: var(--color-accent-muted); }
.sparkline rect:last-child { fill: var(--color-accent); }