/* Layout: one centred column; masthead, headline tiles, tabbed searchable tables. */
:root {
  --bg: #f5f7f8;
  --panel: #ffffff;
  --fg: #14212b;
  --muted: #5b6b77;
  --line: #dbe2e7;
  --accent: #0f4c81;   /* Pacific blue */
  --gold: #b8860b;     /* sun on the flag */
  --warn: #a15c00;
  --good: #2f7a3e;
  --bad: #b3261e;
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e151b; --panel: #151f27; --fg: #e6edf2; --muted: #93a3af; --line: #26343f;
    --accent: #6fa8dc; --gold: #e0b44c; --warn: #e3a34b; --good: #6cc17d; --bad: #f08a80;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--font-body); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-left)) 48px; display: grid; gap: 24px; }

.masthead { display: grid; gap: 6px; border-top: 4px solid var(--accent); padding-top: 16px; }
.masthead-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 16px; }
h1 { font: 600 clamp(28px, 4vw, 40px)/1.1 var(--font-display); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.dek { margin: 0; color: var(--muted); max-width: 70ch; }
.sweep { margin: 0; font: 12px var(--font-mono); color: var(--muted); }
.status-pill { font: 500 12px var(--font-mono); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.status-pill.live { border-color: var(--good); color: var(--good); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.tile-label { font-size: 12px; color: var(--muted); }
.tile-value { font: 600 28px/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.tile-asof { font: 11px var(--font-mono); color: var(--muted); }
.tile-note { font-size: 12px; color: var(--muted); }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.tab { font: 500 14px var(--font-body); background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px; color: var(--muted); cursor: pointer; }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tab:focus-visible, .chip:focus-visible, .search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.count { font: 11px var(--font-mono); color: var(--muted); margin-left: 4px; }

.page { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; min-width: 0; }
.page h2 { font: 600 20px var(--font-display); margin: 0; }
.note { color: var(--muted); font-size: 13px; margin: 0; max-width: 75ch; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); flex: 1 1 220px; max-width: 360px; min-width: 0; }
.chip { font: 12px var(--font-body); padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--panel); }

.scroll { overflow: auto; max-height: 72vh; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { position: sticky; top: 0; background: var(--panel); text-align: left; font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.strong { font-weight: 600; white-space: nowrap; }
td.muted { color: var(--muted); font-size: 13px; }
td.date { font: 12px var(--font-mono); color: var(--muted); white-space: nowrap; }
td.quote { font: 400 17px/1.4 var(--font-display); }
td a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.gap { color: var(--warn); }
.empty { color: var(--muted); font-size: 13px; padding: 12px 0; }
.error { color: var(--bad); }

.foot { color: var(--muted); font-size: 12px; }
.foot code { font-family: var(--font-mono); }

@media (max-width: 640px) { .hide-narrow { display: none; } .page { padding: 14px; } }

/* Charts */
.ch-grid-wrap { display: grid; gap: 16px; }
.ch-card { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; min-width: 0; }
.ch-card h3 { font: 600 16px var(--font-body); margin: 0; }
.ch-box { position: relative; min-height: 260px; color: var(--fg); }
.ch-box svg { display: block; overflow: visible; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-tick { font: 11px var(--font-mono); fill: var(--muted); }
.ch-band { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.ch-dot { stroke: var(--panel); stroke-width: 2; cursor: pointer; }
.ch-dot:focus-visible { outline: none; stroke: var(--fg); }
.ch-dot.ch-dense { stroke: none; }
.ch-tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: 12px var(--font-mono); white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
.ch-summary { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ch-chip { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.ch-chip::before { content: ""; width: 14px; height: 4px; border-radius: 2px; background: var(--c); }
.chart-link { font: 500 11px var(--font-mono); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: none; cursor: pointer; vertical-align: 1px; }
.ext-button { justify-self: start; font: 600 14px var(--font-body); padding: 9px 16px; border: 2px solid var(--accent); border-radius: 6px; color: var(--accent); text-decoration: none; }
.ext-button:hover { background: var(--accent); color: var(--panel); }
.ext-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Food */
.flag { font: 600 11px var(--font-mono); color: var(--bad); border: 1px solid var(--bad); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.bad-text { color: var(--bad); font-size: 13px; }
.good-text { color: var(--good); font-size: 13px; }

/* Trade */
.tr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.tr-card { display: grid; gap: 10px; align-content: start; min-width: 0; }
.tr-card h3 { font: 600 16px var(--font-body); margin: 0; }
.tr-totals { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tr-totals-wrap { display: grid; gap: 4px; }
.tr-caption { margin: 0; font-size: 12px; color: var(--muted); }
.tr-overall { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.tr-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px 24px; }
.tr-group { display: grid; gap: 6px; align-content: start; }
.tr-group h4 { font: 600 14px var(--font-body); margin: 0; }
.tr-group-total .tr-num { font-size: 26px; }
.tr-stat { display: grid; }
.tr-num { font: 600 22px var(--font-display); font-variant-numeric: tabular-nums; }
.tr-list { display: grid; gap: 6px; }
.tr-row { display: grid; grid-template-columns: minmax(90px, 9rem) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.tr-name { text-align: left; font: inherit; color: var(--fg); background: none; border: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-toggle { color: var(--accent); cursor: pointer; font-weight: 600; }
.tr-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-bars { display: grid; gap: 2px; }
.tr-bar { display: block; height: 8px; border-radius: 4px; min-width: 2px; }
.tr-ex { background: var(--accent); }
.tr-im { background: var(--gold); height: 5px; }
.tr-vals { font: 12px var(--font-mono); color: var(--muted); white-space: nowrap; }
.tr-states { display: grid; gap: 4px; padding: 6px 0 8px 14px; border-left: 2px solid var(--line); margin-left: 4px; }
.tr-sub { font-size: 12px; }
.tr-hist { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.tr-hist h4 { font: 600 14px var(--font-body); margin: 0; }
.tr-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.tr-line-ex { stroke: var(--accent); }
.tr-line-im { stroke: var(--gold); }
.tr-dot { stroke: var(--panel); stroke-width: 1.5; }
.tr-dot.tr-line-ex { fill: var(--accent); }
.tr-dot.tr-line-im { fill: var(--gold); }
.food-pick { justify-self: start; max-width: 100%; font: 14px var(--font-body); padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); }
.food-hist { display: grid; gap: 10px; margin-top: 28px; }
.food-hist h3 { font: 600 18px var(--font-body); margin: 0; }
.vis { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.vis-public { color: var(--good); }
.vis-private { color: var(--muted); }
.publish-log { white-space: pre-wrap; font: 12px var(--font-mono); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; max-height: 240px; overflow: auto; }
.ch-break { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; }
.ch-sources { padding-left: 18px; margin: 4px 0; }
.ch-sources li { margin: 2px 0; }
.ch-gap { margin: 2px 0 6px; }
.ch-gap strong { color: var(--fg); font-weight: 600; }

/* Ownership */
.ow-wrap { display: grid; gap: 20px; }
.ow-gap { border-left: 3px solid var(--warn); padding: 8px 12px; background: var(--bg); border-radius: 0 var(--radius) var(--radius) 0; font-size: 14px; max-width: 80ch; }
.ow-stack { display: grid; gap: 4px; }
.ow-row { display: grid; grid-template-columns: 3rem 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.ow-year { font: 12px var(--font-mono); color: var(--muted); }
.ow-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--line); }
.ow-seg { display: block; height: 100%; }
.ow-bc { font-weight: 600; }
.ow-h { font: 600 18px var(--font-display); margin: 0; }
.ow-companies { display: grid; gap: 10px; }
.ow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.ow-list li { border-top: 1px solid var(--line); padding-top: 8px; }
.ow-meta { color: var(--muted); font-size: 12px; }
.ow-companies .scroll { max-height: none; }
.ow-list a { color: var(--accent); }

/* Chart layers: the Canada comparison line, event markers and their switches. */
:root { --ev-political: #6b4fa0; --ev-economic: #8a6a00; --ev-disaster: #a3336f; --ev-global: #13808a; --ca: #7d8a94; }
@media (prefers-color-scheme: dark) {
  :root { --ev-political: #b39ddb; --ev-economic: #e0c060; --ev-disaster: #f08cc0; --ev-global: #6fd0d8; --ca: #a3b0ba; }
}
.ch-controls { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 760px) { .ch-controls { position: sticky; top: 0; z-index: 2; } }
.ch-ctl-group { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.ch-ctl-label { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ch-switch { --sw: var(--accent); display: inline-flex; align-items: center; gap: 7px; font: 13px var(--font-body); color: var(--fg); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.ch-switch .ch-knob { width: 30px; height: 17px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; flex: none; }
.ch-switch .ch-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
.ch-switch[aria-checked="true"] .ch-knob { background: var(--sw); }
.ch-switch[aria-checked="true"] .ch-knob::after { transform: translateX(13px); }
.ch-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ch-sw-ca { --sw: var(--ca); }
/* Adjusted for inflation (assets/inflation.js): the site-wide switch under the tabs, and each chart's own */
.infl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.infl-bar:empty { display: none; }
.infl-global-note { font-size: 12.5px; color: var(--muted); flex: 1 1 260px; }
.infl-switch { --sw: var(--good, var(--accent)); font-weight: 600; }
.infl-switch:disabled { cursor: not-allowed; opacity: .5; }
.infl-row { margin: 4px 0 6px; }
.infl-chart { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.infl-chart .infl-switch { font-weight: 400; font-size: 12.5px; }
.infl-why { font-size: 12px; color: var(--muted); }
.infl-tag { display: block; font: 500 11px var(--font-mono); color: var(--muted); letter-spacing: .02em; }
.infl-note { border-left: 3px solid var(--sw, var(--accent)); padding-left: 8px; }
.ch-sw-ev.ch-ev-political { --sw: var(--ev-political); }
.ch-sw-ev.ch-ev-economic { --sw: var(--ev-economic); }
.ch-sw-ev.ch-ev-disaster { --sw: var(--ev-disaster); }
.ch-sw-ev.ch-ev-global { --sw: var(--ev-global); }
.ch-views { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-chip-ca::before { background: repeating-linear-gradient(90deg, var(--ca) 0 5px, transparent 5px 8px); }
.ch-ca { fill: none; stroke: var(--ca); stroke-width: 2; stroke-dasharray: 6 4; }
.ch-ca-dot { fill: var(--ca); stroke: var(--panel); stroke-width: 1; cursor: pointer; }
.ch-ca-dot:focus-visible { outline: none; stroke: var(--fg); }
.ch-ca-dot.ch-dense { stroke: none; }
.ch-zero { stroke: var(--muted); stroke-width: 1; }
.ch-ev { --ev: var(--muted); }
.ch-ev-political { --ev: var(--ev-political); }
.ch-ev-economic { --ev: var(--ev-economic); }
.ch-ev-disaster { --ev: var(--ev-disaster); }
.ch-ev-global { --ev: var(--ev-global); }
.ch-ev-line { stroke: var(--ev); stroke-width: 1.25; stroke-dasharray: 1 3; opacity: .9; }
.ch-ev-hit { fill: transparent; cursor: pointer; }
.ch-ev-mark { fill: var(--ev); stroke: var(--panel); stroke-width: 1; cursor: pointer; }
.ch-ev a:focus-visible { outline: none; }
.ch-ev a:focus-visible .ch-ev-mark, .ch-ev a:hover .ch-ev-mark { stroke: var(--fg); stroke-width: 1.5; }
.ch-tip { z-index: 3; }
.ch-tip-wide { white-space: normal; width: max-content; max-width: min(320px, 90%); display: grid; gap: 3px; font-family: var(--font-body); line-height: 1.35; }
.ch-tip-wide strong { font-weight: 600; }
.ch-tip-wide em { color: var(--muted); font-size: 11px; }
/* Income against costs: one style per line. Income is solid and heavy; all prices (CPI) is the grey reference. */
.ch-m { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-m-income { --m: var(--fg); }
.ch-m-a { --m: var(--ev-disaster); }
.ch-m-b { --m: var(--ev-political); }
.ch-m-c { --m: var(--ev-economic); }
.ch-m-d { --m: var(--ev-global); }
.ch-m-cpi { --m: var(--ca); }
.ch-m.ch-m-income { stroke-width: 3.5; }
.ch-m.ch-m-cpi { stroke-dasharray: 6 4; }
.ch-m { stroke: var(--m); }
.ch-m-chip::before { background: var(--m); }
.ch-m-chip.ch-m-cpi::before { background: repeating-linear-gradient(90deg, var(--m) 0 5px, transparent 5px 8px); }
.ch-m-row { display: flex; align-items: center; gap: 6px; }
.ch-m-row i { width: 12px; height: 3px; border-radius: 2px; background: var(--m); flex: none; }
.ch-guide { stroke: var(--muted); stroke-width: 1; }

/* Click-to-compare (data/peers.json): provinces as thin muted lines, the Canadian average
   as the grey dashed Canada line, the US in its own colour. */
:root { --peer: #9aa7b1; --us: #0b7f6f; }
@media (prefers-color-scheme: dark) { :root { --peer: #5e6f7c; --us: #5cc7b5; } }
.ch-clickable { cursor: zoom-in; }
.ch-cmp-open .ch-clickable { cursor: zoom-out; }
.ch-cmp-btn { justify-self: start; }
.ch-peer-panel { display: grid; gap: 6px; }
.ch-peer-panel:empty { display: none; }
.ch-peer-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-key { --k: var(--peer); font: 12px var(--font-body); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.ch-key::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--k); }
.ch-key[aria-pressed="true"] { color: var(--fg); border-color: var(--k); }
.ch-key[aria-pressed="false"]::before { opacity: .35; }
.ch-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ch-key-all::before { display: none; }
.ch-key-canada { --k: var(--ca); }
.ch-key-canada::before { background: repeating-linear-gradient(90deg, var(--ca) 0 5px, transparent 5px 8px); }
.ch-key-us { --k: var(--us); }
.ch-key-us::before { background: repeating-linear-gradient(90deg, var(--us) 0 6px, transparent 6px 9px); }
.ch-key-us.ch-key-fed::before { background: repeating-linear-gradient(90deg, var(--us) 0 2px, transparent 2px 5px); }
.ch-peer, .ch-peer-hit { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ch-peer { stroke: var(--peer); stroke-width: 1.5; }
.ch-peer-hit { stroke: transparent; stroke-width: 10; }
.ch-peer-dot { fill: var(--peer); stroke: var(--panel); stroke-width: 1; }
.ch-peer-label { font: 10px var(--font-mono); fill: var(--muted); }
.ch-peer-canada .ch-peer { stroke: var(--ca); stroke-width: 2.5; stroke-dasharray: 6 4; }
.ch-peer-canada .ch-peer-dot { fill: var(--ca); }
.ch-peer-us .ch-peer { stroke: var(--us); stroke-width: 2.5; stroke-dasharray: 8 3; }
.ch-peer-us.ch-peer-fed .ch-peer { stroke-width: 2; stroke-dasharray: 2 4; }
.ch-peer-us .ch-peer-dot { fill: var(--us); }
.ch-peer-us .ch-peer-label { fill: var(--us); }
.ch-peer-g.is-hot .ch-peer { stroke: var(--fg); stroke-width: 2.5; }
.ch-peer-g.is-hot .ch-peer-dot { fill: var(--fg); }
.ch-peer-g.is-hot .ch-peer-label { fill: var(--fg); font-weight: 600; }
.ch-facts { margin: 0; font-size: 13px; color: var(--fg); }
.ch-peer-province .ch-peer-dot { opacity: 0; }
.ch-peer-g.is-hot .ch-peer-dot { opacity: 1; }
.ch-peer-bc .ch-peer-label { fill: var(--fg); font-weight: 600; }
/* Crime tab */
.cr-wrap { display: grid; gap: 28px; }
.cr-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.cr-nav a { color: var(--accent); }
.cr-section { display: grid; gap: 12px; min-width: 0; scroll-margin-top: 12px; }
.cr-h { font: 600 18px var(--font-display); margin: 0; border-top: 2px solid var(--line); padding-top: 14px; }
.cr-section h4 { font: 600 15px var(--font-body); margin: 8px 0 0; }
.cr-groups { display: grid; gap: 8px; }
.cr-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-group-label { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); min-width: 150px; }
.cr-say { margin: 0; font: 400 16px/1.45 var(--font-display); max-width: 70ch; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.cr-line { fill: none; stroke-width: 2; }
.cr-ca { stroke: var(--muted); stroke-dasharray: 5 4; fill: none; }
circle.cr-ca { fill: var(--muted); stroke: none; }
.cr-n0 { stroke: var(--fg); } circle.cr-n0 { fill: var(--fg); stroke: none; }
.cr-n1 { stroke: var(--accent); } circle.cr-n1 { fill: var(--accent); stroke: none; }
.cr-n2 { stroke: var(--gold); } circle.cr-n2 { fill: var(--gold); stroke: none; }
.cr-dot { cursor: pointer; }
.cr-key-bc::before { background: linear-gradient(90deg, #2e8b57, #f07f1d, #d1262e, #1f5fbf); }
.cr-key-ca::before { background: repeating-linear-gradient(90deg, var(--muted) 0 5px, transparent 5px 8px); }
.cr-key-cr-n0::before { background: var(--fg); }
.cr-key-cr-n1::before { background: var(--accent); }
.cr-key-cr-n2::before { background: var(--gold); }
.cr-timeline, .cr-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cr-law, .cr-cases li { display: grid; gap: 4px; border-left: 3px solid var(--line); padding-left: 12px; }
.cr-law-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cr-badge { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; padding: 1px 8px; border-radius: 999px; border: 1px solid; }
.cr-badge-federal { color: var(--accent); }
.cr-badge-bc { color: var(--gold); }
.cr-date { font: 12px var(--font-mono); color: var(--muted); }
.cr-who { font-size: 12px; color: var(--muted); }
.cr-next { margin: 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius); font-size: 13px; }
.cr-cases a { color: var(--accent); }
@media (max-width: 640px) { .cr-group-label { min-width: 100%; } }
.cr-grid .ch-box { min-height: 0; }
.cr-span { fill: var(--muted); fill-opacity: .1; }
.ch-dot.cr-prelim { fill: var(--panel); stroke: currentColor; stroke-width: 2; }
.cr-marks { padding-left: 18px; margin: 0; }
/* Votes and MLAs */
.vt-head { display: grid; gap: 6px; }
.vt-list { display: grid; gap: 8px; }
.vt-item { display: grid; gap: 4px; text-align: left; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; }
.vt-item:hover { border-color: var(--accent); }
.vt-item:focus-visible, .vt-link:focus-visible, .vt-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vt-item-top { display: flex; justify-content: space-between; gap: 8px; }
.vt-item-title { font-weight: 600; }
.vt-item .muted { color: var(--muted); font-size: 13px; }
.vt-date { font: 12px var(--font-mono); color: var(--muted); }
.vt-result { font: 600 12px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.vt-tally { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); }
.vt-tally-y { background: var(--good); }
.vt-tally-n { background: var(--bad); }
.vt-big { font: 600 22px var(--font-display); margin: 0; font-variant-numeric: tabular-nums; }
.vt-big .good-text, .vt-big .bad-text { font-size: inherit; }
.vt-h3 { font: 600 15px var(--font-body); margin: 8px 0 0; }
.vt-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.vt-members, .vt-bills { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.vt-members .muted { color: var(--muted); font-size: 12px; }
.vt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; flex: none; }
.vt-link { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.vt-role { font-size: 12px; }
.vt-table th.num, .vt-table td.num { text-align: right; font-family: var(--font-mono); font-size: 13px; }
.vt-sheet td, .vt-sheet th { padding: 7px 8px; }
.vt-sheet td.vt-name { white-space: nowrap; }
.vt-sort { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.vt-hot { color: var(--bad); font-weight: 600; }
.vt-yea { color: var(--good); }
.vt-nay { color: var(--bad); }
.vt-absent { color: var(--warn); }
.vt-abstain, .vt-chair { color: var(--muted); }
.vt-key { font-size: 12px; }
.vt-back { justify-self: start; }

/* Compare: pick any lines and overlay them (assets/compare.js). */
:root { --headline: #8a5a00; --mk-0: #0f7c86; --mk-1: #b3261e; --mk-2: #4a5d70; --mk-3: #6b7d00; --mk-4: #8a4b14; --mk-5: #3949ab; }
@media (prefers-color-scheme: dark) { :root { --headline: #e0b44c; --mk-0: #5cc7cf; --mk-1: #f08a80; --mk-2: #a3b4c4; --mk-3: #c3d45a; --mk-4: #e0a26a; --mk-5: #9fa8ff; } }
.cp-layout { display: grid; gap: 16px; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .cp-layout { grid-template-columns: minmax(0, 1fr); } }
.cp-side { min-width: 0; }
.cp-side[open] { display: grid; gap: 8px; align-content: start; }
.cp-side-head { font: 600 14px var(--font-body); color: var(--accent); cursor: pointer; padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--radius); list-style-position: inside; }
@media (min-width: 861px) { .cp-side-head { display: none; } }
@media (min-width: 861px) { .cp-side { position: sticky; top: 8px; } }
.cp-pick-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cp-search { max-width: none; }
.cp-count { font: 12px var(--font-mono); color: var(--muted); }
.cp-list { display: grid; gap: 2px; max-height: min(70vh, 640px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; }
@media (max-width: 860px) { .cp-list { max-height: 50vh; } }
.cp-group summary { font: 600 13px var(--font-body); padding: 7px 8px; cursor: pointer; border-radius: 6px; }
.cp-group summary:hover { background: var(--bg); }
.cp-group summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cp-item { display: grid; gap: 1px; width: 100%; text-align: left; font: 13px/1.35 var(--font-body); color: var(--fg); background: none; border: 0; border-left: 3px solid transparent; padding: 7px 8px 7px 12px; border-radius: 0 6px 6px 0; cursor: pointer; min-height: 40px; }
.cp-item:hover { background: var(--bg); }
.cp-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cp-item[aria-pressed="true"] { border-left-color: var(--accent); background: var(--bg); font-weight: 600; }
.cp-item[aria-pressed="true"] .cp-item-label::before { content: "✓ "; color: var(--accent); }
.cp-item:disabled { opacity: .45; cursor: not-allowed; }
.cp-item-meta { font: 11px var(--font-mono); color: var(--muted); font-weight: 400; }
.cp-main { display: grid; gap: 12px; min-width: 0; }
.cp-picked { display: grid; gap: 6px; }
.cp-empty { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius); }
.cp-empty p { margin: 0; }
.cp-pick { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; color: var(--fg); }
.cp-pick-text { display: grid; min-width: 0; }
.cp-pick-label { font-size: 13px; }
.cp-remove { font: 18px/1 var(--font-body); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.cp-remove:hover { color: var(--fg); border-color: var(--fg); }
.cp-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-key { overflow: visible; }
.cp-badge circle { fill: var(--panel); stroke-width: 1.5; }
.cp-badge text { font: 600 10px var(--font-mono); fill: var(--fg); }
.cp-controls { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.cp-years { gap: 6px 14px; }
.cp-year { display: inline-flex; align-items: center; gap: 6px; }
.cp-year select { font: 13px var(--font-body); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.cp-msg { margin: 0; font-size: 13px; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--bg); border-radius: 0 6px 6px 0; }
.cp-chart { position: relative; display: grid; gap: 4px; color: var(--fg); min-width: 0; }
.cp-panel svg { display: block; overflow: visible; }
.cp-unit { font-weight: 500; }
.cp-hit { fill: transparent; touch-action: pan-y; }
.cp-line, .cp-badge, .cp-chart .ch-guide { pointer-events: none; }
.cp-tip { pointer-events: none; }
.cp-tip-row { display: block; font-size: 12px; }
.cp-tip-row b { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; font: 600 10px var(--font-mono); margin-right: 5px; }
.cp-mk { --ev: var(--ev-political); }
.cp-mk-hl { --ev: var(--headline); }
.cp-mk.ch-ev-political, .cp-detail.ch-ev-political { --ev: var(--ev-political); } .cp-mk.ch-ev-economic, .cp-detail.ch-ev-economic { --ev: var(--ev-economic); }
.cp-mk.ch-ev-disaster, .cp-detail.ch-ev-disaster { --ev: var(--ev-disaster); } .cp-mk.ch-ev-global, .cp-detail.ch-ev-global { --ev: var(--ev-global); }
.cp-mk-o0 { --ev: var(--mk-0); } .cp-mk-o1 { --ev: var(--mk-1); } .cp-mk-o2 { --ev: var(--mk-2); }
.cp-mk-o3 { --ev: var(--mk-3); } .cp-mk-o4 { --ev: var(--mk-4); } .cp-mk-o5 { --ev: var(--mk-5); }
.cp-mk-o .cp-mk-line { stroke-width: 1.75; }
.cp-sw-o { --sw: var(--mk-0); }
.cp-mk-sets { align-items: center; }
.cp-more summary { font: 13px var(--font-body); color: var(--accent); cursor: pointer; }
.cp-more[open] { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.cp-range { gap: 6px 12px; }
.cp-ends { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.cp-year input { font: 13px var(--font-body); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.cp-places { margin: 2px 0; }
.cp-mk-line { stroke: var(--ev); stroke-width: 1.5; }
.cp-mk-hl .cp-mk-line { stroke-dasharray: 5 3; }
.cp-mk-dot { fill: var(--ev); stroke: var(--panel); stroke-width: 1; cursor: pointer; }
.cp-mk a:hover .cp-mk-dot, .cp-mk a:focus-visible .cp-mk-dot { stroke: var(--fg); stroke-width: 1.5; }
.cp-mk a:hover + .cp-mk-line, .cp-mk:hover .cp-mk-line { stroke-width: 2.5; }
.cp-mk a:focus-visible { outline: none; }
.cp-mk-key { align-items: center; }
.cp-mk-chip { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.cp-mk-chip::before { content: ""; width: 2px; height: 14px; }
.cp-mk-chip::before { background: var(--ev); }
.cp-mk-chip.cp-mk-hl::before { background: repeating-linear-gradient(180deg, var(--headline) 0 4px, transparent 4px 6px); }
.cp-mk-chip.cp-mk-o::before { background: repeating-linear-gradient(180deg, var(--ev) 0 3px, transparent 3px 5px); }
.cp-detail { --ev: var(--muted); display: grid; gap: 4px; justify-items: start; padding: 10px 14px; border-left: 4px solid var(--ev); background: var(--bg); border-radius: 0 6px 6px 0; }
.cp-detail p { margin: 0; }
.cp-sw-ms { --sw: var(--ev-political); }
.cp-sw-hl { --sw: var(--headline); }
.cp-caveat { font-style: italic; }
.cp-table summary { font: 500 13px var(--font-body); cursor: pointer; color: var(--accent); }
.cp-table table { font-size: 12px; }
/* Housing: donuts with a line switch, the landlord list and the overlay chart. */
:root { --hs0: #0f4c81; --hs1: #c8553d; --hs2: #2a9d8f; --hs3: #8a6a00; --hs4: #7b4fa0; --hs5: #6b7b88; --hs6: #d17a00; --hs7: #a3336f; --hs8: #3b7d23; --hs9: #1b6f9c; }
@media (prefers-color-scheme: dark) {
  :root { --hs0: #6fa8dc; --hs1: #f08a6c; --hs2: #5fd0c0; --hs3: #e0c060; --hs4: #b39ddb; --hs5: #a3b0ba; --hs6: #ffb04d; --hs7: #f08cc0; --hs8: #8fd46f; --hs9: #6cc4f0; }
}
.hs-c0 { --hc: var(--hs0); } .hs-c1 { --hc: var(--hs1); } .hs-c2 { --hc: var(--hs2); } .hs-c3 { --hc: var(--hs3); } .hs-c4 { --hc: var(--hs4); }
.hs-c5 { --hc: var(--hs5); } .hs-c6 { --hc: var(--hs6); } .hs-c7 { --hc: var(--hs7); } .hs-c8 { --hc: var(--hs8); } .hs-c9 { --hc: var(--hs9); }
.hs-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.hs-select { font: 13px var(--font-body); padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
.hs-box { min-height: 230px; }
.hs-donut { position: relative; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.hs-donut svg { flex: none; overflow: visible; max-width: 100%; }
.hs-slice { fill: var(--hc); stroke: var(--panel); stroke-width: 2; cursor: pointer; }
.hs-slice:hover, .hs-slice:focus-visible { outline: none; stroke: var(--fg); }
.hs-donut-total { font: 600 22px var(--font-display); fill: var(--fg); }
.hs-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1 1 260px; min-width: 0; }
.hs-legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 2px 10px; align-items: baseline; font-size: 13px; }
.hs-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--hc); align-self: center; }
.hs-leg-val { font: 12px var(--font-mono); color: var(--muted); white-space: nowrap; }
.hs-leg-src { grid-column: 2 / -1; font-size: 11px; color: var(--muted); }
.hs-leg-src a, .hs-ov-lines a, .hs-card .note a { color: var(--accent); }
.hs-line { fill: none; stroke: var(--hc); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hs-dot { fill: var(--hc); stroke: var(--panel); stroke-width: 1; }
.hs-row i { background: var(--hc); }
.hs-col { cursor: crosshair; }
.hs-est { display: grid; gap: 8px; border: 1px dashed var(--line); border-radius: var(--radius); padding: 12px; }
.hs-est h4, .hs-ll h4 { margin: 0; font: 600 14px var(--font-body); }
.hs-est-row { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: baseline; }
.hs-est-row .note { grid-column: 1 / -1; }
.hs-est-val { font: 600 20px var(--font-display); }
.hs-tag { font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 1px 7px; justify-self: start; }
.hs-ll { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px 24px; }
.hs-ll-group { display: grid; gap: 10px; align-content: start; }
.hs-ll-item { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.hs-ll-head .muted { color: var(--muted); font-size: 12px; }
.hs-ll-num { font: 600 15px var(--font-mono); }
.hs-ov-ctl { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.hs-ov-ctl .ch-views { align-items: center; }
.hs-ov-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; }
.hs-ov-lines li { display: inline-flex; align-items: center; gap: 4px; }
.hs-ov-key { display: inline-flex; align-items: center; gap: 6px; font: 13px var(--font-body); color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.hs-ov-key i { width: 14px; height: 4px; border-radius: 2px; background: var(--line); }
.hs-ov-key[aria-pressed="true"] { color: var(--fg); border-color: var(--hc); }
.hs-ov-key[aria-pressed="true"] i { background: var(--hc); }
.hs-ov-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hs-ev-tax { --ev: var(--hs1); }
.hs-ev-break { --ev: var(--hs8); }
/* Headline detail pages (assets/metric.js): a tile opens #metric/<id>. */
.tile-link { position: relative; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tile-link:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgb(0 0 0 / .06); }
.tile-link:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile-more { font-size: 12px; color: var(--accent); margin-top: 4px; text-decoration: none; }
.tile-more:focus-visible { outline: none; }
.tile-link .tile-more::after { content: ""; position: absolute; inset: 0; } /* the whole tile opens the page */
.tile-src { font-size: 11px; color: var(--muted); margin-top: 2px; }
.tile-src a { color: var(--accent); position: relative; z-index: 1; text-decoration-thickness: 1px; text-underline-offset: 2px; }
body.on-metric .tiles, body.on-metric .tabs { display: none; }
.mt-page { gap: 14px; }
.mt-top { display: grid; gap: 10px; }
.mt-back { justify-self: start; color: var(--fg); }
.mt-hop { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.mt-hop .chip { white-space: nowrap; flex: none; }
.mt-head { display: grid; gap: 4px; }
.mt-value { font: 600 clamp(34px, 7vw, 48px)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.mt-hnote { padding: 10px 12px; border-left: 3px solid var(--gold); background: var(--bg); border-radius: 0 var(--radius) var(--radius) 0; max-width: none; }
.mt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
@media (max-width: 640px) { .mt-facts { grid-template-columns: 1fr 1fr; } }
.mt-fact { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); min-width: 0; }
.mt-fact-v { font: 600 20px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.mt-fact-v.good-text, .mt-fact-v.bad-text { font-size: 20px; }
.mt-rule { border-top: 1px solid var(--line); }
.mt-title { font: 600 16px var(--font-body); margin: 0; }
.mt-controls { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.mt-box { min-height: 0; }
.mt-below { display: grid; gap: 6px; }
.mt-below:empty { display: none; }
.mt-sources { display: grid; gap: 4px; }
.mt-page > .chip:last-child { justify-self: start; }
.mt-readout { margin: 0; font: 13px var(--font-mono); min-height: 1.5em; }
.mt-bar { cursor: pointer; }
.mt-bar.is-picked, .mt-bar:focus-visible { outline: none; stroke: var(--fg); stroke-width: 1.5; }
.mt-bar-fc { fill-opacity: .25; stroke-width: 1.5; stroke-dasharray: 3 2; }
.mt-bar-ca { fill: var(--ca); opacity: .8; pointer-events: none; }
.ch-fc-line { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 4; }
.ch-fc-dot { fill: var(--panel); stroke: var(--fg); stroke-width: 2; cursor: pointer; }
.mt-gov { display: grid; gap: 14px; }
.mt-gov-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) 2fr minmax(140px, 1fr); gap: 4px 14px; align-items: center; }
.mt-gov-label, .mt-gov-val { display: grid; gap: 1px; min-width: 0; }
.mt-gov-label span, .mt-gov-val span { font-size: 12px; color: var(--muted); }
.mt-gov-val strong { font-variant-numeric: tabular-nums; }
.mt-gov-track { position: relative; height: 18px; background: var(--bg); border-radius: 4px; }
.mt-gov-bar { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); background: var(--c); border-radius: 4px; }
.mt-gov-split::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1px solid var(--muted); }
.mt-gov-split .mt-gov-bar { left: 50%; }
.mt-gov-split .mt-gov-bar.is-neg { left: auto; right: 50%; }
@media (max-width: 640px) {
  .mt-gov-row { grid-template-columns: 1fr auto; }
  .mt-gov-track { grid-column: 1 / -1; grid-row: 2; }
  .mt-gov-val { text-align: right; }
}
.mt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; }
.mt-page a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mt-src { font-size: 12px; }

/* Status badges (Legislature) and result badges (Votes) */
.status-badge { display: inline-block; font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .05em; border: 1px solid currentColor; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.status-passed { color: var(--good); }
.status-defeated { color: var(--bad); }
.status-upcoming { color: var(--accent); }
.status-progress { color: var(--warn); }
.status-done { color: var(--muted); }
.vt-votes td { vertical-align: top; }
.vt-votes .vt-link { text-align: left; }
.vt-pcell { font: 13px var(--font-mono); white-space: nowrap; }
.vt-split { color: var(--warn); }
.vt-votes td.num, .vt-votes td.date { white-space: nowrap; }
/* Cost of living tab: wages against prices, hours of work, what households spend on.
   Eight line colours in a fixed order (light and dark steps of the same hues). */
:root { --lv1: #2a78d6; --lv2: #eb6834; --lv3: #1baf7a; --lv4: #eda100; --lv5: #e87ba4; --lv6: #008300; --lv7: #6250d6; --lv8: #e34948; }
@media (prefers-color-scheme: dark) {
  :root { --lv1: #3987e5; --lv2: #d95926; --lv3: #199e70; --lv4: #c98500; --lv5: #d55181; --lv6: #008300; --lv7: #9085e9; --lv8: #e66767; }
}
.lv-wrap { display: grid; gap: 16px; min-width: 0; }
.lv-c1, .lv-bg1 { --lv: var(--lv1); } .lv-c2, .lv-bg2 { --lv: var(--lv2); } .lv-c3, .lv-bg3 { --lv: var(--lv3); } .lv-c4, .lv-bg4 { --lv: var(--lv4); }
.lv-c5, .lv-bg5 { --lv: var(--lv5); } .lv-c6, .lv-bg6 { --lv: var(--lv6); } .lv-c7, .lv-bg7 { --lv: var(--lv7); } .lv-c8, .lv-bg8 { --lv: var(--lv8); }
.lv-ctl { display: grid; gap: 8px; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lv-chips .ch-ctl-label { min-width: 6.5em; }
.lv-select { font: 13px var(--font-body); padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); }
.lv-pick[aria-pressed="true"] { background: var(--panel); color: var(--fg); border-color: var(--lv); box-shadow: inset 4px 0 0 var(--lv); }
.chip:disabled { opacity: .45; cursor: not-allowed; }
.lv-box { min-height: 300px; }
.lv-line { fill: none; stroke: var(--lv); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lv-line.lv-ca { stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .85; }
.lv-dot { fill: var(--lv); stroke: var(--panel); stroke-width: 1; }
.lv-end { font: 11px var(--font-mono); fill: var(--fg); }
.lv-row { display: flex; align-items: center; gap: 6px; }
.lv-row i { width: 12px; height: 3px; border-radius: 2px; background: var(--lv); flex: none; }
.lv-swatch { display: inline-block; width: 12px; height: 4px; border-radius: 2px; background: var(--lv); margin-right: 6px; vertical-align: middle; }
.lv-key::before { background: var(--lv); }
.lv-plain::before { display: none; }
.lv-table-wrap { overflow-x: auto; }
.lv-table { border-collapse: collapse; font-size: 13px; }
.lv-table th { position: static; }
.lv-table td { padding: 6px 10px; white-space: nowrap; }
.lv-bars { position: relative; display: grid; gap: 4px; }
.lv-bar-row { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; align-items: center; }
.lv-bar-label { font: 12px var(--font-mono); color: var(--muted); }
.lv-bar-ca .lv-bar-label { color: var(--ca); }
.lv-bar { display: flex; gap: 2px; height: 16px; }
.lv-bar-ca .lv-bar { height: 10px; }
.lv-seg { background: var(--lv); min-width: 2px; cursor: pointer; }
.lv-seg:first-child { border-radius: 4px 0 0 4px; }
.lv-seg:last-child { border-radius: 0 4px 4px 0; }
.lv-seg:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
@media (max-width: 640px) { .lv-chips .ch-ctl-label { min-width: 100%; } }

/* Seat status next to an MLA's name: sitting, re-elected, defeated, or former */
.vt-seat { font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; white-space: nowrap; vertical-align: 1px; cursor: help; }
.vt-seat-current, .vt-seat-won { color: var(--good); }
.vt-seat-lost { color: var(--bad); }
.vt-seat-former { color: var(--muted); }

/* Private regions (assets/region.js): only on Spencer's computer, never on the live site. */
.region-pick { font: 500 12px var(--font-mono); padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; }
.region-tag { border-color: var(--bad); color: var(--bad); }
body.private-region .masthead { border-top-color: var(--bad); }
.lv-gauges { margin-top: 4px; }
.lv-gauge { min-width: 0; padding: 0 18px; }
.lv-sub { font: 600 14px var(--font-body); margin: 8px 0 0; }
.lv-ref { stroke-width: 1.5; stroke-dasharray: 6 4; }
.lv-ref-good { stroke: var(--gz-good); fill: var(--gz-good); }
.lv-ref-bad { stroke: var(--gz-bad); fill: var(--gz-bad); }
text.lv-ref-good, text.lv-ref-bad { stroke: none; }

/* Gauges (assets/gauge.js): a semicircle dial with a needle and an optional estimate range. */
:root { --gz-bad: #b3261e; --gz-poor: #d9822b; --gz-mid: #c9a227; --gz-fair: #7aa95c; --gz-good: #2f7a3e; }
@media (prefers-color-scheme: dark) { :root { --gz-bad: #f08a80; --gz-poor: #f0a860; --gz-mid: #e0c060; --gz-fair: #a6d18a; --gz-good: #6cc17d; } }
.gauge-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px 32px; }
.gauge { margin: 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.gauge-svg { max-width: 300px; overflow: visible; justify-self: center; }
.gauge-track { fill: var(--line); }
.gauge-range { fill: var(--accent); fill-opacity: .35; stroke: var(--accent); stroke-width: 1; }
.gauge-zone { fill: var(--line); }
.gauge-z-bad { fill: var(--gz-bad); } .gauge-z-poor { fill: var(--gz-poor); } .gauge-z-mid { fill: var(--gz-mid); }
.gauge-z-fair { fill: var(--gz-fair); } .gauge-z-good { fill: var(--gz-good); }
.gauge-zlabel { font: 10px var(--font-mono); fill: var(--muted); }
.gauge-tick { font: 10px var(--font-mono); fill: var(--muted); }
.gauge-needle { stroke: var(--fg); stroke-width: 3; stroke-linecap: round; }
.gauge-hub { fill: var(--fg); }
.gauge-cap { display: grid; gap: 4px; text-align: center; }
.gauge-num { font: 600 28px var(--font-display); font-variant-numeric: tabular-nums; }
.gauge-tag { font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 1px 7px; vertical-align: 5px; }
.gauge-label { font-size: 13px; }
.gauge-caption { font-size: 12px; color: var(--muted); }
.gauge-cap .note { margin: 0 auto; }
.gauge-src a { color: var(--accent); }