.ew-map-stage { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.ew-map-canvas { min-width: 0; }
.ew-map-canvas .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
.ew-office-tabs { display: grid; align-content: start; gap: var(--space-1); margin: 0; }
.ew-office-tabs a { display: flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); font-size: var(--text-sm); text-decoration: none; }
.ew-office-tabs a[aria-current] { background: var(--colour-primary); color: var(--colour-bg); }
.ew-place h3 { margin-top: var(--space-3); }
.ew-place summary, .ep-population summary { min-height: 44px; padding-block: var(--space-3); cursor: pointer; }
.ew-place-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-2); }
.ew-place-list a { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; min-height: 44px; padding: var(--space-2); background: var(--colour-bg-subtle); font-size: var(--text-sm); }
.ew-result-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-2); max-height: 25rem; overflow-y: auto; }
.ew-winner { display: flex; flex-direction: column; margin: 0; padding: var(--space-3); border-left: 3px solid var(--colour-primary); background: var(--colour-bg-subtle); font-size: var(--text-sm); }
.ew-winner a { min-height: 44px; display: flex; align-items: center; }
.ew-map-tooltip { font-size: var(--text-sm); padding: var(--space-3); max-width: min(48rem, calc(100vw - 2rem)); white-space: normal; }
.ew-map-tooltip__office { display: grid; grid-template-columns: 11rem auto; gap: var(--space-2); margin-top: var(--space-2); white-space: nowrap; }
.ep-population { min-width: 0; }
.ep-population h3 { margin-bottom: var(--space-3); }
.ep-comparison { margin: 0; }
.ep-measure { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.ep-measure strong { font-variant-numeric: tabular-nums; }
.ep-measure__track { grid-column: 1 / -1; height: .8rem; background: var(--colour-bg-subtle); border-radius: var(--radius-sm); }
.ep-measure__track i { display: block; height: 100%; width: var(--w); background: var(--colour-text-muted); border-radius: inherit; }
.ep-measure--adults i { background: var(--colour-secondary); }
.ep-measure--voters i { background: var(--colour-primary); }
.ep-comparison figcaption { font-size: var(--text-xs); color: var(--colour-text-muted); }
.ep-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-block: var(--space-3); }
.ep-pairs div { display: flex; flex-direction: column; padding: var(--space-3); background: var(--colour-bg-subtle); }
.ep-pairs strong { font-size: var(--text-xl); }
.ep-pairs span { font-size: var(--text-xs); }
.ep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.ep-grid > * { min-width: 0; }
.page-elections-hub.has-brand-hero .page-band .elections-hero__lead a { color: inherit; text-decoration: underline; }
.ep-result-coverage > summary { min-height: 44px; padding-block: var(--space-3); cursor: pointer; font-weight: 650; }
.ep-contrast-heading { font-size: var(--text-xs); font-weight: 750; margin-block: var(--space-3) var(--space-1); }
@media (max-width: 52rem) {
  .ep-grid { grid-template-columns: 1fr; }
  .ew-map-stage { grid-template-columns: 1fr; }
  .ew-office-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ew-map-tooltip__office { grid-template-columns: 1fr; white-space: normal; gap: 0; }
}
/* Register growth panel — shown on a county and on a constituency page. Both
   halves the owner asked for sit side by side: the number of voters added and
   what percentage that is of the earlier register.

   It is a CARD, because on both pages it lands among cards and an unframed
   strip read as an orphan. The columns are `auto-fit`, not a fixed two, because
   on a constituency page it sits in a ~450px column where two fixed columns
   wrapped "87th of 290 constituencies by number" onto three cramped lines. */
/* `max-width` because this panel is now placed full-width under a two-column
   grid: across 1,392px its three bars stretch into rulers and the two figure
   cards drift apart. It still fills a narrower column unchanged. */
.rg-growth { min-width: 0; max-width: 56rem; margin-block: var(--space-4); padding: var(--space-4); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-bg); }
/* Quieter than the h3 above it on a constituency page, which is the register
   count itself — the panel explains that number, it does not compete with it. */
.rg-growth > h3 { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--colour-text-muted); }
/* The three-register chart. CSS bars, no chart library and no JS: three rows
   do not justify a dependency, and a bar that is just a div always prints.
   Grid, not flex, so the year column, the tracks and the counts line up
   across rows — ragged tracks were the whole point of drawing this. */
.rg-bars { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.rg-bar { display: contents; }
.rg-bar__year { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--colour-text-muted); font-variant-numeric: tabular-nums; }
.rg-bar__track { position: relative; height: 1.15rem; border-radius: var(--radius-sm); background: var(--colour-bg-subtle); }
.rg-bar__track > i { display: block; width: var(--w); height: 100%; border-radius: var(--radius-sm); background: var(--colour-primary); }
.rg-bar__value { font-size: var(--text-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
/* A year with no register held: an outlined, EMPTY track. Filling it to zero
   would read as "nobody is registered here", which is not what we know. */
.rg-bar--pending .rg-bar__track { background: transparent; border: 1px dashed var(--colour-border); }
.rg-bar--pending .rg-bar__year,
.rg-bar--pending .rg-bar__value { color: var(--colour-text-muted); font-weight: var(--fw-semibold); font-size: var(--text-xs); }
/* `max-width` in CH, not rem: these are small-print sentences, and in a 56rem
   panel a 12px line ran 128 characters (measured 2026-09-15 on the Changamwe
   constituency page). A reading measure is counted in characters. */
.rg-bars__pending { margin: calc(var(--space-2) * -1) 0 var(--space-3); max-width: 78ch; font-size: var(--text-xs); color: var(--colour-text-muted); }
/* Places compared as bars (wards in a constituency, constituencies in a
   county). It REUSES .rg-bars above rather than copying it: this is the same
   object — a register year drawn as a bar — and a second copy of those rules
   would drift from the one the growth panel right below it draws. */
.pb-chart { margin: 0; }
.pb-places { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pb-place { display: grid; gap: var(--space-1); min-width: 0; }
.pb-place__name { display: flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.pb-place__bars { margin: 0; }
.pb-chart figcaption { margin-top: var(--space-3); max-width: 78ch; font-size: var(--text-xs); color: var(--colour-text-muted); }
.rg-growth__sub { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--colour-text-muted); }
.rg-growth__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3); }
.rg-figure { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--colour-bg-subtle); border-left: 3px solid var(--colour-text-muted); border-radius: var(--radius-sm); }
.rg-figure--count { border-left-color: var(--colour-primary); }
.rg-figure--percent { border-left-color: var(--colour-info); }
.rg-figure strong { font-size: var(--text-xl); line-height: 1.15; font-variant-numeric: tabular-nums; }
.rg-figure span { font-size: var(--text-xs); }
.rg-figure__rank { margin-top: auto; padding-top: var(--space-1); color: var(--colour-text-muted); }
.rg-growth > details { margin-top: var(--space-2); border-top: 1px solid var(--colour-border); }
.rg-growth > details > summary { min-height: 44px; padding-block: var(--space-2); cursor: pointer; font-size: var(--text-xs); color: var(--colour-text-muted); }
.rg-growth > details p { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--colour-text-muted); }