/* BudgetState — dopecode house style, from vLockin's sheet.
 *
 * Amber goes to three places only: the mark, the selected control, and the
 * focus ring. Data takes the budget scale below — over budget on the warm
 * arm, under on the cool one, within 2% neutral — the same validated steps
 * vLockin's jurisdiction scale uses, in both appearances. Roles, not hexes:
 * every colour here is a token that resolves per appearance. */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --canvas: #F7F4EF;
  --card: #FFFDFA;
  --hover: #F7F3EC;
  --raised: #F0EBE2;
  --line: #E0D8CB;
  --line-soft: #EFE9E0;
  --text: #17130F;
  --prose: #5C5248;
  --dim: #6B6055;
  --amber: #FFB224;
  --amber-hi: #FFC65C;
  --amber-dn: #E89A12;
  --amber-text: #8F5806;
  --ink: #17130F;
  --ink-card: #1B1712;
  --ink-line: #3A322A;
  --bone: #F4EFE8;
  --ink-dim: #9A8F82;
  /* The headline number: the house's bad red, on Ink in both appearances
     (5.5:1). The one number on the page that is an alarm. */
  --alert: #F2555A;

  /* budget: far over ↔ far under, neutral within 2%, a light fill for no report */
  --b-over2: #BF2F3B;
  --b-over1: #E5735F;
  --b-near: #9A8F82;
  --b-under1: #5E93E8;
  --b-under2: #2456BD;
  --b-none: #DDD5C8;
  /* one series, no judgement: the budget as planned */
  --plan: #BDB2A3;
  /* heat, for the map: vLockin's validated sequential ramp, pale to deep */
  --h1: #F6DCD5;
  --h2: #EFB0A2;
  --h3: #E27B69;
  --h4: #C9464A;
  --h5: #992331;

  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r-panel: 12px;
  --r-row: 10px;
  --r-ctl: 8px;
  --r-chip: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #17130F;
    --card: #1B1712;
    --hover: #211C16;
    --raised: #241E18;
    --line: #3A322A;
    --line-soft: #2B241D;
    --text: #F4EFE8;
    --prose: #BDB3A6;
    --dim: #9A8F82;
    --amber-text: #FFB224;
    --ink: #0F0D0A;
    --ink-card: #17130F;
    --b-over2: #EC5B63;
    --b-over1: #A93F37;
    --b-near: #7D7266;
    --b-under1: #3A63B8;
    --b-under2: #6793E3;
    --b-none: #3A322A;
    --plan: #54493E;
    --h1: #3A2522;
    --h2: #5E2E2A;
    --h3: #8E3833;
    --h4: #C4474B;
    --h5: #F0666C;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #17130F;
  --card: #1B1712;
  --hover: #211C16;
  --raised: #241E18;
  --line: #3A322A;
  --line-soft: #2B241D;
  --text: #F4EFE8;
  --prose: #BDB3A6;
  --dim: #9A8F82;
  --amber-text: #FFB224;
  --ink: #0F0D0A;
  --ink-card: #17130F;
  --b-over2: #EC5B63;
  --b-over1: #A93F37;
  --b-near: #7D7266;
  --b-under1: #3A63B8;
  --b-under2: #6793E3;
  --b-none: #3A322A;
  --plan: #54493E;
  --h1: #3A2522;
  --h2: #5E2E2A;
  --h3: #8E3833;
  --h4: #C4474B;
  --h5: #F0666C;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 16px/1.55 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber-text); text-decoration: none; border-bottom: 1px solid var(--line); }
a:hover { border-bottom-color: currentColor; }
code, .mono { font-family: var(--mono); }
code { font-size: 0.88em; overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--card); padding: 8px 12px; border-radius: var(--r-ctl); }
:focus-visible { outline: 2px solid var(--amber-text); outline-offset: 2px; border-radius: 4px; }
.muted, .dim { color: var(--dim); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 720px) { .wrap { padding: 0 16px; } }

/* ── top bar ─────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--ink-line);
}
.top-row { display: flex; align-items: center; gap: 24px; height: 56px; }
.lockup { display: inline-flex; align-items: center; gap: 10px; border: 0; color: var(--bone); flex: none; }
.lockup .mark { width: 24px; height: 28px; color: var(--amber); flex: none; }
.lockup-text { display: flex; flex-direction: column; gap: 4px; }
.wordmark { font: 700 21px/1 var(--mono); letter-spacing: -0.04em; color: var(--bone); }
/* The subtitle sits under the wordmark, flush left with it, in the sans at
   about half its size: Ink 300, never amber, never without the wordmark. */
.subtitle { font: 500 11px/1 var(--sans); letter-spacing: 0.01em; color: var(--ink-dim); white-space: nowrap; }
.lockup:hover .subtitle { color: var(--bone); }
.nav { display: flex; gap: 20px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--ink-dim); border: 0; font-size: 13px; white-space: nowrap; }
.nav a:hover { color: var(--bone); }
.theme { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-ctl);
  background: transparent; border: 1px solid var(--ink-line); color: var(--ink-dim); cursor: pointer; }
.theme:hover { color: var(--bone); }
.theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* The maker, named where the maker is named: after the navigation, quiet,
   the same lockup and treatment as the footer's bar. */
.maker-top { flex: none; display: flex; align-items: center; height: 22px; padding-left: 22px;
  border: 0; border-left: 1px solid var(--ink-line); color: var(--ink-dim); opacity: 0.75; line-height: 0; }
.maker-top:hover { opacity: 1; border-left-color: var(--ink-line); }
.maker-top svg { display: block; height: 16px; width: auto; }
@media (max-width: 720px) {
  .nav { display: none; }
  .maker-top { margin-left: auto; padding-left: 0; border-left: 0; }
}

/* ── hero: always on ink ─────────────────────────────────────────────── */
.hero { background: var(--ink); color: var(--bone); padding: 72px 0 56px; }
.eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-text); }
.hero .eyebrow { color: var(--amber); }
/* The question the page answers, at its head: large and quiet, the mono in
   Ink 300, the one word it turns on in bone. Never amber. */
.hero .ask { margin: 0 0 20px; font: 700 clamp(28px, 4.2vw, 50px)/1.05 var(--mono); letter-spacing: -0.04em; word-spacing: -0.3em; color: var(--ink-dim); }
.hero .ask strong { font-weight: 700; color: var(--bone); }
.hero h1 { margin: 22px 0 0; font-size: clamp(26px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; max-width: 900px; }
.hero h1 .big { display: block; font-size: clamp(88px, 17vw, 196px); line-height: 0.9; letter-spacing: -0.06em; color: var(--alert); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.hero .lede { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--ink-dim); max-width: 680px; text-wrap: pretty; }
.hero .lede a { color: var(--amber-hi); border-bottom-color: var(--ink-line); }
.hero-foot { margin-top: 28px; font-size: 12px; color: var(--ink-dim); }

.seg-control { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--r-ctl);
  background: var(--card); border: 1px solid var(--line); }
.seg-control button { font: 13px/1 var(--sans); color: var(--dim); background: transparent; border: 0; border-radius: var(--r-chip);
  padding: 8px 12px; cursor: pointer; min-height: 32px; }
.seg-control button:hover { color: var(--text); background: var(--hover); }
.seg-control button[aria-selected="true"] { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--amber); }
.hero .seg-control { margin-top: 36px; background: var(--ink-card); border-color: var(--ink-line); }
.hero .seg-control button { color: var(--ink-dim); }
.hero .seg-control button:hover { color: var(--bone); background: #211C16; }
.hero .seg-control button[aria-selected="true"] { background: #241E18; color: var(--bone); }

/* tiles: one column per family, its layers under it */
.tiles { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } }
@media (max-width: 560px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tfam { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tfam-k { font: 700 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone);
  padding: 0 2px 8px; border-bottom: 1px solid var(--ink-line); }
.tile { background: var(--ink-card); border: 1px solid var(--ink-line); border-radius: var(--r-panel); padding: 14px 16px 14px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tile-k { font: 500 10px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); min-width: 0; }
.tile-v { font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-d { font-size: 12px; color: var(--ink-dim); line-height: 1.45; }
.tile-bar { height: 4px; border-radius: 2px; background: var(--ink-line); overflow: hidden; display: flex; margin-top: 8px; }
.tile-bar i { display: block; height: 100%; }

/* ── callouts band ───────────────────────────────────────────────────── */
.band { background: var(--card); border-bottom: 1px solid var(--line); }
.callouts { display: grid; grid-template-columns: repeat(3, 1fr); }
.callout { padding: 28px 24px 30px 0; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--line-soft); }
.callout + .callout { padding-left: 24px; }
.callout:last-child { border-right: 0; }
.callout-v { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.callout-t { font-size: 14px; color: var(--prose); line-height: 1.5; }
@media (max-width: 800px) {
  .callouts { grid-template-columns: 1fr; }
  .callout, .callout + .callout { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .callout:last-child { border-bottom: 0; }
}

/* ── sections ────────────────────────────────────────────────────────── */
.section { padding: 80px 0 8px; }
.section-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.section h2 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.015em; line-height: 1.15; }
.prose { font-size: 15px; color: var(--prose); max-width: 640px; line-height: 1.6; text-wrap: pretty; }
.controls { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; font-size: 12px; color: var(--prose); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
/* top tens: the ten least and the ten most locked in */
.tops-controls { flex-direction: column; align-items: flex-start; gap: 14px; }
/* the area switch: the areas in their families, as vLockin's layer switch */
.picker { gap: 4px 6px; align-items: center; }
.pgroup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.pgroup + .pgroup, .picker > button + .pgroup { border-left: 1px solid var(--line); padding-left: 6px; }
.pk { font: 700 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); padding: 0 8px 0 4px; }
.ctl { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ctl-k { font: 500 10px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.tops-scope { font-size: 12px; color: var(--dim); margin: 0 0 12px; }
.tops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .tops { grid-template-columns: minmax(0, 1fr); } }
.top-panel { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 20px 14px; }
/* The panel's edge says which end of the scale it lists, in the data's own colours. */
/* Worst is the far-over end of the scale, best the far-under end. */
.top-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--b-under2); }
.top-panel.worst::before { background: var(--b-over2); }
.top-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* "Best 10": the word at heading size, the 10 set large on its baseline. */
.top-head h3 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; font-size: 22px; letter-spacing: -0.01em; }
.top-head .top-n { font-size: clamp(56px, 7vw, 80px); font-weight: 700; line-height: 0.85; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.top-head .top-on { font-size: 16px; font-weight: 600; color: var(--prose); }
.top-head > span { font-size: 11px; color: var(--dim); white-space: nowrap; }
.top-rule { font-size: 12px; color: var(--prose); margin: 2px 0 10px; }
.top-list { list-style: none; margin: 0 -8px; padding: 0; counter-reset: none; }
/* Every row is its own grid, so the columns are fixed: the strips line up. */
.trow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 40px; gap: 12px; align-items: center;
  width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.trow:hover { background: var(--hover); }
.top-list.one .trow { grid-template-columns: 26px minmax(0, 1fr) auto 128px; }
.trow .rk { font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.trow .rk.tie { color: var(--dim); font-weight: 400; }
.trow .who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.trow .who b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .who small { font: 11px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp { display: flex; gap: 2px; }
.fp i { display: block; flex: none; width: 9px; height: 20px; border-radius: 2px; }
.fp i.fs { margin-left: 4px; }
.fp.one i:not(.on) { opacity: 0.3; }
.fp i.on { outline: 1.5px solid var(--text); outline-offset: 1px; }
.trow .sc { font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .sc small { font-size: 11px; font-weight: 400; color: var(--dim); }
.top-more { margin: 6px 0 0; font-size: 11px; color: var(--dim); }
.top-empty { font-size: 14px; color: var(--prose); padding: 10px 0 6px; }
.tops-key { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; font-size: 12px; color: var(--dim); }
.tops-key .legend { margin: 0; }
@media (max-width: 520px) {
  .trow { grid-template-columns: 22px minmax(0, 1fr) auto 32px; gap: 10px; }
  .top-list.one .trow { grid-template-columns: 22px minmax(0, 1fr) auto 84px; }
  .trow .who b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
  .fp { gap: 1.5px; }
  .fp i { width: 6px; height: 16px; }
  .fp i.fs { margin-left: 3px; }
  .trow .sc { font-size: 12px; }
}

/* units: one square per organisation */
.units { display: flex; flex-direction: column; gap: 26px; }
.ugroup-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ugroup-head h3 { font-size: 15px; }
.ugroup-head .n { font: 12px var(--mono); color: var(--dim); }
.ugroup-head .u { font: 700 12px var(--mono); margin-left: auto; }
.ucohort { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.ucohort:first-of-type { border-top: 0; }
.ucohort .name { font-size: 12px; color: var(--prose); line-height: 1.3; padding-top: 1px; }
.ucohort .name b { font-weight: 600; color: var(--text); }
.ucohort .name .pc { font: 11px var(--mono); color: var(--dim); display: block; }
.squares { display: flex; flex-wrap: wrap; gap: 3px; }
.squares i { width: 13px; height: 13px; border-radius: 2px; display: block; cursor: pointer; }
.squares i:hover, .squares i.on { outline: 2px solid var(--text); outline-offset: 1px; }
@media (max-width: 720px) { .ucohort { grid-template-columns: 1fr; } .squares i { width: 11px; height: 11px; } }

.exceptions { margin-top: 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 18px 20px; }
.exc-head { font-size: 14px; color: var(--prose); }
.exc-head b { color: var(--text); }
button.chip { cursor: pointer; font: 11px var(--mono); }
button.chip:hover { background: var(--hover); color: var(--text); }
.tries { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }

/* bars: providers and the long tail */
.bars { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 14px 20px; }
.brow { display: grid; grid-template-columns: minmax(120px, 240px) 1fr 92px; gap: 14px; align-items: center; padding: 7px 0; border-radius: 6px; }
.brow:hover { background: var(--hover); }
.brow .l { font-size: 13px; display: flex; flex-direction: column; min-width: 0; }
.brow .l b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .l span { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .track { height: 14px; }
.brow .fill { height: 100%; border-radius: 0 4px 4px 0; min-width: 3px; transition: width 500ms cubic-bezier(.2,.7,.2,1); }
.brow .v { font: 12px var(--mono); text-align: right; color: var(--text); }
.brow .v small { color: var(--dim); font-size: 11px; }
@media (max-width: 720px) { .brow { grid-template-columns: 110px 1fr 64px; gap: 8px; } }

/* table */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); }
.ctable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1360px; }
.ctable th, .ctable td { padding: 9px 14px; text-align: left; }
.ctable thead th { font: 500 10px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0; background: var(--card); }
.ctable thead th.sorted { color: var(--text); }
.ctable tbody tr:hover { background: var(--hover); }
.ctable tbody th { font-weight: 500; }
.ctable tbody th small { display: block; color: var(--dim); font: 11px var(--mono); }
.ctable .num { text-align: right; }
.ctable tr.sep th { padding-top: 18px; font: 500 10px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-text); }
.cell { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; font-family: var(--mono); }
.cell .mb { width: 28px; height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; display: inline-block; }
.ctable td.num, .ctable th.num { padding-left: 6px; padding-right: 10px; }
.ctable tbody th { min-width: 200px; }
.cell .mb i { display: block; height: 100%; background: var(--b-over2); border-radius: 3px; }
/* look up */
.lookup { position: relative; max-width: 560px; }
.field { width: 100%; font-size: 15px; padding: 12px 14px; border-radius: var(--r-ctl); border: 1px solid var(--line);
  background: var(--card); color: var(--text); }
.field:focus { outline: none; background: var(--raised); border-color: var(--amber-hi); box-shadow: 0 0 0 2px var(--amber-text); }
.field::selection { background: var(--amber-hi); color: #17130F; }
.suggest { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 4px 0; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: 0 12px 32px rgba(23,19,15,.14);
  max-height: 320px; overflow: auto; }
.suggest li { display: grid; grid-template-columns: 3px 1fr auto; align-items: center; gap: 10px; padding: 0 12px 0 0; cursor: pointer; }
.suggest li::before { content: ""; align-self: stretch; }
.suggest li span { padding: 8px 0; font-size: 13px; }
.suggest li small { font: 11px var(--mono); color: var(--dim); }
.suggest li[aria-selected="true"] { background: var(--raised); }
.suggest li[aria-selected="true"]::before { background: var(--amber); }
.suggest li[aria-selected="true"] span { font-weight: 600; }
.card-slot { margin-top: 20px; }
.ocard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px 24px; }
.ocard-head { display: flex; align-items: center; gap: 20px; }
.ocard-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.ocard-id h3 { font-size: 20px; letter-spacing: -0.01em; flex-basis: 100%; }
.ocard-id .d { font: 13px var(--mono); color: var(--dim); }
.ocard-id .score { flex-basis: 100%; font: 700 13px var(--mono); }
.ofam { margin-top: 22px; }
.ofam-k { margin: 0 0 10px; font: 700 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.ocard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 520px) { .ocard-head { align-items: flex-start; gap: 14px; } .ring { width: 76px; height: 76px; } }
.ocard-grid .svc:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 720px) { .ocard-grid { grid-template-columns: 1fr; } }
.svc { border: 1px solid var(--line); border-radius: var(--r-row); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--canvas); }
.svc .k { font: 500 10px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.svc .p { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.svc .j { font-size: 12px; color: var(--prose); font-weight: 400; }
.svc .e { font: 11.5px/1.6 var(--mono); color: var(--prose); overflow-wrap: anywhere; }
.svc .also { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.svc .also .j { margin-right: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-chip);
  padding: 3px 8px; font: 11px var(--mono); color: var(--prose); }

/* method */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.mcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.mcard h3 { font-size: 15px; }
.mcard p { font-size: 14px; color: var(--prose); line-height: 1.6; }
.mcard strong { color: var(--text); font-weight: 600; }

/* footer — the maker's bar follows slassh: the lockup quiet, in Ink 300 */
.foot { margin-top: 96px; background: var(--ink); color: var(--ink-dim); padding: 40px 0 36px; }
.foot .lockup .mark { width: 20px; height: 23px; }
.foot .wordmark { font-size: 17px; }
.foot .subtitle { font-size: 10px; }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ink-line);
  font: 0.72rem/1.5 var(--mono); color: #6E6459; }
.foot-maker { display: flex; align-items: center; gap: 14px; }
.foot-maker a { display: block; color: var(--ink-dim); opacity: 0.75; line-height: 0; border: 0; }
.foot-maker a:hover { opacity: 1; }
.foot-maker svg { display: block; height: 18px; width: auto; }

/* tooltip */
.tip { position: fixed; z-index: 50; pointer-events: none; max-width: 320px; background: var(--ink-card); color: var(--bone);
  border: 1px solid var(--ink-line); border-radius: var(--r-row); padding: 10px 12px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.tip b { font-weight: 600; font-size: 13px; }
.tip .t-row { display: flex; align-items: center; gap: 8px; }
.tip .t-e { font: 11px/1.5 var(--mono); color: var(--ink-dim); overflow-wrap: anywhere; margin-top: 4px; }
.tip .t-grid { display: grid; grid-template-columns: 10px 1fr auto; gap: 3px 8px; align-items: center; margin-top: 6px; }
.tip .t-grid .n { font-family: var(--mono); text-align: right; }

@media print {
  .top, .theme, .controls, .lookup, .tip { display: none !important; }
  .hero { background: #fff; color: #000; }
}

/* ── BudgetState ───────────────────────────────────────────────────── */

/* the budget scale, as fills */
.b-over2 { background: var(--b-over2); }
.b-over1 { background: var(--b-over1); }
.b-near { background: var(--b-near); }
.b-under1 { background: var(--b-under1); }
.b-under2 { background: var(--b-under2); }
.b-none { background: var(--b-none); }
.plan { background: var(--plan); }
.hero .lede strong { color: var(--bone); font-weight: 600; }
.hero .h1-text { display: block; }

/* the hero's tiles: each area's gap, its years as a spark underneath */
.tile-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 6px; }
.tile-n { font: 10px/1 var(--mono); color: var(--ink-dim); white-space: nowrap; }
.spark { display: inline-flex; align-items: center; gap: 2px; height: 26px; }
.spark i { display: block; width: 6px; height: 13px; position: relative; background: none; }
.spark i::after { content: ""; position: absolute; left: 0; right: 0; border-radius: 1px; background: inherit; }
.spark i.pos::after { bottom: 50%; height: calc(var(--h) / 2); }
.spark i.neg::after { top: 50%; height: calc(var(--h) / 2); }
.spark i.b-over2::after { background: var(--b-over2); }
.spark i.b-over1::after { background: var(--b-over1); }
.spark i.b-near::after { background: var(--b-near); }
.spark i.b-under1::after { background: var(--b-under1); }
.spark i.b-under2::after { background: var(--b-under2); }
.spark i.b-none::after { background: var(--ink-line); }
.hero .tile .spark i { height: 26px; }
/* the hero is always on ink: it takes the dark appearance's steps,
   validated there, in both appearances */
.hero { --b-over2: #EC5B63; --b-over1: #A93F37; --b-near: #7D7266; --b-under1: #3A63B8; --b-under2: #6793E3; --b-none: #3A322A; }
.scale-inline { display: inline-flex; gap: 2px; vertical-align: -1px; margin: 0 4px; }
.scale-inline i { width: 16px; height: 9px; display: inline-block; }
.scale-inline i:first-child { border-radius: 2px 0 0 2px; }
.scale-inline i:last-child { border-radius: 0 2px 2px 0; }
.hero-foot { line-height: 1.8; }

/* policy areas: a diverging bar per area */
.arows { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 10px 20px; }
.arow { display: grid; grid-template-columns: minmax(170px, 1.2fr) 190px minmax(160px, 2fr) 64px auto; gap: 16px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line-soft); }
.arow:first-child { border-top: 0; }
.arow .al { display: flex; flex-direction: column; min-width: 0; }
.arow .al b { font-size: 14px; font-weight: 600; }
.arow .al small { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow.sub .al { padding-left: 18px; border-left: 2px solid var(--line); }
.arow .am { font-size: 12px; color: var(--prose); white-space: nowrap; }
.arow .ad { position: relative; height: 18px; }
.arow .ad .axis { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: var(--line); }
.arow .ad i { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: width 400ms cubic-bezier(.2,.7,.2,1); }
.arow .av { font-size: 14px; font-weight: 700; text-align: right; }
@media (max-width: 860px) {
  .arow { grid-template-columns: minmax(0, 1fr) 64px; gap: 6px 12px; }
  .arow .am { grid-column: 1; grid-row: 2; }
  .arow .ad { grid-column: 1 / -1; grid-row: 3; }
  .arow .as { display: none; }
}
.note { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--dim); max-width: 760px; }

/* years: spending and income against budget, per year */
.ychart { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px 24px 18px; }
.ycols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: end; height: 250px; }
.ycol { display: flex; flex-direction: column; height: 100%; gap: 6px; border-radius: 6px; cursor: default; }
.ycol:hover { background: var(--hover); }
.yv { display: flex; flex-direction: column; align-items: center; font-family: var(--mono); line-height: 1.2; }
.yv b { font-size: 13px; }
.yv small { font-size: 11px; color: var(--dim); }
.ybars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.ybars i { display: block; width: 38%; max-width: 28px; border-radius: 4px 4px 0 0; transition: height 500ms cubic-bezier(.2,.7,.2,1); }
.yk { font-size: 12px; text-align: center; color: var(--text); font-weight: 600; padding-top: 6px; border-top: 1px solid var(--line); }
.yw { font-size: 11px; text-align: center; color: var(--dim); }
.yw b { color: var(--text); font-family: var(--mono); }
@media (max-width: 720px) { .ycols { height: 200px; gap: 3px; } .yv small, .yw { font-size: 9px; } .yv b { font-size: 10px; } }
.sw.plan { background: var(--plan); }

/* strips: one small bar per year */
.fp i.b-none { opacity: 0.6; }
.st { white-space: nowrap; }
.trow { grid-template-columns: 26px minmax(0, 1fr) auto 64px; }

/* pills: a gap in its step's colour */
.pill { display: inline-block; min-width: 58px; padding: 2px 7px; border-radius: var(--r-chip); font: 700 12px/1.5 var(--mono); text-align: right; color: #fff; }
.pill.b-near, .pill.b-none { color: var(--text); }
.pill.b-under1, .pill.b-over1 { color: var(--text); }
:root[data-theme="dark"] .pill.b-under1, :root[data-theme="dark"] .pill.b-over1 { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.b-under1, :root:not([data-theme="light"]) .pill.b-over1 { color: #fff; } }
.ctable.slim { min-width: 640px; }
.ctable .dim { color: var(--dim); }
.ctable tbody th small { font-family: var(--sans); }
.ctable tr.sub th { padding-left: 32px; }

/* the ministries */
.rtable { min-width: 900px; }
.rtable tr.ch { cursor: pointer; }
.rtable tr.ch th::before { content: "▸"; display: inline-block; width: 16px; color: var(--dim); transition: transform 150ms; }
.rtable tr.ch.open th::before { transform: rotate(90deg); }
.rtable tr.art th { padding-left: 44px; font-weight: 400; font-size: 12.5px; color: var(--prose); }
.rtable tr.art td { font-size: 12px; }
.rtable tr.art { background: var(--canvas); }
.rom { font: 11px var(--mono); color: var(--dim); margin-left: 6px; }

/* the municipality card */
.ocard-head { justify-content: space-between; }
.ocard-big { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.ocard-big b { font: 700 clamp(40px, 6vw, 64px)/0.9 var(--mono); letter-spacing: -0.05em; }
.ocard-big small { font: 11px var(--mono); color: var(--dim); margin-top: 6px; }
.b-over2t b { color: var(--b-over2); }
.b-over1t b { color: var(--b-over1); }
.b-under1t b { color: var(--b-under1); }
.b-under2t b { color: var(--b-under2); }
.ocard-lede { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--prose); max-width: 760px; }
.ocard-lede b { color: var(--text); font-weight: 600; }
.ocard-next { margin-top: 18px; font-size: 14px; color: var(--prose); }
.ocard-next b { color: var(--text); }
.ocard-src { margin-top: 12px; font-size: 12px; color: var(--dim); }
.mcols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 150px; align-items: end; }
.mcol { display: flex; flex-direction: column; height: 100%; gap: 4px; }
.mcol .mv { font: 700 11px var(--mono); text-align: center; }
.mcol .mb { flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.mcol .mb i { display: block; width: 70%; max-width: 34px; border-radius: 3px 3px 0 0; }
.mcol .mk { font-size: 11px; text-align: center; color: var(--dim); border-top: 1px solid var(--line); padding-top: 4px; }
.table-wrap.flat { border: 0; background: transparent; }
@media (max-width: 720px) { .mcols { gap: 3px; } .mcol .mv { font-size: 9px; } }
/* area names run longer than vLockin's layer names: the key above, the number under it */
.tile-top { flex-direction: column; align-items: flex-start; gap: 8px; }
.tile-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Europe: member states by the share of their cohesion money paid */
.eu { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px 20px; columns: 2; column-gap: 40px; }
@media (max-width: 800px) { .eu { columns: 1; } }
.eurow { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) 96px 150px; gap: 10px; align-items: center; padding: 4px 0; break-inside: avoid; font-size: 12px; }
.eurow .rk { color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.eurow .c { font-weight: 700; }
.eurow .track { height: 10px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.eurow .track i { display: block; height: 100%; background: var(--plan); border-radius: 3px; }
.eurow.nl .track i { background: var(--text); }
.eurow.nl .c, .eurow.nl .v { color: var(--text); }
.eurow .v { text-align: right; font-weight: 700; }
.eurow .a { color: var(--dim); font-size: 11px; white-space: nowrap; }
.eurow.nl { background: var(--raised); border-radius: 6px; margin: 0 -8px; padding: 4px 8px; }
@media (max-width: 520px) { .eurow { grid-template-columns: 22px 30px minmax(0, 1fr) 42px; } .eurow .a { display: none; } }
.trow { grid-template-columns: 26px minmax(0, 1fr) auto 78px; }
.trow .sc small { display: block; font: 10px/1.3 var(--mono); color: var(--dim); margin-top: 2px; }
.ctable thead th small { display: block; text-transform: none; letter-spacing: 0; font-size: 10px; color: var(--dim); opacity: .8; }
.ctable.flow { min-width: 0; }
.ctable.flow th, .ctable.flow td { padding-left: 10px; padding-right: 10px; }
.ctable td.num { white-space: nowrap; }
@media (max-width: 520px) { .ocard { padding: 18px 16px; } }

/* not found — 404.html, served at any path that does not exist. The hero
   asks the site's question of the page and the big red number answers it;
   the path is echoed back in the mono and booked as a budget line. No new
   colours: the hero's, the cards', the links', the budget scale's. */
.nf-hero h1 .h1-text { display: block; overflow-wrap: anywhere; }
.nf-path { font-family: var(--mono); font-size: 0.82em; letter-spacing: -0.03em; }
.nf-hero .lede em { font-style: normal; font-weight: 600; color: var(--bone); }
.nf-dig { margin: 32px 0 0; max-width: 680px; padding: 18px 20px; background: var(--ink-card); border: 1px solid var(--ink-line);
  border-radius: var(--r-panel); font-size: 13px; line-height: 1.7; color: var(--bone); white-space: pre-wrap; overflow-wrap: anywhere; }
.nf-dig .c { color: var(--ink-dim); }
.nf-dig b { font-weight: 700; }
.nf-hits { display: grid; gap: 10px; max-width: 560px; margin-bottom: 22px; }
.nf-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: 14px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); color: var(--text); }
.nf-hit:hover { background: var(--hover); border-color: var(--line); }
.nf-hit-n { font-size: 15px; font-weight: 600; min-width: 0; }
.nf-hit-d { grid-column: 1; font: 12px var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.nf-hit-s { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 12px/1.3 var(--mono); color: var(--prose); text-align: right; max-width: 150px; }
.nf-hit-s b { display: block; font-size: 24px; letter-spacing: -0.04em; color: var(--text); }
.nf-hit.one { padding: 20px 22px; }
.nf-hit.one .nf-hit-n { font-size: 20px; letter-spacing: -0.01em; }
.nf-hit.one .nf-hit-s b { font-size: 34px; }
.nf-hit-go { grid-column: 1 / -1; margin-top: 10px; font-size: 13px; color: var(--amber-text); }
.nf-go { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.nf-go a { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-panel); color: var(--text); }
.nf-go a:hover { background: var(--hover); border-color: var(--line); }
.nf-go-t { font-size: 15px; font-weight: 600; }
.nf-go-d { font-size: 13.5px; line-height: 1.5; color: var(--prose); }
/* the ledger: the missing page booked as a budget line, the site's own
   terms for a 404 — budgeted one page, delivered none, −100% */
.nf-ledger { margin: 32px 0 0; max-width: 680px; padding: 16px 20px 14px; background: var(--ink-card); border: 1px solid var(--ink-line);
  border-radius: var(--r-panel); font-size: 13px; color: var(--bone); }
.nl-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px 84px; gap: 12px; align-items: center; padding: 6px 0; }
.nl-row > span:not(:first-child) { text-align: right; }
.nl-head { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); border-bottom: 1px solid var(--ink-line); padding-top: 0; }
.nl-line { overflow-wrap: anywhere; font-weight: 700; }
.nl-foot { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ink-line); font-size: 11.5px; color: var(--ink-dim); }
.nl-foot b { color: var(--alert); font-weight: 700; }
.nf-hit-s .pill { font-size: 20px; line-height: 1.3; min-width: 0; }
.nf-hit.one .nf-hit-s .pill { font-size: 28px; }
.nf-hit-s small { display: block; margin-top: 4px; font-size: 11px; color: var(--dim); }
@media (max-width: 520px) { .nl-row { grid-template-columns: minmax(0, 1fr) 58px 58px 70px; gap: 8px; font-size: 12px; } }

/* share of the budget: where the money goes, as a bar and a number — no
   judgement, so the neutral text tones, never the budget scale */
/* under the name it labels (swap to above with `order: -1`) */
.share { display: flex; align-items: center; gap: 8px; margin-top: 6px; max-width: 300px; }
.share-t { flex: 1; height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.share-t i { display: block; height: 100%; background: var(--prose); border-radius: 3px; }
.share-v { flex: none; min-width: 34px; text-align: right; font-size: 11px; font-weight: 400; color: var(--prose); }
.arow { grid-template-columns: minmax(220px, 1.4fr) 190px minmax(140px, 1.8fr) 64px auto; }
.arow.sub .share-t i { opacity: 0.6; }
.ctable tr.sub .share-t i { opacity: 0.6; }
.ctable tfoot th, .ctable tfoot td { border-top: 1px solid var(--line); font-weight: 600; padding-top: 12px; }
.areas-t { min-width: 760px; }
.areas-t tbody th, .areas-t tfoot th { min-width: 240px; }
@media (max-width: 860px) {
  .arow { grid-template-columns: minmax(0, 1fr) 64px; }
}

/* the stats bar: the whole budget, one segment per main area, its width the
   share and its colour the gap — vLockin's stack, on the budget scale */
.sbar { display: flex; gap: 2px; height: 46px; margin: 2px 0 6px; }
.sseg { min-width: 3px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 9px; overflow: hidden;
  white-space: nowrap; color: #fff; cursor: default; transition: opacity 150ms ease; }
.sseg:first-child { border-radius: 6px 0 0 6px; }
.sseg:last-child { border-radius: 0 6px 6px 0; }
.sseg b { font: 600 12px/1.15 var(--sans); overflow: hidden; text-overflow: ellipsis; }
.sseg small { font: 11px/1.15 var(--mono); opacity: 0.9; overflow: hidden; text-overflow: ellipsis; }
.sseg.b-near, .sseg.b-over1, .sseg.b-under1, .sseg.b-none { color: var(--text); }
:root[data-theme="dark"] .sseg.b-over1, :root[data-theme="dark"] .sseg.b-under1 { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sseg.b-over1, :root:not([data-theme="light"]) .sseg.b-under1 { color: #fff; } }
.sbar:hover .sseg { opacity: 0.4; }
.sbar .sseg:hover { opacity: 1; }
.sbar-k { font-size: 11.5px; color: var(--dim); margin-bottom: 14px; }
#areas-chart .sbar { height: 54px; }
@media (max-width: 720px) { .sseg { padding: 0 5px; } .sseg b { font-size: 10.5px; } .sseg small { font-size: 9.5px; } }
@media (prefers-reduced-motion: reduce) { .sseg { transition: none; } }
/* an indented row's bar is shorter by its indent, so every bar and every
   share ends on one line */
.ctable tr.sub th .share { max-width: 282px; }
.arow.sub .al .share { max-width: 280px; }
.eurow .rk.tie { opacity: 0.45; }

/* completion: the rest of the selected name, ghosted after the caret. The
   field and the ghost share font, size, line height, padding and border, so
   the typed part (transparent in the ghost) covers the field's own text. */
.field { font-family: var(--sans); line-height: 20px; }
.lookup .ghost { position: absolute; left: 0; top: 0; max-width: 100%; padding: 12px 14px; border: 1px solid transparent;
  font: 15px/20px var(--sans); color: var(--dim); white-space: pre; overflow: hidden; pointer-events: none; }
.lookup .ghost .gt { color: transparent; }
.lookup .ghost:empty { display: none; }

/* the rules broken — no filing, a filing error — the worst there is: the
   far-over red, crossed out where nothing was filed, striped where the
   filing was wrong. Text that reports them takes the same red. */
.b-nofile { background: linear-gradient(45deg, transparent 40%, #fff 40% 60%, transparent 60%),
  linear-gradient(-45deg, transparent 40%, #fff 40% 60%, transparent 60%), var(--b-over2); }
.b-err { background: repeating-linear-gradient(135deg, var(--b-over2) 0 2px, transparent 2px 4px),
  color-mix(in srgb, var(--b-over2) 30%, transparent); }
.mcol .mb i.b-nofile { background: repeating-linear-gradient(135deg, var(--b-over2) 0 6px, transparent 6px 9px); opacity: 0.9; }
.sc.bad, .sc.bad small, .who small .bad, .mv.bad, .t-bad { color: var(--b-over2); }
.t-bad { font-weight: 600; margin-top: 4px; }
.hero .lede strong:last-child { color: var(--alert); }
.ocard-lede.bad { color: var(--b-over2); font-weight: 500; }
.ocard-rules { margin-top: 12px; font-size: 13.5px; color: var(--prose); }
.ocard-rules.bad { color: var(--b-over2); font-weight: 600; }
.ocard-big b.word { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.03em; }
.trow .who small.bad { color: var(--b-over2); }

/* a region's municipalities, worst first, each a way into its card */
.mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mchip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-chip);
  background: var(--canvas); color: var(--text); font: 13px var(--sans); cursor: pointer; }
.mchip:hover { background: var(--hover); }
.mchip i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.mchip b { font: 700 11px var(--mono); color: var(--prose); }
.mchip b.bad { color: var(--b-over2); }
[data-regions="lookup"] { margin-bottom: 14px; }

/* the region's five largest, under the search: a first click without typing */
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.quick-k { font: 500 10px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }

/* the alert: a rule broken. The icon takes the colour of its text; on a card
   the message is a box, tinted with the far-over red and edged with it. */
.ico-alert { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; vertical-align: -0.14em; }
.alert { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--r-row);
  background: color-mix(in srgb, var(--b-over2) 11%, transparent); border: 1px solid color-mix(in srgb, var(--b-over2) 40%, transparent);
  border-left: 3px solid var(--b-over2); color: var(--b-over2); font-weight: 600; }
.alert .ico-alert { width: 19px; height: 19px; margin-top: 1px; }
.ocard-lede.alert { font-size: 14.5px; }
.ocard-rules.alert { font-size: 13.5px; }
.sc .ico-alert, .who small .ico-alert, .t-bad .ico-alert { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; }
.alert-inline { color: var(--alert); white-space: nowrap; }
.alert-inline .ico-alert { margin-right: 5px; }
.hero .lede .alert-inline strong { color: var(--alert); }

/* the map, as gust-ui's Europe example draws Europe: the members in five
   classes on vLockin's heat ramp, hottest where the news is worst, the neighbours quiet; a pointer lights a
   country and its row, the one kept wears the selection's amber */
.eu-wrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .eu-wrap { grid-template-columns: minmax(0, 1fr); } }
.eu-wrap .eu { columns: 1; }
.eu-wrap .eurow { grid-template-columns: 22px 30px minmax(0, 1fr) 66px; cursor: pointer; }
.eu-wrap .eurow .a { display: none; }
.eurow.on { background: var(--hover); border-radius: 6px; }
.eurow.chosen { box-shadow: inset 3px 0 0 var(--amber); border-radius: 6px; }
.eumap-fig { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 10px 10px 12px; }
.eumap { display: block; width: 100%; height: auto; }
.eumap .nb path { fill: var(--line-soft); stroke: var(--card); stroke-width: 0.8; }
.eumap .ms path { fill: var(--plan); stroke: var(--card); stroke-width: 0.9; cursor: pointer; transition: opacity 150ms ease; }
.eumap .ms path.q1 { fill: var(--h1); }
.eumap .ms path.q2 { fill: var(--h2); }
.eumap .ms path.q3 { fill: var(--h3); }
.eumap .ms path.q4 { fill: var(--h4); }
.eumap .ms path.q5 { fill: var(--h5); }
.eumap .ms:hover path { opacity: 0.6; }
.eumap .ms path:hover, .eumap .ms path.on { opacity: 1; stroke: var(--text); stroke-width: 1.6; }
.eumap .ms path.chosen { stroke: var(--amber); stroke-width: 2.4; opacity: 1; }
.eumap .lb text { font: 600 19px var(--sans); fill: var(--text); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--card); stroke-width: 4.5px; stroke-linejoin: round; }
.eumap .lb .lv { font: 500 15px var(--mono); fill: var(--prose); }
.eumap .lb text.code { font: 700 15px var(--mono); }
.eukey { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 4px 0; font: 11px var(--mono); color: var(--prose); }
.eukey .ek-t { font-weight: 700; color: var(--text); }
.eukey .ek { display: inline-flex; align-items: center; gap: 6px; }
.eukey .ek i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.eukey .ek i.q1 { background: var(--h1); }
.eukey .ek i.q2 { background: var(--h2); }
.eukey .ek i.q3 { background: var(--h3); }
.eukey .ek i.q4 { background: var(--h4); }
.eukey .ek i.q5 { background: var(--h5); }
.eukey .ek-d { color: var(--dim); }
.eumap-fig .credit { margin: 8px 4px 0; font-size: 11px; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .eumap .ms path { transition: none; } }

/* a country, marked by its flag: small, before its name in an eyebrow. The
   flag's colours are the flag's — not data, not status — and its white is
   Bone, as the house has no pure white. */
.flag { display: inline-block; width: 14px; height: 10px; margin-right: 8px; vertical-align: -1px; border-radius: 1.5px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent); }
.flag-nl { background: linear-gradient(to bottom, #AE1C28 0 33.34%, #F4EFE8 33.34% 66.67%, #21468B 66.67% 100%); }