/* Electoral Reforms section (REDEEM).
 *
 * Scoped to /electoral-reforms/ and loaded only by that section's templates.
 * Everything here is built from core.css tokens — there are no raw colour
 * literals, because scripts/lint_design_system.py refuses them and because a
 * literal here would drift the moment the brand palette moves.
 *
 * Two structural rules the whole section obeys:
 *
 *   1. No JavaScript. Geometry comes from inline CSS custom properties on the
 *      element (style="--from:4"), which is the same idiom the analytics
 *      dashboard already uses for its gender meter. A 2-vCPU production host,
 *      a mobile-first audience and WCAG 2.2 AA all point the same way.
 *   2. Every graphic has a table twin in the same <figure>, and every
 *      horizontal graphic collapses to a vertical card list on a phone rather
 *      than growing a sideways scrollbar (1.4.10 Reflow).
 */

/* --- Status palette -------------------------------------------------------
 * Nine roadmap statuses collapse onto the four semantic badge colours plus
 * muted. Colour is never the only signal: every lane and card also carries the
 * status as text (1.4.1).
 */
.rf-s--done { --rf-ink: var(--colour-success); --rf-wash: var(--colour-success-bg); }
.rf-s--active { --rf-ink: var(--colour-info); --rf-wash: var(--colour-info-bg); }
.rf-s--hold { --rf-ink: var(--colour-warning); --rf-wash: var(--colour-warning-bg); }
.rf-s--late { --rf-ink: var(--colour-danger); --rf-wash: var(--colour-danger-bg); }
.rf-s--idle { --rf-ink: var(--colour-text-muted); --rf-wash: var(--colour-bg-subtle); }

/* --- Section sub-navigation ---------------------------------------------- */
.rf-subnav {
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--colour-border);
}

.rf-subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rf-subnav a {
  display: block;
  /* 2.5.8 Target Size: legislation.css's .tl-chip is ~22px tall and fails it.
     Do not copy that; 2.75rem clears the 24px minimum with room to spare. */
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  border-bottom: 3px solid transparent;
  color: var(--colour-text-light);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.rf-subnav a:hover { color: var(--colour-text); background: var(--colour-bg-subtle); }
.rf-subnav a.is-active { color: var(--colour-primary); border-bottom-color: var(--colour-primary); }

/* --- Shared figure furniture --------------------------------------------- */
.rf-figure { margin: 0 0 var(--space-6); }

.rf-figure > figcaption {
  margin-bottom: var(--space-3);
  color: var(--colour-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.rf-twin { margin-top: var(--space-4); }

.rf-twin > summary {
  min-height: 2.75rem;
  padding: var(--space-2) 0;
  color: var(--colour-text-light);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.rf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
}

.rf-legend li { display: flex; gap: var(--space-2); align-items: center; }

.rf-legend__key {
  display: inline-block;
  width: 1.5rem;
  height: 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--rf-ink, var(--colour-text-muted));
}

.rf-legend__key--over {
  border: 1px solid var(--colour-danger);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--colour-danger) 26%, transparent) 0 4px,
    transparent 4px 8px
  );
}

/* --- Surface A: the reform window strip ----------------------------------
 * One column per month over the whole electoral cycle. Labels and dots are
 * separate grid children rather than one nested marker, so a label can be
 * wider than its column and overflow harmlessly, and so consecutive markers
 * can sit on opposite sides of the line. That alternation is not decoration:
 * two of these dates are four weeks apart and would otherwise print on top of
 * each other.
 */
.rf-window { padding: var(--space-4) 0; }

.rf-window__grid {
  display: grid;
  grid-template-columns: repeat(var(--months), minmax(0, 1fr));
  grid-template-rows: minmax(4rem, auto) auto minmax(4rem, auto);
  align-items: center;
}

.rf-window__line {
  grid-row: 2;
  grid-column: 1 / -1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--colour-secondary) 0 calc(var(--now) * 1%),
    var(--colour-border-strong) calc(var(--now) * 1%) 100%
  );
}

.rf-window__lab {
  grid-column: var(--m);
  justify-self: center;
  width: 8.5rem;
  color: var(--colour-text-light);
  font-size: var(--text-xs);
  line-height: 1.35;
  text-align: center;
}

.rf-window__lab b { display: block; color: var(--colour-text); }
.rf-window__lab--up { grid-row: 1; align-self: end; padding-bottom: var(--space-3); }
.rf-window__lab--down { grid-row: 3; align-self: start; padding-top: var(--space-3); }
.rf-window__lab--start { justify-self: start; text-align: left; }
.rf-window__lab--end { justify-self: end; text-align: right; }

.rf-window__dot {
  grid-row: 2;
  grid-column: var(--m);
  justify-self: center;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--colour-bg);
  border-radius: 50%;
  background: var(--colour-secondary);
}

.rf-window__dot--rule {
  width: 0.3rem;
  height: 1.6rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--colour-warning);
}

.rf-window__dot--now {
  width: 0.9rem;
  height: 0.8rem;
  border: none;
  border-radius: 0;
  background: var(--colour-primary);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.rf-window__dot--ahead { background: var(--colour-info); }

.rf-window__dot--contested {
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--colour-primary);
  background: var(--colour-bg);
}

.rf-window__notes { margin-top: var(--space-5); display: grid; gap: var(--space-3); }

.rf-window__note {
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--colour-border-strong);
  color: var(--colour-text-light);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* --- The view switcher --------------------------------------------------- */
.rf-views {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
}

.rf-views__label {
  margin-right: var(--space-1);
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rf-views a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-pill);
  color: var(--colour-text-light);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.rf-views a:hover { border-color: var(--colour-border-strong); background: var(--colour-bg-subtle); }

.rf-views a[aria-current="true"] {
  border-color: var(--colour-primary);
  background: var(--colour-primary);
  color: var(--colour-bg);
}

.rf-views__hint {
  flex-basis: 100%;
  color: var(--colour-text-muted);
  font-size: var(--text-sm);
}

/* --- Surface B, board view ------------------------------------------------ */
.rf-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.rf-board__col > h3 {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--colour-border);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rf-board__col > h3 .rf-count { color: var(--colour-text-muted); font-weight: 400; }

.rf-board__col ol { display: grid; gap: var(--space-3); padding: 0; list-style: none; }

.rf-card {
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--rf-ink, var(--colour-border-strong));
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  box-shadow: var(--shadow-sm);
}

.rf-card__title { margin-bottom: var(--space-1); font-size: var(--text-base); font-weight: 700; line-height: 1.35; }
.rf-card__origin { color: var(--colour-text-muted); font-size: var(--text-xs); }
.rf-card__meta { margin-top: var(--space-3); color: var(--colour-text-light); font-size: var(--text-sm); line-height: 1.5; }
.rf-card__meta dt { color: var(--colour-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.rf-card__meta dd { margin: 0 0 var(--space-2); }
.rf-card__meta dd:last-child { margin-bottom: 0; }
.rf-card__absent { color: var(--colour-text-muted); font-style: italic; }
.rf-card .badge { margin-top: var(--space-3); }

/* --- Surface B, Gantt view ------------------------------------------------
 * One grid per lane: label column, the quarter track, status column. Rules
 * repeat inside each lane's track rather than floating over the whole block,
 * which keeps them exactly aligned without absolute positioning and without
 * display:contents (which drops list semantics in some screen readers).
 */
.rf-gantt { --label-col: minmax(11rem, 15rem); --status-col: minmax(7rem, 10rem); }

.rf-gantt__head,
.rf-gantt__lane {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr) var(--status-col);
  gap: var(--space-3);
  align-items: center;
}

.rf-gantt__head { padding-bottom: var(--space-2); border-bottom: 1px solid var(--colour-border); }

.rf-gantt__years {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

.rf-gantt__yr {
  grid-column: var(--at) / span var(--span);
  border-left: 1px solid var(--colour-border);
  padding-left: var(--space-1);
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.rf-gantt__theme {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rf-gantt__lanes { padding: 0; list-style: none; }

.rf-gantt__lane { border-bottom: 1px solid var(--colour-border); padding: var(--space-2) 0; }

.rf-gantt__label b { font-size: var(--text-sm); font-weight: 700; line-height: 1.3; }
.rf-gantt__origin { display: block; margin-top: 2px; color: var(--colour-text-muted); font-size: var(--text-xs); }

.rf-gantt__track {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  align-items: center;
  min-height: 2rem;
}

.rf-gantt__rule {
  grid-row: 1;
  grid-column: var(--at);
  align-self: stretch;
  border-left: 1px dashed var(--colour-border-strong);
}

.rf-gantt__rule--now { border-left: 2px solid var(--colour-primary); }
.rf-gantt__rule--cut { border-left: 2px dashed var(--colour-warning); }

.rf-gantt__bar {
  grid-row: 1;
  grid-column: var(--from) / var(--to);
  height: 0.95rem;
  border-radius: var(--radius-sm);
  background: var(--rf-ink, var(--colour-text-muted));
}

/* The overrun tail is the point of this view: it runs from the due date to
   today and grows on its own, every day, with nobody editing anything. It is
   also stated in words inside the track's aria-label, so it is never
   hatch-only. */
.rf-gantt__over {
  grid-row: 1;
  grid-column: var(--from) / var(--to);
  height: 0.95rem;
  border: 1px solid var(--colour-danger);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--colour-danger) 26%, transparent) 0 4px,
    transparent 4px 8px
  );
}

.rf-gantt__mile {
  grid-row: 1;
  grid-column: var(--at);
  justify-self: center;
  width: 0.6rem;
  height: 0.6rem;
  border: 2px solid var(--colour-bg);
  background: var(--colour-text);
  rotate: 45deg;
}


.rf-gantt__status { font-size: var(--text-xs); text-align: right; }
.rf-gantt__movement { display: block; margin-top: 2px; color: var(--colour-text-muted); }

/* --- Table view ----------------------------------------------------------- */
.rf-table-note { margin-bottom: var(--space-3); color: var(--colour-text-muted); font-size: var(--text-sm); }

/* --- Composition strip ---------------------------------------------------- */
.rf-comp { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.rf-comp__cell {
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-top: 3px solid var(--rf-ink, var(--colour-border-strong));
  border-radius: var(--radius-md);
  background: var(--colour-bg);
}

.rf-comp__num { font-size: var(--text-3xl); font-weight: 800; line-height: 1; }
.rf-comp__lab { margin-top: var(--space-2); color: var(--colour-text-light); font-size: var(--text-sm); }


/* --- Phones: every horizontal graphic becomes a vertical list -------------
 * Nothing here grows a sideways scrollbar. The Gantt keeps its DOM and drops
 * its track, so a shared ?view=gantt link opens as readable cards.
 */
@media (max-width: 760px) {
  .rf-window__grid {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    grid-template-rows: none;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    padding-left: var(--space-2);
    border-left: 2px solid var(--colour-border);
  }

  .rf-window__line { display: none; }

  .rf-window__lab,
  .rf-window__dot {
    grid-row: auto;
    grid-column: auto;
    align-self: center;
    justify-self: center;
    padding: 0;
  }

  .rf-window__lab { width: auto; text-align: left; justify-self: start; }

  .rf-gantt__head { display: none; }

  .rf-gantt__lane {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-4) 0;
  }

  .rf-gantt__track { display: none; }
  .rf-gantt__status { text-align: left; }
}

/* --- Print: the view a programme officer takes into a meeting ------------- */
@media print {
  .rf-subnav,
  .rf-views,
  .rf-notice { display: none; }

  .rf-twin[open] > summary { display: none; }
  .rf-gantt__lane { break-inside: avoid; }
}

/* --- Section furniture ----------------------------------------------------

   READING MEASURES ARE OFF SITE-WIDE — owner decision, 2026-08-02, documented
   at core.css:165. `--container-prose` and `--measure-lead` are both `none`,
   so `.page-intro--text`, `.section-intro--text` and `.section__lead` span
   their container everywhere else on the site.

   These three rules opted out of that: two reached for `--measure-lead-len`,
   which core.css:191 says exists for ONE consumer — publicfinance.css needs a
   real length for a `minmax(0, …)` grid track, because `minmax(0, none)` is
   invalid — and the hero lead used a flat 46rem. Measured at a 1920px viewport
   that rendered the standfirst at 558px and the hero lead at 736px inside a
   1728px container, which is the dead space the owner reported on 2026-08-20.
   Consuming `--measure-lead` puts this section back on the site's decision. */
.rf-hero-lead {
  max-width: var(--measure-lead);
  margin-top: var(--space-3);
  font-size: var(--text-base);
  line-height: 1.6;
}

.rf-sec { padding: var(--space-5) 0; }
.rf-sec + .rf-sec { border-top: 1px solid var(--colour-border); }

.rf-sec > h2 {
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
}

.rf-sec__standfirst {
  max-width: var(--measure-lead);
  margin-bottom: var(--space-4);
  color: var(--colour-text-light);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.rf-sec__more {
  margin-top: var(--space-4);
  color: var(--colour-text-light);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.rf-gantt__ruletag {
  grid-column: var(--at) / span 3;
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rf-gantt__ruletag--now { color: var(--colour-primary); }
.rf-gantt__ruletag--cut { color: var(--colour-warning); }

.rf-gantt__head--rules { padding: var(--space-2) 0 0; border-bottom: none; }

/* --- Split layout: the roadmap and its evidence panel ---------------------
 * The panel is opened by a ?open= link rather than a JavaScript drawer, so it
 * is shareable, printable and keyboard-reachable. Below the breakpoint it
 * simply stacks under the graphic — no off-canvas, no focus trap, nothing to
 * get wrong.
 */
.rf-split { display: grid; gap: var(--space-5); }
.rf-split--open { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1100px) {
  .rf-split--open { grid-template-columns: minmax(0, 1fr) minmax(21rem, 25rem); align-items: start; }
}

.rf-split__main { min-width: 0; }

.rf-panel {
  position: sticky;
  top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-top: 4px solid var(--rf-ink, var(--colour-border-strong));
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}

.rf-panel__bar { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }

.rf-panel__eyebrow {
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.rf-panel__close {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 600;
}

.rf-panel__title { margin: var(--space-2) 0 var(--space-1); font-size: var(--text-lg); line-height: 1.3; }
.rf-panel__origin { color: var(--colour-text-muted); font-size: var(--text-xs); }
.rf-panel__summary { margin-top: var(--space-3); font-size: var(--text-sm); line-height: 1.6; }

.rf-panel__facts { margin-top: var(--space-4); font-size: var(--text-sm); }
.rf-panel__facts dt {
  margin-top: var(--space-3);
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rf-panel__facts dd { margin: 2px 0 0; line-height: 1.5; }

.rf-panel__h {
  margin: var(--space-5) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
  font-size: var(--text-sm);
}

.rf-panel__list { display: grid; gap: var(--space-3); padding: 0; list-style: none; font-size: var(--text-sm); }
.rf-panel__list li { line-height: 1.45; }
.rf-panel__note { display: block; margin-top: 2px; color: var(--colour-text-muted); font-size: var(--text-xs); }
.rf-panel__late { color: var(--colour-danger); font-weight: 700; }
.rf-panel__absent { color: var(--colour-text-muted); font-size: var(--text-sm); font-style: italic; line-height: 1.5; }
.rf-panel__table { margin: 0; }
.rf-panel__table th, .rf-panel__table td { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }

/* --- Absence, stated rather than left blank ------------------------------- */
.rf-absent { color: var(--colour-text-muted); font-style: italic; }
.rf-late { color: var(--colour-danger); font-weight: 700; }
.rf-empty { padding: var(--space-4); color: var(--colour-text-muted); font-size: var(--text-sm); font-style: italic; }

.rf-filter {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--colour-info);
  background: var(--colour-info-bg);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* --- Per-theme composition ------------------------------------------------ */
.rf-themes { display: grid; gap: var(--space-5); padding: 0; list-style: none; }
.rf-themes__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.rf-themes__head h3 { font-size: var(--text-base); }
.rf-themes__count { color: var(--colour-text-muted); font-size: var(--text-xs); }
.rf-themes .meter__stack { display: flex; height: 0.75rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--colour-bg-subtle); }
.rf-themes .meter__seg { background: var(--rf-ink, var(--colour-text-muted)); }
.rf-themes .meter-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); padding: 0; list-style: none; color: var(--colour-text-muted); font-size: var(--text-xs); }
.rf-themes .meter-legend li { display: flex; gap: var(--space-2); align-items: center; }

/* --- What moved recently -------------------------------------------------- */
.rf-recent { display: grid; gap: var(--space-1); padding: 0; list-style: none; }

.rf-recent__item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  border-left: 3px solid var(--rf-ink, var(--colour-border-strong));
  border-bottom: 1px solid var(--colour-border);
}

.rf-recent__date { color: var(--colour-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.rf-recent__body { display: grid; gap: 2px; font-size: var(--text-sm); }
.rf-recent__what { color: var(--colour-text-muted); font-size: var(--text-xs); }

/* --- The pill filter bar, shared by all seven tabs -------------------------

   The pills themselves are `.house-tab` from core/components.css, reused
   unchanged so a reader meets ONE filter control across the site rather than
   two that drift. Only the layout around them lives here: a labelled group,
   groups flowing onto one line, wrapping rather than scrolling.

   `.house-tabs` ships `margin-bottom` and, under 480px, `flex: 1` on every
   pill so two chamber tabs split the width. Both are wrong inside a bar that
   carries four groups and up to ten pills in one of them, so both are undone
   here — and only here, leaving the two-tab pages exactly as they were. */
.rf-filterbar { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  align-items: flex-start; margin: var(--space-4) 0 var(--space-3); }
.rf-filterbar__group { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-2); min-width: 0; }
.rf-filterbar__label { color: var(--colour-text-muted); font-size: var(--text-xs);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.rf-filterbar .house-tabs { margin: 0; }
/* `.house-tab` is `white-space: nowrap`, which is right for two chamber tabs
   and wrong here: "Democratic transition and constitutional reform 2002–2009"
   is wider than a 390px phone, and at that width the timeline's era row pushed
   the whole document 97px sideways (measured 2026-08-20). Wrapping inside the
   pill costs nothing on a wide screen — a pill only wraps when it must. */
.rf-filterbar .house-tab { white-space: normal; max-width: 100%; }
.rf-filterbar__hint { color: inherit; opacity: 0.7; font-weight: 400;
  font-variant-numeric: tabular-nums; }
.rf-filterbar__note { margin-top: var(--space-2); }
@media (max-width: 480px) {
  .rf-filterbar { gap: var(--space-3); }
  .rf-filterbar .house-tabs { width: auto; }
  .rf-filterbar .house-tab { flex: 0 1 auto; }
}
@media print { .rf-filterbar { display: none; } }

/* --- People --------------------------------------------------------------- */
.rf-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin: var(--space-4) 0; }
/* The search half of the bar sits under the pills and stays compact — it is
   one field now that every categorical filter has become a pill. */
.rf-filters--search { align-items: flex-end; margin: 0 0 var(--space-4); }
.rf-filters--search .rf-filters__field { flex: 1 1 18rem; max-width: 32rem; }
.rf-filters__field { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1); min-width: 0; max-width: 100%; }
.rf-filters__field .field { max-width: 100%; }
.rf-filters__field label { color: var(--colour-text-muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.rf-filters__clear { align-self: center; font-size: var(--text-sm); }

.rf-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-4); padding: 0; list-style: none; }

.rf-people__card {
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
}

.rf-people__name { font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
.rf-people__role { margin-top: 2px; color: var(--colour-text-muted); font-size: var(--text-xs); }
.rf-people__latest {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--colour-border);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.rf-people__latest-label {
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rf-people__latest time { color: var(--colour-primary); font-size: var(--text-xs); font-weight: 700; }
.rf-people__count { margin-top: var(--space-2); font-size: var(--text-sm); }
.rf-people__link { margin-top: var(--space-2); font-size: var(--text-xs); }

.rf-person__head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.rf-person__count { font-size: var(--text-lg); font-weight: 700; }
.rf-person__bio { max-width: var(--measure-lead); margin-bottom: var(--space-4); line-height: 1.7; }

.rf-timeline { display: grid; gap: var(--space-1); padding: 0; list-style: none; }

.rf-timeline__item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--colour-border);
}

.rf-timeline__date { color: var(--colour-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.rf-timeline__body { display: grid; gap: var(--space-2); justify-items: start; }
.rf-timeline__what { font-size: var(--text-sm); line-height: 1.5; }
.rf-timeline__src { color: var(--colour-text-muted); font-size: var(--text-xs); }

/* --- Visually hidden, but read aloud -------------------------------------- */
.rf-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Clickable Gantt bars and composition tiles --------------------------- */
a.rf-gantt__track { text-decoration: none; border-radius: var(--radius-sm); }
a.rf-gantt__track:hover { background: var(--colour-bg-subtle); }
a.rf-gantt__track:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }

.rf-gantt__lane.is-open { background: var(--colour-bg-subtle); }
.rf-gantt__lane.is-open .rf-gantt__label a { color: var(--colour-primary); }
.rf-gantt__late { display: block; margin-top: 2px; color: var(--colour-danger); font-weight: 700; }

a.rf-comp__cell { display: block; text-decoration: none; color: inherit; }
a.rf-comp__cell:hover { background: var(--colour-bg-subtle); }
a.rf-comp__cell:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }
.rf-comp__num { display: block; }
.rf-comp__lab { display: block; }

.rf-legend__key--diamond {
  width: 0.6rem; height: 0.6rem;
  border-radius: 0;
  background: var(--colour-text);
  rotate: 45deg;
}

@media (max-width: 760px) {
  .rf-recent__item { grid-template-columns: 1fr; gap: var(--space-2); }
  .rf-timeline__item { grid-template-columns: 1fr; gap: var(--space-2); }
  .rf-panel { position: static; }
}

/* The evidence table's Bill column carries "Senate Bill No. 29 of 2024", which
   wraps to four lines in a 25rem panel. Let it size to its content and give
   the stage column the slack instead. */
.rf-panel__table td:nth-child(3) a { white-space: nowrap; }
.rf-panel__table { table-layout: auto; }
.rf-panel__table th:nth-child(4), .rf-panel__table td:nth-child(4) { white-space: nowrap; }

/* --- Bills tab ------------------------------------------------------------
 * One card per curated Bill. The card carries the progress stepper from
 * `legislation/_bill_stepper.html` verbatim, so the geometry here is only the
 * frame around it — the steps themselves are that app's markup and CSS,
 * reused rather than reimplemented.
 *
 * The card stacks in source order at every width. A Bill's stage list is
 * vertical by nature, so there is nothing here that could grow a sideways
 * scrollbar (1.4.10 Reflow), and no breakpoint is needed. */
.rf-bills__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.rf-bills__stat { display: flex; flex-direction: column; gap: 2px; }
.rf-bills__num { font-size: var(--text-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rf-bills__lab { font-size: var(--text-xs); color: var(--colour-text-muted); }

.rf-bills { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; }

.rf-bills__card {
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
}

.rf-bills__ref {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
}
.rf-bills__title { margin-top: 2px; font-size: var(--text-lg); font-weight: 700; line-height: 1.3; }
.rf-bills__meta { margin-top: var(--space-2); font-size: var(--text-sm); }

/* A cross-House row is a finding, not a footnote: the Bill is numbered by one
   House and captured from the other (AGENTS.md 3b). Marked with a rule as well
   as a tint, because colour alone never carries meaning here (1.4.1). */
.rf-bills__warn {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--colour-warning);
  background: var(--colour-warning-bg);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.rf-bills__last { margin-top: var(--space-2); font-size: var(--text-sm); }
.rf-bills__src { color: var(--colour-text-muted); font-size: var(--text-xs); }
.rf-bills__commit { margin-top: var(--space-2); font-size: var(--text-sm); }
.rf-bills__dup { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--colour-text-muted); }

.rf-bills__h { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-2); }
.rf-bills__pending { margin-top: var(--space-3); padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-sm); }

/* A bicameral Bill gets one lane per House. The heading only appears when
   there are two, because on a single-House Bill the reference line above the
   card ("Senate Bill No. 9 of 2024") already says which. */
.rf-bills__lane + .rf-bills__lane { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--colour-border); }
.rf-bills__house { font-size: var(--text-sm); font-weight: 700; letter-spacing: .02em; }
.rf-bills__intro { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--colour-text-muted); }
.rf-bills__assent { margin-top: var(--space-2); font-size: var(--text-sm); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }

/* Laws tab. Two tables — principal Acts and subsidiary legislation — because
   they are different things with different dates, and one merged table would
   have to leave the assent column blank on more than half its rows. */
.rf-laws__blurb { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--colour-text-muted); }
.rf-laws__table th[scope="row"] { font-weight: 600; }

/* ── Participate: one card per invitation ────────────────────────────────────
   The state class is presentation only. Every window renders whatever its
   state — "closed" tones the card down, it never hides it, because a closed
   window is the record of what the public was asked about and when. */
.rf-bills__hn { margin-left: var(--space-2); font-weight: 400; color: var(--colour-text-muted); }

.rf-win {
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--colour-border-strong);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
}
.rf-win--closing_soon { border-left-color: var(--colour-primary); }
.rf-win--open { border-left-color: var(--colour-secondary); }
.rf-win--closed { border-left-color: var(--colour-border); background: var(--colour-lighter); }
.rf-win--cancelled { border-style: dashed; background: var(--colour-lighter); box-shadow: none; }
.rf-win--cancelled .rf-win__title { text-decoration: line-through; }

.rf-win__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.rf-win__title { flex: 1 1 20rem; min-width: 0; font-size: var(--text-base); font-weight: 700; margin: 0; }
.rf-win__state { white-space: nowrap; }

.rf-win__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}
.rf-win__facts dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--colour-text-muted); }
.rf-win__facts dd { margin: 0; font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; text-wrap: balance; }
.rf-win__note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--colour-text-muted); }

/* The scope's own exclusions, shown rather than asserted. Collapsed by default:
   a reader wants the instruments, and an auditor wants the rule. */
.rf-laws__scope { margin: var(--space-4) 0; padding: var(--space-3); border: 1px dashed var(--colour-border); border-radius: var(--radius-md); }
.rf-laws__scope > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; }

/* ── Timeline: an era ribbon over a dated feed ───────────────────────────────
   The era band is drawn for every era, INCLUDING empty ones: a period of
   Kenya's history we hold nothing for is a gap to show, not to omit. The
   left rail is the spine; each entry hangs off its own date. */
.rf-era { margin: var(--space-6) 0 0; }
.rf-era__band {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--colour-lighter);
  border-left: 4px solid var(--colour-primary);
}
.rf-era__span { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--colour-primary); }
.rf-era__label { flex: 1 1 18rem; margin: 0; font-size: var(--text-lg); font-weight: 700; }
.rf-era__n { font-size: var(--text-xs); color: var(--colour-text-muted); white-space: nowrap; }
.rf-era__blurb { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); color: var(--colour-text-muted); }

.rf-yr { margin-bottom: var(--space-4); }
.rf-yr__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rf-feed { list-style: none; margin: 0; padding: 0 0 0 var(--space-4); border-left: 2px solid var(--colour-border); }
.rf-feed__item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--colour-border);
}
.rf-feed__item:last-child { border-bottom: 0; }
.rf-feed__when { font-size: var(--text-xs); font-weight: 700; color: var(--colour-text-muted); font-variant-numeric: tabular-nums; padding-top: .15rem; }
.rf-feed__body { min-width: 0; }
.rf-feed__title { margin: 0; font-size: var(--text-sm); font-weight: 600; text-wrap: pretty; }
.rf-feed__kind { margin-left: var(--space-2); font-weight: 400; }
.rf-feed__detail { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--colour-text-muted); overflow-wrap: anywhere; }

/* The kind is carried by a badge, so the rail tint is a second, quieter cue
   rather than the only one — it must never be the sole carrier of meaning. */
.rf-feed__item--law { box-shadow: inset 3px 0 0 -1px var(--colour-primary); }
.rf-feed__item--bill { box-shadow: inset 3px 0 0 -1px var(--colour-secondary); }
.rf-feed__item--participation { box-shadow: inset 3px 0 0 -1px var(--colour-info); }

@media (max-width: 599px) {
  .rf-feed { padding-left: var(--space-3); }
  .rf-feed__item { grid-template-columns: 1fr; gap: var(--space-1); }
}
/* What kind of date this is — assented, recorded, published by the source. The
   lanes do not all measure the same thing and a bare date would be read as if
   they did. */
.rf-feed__basis { display: block; font-weight: 400; font-size: .68rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .03em; }

/* ── Story-first composition ────────────────────────────────────────────────
   The warehouse remains complete; this layer changes the order in which a
   reader meets it. Strong summaries lead, native disclosures carry method and
   exhaustive sequences, and the same URLs still reach the underlying record. */
.page-electoral-reforms .page-band { min-height: 17rem; display: grid; align-items: center; }
.page-electoral-reforms .page-heading { max-width: 18ch; text-wrap: balance; }
.page-electoral-reforms .rf-hero-lead {
  max-width: 54rem;
  color: color-mix(in srgb, currentColor 86%, transparent);
  font-size: clamp(var(--text-base), 1.4vw, var(--text-lg));
  line-height: 1.55;
  text-wrap: pretty;
}

.rf-subnav {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
  margin: var(--space-4) 0 var(--space-5);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.rf-subnav__label {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.rf-subnav ul { flex: 1 1 auto; justify-content: flex-end; gap: 0; }
.rf-subnav li { display: flex; }
.rf-subnav a {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  border-bottom: 3px solid transparent;
  padding-inline: var(--space-3);
  white-space: nowrap;
}
.rf-subnav a.is-active { background: var(--colour-bg-subtle); }
.rf-subnav__step { color: var(--colour-text-muted); font-size: .67rem; letter-spacing: .04em; }

.rf-sec { padding-block: var(--space-6); }
.rf-sec + .rf-sec { border-top: 0; }
.rf-sec > h2,
.rf-story-intro__copy > h2,
.rf-overview-story__lead > h2 {
  max-width: 28ch;
  margin: 0 0 var(--space-3);
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-3xl));
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.rf-sec__standfirst { max-width: 54rem; font-size: var(--text-base); line-height: 1.65; }
.rf-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--colour-primary);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rf-overview-story {
  display: grid;
  grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.6fr);
  gap: var(--space-6);
  align-items: end;
}
.rf-overview-story__lead > p:last-child { max-width: 36rem; color: var(--colour-text-light); line-height: 1.7; }
.rf-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.rf-story-card {
  display: flex;
  min-height: 17rem;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--colour-border);
  border-top: 4px solid var(--colour-primary);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  color: inherit;
  box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--colour-text) 8%, transparent);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rf-story-card:nth-child(2) { border-top-color: var(--colour-secondary); }
.rf-story-card:nth-child(3) { border-top-color: var(--colour-info); }
.rf-story-card:hover,
.rf-story-card:focus-visible {
  border-color: var(--colour-border-strong);
  box-shadow: 0 1.25rem 3rem color-mix(in srgb, var(--colour-text) 13%, transparent);
  transform: translateY(-3px);
}
.rf-story-card__step { color: var(--colour-text-muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.rf-story-card > strong { margin-top: var(--space-5); font-size: var(--text-xl); line-height: 1.15; text-wrap: balance; }
.rf-story-card > strong + span { margin-top: var(--space-3); color: var(--colour-text-light); font-size: var(--text-sm); line-height: 1.55; }
.rf-story-card__action { margin-top: auto; padding-top: var(--space-5); color: var(--colour-primary); font-size: var(--text-sm); font-weight: 700; }

.rf-method {
  margin: var(--space-4) 0;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.rf-method > summary,
.rf-era__archive > summary,
.rf-bills__journey > summary {
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  color: var(--colour-text);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.rf-method > p,
.rf-method__body {
  max-width: 62rem;
  padding: 0 var(--space-4) var(--space-4);
  color: var(--colour-text-light);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.rf-method__body > * + * { margin-top: var(--space-3); }
.rf-story-note {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--colour-info);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--colour-info-bg);
  color: var(--colour-text-light);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.rf-window {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  box-shadow: var(--shadow-sm);
}
.rf-window__notes { display: block; margin-top: var(--space-5); }
.rf-window__note { margin: 0; }
.rf-window__note + .rf-window__note { margin-top: var(--space-3); }
.rf-comp__cell,
.rf-people__card,
.rf-win,
.rf-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.rf-comp__cell:hover,
.rf-people__card:hover,
.rf-win:hover,
.rf-card:hover { border-color: var(--colour-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.rf-story-intro {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(24rem, 1.25fr);
  gap: var(--space-6);
  align-items: end;
}
.rf-story-intro .rf-bills__stats,
.rf-roadmap-intro .rf-bills__stats { margin: 0; }
.rf-bills__stats {
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.rf-bills__stat { min-width: 7rem; }
.rf-bills__num { font-size: var(--text-3xl); letter-spacing: -.04em; }

.rf-chapter-map {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  grid-column: 1 / -1;
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}
.rf-chapter-map a {
  display: flex;
  min-height: 10rem;
  flex-direction: column;
  padding: var(--space-4);
  border: 1px solid var(--colour-border);
  border-bottom: 4px solid var(--colour-primary);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  color: inherit;
  text-decoration: none;
}
.rf-chapter-map a:hover { background: var(--colour-bg-subtle); border-color: var(--colour-primary); }
.rf-chapter-map strong { margin-top: var(--space-3); font-size: var(--text-sm); line-height: 1.3; text-wrap: balance; }
.rf-chapter-map strong + span { margin-top: auto; padding-top: var(--space-3); color: var(--colour-text-muted); font-size: var(--text-xs); }
.rf-chapter-map__span { color: var(--colour-primary); font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums; }

.rf-explore {
  margin: var(--space-6) 0 var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.rf-explore__head h2 { margin: 0; font-size: var(--text-lg); }
.rf-explore .rf-filterbar { padding: 0; border: 0; background: transparent; }
.rf-filterbar {
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}

.rf-era { scroll-margin-top: var(--space-5); }
.rf-era__band { padding-block: var(--space-4); background: var(--colour-bg-subtle); }
.rf-era__label { font-size: var(--text-xl); letter-spacing: -.015em; }
.rf-era__blurb { max-width: 62rem; margin-bottom: var(--space-5); line-height: 1.65; }
.rf-era__archive {
  margin: var(--space-4) 0 var(--space-6);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.rf-era__archive > summary { color: var(--colour-primary); }
.rf-era__archive-body { padding: var(--space-2) var(--space-4) var(--space-4); background: var(--colour-bg); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.rf-feed__item { padding: var(--space-4); }
.rf-feed__item:hover { background: var(--colour-bg-subtle); }
.rf-feed__title { font-size: var(--text-base); }

.rf-bills { grid-template-columns: repeat(auto-fit, minmax(min(27rem, 100%), 1fr)); align-items: start; gap: var(--space-5); }
.rf-bills__card { padding: var(--space-5); box-shadow: var(--shadow-sm); }
.rf-bills__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, .42fr); gap: var(--space-4); align-items: start; }
.rf-bills__position {
  display: flex;
  min-height: 8rem;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3);
  border-left: 4px solid var(--colour-info);
  border-radius: var(--radius-sm);
  background: var(--colour-info-bg);
}
.rf-bills__position--assented { border-left-color: var(--colour-success); background: var(--colour-success-bg); }
.rf-bills__position--introduced { border-left-color: var(--colour-warning); background: var(--colour-warning-bg); }
.rf-bills__position-label { color: var(--colour-text-muted); font-size: .67rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.rf-bills__position strong { margin-top: var(--space-2); font-size: var(--text-base); line-height: 1.2; }
.rf-bills__position strong + span { margin-top: var(--space-1); color: var(--colour-text-light); font-size: var(--text-xs); }
.rf-bills__journey { margin-top: var(--space-4); border-top: 1px solid var(--colour-border); }
.rf-bills__journey > summary { padding-inline: 0; color: var(--colour-primary); }
.rf-bills__journey > summary span { margin-left: var(--space-2); color: var(--colour-text-muted); font-size: var(--text-xs); font-weight: 500; }
.rf-bills__journey-body { padding-top: var(--space-2); }
.rf-bill-brief {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-left: 4px solid var(--colour-secondary);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.rf-bill-brief h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.rf-bill-brief .rf-brief__summary { margin-bottom: var(--space-2); font-size: var(--text-base); }
.rf-bill-brief details { margin-top: var(--space-3); border-top: 1px solid var(--colour-border); }
.rf-bill-brief details > summary { padding: var(--space-3) 0 0; color: var(--colour-primary); font-weight: 750; }
.rf-bill-brief ol { display: grid; gap: var(--space-2); margin-bottom: 0; padding-left: var(--space-5); }
.rf-bill-brief-pending { margin: var(--space-3) 0 0; color: var(--colour-text-muted); font-size: var(--text-sm); }

.rf-learn-intro { padding-bottom: var(--space-4); }
.rf-learn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.rf-learn-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-height: 15rem;
  padding: var(--space-5);
  border: 1px solid var(--colour-border);
  border-top: 5px solid var(--colour-primary);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  box-shadow: var(--shadow-sm);
  color: var(--colour-text);
  text-decoration: none;
}
.rf-learn-card:hover { border-color: var(--colour-primary); box-shadow: var(--shadow-md); }
.rf-learn-card__number { color: var(--colour-secondary); font-size: var(--text-3xl); font-weight: 850; line-height: 1; }
.rf-learn-card__title { color: var(--colour-primary); font-size: var(--text-xl); font-weight: 800; line-height: 1.2; }
.rf-learn-card small { margin-top: auto; color: var(--colour-text-muted); }
.rf-vote-journey {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
  counter-reset: vote-step;
}
.rf-vote-journey li {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-height: 10rem;
  padding: var(--space-4);
  background: var(--colour-bg-subtle);
  counter-increment: vote-step;
}
.rf-vote-journey li::before { content: counter(vote-step, decimal-leading-zero); color: var(--colour-secondary); font-weight: 850; }
.rf-vote-journey strong { color: var(--colour-primary); font-size: var(--text-lg); }
.rf-vote-journey span { color: var(--colour-text-muted); font-size: var(--text-sm); }

.rf-roadmap-intro { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(22rem, .9fr); gap: var(--space-6); align-items: end; }
.rf-board { grid-template-columns: 1fr; align-items: start; }
.rf-board__col { padding: var(--space-3); border-radius: var(--radius-md); background: var(--colour-bg-subtle); }
.rf-board__col > h3 { border: 0; padding: var(--space-2); }
.rf-board__col ol { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); align-items: start; }
.rf-card { box-shadow: none; }

.rf-pending { border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-bg-subtle); }
.rf-pending > summary {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
}
.rf-pending > summary span { color: var(--colour-primary); font-size: var(--text-sm); font-weight: 700; }
.rf-pending__body { padding: 0 var(--space-4) var(--space-5); }

.rf-brief-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  max-width: 58rem;
  margin-inline: auto;
}
.rf-language {
  display: inline-flex;
  width: fit-content;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.rf-language a {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--colour-text);
  font-weight: 700;
  text-decoration: none;
}
.rf-language a[aria-current="page"] { background: var(--colour-primary); color: var(--colour-bg); }
.rf-record-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.rf-record-meta > div { padding: var(--space-4); }
.rf-record-meta > div + div { border-left: 1px solid var(--colour-border); }
.rf-record-meta dt { color: var(--colour-text-muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.rf-record-meta dd { margin: var(--space-1) 0 0; font-weight: 700; }
.rf-translation-note {
  padding: var(--space-4);
  border-left: 4px solid var(--colour-warning);
  border-radius: var(--radius-sm);
  background: var(--colour-warning-bg);
}
.rf-translation-note strong { display: block; margin-bottom: var(--space-1); }
.rf-brief {
  padding: clamp(var(--space-5), 5vw, var(--space-7));
  border: 1px solid var(--colour-border);
  border-top: 5px solid var(--colour-primary);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  box-shadow: var(--shadow-md);
}
.rf-brief h2 { max-width: 20ch; margin-top: 0; font-size: var(--text-2xl); text-wrap: balance; }
.rf-brief__summary { max-width: 48rem; font-size: var(--text-xl); font-weight: 650; line-height: 1.45; text-wrap: pretty; }
.rf-brief__why,
.rf-brief__next { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--colour-bg-subtle); }
.rf-brief__why h3,
.rf-brief__next h3 { margin-top: 0; }
.rf-claim-source { color: var(--colour-text-muted); font-size: var(--text-sm); }
.rf-brief__points { margin-top: var(--space-5); border: 1px solid var(--colour-border); border-radius: var(--radius-md); }
.rf-brief__points > summary { color: var(--colour-primary); font-weight: 800; }
.rf-brief__points ol { display: grid; gap: var(--space-3); margin: 0; padding: 0 var(--space-5) var(--space-5) 3rem; }
.rf-brief__points li { padding-left: var(--space-2); }
.rf-brief__points li p { margin-bottom: var(--space-1); }
.rf-brief__review { margin: var(--space-5) 0 0; color: var(--colour-text-muted); font-size: var(--text-sm); }
.rf-brief--pending { border-top-color: var(--colour-border-strong); box-shadow: none; }
.rf-full-record { padding: var(--space-5); border-radius: var(--radius-md); background: var(--colour-bg-subtle); }
.rf-full-record h2 { margin-top: 0; }
.rf-full-record .btn + .btn { margin-left: var(--space-2); }
.rf-evidence-list { display: grid; gap: var(--space-3); margin: 0; padding-left: 1.4rem; }
.rf-evidence-list li { padding-left: var(--space-2); }
.rf-evidence-list a { display: block; font-weight: 750; }
.rf-evidence-list span { display: block; margin-top: var(--space-1); color: var(--colour-text-muted); font-size: var(--text-sm); }

.rf-faq-list {
  display: grid;
  gap: var(--space-3);
  max-width: 58rem;
  margin: var(--space-5) auto 0;
}
.rf-learn-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rf-translation-pending {
  width: fit-content;
  margin: var(--space-2) 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--colour-warning-bg);
  color: var(--colour-text);
  font-size: var(--text-xs);
  font-weight: 800;
}
.rf-faq-card {
  overflow: clip;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  box-shadow: var(--shadow-sm);
}
.rf-faq-card[open] { border-color: var(--colour-primary); box-shadow: var(--shadow-md); }
.rf-faq-card > summary {
  display: grid;
  gap: var(--space-2);
  min-height: 4.5rem;
  padding: var(--space-5);
  cursor: pointer;
  list-style: none;
}
.rf-faq-card > summary::-webkit-details-marker { display: none; }
.rf-faq-card > summary::after {
  content: "+";
  grid-area: 1 / 2 / span 2;
  align-self: center;
  color: var(--colour-secondary);
  font-size: var(--text-2xl);
  font-weight: 850;
}
.rf-faq-card[open] > summary::after { content: "−"; }
.rf-faq-card__question {
  grid-column: 1;
  color: var(--colour-primary);
  font-size: var(--text-xl);
  font-weight: 850;
  line-height: 1.25;
  text-wrap: balance;
}
.rf-faq-card__answer { grid-column: 1 / -1; max-width: 48rem; font-size: var(--text-lg); line-height: 1.5; }
.rf-faq-card__action { grid-column: 1 / -1; color: var(--colour-text-muted); font-size: var(--text-sm); font-weight: 750; }
.rf-faq-card__body { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--colour-border); }
.rf-faq-card__body > .prose { padding-top: var(--space-4); }
.rf-faq-card__evidence { margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--colour-bg-subtle); }
.rf-faq-card__evidence h3 { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.rf-faq-card__evidence dl { display: grid; gap: var(--space-3); margin: 0; }
.rf-faq-card__evidence dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); }
.rf-faq-card__evidence dt { color: var(--colour-text-muted); font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; }
.rf-faq-card__evidence dd { margin: 0; }
.rf-faq-card__evidence dd span { display: block; color: var(--colour-text-muted); font-size: var(--text-sm); }

.rf-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.rf-media-card {
  overflow: clip;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  box-shadow: var(--shadow-sm);
}
.rf-media-card__visual { display: grid; place-items: center; min-height: 15rem; background: var(--colour-primary); }
.rf-media-card__visual iframe,
.rf-media-card__visual img { display: block; width: 100%; border: 0; aspect-ratio: 16 / 9; object-fit: cover; }
.rf-media-card__visual audio { width: calc(100% - var(--space-6)); }
.rf-media-card__audio-mark,
.rf-media-card__article-mark { color: var(--colour-bg); font-size: var(--text-3xl); font-weight: 850; letter-spacing: -.03em; }
.rf-media-card__body { padding: var(--space-5); }
.rf-media-card__body h2 { margin-top: 0; color: var(--colour-primary); font-size: var(--text-xl); text-wrap: balance; }
.rf-media-card__access { color: var(--colour-success); font-size: var(--text-sm); font-weight: 800; }
.rf-media-card__transcript { margin-top: var(--space-4); border-top: 1px solid var(--colour-border); }
.rf-media-card__transcript > summary { padding: var(--space-4) 0; color: var(--colour-primary); font-weight: 800; }
.rf-media-card__transcript .prose { max-height: 22rem; overflow: auto; padding: 0 var(--space-2) var(--space-3); }

.rf-calendar-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .55fr);
  gap: var(--space-6);
  align-items: end;
}
.rf-calendar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.rf-calendar-scope {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: var(--space-5) 0;
  padding: var(--space-2);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg-subtle);
}
.rf-calendar-scope > span { padding-inline: var(--space-2); color: var(--colour-text-muted); font-size: var(--text-sm); font-weight: 800; }
.rf-calendar-scope a {
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--colour-text);
  font-weight: 750;
  text-decoration: none;
}
.rf-calendar-scope a[aria-current="page"] { background: var(--colour-primary); color: var(--colour-bg); }
.rf-calendar-month { margin-top: var(--space-7); }
.rf-calendar-month > h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 3px solid var(--colour-primary);
}
.rf-calendar-month > h2 span { color: var(--colour-text-muted); font-size: var(--text-sm); }
.rf-calendar-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.rf-calendar-event {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--colour-bg);
  box-shadow: var(--shadow-sm);
}
.rf-calendar-event--cancelled { border-style: dashed; box-shadow: none; }
.rf-calendar-event--cancelled h3 { text-decoration: line-through; }
.rf-calendar-date {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--space-3);
  background: var(--colour-primary);
  color: var(--colour-bg);
  text-align: center;
}
.rf-calendar-date time,
.rf-calendar-date__unknown { display: grid; gap: var(--space-1); }
.rf-calendar-date time > span,
.rf-calendar-date__unknown { font-size: var(--text-3xl); font-weight: 850; line-height: 1; }
.rf-calendar-date small { font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rf-calendar-event__body { min-width: 0; padding: var(--space-4) var(--space-5); }
.rf-calendar-event__head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.rf-calendar-event__head h3 { flex: 1 1 28rem; margin: 0; color: var(--colour-primary); font-size: var(--text-xl); }
.rf-calendar-deadline { margin: var(--space-2) 0 var(--space-3); font-weight: 800; }
.rf-calendar-facts { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; }
.rf-calendar-facts div { max-width: 30rem; }
.rf-calendar-facts dt { color: var(--colour-text-muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.rf-calendar-facts dd { margin: var(--space-1) 0 0; }
.rf-calendar-event__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.rf-calendar-event__links a { font-weight: 750; }

@media (max-width: 1100px) {
  .rf-subnav { display: block; padding-top: var(--space-2); }
  .rf-subnav__label { padding-block: var(--space-2); }
  .rf-subnav ul { justify-content: flex-start; }
  .rf-overview-story { grid-template-columns: 1fr; align-items: start; }
  .rf-story-intro { grid-template-columns: 1fr; align-items: start; }
  .rf-chapter-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page-electoral-reforms .page-band { min-height: 14rem; }
  .rf-subnav { overflow: visible; }
  .rf-subnav__label { padding-inline: var(--space-3); }
  .rf-subnav ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
  .rf-subnav li { display: block; min-width: 0; }
  .rf-subnav a {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 3.5rem;
    padding: var(--space-2);
    text-align: center;
    white-space: normal;
  }
  .rf-sec { padding-block: var(--space-5); }
  .rf-story-grid { grid-template-columns: 1fr; }
  .rf-story-card { min-height: 13rem; }
  .rf-chapter-map { grid-template-columns: 1fr 1fr; }
  .rf-chapter-map a { min-height: 9rem; }
  .rf-window { padding: var(--space-4); }
  .rf-bills__head { grid-template-columns: 1fr; }
  .rf-learn-grid { grid-template-columns: 1fr; }
  .rf-learn-card { min-height: auto; }
  .rf-media-grid { grid-template-columns: 1fr; }
  .rf-vote-journey { grid-template-columns: 1fr 1fr; }
  .rf-bills__position { min-height: auto; }
  .rf-roadmap-intro { grid-template-columns: 1fr; }
  .rf-calendar-intro { grid-template-columns: 1fr; }
  .rf-calendar-actions { justify-content: flex-start; }
  .rf-board__col { padding: var(--space-2); }
  .rf-record-meta { grid-template-columns: 1fr; }
  .rf-record-meta > div + div { border-top: 1px solid var(--colour-border); border-left: 0; }
}

@media (max-width: 460px) {
  .rf-chapter-map { grid-template-columns: 1fr; }
  .rf-bills__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .rf-bills__stat { min-width: 0; }
  .rf-explore { padding: var(--space-3); }
  .rf-full-record .btn { width: 100%; }
  .rf-full-record .btn + .btn { margin-top: var(--space-2); margin-left: 0; }
  .rf-calendar-event { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .rf-calendar-date { min-height: 7rem; padding: var(--space-2); }
  .rf-calendar-event__body { padding: var(--space-4); }
  .rf-calendar-actions .btn { width: 100%; }
  .rf-faq-card > summary,
  .rf-faq-card__body { padding-inline: var(--space-4); }
  .rf-faq-card__evidence dl > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-story-card,
  .rf-comp__cell,
  .rf-people__card,
  .rf-faq-card,
  .rf-media-card,
  .rf-win,
  .rf-card { transition: none; }
}