/* 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); }

/* --- Scaffold tabs -------------------------------------------------------- */
.rf-scaffold {
  max-width: var(--measure-lead-len);
  padding: var(--space-6) 0;
}

.rf-scaffold h2 { margin-bottom: var(--space-3); }
.rf-scaffold p { color: var(--colour-text-light); font-size: var(--text-base); line-height: 1.7; }
.rf-scaffold__ticket { margin-top: var(--space-4); color: var(--colour-text-muted); 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 ---------------------------------------------------- */
.rf-hero-lead {
  max-width: 46rem;
  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-len);
  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); }

/* --- People --------------------------------------------------------------- */
.rf-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin: var(--space-4) 0; }
.rf-filters__field { display: grid; gap: var(--space-1); }
.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__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-len); 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; }