@import url(fonts/fonts.css);

/* Newsprint by day, a night edition after dark. The chrome is ink and paper only:
   every colour on the page is data. Bloc colours validated (dataviz validator)
   against both surfaces. */
:root {
  --paper: #f2ede2; --paper-2: #e9e2d3; --ink: #17140f; --ink-2: #4a443a; --muted: #847c6d;
  --rule: #d3cbba; --hair: #e1dacb; --halo: #f2ede2;
  --right: #1d5bbf; --opp: #0b8f80; --left: #cf2a1f; --hung: #a39d90;
  --NAT: #1d5bbf; --LAB: #cf2a1f; --GRN: #2b8c3f; --ACT: #c99a00; --NZF: #3a3631; --TPM: #9b2c6a; --OPP: #0b8f80; --OTH: #9a9488;
  --sw-lab: #c0281f; --sw-lab2: #e7a99d; --sw-mid: #d3ccbd; --sw-nat2: #9ab5e3; --sw-nat: #1d5bbf;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}
:root[data-theme="night"] {
  --paper: #16140f; --paper-2: #1f1c16; --ink: #ede6d6; --ink-2: #c4bba8; --muted: #8f8676;
  --rule: #3a352c; --hair: #2a261f; --halo: #16140f;
  --right: #5b95ea; --opp: #26a796; --left: #ec5f50; --hung: #6d675c;
  --NAT: #5b95ea; --LAB: #ec5f50; --GRN: #4cbc63; --ACT: #e2b93a; --NZF: #b5ad9e; --TPM: #d26aa4; --OPP: #26a796; --OTH: #6f6a60;
  --sw-lab: #ec5f50; --sw-lab2: #8a4a40; --sw-mid: #4a453c; --sw-nat2: #44618f; --sw-nat: #5b95ea;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font: 400 16px/1.5 var(--serif); font-variation-settings: "opsz" 14; -webkit-font-smoothing: antialiased; }
.sheet { max-width: 1180px; margin: 0 auto; padding: 0 28px 64px; }
.mono, .kicker, .tag, button, select { font-family: var(--mono); }
.kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
a { color: inherit; }

/* masthead */
.mast { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; padding: 26px 0 10px; }
.mast h1 { margin: 0; font: 760 clamp(44px, 7vw, 86px)/.86 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 30; letter-spacing: -0.035em; }
.mast h1 em { font-style: italic; font-weight: 380; letter-spacing: -0.02em; }
.mast .edition { text-align: right; font: 11.5px/1.7 var(--mono); color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; }
.mast .edition button { margin-top: 6px; }
.rule2 { border: 0; border-top: 3px solid var(--ink); margin: 0; }
.rule2 + .rule1 { border: 0; border-top: 1px solid var(--ink); margin: 3px 0 0; }
.status { display: flex; flex-wrap: wrap; gap: 6px 26px; padding: 9px 0 0; font: 12px/1.4 var(--mono); color: var(--ink-2); letter-spacing: .04em; }
.status b { color: var(--ink); font-weight: 600; }
.status .live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--left); margin-right: 7px; vertical-align: 1px; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

button, select { font-size: 12px; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 0; padding: 6px 10px; cursor: pointer; letter-spacing: .03em; }
button:hover, select:hover { background: var(--ink); color: var(--paper); }
button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
button:focus-visible, select:focus-visible { outline: 2px solid var(--right); outline-offset: 2px; }
select { padding-right: 26px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select:hover { background-image: linear-gradient(45deg, transparent 50%, var(--paper) 50%), linear-gradient(135deg, var(--paper) 50%, transparent 50%); }
select option, select optgroup { background: var(--paper); color: var(--ink); }

/* section heads */
.head { display: flex; align-items: baseline; gap: 14px; margin: 38px 0 12px; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.head h2 { margin: 0; font: 650 26px/1.1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.01em; }
.head .kicker { margin-left: auto; }

/* the dial */
.front { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--ink); }
.dialbox { position: relative; border-right: 1px solid var(--rule); padding: 18px 18px 6px 0; }
.dialbox .tremble { position: absolute; top: 14px; left: 0; }
.verdict { padding: 22px 0 18px 26px; display: flex; flex-direction: column; }
.verdict .say { font: 640 clamp(30px, 3.6vw, 44px)/1.02 var(--serif); font-variation-settings: "opsz" 120, "SOFT" 50; letter-spacing: -0.02em; margin: 8px 0 10px; }
.verdict .say em { font-style: italic; font-weight: 400; }
.verdict p.dek { margin: 0 0 18px; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.odds { margin-top: auto; }
.odds .row { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); font: 13px/1.2 var(--mono); }
.odds .row:first-child { border-top: 0; }
.odds .sw { width: 12px; height: 12px; }
.odds .p { font: 600 22px/1 var(--serif); font-variation-settings: "opsz" 48; font-variant-numeric: tabular-nums lining-nums; }
.odds .row.lead .p { font-size: 28px; }
.odds .bar { grid-column: 2 / 4; height: 3px; background: var(--hair); margin-top: -2px; }
.odds .bar i { display: block; height: 100%; }

/* party strip */
.strip { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--ink); }
.strip > div { padding: 12px 12px 12px 14px; border-right: 1px solid var(--rule); position: relative; }
.strip > div:last-child { border-right: 0; }
.strip > div::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--c); }
.strip .nm { font: 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.strip .st { font: 700 34px/1 var(--serif); font-variation-settings: "opsz" 96; margin-top: 6px; font-variant-numeric: tabular-nums lining-nums; }
.strip .rg { font: 11.5px/1.3 var(--mono); color: var(--muted); margin-top: 4px; }

/* atlas */
.tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.tools .sep { flex: 1; }
.atlas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.mapwrap { position: relative; border-right: 1px solid var(--rule); height: 720px; overflow: hidden; touch-action: none; cursor: grab; background:
  radial-gradient(circle at 1px 1px, var(--hair) 1px, transparent 1.4px) 0 0 / 22px 22px; }
.mapwrap.dragging { cursor: grabbing; }
.mapwrap svg { width: 100%; height: 100%; display: block; }
.mapwrap .zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.mapwrap .zoom button { width: 32px; height: 32px; padding: 0; font-size: 16px; background: var(--paper); }
.mapwrap .zoom button:hover { background: var(--ink); }
.mapwrap .legend { position: absolute; left: 14px; bottom: 14px; background: color-mix(in srgb, var(--paper) 88%, transparent); padding: 8px 10px; border: 1px solid var(--rule); font: 11px/1.4 var(--mono); color: var(--ink-2); }
.mapwrap .legend .ramp { width: 190px; height: 8px; margin: 5px 0 3px; background: linear-gradient(90deg, var(--sw-lab), var(--sw-lab2), var(--sw-mid), var(--sw-nat2), var(--sw-nat)); }
.mapwrap .legend .ends { display: flex; justify-content: space-between; }
.mapwrap .legend .ring { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--muted); border-radius: 50%; vertical-align: -1px; margin-right: 5px; }
.mapwrap .hint { position: absolute; left: 14px; top: 12px; font: 11px/1.3 var(--mono); color: var(--muted); }
.place { cursor: pointer; }
.elabel { font-family: var(--mono); font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--halo); stroke-linejoin: round; cursor: pointer; text-transform: uppercase; }

.panel { padding: 18px 0 18px 24px; max-height: 720px; overflow: auto; }
.panel h3 { margin: 4px 0 2px; font: 680 30px/1.05 var(--serif); font-variation-settings: "opsz" 96; letter-spacing: -0.015em; }
.panel .meta { font: 12px/1.6 var(--mono); color: var(--ink-2); margin: 6px 0 14px; }
.panel .cand { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.panel .cand .who { font-size: 16px; }
.panel .cand .who small { display: block; font: 11px/1.4 var(--mono); color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.panel .cand .pr { font: 650 24px/1 var(--serif); font-variation-settings: "opsz" 60; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.panel .cand .pr small { display: block; font: 11px/1.4 var(--mono); color: var(--muted); font-weight: 400; }
.panel .cand .bar { grid-column: 1 / 3; height: 6px; background: var(--hair); }
.panel .cand .bar i { display: block; height: 100%; }
.panel .flip { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-top: 1px solid var(--hair); cursor: pointer; }
.panel .flip:hover .n { text-decoration: underline; text-underline-offset: 3px; }
.panel .flip .n { font-size: 16px; }
.panel .flip .m { font: 11.5px/1.4 var(--mono); color: var(--ink-2); }
.panel .flip .p { font: 600 18px/1 var(--serif); align-self: center; font-variant-numeric: tabular-nums lining-nums; }
.chip { display: inline-block; font: 600 10.5px/1 var(--mono); letter-spacing: .06em; padding: 3px 5px 2px; color: #fff; vertical-align: 1px; }
.back { margin-bottom: 8px; }

.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--paper); font: 12px/1.45 var(--mono); padding: 8px 10px; max-width: 280px; opacity: 0; }
.tip b { font-family: var(--serif); font-size: 14px; font-weight: 650; display: block; margin-bottom: 2px; }

footer { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; font-size: 14px; color: var(--ink-2); }
footer h4 { margin: 0 0 4px; font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
footer p { margin: 0; }

@media (max-width: 860px) {
  .sheet { padding: 0 16px 48px; }
  .front, .atlas { grid-template-columns: 1fr; }
  .dialbox { border-right: 0; padding-right: 0; }
  .verdict { padding-left: 0; border-top: 1px solid var(--rule); }
  .strip { grid-template-columns: repeat(4, 1fr); }
  .strip > div:nth-child(4) { border-right: 0; }
  .mapwrap { height: 520px; border-right: 0; }
  .panel { padding-left: 0; max-height: none; }
  footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .status .live::before { animation: none; } }

/* ---------- the forecast (before results) and the handover ---------- */
.lede { margin: 14px 0 0; padding: 12px 0 14px; border-bottom: 1px solid var(--rule); font: 400 19px/1.45 var(--serif); font-variation-settings: "opsz" 36; }
.lede .kicker { display: block; margin-bottom: 4px; }
.lede b { font-weight: 650; }
.odds .row .g { font: 11px/1 var(--mono); color: var(--muted); margin-left: 8px; letter-spacing: .04em; }
.sec-note { margin: -4px 0 14px; color: var(--ink-2); font-size: 15px; max-width: 760px; }
.sec-note b { color: var(--ink); font-weight: 600; }

/* poll chart: National v Labour, then one small panel per party */
.polls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 26px; }
.polls .minor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; }
.pc h4 { margin: 0; font: 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 400; display: flex; gap: 12px; align-items: center; }
.pc h4 .key { display: inline-flex; align-items: center; gap: 5px; }
.pc h4 .key i { display: inline-block; width: 14px; height: 2px; background: var(--c); }
.pc svg { width: 100%; display: block; overflow: visible; }
.pc svg text { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.pc svg text.end { fill: var(--ink); font-weight: 600; font-size: 11.5px; }
.pc svg .hit { fill: transparent; }
details.table { margin-top: 10px; font: 12px/1.5 var(--mono); color: var(--ink-2); }
details.table summary { cursor: pointer; color: var(--muted); letter-spacing: .06em; }
details.table .wrap { max-height: 320px; overflow: auto; margin-top: 6px; }
details.table table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
details.table th, details.table td { text-align: right; padding: 3px 8px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
details.table th:nth-child(-n+2), details.table td:nth-child(-n+2) { text-align: left; }
details.table th { color: var(--muted); font-weight: 400; position: sticky; top: 0; background: var(--paper); }

/* seat ratings */
.rstrip svg { width: 100%; display: block; }
.rstrip svg text { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); letter-spacing: .06em; }
.rstrip .cell { cursor: pointer; }
.rkey { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 11px/1.4 var(--mono); color: var(--ink-2); margin: 8px 0 14px; }
.rkey span { display: inline-flex; align-items: center; gap: 6px; }
.rkey svg { width: 14px; height: 14px; }
.rlists { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 22px; border-top: 1px solid var(--ink); }
.rlists > div { padding-top: 8px; }
.rlists h4 { margin: 0 0 4px; font: 650 19px/1.2 var(--serif); font-variation-settings: "opsz" 48; }
.rlists h4 small { font: 11px var(--mono); color: var(--muted); font-weight: 400; margin-left: 6px; }
.rlists .seat { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--hair); cursor: pointer; font-size: 14.5px; }
.rlists .seat:hover .n { text-decoration: underline; text-underline-offset: 3px; }
.rlists .seat .m { grid-column: 2 / 4; font: 11px/1.3 var(--mono); color: var(--muted); margin-top: -2px; }
.rlists .seat .p { font: 12px var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rlists .compact { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.rlists .compact span { cursor: pointer; white-space: nowrap; }
.rlists .compact span:hover { text-decoration: underline; }
.gain { font: 600 10px/1 var(--mono); letter-spacing: .06em; color: var(--ink); border: 1px solid var(--ink); padding: 2px 4px 1px; margin-left: 4px; vertical-align: 1px; }

/* scenarios */
.outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.outs .o { padding: 12px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.outs .o + .o { padding-left: 16px; border-left: 1px solid var(--rule); }
.outs .o:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.outs .o.dim { opacity: .62; }
.outs .o.now { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.outs .grade { font: 700 30px/1 var(--serif); font-variation-settings: "opsz" 96; letter-spacing: -0.01em; }
.outs .grade small { font: 12px var(--mono); color: var(--muted); font-weight: 400; margin-left: 6px; letter-spacing: .04em; }
.outs h4 { margin: 6px 0 4px; font: 620 17px/1.2 var(--serif); font-variation-settings: "opsz" 36; }
.outs .bar { height: 6px; background: var(--hair); margin: 6px 0 8px; position: relative; }
.outs .bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.outs .bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.outs p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.outs .ks { margin-top: 8px; font: 11px/1.5 var(--mono); color: var(--muted); }
.outs .ks span { color: var(--ink-2); }
.outs .live { font: 12px var(--mono); color: var(--ink); margin-top: 6px; }
h3.sub { margin: 26px 0 8px; font: 650 20px/1.2 var(--serif); font-variation-settings: "opsz" 48; }
.named .row { display: grid; grid-template-columns: minmax(0, 1.25fr) 104px minmax(0, 1.4fr) 92px; gap: 6px 18px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hair); }
.named .row.head { font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--ink); padding: 6px 0; }
.named .row.now { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.named .nm { font-size: 16px; }
.named .nm small { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.named .gr { font: 650 20px/1 var(--serif); font-variation-settings: "opsz" 48; }
.named .gr small { display: block; font: 11px var(--mono); color: var(--muted); font-weight: 400; margin-top: 3px; }
.named .mix svg { width: 100%; height: 12px; display: block; }
.named .mix .t { font: 11px/1.4 var(--mono); color: var(--muted); margin-top: 3px; }
.named .lv { font: 600 16px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.named .lv small { display: block; font: 10.5px var(--mono); color: var(--muted); font-weight: 400; }
.mixkey { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 11px/1.4 var(--mono); color: var(--ink-2); margin: 8px 0 0; }
.mixkey span { display: inline-flex; gap: 6px; align-items: center; }
.mixkey svg { width: 14px; height: 10px; }

/* tracking (live) */
.track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; border-top: 1px solid var(--ink); padding-top: 10px; }
.track .say2 { font: 620 26px/1.15 var(--serif); font-variation-settings: "opsz" 72; margin: 4px 0 8px; }
.track .say2 em { font-style: italic; font-weight: 400; }
.track .tr { display: grid; grid-template-columns: minmax(0, 1fr) 62px 62px; gap: 2px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 14.5px; }
.track .tr.h { font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.track .tr .v { font: 13px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.track .tr .v.now { font-weight: 600; }
.track .tr .bar { grid-column: 1 / 4; height: 3px; background: var(--hair); position: relative; }
.track .tr .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.track .tr .bar b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--muted); }

@media (max-width: 860px) {
  .polls { grid-template-columns: 1fr; }
  .polls .minor { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
  .rlists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outs .o:nth-child(4n+1) { padding-left: 16px; border-left: 1px solid var(--rule); }
  .outs .o:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .named .row { grid-template-columns: minmax(0, 1fr) 90px; }
  .named .row .mix { grid-column: 1 / 3; }
  .named .row .lv { grid-column: 1 / 3; text-align: left; }
  .named .row.head { display: none; }
  .track { grid-template-columns: 1fr; }
}
.pc.hx table td, .pc.hx table th { padding: 3px 6px; }
@media (max-width: 860px) {
  .head { flex-wrap: wrap; }
  .head .kicker { margin-left: 0; flex-basis: 100%; }
  .polls .minor .hx { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .rlists { grid-template-columns: 1fr; } }