/* Westminster forecast.
   Two layers, as in iOS: a solid content layer (grouped sections on a plain page) and a floating
   Liquid Glass layer reserved for navigation and controls (nav, dock, sheets, menus).
   Party colours are the only saturated colour; interface accents use the system blue. */
:root {
  --page: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f7f7fa;
  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.85);
  --label-3: rgba(60, 60, 67, 0.6);
  --label-4: rgba(60, 60, 67, 0.32);
  --sep: rgba(60, 60, 67, 0.16);
  --sep-soft: rgba(60, 60, 67, 0.09);
  --fill: rgba(118, 118, 128, 0.12);
  --fill-2: rgba(118, 118, 128, 0.2);
  --tint: #007aff;
  --on-tint: #ffffff;
  --glass: rgba(250, 250, 252, 0.66);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 0.5px rgba(255, 255, 255, 0.4);
  --scrim: rgba(0, 0, 0, 0.2);
  --track-gap: #ffffff;

  --p-Lab: #e4003b; --p-Con: #0087dc; --p-Ref: #12b6cf; --p-LD: #f5a300; --p-Grn: #00a85a;
  --p-SNP: #e8c500; --p-PC: #00796b; --p-RB: #22348c; --p-Oth: #8e8e93; --p-Spk: #48484a;
  --p-SF: #326760; --p-DUP: #d46a4c; --p-APNI: #e6b400; --p-UUP: #48a5ee; --p-SDLP: #2aa82c; --p-TUV: #0c3a6a;

  --f: "Inter", -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --r-group: 20px;
  --w: 1040px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --label: #ffffff; --label-2: rgba(235, 235, 245, 0.8); --label-3: rgba(235, 235, 245, 0.55); --label-4: rgba(235, 235, 245, 0.28);
    --sep: rgba(84, 84, 88, 0.65); --sep-soft: rgba(84, 84, 88, 0.38); --fill: rgba(118, 118, 128, 0.24); --fill-2: rgba(118, 118, 128, 0.36);
    --tint: #0a84ff; --glass: rgba(44, 44, 46, 0.6); --glass-edge: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.12); --scrim: rgba(0, 0, 0, 0.5); --track-gap: #1c1c1e;
    --p-PC: #2bb39b; --p-RB: #7b93ff; --p-Spk: #c7c7cc; --p-TUV: #6a8fd3; --p-SF: #4fae9d; --p-Oth: #98989d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --label: #ffffff; --label-2: rgba(235, 235, 245, 0.8); --label-3: rgba(235, 235, 245, 0.55); --label-4: rgba(235, 235, 245, 0.28);
  --sep: rgba(84, 84, 88, 0.65); --sep-soft: rgba(84, 84, 88, 0.38); --fill: rgba(118, 118, 128, 0.24); --fill-2: rgba(118, 118, 128, 0.36);
  --tint: #0a84ff; --glass: rgba(44, 44, 46, 0.6); --glass-edge: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.12); --scrim: rgba(0, 0, 0, 0.5); --track-gap: #1c1c1e;
  --p-PC: #2bb39b; --p-RB: #7b93ff; --p-Spk: #c7c7cc; --p-TUV: #6a8fd3; --p-SF: #4fae9d; --p-Oth: #98989d;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--label); font: 400 15px/1.47 var(--f); letter-spacing: -0.011em; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--tint); text-decoration: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 50%, transparent); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- glass (floating layer only) ---------- */
.glass { background: var(--glass); border: 0.5px solid var(--glass-edge); box-shadow: var(--glass-shadow), var(--glass-hi); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--surface); } }
/* scroll-edge effect: content fades out beneath the floating bars */
.backdrop { position: fixed; inset: -48px; z-index: -1; overflow: hidden; pointer-events: none; filter: blur(var(--bd-blur, 0px)); will-change: filter;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, 0.55) 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0, 0, 0, 0.55) 100%); }
.backdrop svg { display: block; width: 100%; height: 100%; }
.backdrop path { transition: fill 1.2s ease; }
:root { --bd-op: 0.11; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bd-op: 0.2; } }
:root[data-theme="dark"] { --bd-op: 0.2; }
.edge { position: fixed; left: 0; right: 0; z-index: 30; pointer-events: none; }
.edge.top { top: 0; height: 96px; background: linear-gradient(var(--page) 30%, color-mix(in srgb, var(--page) 0%, transparent)); }
.edge.bottom { bottom: 0; height: 110px; background: linear-gradient(color-mix(in srgb, var(--page) 0%, transparent), var(--page) 70%); }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 40; top: max(12px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; max-width: calc(100vw - 20px); }
.nav .brand { font-weight: 650; font-size: 14px; letter-spacing: -0.02em; padding: 0 12px 0 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.nav .brand .logo { width: 22px; height: 22px; flex: none; }
.nav a.tab { color: var(--label); font-size: 14px; font-weight: 500; padding: 7px 15px; border-radius: 999px; white-space: nowrap; transition: background 0.2s; }
.nav a.tab:hover { background: var(--fill); }
.nav a.tab[aria-current="page"] { background: var(--label); color: var(--surface); }
.nav .find { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--label); }
.nav .find:hover { background: var(--fill); }
.nav .find svg { width: 16px; height: 16px; }
@media (max-width: 620px) { .nav .brand, .nav .nav-sep { display: none; } .nav a.tab { padding: 7px 11px; font-size: 13.5px; } }

/* ---------- page ---------- */
.page { max-width: var(--w); margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left, 0px)) 170px max(20px, env(safe-area-inset-right, 0px)); }
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 88px; }
.view > * { min-width: 0; }
@media (max-width: 700px) { .view { gap: 64px; } }

/* ---------- hero ---------- */
.hero { padding-top: 118px; }
.hero .when { font-size: 15px; color: var(--label-3); margin: 0 0 12px; font-weight: 500; }
.hero h1 { font-size: clamp(38px, 5.6vw, 62px); line-height: 1.05; font-weight: 700; letter-spacing: -0.04em; margin: 0; text-wrap: balance; max-width: 17ch; }
.hero .lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.45; color: var(--label-2); max-width: 50ch; margin: 18px 0 0; letter-spacing: -0.016em; }
.tally { margin-top: 48px; }
.nums { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 4px; margin-bottom: 18px; }
.nums .n { padding: 6px 2px; border-radius: 12px; transition: opacity 0.25s; cursor: default; min-width: 0; }
.nums .n .nm { font-size: 13.5px; color: var(--label-3); font-weight: 500; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nums .n .v { display: block; font-size: clamp(30px, 4.2vw, 48px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.08; font-variant-numeric: tabular-nums; }
.nums .n .r { display: block; font-size: 13px; color: var(--label-3); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .nums { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } }
.tally.focus .n:not(.on) { opacity: 0.32; }
.capsule { position: relative; padding-top: 26px; }
.capsule .track { display: flex; height: 40px; border-radius: 12px; overflow: hidden; background: var(--fill); }
.capsule .track > div { height: 100%; flex: none; transition: width 0.7s var(--ease), opacity 0.25s; box-shadow: inset -2px 0 0 var(--track-gap); }
.tally.focus .track > div:not(.on) { opacity: 0.22; }
.capsule .line { position: absolute; top: 18px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--label); border-radius: 1px; transition: left 0.5s var(--ease); }
.capsule .lab { position: absolute; top: 0; font-size: 13px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); transition: left 0.5s var(--ease); }
.capsule .ends { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 13px; color: var(--label-3); }
@media (prefers-reduced-motion: reduce) { .capsule .track > div, .capsule .line, .capsule .lab { transition: none; } }

.answers { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border-radius: var(--r-group); overflow: hidden; }
.answers > div { padding: 18px 20px; border-left: 0.5px solid var(--sep); min-width: 0; }
.answers > div:first-child { border-left: 0; }
.answers .k { font-size: 14px; color: var(--label-2); }
.answers .v { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.answers .s { font-size: 13px; color: var(--label-3); }
@media (max-width: 700px) { .answers { grid-template-columns: minmax(0, 1fr); } .answers > div { border-left: 0; border-top: 0.5px solid var(--sep); } .answers > div:first-child { border-top: 0; } }

.finder { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.finder .pick-col { position: relative; min-width: 0; }
@media (max-width: 860px) { .finder { grid-template-columns: minmax(0, 1fr); } }
.whybox { background: var(--surface); border-radius: var(--r-group); padding: 18px 20px 6px; min-width: 0; }
.whybox h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 2px; }
.whybox .sub { font-size: 14px; color: var(--label-3); margin: 0 0 8px; }
.reasons { display: grid; }
.reason { padding: 11px 0; border-top: 0.5px solid var(--sep-soft); }
.reason:first-child { border-top: 0; }
.reason b { display: block; font-size: 14px; font-weight: 650; margin-bottom: 2px; }
.reason p { margin: 0; font-size: 14.5px; color: var(--label-2); line-height: 1.45; }
.sheet .reasons { background: var(--surface); border-radius: 16px; padding: 2px 16px; margin-top: 8px; }
.sheet h4 { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; margin: 22px 4px 0; }
.finder h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.025em; margin: 0 0 10px; }
.search { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 0 14px; height: 46px; background: var(--surface); }
.search svg { width: 17px; height: 17px; flex: none; color: var(--label-3); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; height: 100%; outline: none; }
.search input::placeholder { color: var(--label-4); }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); border-radius: 16px; padding: 6px; z-index: 25; max-height: 340px; overflow: auto; }
.suggest button { display: flex; width: 100%; justify-content: space-between; gap: 12px; align-items: center; border: 0; background: transparent; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left; font-size: 15px; }
.suggest button:hover, .suggest button.act { background: var(--fill); }
.suggest button > span:last-child { font-size: 13px; color: var(--label-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.mine { margin-top: 10px; background: var(--surface); border-radius: var(--r-group); padding: 16px 18px 10px; cursor: pointer; border: 0; width: 100%; text-align: left; display: block; }
.mine:hover { background: var(--surface-2); }
.mine .t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mine .t b { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.mine .t span { font-size: 14px; color: var(--tint); white-space: nowrap; }

/* ---------- chapters ---------- */
.chapter > h2 { font-size: clamp(28px, 3.2vw, 36px); line-height: 1.12; font-weight: 700; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.chapter > .lede { font-size: 17px; color: var(--label-2); margin: 10px 0 24px; max-width: 62ch; }
.group { background: var(--surface); border-radius: var(--r-group); padding: 22px 24px; min-width: 0; }
@media (max-width: 700px) { .group { padding: 18px; } }
.group h3 { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; margin: 0; }
.group .sub { font-size: 14px; color: var(--label-3); margin: 2px 0 16px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 860px) { .two { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 14px; }

/* menu button (inline dropdown) */
.menubtn { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--label-4); display: inline-flex; align-items: baseline; gap: 4px; }
.menubtn:hover { text-decoration-color: var(--label); }
.menubtn svg { width: 10px; height: 10px; align-self: center; color: var(--label-3); }
.menu { position: fixed; z-index: 70; min-width: 220px; max-height: 60vh; overflow: auto; border-radius: 14px; padding: 6px; transform-origin: top left; animation: pop 0.22s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .menu { animation: none; } }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: transparent; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 15px; text-align: left; }
.menu button:hover, .menu button:focus-visible { background: var(--fill); outline: none; }
.menu button .ck { margin-left: auto; color: var(--tint); visibility: hidden; }
.menu button[aria-checked="true"] .ck { visibility: visible; }

/* table of parties */
.scroll-x { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.ptab { min-width: 740px; font-variant-numeric: tabular-nums; }
.ptab th { font-size: 13px; color: var(--label-3); font-weight: 500; text-align: right; padding: 0 10px 10px; border-bottom: 0.5px solid var(--sep); white-space: nowrap; }
.ptab td { padding: 12px 10px; border-bottom: 0.5px solid var(--sep-soft); text-align: right; white-space: nowrap; font-size: 15px; }
.ptab th:first-child, .ptab td:first-child { text-align: left; padding-left: 0; }
.ptab tr:last-child td { border-bottom: 0; }
.ptab .pn { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
.ptab .big { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.ptab .m { color: var(--label-3); }
.ptab .z { color: var(--label-4); }
.ptab .bc { width: 30%; min-width: 190px; }
.rng { position: relative; height: 12px; }
.rng .base { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--fill); border-radius: 1px; }
.rng .o { position: absolute; top: 4px; height: 4px; border-radius: 2px; background: var(--c); opacity: 0.35; }
.rng .i { position: absolute; top: 1px; height: 10px; border-radius: 5px; background: var(--c); }
.rng .mk { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 1px dashed var(--label-4); }
.foot { font-size: 13.5px; color: var(--label-3); margin: 14px 0 0; }

.ridges svg, .scot svg { width: 100%; height: auto; display: block; overflow: visible; }

/* probability rows */
.bars { display: grid; gap: 14px; }
.brow { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 7px 14px; align-items: center; }
.brow .l { font-size: 15px; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.brow .l .dots { display: inline-flex; gap: 3px; }
.brow .v { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; font-size: 15px; }
.brow .t { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.brow .t i { display: block; height: 100%; border-radius: 3px; transition: width 0.6s var(--ease); }
.split { height: 0.5px; background: var(--sep); margin: 4px 0; }

/* list rows (iOS grouped list) */
.list { display: grid; margin: 0 -24px -10px; }
@media (max-width: 700px) { .list { margin: 0 -18px -6px; } }
.li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 24px; border: 0; border-top: 0.5px solid var(--sep-soft); background: transparent; text-align: left; width: 100%; font-size: 15px; cursor: pointer; }
@media (max-width: 700px) { .li { padding: 11px 18px; } }
.li:first-child { border-top: 0; }
.li:hover { background: var(--surface-2); }
.li .n { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.li .n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .m { font-size: 14px; color: var(--label-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.li .m b { color: var(--label); font-weight: 600; }
.li.static { cursor: default; }
.li.static:hover { background: transparent; }

/* scotland */
.scot .ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; margin-top: 18px; }
.scot .ctl label { font-size: 15px; font-weight: 500; }
.scot .ctl output { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.scot .ctl input { grid-column: 1 / -1; }
.scot .facts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 6px; }
.scot .facts3 div { padding: 4px 0; }
.scot .facts3 b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.scot .facts3 span { font-size: 13.5px; color: var(--label-3); }
.wait { font-size: 14px; color: var(--label-3); padding: 40px 0; text-align: center; }

/* ---------- map ---------- */
.mapctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--fill); padding: 2px; border-radius: 9px; gap: 0; position: relative; }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 7px; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04); }
.seg button svg { width: 9px; height: 9px; color: var(--label-3); }
.mapnote { font-size: 14px; color: var(--label-2); margin: 12px 0 0; max-width: 70ch; }
.mapwrap { margin-top: 14px; display: flex; justify-content: center; }
.hexmap { width: 100%; height: auto; max-height: calc(100vh - 330px); min-height: 420px; display: block; }
.hexmap .hx { stroke: var(--surface); stroke-width: 0.7; cursor: pointer; transition: fill 0.35s ease; }
.hexmap .hx:hover { stroke: var(--label); stroke-width: 1.3; }
.hexmap .borders { fill: none; stroke: var(--label); stroke-width: 0.9; stroke-linecap: round; opacity: 0.3; pointer-events: none; }
.hexmap .selring { fill: none; stroke: var(--label); stroke-width: 2.4; pointer-events: none; }
.hexmap .rlab { font: 600 8.5px var(--f); fill: var(--label-2); pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.zoomnote { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--label-2); }
.dplot { display: grid; margin: 0 -24px -10px; }
@media (max-width: 700px) { .dplot { margin: 0 -18px -6px; } }
.drow { display: grid; grid-template-columns: 132px minmax(0, 1fr) 58px; gap: 12px; align-items: center; padding: 9px 24px; border: 0; border-top: 0.5px solid var(--sep-soft); background: transparent; width: 100%; text-align: left; font-size: 14.5px; cursor: pointer; }
.drow:first-child { border-top: 0; }
.drow:hover { background: var(--surface-2); }
.drow.axis { cursor: default; font-size: 12px; color: var(--label-3); padding-top: 4px; padding-bottom: 8px; }
.drow.axis:hover { background: transparent; }
.drow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow .tr { position: relative; height: 18px; }
.drow .tr::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 1px; background: var(--fill); }
.drow .tr i { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--p-SNP); box-shadow: 0 0 0 2px var(--surface); }
.drow .tr u { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1.5px dashed var(--label-3); }
.drow .tr b { position: absolute; top: -1px; font-size: 11.5px; font-weight: 500; color: var(--label-3); transform: translateX(-50%); }
.drow .v { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.method-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
@media (max-width: 960px) { .method-grid { grid-template-columns: minmax(0, 1fr); } }
.method-grid aside { position: sticky; top: 76px; display: grid; gap: 14px; }
@media (max-width: 960px) { .method-grid aside { position: static; } }
.heat { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.heat th { font-size: 12px; font-weight: 500; color: var(--label-3); padding: 0 4px 8px; text-align: center; white-space: nowrap; }
.heat th:first-child { text-align: left; padding-left: 0; }
.heat td { text-align: center; padding: 7px 4px; border-radius: 6px; font-weight: 600; }
.heat td:first-child { text-align: left; padding-left: 0; font-weight: 500; white-space: nowrap; }
.kv { display: grid; }
.kv div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 0.5px solid var(--sep-soft); font-size: 14.5px; }
.kv div:first-child { border-top: 0; }
.kv span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--label-2); margin-top: 14px; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend .ramp { display: inline-flex; gap: 2px; }
.legend .ramp i { width: 18px; height: 10px; border-radius: 2px; }
.tip { position: fixed; z-index: 70; pointer-events: none; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; max-width: 270px; }
.tip b { font-weight: 650; }

/* seat table */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.field { height: 36px; border-radius: 10px; border: 0; background: var(--fill); padding: 0 14px; font-size: 15px; min-width: 0; outline: none; }
.field:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 35%, transparent); }
.toolbar input.field { flex: 1 1 240px; }
.pick { height: 36px; border-radius: 10px; border: 0; background: var(--fill); padding: 0 32px 0 12px; font-size: 14.5px; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--label-3) 50%), linear-gradient(135deg, var(--label-3) 50%, transparent 50%); background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px; background-size: 5px 5px; background-repeat: no-repeat; }
.tbox { max-height: 680px; overflow: auto; border-top: 0.5px solid var(--sep); margin: 0 -24px -22px; }
.stab { min-width: 880px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.stab th { position: sticky; top: 0; z-index: 1; background: var(--surface); font-size: 13px; font-weight: 500; color: var(--label-3); text-align: right; padding: 10px 10px; box-shadow: inset 0 -0.5px 0 var(--sep); cursor: pointer; white-space: nowrap; user-select: none; }
.stab th:first-child, .stab td:first-child { padding-left: 24px; }
.stab th:last-child, .stab td:last-child { padding-right: 24px; }
.stab th:hover, .stab th[aria-sort] { color: var(--label); }
.stab th.l, .stab td.l { text-align: left; }
.stab td { padding: 10px 10px; border-bottom: 0.5px solid var(--sep-soft); text-align: right; white-space: nowrap; }
.stab td.nm { white-space: normal; font-weight: 500; min-width: 190px; }
.stab tbody tr { cursor: pointer; }
.stab tbody tr:hover td { background: var(--surface-2); }
.stab .pc { display: inline-flex; align-items: center; gap: 7px; }
.stab .gain { font-size: 12.5px; color: var(--label-3); margin-left: 6px; }
.stab .sh { color: var(--label-3); }
.stab .sh.lead { color: var(--label); font-weight: 650; }

/* polls */
.pollchart svg { width: 100%; height: auto; display: block; }
.ptbl { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ptbl th { position: sticky; top: 0; z-index: 1; background: var(--surface); font-size: 13px; font-weight: 500; color: var(--label-3); text-align: right; padding: 10px 10px; box-shadow: inset 0 -0.5px 0 var(--sep); white-space: nowrap; }
.ptbl th:first-child, .ptbl td:first-child { padding-left: 24px; }
.ptbl th:last-child, .ptbl td:last-child { padding-right: 24px; }
.ptbl th.l, .ptbl td.l { text-align: left; }
.ptbl td { padding: 10px 10px; border-bottom: 0.5px solid var(--sep-soft); text-align: right; white-space: nowrap; }
.ptbl td.hi { font-weight: 700; }
.ptbl td.na { color: var(--label-4); }
.ptbl .cl { color: var(--label-3); }
.ptbl tbody tr { cursor: pointer; }
.ptbl tbody tr:hover td { background: var(--surface-2); }
.ptbl tbody tr[aria-selected="true"] td { background: color-mix(in srgb, var(--tint) 12%, transparent); }
.ptbl tr.avg td { font-weight: 650; }
.flush { margin: 0 -24px -22px; }
@media (max-width: 700px) { .flush, .tbox { margin: 0 -18px -18px; } }

/* method */
.article { max-width: 66ch; }
.article h3 { font-size: 20px; font-weight: 650; letter-spacing: -0.025em; margin: 36px 0 6px; }
.article h3:first-child { margin-top: 0; }
.article p, .article li { font-size: 16.5px; line-height: 1.6; color: var(--label-2); margin: 0 0 14px; }
.article ul { padding-left: 20px; margin: 0; }
.chk { font-size: 14px; font-variant-numeric: tabular-nums; }
.chk th, .chk td { padding: 9px 8px; text-align: right; border-bottom: 0.5px solid var(--sep-soft); white-space: nowrap; }
.chk th { font-size: 13px; font-weight: 500; color: var(--label-3); border-bottom: 0.5px solid var(--sep); }
.chk th:first-child, .chk td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.chk td.l { text-align: left; }
.chk .ok { color: #248a3d; } .chk .meh { color: #b25000; }
.chk .sub { display: block; color: var(--label-3); font-size: 12.5px; }

/* ---------- dock ---------- */
.dock { position: fixed; z-index: 45; left: 50%; bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 6px)); transform: translateX(-50%); max-width: calc(100vw - 20px); border-radius: 26px; overflow: hidden; transition: width 0.55s var(--ease), border-radius 0.45s var(--ease); }
.dock.ctx-on { border-radius: 24px; }
.dock .ctx { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.dock.ctx-on .ctx { grid-template-rows: 1fr; }
.dock .ctx > div { overflow: hidden; min-height: 0; }
.dock .ctx .in { padding: 16px 18px 4px; width: min(560px, calc(100vw - 20px)); opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.35s ease, transform 0.5s var(--ease); text-align: center; }
.dock.ctx-on .bar { margin: 0 auto; }
.dock .ctx .s { justify-content: center; }
.dock .ctx .acts { justify-content: center; }
.dock.ctx-on .ctx .in { opacity: 1; transform: none; }
.dock .ctx .t { font-size: 13.5px; color: var(--label-2); }
.dock .ctx .t b { color: var(--label); font-weight: 650; }
.dock .ctx .s { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: 15px; font-variant-numeric: tabular-nums; }
.dock .ctx .s + .s { margin-top: 2px; }
.dock .ctx .s span { display: inline-flex; align-items: center; gap: 7px; }
.dock .ctx .s b { font-weight: 700; }
.dock .ctx .w { font-size: 12.5px; color: #b25000; margin-top: 6px; }
.dock .bar { display: flex; align-items: center; gap: 6px; padding: 6px; width: max-content; }
.srcpill { position: relative; border: 0; cursor: pointer; color: var(--label); display: inline-flex; align-items: center; gap: 8px; height: 40px; border-radius: 20px; background: var(--fill); padding: 0 16px; font-size: 15px; font-weight: 500; white-space: nowrap; max-width: 300px; }
.srcpill span { overflow: hidden; text-overflow: ellipsis; }
.srcpill svg { width: 10px; height: 10px; color: var(--label-3); flex: none; }
.srcpill select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; font-size: 16px; }
.srcpill:has(select:focus-visible) { outline: 3px solid color-mix(in srgb, var(--tint) 50%, transparent); outline-offset: 2px; }
.dock .src { height: 40px; max-width: 280px; border-radius: 20px; border: 0; background: var(--fill); padding: 0 34px 0 16px; font-size: 15px; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--label-3) 50%), linear-gradient(135deg, var(--label-3) 50%, transparent 50%); background-position: calc(100% - 19px) 18px, calc(100% - 14px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }
.btn { height: 40px; padding: 0 18px; border-radius: 20px; border: 0; background: var(--fill); font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; color: var(--label); text-decoration: none; }
.btn:hover { background: var(--fill-2); }
.btn.primary { background: var(--tint); color: var(--on-tint); }
.btn.primary:hover { filter: brightness(1.08); background: var(--tint); }
.btn.small { height: 34px; padding: 0 14px; font-size: 14px; border-radius: 17px; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--fill-2); border-top-color: var(--label-2); animation: spin 0.7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } .dock, .dock .ctx, .dock .ctx .in { transition: none; } }
.dock .acts { display: flex; gap: 6px; padding: 10px 0 2px; flex-wrap: wrap; }
@media (max-width: 520px) { .dock .src { max-width: 180px; } }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); opacity: 0; transition: opacity 0.3s ease; }
.scrim.open { opacity: 1; }
.sheet { position: fixed; z-index: 51; top: 10px; right: 10px; bottom: 10px; width: min(430px, calc(100vw - 20px)); border-radius: 26px; display: flex; flex-direction: column; transform: translateX(calc(100% + 20px)); transition: transform 0.5s var(--ease); background: color-mix(in srgb, var(--surface) 82%, transparent); }
.sheet.open { transform: none; }
@media (max-width: 640px) { .sheet { top: auto; left: 6px; right: 6px; bottom: 6px; width: auto; max-height: 88vh; transform: translateY(calc(100% + 20px)); } }
@media (prefers-reduced-motion: reduce) { .sheet, .scrim { transition: none; } }
.sh-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 22px 22px 14px; border-bottom: 0.5px solid transparent; transition: border-color 0.2s; }
.sheet.scrolled .sh-h { border-bottom-color: var(--sep); }
.sh-h h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; }
.sh-h .k { font-size: 14px; color: var(--label-3); margin-bottom: 2px; }
.close { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--fill); cursor: pointer; display: grid; place-items: center; flex: none; color: var(--label-2); }
.close:hover { background: var(--fill-2); }
.close svg { width: 11px; height: 11px; }
.sh-b { overflow-y: auto; padding: 4px 22px 26px; flex: 1; overscroll-behavior: contain; }
.sh-f { padding: 14px 22px 20px; display: flex; gap: 8px; border-top: 0.5px solid var(--sep); }
.sh-group { margin-top: 26px; }
.sh-group:first-child { margin-top: 10px; }
.sh-group > .gl { font-size: 14px; color: var(--label-3); margin: 0 4px 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sliders { background: var(--surface); border-radius: 14px; padding: 2px 14px; }
.srow { display: grid; grid-template-columns: 112px minmax(0, 1fr) 58px; gap: 14px; align-items: center; min-height: 46px; }
.srow .pn small { display: block; font-size: 12px; color: var(--label-3); font-weight: 400; line-height: 1.2; }
.srow.lead .pn { white-space: normal; line-height: 1.25; }
.srow + .srow { border-top: 0.5px solid var(--sep-soft); }
.srow .pn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; min-width: 0; }
.srow input[type="number"] { width: 54px; height: 30px; border: 0; border-radius: 8px; background: transparent; text-align: right; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; padding: 0 4px; -moz-appearance: textfield; }
.srow input[type="number"]:focus { background: var(--fill); outline: none; }
.srow input[type="number"]::-webkit-inner-spin-button, .srow input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; --pct: 50%; --c: var(--tint); }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--c) var(--pct), var(--fill-2) var(--pct)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--fill-2); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--c); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; margin-top: -11px; box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12); border: 0; }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12); }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; margin-top: 10px; background: var(--surface); border-radius: 14px; font-size: 15px; }
.total b { font-weight: 700; font-variant-numeric: tabular-nums; }
.total.off b { color: #b25000; }
.total small { display: block; font-size: 13px; color: var(--label-3); }
.togglerow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 10px; background: var(--surface); border-radius: 14px; font-size: 15px; font-weight: 500; cursor: pointer; }
.select { width: 100%; height: 46px; border-radius: 14px; border: 0; background: var(--surface); padding: 0 36px 0 14px; font-size: 16px; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--label-3) 50%), linear-gradient(135deg, var(--label-3) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.note { font-size: 14px; color: var(--label-3); margin: 10px 4px 0; line-height: 1.45; }
.note.warn { color: #b25000; }
.more { width: 100%; margin-top: 24px; border: 0; background: var(--surface); display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-radius: 14px; font-size: 16px; font-weight: 500; cursor: pointer; }
.more svg { width: 12px; height: 12px; transition: transform 0.3s var(--ease); color: var(--label-3); }
.more[aria-expanded="true"] svg { transform: rotate(180deg); }
.seg.full { display: flex; width: 100%; }
.seg.full button { flex: 1; padding: 8px 4px; font-size: 13.5px; min-width: 0; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--label-2); cursor: pointer; }
.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--fill-2); transition: background 0.2s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.3s var(--ease); }
.switch input:checked + span { background: #34c759; }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--tint) 50%, transparent); outline-offset: 2px; }

/* seat detail */
.call { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 0; }
.call span { color: var(--label-3); font-weight: 400; }
.vbox { background: var(--surface); border-radius: 16px; padding: 4px 16px; margin-top: 16px; }
.vrow { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr) 46px 48px; gap: 2px 10px; align-items: center; padding: 10px 0; border-top: 0.5px solid var(--sep-soft); font-size: 15px; }
.vrow:first-child { border-top: 0; }
.vrow.h { font-size: 13px; color: var(--label-3); padding: 10px 0 6px; }
.vrow .pn { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.vrow .n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.vrow .w { text-align: right; color: var(--label-3); font-variant-numeric: tabular-nums; }
.vrow .rg { grid-column: 2 / -1; font-size: 12.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.ci { position: relative; height: 14px; }
.ci .bg { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: var(--fill); }
.ci .w { position: absolute; top: 5px; height: 4px; border-radius: 2px; background: var(--c); opacity: 0.3; }
.ci .b { position: absolute; top: 1px; height: 12px; border-radius: 6px; background: var(--c); }
.ci .o { position: absolute; top: -2px; height: 18px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--label); opacity: 0.45; }
.why { font-size: 14.5px; color: var(--label-2); background: var(--surface); border-radius: 14px; padding: 12px 14px; margin: 14px 0 0; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border-radius: 14px; margin-top: 14px; }
.facts div { padding: 10px 12px; border-left: 0.5px solid var(--sep-soft); min-width: 0; }
.facts div:first-child { border-left: 0; }
.facts b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.facts span { font-size: 12px; color: var(--label-3); line-height: 1.3; display: block; }
.meta { font-size: 14px; color: var(--label-3); margin: 14px 4px 0; }
footer { max-width: var(--w); margin: 0 auto; padding: 0 20px 140px; font-size: 13px; color: var(--label-3); }

/* ---------- on-this-page list (wide screens only) ---------- */
.toc { display: none; }
@media (min-width: 1400px) {
  .toc { display: grid; gap: 2px; position: fixed; z-index: 20; top: 50%; transform: translateY(-50%); left: max(20px, calc((100vw - var(--w)) / 2 - 196px)); width: 168px; }
  .toc button { position: relative; border: 0; background: transparent; text-align: left; padding: 5px 0 5px 16px; font-size: 13px; color: var(--label-3); cursor: pointer; line-height: 1.3; transition: color 0.2s; }
  .toc button::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1.5px; border-radius: 1px; background: var(--label-4); transition: width 0.25s var(--ease), background 0.2s; }
  .toc button:hover { color: var(--label); }
  .toc button.on { color: var(--label); font-weight: 600; }
  .toc button.on::before { width: 11px; background: var(--label); }
}
/* ---------- constituency row ---------- */
.mineblock { margin-top: 36px; }
.mineblock > h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.025em; margin: 0 0 10px; }
.finder { margin-top: 0; }
.whybox .more2 { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: calc(100% + 40px); margin: 0 -20px; padding: 13px 20px; border: 0; border-top: 0.5px solid var(--sep); background: transparent; font-size: 15px; color: var(--tint); cursor: pointer; text-align: left; border-radius: 0 0 var(--r-group) var(--r-group); }
.whybox .more2:hover { background: var(--surface-2); }
.whybox { padding-bottom: 0; }

/* ---------- seat history chart ---------- */
.histchart svg { width: 100%; height: auto; display: block; }

/* ---------- compare ---------- */
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .cmp-grid { grid-template-columns: minmax(0, 1fr); } }
.scn { display: grid; gap: 12px; }
.scn .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scn .hd h3 { display: flex; align-items: center; gap: 10px; }
.scn .tag { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 14px; font-weight: 700; background: var(--label); color: var(--surface); }
.scn .tag.b { background: var(--tint); color: var(--on-tint); }
.scn .sliders { background: var(--surface-2); }
.scn .select { background: var(--surface-2); }
.scn .gl { font-size: 14px; color: var(--label-3); margin: 4px 4px 0; }
.scn .sum { font-size: 14px; color: var(--label-2); }
.scn .sum b { font-weight: 650; }
.cmp-res { font-variant-numeric: tabular-nums; }
.cmp-res th { font-size: 13px; color: var(--label-3); font-weight: 500; text-align: right; padding: 0 10px 10px; border-bottom: 0.5px solid var(--sep); white-space: nowrap; }
.cmp-res td { padding: 11px 10px; border-bottom: 0.5px solid var(--sep-soft); text-align: right; white-space: nowrap; font-size: 15px; }
.cmp-res th:first-child, .cmp-res td:first-child { text-align: left; padding-left: 0; }
.cmp-res tr:last-child td { border-bottom: 0; }
.cmp-res .big { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.cmp-res .dd { width: 34%; min-width: 180px; }
.div { position: relative; height: 14px; }
.div::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--sep); }
.div i { position: absolute; top: 2px; height: 10px; border-radius: 5px; background: var(--c); }
.delta { font-weight: 650; }
.delta.up { color: #248a3d; } .delta.down { color: #d70015; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .delta.up { color: #30d158; } :root:not([data-theme="light"]) .delta.down { color: #ff453a; } }
.flips .li { grid-template-columns: minmax(0, 1fr) auto; }
.flips .m span { display: inline-flex; align-items: center; gap: 6px; }
.cmpmap svg { width: 100%; height: auto; max-height: 560px; display: block; }
.cmpmap .hx { stroke: var(--surface); stroke-width: 0.7; }

/* ---------- hero, decluttered ---------- */
.hero { padding-top: 132px; }
.hero .lede { margin-top: 16px; }
.tally { margin-top: 60px; }
.nums { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 20px 0 0; }
.nums .n { padding: 4px 0; }
.nums .n .nm { font-size: 13.5px; }
.nums .n .v { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.04em; }
.nums .n .r { display: none; }
.answers { margin-top: 52px; display: flex; flex-wrap: wrap; gap: 14px 0; background: transparent; border-radius: 0; overflow: visible; }
.answers > div { padding: 0 32px; border-left: 0.5px solid var(--sep); }
.answers > div:first-child { padding-left: 0; border-left: 0; }
.answers .k { font-size: 14px; color: var(--label-3); }
.answers .v { font-size: 28px; }
.answers .s { display: none; }
@media (max-width: 700px) { .answers > div { padding: 0 18px; border-top: 0; } .answers > div:first-child { padding-left: 0; } }
.caption { margin: 18px 0 0; font-size: 13.5px; color: var(--label-3); max-width: 60ch; }
.mineblock { margin-top: 0; }
.mineblock > .lede { margin-bottom: 20px; }

/* ---------- first load: lower sections shimmer until the live simulation lands ---------- */
@keyframes shimmer { to { background-position: -200% 0; } }
body.loading .group .scroll-x, body.loading .ridges svg, body.loading .bars, body.loading #flows, body.loading #closest, body.loading #bestList, body.loading #tipList, body.loading .facts3 {
  min-height: 180px; border-radius: 12px; color: transparent;
  background: linear-gradient(90deg, var(--fill) 0%, var(--fill-2) 50%, var(--fill) 100%) 0 0 / 200% 100%; animation: shimmer 1.3s linear infinite;
}
body.loading .facts3 { min-height: 60px; }
@media (prefers-reduced-motion: reduce) { body.loading .group .scroll-x, body.loading .ridges svg, body.loading .bars, body.loading #flows, body.loading #closest, body.loading #bestList, body.loading #tipList, body.loading .facts3 { animation: none; } }

/* ---------- source picker ---------- */
.pickbtn { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background-image: none; color: var(--label); padding-right: 14px; }
.pickbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickbtn svg { width: 10px; height: 10px; color: var(--label-3); flex: none; }
.srcpill:hover { background: var(--fill-2); }
.picker { position: fixed; z-index: 75; width: min(400px, calc(100vw - 20px)); max-height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: 22px; background: color-mix(in srgb, var(--surface) 86%, transparent); overflow: hidden; animation: pickIn 0.32s var(--ease); }
.picker.up { transform-origin: 50% 100%; } .picker.down { transform-origin: 50% 0; }
@keyframes pickIn { from { opacity: 0; transform: scale(0.94) translateY(var(--pk-dy, 8px)); } }
@media (prefers-reduced-motion: reduce) { .picker { animation: none; } }
.pk-head { padding: 12px 12px 8px; display: grid; gap: 10px; border-bottom: 0.5px solid var(--sep); }
.pk-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--fill); }
.pk-search svg { width: 14px; height: 14px; color: var(--label-3); flex: none; }
.pk-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 15px; }
.pk-search input::placeholder { color: var(--label-4); }
.pk-list { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.pk-gl { font-size: 13px; color: var(--label-3); padding: 10px 10px 4px; }
.pk-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; border: 0; background: transparent; text-align: left; padding: 9px 10px; border-radius: 12px; cursor: pointer; font-size: 15px; color: var(--label); }
.pk-row:hover, .pk-row.act { background: var(--fill); }
.pk-row .ck { color: var(--tint); font-size: 14px; visibility: hidden; }
.pk-row[aria-selected="true"] .ck { visibility: visible; }
.pk-row .tt { min-width: 0; }
.pk-row .tt b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row .tt small { display: block; font-size: 12.5px; color: var(--label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-row .rt { display: grid; justify-items: end; gap: 4px; }
.pk-row .rt span { font-size: 12.5px; color: var(--label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini { display: flex; width: 84px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--fill); }
.mini i { height: 100%; }
.pk-empty { padding: 22px 12px; text-align: center; color: var(--label-3); font-size: 14px; }
.pk-foot { padding: 10px 14px 12px; border-top: 0.5px solid var(--sep); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; color: var(--label-3); }
.pk-foot a { font-weight: 500; }

.searchwrap { position: relative; z-index: 26; }
.pk-row .rt span.wait { color: var(--label-4); }

/* ---------- coalition builder ---------- */
.coal { margin-top: 20px; --ok: #248a3d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .coal { --ok: #30d158; } }
:root[data-theme="dark"] .coal { --ok: #30d158; }
.coal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.coal-reset { border: 0; background: transparent; color: var(--tint); font-size: 15px; padding: 2px 0; cursor: pointer; }
.coal-reset:disabled { color: var(--label-4); cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 18px; border: 0; background: var(--fill); color: var(--label); font-size: 15px; cursor: pointer; transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.chip b { font-weight: 500; color: var(--label-3); font-variant-numeric: tabular-nums; }
.chip:hover { background: var(--fill-2); }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 18%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--c); }
.chip[aria-pressed="true"] b { color: var(--label); }
.coal-viz { position: relative; margin: 46px 0 0; }
.coal-track { position: relative; display: flex; height: 40px; border-radius: 12px; background: var(--fill); overflow: hidden; }
.coal-track i { height: 100%; transition: width 0.5s var(--ease); box-shadow: inset -1.5px 0 0 var(--surface); }
.coal-track i:last-child { box-shadow: none; }
.coal-line { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--label); border-radius: 1px; }
.coal-line span { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; color: var(--label-2); }
.coal-viz.met .coal-line { background: var(--ok); }
.coal-viz.met .coal-line span { color: var(--ok); font-weight: 500; }
.coal-range { position: relative; height: 26px; margin-top: 10px; }
.coal-range .w { position: absolute; top: 3px; height: 8px; border: 1.5px solid var(--label-3); border-top: 0; border-radius: 0 0 3px 3px; transition: left 0.5s var(--ease), width 0.5s var(--ease); }
.coal-range .t { position: absolute; top: 12px; font-size: 12.5px; color: var(--label-3); white-space: nowrap; transform: translateX(-50%); }
.coal-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--label-4); margin-top: 2px; font-variant-numeric: tabular-nums; }
.coal-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 0.5px solid var(--sep); }
.coal-out .k { font-size: 14px; color: var(--label-3); }
.coal-out .v { font-size: 30px; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.coal-out .v.ok { color: var(--ok); }
.coal-out .verdict { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--label-2); display: flex; gap: 8px; align-items: baseline; }
.coal-out .verdict .ic { flex: none; font-weight: 700; }
.coal-out .verdict.ok .ic { color: var(--ok); }
.coal-out .verdict.no .ic { color: var(--label-3); }
.coal-empty { margin: 0; padding: 26px 0 6px; color: var(--label-3); font-size: 15px; }
@media (max-width: 600px) { .coal-out .v { font-size: 24px; } .coal-out { gap: 10px; } }
body.loading .coal-viz, body.loading .coal-out { opacity: 0.35; }

/* ---------- compare: swap A and B ---------- */
.cmp-grid { position: relative; }
.swap { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 22px; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); color: var(--label); box-shadow: 0 0 0 5px var(--page), 0 4px 14px rgba(0, 0, 0, 0.18); transition: transform 0.35s var(--ease), background 0.2s var(--ease); }
.swap svg { width: 19px; height: 19px; }
.swap:hover { background: var(--fill-2); }
.swap.spin { transform: translateX(-50%) rotate(180deg); }
@media (max-width: 860px) {
  .swap { position: static; transform: none; justify-self: center; margin: -4px 0; }
  .swap svg { transform: rotate(90deg); }
  .swap.spin { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .swap { transition: none; } }

/* ---------- nav brand link + divider ---------- */
.nav a.brand { color: var(--label); border-radius: 999px; height: 34px; transition: background 0.2s; }
.nav a.brand:hover { background: var(--fill); }
.nav .nav-sep { width: 1px; height: 18px; background: var(--sep); margin: 0 6px 0 2px; flex: none; }

/* ---------- method: graphical checks ---------- */
.chk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; }
.chk-head .sub { max-width: 62ch; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--label-2); padding-top: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.lg-dot, .lg-ring, .lg-bar { display: inline-block; flex: none; }
.lg-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--label-2); }
.lg-ring { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--label-2); }
.lg-bar { width: 18px; height: 8px; border-radius: 3px; background: var(--label-3); }
.mrpviz { display: grid; grid-template-columns: minmax(150px, 0.9fr) repeat(4, minmax(140px, 1fr)); gap: 0 22px; min-width: 760px; }
.mv-h { font-size: 14px; font-weight: 600; padding-bottom: 10px; display: flex; flex-direction: column; gap: 1px; }
.mv-h .pn { display: inline-flex; align-items: center; gap: 8px; }
.mv-h small { font-size: 12.5px; font-weight: 400; color: var(--label-3); }
.mv-n, .mv-c { border-top: 0.5px solid var(--sep-soft); padding: 11px 0; min-width: 0; }
.mv-n b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-n small { display: block; font-size: 12.5px; color: var(--label-3); }
.mv-c { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.mv-t { position: relative; height: 16px; }
.mv-t::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: var(--fill); }
.mv-t .ln { position: absolute; top: 6px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--c) 40%, transparent); }
.mv-t .mk { position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; }
.mv-t .mk.d { background: var(--c); }
.mv-t .mk.r { box-shadow: inset 0 0 0 2px var(--c); background: var(--surface); }
.mv-v { font-size: 13px; color: var(--label-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv-v b { color: var(--label); font-weight: 650; }
.byviz { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin-top: 6px; }
.by-card { background: var(--surface-2); border-radius: 14px; padding: 14px 16px 12px; display: grid; gap: 10px; align-content: start; }
.by-card h4 { margin: 0; font-size: 15px; font-weight: 600; }
.by-card h4 small { display: block; font-size: 12.5px; font-weight: 400; color: var(--label-3); margin-top: 1px; }
.by-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: 13.5px; }
.by-row .pn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.by-row .num { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.by-t { position: relative; height: 16px; border-radius: 4px; background: var(--fill); }
.by-t .bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--c); opacity: 0.85; }
.by-t .mk { position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; }
.by-t .mk.d { background: var(--label); box-shadow: 0 0 0 1.5px var(--surface-2); }
.by-t .mk.r { box-shadow: inset 0 0 0 2px var(--label), 0 0 0 1.5px var(--surface-2); }
.by-foot { font-size: 12.5px; color: var(--label-3); }
.ingrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }

/* MP matches in the constituency search */
.suggest .who { display: block; font-size: 12.5px; font-weight: 500; color: var(--tint); margin-bottom: 1px; }

/* ---------- explore ---------- */
.menu .mh { margin: 8px 12px 2px; font-size: 12.5px; color: var(--label-3); }
.menu .mh:first-child { margin-top: 4px; }
.xp { display: grid; gap: 14px; }
.xp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.xp-axis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.xp-axis .k { font-size: 14px; font-weight: 400; color: var(--label-3); }
.xp-ctl .seg { margin-left: auto; }
@media (max-width: 760px) { .xp-ctl .seg { margin-left: 0; } }
.xp-pre { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-pre button { border: 0; background: var(--fill); color: var(--label); border-radius: 15px; height: 30px; padding: 0 12px; font-size: 13.5px; cursor: pointer; }
.xp-pre button:hover { background: var(--fill-2); }
.xp-pre button[aria-pressed="true"] { background: var(--label); color: var(--surface); }
.xp-sum { margin: 2px 0 0; font-size: 16px; color: var(--label-2); max-width: 70ch; }
.xp-sum b { color: var(--label); font-weight: 650; }
.xp-chart { position: relative; }
.xp-chart svg { display: block; width: 100%; height: auto; }
.xp-chart circle.pt { cursor: pointer; transition: r 0.15s; }
.xp-chart circle.pt:hover { r: 6; }
.xp-tip { position: absolute; pointer-events: none; z-index: 3; min-width: 170px; max-width: 260px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); font-size: 13px; }
.xp-tip b { display: block; font-size: 14px; margin-bottom: 4px; }
.xp-tip div { display: flex; justify-content: space-between; gap: 14px; color: var(--label-2); }
.xp-tip div span:last-child { color: var(--label); font-weight: 600; font-variant-numeric: tabular-nums; }
.xp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; align-items: baseline; }
.xp-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--label-2); }
.xp-leg span { display: inline-flex; align-items: center; gap: 6px; }
.xp-note { margin: 0; font-size: 12.5px; color: var(--label-3); max-width: 60ch; }

/* ---------- compare: loading states ---------- */
.cmpmap .hx { fill: var(--fill); }
#v-compare.cmp-first #cmpTbl, #v-compare.cmp-first #flipList { display: block; min-height: 240px; border-radius: 12px; background: linear-gradient(90deg, var(--fill) 0%, var(--fill-2) 50%, var(--fill) 100%) 0 0 / 200% 100%; animation: shimmer 1.3s linear infinite; }
#v-compare.cmp-first #flipList { min-height: 420px; }
#v-compare.cmp-first #flipSub { visibility: hidden; }
#v-compare.cmp-first .cmpmap .hx { animation: hxPulse 1.1s ease-in-out infinite alternate; }
@keyframes hxPulse { from { opacity: 0.45; } to { opacity: 1; } }
#v-compare #cmpTbl, #v-compare #flipList, #v-compare #cmpMap { transition: opacity 0.25s var(--ease); }
#v-compare.cmp-busy #cmpTbl, #v-compare.cmp-busy #flipList, #v-compare.cmp-busy #cmpMap { opacity: 0.4; }
#v-compare.cmp-first #cmpLede::after, #v-compare.cmp-busy #cmpLede::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 10px; vertical-align: -1px; border-radius: 50%; border: 2px solid var(--label-4); border-top-color: var(--label-2); animation: spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { #v-compare.cmp-first #cmpTbl, #v-compare.cmp-first #flipList, #v-compare.cmp-first .cmpmap .hx { animation: none; } }

/* ---------- polling average window ---------- */
.avgwin { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--label-3); }

/* ---------- nav tabs: a plain row on wide screens (the wrapper only matters on phones) ---------- */
.nav .tabs { display: contents; }
.ptbl .mo { display: none; }
.coal-range { z-index: 2; }
.coal-range .t { background: var(--surface); padding: 0 4px; border-radius: 4px; }

/* =====================================================================================================
   Phones (up to 640px). One place for every small-screen rule: the page never scrolls sideways, the nav
   tabs scroll within their bar, wide tables drop to their key columns, and charts are drawn at real width
   by the script (see chartW in app.js).
   ===================================================================================================== */
@media (max-width: 640px) {
  body { overflow-x: clip; }
  .page { padding: 0 max(16px, env(safe-area-inset-right, 0px)) 150px max(16px, env(safe-area-inset-left, 0px)); }
  footer { padding: 0 16px 130px; }
  .view { gap: 56px; }

  /* nav: full width; the page tabs scroll sideways and the search button stays put */
  .nav { left: 10px; right: 10px; transform: none; max-width: none; gap: 0; padding: 4px; }
  .nav .tabs { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .nav .tabs::-webkit-scrollbar { display: none; }
  .nav .tabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
  .nav .tabs.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px); mask-image: linear-gradient(90deg, transparent, #000 30px); }
  .nav .tabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
  .nav a.tab { flex: none; padding: 8px 13px; font-size: 14.5px; }
  .nav .find { flex: none; width: 36px; height: 36px; margin-left: 2px; }

  /* type */
  .hero { padding-top: 96px; }
  .hero .when { font-size: 14px; margin-bottom: 10px; }
  .hero h1 { font-size: 35px; letter-spacing: -0.035em; }
  .hero .lede { font-size: 17px; margin-top: 14px; }
  .chapter > h2 { font-size: 27px; }
  .chapter > .lede { font-size: 16px; margin: 8px 0 18px; }

  /* headline numbers: three to a row, odds in three equal columns */
  .tally { margin-top: 38px; }
  .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
  .nums .n .nm { font-size: 12.5px; }
  .nums .n .v { font-size: 27px; }
  .answers { margin-top: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .answers > div { padding: 0 0 0 12px; border-left: 0.5px solid var(--sep); border-top: 0; min-width: 0; }
  .answers > div:first-child { padding-left: 0; border-left: 0; }
  .answers .k { font-size: 12.5px; line-height: 1.3; min-height: 2.6em; }
  .answers .v { font-size: 24px; }
  .caption { font-size: 13px; }

  /* cards and lists */
  .group { padding: 16px; border-radius: 20px; }
  .list, .dplot { margin: 0 -16px -6px; }
  .li { padding: 11px 16px; }
  .flush, .tbox { margin: 0 -16px -16px; }
  .whybox { padding: 16px 16px 0; }
  .whybox .more2 { width: calc(100% + 32px); margin: 0 -16px; padding: 13px 16px; }
  #closest .li { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  #closest .li .m { white-space: normal; padding-left: 20px; font-size: 13.5px; }

  /* segmented buttons scroll rather than spill off the side */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: none; padding: 6px 12px; }
  .seg.full button, #scotMode button { flex: 1; }
  #scotMode { display: flex; width: 100%; }
  #scotMode button { white-space: normal; line-height: 1.2; padding: 6px 8px; }

  /* charts get the full card width */
  .pollchart, .histchart { padding: 14px 8px 10px; }
  .histchart .toolbar { padding: 0 8px; }

  /* every party: each row becomes a small card (name, seats, change / range bar / range, vote, majority) */
  .ptab { min-width: 0; display: block; }
  .ptab thead { display: none; }
  .ptab tbody { display: block; }
  .ptab tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; grid-template-areas: "n n s c" "b b b b" "r v m m"; gap: 6px 12px; align-items: center; padding: 13px 0; border-bottom: 0.5px solid var(--sep-soft); }
  .ptab tr:last-child { border-bottom: 0; }
  .ptab td { padding: 0; border: 0; text-align: left; font-size: 13px; white-space: nowrap; }
  .ptab td:nth-child(1) { grid-area: n; font-size: 15.5px; min-width: 0; }
  .ptab td:nth-child(2) { grid-area: s; text-align: right; }
  .ptab td:nth-child(3) { grid-area: c; text-align: right; font-size: 13.5px; min-width: 52px; }
  .ptab td:nth-child(4) { grid-area: b; width: auto; min-width: 0; }
  .ptab td:nth-child(5) { grid-area: r; }
  .ptab td:nth-child(5)::after { content: " seats"; }
  .ptab td:nth-child(6) { grid-area: v; color: var(--label-3); }
  .ptab td:nth-child(6)::before { content: "Vote "; }
  .ptab td:nth-child(7), .ptab td:nth-child(8) { display: none; }
  .ptab td:nth-child(9) { grid-area: m; text-align: right; color: var(--label-3); }
  .ptab td:nth-child(9)::before { content: "Majority "; }
  .ptab .big { font-size: 22px; }

  /* seat list: name, 2024 winner, projection and chance */
  .stab { min-width: 0; font-size: 14px; }
  .stab th:nth-child(2), .stab td:nth-child(2), .stab th:nth-child(n+6), .stab td:nth-child(n+6) { display: none; }
  .stab th, .stab td { padding: 10px 6px; }
  .stab th:first-child, .stab td:first-child { padding-left: 16px; }
  .stab th:nth-child(5), .stab td:nth-child(5) { padding-right: 16px; }
  .stab td.nm { min-width: 0; }
  .stab .gain { display: block; margin: 1px 0 0 17px; font-size: 11.5px; }
  .tbox { max-height: 72vh; }
  .toolbar .pick { flex: 1 1 140px; }

  /* poll tables: date tucked under the pollster, sample and lead columns hidden */
  .ptbl { font-size: 13.5px; }
  .ptbl .dt, .ptbl .xs { display: none; }
  .ptbl th, .ptbl td { padding: 9px 5px; }
  .ptbl th:first-child, .ptbl td:first-child, .ptbl tr > .dt + * { padding-left: 16px; }
  .ptbl th:last-child, .ptbl td:last-child { padding-right: 16px; }
  .ptbl td.who { white-space: normal; min-width: 112px; line-height: 1.3; }
  .ptbl td.who .cl { display: block; font-size: 12px; }
  .ptbl .mo { display: block; font-size: 12px; color: var(--label-3); margin-top: 1px; font-weight: 400; }

  /* map */
  .hexmap { min-height: 0; max-height: none; }

  /* Scottish pollster rows */
  .drow { grid-template-columns: 100px minmax(0, 1fr) 46px; gap: 10px; padding: 9px 16px; font-size: 14px; }
  .drow.axis .tr b:nth-child(2) { display: none; }

  /* explore: example buttons in one swipeable row */
  .xp-ctl { gap: 10px 20px; }
  .xp-axis { font-size: 16px; }
  .xp-pre { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .xp-pre::-webkit-scrollbar { display: none; }
  .xp-pre button { flex: none; }
  .xp-sum { font-size: 15px; }
  .xp-chart { margin: 0 -8px; }

  /* method: MRP comparison scrolls sideways with the poll names pinned */
  .mrpviz { grid-template-columns: 118px repeat(4, 150px); gap: 0 14px; min-width: 0; width: max-content; }
  .mrpviz > .mv-n, .mrpviz > .mv-h:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .byviz { grid-template-columns: minmax(0, 1fr); }
  .ingrid { grid-template-columns: minmax(0, 1fr); }
  .article p, .article li { font-size: 16px; }

  /* coalition builder */
  .chip { height: 34px; font-size: 14.5px; padding: 0 12px 0 10px; }
  .coal-out .k { font-size: 13px; }

  /* dock */
  .dock .bar { padding: 5px; gap: 5px; }
  .srcpill { max-width: 210px; height: 38px; font-size: 14.5px; padding: 0 14px; }
  .dock .btn { height: 38px; padding: 0 16px; }

  /* seat sheet */
  .sh-h { padding: 18px 18px 12px; }
  .sh-b { padding: 4px 16px 22px; }
  .sh-f { padding: 12px 16px 16px; }
  .vrow { grid-template-columns: minmax(78px, auto) minmax(0, 1fr) 42px 40px; gap: 2px 8px; font-size: 14.5px; }
}

.nums .short { display: none; }
@media (max-width: 640px) {
  .nums .long { display: none; }
  .nums .short { display: inline; }
  .drow.axis .tr b, .drow.axis > span:first-child { white-space: nowrap; }
  .drow.axis > span:first-child { font-size: 11.5px; }
  .ptbl tr.avg td.l { white-space: normal; line-height: 1.25; }
  .by-row { grid-template-columns: 104px minmax(0, 1fr) 30px; }
  /* compare results: party, A, B and change on one line; majority chances underneath */
  .cmp-res, .cmp-res thead, .cmp-res tbody { display: block; }
  .cmp-res tr { display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px 80px; grid-template-areas: "n a b c" "x x y y"; align-items: center; column-gap: 8px; row-gap: 2px; padding: 10px 0; border-bottom: 0.5px solid var(--sep-soft); }
  .cmp-res thead tr { padding-top: 0; border-bottom-color: var(--sep); }
  .cmp-res tr:last-child { border-bottom: 0; }
  .cmp-res th, .cmp-res td { padding: 0; border: 0; }
  .cmp-res th:nth-child(5), .cmp-res td:nth-child(5), .cmp-res th:nth-child(6), .cmp-res th:nth-child(7) { display: none; }
  .cmp-res td:nth-child(6) { grid-area: x; text-align: left; font-size: 13px; color: var(--label-3); }
  .cmp-res td:nth-child(7) { grid-area: y; text-align: right; font-size: 13px; color: var(--label-3); }
  .cmp-res td:nth-child(6)::before { content: "Majority in A "; }
  .cmp-res td:nth-child(7)::before { content: "Majority in B "; }
  .cmp-res .dd { min-width: 0; }
}