/* ============================================================
   ElectioMap — /shared/site.css   (direction: "Ledger")
   Shared component layer. Tokens only — no literal hex, px rhythm
   or durations. Load after tokens.css, with ?v= cache-busting.

   Contents
     1  reset + base + focus
     2  layout primitives
     3  chrome: header, network bar, footer, byline
     4  primitives: chip, pill, badge, btn, note, tabs
     5  status band (homepage)
     6  cards + grids (homepage, blog, country index)
     7  country hub
     8  election page: results, stats, bars, seats, in-numbers
     9  party colour system
    10  maps: container, legend, popup, region table
    11  prose (editorial + blog + policy)
    12  ad slots
    13  states: live, pending, empty, loading, withdrawn
    14  el-nav, 404
   ============================================================ */

/* ---- 1  reset + base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
b, strong { font-weight: var(--fw-semibold); }
:where(button, select) { font: inherit; color: inherit; }

:focus-visible {
  outline: var(--focus-ring) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-xs);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- 2  layout primitives ---------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-tight { display: flex; flex-direction: column; gap: var(--space-3); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.push { margin-left: auto; }
.rule { height: var(--bw-hair); background: var(--border); border: 0; }

/* section heading: the Ledger signature — 2px rule under a compact head */
.section-label {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--bw-rule) solid var(--text);
  margin-bottom: var(--space-4);
}
.section-label > h2, .section-label > h3 {
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
  letter-spacing: -.01em; line-height: var(--lh-snug);
}
.section-label > .sl-note { font-size: var(--fs-xs); color: var(--text-muted); }
.section-label > .push { margin-left: auto; }

.kicker {
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--accent);
}
.eyebrow { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; font-family: var(--font-num); }

/* ---- 3  chrome ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: 60px; background: var(--bg);
  border-bottom: var(--bw-hair) solid var(--border);
}
.site-header > .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.logo { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: -.015em; color: var(--text); }
.logo:hover { text-decoration: none; color: var(--text); }
.logo-mark { width: 26px; height: 26px; flex: none; }
.logo b { color: var(--accent); font-weight: var(--fw-semibold); }

.lang-switch { display: flex; border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.lang-btn {
  padding: var(--space-1) var(--space-2); background: none; border: 0; cursor: pointer;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted);
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.lang-btn:hover { background: var(--surface-2); color: var(--text); }
.lang-btn[aria-current="true"] { background: var(--text); color: var(--bg); font-weight: var(--fw-semibold); }

.theme-btn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: var(--bw-hair) solid var(--border); border-radius: var(--r-md);
  color: var(--text); cursor: pointer;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.theme-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.ic-sun, .ic-moon { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
:root .ic-sun { display: block; } :root .ic-moon { display: none; }
[data-theme="light"] .ic-sun { display: none; } [data-theme="light"] .ic-moon { display: block; }

.network-bar {
  background: var(--surface-inset);
  border-bottom: var(--bw-hair) solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.network-bar > .wrap { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.network-bar a { color: var(--text-muted); }
.network-bar a:hover { color: var(--accent); }
.nb-current { color: var(--text); font-weight: var(--fw-semibold); }
.nb-right { display: flex; align-items: center; gap: var(--space-3); }
.nb-divider { color: var(--border-strong); }

.byline {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: var(--bw-hair) solid var(--border);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.byline-avatar {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-pill);
  background: var(--accent-tint); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.byline-name { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text); }
.byline-sep { color: var(--border-strong); }

.footer-inner {
  border-top: var(--bw-hair) solid var(--border); background: var(--surface-inset);
  padding-block: var(--space-6);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.footer-inner > .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.footer-nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ---- 4  primitives ------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 32px; padding: var(--space-1) var(--space-3);
  background: none; border: var(--bw-hair) solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.chip:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--text); border-color: var(--text); color: var(--bg); font-weight: var(--fw-semibold);
}
.chip:disabled { opacity: .45; cursor: not-allowed; }
.chip-count { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip-count { color: var(--bg); opacity: .7; }

/* one filter component replaces .continent-filters/.year-filters/.month-filters/.type-filters */
.filters { display: flex; flex-direction: column; gap: var(--space-3); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); padding: var(--space-3) var(--space-4); }
.filter-group { display: flex; align-items: flex-start; gap: var(--space-3); }
.filter-group > .eyebrow { flex: none; width: 84px; padding-top: var(--space-2); }
.filter-set { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filters-toggle { display: none; }
@media (max-width: 780px) {
  .filters { padding: 0; border: 0; }
  .filters-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3); background: var(--surface-2); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
  .filters[data-collapsed="true"] .filter-group { display: none; }
  .filter-group { flex-direction: column; gap: var(--space-2); }
  .filter-group > .eyebrow { width: auto; padding: 0; }
  .filter-set { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: var(--space-1); }
  .chip { min-height: 40px; }
}

.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--bw-hair) solid var(--border-strong); border-radius: var(--r-sm);
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text);
}
.winner-pill { background: var(--accent-tint); border-color: var(--accent-border); color: var(--accent); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--r-sm);
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  background: var(--done-tint); color: var(--done);
}
.badge-live { background: var(--live-tint); color: var(--live); }
.badge-soon { background: var(--soon-tint); color: var(--soon); }
.badge-upcoming { background: var(--upcoming-tint); color: var(--upcoming); }
.badge-done { background: var(--done-tint); color: var(--done); }
.badge-live::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: currentColor; animation: em-pulse var(--dur-pulse) var(--ease) infinite;
}
@keyframes em-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: var(--space-2) var(--space-4);
  border: var(--bw-hair) solid var(--border-strong); border-radius: var(--r-md);
  background: none; color: var(--text);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--text-faint); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.note {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2); border-left: var(--bw-rule) solid var(--border-strong);
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted);
}
.note-accent { background: var(--accent-tint); border-left-color: var(--accent); color: var(--text); }

.tab-bar { display: flex; gap: var(--space-1); border-bottom: var(--bw-hair) solid var(--border); }
.tab-bar > a, .tab-bar > button {
  padding: var(--space-2) var(--space-3); margin-bottom: -1px;
  border: 0; border-bottom: var(--bw-rule) solid transparent; background: none;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); cursor: pointer;
}
.tab-bar > a:hover, .tab-bar > button:hover { color: var(--text); text-decoration: none; }
.tab-bar [aria-selected="true"] { color: var(--text); font-weight: var(--fw-semibold); border-bottom-color: var(--accent); }

.q-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-2); border: var(--bw-hair) solid var(--border-strong); border-radius: var(--r-sm); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.q-badge.inv { border-color: var(--live); color: var(--live); background: var(--live-tint); }

/* ---- 5  status band (replaces .live-bar/.recent-bar/.upcoming-bar) - */
.status-band { display: grid; grid-template-columns: repeat(var(--status-cols, 3), 1fr); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.status-col { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-right: var(--bw-hair) solid var(--border); }
.status-col:last-child { border-right: 0; }
.status-col > .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }
.status-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
.live-bar { border-left: var(--bw-rule) solid var(--live); background: var(--live-tint); }
.live-bar > .eyebrow { color: var(--live); }
.live-bar .status-links a { color: var(--text); font-weight: var(--fw-semibold); }
.recent-bar > .eyebrow { color: var(--accent); }
.upcoming-bar > .eyebrow { color: var(--upcoming); }
.live-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--live); animation: em-pulse var(--dur-pulse) var(--ease) infinite; }
@media (max-width: 780px) { .status-band { grid-template-columns: 1fr; } .status-col { border-right: 0; border-bottom: var(--bw-hair) solid var(--border); } .status-col:last-child { border-bottom: 0; } }

/* ---- 6  cards + grids -------------------------------------------- */
.seo-hero { display: flex; flex-direction: column; gap: var(--space-3); }
.seo-hero h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
.seo-hero .lede { font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--text-muted); max-width: var(--measure-lede); text-wrap: pretty; }

.countries-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--bw-hair); background: var(--border); border: var(--bw-hair) solid var(--border); }
.ccard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface-1); color: var(--text); transition: background var(--dur-base) var(--ease); }
.ccard:hover { background: var(--surface-2); text-decoration: none; }
.ccard-top { display: flex; align-items: center; gap: var(--space-2); }
.ccard-flag { font-size: 22px; line-height: 1; }
.ccard-name { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.ccard-meta { display: flex; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ccard.no-page { opacity: .55; cursor: default; }
.ccard.no-page:hover { background: var(--surface-1); }
.ccard.live-now { border-left: var(--bw-rule) solid var(--live); background: var(--live-tint); }
.ccard.has-page .ccard-name { color: var(--text); }

.country-index { display: flex; flex-direction: column; gap: var(--space-3); }
.ci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-1) var(--space-4); }
.ci-link { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--fs-sm); color: var(--text-muted); }
.ci-link:hover { color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); background: var(--surface-1); color: var(--text); }
.card:hover { border-color: var(--border-strong); text-decoration: none; }
.card h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.card p { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-body); }

/* ---- 7  country hub ---------------------------------------------- */
.hub-feature { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-6); border: var(--bw-hair) solid var(--border); border-left: var(--bw-rule) solid var(--accent); background: var(--surface-1); }
.ft-tag { display: inline-flex; gap: var(--space-2); }
.ft-title { font-size: var(--fs-h2); font-weight: var(--fw-semibold); letter-spacing: -.015em; }
.ft-date { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ft-cta { white-space: nowrap; }

.hub-list { display: flex; flex-direction: column; }
.hub-group-head { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-4) 0 var(--space-2); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.hub-row { display: grid; grid-template-columns: 90px 1fr 130px auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-2); border-top: var(--bw-hair) solid var(--border); color: var(--text); transition: background var(--dur-base) var(--ease); }
.hub-row:last-child { border-bottom: var(--bw-hair) solid var(--border); }
.hub-row:hover { background: var(--surface-2); text-decoration: none; }
.hr-date { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hr-type { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
.hr-end { font-size: var(--fs-xs); color: var(--text-muted); }
.hr-cta { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent); text-transform: uppercase; letter-spacing: var(--ls-caps); }
@media (max-width: 780px) { .hub-row { grid-template-columns: 1fr auto; row-gap: var(--space-1); } .hr-end { grid-column: 1 / -1; } }

.hub-covered { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.about-hub, .about-election { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-7); align-items: start; }
.about-meta { display: flex; flex-direction: column; gap: var(--space-5); }
.about-meta-block { display: flex; flex-direction: column; gap: var(--space-2); }
.about-meta-block > .eyebrow { color: var(--text-muted); }
.about-meta-list { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.faq-q { font-size: var(--fs-h3); font-weight: var(--fw-semibold); margin-top: var(--space-4); }
@media (max-width: 900px) { .about-hub, .about-election { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ---- 8  election page -------------------------------------------- */
.results-card { display: flex; flex-direction: column; gap: var(--space-5); }
.results-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-muted); }

.results-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--bw-hair) solid var(--border); }
.stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-right: var(--bw-hair) solid var(--border); }
.stat:last-child { border-right: 0; }
.stat-lbl { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.stat-val { font-size: var(--fs-num-xl); font-weight: var(--fw-semibold); letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--text-strong); }
.stat-sub { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .results-stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2n) { border-right: 0; } .stat:nth-child(n+3) { border-top: var(--bw-hair) solid var(--border); } }

/* result bars — EMResults.summaryBars */
.em-bars { display: flex; flex-direction: column; }
.em-bars-head, .em-bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 224px) minmax(80px, 1fr) 66px 96px 54px;
  gap: var(--space-3); align-items: center;
}
.em-bars-head { padding: 0 var(--space-2) var(--space-2); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.em-bars-head > :nth-child(n+3) { text-align: right; }
.em-bar-row { padding: var(--space-2); border-top: var(--bw-hair) solid var(--border); font-variant-numeric: tabular-nums; }
.em-bar-row:last-child { border-bottom: var(--bw-hair) solid var(--border); }
.em-bar-row.is-winner { background: var(--accent-tint); }
.em-bar-row.is-winner .em-bar-name { font-weight: var(--fw-semibold); }
.em-bar-name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: 14px; }
.em-bar-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-bar-sw { display: block; width: 10px; height: 10px; flex: none; border-radius: var(--r-xs); }
.em-bar-track { position: relative; display: block; height: 22px; background: var(--surface-2); border-radius: var(--r-xs); overflow: hidden; }
.em-bar-fill { display: block; height: 100%; width: var(--w, 0%); transition: width var(--dur-slow) var(--ease); }
.em-bar-ghost { position: absolute; inset: 0; display: block; width: var(--wg, 0%); opacity: .28; }
.em-bar-pct { text-align: right; font-size: var(--fs-num-lg); font-weight: var(--fw-semibold); color: var(--text-strong); }
.em-bar-votes { text-align: right; font-size: var(--fs-sm); color: var(--text-muted); }
.em-bar-seats { text-align: right; font-size: var(--fs-num-lg); font-weight: var(--fw-semibold); }
.em-withdrawn { opacity: .5; }
.em-withdrawn .em-bar-name { text-decoration: line-through; }
.em-withdrawn .em-bar-fill { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); }
@media (max-width: 780px) {
  .em-bars-head { display: none; }
  .em-bar-row { grid-template-columns: 1fr auto auto; row-gap: var(--space-1); }
  .em-bar-track { grid-column: 1 / -1; height: 18px; order: 3; }
  .em-bar-votes { display: none; }
}
.em-rtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.em-rtable th, .em-rtable td { padding: var(--space-2); border-top: var(--bw-hair) solid var(--border); text-align: right; }
.em-rtable th:first-child, .em-rtable td:first-child { text-align: left; }
.em-rtable thead th { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); border-top: 0; }

/* seat bar / hemicycle */
.seat-section { display: flex; flex-direction: column; gap: var(--space-3); }
.seat-bar-wrap { position: relative; padding-top: var(--space-4); }
.seat-bar { display: flex; height: 34px; gap: 1px; }
.seat-seg { display: block; width: var(--w, 0%); }
.majority-line { position: absolute; top: 0; bottom: 0; left: var(--at, 50%); width: 2px; background: var(--text); }
.majority-line::after {
  content: attr(data-label); position: absolute; left: var(--space-2); top: 0;
  font-size: var(--fs-label); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text); white-space: nowrap;
}
.seat-hemi { width: 100%; max-width: 460px; height: auto; margin-inline: auto; }
.seat-hemi-total { font-size: var(--fs-num-xl); font-weight: var(--fw-semibold); fill: var(--text-strong); }
.seat-hemi-lbl { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: 1.4px; fill: var(--text-muted); }
.seat-legend, .map-legend, .em-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.seat-legend > li, .map-leg { display: flex; align-items: center; gap: var(--space-2); }
.leg-sw { display: block; width: 9px; height: 9px; flex: none; border-radius: var(--r-xs); }
.seat-total-note { font-size: var(--fs-xs); color: var(--text-muted); }

.in-numbers { display: flex; flex-direction: column; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.in-numbers > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--bw-hair) solid var(--border); }
.in-numbers > div:last-child { border-bottom: 0; }
.in-numbers dt, .in-numbers .inl { color: var(--text-muted); }
.in-numbers dd, .in-numbers .inv { margin: 0; font-weight: var(--fw-semibold); }
.in-numbers-note { font-size: var(--fs-label); color: var(--text-faint); line-height: var(--lh-body); }

.explainers { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }

/* turnout / quorum gauge */
.gauge { display: flex; flex-direction: column; gap: var(--space-2); }
.gauge-track { position: relative; height: 26px; background: var(--surface-2); border-radius: var(--r-xs); overflow: hidden; }
.gauge-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); }
.gauge-fill.is-below { background: var(--live); }
.gauge-quorum { position: absolute; top: -4px; bottom: -4px; left: var(--at, 50%); width: 2px; background: var(--text); }
.gauge-scale { display: flex; justify-content: space-between; font-size: var(--fs-label); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* sparkline / small multiples (hub trend) */
.spark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.spark { display: flex; flex-direction: column; gap: var(--space-1); }
.spark svg { width: 100%; height: 44px; }
.spark path { fill: none; stroke: var(--party, var(--accent)); stroke-width: 1.5; }
.spark-lbl { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- 9  party colour system --------------------------------------
   Party colours arrive as arbitrary hex from data. Never a global var.
   Set --party inline on the row/segment/region:

     <div class="em-bar-row" style="--party:#0a6ba8">…</div>

   Legibility rule: the raw hex is the base (always valid), then a
   per-theme mix nudges it toward white (dark theme) or ink (light
   theme) so navy/maroon/pale brands stay distinguishable as an 11px
   swatch and as a map fill. Both themes set --party-mix/-amt.        */
.em-bar-fill, .em-bar-ghost, .em-bar-sw, .seat-seg, .leg-sw {
  background-color: var(--party, var(--party-other));
}
@supports (background-color: color-mix(in oklab, red 80%, white)) {
  .em-bar-fill, .em-bar-ghost, .em-bar-sw, .seat-seg, .leg-sw {
    background-color: color-mix(in oklab,
      var(--party, var(--party-other)) calc(100% - var(--party-mix-amt)),
      var(--party-mix));
  }
}
.map-region { fill: var(--party, var(--map-nodata)); }
@supports (fill: color-mix(in oklab, red 80%, white)) {
  .map-region {
    fill: color-mix(in oklab,
      var(--party, var(--map-nodata)) calc(100% - var(--party-mix-amt)),
      var(--party-mix));
  }
}
/* Colourblind safety: never rely on hue alone — every bar carries its
   party name, every seat segment its legend entry, and adjacent
   same-hue parties are separated by the 1px seat-bar gap. */

/* ---- 10  maps ----------------------------------------------------- */
.map-wrap, #map-wrap { position: relative; background: var(--map-bg); border: var(--bw-hair) solid var(--border); }
#map { width: 100%; height: 400px; z-index: var(--z-map); }
.map-wrap .map-canvas { width: 100%; height: 300px; }
@media (max-width: 780px) { #map { height: 260px; } .map-wrap .map-canvas { height: 240px; } }
.map-tabs { display: flex; gap: var(--space-1); }
.map-caption { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-body); }
.map-region { stroke: var(--map-stroke); stroke-width: .75; transition: fill-opacity var(--dur-fast) var(--ease); }
.map-region:hover { stroke: var(--map-stroke-hi); stroke-width: 1.5; fill-opacity: .85; }
.map-region[aria-selected="true"] { stroke: var(--map-stroke-hi); stroke-width: 2; }
.map-region.no-data { fill: var(--map-nodata); }
.map-seq-1 { fill: var(--seq-1); } .map-seq-2 { fill: var(--seq-2); } .map-seq-3 { fill: var(--seq-3); }
.map-seq-4 { fill: var(--seq-4); } .map-seq-5 { fill: var(--seq-5); } .map-seq-6 { fill: var(--seq-6); } .map-seq-7 { fill: var(--seq-7); }
.map-dtbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.map-dtbl th, .map-dtbl td { padding: var(--space-2); border-top: var(--bw-hair) solid var(--border); text-align: right; }
.map-dtbl th:first-child, .map-dtbl td:first-child { text-align: left; }
.map-dtbl tbody tr:hover { background: var(--surface-2); }

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface-1); color: var(--text);
  border: var(--bw-hair) solid var(--border-strong); border-radius: var(--r-md);
  box-shadow: var(--elev-2);
}
.leaflet-popup-content { margin: var(--space-3) var(--space-4); font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-sans); }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-muted); }
.popup-flag { font-size: 20px; line-height: 1; }
.popup-country { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.leaflet-control-attribution { background: var(--surface-inset) !important; color: var(--text-faint) !important; font-size: 10px !important; }
.leaflet-bar a { background: var(--surface-1) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* ---- 11  prose ---------------------------------------------------- */
.prose, .about-body, .doc {
  max-width: var(--measure-prose);
  font-size: var(--fs-prose); line-height: var(--lh-prose); color: var(--text);
}
.prose > * + *, .about-body > * + *, .doc > * + * { margin-top: var(--space-4); }
.prose h2, .about-body h2, .doc h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: -.015em; margin-top: var(--space-7); }
.prose h3, .about-body h3, .doc h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); margin-top: var(--space-6); }
.prose p:first-of-type, .about-body p:first-of-type { font-size: var(--fs-lede); color: var(--text); }
.prose p, .about-body p, .doc p { color: var(--text-muted); text-wrap: pretty; }
.prose strong, .about-body strong { color: var(--text); }
.prose ul, .about-body ul, .doc ul { list-style: disc; padding-left: var(--space-5); color: var(--text-muted); }
.prose li + li, .doc li + li { margin-top: var(--space-2); }
.lede { font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--text-muted); max-width: var(--measure-lede); text-wrap: pretty; }
.pull-fact { padding: var(--space-3) var(--space-4); background: var(--accent-tint); border-left: var(--bw-rule) solid var(--accent); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); }
.source-list { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }

/* ---- 12  ad slots ------------------------------------------------- */
.ad-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 96px; border: var(--bw-hair) dashed var(--border-strong); background: var(--surface-inset);
}
.ad-slot::before { content: "Advertisement"; font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.ad-slot > ins { display: block; }
.ad-slot-inline { min-height: 96px; }     /* after the results summary */
.ad-slot-mid { min-height: 260px; }        /* before the About section  */
.ad-slot-footer { min-height: 96px; }
@media (max-width: 780px) { .ad-slot-inline, .ad-slot-footer { min-height: 100px; } .ad-slot-mid { min-height: 280px; } }

/* ---- 13  states --------------------------------------------------- */
.is-live-head { display: flex; align-items: center; gap: var(--space-2); color: var(--live); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; }
.reporting { display: flex; flex-direction: column; gap: var(--space-2); }
.reporting-track { height: 6px; background: var(--surface-2); border-radius: var(--r-xs); overflow: hidden; }
.reporting-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--live); transition: width var(--dur-slow) var(--ease); }
.reporting-lbl { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.provisional { font-size: var(--fs-xs); color: var(--live); }

.pending-box { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: var(--bw-hair) dashed var(--border-strong); background: var(--surface-inset); text-align: center; align-items: center; }
.pending-box h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.pending-box p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 52ch; }

.skeleton { background: var(--surface-2); border-radius: var(--r-xs); animation: em-shimmer 1.4s linear infinite; }
@keyframes em-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.empty-state { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

/* ---- 14  el-nav + 404 -------------------------------------------- */
.el-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.el-nav-link { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: var(--bw-hair) solid var(--border); color: var(--text); }
.el-nav-link:hover { background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; }
.el-nav-link + .el-nav-link { text-align: right; }
.eln-dir { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.eln-ttl { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.el-nav-hub { margin-top: var(--space-3); }
.el-nav-hubrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--bw-hair) solid var(--border); font-size: var(--fs-sm); }
@media (max-width: 780px) { .el-nav { grid-template-columns: 1fr; } .el-nav-link + .el-nav-link { text-align: left; } }

.page-404 { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-block: var(--space-9); }
.page-404 .code { font-size: var(--fs-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; }

/* ---- 15  repo integration ----------------------------------------
   Added while wiring the design layer into the generators. Everything
   here is a component the generated markup actually emits and §1–§14
   did not name; tokens only, same rules as the rest of the file.     */

/* bar sub-label: "48 seats" (parliamentary) or the party name (presidential).
   .em-bar-name is a flex row, so the sub takes its own line under the name. */
.em-bar-name { flex-wrap: wrap; }
.em-bar-sub { flex-basis: 100%; padding-left: 18px; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-muted); }
.em-legend > li { display: flex; align-items: center; gap: var(--space-2); }
.em-rtable .leg-sw { display: inline-block; margin-right: var(--space-2); vertical-align: baseline; }

/* referendum / question verdict badge — .inv (quorum-invalid) is in §4 */
.q-badge.pass { border-color: var(--accent-border); color: var(--accent); background: var(--accent-tint); }
.q-badge.rej  { border-color: var(--live); color: var(--live); background: var(--live-tint); }

/* map question/round tabs and the region detail panel */
.map-tabs > button, .tab-bar > button, .tab-bar > a {
  padding: var(--space-3) var(--space-4); border: 0; background: none;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted);
  border-bottom: var(--bw-rule) solid transparent; cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.map-tabs { border-bottom: var(--bw-hair) solid var(--border); }
.map-tabs > button:hover { color: var(--text); }
.map-tabs [aria-selected="true"] { color: var(--text); font-weight: var(--fw-semibold); border-bottom-color: var(--accent); }
.map-detail { display: none; padding: var(--space-4); border: var(--bw-hair) solid var(--border); background: var(--surface-1); }
.map-detail.on { display: block; }
.map-detail strong { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }

/* footer links stay muted against the inset ground (the box itself is §3) */
.footer-inner a { color: var(--text-muted); }
.footer-inner a:hover { color: var(--text); }

/* ============================================================
   RESPONSIVE, CONTAINER-QUERY MIRROR
   The media queries above are the ship path. Templates that wrap the
   page in .page-shell additionally get the same breakpoints measured
   against the shell's own width, which makes the layout correct inside
   any embed narrower than the viewport (design canvas, preview iframe,
   AMP-style wrapper). Declarations are identical to the @media block —
   change both or neither.
   ============================================================ */
.page-shell { container-type: inline-size; container-name: shell; }

@container shell (max-width: 900px) {
  .results-stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-top: var(--bw-hair) solid var(--border); }
  .about-hub, .about-election { grid-template-columns: 1fr; gap: var(--space-5); }
}

@container shell (max-width: 780px) {
  .status-band { grid-template-columns: 1fr; }
  .status-col { border-right: 0; border-bottom: var(--bw-hair) solid var(--border); }
  .status-col:last-child { border-bottom: 0; }

  .filters { padding: 0; border: 0; }
  .filters-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3); background: var(--surface-2); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
  .filters[data-collapsed="true"] .filter-group { display: none; }
  .filter-group { flex-direction: column; gap: var(--space-2); }
  .filter-group > .eyebrow { width: auto; padding: 0; }
  .filter-set { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: var(--space-1); }
  .chip { min-height: 40px; }

  .em-bars-head { display: none; }
  .em-bar-row { grid-template-columns: 1fr auto auto; row-gap: var(--space-1); }
  .em-bar-track { grid-column: 1 / -1; height: 18px; order: 3; }
  .em-bar-votes { display: none; }

  .hub-row { grid-template-columns: 1fr auto; row-gap: var(--space-1); }
  .hr-end { grid-column: 1 / -1; }

  #map { height: 260px; }
  .map-wrap .map-canvas { height: 240px; }

  .countries-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .ci-grid { grid-template-columns: 1fr 1fr; }
  .el-nav { grid-template-columns: 1fr; }
  .el-nav-link + .el-nav-link { text-align: left; }
  .hub-feature { grid-template-columns: 1fr; }
  .seat-bar { height: 28px; }
  .footer-inner > .wrap { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .ad-slot-inline, .ad-slot-footer { min-height: 100px; }
  .ad-slot-mid { min-height: 280px; }
}

/* ---- print (PDF of a results page) ------------------------------- */
@media print {
  .site-header, .network-bar, .ad-slot, .filters, .theme-btn, .lang-switch { display: none !important; }
  body { background: #fff; color: #000; }
  .em-bar-fill, .seat-seg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}