/* Council Intel's own stylesheet. A password only tool for Reform, not an estate site
   (Tom, 12 October 2026): it borrowed the estate's values on 11 October and keeps them
   here as its own, so nothing outside this folder writes to this file. Reform turquoise
   (#0a5f70, #3fc8dd, #e8f7fa, dark wash #0e2a30), every text colour on every ground at
   4.5:1 or above in both schemes, computed in web/tests/style.test.js. */

/* Source Serif 4 for display, Source Sans 3 for UI. A designed superfamily, so display
   and UI harmonise by construction, and both carry real tabular figures, which is what
   stops a column of percentages jittering line to line. Self hosted: the viewer runs a
   CSP with no font host, so a Google Fonts link would be blocked at the browser. Display at 600 only, UI at 400 and 600. Nothing else is used or shipped. */

:root {
  color-scheme: light dark;

  /* === Neutrals. === */
  --bg: #ffffff;
  --bg-subtle: #f5f6f7;
  --bg-card: #ffffff;
  --border: #dbdfe3;
  --border-strong: #c2c8ce;
  --text: #171b1f;        /* 17.31 on white, 16.00 on subtle */
  --text-muted: #545c63;  /*  6.80 on white,  6.28 on subtle */
  --text-faint: #616970;  /*  5.58 on white,  5.16 on subtle */

  /* The dark ground. Social and Open Graph surfaces, plus the footer, which plays the
     same role on the page: a closing band, not content. */
  --ground: #0f1317;
  --ground-ink: #f4f6f7;
  --ground-muted: #98a3ac;

  /* === The only per site block. === */
  --accent: #0a5f70;        /* links, headings and rules on white */
  --accent-bright: #3fc8dd; /* the mark and the URL on the dark ground */
  --accent-wash: #e8f7fa;   /* stat tiles and card hovers */

  /* === Semantic. Computed against white, subtle and the wash, never eyeballed. === */
  --positive: #1f6f4f;
  --warning: #8a5a10;
  --critical: #b42318;

  /* === Chart series. Four identity hues assigned in order and never cycled, then two
     neutrals for residual buckets. Four is where all pairs separation stops passing
     under deuteranopia, which is why there are four rather than six. === */
  --series-1: #1a6ba8;
  --series-2: #b45309;
  --series-3: #6d28d9;
  --series-4: #a51d5c;
  --series-neutral: #6b7280;
  --series-neutral-soft: #8b939c;

  /* === The cohort map. Three fills for Reform's position (Track V, PR 3): the accent for a
     majority, a lighter step of it for a minority administration, a neutral for the largest
     group or opposition, each at 3:1 or more against the land and the page (computed in
     web/tests/cohortmap.test.js); the key and the list carry the words. The fills carry no text. === */
  --map-1: #0a5f70;
  --map-3: #2d8a9b;
  --map-neutral: #7f8891;
  --map-land: #eef1f3;
  --map-line: #c2c8ce;

  /* === Geometry and elevation. Shadow lifts a card off white; it is not depth
     theatre. The dark build used 28px blurs at 42 per cent black, which on a light
     ground reads as smudge. === */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-soft: 0 1px 2px rgba(23, 27, 31, 0.05);
  --shadow: 0 1px 2px rgba(23, 27, 31, 0.06), 0 8px 24px rgba(23, 27, 31, 0.06);

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* === Compatibility aliases ===
     The pre system stylesheet and templates reference the names below. They are mapped
     here so the surface can flip in one commit rather than in 570 edits, and they are
     removed as each template is rewritten. Nothing new may use them. */
  --bg-soft: var(--bg-subtle);
  --bg-deep: var(--bg-subtle);
  --surface: var(--bg-card);
  --surface-muted: var(--bg-subtle);
  --ink: var(--text);
  --ink-soft: var(--text-muted);
  --muted: var(--text-muted);
  --panel: var(--bg-card);          /* was a gradient; now a flat colour */
  --panel-strong: var(--bg-subtle); /* was a gradient */
  --panel-soft: var(--bg-subtle);
  --accent-2: var(--positive);
  --accent-3: var(--accent);
  --accent-teal: var(--accent-bright);
  --accent-teal-deep: var(--accent);
  --accent-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  --coral: var(--critical);
  --focus-ring: var(--accent);
  --status-warn-bg: color-mix(in srgb, var(--warning) 8%, transparent);
  --status-warn-border: color-mix(in srgb, var(--warning) 45%, transparent);
  --status-warn-text: var(--warning);
  --status-warn-tint: color-mix(in srgb, var(--warning) 14%, transparent);
  --status-warn-dark: var(--warning);
  --status-good-text: var(--positive);
  --status-bad-text: var(--critical);
  --tooltip-bg: #111827;
  --tooltip-fg: #ffffff;

  /* The dark build painted the page with three radial gradients and a 28px grid
     overlay. Both were decoration for a near black ground and are retired rather than
     recoloured: on white they read as dirt. */
  --body-bg-image: var(--bg);
  --grid-line: transparent;
  --grid-vignette: transparent;
  --header-backdrop: var(--bg);
}

/* === Dark. The same tokens, inverted, so no component needs a second rule. The accent
   lifts to its bright value because the deep one does not clear 4.5:1 on the ground,
   and the wash becomes a deep tint rather than a pale one. === */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1317;
    --bg-subtle: #171c21;
    --bg-card: #141a1f;
    --border: #2a3138;
    --border-strong: #3d464e;
    --text: #f4f6f7;
    --text-muted: #b6c0c8;
    --text-faint: #98a3ac;
    --ground: #05080a;

    --accent: #3fc8dd;
    --accent-bright: #3fc8dd;
    --accent-wash: #0e2a30;

    --positive: #6fcf9a;
    --warning: #f0b03e;
    --critical: #f2857a;

    --series-1: #6aa9de;
    --series-2: #e0a35c;
    --series-3: #b49cf0;
    --series-4: #e888b0;
    --series-neutral: #9aa2ab;
    --series-neutral-soft: #7b838c;

    --map-1: #3fc8dd;
    --map-3: #2c8fa0;
    --map-neutral: #8b939c;
    --map-land: #1b2228;
    --map-line: #3d464e;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.32);

    --tooltip-bg: #e6edf3;
    --tooltip-fg: #0d1117;
  }
}

/* The look (CI-A1, 11 October 2026; the viewer's own from 12 October). The boldness is spent
   in one place, the date rail, where the dates run large in the serif down a left column
   like an order paper. Everything else stays quiet: no boxes around sections, hairlines as
   the only rules, the accent on links, the rail and Reform's own rows. */

/* The three faces, self hosted beside this file so the versioned folder
   carries them (the CSP has no font host). Source Serif 4 and Source Sans 3 by Adobe,
   from @fontsource 5.3.0, latin subset; the SIL Open Font License is in fonts/OFL.txt. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/source-serif-4-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/source-sans-3-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(./fonts/source-sans-3-latin-600-normal.woff2) format('woff2');
}

:root {
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 68ch;
  --page: 80rem;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* The scroll padding exceeds the header plus the tallest sticky bar (the Motions filters at
   two rows), so a control scrolled in from above never lands under them (routes.pw.mjs). */
html { background: var(--bg); color: var(--text); scroll-padding-top: 13rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.5 var(--font-sans);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.5rem; }
h1 { font-size: clamp(2rem, 4vw, 3rem); text-wrap: balance; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; margin-top: 1.25rem; }
h4, h5 { font-family: var(--font-sans); font-weight: 600; line-height: 1.3; margin: 1rem 0 0.4rem; }
h4 { font-size: 1.05rem; }
h5 { font-size: 1rem; }
p { margin: 0 0 0.75rem; max-width: var(--measure); }
ul, ol { padding-left: 1.25rem; margin: 0 0 0.75rem; }
li { margin-bottom: 0.25rem; max-width: var(--measure); }
strong, b { font-weight: 600; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 40; padding: 0.5rem 0.75rem; background: var(--bg-card); border-radius: var(--radius-sm); }

/* Header: the lockup. A 4px accent rule along the top, the mark at 30px, the
   wordmark in the serif, the nav as plain weighted links. No solid coloured bar. */
.bar-wrap { position: sticky; top: 0; z-index: 20; background: var(--bg); border-top: 4px solid var(--accent); border-bottom: 1px solid var(--border); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; max-width: var(--page); margin: 0 auto; padding: 0.6rem var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); text-decoration: none; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.mark-page { fill: var(--accent); }
.mark-ink { fill: var(--bg); }
.mark-ink.is-soft { fill-opacity: 0.6; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand-tag { font-size: 0.75rem; color: var(--text-faint); margin-top: 0.15rem; }
.who { margin: 0; color: var(--text-faint); font-size: 0.85rem; }
.banner { max-width: var(--page); margin: 0 auto; padding: 0.3rem var(--gutter); font-size: 0.875rem; color: var(--text-muted); border-top: 1px solid var(--border); }
.brand-tag:empty { display: none; }
.banner[hidden] { display: none; }

/* The menu (CI-A2): UK Demographics' grouped menu. Each group is a details element whose
   panel lists its pages with a line under each; the drawer carries the same groups at
   phone width. The caret turning is the only movement, and only when the reader asks. */
.nav { display: flex; align-items: center; gap: 0.15rem; flex-wrap: nowrap; margin-left: auto; }
.mega-group { position: relative; }
.mega-trigger { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.8rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; color: var(--text-muted); cursor: pointer; list-style: none; user-select: none; }
.mega-trigger::-webkit-details-marker { display: none; }
.mega-trigger::marker { content: ""; }
.mega-group[open] > .mega-trigger, .drawer-group[open] > summary { margin-bottom: 0; }
.mega-trigger:hover, .mega-group[open] > .mega-trigger { color: var(--text); background: var(--bg-subtle); }
.mega-group[data-active="true"] > .mega-trigger { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.caret { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.mega-group[open] .caret, .drawer-group[open] .caret { transform: rotate(180deg); }
.mega-panel { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 30; display: flex; flex-direction: column; gap: 0.15rem; min-width: 19rem; max-width: 26rem; padding: 0.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.mega-group:last-child .mega-panel { left: auto; right: 0; }
.mega-item, .drawer-item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.mega-item:hover, .drawer-item:hover { background: var(--bg-subtle); }
.mega-item[aria-current="page"], .drawer-item[aria-current="page"] { background: var(--accent-wash); }
.mega-item-label, .drawer-item-label { font-weight: 600; line-height: 1.25; }
.mega-item[aria-current="page"] .mega-item-label, .drawer-item[aria-current="page"] .drawer-item-label { color: var(--accent); }
.mega-item-desc, .drawer-item-desc { font-size: 0.85rem; line-height: 1.4; color: var(--text-muted); }

.tools { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.nav + .tools { margin-left: 0; }
.search-launch { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-subtle); color: var(--text-muted); font: inherit; font-size: 0.9rem; cursor: pointer; }
.search-launch:hover { color: var(--text); border-color: var(--border-strong); }
.search-launch .is-short { display: none; }
.search-launch kbd { font: inherit; font-size: 0.75rem; padding: 0 0.35rem; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text-faint); }
.menu-launch { display: none; padding: 0.45rem 0.9rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; }

/* Find a council */
.search-dialog { width: min(36rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100vh - 4rem)); margin: 4rem auto auto; padding: 1.1rem 1.25rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text); box-shadow: var(--shadow); }
.search-dialog::backdrop { background: rgba(15, 19, 23, 0.45); }
.search-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.search-head h2 { margin: 0; font-size: 1.3rem; }
.search-close, .drawer-close { padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer; }
.search-dialog .field input { width: 100%; }
.search-status { margin: 0.6rem 0 0.25rem; font-size: 0.875rem; color: var(--text-faint); }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { margin: 0; max-width: none; border-bottom: 1px solid var(--border); }
.search-results a { display: block; padding: 0.55rem 0.25rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { background: var(--accent-wash); }

/* The drawer: a modal dialog along the right edge. */
.drawer { margin: 0 0 0 auto; width: min(92vw, 24rem); height: 100%; max-height: none; padding: 1rem; border: 0; border-left: 1px solid var(--border); background: var(--bg-card); color: var(--text); overflow-y: auto; }
.drawer::backdrop { background: rgba(15, 19, 23, 0.45); }
.drawer-panel { display: flex; flex-direction: column; gap: 0.25rem; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.drawer-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.drawer-group { border-bottom: 1px solid var(--border); }
.drawer-group > summary { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 0.25rem; font-weight: 600; color: var(--text); list-style: none; cursor: pointer; }
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-items { display: flex; flex-direction: column; gap: 0.15rem; padding-bottom: 0.5rem; }

@media (max-width: 66rem) {
  .who { display: none; }
}
@media (max-width: 60rem) {
  .nav { display: none; }
  .nav + .tools { margin-left: auto; }
  .menu-launch { display: inline-flex; }
  .brand-tag { display: none; }
}
@media (max-width: 45rem) {
  .bar { flex-wrap: nowrap; }
  .tools { gap: 0.35rem; }
  .search-launch { padding: 0.4rem 0.7rem; }
  .search-launch kbd, .search-launch .is-long { display: none; }
  .search-launch .is-short { display: inline; }
  .brand-name { white-space: nowrap; }
}
@media (max-width: 22rem) {
  .brand-copy { display: none; }
  .who { display: none; }
}
@media print {
  .tools { display: none; }
}

/* The page */
.main { display: block; max-width: var(--page); margin: 0 auto; padding: 2rem var(--gutter) 3rem; }
.main:focus { outline: none; }
.loading { color: var(--text-muted); }
.stop { max-width: 40rem; padding: 2rem 0; }
.page-head { margin-bottom: 1.5rem; }
.lede { font-size: 1.125rem; color: var(--text-muted); max-width: 52ch; }
.muted { color: var(--text-muted); font-size: 0.925rem; }
.small { font-size: 0.875rem; }
.block { display: block; }
.none { color: var(--text-muted); font-style: italic; }
.ok { color: var(--positive); }
.warn { color: var(--warning); }
.bad, .stale-count { color: var(--critical); font-weight: 600; }
.count { color: var(--text-muted); margin: 0.5rem 0; }
.money { white-space: nowrap; }

/* A headline figure with its label under it (the spending summary on data health). */
.headline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 2.5rem; margin-bottom: 0.75rem; }
.figure { display: flex; flex-direction: column; }
.figure-value { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.95rem, 3vw, 2.7rem); line-height: 1; letter-spacing: -0.04em; }
.figure-label { margin-top: 0.3rem; font-size: 0.875rem; color: var(--text-muted); }
.figure-note { flex-basis: 100%; color: var(--text-muted); font-size: 0.925rem; }
.crumb { margin-bottom: 0.75rem; font-size: 0.875rem; }
details > summary { cursor: pointer; color: var(--accent); }
details[open] > summary { margin-bottom: 0.4rem; }

/* Sections take the overline: a serif title, the provenance line to its right in muted
   sans, a hairline under both. No boxes. */
.sec { margin: 2.75rem 0 0; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding-bottom: 0.6rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.sec-head h2, .sec-head h3 { margin: 0 1rem 0 0; }
.sec-head .prov, .sec-head .stamp { margin: 0 0 0 auto; }
.prov { font-size: 0.875rem; color: var(--text-faint); margin: 0 0 0.75rem; }
.subsec { margin-top: 1.5rem; }
.subsec:first-child { margin-top: 0; }
.subsec > .sec-head { margin-bottom: 0.75rem; }
.subsec > .sec-head h3 { font-size: 1.2rem; }
.source { color: var(--text-faint); font-size: 0.875rem; margin-top: 0.75rem; }
details.sources { margin-top: 0.75rem; font-size: 0.875rem; color: var(--text-muted); }
details.sources .source { margin: 0.25rem 0; }
.intro { color: var(--text-muted); max-width: 70ch; margin-bottom: 1rem; }

/* HQ-only material keeps its own marking: a bar in the warning colour and the words. */
.is-hq { border-left: 3px solid var(--warning); padding-left: 1rem; }
.hq-tag { color: var(--warning); font-weight: 600; font-size: 0.875rem; }

/* Absent: one quiet line, not a hatched box. */
.absent { color: var(--text-muted); margin: 0.25rem 0 0.5rem; }
.absent p { margin-bottom: 0.25rem; }

/* The evidence stamp survives on the Recent page and the data health page as text: the
   grade is a word, never a coloured badge. */
.stamp { display: inline-flex; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; white-space: nowrap; vertical-align: baseline; }
.stamp-grade { font-weight: 600; font-size: 0.85rem; color: var(--text-faint); }
.stamp-grade.is-small { font-size: 0.8rem; }
.g-our_read { color: var(--warning); }
.stamp-date { color: var(--text-faint); }
.stamp-date.is-stale { text-decoration: line-through; text-decoration-color: var(--critical); }
.stamp-date.is-undated { font-style: italic; }
.stamp-stale { color: var(--critical); font-weight: 600; }

/* Council page head */
.council-head { margin-bottom: 0.5rem; }
.council-name { margin-bottom: 0.6rem; }
.position { font-size: 1.125rem; color: var(--text-muted); max-width: 52ch; margin: 0 0 0.9rem; }
.toc { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 1.5rem 0 0; padding: 0.6rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.toc a { color: var(--text-muted); text-decoration: none; font-weight: 600; }
.toc a:hover { color: var(--accent); }
.recent-line { margin: 0 0 0.5rem; color: var(--text-muted); }
.aidoge { font-weight: 600; margin: 0.25rem 0 0.75rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
.actions a { display: inline-flex; align-items: center; padding: 0.5rem 0.9rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--accent); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.actions a:hover { background: var(--accent-wash); border-color: var(--border-strong); }

/* The lead's page head (CI-A3): the name, one sentence and the verbs on the left, the
   seats on the right; one column on a phone. */
.lead-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); gap: 1.5rem 3rem; align-items: end; }
.lead-head .lede { margin-bottom: 0.9rem; }
.faint { color: var(--text-faint); }
.agenda-motions .mover { display: block; font-size: 0.875rem; font-weight: 400; color: var(--text-muted); }
.rail .rules { margin-top: 0.9rem; }

/* The money: stat tiles on the wash, four up, two up on a phone. */
.heroes, .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin: 2rem 0 0.5rem; }
.hero, .tile { display: flex; flex-direction: column; min-width: 0; padding: 1rem 1.1rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--accent-wash); box-shadow: var(--shadow-soft); }
.hero-label, .tile-label { font-size: 0.95rem; font-weight: 600; }
.hero-value, .tile-value { display: block; margin-top: 0.35rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.95rem, 3vw, 2.7rem); line-height: 0.95; letter-spacing: -0.04em; }
.hero-year, .hero-extra, .hero-note, .tile-text { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--text-muted); max-width: none; }
.hero-extra, .hero-note { margin-top: 0.2rem; }
.hero .older, .tile .older { color: var(--warning); font-weight: 600; }
.hero-sources { grid-column: 1 / -1; }

/* Meters: one fill on a light track, both counts labelled in text. */
.meter { display: block; width: 100%; height: 0.75rem; border-radius: 999px; overflow: hidden; }
.meter .meter-track { fill: var(--bg-subtle); }
.tile .meter .meter-track { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.meter .meter-fill { fill: var(--accent); }
.tile .meter { height: 0.5rem; margin-top: 0.6rem; }
.meter-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; font-size: 0.875rem; color: var(--text-muted); }
.meter-labels b { color: var(--text); }
.seats { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow-soft); }
/* By-elections since the seat count (plan v4, F3): listed beside it, Reform's wins by weight. */
.byelections { margin-top: 0.6rem; }
.byelections ul { margin: 0.2rem 0 0.3rem; padding-left: 1.1rem; }
.byelections li.is-reform { font-weight: 600; }
.seats h2 { font-size: 1.05rem; margin-bottom: 0.2rem; }

/* The date rail: one timeline, the dates large in the serif down a left column. */
.rail { list-style: none; margin: 0; padding: 0; }
.rail > li { display: grid; grid-template-columns: 6.5rem 7rem minmax(0, 1fr); gap: 0 1.25rem; max-width: none; margin: 0; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--border); }
.rail > li:last-child { border-bottom: 0; }
.rail-date { font-family: var(--font-display); font-weight: 600; line-height: 1; }
.rail-date .dow { display: block; margin-bottom: 0.3rem; font-family: var(--font-sans); font-size: 0.8rem; color: var(--text-faint); }
.rail-date .dom { display: block; font-size: 2.5rem; letter-spacing: -0.04em; }
.rail-date .mon { display: block; margin-top: 0.3rem; font-family: var(--font-sans); font-weight: 400; font-size: 1rem; color: var(--text-muted); }
.rail-kind { padding-top: 0.35rem; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); }
.rail-kind.is-money { color: var(--accent); }
.rail-event { min-width: 0; }
.rail-event h3 { margin: 0 0 0.15rem; font-size: 1.2rem; }
.rail-event p { margin-bottom: 0.4rem; }
.rail-event .why { color: var(--text-muted); }
.money-line { font-size: 1.05rem; }
.money-line b { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.02em; }
.after { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin-top: 1rem; font-size: 0.95rem; }

/* Meetings and the motions on them. Reform's own are marked by weight: a 3px accent bar
   and the word Reform in 600, never by a second hue. */
.meetings, .docs, .ideas { list-style: none; padding: 0; }
.meetings > li, .ideas > li { max-width: none; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.meetings time { display: block; font-weight: 600; }
.meetings.key > li { margin-bottom: 0.25rem; }
.agenda-motions { list-style: none; margin: 0.4rem 0 0.5rem; padding: 0; max-width: 62ch; }
.agenda-motions li { padding: 0.3rem 0 0.3rem 0.9rem; border-left: 3px solid transparent; }
.agenda-motions li.is-reform { border-left-color: var(--accent); font-weight: 600; }
.agenda-motions li.is-reform .muted { font-weight: 400; }
.reform-mark { margin-right: 0.4rem; font-weight: 600; color: var(--text); }
tr:has(.reform-mark) > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
td.mark { width: 5rem; }
.briefing { margin-bottom: 0.75rem; }

/* The rules: a card on the wash inside the meeting, the deadline first in the serif. */
.rules { max-width: 46rem; margin: 0.75rem 0 0.25rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--accent-wash); }
.rules h4 { margin-top: 0; }
.rules .deadline { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.3; margin-bottom: 0.3rem; }
.rules p { max-width: none; margin-bottom: 0.3rem; }
.rules .muted, .rules .note { color: var(--text-muted); }
.rules .facts { margin-bottom: 0.4rem; }
.disagree .warn { color: var(--text-muted); font-size: 0.925rem; }
.rule-notes { color: var(--text-muted); font-size: 0.925rem; }

/* The record: the one line a lead repeats, then the chase list in the critical colour. */
.record-line { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.3; max-width: 44ch; margin-bottom: 0.4rem; }
.chase { margin: 0.5rem 0 1rem; color: var(--critical); }
.chase h3 { font-family: var(--font-sans); font-size: 1rem; color: var(--critical); margin-top: 0; }
.chase a { color: inherit; }

/* Inspections and audit */
.framing { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.35; max-width: 44ch; margin-bottom: 1rem; }
ul.oversight { list-style: none; padding: 0; margin: 0; }
ul.oversight li { display: grid; grid-template-columns: 14rem 1fr; gap: 0.25rem 1rem; max-width: none; margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
ul.oversight .ov-label { font-weight: 600; }
ul.oversight .ov-complaints { color: var(--text-muted); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.card { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow-soft); }
.card h3 { margin: 0; font-size: 1.05rem; }
.card .verdict { font-weight: 600; }
.card .verdict.is-bad { color: var(--critical); }
.card .verdict.is-warn { color: var(--warning); }
.card .verdict.is-good { color: var(--positive); }
.card p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.card a { margin-top: auto; font-size: 0.9rem; }

/* Bar chart: one hue, direct labels in the text colour, the value right aligned. */
.bars { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.bars li { display: grid; grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr) 4.5rem; gap: 0 1rem; align-items: center; max-width: none; margin: 0; padding: 0.3rem 0; }
.bars .bar-name { font-size: 0.95rem; min-width: 0; }
.bars .bar-track { display: block; width: 100%; height: 0.9rem; }
.bars .bar-fill { fill: var(--accent); }
.bars .bar-val { text-align: right; font-weight: 600; }
.chart-note { font-size: 0.85rem; color: var(--text-faint); margin-top: 0.5rem; }

/* Facts, lists, tags */
.facts { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: 0.35rem 1.25rem; margin: 0 0 0.75rem; }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; max-width: var(--measure); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 2rem; }
.tag { display: inline-block; margin-left: 0.4rem; padding: 0 0.45rem; font-size: 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); }
.corrections { padding-left: 1.25rem; }
.corr-head { font-weight: 600; }
.foot-links { margin: 2.5rem 0 0; font-size: 0.875rem; color: var(--text-muted); }

/* Tables. Headers in 600 and the faint ink, hairline rows, numbers
   right aligned, a hover tint. */
.table-wrap { overflow-x: auto; margin: 0.25rem 0 0.75rem; }
.tbl { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.tbl th, .tbl td { text-align: left; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl th { font-weight: 600; color: var(--text-faint); white-space: nowrap; border-bottom-color: var(--border-strong); }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl tbody tr:hover { background: var(--bg-subtle); }
.council-link { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.recon { display: block; font-size: 0.8rem; color: var(--text-muted); }
.recon.r-pass { color: var(--positive); }
.recon.r-fail { color: var(--critical); }
button.sort { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
button.sort:hover { text-decoration: underline; }
button.sort:focus-visible { outline: 3px solid var(--accent); }
th[aria-sort="ascending"] .sort::after { content: " \2191"; }
th[aria-sort="descending"] .sort::after { content: " \2193"; }
ul.reasons { margin: 0; padding-left: 1rem; }
ul.week-across { list-style: none; padding: 0; }
ul.week-across > li { max-width: none; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.muted.older { color: var(--warning); }

/* Filters and controls: 6px controls under 10px cards. */
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; padding: 0.75rem 0 1rem; }
.field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; max-width: 100%; font-size: 0.9rem; color: var(--text-muted); }
.field.grow { flex: 1 1 14rem; }
.field input, .field select {
  font: inherit; color: var(--text); background: var(--bg-card); max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--text-faint) 70%, var(--bg)); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; min-height: 2.5rem;
}
.check { display: flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; font-size: 0.9rem; }
.btn {
  font: inherit; font-weight: 600; color: var(--bg); background: var(--accent); cursor: pointer;
  border: 0; border-radius: var(--radius-sm); padding: 0.55rem 0.95rem; min-height: 2.5rem;
}
.btn:hover { filter: brightness(1.08); }

/* Documents (Reform): one link per line, its publisher and check under it. */
ul.doc-list { list-style: none; margin: 0; padding: 0; }
ul.doc-list > li { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
ul.doc-list > li > a { font-weight: 600; }
.doc-meta { display: block; font-size: 0.875rem; color: var(--text-muted); }
.doc-meta.warn { color: var(--warning); }

/* Recent and its digest */
.recent-built { color: var(--text-muted); }
/* The rows themselves are `.changed-list > li` (Track V block below); this is the hook the tests read. */
.recent-item { max-width: none; }
.digest-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.digest-council { margin-bottom: 1.5rem; }
.digest-council h3 { font-size: 1.1rem; }
.digest-lines { padding-left: 1.25rem; }
.digest-lines li { margin: 0.2rem 0; overflow-wrap: anywhere; }

/* The footer: a closing band on the ground. */
.foot { margin-top: 3rem; background: var(--ground); color: var(--ground-muted); }
.foot-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2rem; max-width: var(--page); margin: 0 auto; padding: 1.75rem var(--gutter) 2rem; font-size: 0.9rem; }
.foot-mark { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--accent-bright); }
.foot a { color: var(--ground-ink); }

/* Narrower screens */
@media (max-width: 64rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail > li { grid-template-columns: 6rem minmax(0, 1fr); }
  .rail-kind, .rail-event { grid-column: 2; }
  .rail-kind { padding-top: 0; }
}
@media (max-width: 56rem) {
  .heroes, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-head { grid-template-columns: 1fr; }
}

/* Phone width: the header is one line, tables become stacked entries with each cell
   labelled, and the rail's date sits above its row on one line. */
@media (max-width: 45rem) {
  html { scroll-padding-top: 0; }
  .bar-wrap { position: static; }
  .bar { gap: 0.4rem 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .brand-tag { display: none; }
  .main { padding-top: 1.25rem; }
  .sec { margin-top: 2.25rem; }
  .sec-head .prov { margin-left: 0; }
  .facts { grid-template-columns: 1fr; gap: 0.1rem; }
  .facts dd { margin-bottom: 0.5rem; }
  ul.oversight li { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .hero-value, .tile-value, .figure-value { font-size: 1.75rem; }
  .record-line { font-size: 1.25rem; }
  .rail > li { grid-template-columns: 1fr; gap: 0.3rem; }
  .rail-date { display: flex; align-items: baseline; gap: 0.5rem; }
  .rail-date .dow, .rail-date .mon { margin: 0; }
  .rail-date .dom { font-size: 1.5rem; }
  .rail-kind, .rail-event { grid-column: 1; }
  .bars li { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .bars .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .tbl thead { position: absolute; left: -9999px; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
  .tbl td { border: 0; padding: 0.15rem 0; text-align: left; }
  .tbl td.num { text-align: left; }
  .tbl td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8rem; color: var(--text-faint); }
  .tbl.triage td:first-child::before { content: none; }
  tr:has(.reform-mark) { box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.75rem; }
  tr:has(.reform-mark) > td:first-child { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media print {
  .bar-wrap, .foot, .skip, .toc, .digest-actions, .filters { display: none; }
  body, html { background: #fff; color: #000; }
  .hero, .tile, .rules, .card { box-shadow: none; background: #fff; }
  .digest-council { break-inside: avoid-page; }
  a { color: inherit; }
}

/* People (CI-9a) on the council page, and HQ's who's who (CI-9b). Reform's members are
   marked by weight, as everywhere else; a member with no photograph gets initials. */
.people { display: grid; gap: 1rem; }
.people-group h3 { font-size: 1rem; margin: 0.5rem 0 0.25rem; }
.people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.people-list li { padding-left: 0.5rem; border-left: 3px solid transparent; }
.people-list li.is-reform { border-left-color: var(--accent); }
.people-back summary { cursor: pointer; color: var(--accent); }
.ring { margin: 1rem 0; }
.faces { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.faces li { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; background: var(--bg-card); }
.faces li.is-reform { box-shadow: inset 3px 0 0 var(--accent); }
.faces p { margin: 0.25rem 0 0; }
.face { margin: 0; display: grid; justify-items: start; gap: 0.25rem; }
.face img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--bg-subtle); }
.initials { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-subtle);
  border: 1px solid var(--border-strong); color: var(--text); font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; }

/* The count of council dashboards built, on HQ's landing page (prompt v4c step 3). */
.built-count { font-weight: 600; }

/* The homepage (V6 part 2, addendum 3 section 3): a masthead line, then the rail on the left
   with the week's four figures and the cohort map beside it, then the watch list and What
   changed. The lead's page's devices: section overlines, the serif rail, tiles on the wash. */
.home-head { margin-bottom: 0.5rem; }
.home-line { max-width: 60ch; }
.home-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 3rem; align-items: start; }
.home-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.home-side { min-width: 0; }
.home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.home-grid.is-single .home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-link { margin-top: auto; padding-top: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.home-lower { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; align-items: start; }
.more { margin: 0.75rem 0 0; font-weight: 600; }

/* The rail across the cohort: one row a day, the date large in the serif, the meetings of
   that day beside it. */
.rail.home-rail > li { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 1.25rem; }
.day-list { list-style: none; margin: 0; padding: 0; }
.day-item { max-width: none; margin: 0; padding: 0 0 0.7rem; }
.day-item + .day-item { padding-top: 0.7rem; border-top: 1px solid var(--border); }
.day-item p { margin-bottom: 0.2rem; }
.day-what { font-size: 1.05rem; }
.day-council { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.day-meeting { color: var(--text-muted); }
.day-motions { margin: 0.15rem 0 0.25rem; }
.day-motions > summary { font-weight: 600; }
.day-due { font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }

/* Short lists: the watch list's top five and What changed. */
.home-list { list-style: none; margin: 0; padding: 0; }
.home-list > li { max-width: none; margin: 0; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.home-list-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.home-list-meta { display: block; font-size: 0.85rem; color: var(--text-faint); }
.home-list-text { display: block; overflow-wrap: anywhere; }

/* The cohort map: the outline faint, each council filled by Reform's position in one hue,
   the key and the list beside it, the boundaries' credit under it in small type. */
.cmap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(14rem, 2fr); gap: 1rem 2rem; align-items: start; margin: 0; }
.cmap.is-compact { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.cmap-map { min-width: 0; }
.cmap-svg { display: block; width: 100%; height: auto; max-height: 42rem; }
.cmap-land { fill: var(--map-land); stroke: var(--map-line); stroke-width: 0.5; }
.cmap-shape { stroke: var(--bg); stroke-width: 0.4; }
.cmap-majority { fill: var(--map-1); }
.cmap-minority { fill: var(--map-3); }
.cmap-opposition_largest, .cmap-other { fill: var(--map-neutral); }
.cmap-council:hover .cmap-shape, .cmap-council:focus-visible .cmap-shape { stroke: var(--text); stroke-width: 1.5; }
.cmap-council:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cmap-side { min-width: 0; }
.cmap-key { list-style: none; display: grid; gap: 0.3rem; margin: 0 0 0.6rem; padding: 0; font-size: 0.9rem; color: var(--text-muted); }
.cmap-key li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.cmap-key b { color: var(--text); }
.cmap-swatch { width: 0.9rem; height: 0.9rem; flex: none; }
.cmap-hint { font-size: 0.85rem; color: var(--text-faint); }
.cmap-list { font-size: 0.925rem; }
.cmap-group h3 { margin: 0.75rem 0 0.25rem; font-size: 1rem; }
.cmap-names { list-style: none; margin: 0; padding: 0; }
.cmap-names li { max-width: none; margin: 0; padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.cmap-next { display: block; font-size: 0.85rem; color: var(--text-muted); }
.cmap-attrib { grid-column: 1 / -1; font-size: 0.8rem; color: var(--text-faint); }
.cmap-attrib a { color: var(--text-muted); }

@media (max-width: 64rem) {
  .home-grid, .home-lower { grid-template-columns: minmax(0, 1fr); }
  .home-tiles, .home-grid.is-single .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmap.is-compact { grid-template-columns: minmax(0, 3fr) minmax(12rem, 2fr); }
}
@media (max-width: 45rem) {
  .rail.home-rail > li { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .cmap, .cmap.is-compact { grid-template-columns: minmax(0, 1fr); }
  .cmap-svg { max-height: 28rem; }
}

/* ================================================================== Track V (13 October 2026)
   The components the brief's section 3.3 adds: a spacing scale and a density pair, chips with
   a status vocabulary, the compact fact row, the empty state, the on-page contents, the one-line
   rail, compact tables, equal-height cards and the people grid. Every colour is a token
   above; nothing here adds a literal. */

:root {
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2.5rem;
  --row: 0.75rem;
  --row-tight: 0.5rem;
  --bar-top: 4.1rem;
}

/* Chips: one class, the word always present. Status variants take the semantic colours on a
   light mix of the same colour; the kind chip is the subtle ground; the source chip is plain
   faint text. The pairings are computed in web/tests/style_components.test.js. */
.chip { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--accent-wash); color: var(--text); font-size: 0.8rem; font-weight: 600; line-height: 1.45; white-space: nowrap; vertical-align: 0.1em; }
.chip.is-neutral { background: var(--bg-subtle); color: var(--text-muted); }
.chip.is-kind { background: var(--bg-subtle); color: var(--text-muted); }
.chip.is-kind.is-council { background: var(--accent-wash); color: var(--accent); }
.chip.is-due { background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning); }
.chip.is-overdue { background: color-mix(in srgb, var(--critical) 10%, transparent); color: var(--critical); }
.chip.is-bad { background: color-mix(in srgb, var(--critical) 10%, transparent); color: var(--critical); }
.chip.is-good { background: color-mix(in srgb, var(--positive) 12%, transparent); color: var(--positive); }
.chip.is-open { background: color-mix(in srgb, var(--positive) 12%, transparent); color: var(--positive); }
.chip.is-src { background: transparent; color: var(--text-faint); font-weight: 400; padding: 0; }

/* The compact fact row: label above, the value in the serif, a note under. */
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin: var(--space-5) 0 var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fact { min-width: 0; }
.fact-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.15rem; }
.fact-value { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.fact-value .chip { vertical-align: 0.25em; margin-left: 0.3rem; }
.fact-note { display: block; font-size: 0.85rem; color: var(--text-muted); margin-top: 0.15rem; }
.mini-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: 0.5rem; margin: 0; padding: 0.75rem 0 0; border: 0; }
.mini-row .fact-value { font-size: 1.75rem; }

/* The empty state: what was expected, why it is not here, the way on. */
.empty { max-width: 44rem; padding: var(--space-4) 0; }
.empty h1 { font-size: 1.75rem; }
.empty p { color: var(--text-muted); }

/* On this page: pills for the page's sections, the current one tinted. Sticky under the
   header at desktop width; static on a phone, where the header is too. */
.contents { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin: var(--space-4) 0 var(--space-2); padding: 0.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.contents-title { font-size: 0.8rem; font-weight: 600; color: var(--text-faint); margin-right: 0.4rem; }
.contents-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.contents-links a { display: inline-flex; align-items: center; padding: 0.3rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-muted); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.contents-links a:hover, .contents-links a:focus-visible { color: var(--text); border-color: var(--border-strong); }
.contents-links a[aria-current="location"] { background: var(--accent-wash); color: var(--accent); border-color: transparent; }
.sticky-bar { position: sticky; top: var(--bar-top); z-index: 10; background: var(--bg); }

/* The rail as one line a row: the kind as a chip, the council, the time, then chips only
   where true; the source as a two-word suffix on the rows the motions bank dates. */
.rail.is-lines > li { padding: var(--row) 0; }
.rail.is-lines .day-item { padding: 0.35rem 0; }
.rail.is-lines .day-item + .day-item { border-top: 0; padding-top: 0.35rem; }
.rail.is-lines .day-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin: 0; font-size: 1rem; }
.rail.is-lines .day-council { font-size: 1.05rem; }
.rail.is-lines .day-motions { margin: 0.15rem 0 0; font-size: 0.925rem; }
.rail.is-lines .day-motions > summary { font-weight: 400; color: var(--accent); }
.rail-foot { margin-top: var(--space-3); font-size: 0.85rem; color: var(--text-faint); max-width: 60ch; }

/* Short lists with a figure on the right (results overdue by council, deadlines). */
.act { display: grid; gap: var(--space-5); }
.act-list { list-style: none; margin: 0; padding: 0; }
.act-list > li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; max-width: none; margin: 0; padding: var(--row-tight) 0; border-bottom: 1px solid var(--border); }
.act-list .act-name { font-weight: 600; }
.act-list .act-n { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; white-space: nowrap; }
.act-list .act-sub { display: block; font-size: 0.85rem; color: var(--text-muted); font-weight: 400; }

/* The seats meter inline under the sentence; the verbs as one row of links. */
.seats-inline { max-width: 36rem; margin: 0 0 var(--space-4); }
.seats-inline .meter { height: 0.6rem; }
.seats-inline .meter-labels { margin-top: 0.3rem; }
.verbs { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0 0 var(--space-2); font-weight: 600; }
.verbs a { text-decoration: none; }
.verbs a:hover { text-decoration: underline; }

/* Tiles condensed: one sentence, the source as a muted last line, equal height. */
.tiles.is-even { align-items: stretch; margin-top: var(--space-4); }
.tiles.is-even .tile { padding: 0.9rem 1rem 0.85rem; }
.tiles.is-even .tile-text { margin-top: 0.4rem; }
.tiles.is-even .tile-src { margin-top: auto; padding-top: 0.5rem; font-size: 0.8rem; color: var(--text-faint); }
.tiles.is-even .tile .meter { margin: 0.5rem 0 0; }
.tiles-foot { margin: var(--space-2) 0 0; font-size: 0.9rem; }

/* The rules card in three lines. */
.rules.is-short { padding: 0.7rem 0.9rem; max-width: 42rem; }
.rules.is-short .deadline { font-size: 1.05rem; margin-bottom: 0.2rem; }
.rules.is-short p { margin-bottom: 0.2rem; font-size: 0.925rem; }
.rules.is-short .rule-notes { font-size: 0.85rem; }

/* Two things side by side at desktop width. */
.record-grid, .cards-foot { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: var(--space-4) var(--space-6); align-items: start; }
.cards-foot { margin-top: var(--space-3); align-items: baseline; }
.cards-foot p { margin: 0; }

/* Compact tables, and equal-height cards. */
.tbl.is-compact { font-size: 0.925rem; }
.tbl.is-compact th, .tbl.is-compact td { padding: 0.4rem 0.6rem; }
.tbl .ref { color: var(--text-faint); font-size: 0.85rem; white-space: nowrap; }
.cards.is-even { align-items: stretch; }
.cards.is-even .card { gap: 0.3rem; }
.cards.is-even .card .year { font-size: 0.85rem; color: var(--text-faint); }
.cards.is-one { grid-template-columns: minmax(0, 20rem); }
.sec, .subsec { scroll-margin-top: calc(var(--bar-top) + 3rem); }

/* People as a grid of role, name and ward. */
.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 2rem; list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.people-grid li { max-width: none; margin: 0; padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.people-grid .role { display: block; font-size: 0.8rem; color: var(--text-muted); }
.people-grid .nm { font-weight: 600; }
.people-grid .ward { color: var(--text-muted); font-size: 0.9rem; }

/* What changed, compact: one line an item. */
.changed-list { list-style: none; margin: 0; padding: 0; }
.changed-list > li { max-width: none; margin: 0; padding: var(--row-tight) 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 0.75rem; }
.changed-list time { color: var(--text-faint); font-size: 0.875rem; }
.changed-list .changed-date { white-space: nowrap; }
.changed-list .changed-what { min-width: 0; overflow-wrap: anywhere; }
.changed-list .changed-what .chip { margin-right: 0.2rem; }

/* Day headers on the grouped lists (Motions, What changed): the date in the serif, once a
   day; the source sentence once under the day's rows; the control that draws the next page. */
.day-head { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text); }
.tbl tr.day-head th { padding-top: var(--space-4); white-space: normal; border-bottom-color: var(--border-strong); }
.tbl tr.day-head:hover { background: transparent; }
.changed-list > li.changed-day { display: block; padding: var(--space-4) 0 var(--space-1); border-bottom: 1px solid var(--border-strong); }
.changed-list > li.changed-src { display: block; padding: var(--space-1) 0 var(--row-tight); border-bottom: 0; }
.changed-list .changed-src .source { margin: 0; overflow-wrap: anywhere; }
.page-more { margin: var(--space-3) 0 var(--space-4); }
.sticky-bar .filters { padding-bottom: 0.75rem; }

@media (max-width: 64rem) {
  .record-grid, .cards-foot { grid-template-columns: minmax(0, 1fr); }
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 45rem) {
  .facts-row { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
  .fact-value { font-size: 1.25rem; }
  .mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-grid { grid-template-columns: 1fr; }
  .rail.is-lines > li { grid-template-columns: 1fr; }
  .rail.is-lines .rail-date { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.2rem; }
  .sticky-bar { position: static; }
  .changed-list > li { grid-template-columns: 1fr; }
  .tbl tr.day-head th { display: block; padding: var(--space-3) 0 var(--space-1); border-bottom: 0; }
}

/* ================================================================== Track V, PR 4 (13 October 2026)
   Compare councils: three views as a segmented control in the sticky bar, the table's header
   stuck under it and its first column stuck left at desktop width, the sorted column tinted,
   and one card per council on a phone, where the table is not shown. Tokens only. */
:root {
  /* The view bar's rendered height: its padding (2 x --space-2), the button's min-height
     (2.5rem) and its 1px rule. The table header sticks this far under the site header, so the
     two must match: change the bar and change this. */
  --views-h: calc(3.5rem + 1px);
  --sorted-tint: color-mix(in srgb, var(--accent) 7%, var(--bg));
}
.compare-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); min-height: var(--views-h); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.compare-bar .btn { margin: 0; }
.views { display: inline-flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.15rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); }
.views a { display: inline-flex; align-items: center; padding: 0.3rem 0.9rem; border-radius: 999px; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.views a:hover, .views a:focus-visible { color: var(--text); }
.views a[aria-current="page"] { background: var(--accent-wash); color: var(--accent); }
.compare-table .table-wrap { overflow: visible; }
.compare-table .tbl th { white-space: normal; vertical-align: bottom; }
.compare-table .tbl thead th { position: sticky; top: calc(var(--bar-top) + var(--views-h)); z-index: 2; background: var(--bg); }
.compare-table .tbl th:first-child, .compare-table .tbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.compare-table .tbl thead th:first-child { z-index: 3; }
.compare-table .tbl .is-sorted, .compare-table .tbl td.is-sorted:first-child, .compare-table .tbl th.is-sorted:first-child { background: var(--sorted-tint); }
.compare-table .tbl tbody tr:hover td:first-child, .compare-table .tbl tbody tr:hover td.is-sorted { background: var(--bg-subtle); }
.compare-table .tbl td { font-variant-numeric: tabular-nums; }
.compare-table .tbl .fn { font-size: 0.75em; color: var(--text-faint); margin-left: 0.1em; }
.tbl-foot { margin: var(--space-2) 0 0; font-size: 0.85rem; color: var(--text-muted); }
.compare-cards { display: none; }
.compare-cards .card h3 { font-size: 1.1rem; }
.compare-cards .card h3 a { font-size: inherit; margin-top: 0; }
.card-facts { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0; font-size: 0.925rem; }
.card-facts dt { color: var(--text-muted); }
.card-facts dd { margin: 0; }
.card-facts .fn { font-size: 0.75em; color: var(--text-faint); }
@media (max-width: 64rem) {
  /* The table scrolls sideways in its wrapper here, so the header cannot stick to the page;
     the first column still sticks within the wrapper. */
  .compare-table .table-wrap { overflow-x: auto; }
  .compare-table .tbl thead th { position: static; }
}
@media (max-width: 45rem) {
  .compare-table { display: none; }
  .compare-cards { display: grid; }
  .compare-bar { border-bottom: 0; }
/* ================================================================== Track V, PR 5 (13 October 2026)
   The watch list as a card list, two up at desktop width, and the Councils table with a
   sticky header and a seats meter under the count. Tokens only. */
.cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.cards.is-two .card { gap: 0.45rem; padding: 1rem 1.1rem; }
.cards.is-two .card h3 { font-size: 1.15rem; }
.cards.is-two .card h3 a, .cards.is-two .card .reasons a { margin: 0; font-size: inherit; }
.cards.is-two .card-position { color: var(--text-muted); font-size: 0.925rem; }
.cards.is-two ul.reasons { margin: 0; padding-left: 1.1rem; font-size: 0.925rem; }
.cards.is-two ul.reasons li { max-width: none; margin: 0.15rem 0; }
.cards.is-two .card .mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cards.is-two .card .mini-row .fact-value { font-size: 1.5rem; }
.cards.is-two .card-ours { font-size: 0.85rem; }

/* A table whose header sticks under the site header at desktop width. Its wrapper cannot
   scroll sideways there, or the header would stick to the wrapper and not the page; below
   64rem the wrapper scrolls as any table's and the header is static. */
.table-wrap:has(> .tbl.is-sticky) { overflow: visible; }
/* The table collapses its borders, so a stuck header loses its rule in Chromium: the inset
   shadow stands in for it. */
.tbl.is-sticky thead th { position: sticky; top: var(--bar-top); z-index: 2; background: var(--bg); box-shadow: inset 0 -1px 0 var(--border-strong); }
.seats-mini { display: inline-block; min-width: 6rem; text-align: right; }
.seats-mini .meter { width: 6rem; height: 0.4rem; margin: 0.3rem 0 0 auto; }

@media (max-width: 64rem) {
  .table-wrap:has(> .tbl.is-sticky) { overflow-x: auto; }
  .tbl.is-sticky thead th { position: static; }
}
@media (max-width: 45rem) {
  .cards.is-two { grid-template-columns: 1fr; }
  .cards.is-two .card .mini-row .fact-value { font-size: 1.25rem; }
  .seats-mini { text-align: left; }
  .seats-mini .meter { margin-left: 0; }
}

/* The homepage (Track V, PR 3): the four figures across the top, the one-line rail left with
   Act on this week right, then the map beside What changed. */
.strip { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-5) 0 var(--space-6); }
.strip .tile { padding: 0.85rem 1rem 0.8rem; }
.strip .tile-text { margin-top: 0.35rem; }
.strip .tile-link { padding-top: 0.4rem; }
.home-grid.is-act { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); gap: 0 3rem; }
.home-lower.is-map { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); }
.act .more { margin-top: var(--space-2); }
@media (max-width: 64rem) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid.is-act, .home-lower.is-map { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 45rem) {
  .strip { gap: 0.6rem; margin-bottom: var(--space-5); }
  .strip .tile-value { font-size: 1.6rem; }
}