/* NZ Election 2026 Guide
   Identity: the ballot mark. A ticked circle is the one thing every voter does,
   so the hero carries it, the header carries a small one, and a field of empty
   ballot circles is the only pattern on the page.
   Colour: aubergine and lilac — chosen because no party in the guide uses them. */

:root {
  --night: #2a1d43;       /* hero band */
  --night-2: #3a2a5c;
  --lilac: #d8ccf3;       /* on night */
  --lilac-dim: #a99ad0;
  --paper: #f4f2f8;       /* page: a faint violet grey, not cream */
  --surface: #ffffff;
  --ink: #1e1830;
  --muted: #5d566f;
  --rule: #e1dcea;
  --accent: #5b3f99;      /* links, selected states */
  --accent-soft: #ebe5f7;
  --mark: #4a4160;        /* poll dots */
  --threshold: #857d99;
  --field: #837b97;      /* input borders, 3:1+ */
  --focus: #7b5cd6;
  --r-s: 6px; --r-m: 14px; --r-l: 22px;
  --p-NAT: #00529F; --p-LAB: #D82A20; --p-GRN: #098137; --p-ACT: #9E8400; --p-NZF: #4D4D4D; --p-TPM: #9E1B4F; --p-OPP: #178A7D; --p-TTT: #6B6280;
  /* party colours for text: 4.5:1+ */ --t-NAT: #00529F; --t-LAB: #C4251B; --t-GRN: #097733; --t-ACT: #766400; --t-NZF: #4D4D4D; --t-TPM: #9E1B4F; --t-OPP: #117265; --t-TTT: #6B6280;
  font-size: 112.5%;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --night: #1a1229; --night-2: #261a3b; --lilac: #d8ccf3; --lilac-dim: #9c8ec4;
    --paper: #131019; --surface: #1d1828; --ink: #ece8f4; --muted: #a9a2bb; --rule: #332b45;
    --accent: #c2b0f0; --accent-soft: #2a2140; --mark: #cfc6e2; --threshold: #6f6787; --field: #7a7292; --focus: #c2b0f0;
    --p-NAT: #4A8FE0; --p-LAB: #F0504A; --p-GRN: #2FA85A; --p-ACT: #D9B400; --p-NZF: #B0B0B0; --p-TPM: #D2507F; --p-OPP: #2FC4B2; --p-TTT: #A69CBE;
    --t-NAT: #4E92E1; --t-LAB: #F05F59; --t-GRN: #2FA85A; --t-ACT: #D9B400; --t-NZF: #B0B0B0; --t-TPM: #D96C94; --t-OPP: #2FC4B2; --t-TTT: #A69CBE;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --night: #1a1229; --night-2: #261a3b; --lilac: #d8ccf3; --lilac-dim: #9c8ec4;
  --paper: #131019; --surface: #1d1828; --ink: #ece8f4; --muted: #a9a2bb; --rule: #332b45;
  --accent: #c2b0f0; --accent-soft: #2a2140; --mark: #cfc6e2; --threshold: #6f6787; --field: #7a7292; --focus: #c2b0f0;
  --p-NAT: #4A8FE0; --p-LAB: #F0504A; --p-GRN: #2FA85A; --p-ACT: #D9B400; --p-NZF: #B0B0B0; --p-TPM: #D2507F; --p-OPP: #2FC4B2; --p-TTT: #A69CBE;
  --t-NAT: #4E92E1; --t-LAB: #F05F59; --t-GRN: #2FA85A; --t-ACT: #D9B400; --t-NZF: #B0B0B0; --t-TPM: #D96C94; --t-OPP: #2FC4B2; --t-TTT: #A69CBE;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  line-height: 1.55;
}
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
/* Touch: no grey/blue tap box anywhere; a quick dim instead, and no tap delay */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, select, input, [role="button"], [tabindex] { touch-action: manipulation; }
:focus:not(:focus-visible) { outline: none; }
@media (hover: none) {
  a, button, summary, label { transition: opacity 0.12s; }
  a:active, button:active, summary:active, label:active { opacity: 0.6; }
}
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 50rem; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }

/* ---------- Header ---------- */
.top { position: fixed; left: 0; right: 0; top: 0; z-index: 5; background: var(--night); color: var(--lilac); border-bottom: 1px solid rgba(216, 204, 243, 0.14); }
.top-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.2rem 1rem; padding-top: 0.55rem; padding-bottom: 0.45rem; }
.site-name { margin: 0; font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; gap: 0.45rem; color: #fff; }
.mark { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--lilac); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.top nav { display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: none; margin: 0 -8px; }
@media (max-width: 719px) { html { scroll-padding-top: 8.5rem; } .top nav { flex-wrap: wrap; overflow: visible; gap: 0.1rem 0; } .top nav a { padding: 0.3rem 0.5rem; font-size: 0.88rem; } }
.top nav a { padding: 0.35rem 0.55rem; text-decoration: none; color: var(--lilac); white-space: nowrap; border-radius: 999px; font-size: 0.9rem; }
.top nav a:hover { background: var(--night-2); color: #fff; }

/* ---------- Hero: the one bold moment ---------- */
.hero {
  background-color: var(--night);
  /* field of empty ballot circles */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='9' fill='none' stroke='%23d8ccf3' stroke-opacity='0.11' stroke-width='1.5'/%3E%3C/svg%3E");
  color: #fff; padding: 2.5rem 0 4.5rem; overflow: hidden;
}
.hero-inner { position: relative; }
.hero .hero-count { position: relative; z-index: 1; margin-bottom: 0; }
.hero h1 { margin: 0; font-weight: 800; line-height: 1; max-width: 40rem; position: relative; z-index: 1; }
.hero-date { display: block; font-size: clamp(2.4rem, 15vw, 5.4rem); letter-spacing: -0.035em; color: #fff; white-space: nowrap; }
.hero-day { display: block; font-size: clamp(1.25rem, 4.5vw, 1.75rem); font-weight: 600; margin-top: 0.6rem; color: var(--lilac); line-height: 1.25; letter-spacing: 0; }
.hero-count { display: inline-block; margin-top: 1.1rem; font-size: 1rem; font-weight: 800; color: var(--night); background: var(--lilac); padding: 0.35rem 0.85rem; border-radius: 999px; letter-spacing: 0; }
.hero-tick { position: absolute; right: -2.5rem; top: -1rem; width: 14rem; height: 14rem; fill: none; stroke: var(--lilac); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.22; }
@media (min-width: 720px) { .hero-tick { right: 0; top: -0.5rem; width: 17rem; height: 17rem; opacity: 0.9; stroke-width: 6; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-tick path { stroke-dasharray: 90; stroke-dashoffset: 90; animation: tick 0.7s 0.35s ease-out forwards; }
  @keyframes tick { to { stroke-dashoffset: 0; } }
}

/* ---------- Key dates ---------- */
.dates-body { position: relative; margin-top: -2.75rem; }
.next-step {
  margin: 0 0 2rem; padding: 1.1rem 1.25rem; background: var(--surface); border-radius: var(--r-l);
  box-shadow: 0 1px 0 var(--rule), 0 10px 28px -14px rgba(42, 29, 67, 0.35);
  font-size: 1.1rem;
}
.next-step strong { font-weight: 800; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0.62rem; top: 0.8rem; bottom: 0.8rem; width: 2px; background: var(--rule); }
.timeline li { position: relative; padding: 0.5rem 0 0.5rem 2.3rem; }
.timeline li::before { content: ""; position: absolute; left: 0.1rem; top: 0.72rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--threshold); box-sizing: border-box; }
.timeline li.past { color: var(--muted); }
.timeline li.past::before { background: var(--threshold); border-color: var(--threshold); }
.timeline li.next::before { border: 2px solid var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.timeline .when { display: block; font-weight: 800; }
.timeline li.today-marker { padding: 0.15rem 0 0.15rem 2.3rem; color: var(--accent); font-weight: 600; font-size: 0.88rem; }
.timeline li.today-marker::before { width: 0.55rem; height: 0.55rem; left: 0.35rem; top: 0.5rem; border: 0; background: var(--accent); }
.badge { display: inline-block; margin-left: 0.5rem; font-size: 0.75rem; font-weight: 800; color: var(--paper); background: var(--accent); border-radius: 999px; padding: 0.05rem 0.55rem; vertical-align: 0.15em; }
@media (min-width: 720px) {
  /* Wide screens: the timeline runs left to right like a calendar strip */
  .timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.75rem; }
  .timeline::before { left: 0; right: 0; top: 0.62rem; bottom: auto; width: auto; height: 2px; }
  .timeline li { padding: 1.9rem 0.25rem 0 0; font-size: 0.92rem; }
  .timeline li::before { left: 0; top: 0.1rem; }
  .timeline li.today-marker { display: none; }
}
.official { color: var(--muted); margin-top: 1.5rem; }

/* ---------- Sections ---------- */
.block { padding-top: 3rem; padding-bottom: 0.5rem; }
h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.1; margin: 0 0 0.6rem; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.6rem; }
h2::before {
  content: ""; flex: none; width: 0.85em; height: 0.85em; border-radius: 50%;
  border: 0.2em solid var(--accent);
}
.sub { font-size: 1.15rem; margin: 2.25rem 0 0.25rem; font-weight: 800; }
.lede { color: var(--muted); margin: 0 0 1.25rem; }
details.more { margin: 1.25rem 0; }
details.more summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 0.4rem 0; }
details.more ul { padding-left: 1.2rem; color: var(--muted); }
details.more li { margin: 0.45rem 0; }

/* ---------- Polls ---------- */
.poll-summary { background: var(--surface); border-radius: var(--r-l); padding: 1.1rem 1.1rem 0.6rem; box-shadow: 0 1px 0 var(--rule); }
.bar-row { display: grid; grid-template-columns: 6.6rem 1fr 3.2rem; grid-template-areas: 'name track val'; align-items: center; gap: 0.15rem 0.6rem; padding: 0.35rem 0; }
.bar-name { grid-area: name; } .bar-val { grid-area: val; } .bar-track { grid-area: track; }
@media (min-width: 640px) { .bar-row { grid-template-columns: 8rem 1fr 3.6rem; grid-template-areas: 'name track val'; align-items: center; } }
.bar-name { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.bar-track { position: relative; height: 1.15rem; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 3px; }
.bar-thr { position: absolute; top: -0.35rem; bottom: -0.35rem; width: 0; border-left: 1.5px dashed var(--threshold); }
.bar-val { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.bar-foot { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.82rem; padding: 0.6rem 0 0.2rem; border-top: 1px solid var(--rule); margin-top: 0.5rem; }
.multiples { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .multiples { grid-template-columns: 1fr 1fr; } }
.mult { padding: 0.75rem 0.9rem 0.5rem; background: var(--surface); border-radius: var(--r-m); box-shadow: 0 1px 0 var(--rule); }
.mult-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mult-name { font-weight: 800; }
.mult-value { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); }
.mult svg { display: block; width: 100%; height: auto; overflow: visible; margin-top: 0.2rem; }
.mult .avg { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.mult .dot { fill: var(--surface); stroke: var(--mark); stroke-width: 1.5; }
.mult .dot.on { fill: var(--accent); stroke: var(--accent); }
.mult .hit { fill: transparent; cursor: pointer; }
.mult .hit:focus-visible { outline: none; stroke: var(--focus); stroke-width: 2; }
.mult .thr { stroke: var(--threshold); stroke-dasharray: 3 3; stroke-width: 1; }
.mult .thr-label, .mult .axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.mult .base { stroke: var(--rule); stroke-width: 1; }
.poll-detail { margin: 0.6rem 0 0; padding: 0.6rem 0 0.15rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9rem; line-height: 1.45; min-height: 3.1em; }
.poll-detail strong { color: var(--ink); }
.table-scroll { overflow-x: auto; background: var(--surface); border-radius: var(--r-m); }
table { border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; width: 100%; }
caption { caption-side: bottom; text-align: left; padding: 0.6rem 0.5rem; }
th, td { padding: 0.45rem 0.6rem; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { font-weight: 600; color: var(--muted); }

/* ---------- Policies ---------- */
.issue-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.25rem; padding: 0.25rem 0 0.5rem; }
.seats-note { color: var(--muted); font-size: 0.9rem; margin: 0.6rem 0 0; }
.issue-picker button {
  flex: none; font: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.5rem 0.95rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink);
}
.issue-picker button:hover { border-color: var(--accent); }
.issue-picker button[aria-selected="true"] { background: var(--night); color: #fff; border-color: var(--night); }
.policy-list { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
@media (min-width: 720px) { .policy-list { grid-template-columns: 1fr 1fr; align-items: start; } }
.party { background: var(--surface); border-radius: var(--r-l); padding: 1.1rem 1.15rem 0.4rem; box-shadow: 0 1px 0 var(--rule); }
.party h3 { margin: 0 0 0.8rem; font-size: 1.25rem; font-weight: 800; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); }
.pol { margin: 0 0 1.1rem; }
.pol-name { font-weight: 600; }
.tag { display: inline-block; font-size: 0.72rem; color: var(--muted); background: var(--paper); border-radius: var(--r-s); padding: 0.05rem 0.45rem; margin-left: 0.35rem; vertical-align: 0.12em; white-space: nowrap; }
.pol blockquote { margin: 0.4rem 0 0; padding: 0.55rem 0.8rem; background: var(--accent-soft); border-radius: var(--r-s) var(--r-m) var(--r-m) var(--r-m); }
.pol blockquote.also { margin-top: 0.3rem; }
.not-covered { color: var(--muted); margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 1.5px dashed var(--rule); border-radius: var(--r-m); }

/* ---------- Debates ---------- */
.debate-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.debate-list li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 0.9rem; align-items: start; background: var(--surface); border-radius: var(--r-m); padding: 0.8rem; box-shadow: 0 1px 0 var(--rule); }
.cal { text-align: center; border-radius: var(--r-s); overflow: hidden; border: 1.5px solid var(--accent); line-height: 1.1; }
.cal-m { display: block; background: var(--accent); color: var(--surface); font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0; }
.cal-d { display: block; font-size: 1.45rem; font-weight: 800; padding: 0.2rem 0 0.25rem; }
.debate-list li.held { background: transparent; box-shadow: none; border: 1.5px solid var(--rule); }
.debate-list li.held .cal { border-color: var(--threshold); }
.debate-list li.held .cal-m { background: var(--muted); }
.d-name { font-weight: 800; }
.d-meta { color: var(--muted); display: block; font-size: 0.9rem; }
.held-note { color: var(--muted); font-size: 0.85rem; font-weight: 600; }

/* ---------- All parties ---------- */
.party-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.party-list a { display: inline-block; padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--rule); text-decoration: none; color: var(--ink); font-size: 0.95rem; }
.party-list a:hover { border-color: var(--accent); }
.party-list a.in-table { border: 3px solid var(--accent); padding: calc(0.45rem - 1.5px) calc(0.85rem - 1.5px); }
.party-key { color: var(--muted); font-size: 0.9rem; margin-top: 1rem; }
.party-key span { display: inline-block; width: 1.4rem; height: 0.9rem; border: 3px solid var(--accent); border-radius: 999px; vertical-align: -0.1em; margin-right: 0.3rem; }

/* ---------- Footer ---------- */
.foot { margin-top: 4rem; padding: 2rem 0 3rem; background: var(--night); color: var(--lilac); font-size: 0.9rem; }
.foot a { color: #fff; }
.error { color: var(--ink); background: var(--accent-soft); padding: 0.75rem 1rem; border-radius: var(--r-m); }


/* Sources at the end of each section */
.sources { margin: 1.5rem 0 0.5rem; padding: 0.7rem 1.1rem; border-radius: var(--r-m); border: 1.5px solid var(--rule); font-size: 0.85rem; color: var(--muted); }
.sources summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--accent); list-style: none; display: flex; align-items: center; gap: 0.4rem; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: ""; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.sources[open] summary::before { transform: rotate(45deg); }
.sources[open] summary { margin-bottom: 0.4rem; }
.sources ol { margin: 0; padding-left: 1.2rem; }
.sources li { margin: 0.3rem 0; }
.sources p { margin: 0.5rem 0 0; }

/* Poll details appear inside the chart card that was tapped */
.mult-note { margin: 0.5rem 0 0.3rem; padding: 0.55rem 0.75rem; background: var(--accent-soft); border-radius: var(--r-s); font-size: 0.9rem; color: var(--ink); }
.mult-note[hidden] { display: none; }
.mult .dot, .mult .avg { pointer-events: none; } /* taps on a dot reach its larger hit area */
.mult .hit:focus:not(:focus-visible) { outline: none; }

/* Debate replay links */
.d-video { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.5rem; padding: 0.35rem 0.8rem 0.35rem 0.4rem; border-radius: 999px; background: var(--accent); color: var(--paper); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.d-video:hover { text-decoration: underline; }
.d-video .play { width: 1.4rem; height: 1.4rem; }
.d-video .play circle { fill: var(--paper); }
.d-video .play path { fill: var(--accent); }
.d-novideo { font-style: italic; margin-top: 0.3rem; }

/* Compare your views */
.tool-card { background: var(--surface); border-radius: var(--r-l); padding: 1.2rem 1.25rem; box-shadow: 0 1px 0 var(--rule); }
.tool-card h3 { margin: 0 0 0.5rem; font-size: 1.2rem; font-weight: 800; }
.tool-card p { margin: 0 0 0.75rem; }
.tool-note { color: var(--muted); font-size: 0.92rem; padding: 0.6rem 0.8rem; background: var(--accent-soft); border-radius: var(--r-s); }
.tool-go { padding: 0.5rem 1rem; margin-top: 0.25rem; }

/* Your two votes */
.ballots { display: grid; grid-template-columns: 1fr; gap: 0.8rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .ballots { grid-template-columns: 1fr 1fr; } }
.ballot { background: var(--surface); border-radius: var(--r-l); padding: 1.1rem 1.2rem; box-shadow: 0 1px 0 var(--rule); border-top: 6px solid var(--accent); }
.ballot h3 { margin: 0 0 0.4rem; font-size: 1.2rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.ballot h3::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 3px solid var(--accent); flex: none; }
.ballot p { margin: 0; }
.rules { background: var(--surface); border-radius: var(--r-l); padding: 1.1rem 1.2rem 0.6rem; box-shadow: 0 1px 0 var(--rule); }
.rules h3 { margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 800; }
.rules ul { margin: 0; padding-left: 1.2rem; }
.rules li { margin: 0 0 0.6rem; }

td.who { white-space: normal; min-width: 14rem; text-align: left; color: var(--muted); }

/* Glossary terms in quotes */
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.term:hover, .term[aria-expanded="true"] { background: var(--surface); border-radius: 3px; }
.tip { position: absolute; z-index: 20; width: max-content; max-width: min(20rem, calc(100vw - 16px)); padding: 0.6rem 0.8rem; font-size: 0.88rem; line-height: 1.45; color: var(--ink); background: var(--surface); border: 1.5px solid var(--accent); border-radius: var(--r-m); box-shadow: 0 10px 28px -10px rgba(42, 29, 67, 0.45); }
.tip[hidden] { display: none; }

/* View by Topic / Party */
.mode { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0 0 0.9rem; padding: 0.25rem; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 0 var(--rule); }
.mode-label { font-size: 0.85rem; color: var(--muted); padding: 0 0.5rem 0 0.6rem; }
.mode button { font: inherit; font-size: 0.95rem; font-weight: 600; border: 0; border-radius: 999px; padding: 0.4rem 0.95rem; background: transparent; color: var(--ink); cursor: pointer; }
.mode button[aria-pressed="true"] { background: var(--accent); color: var(--paper); }


@media (max-width: 719px) { .issue-picker button { padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.9rem; } }
@media (max-width: 719px) { .bar-foot { flex-direction: column; gap: 0.2rem; } }
.bar-foot a { white-space: nowrap; }

/* Debate series (e.g. Māori electorate debates) */
.d-series { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.9rem; }
.debate-list .d-series li { display: block; padding: 0.35rem 0; margin: 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; }
.d-series li.past span { color: var(--muted); }

/* Party colours: used only to identify parties in the poll charts (always beside the party name). */
.bar-fill.p { background: var(--pc); }
.trend { background: var(--surface); border-radius: var(--r-l); padding: 0.9rem 0.9rem 0.6rem; box-shadow: 0 1px 0 var(--rule); position: relative; }
.trend-legend { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.trend-legend button { font: inherit; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; }
.trend-legend button[aria-pressed="true"] { border-color: var(--ink); font-weight: 600; }
.trend-legend .sw { width: 0.9rem; height: 3px; border-radius: 2px; background: var(--pc); }
.trend-notes { margin: 0.75rem 0 1rem; }
.trend-note { margin: 0 0 0.4rem; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
.trend-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--muted); }
.trend-key .k-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: 0.7; }
.trend-key .k-line { width: 1.4rem; height: 2.5px; border-radius: 2px; background: var(--muted); }
.trend-key .k-item { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.trend-legend .lv { font-variant-numeric: tabular-nums; color: var(--muted); }
.trend svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.trend .grid { stroke: var(--rule); stroke-width: 1; }
.trend .thr { stroke: var(--threshold); stroke-dasharray: 4 4; stroke-width: 1.25; }
.trend .axis { fill: var(--muted); font-size: 12px; font-family: inherit; }
.trend .line { fill: none; stroke: var(--pc); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; transition: opacity 0.15s; }
.trend .pdot { fill: var(--pc); stroke: var(--surface); stroke-width: 1.5; opacity: 0.55; transition: opacity 0.15s; }
.trend.focus .line, .trend.focus .pdot { opacity: 0.12; }
.trend.focus .on .line { opacity: 1; stroke-width: 3.5; }
.trend.focus .on .pdot { opacity: 1; }
.trend .cross { stroke: var(--muted); stroke-width: 1; }
.trend .cross[hidden] { display: none; }
.trend-tip { position: absolute; top: 3.2rem; z-index: 3; width: max-content; max-width: 11.5rem; padding: 0.5rem 0.65rem; font-size: 0.85rem; background: var(--surface); color: var(--ink); border: 1.5px solid var(--rule); border-radius: var(--r-m); box-shadow: 0 8px 24px -12px rgba(42, 29, 67, 0.45); pointer-events: none; }
.trend-tip[hidden] { display: none; }
.trend-tip strong { display: block; margin-bottom: 0.3rem; line-height: 1.3; }
.trend-tip ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 0.6rem; row-gap: 0.05rem; }
.trend-tip li { display: contents; }
.trend-tip li span, .trend-tip li b { color: var(--tc, var(--ink)); }
.trend-tip b { font-variant-numeric: tabular-nums; text-align: right; }
.issue-picker button { max-width: 100%; white-space: normal; text-align: left; }
.debate-list li > div { min-width: 0; overflow-wrap: anywhere; }

/* Seat calculator */

/* Show more */
.show-more { margin-top: 0.7rem; font: inherit; font-size: 0.92rem; font-weight: 600; min-height: 44px; padding: 0.4rem 1rem; border-radius: 999px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; }
.show-more:hover { background: var(--accent-soft); }
.pol[hidden], blockquote[hidden] { display: none; }
/* Back to top */
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 6; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: var(--night); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 6px 18px -6px rgba(0,0,0,0.45); }
.to-top[hidden] { display: none; }
/* Trend chart keyboard focus */
.trend svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
/* What's new */
.updates-list { padding-left: 1.2rem; color: var(--ink); }
.updates-list li { margin: 0.4rem 0; }

/* ---------- Compact phone layout ---------- */
.debate-list .d-series li[hidden] { display: none; }
.d-series-box .show-more { margin-top: 0.4rem; }
.past-debates { margin-top: 1rem; }
.past-debates > .debate-list { margin-top: 0.6rem; }
.picker-select { display: none; }
.picker-select select { font: inherit; font-weight: 600; width: 100%; min-height: 48px; padding: 0.5rem 2.4rem 0.5rem 0.9rem; border-radius: var(--r-m); border: 1.5px solid var(--accent); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237b5cd6' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.9rem center; color: var(--ink); -webkit-appearance: none; appearance: none; }
@media (max-width: 719px) {
  .picker-select { display: grid; gap: 0.3rem; margin: 0 0 1rem; font-size: 0.9rem; color: var(--muted); }
  .issue-picker { display: none; }
  .block { padding-top: 2.1rem; }
  h2 { font-size: clamp(1.5rem, 6.5vw, 1.9rem); }
  .lede { margin-bottom: 0.8rem; }
  .party { padding: 0.9rem 0.95rem 0.3rem; }
  .policy-list { gap: 0.7rem; }
  .ballot, .tool-card, .rules { padding: 0.95rem 1rem; }
  .sources { margin-top: 1.1rem; }
  .debate-list li { grid-template-columns: 3rem 1fr; gap: 0.7rem; padding: 0.7rem; }
  .debate-list .d-meta { font-size: 0.9rem; }
  .party-list { gap: 0.35rem; }
  .party-list a { padding: 0.35rem 0.7rem; font-size: 0.88rem; }
  .party-list a.in-table { padding: calc(0.35rem - 1.5px) calc(0.7rem - 1.5px); }
  .timeline li { padding-bottom: 0.7rem; }
}

/* Video (Electoral Commission MMP explainer) */
.video { margin: 0 0 1rem; }
.video-facade, .video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-l); overflow: hidden; background: var(--night); }
.video-facade { position: relative; padding: 0; cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; inset: 0; margin: auto; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 6px 20px -6px rgba(0,0,0,0.5); }
.video-play svg { width: 2rem; height: 2rem; fill: #fff; margin-left: 0.2rem; }
.video-facade:hover .video-play, .video-facade:focus-visible .video-play { transform: scale(1.06); }
.video-facade:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.video figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); }
/* Video spans the full content width, in line with the cards below */
/* Folded "How votes become seats" */
.more-rules summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; }
.more-rules summary::-webkit-details-marker { display: none; }
.more-rules summary h3 { margin: 0; }
.more-rules summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); }
.more-rules[open] summary::after { content: "\2212"; }
.more-rules[open] summary { margin-bottom: 0.5rem; }

.seat-tip { margin: 0 0 0.8rem; padding: 0.7rem 0.9rem; border-radius: var(--r-m); background: var(--accent-soft); color: var(--ink); }

/* How to vote (three facts) */
.howto { margin: 0 0 1.6rem; padding: 0.9rem 1.1rem; border-radius: var(--r-l); border: 1.5px solid var(--rule); background: var(--surface); }
.howto-title { margin: 0 0 0.4rem; font-weight: 800; }
.howto ul { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.howto li { margin: 0.25rem 0; }
.howto a { font-weight: 600; }
@media (min-width: 720px) { .howto ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem; padding-left: 0; list-style: none; } }

/* Header: current section and compact phone menu */
.top nav a[aria-current] { background: var(--night-2); color: #fff; }
.menu-btn { display: none; font: inherit; font-size: 0.9rem; font-weight: 600; color: #fff; background: var(--night-2); border: 1.5px solid rgba(216, 204, 243, 0.35); border-radius: 999px; padding: 0.35rem 0.85rem; min-height: 40px; cursor: pointer; }
@media (max-width: 719px) {
  .top.compact .top-inner { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .top.compact .menu-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
  .top.compact nav { display: none; }
  .top.compact.open nav { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; margin: 0.3rem 0 0.2rem; gap: 0.1rem; }
  .top.compact.open nav a { padding: 0.65rem 0.75rem; font-size: 1rem; }
}

/* Countdowns */
.countdowns { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; max-width: 34rem; position: relative; z-index: 1; }
.countdowns li { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.7rem; border-radius: var(--r-m); border: 1.5px solid rgba(216, 204, 243, 0.35); color: var(--lilac); background: rgba(26, 18, 41, 0.35); }
.countdowns li.main { background: var(--lilac); color: var(--night); border-color: var(--lilac); }
.cd-label { font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.cd-big { font-size: 1.9rem; font-weight: 800; line-height: 1.05; }
.cd-small { font-size: 0.78rem; font-weight: 700; }
.cd-date { font-size: 0.78rem; opacity: 0.85; }
@media (max-width: 480px) { .countdowns { gap: 0.4rem; } .countdowns li { padding: 0.5rem 0.55rem; } .cd-big { font-size: 1.6rem; } .cd-label, .cd-small, .cd-date { font-size: 0.72rem; } }
/* Enrolment */
.enrolment { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 1px 0 var(--rule); }
.enrol-head { margin: 0; }
.enrol-bar { height: 0.9rem; border-radius: 999px; background: var(--rule); overflow: hidden; }
.enrol-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px 0 0 999px; }
.enrol-src { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* ---------- Compact first sections ---------- */
.next-step > p { margin: 0; }
.next-step .enrolment { margin: 0.8rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; box-shadow: none; }
.enrol-head { font-size: 0.95rem; }
.find-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.find-row .tool-go { margin: 0; flex: none; }
.find-row span { flex: 1 1 16rem; font-size: 0.92rem; }
.ballot { border-top-width: 4px; }
/* Countdown tiles: number and "days to go" together */
.cd-num { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
@media (max-width: 719px) {
  .hero { padding: 1.6rem 0 3.6rem; }
  .hero-day { margin-top: 0.35rem; }
  .hero-tick { width: 10rem; height: 10rem; top: -0.5rem; }
  /* Countdowns become three compact rows */
  .countdowns { grid-template-columns: 1fr; gap: 0.35rem; margin-top: 0.9rem; max-width: none; }
  .countdowns li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label num" "date num"; align-items: center; padding: 0.45rem 0.75rem; gap: 0 0.6rem; }
  .cd-label { grid-area: label; font-size: 0.85rem; }
  .cd-date { grid-area: date; font-size: 0.8rem; }
  .cd-num { grid-area: num; justify-content: flex-end; }
  .cd-big { font-size: 1.6rem; }
  .cd-small { font-size: 0.8rem; }
  .next-step { padding: 0.95rem 1rem; margin-bottom: 1rem; }
  .howto { padding: 0.75rem 0.95rem; margin-bottom: 1rem; }
  .howto li { font-size: 0.93rem; margin: 0.15rem 0; }
  .timeline li { display: grid; grid-template-columns: 8.2rem 1fr; gap: 0.6rem; padding: 0.3rem 0 0.3rem 2rem; font-size: 0.93rem; }
  .timeline li::before { top: 0.45rem; width: 0.9rem; height: 0.9rem; }
  .timeline .badge { display: none; }
  .timeline li.today-marker { display: block; padding: 0.1rem 0 0.1rem 2rem; }
  .timeline li.today-marker::before { top: 0.4rem; }
  .ballots { gap: 0.5rem; }
  .ballot { padding: 0.75rem 0.9rem; }
  .ballot h3 { font-size: 1.05rem; }
  .ballot p { font-size: 0.95rem; }
  .video { margin-bottom: 0.7rem; }
}
/* ---------- Policies: colour-coded party cards ---------- */
.policy-showing { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.92rem; display: flex; align-items: center; gap: 0.4rem; }
.pdot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--pc, var(--accent)); flex: none; }
#policy-list .party { position: relative; border-top: 5px solid var(--pc, var(--accent)); padding-top: 0.9rem; }
#policy-list .party h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; margin-bottom: 0.7rem; padding-bottom: 0.55rem; }
#policy-list .party h3 span:last-child { color: var(--ink); }
#policy-list .pol-name { display: inline; font-weight: 700; line-height: 1.35; }
#policy-list .pol blockquote { background: var(--paper); border-left: 3px solid var(--pc, var(--accent)); border-radius: 0 var(--r-m) var(--r-m) 0; padding: 0.55rem 0.8rem; margin-top: 0.45rem; }
#policy-list .tag { background: transparent; border: 1px solid var(--rule); }
#policy-list .show-more { border-color: var(--rule); color: var(--ink); }
#policy-list .show-more:hover { border-color: var(--pc, var(--accent)); background: transparent; }
@media (min-width: 720px) {
  /* Row by row, left to right (matches reading order); cards in a row share a height */
  .policy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; align-items: stretch; }
  .policy-list .party { margin: 0; }
}
.w-short { display: none; }
@media (max-width: 719px) {
  .w-long { display: none; } .w-short { display: inline; }
  .timeline li { grid-template-columns: 6.6rem 1fr; }
  .next-step { font-size: 1rem; }
}

.timeline-box > summary { cursor: pointer; font-weight: 700; color: var(--accent); padding: 0.4rem 0; min-height: 44px; display: flex; align-items: center; }
.timeline-box > summary { display: none; } /* timeline always shown, on phones too */
.issue-picker button .pdot { margin-right: 0.4rem; vertical-align: -0.05em; }
.issue-picker button[aria-selected="true"] .pdot { box-shadow: 0 0 0 2px #fff; }

/* ---------- Desktop: dates hero and the two cards beneath it ---------- */
@media (min-width: 720px) {
  .hero { padding: 2.75rem 0 4.5rem; }
  .hero-tick { display: none; }
  .hero h1 { max-width: none; }
  .countdowns { max-width: none; gap: 0.75rem; margin-top: 1.6rem; }
  .countdowns li { padding: 0.85rem 1rem; }
  .cd-label { font-size: 0.85rem; }
  .cd-big { font-size: 2.4rem; }
  .cd-small, .cd-date { font-size: 0.85rem; }
  .dates-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; align-items: stretch; }
  .dates-body > * { grid-column: 1 / -1; }
  .dates-body > .next-step { margin: 0 0 1.75rem; }
  .next-step { font-size: 1.02rem; display: flex; flex-direction: column; }
  .next-step > p { margin-bottom: 0.8rem; }
  .howto { border: 0; box-shadow: 0 1px 0 var(--rule), 0 10px 28px -14px rgba(42, 29, 67, 0.35); padding: 1.1rem 1.25rem; }
  .howto ul { display: block; padding-left: 1.1rem; list-style: disc; margin-bottom: 0.7rem; }
  .howto li { margin: 0.3rem 0; }
  .timeline .w-long { display: none; } .timeline .w-short { display: inline; }
}

.nowrap { white-space: nowrap; }


.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sw { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; background: var(--pc); flex: none; }

/* ---------- Seat calculator: one table on every screen ---------- */
.seat-calc { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-l); padding: 1rem 0.85rem 1.1rem; box-shadow: 0 1px 0 var(--rule); }
.seat-out { display: contents; }
.seat-out > .seat-warn { order: 1; }
.seat-out > .seat-total { order: 2; }
.seat-out > .seat-bar { order: 3; }
.seat-out > .seat-verdict { order: 4; }
.seat-inputs { order: 5; }
.seat-reset { order: 7; }
.seat-out > .seat-notes { order: 8; }
.seat-notes > p:first-child { margin-top: 0.75rem; }
.seat-warn { margin: 0 0 0.6rem; padding: 0.5rem 0.75rem; border-radius: var(--r-s); border: 1.5px dashed var(--muted); font-size: 0.9rem; }
.seat-total { margin: 0 0 0.5rem; font-size: 0.92rem; line-height: 1.35; }
.seat-bar { position: relative; display: flex; gap: 2px; height: 1.75rem; margin: 0; }
.seat-bar span { background: var(--pc); }
.seat-bar span.dim { opacity: 0.28; }
.seat-bar span:first-child { border-radius: 6px 0 0 6px; } .seat-bar span:nth-last-child(2) { border-radius: 0 6px 6px 0; }
.seat-bar .seat-mid { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed var(--ink); background: none; box-shadow: 0 0 0 1.5px var(--surface); }
.seat-verdict { margin: 0.75rem 0 0; padding: 0.45rem 0.7rem; border-radius: var(--r-s); border: 1.5px solid var(--rule); font-weight: 700; font-size: 0.9rem; }
.seat-verdict.yes { border-color: var(--accent); background: var(--accent-soft); }
.seat-verdict.empty { font-weight: 400; color: var(--muted); border-style: dashed; }
.seat-inputs { display: grid; gap: 0.1rem; margin-top: 1rem; }
/* Columns: party, party vote, wins electorate, seats, add up */
.seat-head, .seat-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.8rem 2.6rem 1.9rem 2.2rem; gap: 0 0.3rem; align-items: center; }
.seat-head { padding: 0 0.35rem 0.4rem; margin-bottom: 0.15rem; border-bottom: 1px solid var(--rule); font-size: 0.7rem; font-weight: 700; line-height: 1.2; color: var(--muted); }
.seat-head span:nth-child(3), .seat-head span:nth-child(5) { text-align: center; }
.seat-head span:nth-child(4) { text-align: right; }
.seat-row { padding: 0.15rem 0.35rem; min-height: 2.6rem; border-radius: var(--r-s); }
.seat-row:has(.seat-pick input:checked) { background: var(--accent-soft); }
.seat-vote { display: contents; }
.seat-name { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; font-weight: 700; font-size: 0.88rem; line-height: 1.15; color: var(--tc, var(--ink)); }
.seat-name .sw { display: none !important; }
.seat-name .sw { width: 0.65rem; height: 0.65rem; }
.seat-num { display: inline-flex; align-items: center; gap: 0.15rem; font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.seat-num input { width: 3rem; font: inherit; font-size: 0.9rem; padding: 0.3rem 0.3rem; border: 1.5px solid var(--field); border-radius: var(--r-s); background: var(--paper); color: var(--ink); text-align: right; }
.seat-elec { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.seat-elec label { display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; min-width: 2.25rem; cursor: pointer; }
.seat-elec input[type=checkbox], .seat-pick input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }
.seat-elec input[type=number] { width: 2.5rem; font: inherit; font-size: 0.85rem; padding: 0.15rem 0.3rem; border: 1.5px solid var(--field); border-radius: var(--r-s); background: var(--paper); color: var(--ink); text-align: right; }
.seat-elec input[hidden] { display: none; }
.se-text, .se-party { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seat-won { text-align: right; font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }
.won-unit { display: none; }
.seat-pick { display: flex; justify-content: center; align-items: center; min-height: 2.25rem; cursor: pointer; }
.seat-pick:has(input:disabled) { cursor: default; opacity: 0.4; }
.seat-reset { align-self: flex-start; margin: 1rem 0 0; font: inherit; font-weight: 600; font-size: 0.92rem; padding: 0.4rem 0.95rem; min-height: 40px; border-radius: 999px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; }
.seat-note { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.82rem; }
@media (max-width: 374px) {
  .seat-calc { padding: 0.85rem 0.6rem 1rem; }
  .seat-head, .seat-row { grid-template-columns: minmax(0, 1fr) 3.5rem 2.3rem 1.7rem 2rem; gap: 0 0.25rem; }
  .seat-row, .seat-head { padding-left: 0.25rem; padding-right: 0.25rem; }
  .seat-name { font-size: 0.8rem; gap: 0.3rem; }
  .seat-name .sw { width: 0.55rem; height: 0.55rem; }
  .seat-num input { width: 2.75rem; font-size: 0.85rem; }
  .seat-head { font-size: 0.62rem; }
}
@media (min-width: 720px) {
  .seat-calc { padding: 1.5rem 1.75rem; }
  .seat-total { font-size: 1rem; }
  .seat-bar { height: 2rem; }
  .seat-verdict { font-size: 0.95rem; padding: 0.5rem 0.75rem; }
  .seat-inputs { margin-top: 1.5rem; }
  .seat-head, .seat-row { grid-template-columns: minmax(10rem, 1fr) 6.5rem 7.5rem 3.5rem 4rem; gap: 0 1.25rem; }
  .seat-head { padding: 0 0.5rem 0.5rem; margin-bottom: 0.25rem; font-size: 0.8rem; }
  .seat-head span:nth-child(3) { text-align: left; }
  .seat-row { padding: 0.25rem 0.5rem; }
  .seat-name { font-size: 1rem; gap: 0.5rem; }
  .seat-name .sw { width: 0.85rem; height: 0.85rem; }
  .seat-num { font-size: 1rem; }
  .seat-num input { width: 4.4rem; font-size: 1rem; }
  .seat-elec { flex-direction: row; justify-content: flex-start; gap: 0.5rem; }
  .seat-elec label { justify-content: flex-start; min-width: 0; }
  .seat-won { font-size: 1.15rem; }
  .seat-reset { margin-top: 1.25rem; font-size: 1rem; }
  .seat-note { margin-top: 0.75rem; font-size: 0.85rem; }
}

/* Number boxes: no spinner arrows (they hide the digits on phones); typing and arrow keys still work */
.seat-calc input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.seat-calc input[type=number]::-webkit-inner-spin-button, .seat-calc input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 719px) {
  .seat-head, .seat-row { grid-template-columns: minmax(0, 1fr) 3.5rem 2.6rem 1.8rem 2.1rem; }
  .seat-num { gap: 0.1rem; }
  .seat-num input { width: 2.7rem; }
  .seat-row { min-height: 2.35rem; padding-top: 0.1rem; padding-bottom: 0.1rem; }
  .seat-elec label, .seat-pick { min-height: 2.1rem; }
}
@media (max-width: 374px) {
  .seat-head, .seat-row { grid-template-columns: minmax(0, 1fr) 3.2rem 2.2rem 1.6rem 1.9rem; }
  .seat-num input { width: 2.45rem; }
}
@media (max-width: 389px) {
  .seat-name { font-size: 0.8rem; gap: 0.3rem; }
  .seat-name .sw { width: 0.55rem; height: 0.55rem; }
  .seat-total { font-size: 0.85rem; }
  .seat-verdict { font-size: 0.82rem; }
  .seat-note { font-size: 0.78rem; }
}
@media (max-width: 389px) {
  .seat-head, .seat-row { gap: 0 0.25rem; }
  .seat-name { gap: 0.25rem; }
}
@media (max-width: 374px) {
  .seat-name { font-size: 0.78rem; }
}
@media (max-width: 374px) {
  .seat-head, .seat-row { grid-template-columns: minmax(0, 1fr) 3.2rem 2rem 1.6rem 1.7rem; }
}
@media (min-width: 720px) {
  .seat-head, .seat-row { grid-template-columns: minmax(10rem, 1fr) 6.5rem 7rem 3.5rem 4rem; }
  .seat-head span:nth-child(3) { text-align: center; }
  .seat-elec { justify-content: center; }
}
@media (max-width: 374px) {
  .seat-num input { width: 2.55rem; padding-left: 0.2rem; padding-right: 0.2rem; }
}
.sh-seats, .sh-add { display: block; }
.seat-head span { min-width: 0; hyphens: manual; }
.seat-head span:nth-child(4) { white-space: nowrap; }
@media (max-width: 719px) {
  .seat-head, .seat-row { grid-template-columns: minmax(0, 1fr) 3.5rem 2.5rem 2.1rem 2rem; }
}
@media (max-width: 374px) {
  .seat-head, .seat-row { grid-template-columns: minmax(0, 1fr) 3.2rem 2rem 1.9rem 1.6rem; }
}
@media (max-width: 719px) { .seat-name { font-size: 0.85rem; } }
@media (max-width: 389px) { .seat-name { font-size: 0.8rem; } }
@media (max-width: 374px) { .seat-name { font-size: 0.76rem; } }
@media (max-width: 374px) { .seat-name { font-size: 0.74rem; } .seat-row { min-height: 2.25rem; } }

/* Debates: two per row on tablets and desktop, watch buttons lined up at the bottom of each card */
@media (min-width: 720px) {
  .debate-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .debate-list > li { align-items: stretch; }
  .debate-list > li > div { display: flex; flex-direction: column; align-items: flex-start; }
  .debate-list > li > div .d-video { margin-top: auto; padding-top: 0.35rem; }
  .debate-list > li > div .d-meta + .d-video { margin-top: auto; }
}
@media (min-width: 720px) { .debate-list > li > .cal { align-self: start; } }
@media (min-width: 720px) { .debate-list > li > div > span.d-meta:last-of-type { margin-bottom: 0.6rem; } }

/* ---------- Before you vote: checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: step; }
.checklist li { position: relative; padding: 0.85rem 1rem 0.85rem 3.1rem; background: var(--surface); border-radius: var(--r-m); box-shadow: 0 1px 0 var(--rule); counter-increment: step; line-height: 1.5; }
.checklist li::before { content: counter(step); position: absolute; left: 0.9rem; top: 0.85rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--paper); font-weight: 800; font-size: 0.85rem; display: grid; place-items: center; line-height: 1; }
.checklist li strong { font-weight: 800; }
.checklist a { font-weight: 600; }

.help-box { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: var(--r-m); border: 1.5px solid var(--rule); }
.help-box p { margin: 0; }
.help-title { font-weight: 800; margin-bottom: 0.3rem !important; }
.help-box a { font-weight: 600; }

.timeline li > span { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 720px) {
  #policy-list .party { display: flex; flex-direction: column; }
  #policy-list .party > .show-more { margin-top: auto; align-self: flex-start; }
  #policy-list .party > .pol + .show-more, #policy-list .party > .pol:last-of-type { margin-bottom: 0; }
}
.back-topics { margin: 0.9rem 0 0; }
.back-topics a { font-weight: 600; }

/* ---------- One fold-out marker everywhere: a chevron that turns when opened ---------- */
details.more > summary, .more-rules > summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; }
details.more > summary::-webkit-details-marker, .more-rules > summary::-webkit-details-marker { display: none; }
details.more > summary::before, .more-rules > summary::before { content: ""; flex: none; width: 0.45em; height: 0.45em; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform 0.15s; }
details.more[open] > summary::before, .more-rules[open] > summary::before { transform: rotate(45deg); }
.more-rules > summary { justify-content: flex-start; }
.more-rules > summary::after { content: none; }
@media (prefers-reduced-motion: reduce) { details.more > summary::before, .more-rules > summary::before, .sources summary::before { transition: none; } }

/* How to vote box, now in Before you vote */
#before .howto { margin: 1rem 0 0; }

/* Site name with tagline */
.site-name { flex-wrap: wrap; row-gap: 0; }
.site-tag { font-weight: 500; font-size: 0.78rem; color: var(--lilac); opacity: 0.9; }
.site-tag::before { content: "·"; margin: 0 0.4rem 0 0.1rem; }
@media (max-width: 719px) {
  .site-tag { flex-basis: 100%; padding-left: 1.65rem; font-size: 0.72rem; }
  .site-tag::before { content: none; }
  .top.compact .site-tag { display: none; }
}

/* ---------- Feedback ---------- */
.feedback-box { padding: 1rem 1.1rem; background: var(--surface); border-radius: var(--r-m); box-shadow: 0 1px 0 var(--rule); }
.feedback-box p { margin: 0 0 0.6rem; }
.feedback-box p:last-child { margin: 0; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feedback-actions .d-video { margin-top: 0; padding: 0.5rem 1rem; min-height: 44px; }
.feedback-actions .d-video.alt { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.feedback-box .src-for { font-size: 0.85rem; color: var(--muted); }

/* ---------- Phones: tab bar, one section at a time ---------- */
.tabbar { display: none; }
@media (max-width: 719px) {
  body.tabbed main > [data-tab]:not(.tab-on) { display: none; }
  body.tabbed { padding-bottom: calc(4.1rem + env(safe-area-inset-bottom)); }
  html:has(body.tabbed) { scroll-padding-top: 4.75rem; }
  body.tabbed .top nav, body.tabbed .top .menu-btn, body.tabbed .to-top { display: none !important; }
  body.tabbed .tabbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    background: var(--night); border-top: 1px solid rgba(216, 204, 243, 0.18); padding: 0.25rem 0.15rem calc(0.25rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, 0.5); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12rem; min-height: 3.2rem; border-radius: var(--r-s);
    color: var(--lilac); text-decoration: none; font-size: 0.66rem; font-weight: 600; line-height: 1.1; -webkit-tap-highlight-color: transparent; }
  .tabbar svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; padding: 0.15rem 0.6rem; box-sizing: content-box; border-radius: 999px; }
  .tabbar a[aria-current] { color: #fff; }
  .tabbar a[aria-current] svg { background: rgba(216, 204, 243, 0.2); }
  .tabbar a:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
}
@media (max-width: 719px) {
  /* Fill the space under the footer (behind the tab bar) with the footer colour */
  body.tabbed .foot { box-shadow: 0 calc(4.1rem + env(safe-area-inset-bottom)) 0 0 var(--night); }
}

/* Compact footer */
.foot { margin-top: 3rem; padding: 1.5rem 0 2rem; font-size: 0.8rem; line-height: 1.5; }
.foot p { margin: 0 0 0.5rem; }
.foot p:last-child { margin-bottom: 0; }
#updated { opacity: 0.8; }
.foot strong { color: #fff; font-weight: 700; }
.foot .sep { opacity: 0.6; }
#updated { white-space: nowrap; }

/* ---------- Tab bar: clear current tab, gentle invitation to explore ---------- */
.next-tab { display: none; }
@media (max-width: 719px) {
  body.tabbed .tabbar { padding-top: 0; }
  .tabbar a { position: relative; color: rgba(216, 204, 243, 0.72); transition: color 0.15s; }
  /* Current tab: lit pill, bright label, accent bar on top */
  .tabbar a[aria-current] { color: #fff; font-weight: 800; }
  .tabbar a[aria-current] svg { background: var(--lilac); stroke: var(--night); }
  .tabbar svg { transition: background 0.15s; }
  /* "Up next" card at the end of each tab */
  body.tabbed .next-tab.tab-on { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k a" "t a" "d a"; align-items: center; gap: 0 1rem;
    margin: 2rem 16px 0; padding: 1rem 1.1rem; border-radius: var(--r-l); background: var(--night); color: #fff; text-decoration: none; box-shadow: 0 10px 24px -14px rgba(42, 29, 67, 0.6); }
  .next-tab .nt-kicker { grid-area: k; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lilac); opacity: 0.85; }
  .next-tab .nt-title { grid-area: t; font-size: 1.25rem; font-weight: 800; line-height: 1.2; margin-top: 0.15rem; }
  .next-tab .nt-desc { grid-area: d; font-size: 0.88rem; color: var(--lilac); margin-top: 0.2rem; }
  .next-tab .nt-arrow { grid-area: a; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--lilac); color: var(--night); font-size: 1.3rem; font-weight: 800; }
  .next-tab:active { transform: scale(0.99); }
  .next-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
}
@media (max-width: 719px) { body.tabbed .next-tab.tab-on { border: 1.5px solid rgba(216, 204, 243, 0.35); } }

/* Unread tabs: a small still dot, nothing else */
@media (max-width: 719px) {
  .tabbar a.unseen::after { content: ""; position: absolute; top: 0.4rem; left: calc(50% + 0.7rem); width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 0 2px var(--night); }
}

/* Phones: full footer only on the last tab (Checklist); one short neutrality line on the others */
.mini-foot { display: none; }
@media (max-width: 719px) {
  body.tabbed:not([data-tab="before"]) .foot { display: none; }
  body.tabbed:not([data-tab="before"]) .mini-foot { display: block; margin: 1.5rem 16px 0; padding: 0 0 1rem; text-align: center; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
}

/* Home screen card: phones only, hidden once opened from the home screen */
.a2hs { margin: 1.25rem 0 0; padding: 1rem 1rem 1.05rem; border-radius: var(--r-l); background: var(--night); color: var(--lilac); border: 1px solid rgba(216, 204, 243, 0.14); }
.a2hs-head { display: flex; gap: 0.8rem; align-items: center; }
.a2hs-icon { flex: none; width: 3rem; height: 3rem; border-radius: 22%; box-shadow: 0 0 0 1px rgba(216, 204, 243, 0.25); }
.a2hs-title { margin: 0; font-weight: 800; color: #fff; line-height: 1.3; }
.a2hs-sub { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--lilac-dim); }
.a2hs-switch { display: flex; gap: 0.25rem; margin: 0.9rem 0 0.6rem; padding: 0.2rem; border-radius: 999px; background: var(--night-2); }
.a2hs-switch button { flex: 1; font: inherit; font-size: 0.85rem; font-weight: 700; padding: 0.4rem 0.5rem; border: 0; border-radius: 999px; background: transparent; color: var(--lilac); cursor: pointer; }
.a2hs-switch button { transition: background-color 0.15s, color 0.15s, opacity 0.12s; }
.a2hs-switch button:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
.a2hs-switch button[aria-pressed="true"] { background: var(--lilac); color: #2a1d43; }
.a2hs-steps { margin: 0; padding-left: 1.3rem; font-size: 0.93rem; line-height: 1.5; color: #fff; }
.a2hs-steps li { margin: 0.4rem 0; padding-left: 0.15rem; }
.a2hs-steps li::marker { color: var(--lilac); font-weight: 800; }
.a2hs-key { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.4rem; border-radius: 0.35rem; background: var(--night-2); font-weight: 700; white-space: nowrap; }
.a2hs-key svg { width: 0.95em; height: 0.95em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a2hs-note { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--lilac-dim); }
.a2hs [hidden] { display: none; }
@media (min-width: 720px) { .a2hs { display: none; } }
@media (display-mode: standalone) { .a2hs { display: none; } }

/* Policies: switch between random order and A–Z */
.policy-showing { flex-wrap: wrap; }
.order-toggle { font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0.35rem 0; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.seat-zero { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.poll-note { display: block; font-size: 0.8rem; color: var(--muted); }
.poll-detail .detail-head { display: block; margin-bottom: 0.2rem; }
.detail-avg { list-style: none; margin: 0 0 0.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 0.8rem; color: var(--ink); font-size: 0.86rem; }
.detail-avg li { display: inline-flex; align-items: baseline; gap: 0.3rem; white-space: nowrap; color: var(--tc, var(--ink)); }
.detail-avg b { font-variant-numeric: tabular-nums; }
@media (max-width: 719px) {
  .trend { padding: 0.7rem 0.7rem 0.5rem; }
  .trend-legend { gap: 0.25rem; margin-bottom: 0.4rem; }
  .trend-legend button { font-size: 0.78rem; padding: 0.2rem 0.5rem; gap: 0.3rem; }
  .trend-key { font-size: 0.8rem; }
  .poll-detail { font-size: 0.85rem; margin-top: 0.4rem; padding-top: 0.45rem; }
  .trend-key { margin-top: 0.2rem; }
}

/* Header: Other languages (links to the Electoral Commission's official translations) */
.lang { position: relative; margin-left: auto; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--lilac); padding: 0.3rem 0.7rem; min-height: 36px; border: 1px solid rgba(216, 204, 243, 0.35); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: var(--night-2); color: #fff; }
.lang-panel { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 10; width: min(19rem, calc(100vw - 32px)); padding: 0.8rem 0.9rem; background: var(--surface); color: var(--ink); border: 1.5px solid var(--rule); border-radius: var(--r-m); box-shadow: 0 10px 28px -12px rgba(42, 29, 67, 0.5); }
.lang-note { margin: 0 0 0.5rem; font-size: 0.85rem; line-height: 1.45; color: var(--muted); }
.lang-panel ul { list-style: none; margin: 0; padding: 0; }
.lang-panel li { margin: 0; }
.lang-panel a { display: block; padding: 0.45rem 0; font-weight: 600; font-size: 0.92rem; color: var(--accent); }
.top nav { flex-basis: 100%; }
@media (max-width: 719px) {
  /* Phones: a round globe button, so the name and tagline keep their space */
  .lang summary { width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; }
  .lang summary svg { width: 20px; height: 20px; }
  .lang .l-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-name { flex: 1 1 auto; min-width: 0; }
  .top-inner { flex-wrap: nowrap; align-items: flex-start; }
  body:not(.tabbed) .top-inner { flex-wrap: wrap; }
}

/* Phones: the whole seat calculator (result, bar, table and reset) fits on one screen,
   from small phones (320×568) up. Row height shrinks a little on short screens, never below 34px. */
@media (max-width: 719px) {
  .seat-calc { padding: 0.65rem 0.55rem 0.75rem; }
  .seat-total { margin: 0 0 0.35rem; font-size: 0.82rem; line-height: 1.3; }
  .seat-bar { height: 1.4rem; }
  .seat-bar .seat-mid { top: -4px; bottom: -4px; }
  .seat-verdict { margin: 0.45rem 0 0; padding: 0.3rem 0.55rem; font-size: 0.8rem; line-height: 1.3; }
  .seat-inputs { margin-top: 0.55rem; gap: 0; }
  .seat-head { padding-bottom: 0.25rem; margin-bottom: 0.1rem; }
  .seat-row { min-height: clamp(30px, calc((100svh - 310px) / 9), 42px); padding-top: 0; padding-bottom: 0; }
  .seat-elec label, .seat-pick { min-height: 30px; }
  .seat-num input { padding-top: 0.2rem; padding-bottom: 0.2rem; }
  .seat-won { font-size: 0.95rem; }
  .seat-reset { margin: 0.5rem 0 0; min-height: 34px; padding: 0.2rem 0.8rem; font-size: 0.82rem; }
  .seat-zero, .seat-note { font-size: 0.78rem; margin-top: 0.45rem; }
}
@media (max-width: 719px) and (max-height: 600px) {
  .seat-row { min-height: 28px; }
  .seat-elec label, .seat-pick { min-height: 28px; }
  .seat-inputs { margin-top: 0.4rem; }
  .seat-total { font-size: 0.76rem; margin-bottom: 0.25rem; }
  .seat-bar { height: 1.15rem; }
  .seat-verdict { padding: 0.2rem 0.5rem; font-size: 0.76rem; }
  .seat-head { font-size: 0.58rem; }
  .seat-num input { padding-top: 0.12rem; padding-bottom: 0.12rem; }
  .seat-reset { min-height: 30px; margin-top: 0.4rem; }
}
@media (max-width: 359px) {
  .site-tag { padding-left: 0; font-size: 0.66rem; }
  .seat-name { font-size: 0.72rem; }
  .seat-calc { padding-left: 0.4rem; padding-right: 0.4rem; }
  .seat-head, .seat-row { gap: 0 0.15rem; padding-left: 0.15rem; padding-right: 0.15rem; }
}
/* Phones: tick box and electorate number side by side in one cell, so the tick stays visible and rows keep their height.
   Column widths are set here (after all earlier rules) so the table fits from 320px wide up. */
@media (max-width: 719px) {
  .seat-calc .seat-head, .seat-calc .seat-row { grid-template-columns: minmax(0, 1fr) 3.3rem 3.4rem 1.6rem 1.8rem; gap: 0 0.25rem; }
  .seat-calc .seat-elec { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.2rem; }
  .seat-calc .seat-elec label { min-width: 1.6rem; justify-content: center; }
  .seat-calc .seat-elec input[type=number] { width: 1.85rem; padding: 0.15rem 0.1rem; font-size: 0.82rem; text-align: center; }
  .seat-calc .seat-head span:nth-child(3) { text-align: left; padding-left: 0.15rem; }
  .seat-calc .seat-num input { width: 2.5rem; padding-left: 0.15rem; padding-right: 0.2rem; }
  .seat-calc .seat-name { font-size: 0.8rem; }
  .seat-calc .seat-won { font-size: 0.92rem; }
}
@media (max-width: 374px) {
  .seat-calc .seat-head, .seat-calc .seat-row { grid-template-columns: minmax(0, 1fr) 3rem 3.2rem 1.5rem 1.6rem; gap: 0 0.2rem; }
  .seat-calc .seat-num input { width: 2.3rem; }
  .seat-calc .seat-name { font-size: 0.74rem; }
}
@media (max-width: 339px) {
  .seat-calc .seat-head, .seat-calc .seat-row { grid-template-columns: minmax(0, 1fr) 2.85rem 3.05rem 1.45rem 1.5rem; gap: 0 0.15rem; }
  .seat-calc .seat-num { font-size: 0.78rem; }
  .seat-calc .seat-num input { width: 2.2rem; font-size: 0.8rem; }
  .seat-calc .seat-name { font-size: 0.7rem; }
}

/* Chart details: every poll in the selected average, as one flowing line. */
.detail-pollwrap strong { color: var(--ink); }
.detail-polls { display: inline; list-style: none; margin: 0; padding: 0; }
.detail-polls li { display: inline; }
.detail-polls a { white-space: nowrap; }
@media (max-width: 719px) { .trend-key { font-size: 0.8rem; gap: 0.2rem 0.8rem; } }
.detail-polls li:not(:last-child)::after { content: " · "; color: var(--muted); }
.seat-num input::placeholder { color: var(--muted); opacity: 1; }
/* Watch buttons stay on one line; slightly smaller text on narrow phones so the longest label fits. */
.d-video { white-space: nowrap; max-width: 100%; }
@media (max-width: 389px) { .d-video { font-size: 0.84rem; gap: 0.35rem; padding-right: 0.7rem; } }
@media (max-width: 339px) { .d-video { font-size: 0.8rem; gap: 0.3rem; padding-right: 0.6rem; white-space: normal; } }
/* Election news: a highlighted card under the debates, with one tile per newsroom */
.news-card { margin-top: 1.5rem; }
.news-card .nw-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.news-card .nw-head h3 { margin: 0; font-size: 1.3rem; }
.news-card .nw-icon { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent); color: var(--paper); }
.news-list { list-style: none; margin: 0.6rem 0 0.9rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 720px) { .news-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.news-list a { position: relative; display: flex; align-items: center; min-height: 2.9rem; height: 100%; box-sizing: border-box; padding: 0.5rem 2.3rem 0.5rem 0.85rem; border-radius: var(--r-m); background: var(--paper); border: 1.5px solid var(--rule); color: var(--ink); text-decoration: none; }
.news-list a:hover { border-color: var(--accent); }
.news-list a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.news-list .nw-name { font-weight: 800; font-size: 0.98rem; line-height: 1.25; }
.news-list .nw-go { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.85rem; font-weight: 800; }
@media (max-width: 719px) {
  .news-list a { padding: 0.45rem 2rem 0.45rem 0.7rem; min-height: 2.75rem; }
  .news-list .nw-name { font-size: 0.92rem; }
  .news-list .nw-go { right: 0.45rem; width: 1.35rem; height: 1.35rem; font-size: 0.78rem; }
}
@media (max-width: 389px) {
  .news-list { gap: 0.4rem; }
  .news-list a { padding: 0.4rem 1.75rem 0.4rem 0.6rem; }
  .news-list .nw-name { font-size: 0.86rem; }
  .news-list .nw-go { right: 0.35rem; width: 1.25rem; height: 1.25rem; font-size: 0.72rem; }
}
@media (max-width: 339px) { .news-list .nw-name { font-size: 0.8rem; } .news-list a { padding-right: 1.6rem; } }

/* ---------- Wide desktop (≥1100px): one wider column for the whole page, so cards can sit three across ---------- */
@media (min-width: 1100px) {
  .wrap { max-width: 66rem; }
  .policy-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .debate-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Wide desktop: the MMP video sits beside the two vote cards (narrower screens keep the video above the cards) */
@media (min-width: 1100px) {
  .mmp-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
  .mmp-row .video { margin: 0; }
  .mmp-row .ballots { grid-template-columns: 1fr; margin: 0; }
}
/* Policies: two independent comparison tools, shown as equal cards */
.tools-title { margin-top: 2rem; }
.tools-grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin-bottom: 1rem; }
.tools-grid .tool-card { display: flex; flex-direction: column; align-items: flex-start; }
.tools-grid .tool-card .tool-note { margin-top: auto; }
.tools-grid .tool-card .tool-go { margin-top: 0.75rem; }
@media (min-width: 720px) { .tools-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
/* Sources: a quiet text link under each section; the list opens in a light box */
.sources { margin: 1.25rem 0 0.5rem; padding: 0; border: 0; }
.sources summary { display: inline-flex; font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 0.35rem 0; min-height: 2rem; }
.sources summary:hover { color: var(--accent); }
.sources[open] { padding: 0.6rem 1rem 0.8rem; border: 1.5px solid var(--rule); border-radius: var(--r-m); }
.sources[open] summary { color: var(--accent); }
@media (max-width: 719px) { .sources { margin-top: 1rem; } }
/* Desktop: slightly more compact topic buttons so all 11 fit in two rows */
@media (min-width: 1100px) { .issue-picker { gap: 0.35rem; } .issue-picker button { font-size: 0.88rem; padding: 0.42rem 0.8rem; } }
/* Wide desktop: video + caption and the two vote cards share one height */
@media (min-width: 1100px) {
  .mmp-row { align-items: stretch; }
  .mmp-row .video { display: flex; flex-direction: column; }
  .mmp-row .video figcaption { margin-top: auto; padding-top: 0.5rem; }
  .mmp-row .ballots { grid-template-rows: 1fr 1fr; height: 100%; }
  .mmp-row .ballot { display: flex; flex-direction: column; justify-content: center; }
}

/* Tablets and other touchscreens using the desktop layout: finger-sized targets (a mouse keeps the compact sizes) */
@media (pointer: coarse) and (min-width: 720px) {
  .top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.65rem; }
  .seat-elec input[type=checkbox], .seat-pick input { width: 1.45rem; height: 1.45rem; }
  .seat-elec label, .seat-pick { min-height: 44px; min-width: 44px; }
  .issue-picker button, .show-more, .view-toggle button, .order-toggle { min-height: 44px; }
  .sources summary, details.more > summary { min-height: 44px; }
  .seat-num input { min-height: 40px; font-size: 1rem; }
}

/* Short landscape screens (phones turned sideways): the header shrinks to one row so more of the page shows */
@media (min-width: 720px) and (max-height: 500px) {
  .top-inner { flex-wrap: nowrap; gap: 0 0.6rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
  .site-name { flex: none; }
  .site-tag { display: none; }
  .top nav { flex: 1 1 auto; flex-basis: auto; order: 2; min-width: 0; margin: 0; }
  .lang { order: 3; flex: none; }
  .lang summary { width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; }
  .lang .l-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html { scroll-padding-top: 4.5rem; }
  .top nav a, .top nav a:link { padding: 0 0.42rem; font-size: 0.86rem; min-height: 40px; display: inline-flex; align-items: center; }
  .top nav.more-right { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
/* Seat calculator column labels: never smaller than 12px */
@media (min-width: 340px) and (max-width: 374px) { .seat-calc .seat-head span { font-size: 12px; letter-spacing: -0.01em; } }
/* "How to vote" link: a comfortable tap target on touchscreens */
@media (pointer: coarse) { .howto > a, .howto p > a:only-child { display: inline-flex; align-items: center; min-height: 44px; } }

/* Desktop seat calculator: narrower table with the notes (and Reset) in a column to the right, all on one screen */
@media (min-width: 1100px) {
  .seat-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); column-gap: 2.5rem; align-items: start; padding: 1.25rem 1.75rem 1.35rem; }
  .seat-calc > *, .seat-out > * { grid-column: 1; }
  .seat-out > .seat-notes, .seat-calc > .seat-reset { grid-column: 2; grid-row: 1 / span 8; }
  .seat-out > .seat-notes { align-self: start; padding-left: 1.5rem; border-left: 1px solid var(--rule); }
  .seat-calc > .seat-reset { align-self: end; justify-self: start; margin: 1rem 0 0 1.5rem; }
  .seat-notes > p:first-child { margin-top: 0; }
  .seat-notes p { font-size: 0.85rem; line-height: 1.45; }
  .seat-notes p + p { margin-top: 0.8rem; }
  .seat-verdict { margin-top: 0.6rem; padding: 0.35rem 0.75rem; }
  .seat-inputs { margin-top: 0.75rem; }
  .seat-head, .seat-row { grid-template-columns: minmax(8.5rem, 1fr) 5.25rem 6.75rem 3rem 3.5rem; gap: 0 1rem; }
  .seat-head { padding-bottom: 0.35rem; }
  .seat-row { min-height: 2.1rem; padding-top: 0.05rem; padding-bottom: 0.05rem; }
  .seat-elec label, .seat-pick { min-height: 1.9rem; }
  .seat-num input { width: 3.75rem; padding-top: 0.12rem; padding-bottom: 0.12rem; }
  .seat-elec input[type=number] { padding-top: 0.08rem; padding-bottom: 0.08rem; }
}

/* Site name links back to the top */
.home-link { display: inline-flex; align-items: center; gap: 0.45rem; color: inherit; text-decoration: none; border-radius: var(--r-s); }
.home-link:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }
/* Bigger tap area on touchscreens without making the header taller */
.home-link { position: relative; }
@media (pointer: coarse) { .home-link::after { content: ""; position: absolute; inset: -9px -6px; } }

/* Two-line intro in Policies: keep the lines together */
.lede.lede-first { margin-bottom: 0.5rem; }