/* Typography and candidate content follow available presentation space without
   changing map geometry or source artwork. The existing A− / A+ controls
   continue to scale the resulting HTML text from its computed base size. */
main.shell .legend{
 font-size:12px;line-height:1.25;gap:7px 14px;font-weight:600;
}
main.shell .legend>span{
 display:inline-flex;align-items:center;gap:6px;min-width:0;
 max-width:100%;overflow-wrap:anywhere;
}
main.shell .legend .dot{
 flex:none;width:1.25em;height:1.25em;min-width:14px;min-height:14px;
 margin:0;border:1px solid var(--muted,#52697a);
}

/* Compact desktops retain the six result rows and the existing map canvas. */
@media(min-width:1200px){
 .desktop-fit .project-map .legend{
  padding:4px 10px;font-size:12px;line-height:1.25;gap:6px 14px;
 }
 .desktop-fit .project-stats small{font-size:11px;font-weight:700}
 .desktop-fit .project-stats span,
 .desktop-fit .project-stats .metric-detail{font-size:11px}
 .desktop-fit .project-standings .candidate-name{font-size:14px}
 .desktop-fit .project-standings .candidate-number{font-size:20px}
 .desktop-fit .project-standings .candidate-number small{font-size:13px}
}

/* Taller desktop windows have room for a stronger hierarchy without changing
   card proportions, party colours or the result-update strip. */
@media(min-width:1200px) and (min-height:761px){
 .desktop-fit .project-map .legend{font-size:13px;gap:7px 16px;padding-block:6px}
 .desktop-fit .project-standings .candidate-name{font-size:16px}
 .desktop-fit .project-standings .candidate-number{font-size:23px}
 .desktop-fit .project-standings .candidate-number small{font-size:14px}
 .desktop-fit .project-stats small{font-size:12px}
 .desktop-fit .project-stats span,
 .desktop-fit .project-stats .metric-detail{font-size:12px}
 .desktop-fit .project-stats strong{font-size:29px}
 .desktop-fit .project-stats>div:last-child strong{font-size:20px}
 .desktop-fit .results-ticker .ticker-line{font-size:22.5px}
 .desktop-fit .ticker-locality{font-size:13px}
 .desktop-fit .ticker-metrics{font-size:11px}
}
@media(min-width:1440px) and (min-height:850px){
 .desktop-fit .project-map .legend{font-size:14px;gap:8px 18px;padding-block:7px}
 .desktop-fit .project-grid .card-head h2{font-size:18px}
 .desktop-fit .standings-heading .standings-caption{font-size:15px}
 .desktop-fit .standings-heading .standings-locality{font-size:18px}
 .desktop-fit .standings-heading .standings-locality-long{font-size:16px}
 .desktop-fit .project-title h1{font-size:28px}
 .desktop-fit .results-ticker .ticker-line{font-size:24px}
 .desktop-fit .ticker-locality{font-size:14px}
}
@media(min-width:1700px) and (min-height:950px){
 .desktop-fit .project-map .legend{font-size:16px;gap:10px 22px;padding:9px 14px}
 .desktop-fit .project-standings .candidate-name{font-size:18px}
 .desktop-fit .project-standings .candidate-number{font-size:26px}
 .desktop-fit .project-standings .candidate-number small{font-size:16px}
 .desktop-fit .project-stats small{font-size:13px}
 .desktop-fit .project-stats span,
 .desktop-fit .project-stats .metric-detail{font-size:13px}
 .desktop-fit .project-stats strong{font-size:34px}
 .desktop-fit .project-stats>div:last-child strong{font-size:23px}
 .desktop-fit .project-grid .card-head h2{font-size:20px}
 .desktop-fit .standings-heading .standings-caption{font-size:16px}
 .desktop-fit .standings-heading .standings-locality{font-size:20px}
 .desktop-fit .standings-heading .standings-locality-long{font-size:18px}
 .desktop-fit .project-title h1{font-size:32px}
 .desktop-fit .project-title .snapshot-context{font-size:11px}
 .desktop-fit .results-ticker .ticker-line{font-size:27px}
 .desktop-fit .ticker-locality{font-size:16px}
 .desktop-fit .ticker-label{font-size:12px}
 .desktop-fit .ticker-label small{font-size:10px}
 .desktop-fit .ticker-metrics{font-size:12px}
 .desktop-fit .win-tracker-label{font-size:14px}
 .desktop-fit .win-tracker-identity{font-size:13px}
 .desktop-fit .win-tracker-identity>span{font-size:11px}
 .desktop-fit .win-tracker-number{font-size:34px}
 .desktop-fit .win-tracker-remaining{font-size:14px}
 .desktop-fit .win-tracker-state{font-size:11px}
}

/* Phones retain their vertical reading flow. Legend entries wrap as complete
   colour/name pairs, and the two statistics remain attached to their bar. */
@media(max-width:700px){
 main.shell .legend{padding:10px 14px;gap:8px 12px;font-size:12px}
 .ranking .candidate-name,
 .projection .project-standings .candidate-name{font-size:13px}
 .ranking .candidate-number,
 .projection .project-standings .candidate-number{font-size:18px}
 .ranking .candidate-number small,
 .projection .project-standings .candidate-number small{font-size:12px}
}

/* Candidate identity and figures use the bar's vertical space. The fill still
   encodes only vote share; these pale plates do not change its width. */
.ranking .candidate[data-standing] .candidate-top{
 min-height:48px;padding-block:2px;
}
.ranking .candidate[data-standing] :is(.candidate-name,.candidate-number){
 align-self:stretch;display:flex;align-items:center;margin-block:1px;padding-block:0;
}
.ranking .candidate[data-standing] .candidate-name{gap:5px;font-size:15px}
.ranking .candidate[data-standing] .candidate-number{font-size:22px;line-height:1.1}
.ranking .candidate[data-standing] .candidate-number small{font-size:14px}
.ranking .candidate[data-standing] .candidate-portrait-frame{width:40px;height:40px}
.ranking .candidate[data-standing] .rank-number{
 min-width:26px;width:max-content;height:40px;padding-inline:2px;white-space:nowrap;font-size:16px;line-height:1;font-weight:850;
}
.ranking .candidate[data-standing] .candidate-colour-dot{width:11px;height:11px}

/* Only the fitted desktop grid supplies a definite row height. Size containment
   lets artwork follow that available band without enlarging the grid itself.
   Caps keep unusually tall/few-candidate views useful rather than oversized. */
@media(min-width:1200px){
 .desktop-fit .project-standings .ranking .candidate[data-standing]{container-type:size}
 .desktop-fit .project-standings .ranking .candidate[data-standing] .candidate-top{
  min-height:0;height:100%;padding-block:0;
 }
 .desktop-fit .project-standings .ranking .candidate[data-standing] :is(.candidate-name,.candidate-number){
  align-self:center;height:96cqh;margin-block:0;padding-block:0;
 }
 .desktop-fit .project-standings .ranking .candidate[data-standing] .candidate-portrait-frame{
  width:clamp(32px,92cqh,104px);height:clamp(32px,92cqh,104px);
 }
 .desktop-fit .project-standings .ranking .candidate[data-standing] .rank-number{
  min-width:clamp(24px,40cqh,40px);width:max-content;height:clamp(32px,92cqh,104px);
  font-size:clamp(14px,36cqh,28px);
 }
 .desktop-fit .project-standings .ranking .candidate[data-standing] .candidate-name{
  font-size:clamp(16px,min(32cqh,4cqw),26px);
 }
 .desktop-fit .project-standings .ranking .candidate[data-standing] .candidate-number{
  font-size:clamp(22px,min(50cqh,6cqw),34px);
 }
 .desktop-fit .project-standings .ranking .candidate[data-standing] .candidate-number small{
  font-size:clamp(14px,min(26cqh,3cqw),19px);
 }
 .desktop-fit .project-standings .ranking .candidate[data-standing] .candidate-colour-dot{
  width:clamp(10px,20cqh,16px);height:clamp(10px,20cqh,16px);
 }
}

/* Narrow cards put the existing name and party on two compact lines, using the
   same band while reserving the complete votes/share pair on its right. */
@media(max-width:1199px){
 .ranking .candidate[data-standing] .candidate-name{gap:4px;font-size:14px}
 .ranking .candidate[data-standing] .candidate-identity-content{gap:3px}
 .ranking .candidate[data-standing] .candidate-label{flex-direction:column;align-items:flex-start;gap:1px;line-height:1.05}
 .ranking .candidate[data-standing] .candidate-party-label{font-size:12px}
 .ranking .candidate[data-standing] .candidate-number{font-size:20px}
 .ranking .candidate[data-standing] .candidate-number small{font-size:12px}
 .ranking .candidate[data-standing] .rank-number{min-width:24px;width:max-content;font-size:15px}
}

/* A narrow two-column tablet card has less width than a full-width phone card.
   Stack the two figures only there, so ordinary names and party labels remain
   intact rather than losing space to a larger photograph. */
.ranking{container-type:inline-size}
.ranking .candidate[data-standing] .candidate-label>.candidate-short-name{max-width:100%}
@container(max-width:280px){
 .ranking .candidate[data-standing] .candidate-name{gap:3px;font-size:13px;padding-right:3px}
 .ranking .candidate[data-standing] .candidate-identity-content{gap:2px}
 .ranking .candidate[data-standing] .candidate-party-label{font-size:11px}
 .ranking .candidate[data-standing] .rank-number{min-width:22px;width:max-content}
 .ranking .candidate[data-standing] .candidate-colour-dot{width:10px;height:10px}
 .ranking .candidate[data-standing] .candidate-number{flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;padding-inline:4px}
 .ranking .candidate[data-standing] .candidate-number small{margin-left:0}
}
/* Larger requested text uses a second identity line inside the same bar;
   supporting party labels stay compact while names and vote figures grow. */
@media(min-width:1200px){
 html:is([data-text-scale="125"],[data-text-scale="150"]) .desktop-fit .ranking .candidate[data-standing] .candidate-label{flex-direction:column;align-items:flex-start;gap:0;line-height:1}
}
/* On a narrow screen large text uses vertical reading space: keep the complete
   two figures together, and give the identity enough height for its two lines. */
@media(max-width:1199px){
 html:is([data-text-scale="125"],[data-text-scale="150"]) .ranking .candidate[data-standing] .candidate-top{min-height:64px}
 html:is([data-text-scale="125"],[data-text-scale="150"]) .ranking .candidate[data-standing] .candidate-portrait-frame{width:52px;height:52px}
 html:is([data-text-scale="125"],[data-text-scale="150"]) .ranking .candidate[data-standing] .rank-number{height:52px}
 html:is([data-text-scale="125"],[data-text-scale="150"]) .ranking .candidate[data-standing] .candidate-number{flex-direction:column;align-items:flex-end;justify-content:center;gap:0;line-height:1}
 html:is([data-text-scale="125"],[data-text-scale="150"]) .ranking .candidate[data-standing] .candidate-number small{margin-left:0;line-height:1}
 .ranking .candidate[data-standing] .candidate-party-label{max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
/* Preserve short candidate names at larger sizes before resorting to ellipsis.
   Reclaim horizontal padding, not photograph or vote-figure area. */
@media(max-width:1399px){
 html:is([data-text-scale="125"],[data-text-scale="150"]) .ranking .candidate[data-standing] .candidate-top{padding-inline:3px;gap:4px}
 html:is([data-text-scale="125"],[data-text-scale="150"]) .ranking .candidate[data-standing] .candidate-name{padding-inline:2px;gap:3px}
 html:is([data-text-scale="125"],[data-text-scale="150"]) .ranking .candidate[data-standing] .candidate-identity-content{gap:2px}
}
@media(max-width:1199px){
 html:is([data-text-scale="125"],[data-text-scale="150"]) .ranking .candidate[data-standing] .rank-number{min-width:22px;width:max-content}
}

/* Use the same numerical highlight as the mathematical tracker, while keeping
   valid votes a separate observed total under the selected counting policy. */
:root .valid-votes-number{
 display:inline-block;width:max-content;justify-self:start;align-self:center;max-width:100%;padding:1px 8px;
 background:#ffe28a;color:#122b3f;border:1px solid #fff5c7;
 border-radius:3px;box-shadow:0 0 0 1px #745918;
 font-weight:850;font-variant-numeric:tabular-nums;line-height:1.1;
}
.current-leader-card .leader-context{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Both the compact overview and workspace reuse one context-first component. */
:root[data-theme] .project-stats>.current-leader-card{display:flex;align-items:center;min-width:0;padding-block:3px}
.current-leader-selection{display:grid;grid-template-rows:1fr 1fr;align-self:stretch;gap:3px;padding-block:1px;box-sizing:border-box;min-width:0;width:100%}
:root[data-theme] .current-leader-selection .current-leader-locality{
 display:block;box-sizing:border-box;width:fit-content;max-width:100%;padding:1px 4px;
 background:#ffe28a;color:#122b3f;border:1px solid #fff5c7;border-radius:3px;
 align-self:start;justify-self:start;margin:0;font-family:"Election Score Numbers","Arial Narrow",Arial,sans-serif;
 font-size:24px;font-weight:750;line-height:1.05;overflow-wrap:anywhere;
}
.current-leader-line{display:flex;align-self:end;align-items:center;justify-content:flex-end;gap:6px;width:100%;min-width:0}
:root[data-theme] .current-leader-label{flex:none;text-align:right;font-size:11px;font-weight:800;line-height:1.1;margin:0;color:var(--navy)}
:root[data-theme] .leader-headline .current-leader-label{color:inherit}
.current-leader-label>span{font-size:1.4em;font-weight:800;vertical-align:middle}
:root[data-theme] :is(.project-stats,.leader-headline) .current-leader-line>strong{
 display:flex;align-items:center;min-width:0;max-width:100%;margin:0;font-size:24px;line-height:1.05;
}
:root[data-theme] .current-leader-line .leader-band{
 display:inline-flex;align-items:center;width:fit-content;max-width:100%;padding:1px 5px;
 font-family:"Election Score Numbers","Arial Narrow",Arial,sans-serif;font-size:inherit;margin:0;
 white-space:normal;overflow-wrap:anywhere;line-height:1.05;text-align:left;
}
@media(min-width:1700px) and (min-height:950px){
 :root[data-theme] :is(.project-stats,.leader-headline) .current-leader-line>strong{font-size:30px}
 :root[data-theme] .current-leader-selection .current-leader-locality{font-size:30px}
}
@media(min-width:1200px) and (max-height:760px){
 :root[data-theme] :is(.project-stats,.leader-headline) .current-leader-line>strong{font-size:22px}
 :root[data-theme] .current-leader-selection .current-leader-locality{font-size:22px}
 :root[data-theme] .current-leader-label{font-size:10px}
}
@media(max-width:700px){
 .current-leader-line{flex-wrap:wrap;justify-content:flex-end;gap:4px}
}

/* The headline area is independent of the dashboard selection. Its actual
   locality remains attached to the existing ticker focus and status policy. */
:root[data-theme] .results-ticker{--ticker-portrait-size:64px;--ticker-flag-height:34px;padding-block:2px;min-height:68px}
:root[data-theme] .results-ticker .ticker-locality{
 display:flex;flex-direction:column;align-items:stretch;justify-content:center;align-self:stretch;
 gap:2px;max-width:30%;flex:0 1 auto;font-size:clamp(20px,1.8vw,28px)!important;
 font-weight:850;line-height:1.05;border-left-width:3px;padding-left:10px;
 height:auto;min-height:0;box-sizing:border-box;transform:none;
}
.ticker-focus-heading{display:flex;align-items:center;gap:7px;min-width:0}
:root[data-theme] .results-ticker .ticker-locality.national-context{
 display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;column-gap:7px;
}
.results-ticker .national-context>.ticker-focus-flag{grid-column:1;grid-row:1 / span 2;align-self:center}
.results-ticker .national-context>.ticker-focus-heading{grid-column:2;grid-row:1}
.results-ticker .national-context>.ticker-metrics{grid-column:2;grid-row:2}
.results-ticker .ticker-locality-name{display:block;min-width:0;overflow-wrap:anywhere;background:none;padding:0}
.results-ticker .ticker-locality.national-context .ticker-locality-name{white-space:nowrap}
.results-ticker .ticker-focus-flag{display:block;flex:none;width:calc(var(--ticker-flag-height) * 1.5);height:var(--ticker-flag-height);object-fit:contain}
.results-ticker .ticker-focus-arrow{flex:none;display:block;font-size:36px;font-weight:900;line-height:1;transform:none}
:root[data-theme] .results-ticker .ticker-locality::before,
:root[data-theme] .results-ticker .ticker-locality::after{content:none}
:root[data-theme] .results-ticker .ticker-locality .ticker-metrics{
 display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:0;width:100%;max-width:100%;
 background:none;font-size:13px;font-weight:500;line-height:1.1;letter-spacing:0;
}
:root[data-theme] .results-ticker .ticker-metrics .ticker-turnout{font-size:13px!important;flex-wrap:wrap;white-space:normal;gap:2px 4px}
:root[data-theme] .results-ticker .ticker-metrics .ticker-coverage{font-size:11.5px;line-height:1.1}
:root[data-theme] .results-ticker .ticker-window{display:flex;align-items:center;align-self:stretch;min-height:var(--ticker-portrait-size)}
/* Keep the national observed-first-place marker; candidate names have no flag. */
.results-ticker .ticker-candidate[data-national-leader=true] .candidate-label{background:none;padding-bottom:0}
/* Green marks observed first place only, independently of review status. */
:root[data-theme] .results-ticker .ticker-rank[data-ticker-rank="1"]{
 display:inline-flex;align-items:center;justify-content:center;flex:none;
 font-size:1.25em;font-weight:850;line-height:1.05;padding:1px 4px;
 background:#d8f3e5!important;color:#111!important;border:1px solid #3e8065;border-radius:3px;
}
:root[data-theme] .results-ticker .ticker-locality-long{font-size:.72em}
@media(min-width:1200px) and (max-height:760px){
 :root[data-theme] .results-ticker{--ticker-flag-height:30px;--ticker-portrait-size:60px}
 :root[data-theme] .results-ticker .ticker-locality{font-size:24px!important;max-width:30%}
 :root[data-theme] .results-ticker .ticker-focus-arrow{font-size:32px}
 :root[data-theme] .results-ticker .ticker-locality-long{font-size:.7em}
}
@media(max-width:700px){
 :root[data-theme] .results-ticker{--ticker-flag-height:30px;--ticker-portrait-size:60px}
 :root[data-theme] .results-ticker .ticker-locality{max-width:100%;font-size:25px!important;min-width:0;flex:1 1 100%!important}
 :root[data-theme] .results-ticker .ticker-focus-arrow{font-size:32px}
 :root[data-theme] .results-ticker .ticker-locality-long{font-size:.72em}
}

/* TV reuses the same compact strip rather than reserving extra empty height. */
:root[data-theme] .desktop-fit.tv-view .results-ticker{min-height:68px;padding-block:2px}

/* This linked turnout badge is inline metadata. Keep generic toolbar-button
   dimensions from enlarging its metrics row on compact desktop displays. */
:root[data-theme] .results-ticker .ticker-metrics .turnout-followup-link{
 display:inline-flex;min-height:0;height:auto;padding:0;border:0;font:inherit;line-height:inherit;
}

:root[data-theme] .tv-view #ticker-locality .ticker-metrics .turnout-followup-link{display:inline-flex!important}
@media(min-width:1700px) and (min-height:950px){
 :root[data-theme] .results-ticker .ticker-metrics .ticker-turnout{font-size:14px!important}
 :root[data-theme] .results-ticker .ticker-metrics .ticker-coverage{font-size:12px}
}

/* A compact, non-announcing wall clock precedes the existing flag separator. */
:root[data-theme] .results-ticker .ticker-label{display:flex;flex-direction:column;justify-content:center;align-self:stretch;line-height:1.1;max-width:none;min-width:max-content}
.results-ticker .ticker-clock{display:flex;flex-direction:column;gap:1px;letter-spacing:0;color:inherit}
.results-ticker .ticker-clock-date{font-size:12px;font-weight:650;white-space:nowrap}
.results-ticker .ticker-clock-time-row{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.results-ticker .ticker-clock-time{font-family:"Election Score Numbers","Arial Narrow",Arial,sans-serif;font-size:25px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:0}
.results-ticker .ticker-clock-zone{font-size:9px;font-weight:600}
.results-ticker .ticker-recorded-label{display:block;font-size:8px;letter-spacing:.5px;margin-top:2px}
:root[data-theme] .results-ticker .ticker-label>small{font-size:8px;margin-top:1px}
@media(min-width:1200px) and (max-height:760px){
 .results-ticker .ticker-clock-time{font-size:22px}
 .results-ticker .ticker-clock-date{font-size:11px}
}

@media(max-width:700px){.results-ticker .ticker-label{order:-2}}