/* ========================================================================== Seat Tracker (pollcheck.co.uk/seat-tracker) Scoped to body.seat-tracker. Consumes design tokens from css/p2n.css, so the page's must also carry class "p2n" (light only - the swingometer_theme dark key is deliberately NOT wired on this page). Prefix: .st-* Fidelity: high. Values follow the design handoff exactly. ========================================================================== */ body.seat-tracker { /* White/neutral surfaces to match gb-polls (page #FAFAFA, cards #FFF), instead of the p2n cream palette. Remapped here so every var(--p2n-*) surface flips in one place; party colours, ink and accent are untouched. */ --st-canvas: var(--pc-bg); --p2n-bg: var(--pc-bg); /* page surface (white default) */ --p2n-panel: var(--pc-surface); /* cards / panels */ --p2n-tint: var(--pc-tint); /* inset fills - fields, chips, hovers, tracks */ --p2n-border: var(--pc-border); /* card/section borders */ --p2n-hairline: var(--pc-border-light); /* table rows, grid cells */ --p2n-control: #D0D0D0; /* form control borders */ --p2n-crosshair: var(--pc-nc); /* dashed event rule */ /* Direction colours (p2n exposes positive/negative; alias for clarity) */ --st-pos: var(--p2n-positive); /* #2A9D2A */ --st-neg: var(--p2n-negative); /* #C0392B */ --st-zero: var(--p2n-faint); /* #999999 */ background: var(--st-canvas); color: var(--p2n-body); font-family: var(--p2n-sans); -webkit-font-smoothing: antialiased; } /* ---- Page container ---------------------------------------------------- Full-width, matching gb-polls' .gbp-wrap (no max-width; prose blocks keep their own max-widths so long-form copy stays readable). */ body.seat-tracker .st-wrap { padding: 48px 32px 64px; background: var(--p2n-bg); } /* ---- Shared section header (kicker / h2 / lede) ------------------------ */ body.seat-tracker .st-kicker { font-family: var(--p2n-sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--p2n-muted); margin: 0 0 8px; } body.seat-tracker .st-h2 { font-family: var(--p2n-serif); font-size: 23px; font-weight: 700; line-height: 1.2; color: var(--p2n-ink); margin: 0; text-wrap: pretty; } body.seat-tracker .st-h3 { font-family: var(--p2n-serif); font-size: 18px; font-weight: 700; color: var(--p2n-ink); margin: 0; } body.seat-tracker .st-lede { font-family: var(--p2n-sans); font-size: 12px; line-height: 1.5; color: var(--p2n-secondary2); max-width: 640px; margin: 6px 0 18px; text-wrap: pretty; } /* Section rhythm: default gap above each section is 52px; a couple differ. */ body.seat-tracker .st-section { margin-top: 52px; } body.seat-tracker .st-section--hero { margin-top: 28px; } body.seat-tracker .st-section--swing { margin-top: 40px; } /* Tabular numerals everywhere numbers appear */ body.seat-tracker .st-num, body.seat-tracker [class*="st-"] .st-num { font-variant-numeric: tabular-nums; } /* ========================================================================== 1 - Masthead ========================================================================== */ body.seat-tracker .st-masthead-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--p2n-ink); border-top: 3px solid var(--p2n-ink); padding-top: 10px; margin: 0; } body.seat-tracker .st-masthead-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } body.seat-tracker .st-h1 { font-family: var(--p2n-serif); font-size: 40px; font-weight: 700; line-height: 1.06; letter-spacing: -0.015em; color: var(--p2n-headline); margin: 12px 0 0; text-wrap: pretty; } body.seat-tracker .st-asof { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--p2n-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } body.seat-tracker .st-standfirst { font-family: var(--p2n-serif); font-size: 17px; line-height: 1.5; color: var(--p2n-headline); /* near-black lead paragraph (reads stronger on white) */ max-width: 680px; margin: 14px 0 0; text-wrap: pretty; } body.seat-tracker .st-standfirst strong { color: var(--p2n-ink); } body.seat-tracker .st-differentiator { font-size: 12px; color: var(--p2n-secondary2); margin: 10px 0 0; max-width: 680px; } /* Links - scoped to page content only, so the shared nav/footer keep their own styling (a broad `body.seat-tracker a` was turning the navbar red). :where() keeps specificity low so .st-chip / button links still win. */ body.seat-tracker :where(.st-wrap) a { color: var(--p2n-accent); text-decoration: underline; text-underline-offset: 2px; } body.seat-tracker :where(.st-wrap) a:hover { color: var(--p2n-ink); } /* ========================================================================== 2 - Hero: full-width Commons bar ========================================================================== */ body.seat-tracker .st-hero-labelrow { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--p2n-muted); } body.seat-tracker .st-hero-bar { position: relative; display: flex; height: 76px; border: 1px solid var(--p2n-ink); } body.seat-tracker .st-hero-seg { display: flex; align-items: center; justify-content: center; color: var(--p2n-on-ink); font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; min-width: 0; } body.seat-tracker .st-hero-seg--ld { color: #4a3600; } /* white fails contrast on yellow */ /* segment label sizes step down with width */ body.seat-tracker .st-hero-seg.is-lab { font-size: 22px; } body.seat-tracker .st-hero-seg.is-ref, body.seat-tracker .st-hero-seg.is-con { font-size: 20px; } body.seat-tracker .st-hero-seg.is-ld { font-size: 18px; } body.seat-tracker .st-hero-seg.is-snp { font-size: 15px; } body.seat-tracker .st-hero-seg.is-nolabel { font-size: 0; } /* Green/Plaid/Others: no label */ /* majority marker */ body.seat-tracker .st-majority-rule { position: absolute; top: -8px; bottom: -8px; left: 50.15%; /* 326 / 650 */ width: 2px; background: var(--p2n-ink); transform: translateX(-1px); z-index: 2; } body.seat-tracker .st-majority-cap { position: absolute; top: 0; left: 50.15%; transform: translateX(-50%); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--p2n-ink); background: var(--p2n-bg); padding: 0 8px; white-space: nowrap; z-index: 3; } /* hero wrapper needs headroom for the caption */ body.seat-tracker .st-hero-barwrap { position: relative; padding-top: 22px; } /* hero legend */ body.seat-tracker .st-hero-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; } body.seat-tracker .st-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--p2n-secondary); font-variant-numeric: tabular-nums; } body.seat-tracker .st-swatch { width: 9px; height: 9px; flex: 0 0 9px; display: inline-block; } body.seat-tracker .st-chg { font-weight: 700; } body.seat-tracker .st-chg--up { color: var(--st-pos); } body.seat-tracker .st-chg--down { color: var(--st-neg); } body.seat-tracker .st-chg--flat { color: var(--st-zero); } /* ========================================================================== 3 - Swingometer panel (black) ========================================================================== */ /* Editorial swingometer signpost: crisp bordered panel on the cream page, accent kicker + serif heading + dark button. Prominent but not a loud box. */ body.seat-tracker .st-swing-cta { background: var(--p2n-panel); border: 1px solid var(--p2n-ink); border-left: 4px solid var(--p2n-accent); padding: 24px 28px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; } body.seat-tracker .st-swing-cta-kicker { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--p2n-accent); margin: 0 0 8px; } body.seat-tracker .st-swing-cta-h { font-family: var(--p2n-serif); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--p2n-ink); margin: 0 0 8px; text-wrap: pretty; } body.seat-tracker .st-swing-cta-body { font-size: 13px; line-height: 1.55; color: var(--p2n-secondary2); max-width: 640px; margin: 0; } body.seat-tracker .st-swing-cta-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--p2n-ink); color: var(--p2n-on-ink); font-family: var(--p2n-sans); font-size: 14px; font-weight: 600; padding: 13px 22px; border-radius: 2px; text-decoration: none; transition: background 150ms; } body.seat-tracker .st-swing-cta-btn:hover { background: var(--p2n-accent); color: var(--p2n-on-ink); } body.seat-tracker .st-btn-yellow { display: inline-flex; align-items: center; gap: 8px; background: var(--p2n-ld); color: var(--p2n-ink); font-family: var(--p2n-sans); font-size: 15px; font-weight: 700; padding: 15px 24px; border: none; border-radius: 0; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 150ms; } body.seat-tracker .st-btn-yellow .st-arrow { font-size: 17px; } body.seat-tracker .st-btn-yellow:hover { background: var(--p2n-panel); color: var(--p2n-ink); } /* ========================================================================== 4 - Find your seat ========================================================================== */ body.seat-tracker .st-search-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; } body.seat-tracker .st-search-input { flex: 1 1 340px; max-width: 420px; font-family: var(--p2n-sans); font-size: 14px; background: var(--p2n-panel); border: 1px solid var(--p2n-control); border-radius: 2px; padding: 11px 13px; color: var(--p2n-body); } body.seat-tracker .st-btn-dark { background: var(--p2n-ink); color: var(--p2n-on-ink); font-family: var(--p2n-sans); font-size: 13px; font-weight: 600; padding: 11px 20px; border: 1px solid var(--p2n-ink); border-radius: 2px; cursor: pointer; transition: background 150ms, border-color 150ms; text-decoration: none; display: inline-flex; align-items: center; } body.seat-tracker .st-btn-dark:hover { background: var(--p2n-accent); border-color: var(--p2n-accent); color: var(--p2n-on-ink); } body.seat-tracker .st-bellwether-label { font-size: 12px; color: var(--p2n-secondary2); margin: 16px 0 8px; } body.seat-tracker .st-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } body.seat-tracker .st-chip { font-size: 13px; color: var(--p2n-body); background: var(--p2n-panel); border: 1px solid var(--p2n-control); border-radius: 2px; padding: 6px 12px; text-decoration: none; cursor: pointer; transition: border-color 150ms, color 150ms; } body.seat-tracker .st-chip:hover { border-color: var(--p2n-ink); color: var(--p2n-ink); } body.seat-tracker .st-chip-link { font-size: 13px; color: var(--p2n-secondary); text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================== Generic card ========================================================================== */ body.seat-tracker .st-card { background: var(--p2n-panel); border: 1px solid var(--p2n-border); } /* ========================================================================== 5 - Trend chart ========================================================================== */ body.seat-tracker .st-chart-controls { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } body.seat-tracker .st-ctrl-group { display: flex; flex-wrap: wrap; gap: 6px; } body.seat-tracker .st-ctrl { font-family: var(--p2n-sans); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 2px; background: var(--p2n-panel); border: 1px solid var(--p2n-control); color: var(--p2n-body); cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms; } /* range group: active is orange */ body.seat-tracker .st-ctrl--range.is-active { background: var(--p2n-accent); border-color: var(--p2n-accent); color: var(--p2n-on-ink); } /* metric group: active is ink */ body.seat-tracker .st-ctrl--metric.is-active { background: var(--p2n-ink); border-color: var(--p2n-ink); color: var(--p2n-on-ink); } /* Chart sits bare on the page (gb-polls manner) - no card border/fill. */ body.seat-tracker .st-chart-card { background: transparent; border: none; padding: 0; } body.seat-tracker .st-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; } body.seat-tracker .st-chart-count { font-size: 12px; color: var(--p2n-muted); font-variant-numeric: tabular-nums; } /* One chips row only (the chart's end-labels are the on-plot legend). */ body.seat-tracker #seatLegendMobile { display: none; } body.seat-tracker .st-chart-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } body.seat-tracker .st-chart-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border: 1px solid var(--p2n-border); border-radius: 3px; padding: 5px 10px; background: var(--p2n-tint); } body.seat-tracker .st-chart-chip .st-chip-name { color: var(--p2n-secondary); } body.seat-tracker .st-chart-chip .st-chip-seats { font-weight: 700; color: var(--p2n-ink); font-variant-numeric: tabular-nums; } body.seat-tracker .st-chart-caption { font-size: 11px; color: var(--p2n-muted); margin: 10px 0 0; } /* Per-party seat change over the selected range (below the chips). */ body.seat-tracker .st-range-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; font-size: 12px; color: var(--p2n-secondary); font-variant-numeric: tabular-nums; } body.seat-tracker .st-range-delta:empty { display: none; } body.seat-tracker .st-rd-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--p2n-muted); } body.seat-tracker .st-rd-item { display: inline-flex; align-items: center; gap: 6px; } body.seat-tracker .st-rd-item b { font-weight: 700; } /* ========================================================================== 6 - Momentum grid ========================================================================== */ body.seat-tracker .st-momentum { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--p2n-border); } body.seat-tracker .st-mom-cell { background: var(--p2n-panel); border-right: 1px solid var(--p2n-hairline); border-bottom: 1px solid var(--p2n-hairline); padding: 14px 16px; } body.seat-tracker .st-mom-head { display: flex; align-items: center; gap: 7px; } body.seat-tracker .st-mom-party { font-size: 12px; font-weight: 700; color: var(--p2n-ink); } body.seat-tracker .st-mom-figure { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; } body.seat-tracker .st-mom-seats { font-size: 30px; font-weight: 700; color: var(--p2n-headline); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } body.seat-tracker .st-mom-chg { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } body.seat-tracker .st-mom-label { font-size: 11px; color: var(--p2n-muted); } body.seat-tracker .st-mom-spark { display: block; margin-top: 8px; width: 100%; height: auto; } /* ========================================================================== 7 - Poll picker + projection panel ========================================================================== */ body.seat-tracker .st-poll-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } body.seat-tracker .st-poll-card { background: var(--p2n-panel); border: 1px solid var(--p2n-border); padding: 14px 16px; cursor: pointer; transition: border-color 150ms; } body.seat-tracker .st-poll-card:hover { border-color: var(--p2n-ink); } body.seat-tracker .st-poll-card.selected { background: var(--p2n-tint); border: 1px solid var(--p2n-ink); box-shadow: inset 0 0 0 1px var(--p2n-ink); } /* Custom "build your own" card variant */ body.seat-tracker .st-poll-custom { cursor: default; display: flex; flex-direction: column; gap: 8px; } body.seat-tracker .st-poll-custom:hover { border-color: var(--p2n-border); } body.seat-tracker .st-poll-custom .st-pc-title { font-size: 14px; font-weight: 700; color: var(--p2n-ink); } body.seat-tracker .st-poll-custom .st-pc-desc { font-size: 12px; color: var(--p2n-secondary2); line-height: 1.45; } body.seat-tracker .st-poll-custom .st-btn-dark { margin-top: auto; align-self: flex-start; } body.seat-tracker .st-poll-card:focus-visible { outline: 2px solid var(--p2n-accent); outline-offset: 2px; } body.seat-tracker .st-poll-cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } body.seat-tracker .st-poll-pollster { font-size: 13px; font-weight: 700; color: var(--p2n-ink); } body.seat-tracker .st-poll-dates { font-size: 11px; color: var(--p2n-muted); font-variant-numeric: tabular-nums; } body.seat-tracker .st-vshare-bar { display: flex; height: 8px; margin: 10px 0 8px; overflow: hidden; } body.seat-tracker .st-vshare-seg { height: 100%; } body.seat-tracker .st-vshare-row { font-size: 11px; color: var(--p2n-secondary); font-variant-numeric: tabular-nums; } body.seat-tracker .st-poll-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--p2n-hairline); } body.seat-tracker .st-poll-leader { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p2n-muted); } body.seat-tracker .st-poll-seats { font-size: 20px; font-weight: 700; color: var(--p2n-ink); font-variant-numeric: tabular-nums; } body.seat-tracker .st-poll-gap { font-size: 11px; color: var(--p2n-accent); margin-top: 4px; } body.seat-tracker .st-poll-gap--maj { color: var(--st-pos); } body.seat-tracker .st-poll-delta { font-size: 11px; color: var(--p2n-muted); margin-top: 4px; } body.seat-tracker .st-poll-delta b { font-weight: 700; } /* projection panel */ body.seat-tracker .st-proj { background: var(--p2n-panel); border: 1px solid var(--p2n-ink); padding: 20px 22px; margin-top: 18px; } body.seat-tracker .st-proj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } body.seat-tracker .st-proj-h3 { font-family: var(--p2n-serif); font-size: 20px; font-weight: 700; color: var(--p2n-ink); margin: 4px 0 0; } body.seat-tracker .st-proj-meta { font-size: 12px; color: var(--p2n-secondary2); margin: 4px 0 0; font-variant-numeric: tabular-nums; } body.seat-tracker .st-proj-right { text-align: right; } body.seat-tracker .st-proj-leader { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p2n-muted); } body.seat-tracker .st-proj-seats { font-size: 40px; font-weight: 700; color: var(--p2n-ink); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } body.seat-tracker .st-proj-gap { font-size: 13px; color: var(--p2n-accent); font-variant-numeric: tabular-nums; } body.seat-tracker .st-proj-gap--maj { color: var(--st-pos); } body.seat-tracker .st-proj-bar { position: relative; display: flex; height: 44px; border: 1px solid var(--p2n-ink); margin: 16px 0 8px; } body.seat-tracker .st-proj-colhead { text-align: right; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p2n-muted); margin: 14px 0 8px; } body.seat-tracker .st-proj-colhead-em { color: var(--p2n-accent); } body.seat-tracker .st-proj-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 24px; } body.seat-tracker .st-proj-row { display: grid; grid-template-columns: 96px 1fr 40px 44px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--p2n-hairline); font-variant-numeric: tabular-nums; } body.seat-tracker .st-proj-rowname { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--p2n-body); } body.seat-tracker .st-proj-track { height: 10px; background: var(--p2n-tint); position: relative; overflow: hidden; } body.seat-tracker .st-proj-fill { display: block; height: 100%; } body.seat-tracker .st-proj-rowseats { text-align: right; font-size: 13px; font-weight: 700; color: var(--p2n-ink); } body.seat-tracker .st-proj-rowchg { text-align: right; font-size: 12px; font-weight: 600; } body.seat-tracker .st-proj-caption { font-size: 11px; color: var(--p2n-muted); margin: 12px 0 0; } /* second swingometer signpost strip */ body.seat-tracker .st-signpost { background: var(--p2n-tint); border: 1px solid var(--p2n-ink); padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; } body.seat-tracker .st-signpost-text { font-size: 13px; color: var(--p2n-body); } body.seat-tracker .st-btn-dark--sm { padding: 10px 18px; font-size: 13px; font-weight: 700; } body.seat-tracker .st-sampling-note { font-size: 11px; color: var(--p2n-muted); margin: 14px 0 0; } /* Basis badge: what a section's numbers are computed from (poll vs 7-poll avg). */ body.seat-tracker .st-basis { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px; background: var(--p2n-tint); border: 1px solid var(--p2n-border); border-left: 3px solid var(--p2n-accent); border-radius: 2px; font-size: 11px; font-weight: 600; color: var(--p2n-body); } body.seat-tracker .st-basis:empty { display: none; } body.seat-tracker .st-basis .st-basis-k { text-transform: uppercase; letter-spacing: 0.08em; color: var(--p2n-muted); font-size: 10px; font-weight: 700; } body.seat-tracker .st-basis b { font-weight: 700; color: var(--p2n-ink); } /* ========================================================================== 8 - Change since GE2024 ========================================================================== */ body.seat-tracker .st-diverge { } body.seat-tracker .st-div-row { display: grid; grid-template-columns: 120px 1fr 1fr 64px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--p2n-hairline); } body.seat-tracker .st-div-name { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--p2n-body); } body.seat-tracker .st-div-loss { display: flex; justify-content: flex-end; align-items: center; gap: 6px; } body.seat-tracker .st-div-gain { display: flex; justify-content: flex-start; align-items: center; gap: 6px; border-left: 1px solid var(--p2n-border); } body.seat-tracker .st-div-bar { display: block; height: 14px; flex: 0 0 auto; } body.seat-tracker .st-div-val { font-size: 12px; color: var(--p2n-muted); flex: 0 0 auto; } body.seat-tracker .st-div-chg { text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } body.seat-tracker .st-summary-table { width: 100%; border-collapse: collapse; margin-top: 22px; font-variant-numeric: tabular-nums; } body.seat-tracker .st-summary-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p2n-muted); border-bottom: 2px solid var(--p2n-ink); padding: 8px; text-align: right; } body.seat-tracker .st-summary-table th:first-child { text-align: left; } body.seat-tracker .st-summary-table td { font-size: 13px; padding: 8px; border-bottom: 1px solid var(--p2n-hairline); text-align: right; } body.seat-tracker .st-summary-table td:first-child { text-align: left; } body.seat-tracker .st-summary-table .st-td-proj { font-weight: 700; color: var(--p2n-ink); } body.seat-tracker .st-summary-table .st-td-chg { font-weight: 700; } /* ========================================================================== 9 - All constituencies (filters + table) ========================================================================== */ body.seat-tracker .st-filter-card { background: var(--p2n-panel); border: 1px solid var(--p2n-border); padding: 18px 20px; } body.seat-tracker .st-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } body.seat-tracker .st-field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--p2n-muted); margin: 0 0 5px; display: block; } body.seat-tracker .st-field { width: 100%; font-family: var(--p2n-sans); font-size: 13px; background: var(--p2n-tint); /* inset fill, reads against white card */ border: 1px solid var(--p2n-control); border-radius: 2px; padding: 8px 10px; color: var(--p2n-body); } body.seat-tracker .st-filter-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--p2n-hairline); } body.seat-tracker .st-filter-count { font-size: 13px; color: var(--p2n-secondary); } body.seat-tracker .st-filter-count b { font-weight: 700; color: var(--p2n-ink); font-variant-numeric: tabular-nums; } body.seat-tracker .st-filter-actions { display: flex; gap: 8px; } body.seat-tracker .st-btn-outline { background: var(--p2n-panel); color: var(--p2n-body); border: 1px solid var(--p2n-control); border-radius: 2px; font-size: 13px; font-weight: 600; padding: 8px 16px; cursor: pointer; transition: border-color 150ms, color 150ms; } body.seat-tracker .st-btn-outline:hover { border-color: var(--p2n-ink); color: var(--p2n-ink); } body.seat-tracker .st-const-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; font-variant-numeric: tabular-nums; } body.seat-tracker .st-const-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p2n-muted); border-bottom: 2px solid var(--p2n-ink); padding: 9px; text-align: left; } body.seat-tracker .st-const-table td { padding: 9px; border-bottom: 1px solid var(--p2n-hairline); } body.seat-tracker .st-const-table tbody tr:hover { background: var(--p2n-tint); } body.seat-tracker .st-const-table .st-col-const { color: var(--p2n-ink); } body.seat-tracker .st-const-table .st-col-region { color: var(--p2n-secondary2); } body.seat-tracker .st-const-table .st-col-2024 { color: var(--p2n-secondary2); } body.seat-tracker .st-const-table .st-col-margin { text-align: right; } body.seat-tracker .st-const-table .st-col-change { text-align: right; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } body.seat-tracker .st-col-change.is-hold { color: var(--p2n-muted); } body.seat-tracker .st-const-winner { display: inline-flex; align-items: center; gap: 7px; } /* ========================================================================== 10 & 11 - Methodology + FAQ (details/summary accordions) ========================================================================== */ body.seat-tracker .st-method { } body.seat-tracker .st-method details { border-top: 1px solid var(--p2n-hairline); } body.seat-tracker .st-method details:last-of-type { border-bottom: 1px solid var(--p2n-hairline); } body.seat-tracker .st-method summary { font-family: var(--p2n-serif); font-size: 16px; font-weight: 700; color: var(--p2n-ink); padding: 16px 0; cursor: pointer; list-style: none; } body.seat-tracker .st-method summary::-webkit-details-marker { display: none; } body.seat-tracker .st-method .st-method-body { font-size: 14px; line-height: 1.6; color: var(--p2n-body2); max-width: 640px; padding-bottom: 16px; } body.seat-tracker .st-faq details { background: var(--p2n-panel); border-top: 1px solid var(--p2n-hairline); } body.seat-tracker .st-faq details:last-of-type { border-bottom: 1px solid var(--p2n-hairline); } body.seat-tracker .st-faq summary { font-family: var(--p2n-sans); font-size: 15px; font-weight: 700; color: var(--p2n-ink); padding: 15px 18px; cursor: pointer; list-style: none; } body.seat-tracker .st-faq summary::-webkit-details-marker { display: none; } body.seat-tracker .st-faq .st-faq-body { font-size: 14px; line-height: 1.6; color: var(--p2n-body2); max-width: 680px; padding: 0 18px 16px; } /* ========================================================================== 12 - Footer note ========================================================================== */ body.seat-tracker .st-footnote { font-size: 11px; line-height: 1.7; color: var(--p2n-faint); max-width: 720px; margin-top: 52px; border-top: 1px solid var(--p2n-border); padding-top: 18px; } /* Mobile-only blocks are hidden by default (desktop). Declared BEFORE the media query so the query's display:block wins at <=768px (equal specificity). */ body.seat-tracker .st-hero-mobile { display: none; } body.seat-tracker .st-const-stacked { display: none; } /* ========================================================================== Responsive - single breakpoint at 768px (1e mobile) ========================================================================== */ @media (max-width: 768px) { body.seat-tracker .st-wrap { padding: 24px 16px 40px; } /* Masthead */ body.seat-tracker .st-masthead-kicker { font-size: 11px; } body.seat-tracker .st-masthead-row { flex-direction: column; gap: 6px; } body.seat-tracker .st-h1 { font-size: 28px; line-height: 1.08; } body.seat-tracker .st-standfirst { font-size: 15px; } /* Hero -> horizontal rows */ body.seat-tracker .st-hero-bar { display: none; } body.seat-tracker .st-hero-barwrap .st-majority-cap, body.seat-tracker .st-hero-barwrap > .st-majority-rule { display: none; } body.seat-tracker .st-hero-mobile { display: block; } body.seat-tracker .st-hero-numblock { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } body.seat-tracker .st-hero-bignum { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--p2n-headline); font-variant-numeric: tabular-nums; } body.seat-tracker .st-hero-bigparty { font-family: var(--p2n-serif); font-size: 17px; color: var(--p2n-ink); } body.seat-tracker .st-hero-biggap { margin-left: auto; text-align: right; font-size: 12px; color: var(--p2n-secondary2); font-variant-numeric: tabular-nums; } body.seat-tracker .st-hero-mrow { display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 10px; padding: 3px 0; } body.seat-tracker .st-hero-mlabel { font-size: 12px; color: var(--p2n-secondary); } body.seat-tracker .st-hero-mtrack { position: relative; height: 20px; background: var(--p2n-tint); overflow: hidden; } body.seat-tracker .st-hero-mfill { display: block; height: 100%; } body.seat-tracker .st-hero-mmaj { position: absolute; top: 0; bottom: 0; left: 50.15%; width: 2px; background: var(--p2n-ink); } body.seat-tracker .st-hero-mseats { text-align: right; font-size: 13px; font-weight: 700; color: var(--p2n-ink); font-variant-numeric: tabular-nums; } /* Swingometer callout stacks; full-width button */ body.seat-tracker .st-swing-cta { grid-template-columns: 1fr; gap: 16px; padding: 20px; } body.seat-tracker .st-swing-cta-btn { width: 100%; justify-content: center; } /* Section headers smaller */ body.seat-tracker .st-kicker { font-size: 10px; } body.seat-tracker .st-h2 { font-size: 19px; } /* Find your seat full-width */ body.seat-tracker .st-search-input { flex: 1 1 100%; max-width: none; font-size: 15px; padding: 13px 14px; } body.seat-tracker .st-btn-dark { width: 100%; justify-content: center; font-size: 15px; padding: 14px 20px; } /* Momentum -> 2 cols */ body.seat-tracker .st-momentum { grid-template-columns: repeat(2, 1fr); } body.seat-tracker .st-mom-seats { font-size: 26px; } /* Poll picker stacked */ body.seat-tracker .st-poll-grid { grid-template-columns: 1fr; gap: 10px; } body.seat-tracker .st-proj-rows { grid-template-columns: 1fr; } body.seat-tracker .st-proj-row { grid-template-columns: 1fr 38px 42px; } body.seat-tracker .st-proj-row .st-proj-rowname { grid-column: 1 / -1; } /* Range controls bigger touch targets */ body.seat-tracker .st-ctrl { font-size: 14px; padding: 9px 14px; } /* Constituency table: drop the secondary "2024" column (2nd) so the key columns - seat, projected winner, margin, change - all fit without a horizontal scroll that would hide the change status. */ body.seat-tracker #seat-calc-constituency-results { overflow-x: auto; -webkit-overflow-scrolling: touch; } body.seat-tracker .st-const-table { font-size: 12px; width: 100%; } body.seat-tracker .st-const-table th:nth-child(2), body.seat-tracker .st-const-table td:nth-child(2) { display: none; } body.seat-tracker .st-const-table th, body.seat-tracker .st-const-table td { padding: 8px 6px; } body.seat-tracker .st-const-table .st-const-winner { gap: 5px; } }