/* Legislative Trends — themed to the Mzalendo palette (CSS vars from core.css).
   All sizing, radii and colour come from the core.css design tokens so this
   section reads as one consistent system with the rest of the site. */

/* Hold list/detail content to a comfortable measure rather than the full
   1600px container, so long titles and meta rows don't sprawl on desktop. */
.leg-subnav,
.leg-toggle,
.leg-filters,
.leg-card,
.leg-grid,
.q-stats,
.bill-summary,
.bill-legend,
.bill-row,
.q-card,
.tl-feed,
.tl-chips,
.tl-daterange,
.billtrack,
.leg-freshness,
.bill-detail__header,
.bill-detail__cols,
.participate-form {
  max-width: var(--container-max, 1400px);
}

.leg-subnav { border-bottom: 2px solid var(--colour-border); margin: 0 0 var(--space-5); }
.leg-subnav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); list-style: none; padding: 0; margin: 0; }
.leg-subnav a { display: inline-block; padding: var(--space-3) var(--space-1); color: var(--colour-text); text-decoration: none; font-weight: var(--fw-semibold); border-bottom: 3px solid transparent; transition: color var(--motion-fast, .15s) var(--ease-standard); }
.leg-subnav a:hover { color: var(--colour-primary); }
.leg-subnav a:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.leg-subnav a.is-active { color: var(--colour-primary); border-bottom-color: var(--colour-primary); }

.leg-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin: 0 0 var(--space-5); }
.leg-filters > div { display: flex; flex-direction: column; }
.leg-filters .grow { flex: 1 1 18rem; min-width: 0; }
.leg-filters label { display: block; font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .03em; color: var(--colour-text-muted); margin-bottom: var(--space-1); }
.leg-filters input, .leg-filters select { padding: var(--space-2) var(--space-3); border: 1px solid var(--colour-border-strong); border-radius: var(--radius-md); font: inherit; background: var(--colour-bg); color: var(--colour-text); min-height: 2.5rem; transition: border-color var(--motion-fast, .15s) var(--ease-standard), box-shadow var(--motion-fast, .15s) var(--ease-standard); }
.leg-filters input:focus, .leg-filters select:focus { outline: none; border-color: var(--colour-primary); box-shadow: 0 0 0 3px var(--colour-primary-alpha-20); }
.leg-filters button { padding: var(--space-2) var(--space-5); min-height: 2.5rem; background: var(--colour-primary); color: #fff; border: 1px solid var(--colour-primary); border-radius: var(--radius-md); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--motion-fast, .15s) var(--ease-standard), box-shadow var(--motion-fast, .15s) var(--ease-standard); }
.leg-filters button:hover { background: var(--colour-primary-dark); box-shadow: var(--shadow-sm); }
.leg-filters button:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }

.leg-toggle { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.leg-toggle a { padding: var(--space-2) var(--space-4); border: 1px solid var(--colour-border-strong); border-radius: var(--radius-pill); text-decoration: none; color: var(--colour-text); font-size: var(--text-sm); font-weight: var(--fw-semibold); transition: border-color var(--motion-fast, .15s) var(--ease-standard), color var(--motion-fast, .15s) var(--ease-standard); }
.leg-toggle a:hover { border-color: var(--colour-primary); color: var(--colour-primary); }
.leg-toggle a:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }
.leg-toggle a.is-active { background: var(--colour-primary); color: #fff; border-color: var(--colour-primary); }

.leg-card { border: 1px solid var(--colour-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); background: var(--colour-bg); box-shadow: var(--shadow-sm); }
.leg-card__title { font-size: var(--text-lg); font-weight: var(--fw-bold); line-height: var(--leading-snug); margin: 0 0 var(--space-2); color: var(--colour-text); }
.leg-card__title a { color: inherit; text-decoration: none; }
.leg-card__title a:hover { color: var(--colour-primary); }
.leg-card__title a:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.leg-card__meta { font-size: var(--text-sm); color: var(--colour-text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.leg-card__meta a { color: var(--colour-primary); text-decoration: none; }
.leg-card__meta a:hover { text-decoration: underline; }
.leg-badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .02em; background: var(--colour-primary-alpha-10); color: var(--colour-primary); }
.leg-badge--success { background: var(--colour-success-bg); color: var(--colour-success); }
.leg-badge--warning { background: var(--colour-warning-bg); color: var(--colour-warning); }
.leg-badge--danger { background: var(--colour-danger-bg); color: var(--colour-danger); }
.leg-badge--muted { background: var(--colour-lighter); color: var(--colour-text-muted); }

/* Clickable list cards (Motions, Petitions): the whole card is a link to the
   detail page, with a separate Preview button that opens the drawer fragment.
   Mirrors the Bill-tracker .bt-row pattern (link + preview) so click reaches
   the full detail page AND the preview works. */
.leg-card--linked { display: flex; align-items: stretch; gap: var(--space-3); padding: 0; overflow: hidden; transition: box-shadow var(--motion-fast, .15s) ease, border-color var(--motion-fast, .15s) ease, transform var(--motion-fast, .15s) ease; }
.leg-card--linked:hover, .leg-card--linked:focus-within { border-color: var(--colour-primary); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.1)); transform: translateY(-1px); }
.leg-card__link { flex: 1 1 auto; display: block; min-width: 0; padding: var(--space-4) 0 var(--space-4) var(--space-5); color: var(--colour-text); text-decoration: none; }
.leg-card__link:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: -2px; }
.leg-card__link .leg-card__title { display: block; margin-bottom: var(--space-2); }
.leg-card__link:hover .leg-card__title { color: var(--colour-primary); }
.leg-card__preview { flex: none; align-self: center; margin: 0 var(--space-4) 0 var(--space-1); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--colour-primary); background: var(--colour-bg); border: 1px solid var(--colour-border-strong); border-radius: var(--radius-pill, 999px); cursor: pointer; white-space: nowrap; transition: border-color var(--motion-fast, .15s) ease, background var(--motion-fast, .15s) ease; }
.leg-card__preview:hover { border-color: var(--colour-primary); background: var(--colour-primary-alpha-10, var(--colour-bg-subtle)); }
.leg-card__preview:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 1px; }

/* Bill stage tracker — horizontal stepper (parliamentwatch-style). */
.bill-tracker { display: flex; margin: var(--space-3) 0 var(--space-1); counter-reset: step; overflow-x: auto; }
.bill-tracker__step { flex: 1 1 0; text-align: center; position: relative; font-size: var(--text-xs); color: var(--colour-text-muted); min-width: 80px; }
.bill-tracker__step::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--colour-light); margin: 0 auto var(--space-2); position: relative; z-index: 1; }
.bill-tracker__step::after { content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 3px; background: var(--colour-light); z-index: 0; }
.bill-tracker__step:first-child::after { display: none; }
.bill-tracker__step.is-done::before { background: var(--colour-secondary); }
.bill-tracker__step.is-done::after { background: var(--colour-secondary); }
/* Current-but-unreached stage = amber (in progress), NOT red — red would read
   as "rejected" on a passing bill. Completed stages are green (.is-done). */
.bill-tracker__step.is-current::before { background: var(--colour-warning); box-shadow: 0 0 0 3px var(--colour-warning-bg); }
.bill-tracker__step.is-current { color: var(--colour-warning); font-weight: var(--fw-bold); }

/* Legend above the bill list */
.bill-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--colour-text-muted); }
.bill-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.bill-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.bill-legend .done { background: var(--colour-secondary); }
.bill-legend .current { background: var(--colour-warning); }
.bill-legend .pending { background: var(--colour-light); }

/* Section landing grid — capped at 3 columns; each tile leads with its title,
   with the count rendered as a clean tabular stat beneath. */
.leg-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0 0 var(--space-6); }
@media (min-width: 560px) { .leg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .leg-grid { grid-template-columns: repeat(3, 1fr); } }
.leg-grid .leg-card { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: 0; min-height: 100%; text-decoration: none; transition: box-shadow var(--motion-fast, .15s) ease, transform var(--motion-fast, .15s) ease, border-color var(--motion-fast, .15s) ease; }
.leg-grid a.leg-card:hover, .leg-grid a.leg-card:focus-visible { border-color: var(--colour-primary); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.1)); transform: translateY(-2px); outline: none; }
.leg-grid a.leg-card:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }
.leg-grid a.leg-card:hover .leg-card__title { color: var(--colour-primary); }
.leg-grid .leg-card .leg-card__title { order: 1; margin: 0; }
.leg-grid .leg-card .leg-card__meta { order: 3; }
.leg-grid .leg-card .num { order: 2; font-size: var(--text-3xl); font-weight: var(--fw-extrabold); line-height: 1.05; color: var(--colour-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: var(--space-1) 0 var(--space-2); }
.leg-freshness { font-size: var(--text-sm); color: var(--colour-text-muted); margin: var(--space-5) 0 var(--space-4); }

/* Public participation ("Submit Your Views") form */
.participate-form { max-width: var(--container-narrow, 720px); margin: var(--space-5) 0 var(--space-7); }
/* Here `.field` is a label+input layout wrapper, not an input. Reset the global
   pill-input `.field` box styling (components.css) so the wrapper doesn't get a
   999px pill border that renders as a warped blob around each row. */
.participate-form .field { margin-bottom: var(--space-5); display: flex; flex-direction: column;
  padding: 0; border: 0; background: none; border-radius: 0; }
.participate-form .field__label,
.participate-form legend.field__label { font-weight: var(--fw-bold); margin-bottom: var(--space-2); color: var(--colour-text); }
.participate-form .field__input,
.participate-form input[type="text"],
.participate-form input[type="email"],
.participate-form textarea {
  width: 100%; padding: var(--space-3) var(--space-4); font: inherit;
  border: 1px solid var(--colour-border-strong); border-radius: var(--radius-md, 8px);
  background: var(--colour-bg); color: var(--colour-text);
  transition: border-color var(--motion-fast, .15s) var(--ease-standard), box-shadow var(--motion-fast, .15s) var(--ease-standard);
}
.participate-form .field__input:focus,
.participate-form input[type="text"]:focus,
.participate-form input[type="email"]:focus,
.participate-form textarea:focus { outline: none; border-color: var(--colour-primary); box-shadow: 0 0 0 3px var(--colour-primary-alpha-20); }
.participate-form textarea { min-height: 8rem; resize: vertical; line-height: var(--leading-normal); }
.participate-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.participate-stance__options { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.participate-stance__opt {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--colour-border-strong); border-radius: var(--radius-pill, 999px);
  cursor: pointer; background: var(--colour-bg-subtle); font-weight: var(--fw-medium);
  transition: border-color var(--motion-fast, .15s) ease, background var(--motion-fast, .15s) ease;
}
.participate-stance__opt:hover { border-color: var(--colour-primary); }
.participate-stance__opt:has(input:checked) {
  border-color: var(--colour-primary);
  background: var(--colour-primary-alpha-10, rgba(165,30,39,.1));
  font-weight: var(--fw-bold);
}
.participate-consent { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-5); cursor: pointer; }
.participate-consent input { margin-top: var(--space-1); }
.field__error { color: var(--colour-primary); font-size: var(--text-sm); margin-top: var(--space-2); }
.participate-thanks {
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5); margin: var(--space-5) 0;
  border: 1px solid var(--colour-border); border-left: 4px solid var(--colour-secondary);
  border-radius: var(--radius-lg, 12px); background: var(--colour-bg-subtle); box-shadow: var(--shadow-sm);
}
.participate-thanks__icon { color: var(--colour-secondary); font-size: var(--text-2xl); }
.participate-thanks__title { font-weight: var(--fw-extrabold); font-size: var(--text-lg); }

/* Pagination links (Bill/Act/Timeline lists) — match the shared .pager look. */
.leg-pagination { display: flex; gap: var(--space-3); align-items: center; justify-content: center; margin: var(--space-6) 0; flex-wrap: wrap; }
.leg-pagination a {
  display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--colour-border-strong); border-radius: var(--radius-pill, 999px);
  color: var(--colour-primary); text-decoration: none; font-weight: var(--fw-semibold);
  transition: background var(--motion-fast, .15s) var(--ease-standard), color var(--motion-fast, .15s) var(--ease-standard), border-color var(--motion-fast, .15s) var(--ease-standard);
}
.leg-pagination a:hover,
.leg-pagination a:focus-visible { background: var(--colour-primary); color: #fff; border-color: var(--colour-primary); }
.leg-pagination a:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }
.leg-pagination span { color: var(--colour-text-muted); font-size: var(--text-sm); }

/* Bills with no mapped stage: a muted status line instead of an empty grey tracker */
.bill-nostage { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); color: var(--colour-text-muted); font-style: italic; }

/* ---- WS-B: pipeline summary band + bill detail page ---- */
.bill-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }
.bill-summary__cell { flex: 1 1 9rem; text-decoration: none; padding: var(--space-3) var(--space-4); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-bg); color: var(--colour-text); text-align: center; }
.bill-summary__cell:hover { border-color: var(--colour-primary); box-shadow: var(--shadow-sm); }
.bill-summary__cell.is-active { border-color: var(--colour-primary); background: var(--colour-primary-alpha-10); }
.bill-summary__cell--terminal.is-active { border-color: var(--colour-danger); background: var(--colour-danger-bg); }
.bill-summary__num { display: block; font-size: var(--text-2xl); font-weight: var(--fw-extrabold); color: var(--colour-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.bill-summary__cell--terminal .bill-summary__num { color: var(--colour-danger); }
.bill-summary__lbl { display: block; font-size: var(--text-sm); color: var(--colour-text-muted); }
.bill-tracker--full .bill-tracker__step { min-width: 110px; font-size: var(--text-sm); }
.bill-detail__header { margin: var(--space-4) 0 var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--colour-border); }
.bill-detail__title { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); line-height: var(--leading-tight); letter-spacing: -0.01em; margin: 0 0 var(--space-3); }
.bill-detail__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--colour-text-muted); align-items: center; }
.bill-detail__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }
.bill-mentions { list-style: none; padding: 0; margin: 0; }
.bill-mentions li { display: flex; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--colour-border); font-size: var(--text-sm); }
.bill-mentions__date { color: var(--colour-text-muted); min-width: 6.5rem; }
.bill-detail__fulllink { font-weight: 600; }

/* ---- Detail modal (bills + questions) ---- */

/* ---- Bill rows: clean parlimeter-style clickable cards (stage tracker = centerpiece) ---- */
.bill-row { display: block; border: 1px solid var(--colour-border); border-radius: var(--radius-lg, 12px); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); background: var(--colour-bg); color: var(--colour-text); text-decoration: none; box-shadow: var(--shadow-sm); transition: box-shadow var(--motion-fast, .15s) ease, border-color var(--motion-fast, .15s) ease, transform var(--motion-fast, .15s) ease; }
.bill-row:hover, .bill-row:focus-visible { border-color: var(--colour-primary); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.1)); transform: translateY(-1px); outline: none; }
.bill-row__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.bill-row__title { font-size: var(--text-lg); font-weight: var(--fw-bold); line-height: var(--leading-snug); margin: 0; color: var(--colour-text); }
.bill-row__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--colour-text-muted); }
.bill-row .bill-tracker { margin-top: var(--space-4); margin-bottom: var(--space-1); }

/* ---- Questions: stats band + cards + detail ---- */
.q-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); }
.q-stat { padding: var(--space-4) var(--space-4); border: 1px solid var(--colour-border); border-radius: var(--radius-md, 8px); background: var(--colour-bg); text-align: center; box-shadow: var(--shadow-sm); }
.q-stat__num { display: block; font-size: var(--text-2xl); font-weight: var(--fw-extrabold); color: var(--colour-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
.q-stat--ok .q-stat__num { color: var(--colour-secondary); }
.q-stat__lbl { display: block; font-size: var(--text-sm); color: var(--colour-text-muted); text-transform: uppercase; letter-spacing: .03em; margin-top: var(--space-1); }
.q-card { display: block; border: 1px solid var(--colour-border); border-radius: var(--radius-lg, 12px); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); background: var(--colour-bg); color: var(--colour-text); text-decoration: none; box-shadow: var(--shadow-sm); transition: box-shadow var(--motion-fast, .15s) ease, border-color var(--motion-fast, .15s) ease, transform var(--motion-fast, .15s) ease; }
.q-card:hover, .q-card:focus-visible { border-color: var(--colour-primary); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.1)); transform: translateY(-1px); outline: none; }
.q-card:hover .q-card__subject { color: var(--colour-primary); }
.q-card__subject { font-size: var(--text-lg); font-weight: var(--fw-bold); line-height: var(--leading-snug); margin: 0 0 var(--space-2); color: var(--colour-text); }
.q-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--colour-text-muted); align-items: center; }
.q-card__meta a { color: var(--colour-primary); text-decoration: none; }
.q-ministry { background: var(--colour-bg-subtle); border: 1px solid var(--colour-border); border-radius: var(--radius-pill, 999px); padding: 2px 10px; font-weight: var(--fw-semibold); color: var(--colour-text); }
.qd__text { white-space: pre-wrap; line-height: var(--leading-normal); }
.qd__response { border-left: 3px solid var(--colour-secondary); padding: var(--space-3) var(--space-4); background: var(--colour-bg-subtle); border-radius: var(--radius-sm); white-space: pre-wrap; line-height: var(--leading-normal); }

/* ---- Bill Tracker: parlimeter-style sidebar + grouped dense table ---- */
.billtrack { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; align-items: start; margin-top: 1rem; }
.billtrack__side { border: 1px solid var(--colour-border); border-radius: var(--radius-md, 6px); padding: 1rem 1.1rem 1.2rem; background: var(--colour-bg); position: sticky; top: 1rem; }
.billtrack__side-title { font-size: 1rem; font-weight: 800; margin: 0 0 .4rem; }
.billtrack__showing { font-size: .8rem; color: var(--colour-text-muted); margin: 0 0 .6rem; }
.billtrack__showing strong { color: var(--colour-primary); }
.billtrack__filters label { display: block; font-size: .7rem; font-weight: 700; color: var(--colour-text-muted); text-transform: uppercase; letter-spacing: .03em; margin: .75rem 0 .25rem; }
.billtrack__filters input, .billtrack__filters select { width: 100%; padding: .45rem .6rem; border: 1px solid var(--colour-border); border-radius: var(--radius-sm, 4px); font: inherit; background: var(--colour-bg); color: var(--colour-text); }
.billtrack__filters button { margin-top: 1rem; width: 100%; padding: .55rem; background: var(--colour-primary); color: var(--colour-bg); border: 0; border-radius: var(--radius-sm, 4px); font-weight: 700; cursor: pointer; }
.billtrack__clear { display: inline-block; margin-top: .7rem; font-size: .8rem; color: var(--colour-primary); }
.billtrack__legend { margin-top: 1.2rem; border-top: 1px solid var(--colour-border); padding-top: .9rem; }
.billtrack__legend-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--colour-text-muted); margin: 0 0 .5rem; }
.billtrack__legend span { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--colour-text-muted); margin-bottom: .35rem; }
.billtrack__legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.billtrack__legend .done { background: var(--colour-secondary); }
.billtrack__legend .current { background: var(--colour-warning); }
.billtrack__legend .pending { background: var(--colour-lighter); }
.billtrack__legend .term { background: var(--colour-danger); }
.billtrack__head { display: grid; grid-template-columns: minmax(180px, 42%) 1fr; gap: 1rem; padding: 0 .4rem .55rem; border-bottom: 2px solid var(--colour-border); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--colour-text-muted); }
.bt-group { margin: 0 0 .25rem; }
.bt-group__head { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 800; color: var(--colour-primary); padding: .85rem .4rem .4rem; }
.bt-group__count { font-size: .7rem; font-weight: 700; color: var(--colour-text-muted); background: var(--colour-bg-subtle); border: 1px solid var(--colour-border); border-radius: var(--radius-pill, 999px); padding: 0 9px; }
.bt-row { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--colour-border); }
.bt-row:hover, .bt-row:focus-within { background: var(--colour-bg-subtle); }
.bt-row__link { flex: 1 1 auto; display: grid; grid-template-columns: minmax(180px, 42%) 1fr auto; align-items: center; gap: 1rem; padding: .55rem .4rem; text-decoration: none; color: var(--colour-text); min-width: 0; }
.bt-row__link:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: -2px; }
.bt-row__preview { flex: none; margin-right: .3rem; padding: .25rem .6rem; font-size: .72rem; font-weight: 600; color: var(--colour-primary); background: var(--colour-bg); border: 1px solid var(--colour-border); border-radius: var(--radius-pill, 999px); cursor: pointer; }
.bt-row__preview:hover { border-color: var(--colour-primary); background: var(--colour-primary-alpha-10, var(--colour-bg-subtle)); }
.bt-row__name { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.bt-row__year { color: var(--colour-text-muted); font-weight: 400; font-size: .8rem; }
.bt-track { display: flex; gap: 3px; height: 12px; align-items: center; }
.bt-seg { flex: 1; height: 100%; background: var(--colour-lighter); border-radius: 2px; }
.bt-seg.is-done { background: var(--colour-secondary); }
.bt-seg.is-current { background: var(--colour-warning); }
.bt-track__term { font-size: .78rem; color: var(--colour-danger); font-weight: 700; }
.bt-track__none { font-size: .78rem; color: var(--colour-text-muted); font-style: italic; }
.bt-row__stage { font-size: .76rem; color: var(--colour-text-muted); text-align: right; min-width: 92px; max-width: 200px; }
@media (max-width: 880px) {
  .billtrack { grid-template-columns: 1fr; }
  .billtrack__side { position: static; }
  .billtrack__head { display: none; }
  .bt-row__link { grid-template-columns: 1fr; gap: .45rem; }
  .bt-row__stage { text-align: left; min-width: 0; }
}

/* ---- Bill detail: dated stage stepper (mirrors /app BillStageStepper) ---- */
.bill-stepper { list-style: none; margin: .9rem 0 .4rem; padding: 0; }
.bill-stepper__intro { margin: 0 0 .6rem; font-size: var(--text-sm); color: var(--colour-text-muted); }
.bill-stepper__step { display: flex; align-items: flex-start; gap: .7rem; padding: 0 0 .25rem; position: relative; }
.bill-stepper__node { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; line-height: 1; background: var(--colour-lighter); color: var(--colour-text-muted); z-index: 1; }
.bill-stepper__step:not(:last-child) .bill-stepper__node::after { content: ""; position: absolute; left: .73rem; top: 1.5rem; bottom: -.1rem; width: 2px; background: var(--colour-lighter); z-index: 0; }
.bill-stepper__step.is-done .bill-stepper__node { background: var(--colour-secondary); color: var(--colour-bg); }
.bill-stepper__step.is-done:not(:last-child) .bill-stepper__node::after { background: var(--colour-secondary); }
.bill-stepper__step.is-current .bill-stepper__node { background: var(--colour-warning); color: var(--colour-text); box-shadow: 0 0 0 3px var(--colour-warning-bg); }
.bill-stepper__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; padding-bottom: .6rem; }
.bill-stepper__label { font-weight: 600; font-size: var(--text-sm); }
.bill-stepper__step.is-pending .bill-stepper__label { color: var(--colour-text-muted); font-weight: 500; }
.bill-stepper__date { font-size: .76rem; color: var(--colour-text-muted); }
.bill-stepper__current { margin: .4rem 0 .2rem; font-size: var(--text-sm); }
.bill-stepper__terminal { display: inline-block; margin-top: .5rem; }
.bill-detail__fulllink--cta { display: inline-block; margin-top: .6rem; padding: .35rem .9rem; background: var(--colour-primary); color: var(--colour-bg); border-radius: var(--radius-pill, 999px); text-decoration: none; font-size: var(--text-sm); }
.bill-detail__fulllink--cta:hover { box-shadow: var(--shadow-sm); }

/* ---- Parliamentary Timeline: single-column vertical rail, grouped by month ----
   A timeline must read top-to-bottom (chronological), so events stack in one
   column down a connecting spine. Per-kind accent colours stay consistent
   across the dot, the kind badge and the row. */

/* Quick-filter chips (activity type + House). Plain links; preserve date range. */
.tl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .85rem; }
.tl-chips--house { margin-bottom: 1.1rem; }
.tl-chips__label { font-size: .8rem; font-weight: 700; color: var(--colour-text-muted); margin-right: .15rem; }
.tl-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .85rem; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--colour-text); background: var(--colour-bg); border: 1px solid var(--colour-border); border-radius: var(--radius-pill, 999px); transition: border-color var(--motion-fast, .15s) ease, background var(--motion-fast, .15s) ease; }
.tl-chip:hover { border-color: var(--colour-primary); color: var(--colour-primary); }
.tl-chip:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 1px; }
.tl-chip.is-active { background: var(--colour-primary); border-color: var(--colour-primary); color: var(--colour-bg, #fff); }
/* Per-kind chip accent dot, so the type chips read as a legend too. */
.tl-chip[class*="tl-chip--"]::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--tl-accent, var(--colour-primary)); flex: none; }
.tl-chip.is-active[class*="tl-chip--"]::before { background: var(--colour-bg, #fff); }

.tl-daterange { margin: 0 0 1.6rem; align-items: end; }
.tl-daterange__clear { font-size: .82rem; color: var(--colour-primary); align-self: center; }

/* Distinct, consistent accent per kind (token palette + on-theme extras). */
.tl-chip--hansard, .tl-item--hansard { --tl-accent: #2d6cdf; }
.tl-chip--vote, .tl-item--vote { --tl-accent: var(--colour-secondary, #009f57); }
.tl-chip--act, .tl-item--act { --tl-accent: #8a5a00; }
.tl-chip--motion, .tl-item--motion { --tl-accent: var(--colour-primary, #d21218); }
.tl-chip--question, .tl-item--question { --tl-accent: #7048c4; }
.tl-chip--petition, .tl-item--petition { --tl-accent: #0f8a8a; }

/* Month heading — a clear period divider down the feed. */
.tl-month { position: sticky; top: 0; z-index: 2; margin: 1.5rem 0 .25rem; padding: .35rem 0; font-size: 1rem; font-weight: 800; color: var(--colour-text); background: var(--colour-bg, #fff); border-bottom: 2px solid var(--colour-border); }
.tl-month:first-child { margin-top: .5rem; }

/* The rail: a left vertical line; each item carries a dot on the line. */
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-item { position: relative; display: grid; grid-template-columns: 1.25rem 1fr; gap: .25rem .85rem; padding: .55rem 0 .55rem .1rem; }
.tl-item::before { content: ""; position: absolute; left: .5rem; top: 0; bottom: 0; width: 2px; background: var(--colour-border); }
.tl-list .tl-item:first-child::before { top: .85rem; }
.tl-list .tl-item:last-child::before { bottom: auto; height: .85rem; }
.tl-item__dot { position: relative; z-index: 1; width: .85rem; height: .85rem; margin-top: .35rem; border-radius: 50%; background: var(--tl-accent, var(--colour-primary)); box-shadow: 0 0 0 3px var(--colour-bg, #fff); }
.tl-item__body { min-width: 0; border-left: 3px solid var(--tl-accent, var(--colour-primary)); padding: .1rem 0 .1rem .8rem; }
.tl-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin-bottom: .15rem; }
.tl-item__date { font-size: .76rem; color: var(--colour-text-muted); font-weight: 600; }
.tl-kind { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 1px 8px; border-radius: var(--radius-pill, 999px); color: #fff; background: var(--tl-accent, var(--colour-primary)); }
.tl-house { font-size: .68rem; font-weight: 700; color: var(--colour-text-muted); background: var(--colour-bg-subtle); border: 1px solid var(--colour-border); border-radius: var(--radius-pill, 999px); padding: 0 8px; }
.tl-item__title { margin: 0; font-weight: 600; line-height: 1.35; }
.tl-item__title a { color: var(--colour-text); text-decoration: none; }
.tl-item__title a:hover { color: var(--tl-accent, var(--colour-primary)); text-decoration: underline; }
.tl-item__title a:focus-visible { outline: 2px solid var(--tl-accent, var(--colour-primary)); outline-offset: 2px; }

@media (max-width: 560px) {
  .tl-item { grid-template-columns: 1rem 1fr; gap: .2rem .6rem; }
  .tl-item::before { left: .43rem; }
}

/* ==========================================================================
   Mirror list pages (Order Papers, Votes & Proceedings, Statements, Papers Laid)
   and the Phase-A stub page. These previously rendered with no styling — the
   .legislation-list / .legislation-stub / .lead / .button classes had no rules.
   Themed here to match the rest of the section. All token-driven.
   ========================================================================== */

.legislation-list { max-width: var(--container-narrow, 920px); }
.legislation-list__head { margin: 0 0 var(--space-6); }
.legislation-list__head h1 { color: var(--colour-primary); letter-spacing: -0.022em; margin-bottom: var(--space-3); }
.legislation-list .lead,
.legislation-stub .lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: var(--leading-normal); color: var(--colour-text-light, var(--colour-text-muted));
  max-width: 80ch; margin: 0 0 var(--space-5);
}

.legislation-list__rows { list-style: none; margin: 0; padding: 0; }
.legislation-list__row {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
  border: 1px solid var(--colour-border); border-radius: var(--radius-lg, 12px);
  background: var(--colour-bg); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-fast, .15s) ease, border-color var(--motion-fast, .15s) ease, transform var(--motion-fast, .15s) ease;
}
.legislation-list__row:hover,
.legislation-list__row:focus-within { border-color: var(--colour-primary); box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.1)); transform: translateY(-1px); }
.legislation-list__title {
  font-size: var(--text-lg); font-weight: var(--fw-bold); line-height: var(--leading-snug);
  color: var(--colour-text); text-decoration: none;
}
.legislation-list__title:hover { color: var(--colour-primary); }
.legislation-list__title:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.legislation-list__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm); color: var(--colour-text-muted);
}
.legislation-list__excerpt {
  margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal);
  color: var(--colour-text-light, var(--colour-text-muted)); max-width: 80ch;
}
.legislation-list__foot { margin-top: var(--space-5); color: var(--colour-text-muted); font-size: var(--text-sm); }
.legislation-list__foot a { color: var(--colour-primary); }

/* Meta badges on the mirror rows reuse the shared .badge token style; give the
   vote-outcome variants meaning (agreed = green, negatived/lapsed = red, the
   rest neutral) without introducing new hues. */
.legislation-list__meta .badge { text-transform: uppercase; }
.badge--agreed_to,
.badge--amended { background: var(--colour-success-bg); color: var(--colour-success); }
.badge--negatived,
.badge--lapsed,
.badge--withdrawn { background: var(--colour-danger-bg); color: var(--colour-danger); }
.badge--divided,
.badge--deferred { background: var(--colour-warning-bg); color: var(--colour-warning); }

/* Phase-A stub page (process_stub.html) */
.legislation-stub { max-width: var(--container-narrow, 920px); }
.legislation-stub h1 { color: var(--colour-primary); letter-spacing: -0.022em; margin-bottom: var(--space-3); }
.legislation-stub__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0; }
.legislation-stub__note { color: var(--colour-text-muted); font-size: var(--text-sm); margin-top: var(--space-5); }
.legislation-stub__note a { color: var(--colour-primary); }
/* Themed buttons for the stub CTAs (the global .button class is unstyled on the
   public site) — primary = red brand, secondary = green brand. */
.legislation-stub .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border: 1px solid var(--colour-primary);
  border-radius: var(--radius-pill, 999px); background: var(--colour-primary); color: #fff;
  font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer;
  transition: background var(--motion-fast, .15s) var(--ease-standard), box-shadow var(--motion-fast, .15s) var(--ease-standard);
}
.legislation-stub .button:hover { background: var(--colour-primary-dark); box-shadow: var(--shadow-md); color: #fff; }
.legislation-stub .button:focus-visible { outline: 2px solid var(--colour-primary); outline-offset: 2px; }
.legislation-stub .button--secondary { background: var(--colour-secondary); border-color: var(--colour-secondary); }
.legislation-stub .button--secondary:hover { background: var(--colour-secondary-dark); }

/* ---- Narrow-width overflow safety: long titles/URLs wrap rather than push the
   layout wider than the viewport at ~360px. ---- */
.leg-card__title, .bill-row__title, .q-card__subject, .bill-detail__title,
.legislation-list__title, .tl-item__title { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .leg-filters { gap: var(--space-2); }
  .leg-filters > div, .leg-filters .grow { flex: 1 1 100%; }
  .leg-filters button { width: 100%; }
}