/* Copied from legislativedata.org (site/static/css/site.css, 2026-10-02) for ssis.legislativedata.org; font URLs made
 * relative. Its own header follows.
 *
 * legislativedata.org — the house stylesheet.
 *
 * Structure taken from essays.stevenmacgregor.uk, 15 September 2026: a twelve
 * step warm neutral ramp with a layer of names on top saying what each step is
 * FOR. Nothing below the :root blocks may name a colour. Light mode redefines
 * the twelve and nothing else, which is what makes the mode setting nearly
 * free. See docs/DECISIONS.md, 2026-09-15.
 */

/* ---- The ramp: dark, the default ---------------------------------------- */

:root {
  --n1:  #1a1816;
  --n2:  #201e1b;
  --n3:  #262320;
  --n4:  #2e2a26;
  --n5:  #37322d;
  --n6:  #443e38;
  --n7:  #6b635a;
  --n8:  #8a8279;
  --n9:  #a8a099;
  --n10: #c4bdb5;
  --n11: #dfd9d1;
  --n12: #f4f0ea;

  --accent:       #7ea8e8;
  --accent-hover: #96b9ee;
}

/* ---- The ramp: light, the same ramp inverted and still warm -------------- */

:root[data-mode="light"] {
  --n1:  #fdfcfb;
  --n2:  #f8f7f5;
  --n3:  #f2f0ec;
  --n4:  #e9e6e1;
  --n5:  #ddd9d3;
  --n6:  #c9c4bc;
  --n7:  #a9a29a;
  --n8:  #857e75;
  --n9:  #6e6760;
  --n10: #57514b;
  --n11: #3d3833;
  --n12: #241f1b;

  --accent:       #2f6cc4;
  --accent-hover: #24559b;
}

/* ---- What each step is for ---------------------------------------------- */

:root {
  --bg:          var(--n1);
  --surface:     var(--n2);
  --raised:      var(--n3);
  --border:      var(--n5);
  --border-firm: var(--n6);
  --text-faint:  var(--n7);
  --text-muted:  var(--n8);
  --text:        var(--n11);
  --text-strong: var(--n12);

  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;

  /* The short fixed set. Nothing invents a size outside it. */
  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-lg: 14px;
  --t-prose: 18px;
  --t-head: 26px;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;

  --radius: 3px;
  --radius-menu: 7px;

  --reading: 700px;
}

/* ---- Fonts, served from this machine and nowhere else -------------------- */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }
:root[data-mode="light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-lg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-hover); }

/* ---- The bar across the top. No left rail. ------------------------------- */

.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: baseline;
  gap: var(--s4);
}

.wordmark {
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
}
.wordmark:hover { color: var(--text-strong); }

.wordmark-tail { color: var(--text-muted); font-weight: 400; }

.topbar nav {
  margin-left: auto;
  display: flex;
  gap: var(--s4);
  font-size: var(--t-md);
}

/* ---- The page ----------------------------------------------------------- */

main { flex: 1 0 auto; }

.reading {
  max-width: var(--reading);
  margin: 0 auto;
  padding: var(--s12) var(--s4) var(--s8);
}

h1 {
  font-family: var(--sans);
  font-size: var(--t-head);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-strong);
  margin: 0 0 var(--s3);
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text-strong);
  margin: var(--s8) 0 var(--s3);
}

/* The substance is set in serif. The machinery around it is not. */
.prose {
  font-family: var(--serif);
  font-size: var(--t-prose);
  line-height: 1.65;
  color: var(--text);
}
.prose p { margin: 0 0 var(--s4); }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 var(--s4); padding-left: var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose code { font-size: 0.9em; }

/* When a page of public wording last changed. */
.changed {
  margin: var(--s12) 0 0;
  font-size: var(--t-md);
  color: var(--text-muted);
}

.standfirst {
  font-family: var(--serif);
  font-size: var(--t-prose);
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 var(--s8);
}

/* A label above a thing. Hierarchy from colour and weight, not from size. */
.label {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--s2);
}

/* Hairline rules between sections, not a box around everything. */
.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s8) 0;
}

/* The device worth more to us than the colours: what is not here yet. */
.not-here {
  border-left: 2px solid var(--accent);
  padding: 0 0 0 var(--s4);
  margin: var(--s8) 0 0;
}
.not-here ul {
  margin: 0;
  padding-left: var(--s4);
  font-size: var(--t-lg);
  color: var(--text-muted);
}
.not-here li { margin-bottom: var(--s1); }

/* ---- Forms -------------------------------------------------------------- */

/* What is wrong, in words. Not red: colour means "you can act here" and
   nothing else (DECISIONS.md, 2026-09-15), so a problem is a firm rule and
   plain text, above the form, where it is read first. */
.problems {
  border-left: 2px solid var(--border-firm);
  padding: 0 0 0 var(--s4);
  margin: var(--s8) 0 0;
  color: var(--text-strong);
}
.problems ul { margin: 0; padding-left: var(--s4); }
.problems li { margin-bottom: var(--s1); }

.form { margin: var(--s8) 0 0; }

.field { margin: 0 0 var(--s6); }

.field label {
  display: block;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 var(--s1);
}
.field .optional { font-weight: 400; color: var(--text-muted); }

.hint {
  margin: 0 0 var(--s2);
  font-size: var(--t-md);
  color: var(--text-muted);
}

.field input {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: var(--t-lg);
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
}
.field textarea {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: var(--t-lg);
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  resize: vertical;
}
.field textarea:focus,
.field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.button {
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  padding: var(--s2) var(--s6);
  cursor: pointer;
}
.button:hover { background: var(--accent-hover); }
.button:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

/* Off the page for people, still in the form for bots. Not display:none,
   which some bots know to skip. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* What a form keeps about the person filling it in. The same shape as
   "what is not here yet", with a quieter rule: it is information, not an
   invitation to act. */
.keeps {
  border-left: 2px solid var(--border);
  padding: 0 0 0 var(--s4);
  margin: var(--s12) 0 0;
}
.keeps ul {
  margin: 0;
  padding-left: var(--s4);
  font-size: var(--t-md);
  color: var(--text-muted);
}
.keeps li { margin-bottom: var(--s2); }

/* Signed in, in the top bar. Signing out is a button made to read as a link,
   because it changes something and a link must not. */
.signed-in { color: var(--text-muted); }
.sign-out { display: inline; margin: 0; }
.sign-out button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.sign-out button:hover { color: var(--accent-hover); }

/* ---- The admin screen ------------------------------------------------------ */

.notice {
  border-left: 2px solid var(--border-firm);
  padding: 0 0 0 var(--s4);
  margin: var(--s6) 0 0;
  color: var(--text-strong);
}
.notice p { margin: 0; }

.quiet { color: var(--text-muted); }

.people { list-style: none; margin: 0; padding: 0; }
.people li {
  border-top: 1px solid var(--border);
  padding: var(--s3) 0;
}
.people li p { margin: 0 0 var(--s2); overflow-wrap: anywhere; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.actions form { margin: 0; }
.actions.confirm { margin-top: var(--s6); }

/* The second action beside a button: still something you can do, so the
   accent, but not a second filled button competing with the first. */
.button-quiet {
  font-family: var(--sans);
  font-size: var(--t-lg);
  color: var(--accent);
}

/* ---- The data pages ------------------------------------------------------ */

/* The date sits beside the heading, in muted type, so a screenshot keeps it. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s4);
}
.page-head h1 { margin-bottom: 0; }
.data-date {
  margin: 0;
  font-size: var(--t-md);
  color: var(--text-muted);
}
.date-statement {
  margin: var(--s2) 0 var(--s8);
  font-size: var(--t-md);
  color: var(--text-muted);
}

/* The download, above the tabs, so a reader finds it at once. */
.download {
  max-width: var(--reading);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: var(--s4) var(--s6);
  margin: 0 0 var(--s8);
}
.download h2 { margin: 0 0 var(--s2); }
.download p { margin: 0 0 var(--s2); }
.download p:last-child { margin-bottom: 0; }
.download-link { font-weight: 600; }
/* Ask on the record page: a faint box; folded once a summary is held (session 101). */
.ask-box { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s2) var(--s4) var(--s4); }
.record .ask-box .subhead { margin-top: var(--s2); }
.ask-fold > summary { list-style: none; cursor: pointer; }
.ask-fold > summary::-webkit-details-marker { display: none; }
.ask-fold > summary .subhead { display: inline; }
.ask-fold-cue { display: block; margin-top: var(--s1); color: var(--accent); }
.ask-fold-cue::before { content: "\25B8\00a0Show "; font-weight: 600; }
.ask-fold[open] .ask-fold-cue::before { content: "\25BE\00a0Hide "; }
.ask-fold > summary:hover .ask-fold-cue { color: var(--accent-hover); }
.ask-fold[open] > summary { margin-bottom: var(--s3); }
.ask-format summary { cursor: pointer; color: var(--accent); }
.ask-format summary:hover { color: var(--accent-hover); }
.ask-format[open] summary { margin-bottom: var(--s2); }
.ask-format p { color: var(--text-muted); }
.ask-format + .ask-format { margin-top: var(--s2); }

/* Something wrong with this record? (report_form.html): last on the page, apart from what is above. */
.report-problem { margin: var(--s8) 0 0; padding-top: var(--s4); border-top: 1px solid var(--border); }
.report-problem .notice { margin: 0 0 var(--s4); }
.report-problem .form { margin-top: var(--s4); }
.report-text { white-space: pre-wrap; color: var(--text-strong); }

/* The corrections record, at the top of What has changed (docs/wording/CORRECTIONS.md). */
.corrections { padding-left: 0; list-style: none; }
.corrections li { margin: 0 0 var(--s2); }

/* The Data page is wider than a page of reading, for the table; its words
   keep the reading width. */
.wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s12) var(--s4) var(--s8);
}
.wide .standfirst, .wide .date-statement, .wide .section-intro, .wide .prose,
.wide .credits, .panel .note, .panel .words, .terms-block { max-width: var(--reading); }

/* The Data lobby: one card per dataset, each with the same parts in the same
   places, so a dataset added later is one more card in the grid. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--s6);
}
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: var(--s6);
}
.card h2 { font-size: var(--t-prose); margin: 0 0 var(--s2); text-wrap: balance; }
.card-what {
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: 1.6;
  margin: 0 0 var(--s6);
}
.card-facts {
  margin: 0 0 var(--s6);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s2) var(--s4);
  font-size: var(--t-md);
}
.card-facts dt { color: var(--text-muted); }
.card-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.card-facts b { color: var(--text-strong); font-weight: 600; }
.card-acts {
  margin: auto 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s6);
  font-size: var(--t-md);
}
.card-open { font-weight: 600; font-size: var(--t-lg); }
.card-download { color: var(--text-muted); }

/* The tabs. The page's own words for where a reader is. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s6);
  border-bottom: 1px solid var(--border);
  margin: 0 0 var(--s8);
  font-size: var(--t-md);
}
.tabs a {
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--s2) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--text-strong); }
.tabs a[aria-current="page"] {
  color: var(--text-strong);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A reference section, now one tab. */
.panel > h2 { margin-top: 0; }
.section-intro {
  margin: 0 0 var(--s6);
  color: var(--text-muted);
}
.panel h3 {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text-strong);
  margin: var(--s6) 0 var(--s3);
}
.panel h4 {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 var(--s3);
}

.note { border-top: 1px solid var(--border); padding: var(--s2) 0; }
.note > summary { cursor: pointer; padding: var(--s1) 0; }
.note-code {
  display: inline-block;
  min-width: 2.5em;
  font-weight: 600;
  color: var(--text-muted);
}
.note-title { color: var(--text-strong); }
.note-text { margin: var(--s4) 0; }
.applies {
  margin: 0 0 var(--s4);
  font-size: var(--t-md);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.terms-block {
  border-left: 2px solid var(--border-firm);
  padding: 0 0 0 var(--s4);
  margin: var(--s8) 0 0;
}
.terms-block p { margin: 0 0 var(--s3); }
.field-name { font-weight: 600; color: var(--text-strong); }
.covers { margin: 0 0 var(--s3); padding-left: var(--s4); }
.covers li { margin-bottom: var(--s2); }
.source-name { color: var(--text-strong); }

.words { margin: 0 0 var(--s4); }
.words dt { font-weight: 600; color: var(--text-strong); margin-top: var(--s3); }
.words dd { margin: 0; }

.table-scroll { overflow-x: auto; margin: 0 0 var(--s4); }
.changes { border-collapse: collapse; font-size: var(--t-md); min-width: 100%; }
.changes th, .changes td {
  text-align: left;
  vertical-align: top;
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--border);
}
.changes th { color: var(--text-muted); font-weight: 600; }
.added { margin: 0 0 var(--s4); color: var(--text-muted); font-size: var(--t-md); }

/* ---- The table of every bill ---------------------------------------------- */

.narrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s6); margin: 0 0 var(--s4); }
.narrow label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--text-muted); margin: 0 0 var(--s1); }
.narrow select, .narrow input {
  font-family: var(--sans);
  font-size: var(--t-md);
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  padding: var(--s1) var(--s2);
  max-width: 100%;
}
.narrow input { width: 14em; }
.narrow select:focus, .narrow input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.narrow .acts { display: flex; gap: var(--s4); padding-bottom: var(--s1); font-size: var(--t-md); }

/* A button that does something on this page, made to read as a link. */
.textlink {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.textlink:hover { color: var(--accent-hover); }
.textlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.count { margin: 0 0 var(--s3); font-size: var(--t-md); color: var(--text-muted); }

.bills { border-collapse: collapse; width: 100%; font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.bills th {
  text-align: left;
  font-weight: 600;
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--border-firm);
  white-space: nowrap;
}
.bills th a { color: var(--text-muted); text-decoration-color: var(--border-firm); }
.bills th a:hover { color: var(--accent-hover); }
.bills td { vertical-align: top; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--border); }
.bills .c-bill_number, .bills .c-session, .bills .c-date_introduced, .bills .c-date_royal_assent { white-space: nowrap; }
.bills td.c-title { width: 42%; }
.open-bill { color: var(--text-strong); text-decoration: none; }
.open-bill:hover { color: var(--accent-hover); text-decoration: underline; }
.has-note {
  margin-left: var(--s1);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A bill, opened. */
.bill-dialog {
  width: min(900px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-menu);
  background: var(--bg);
  color: var(--text);
}
.bill-dialog::backdrop { background: rgba(10, 9, 8, 0.6); }
.dlg-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.dlg-head > div { flex: 1; min-width: 0; }
.dlg-head h2 { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 600; text-wrap: balance; }
.dlg-head .label { margin-bottom: var(--s1); }
.dlg-body { padding: var(--s6); }
.dlg-body h3 {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--s8) 0 var(--s3);
}
.dlg-body h3:first-child { margin-top: 0; }

.fields { display: grid; grid-template-columns: minmax(12em, max-content) 1fr; gap: var(--s1) var(--s6); margin: 0; }
.fields dt { color: var(--text-muted); overflow-wrap: anywhere; }
.fields dt .heading-link { color: inherit; text-decoration-color: var(--border-firm); }
.fields dt .codes { margin-left: var(--s1); font-size: var(--t-sm); }
.fields dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.fields dd.empty { color: var(--text-faint); }

.sub { border-collapse: collapse; font-size: var(--t-md); min-width: 100%; }
.sub th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: var(--s1) var(--s4) var(--s1) 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sub td { vertical-align: top; padding: var(--s2) var(--s4) var(--s2) 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.sub .aside { display: block; color: var(--text-muted); margin-top: var(--s1); }

.facts { list-style: none; margin: 0; padding: 0; }
.facts li { border-top: 1px solid var(--border); padding: var(--s3) 0; }
.facts li:first-child { border-top: 0; padding-top: 0; }
.facts .fact-head { color: var(--text-strong); font-weight: 600; }
.facts p { margin: var(--s1) 0 0; overflow-wrap: anywhere; }
.facts blockquote {
  margin: var(--s2) 0 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--border-firm);
  font-family: var(--serif);
  color: var(--text);
}
.bill-link { margin: var(--s6) 0 0; font-size: var(--t-md); }

/* What each heading holds. */
.file-desc { margin: 0 0 var(--s3); color: var(--text-muted); max-width: var(--reading); }
.heading-list { display: grid; grid-template-columns: minmax(14em, max-content) 1fr; gap: var(--s2) var(--s6); margin: 0 0 var(--s6); }
.heading-list dt { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.heading-list dd { margin: 0; max-width: var(--reading); }
.heading-list :target { background: var(--raised); }

.credits { margin: var(--s12) 0 0; font-size: var(--t-md); color: var(--text-muted); }
.credits h2 { margin-top: 0; }
.credits p { margin: 0 0 var(--s2); }

.notice + .prose { margin-top: var(--s6); }

.foot-words p { margin: 0; }

/* ---- Footer ------------------------------------------------------------- */

/* It stays in view at the foot of the screen on every page, so the date, What
   has changed and the mode setting are always to hand (the owner, 19 September
   2026). Sticky rather than fixed: it keeps its own place at the end of the
   page, so it never covers the last lines. */
.foot {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 1;
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: var(--s12);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.foot-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: var(--t-md);
  color: var(--text-muted);
}

.foot-inner .spacer { margin-left: auto; }

.mode-toggle {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: var(--t-md);
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mode-toggle:hover { color: var(--accent-hover); }

/* ---- Print: dark on white, whatever the screen is doing ------------------ */

@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --raised: #ffffff;
    --border: #cccccc;
    --text: #1a1a1a;
    --text-strong: #000000;
    --text-muted: #555555;
    --accent: #1a1a1a;
  }
  body { font-size: 11pt; }
  .topbar, .mode-toggle, .tabs, .narrow, .download, #dlg-close { display: none; }
  /* An open bill prints on its own. */
  body.bill-open > :not(main), body.bill-open main > :not(.bill-dialog) { display: none; }
  .bill-dialog[open] {
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    border: 0;
  }
  .dlg-head { position: static; }
  .foot { position: static; border-top: 1px solid var(--border); }
  a { text-decoration: underline; }
}

/* ---- Narrow screens ----------------------------------------------------- */

@media (max-width: 640px) {
  .reading, .wide { padding-top: var(--s8); }
  .tabs { flex-wrap: nowrap; overflow-x: auto; gap: var(--s4); }
  .tabs a { white-space: nowrap; }
  .bills .c-session, .bills .c-bill_type, .bills .c-date_introduced, .bills .c-date_royal_assent { display: none; }
  .bills td.c-title { width: auto; }
  .bill-dialog { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .dlg-head, .dlg-body { padding-left: var(--s4); padding-right: var(--s4); }
  .fields, .heading-list { grid-template-columns: 1fr; gap: 0; }
  .fields dd, .heading-list dd { margin-bottom: var(--s3); }
  .foot-inner { padding: var(--s2) var(--s4); font-size: var(--t-sm); }
  .mode-toggle { font-size: var(--t-sm); }
  h1 { font-size: 22px; }
  .prose, .standfirst { font-size: 17px; }
  .topbar-inner { flex-wrap: wrap; gap: var(--s2) var(--s3); }
  .topbar nav { margin-left: 0; width: 100%; }
}

/* ---- The charts --------------------------------------------------------------
 *
 * Strand 3: one frame for every chart (docs/DECISIONS.md, 19 September 2026, the Insights page's shape), from the
 * whole-page mock-up the owner confirmed on 19 September 2026.
 *
 * The charts' own palettes. Colour tells things apart here, always with a
 * legend, and never grades (DECISIONS.md, 2026-09-17). These are the colours
 * that passed the palette check, agreed 19 September 2026
 * (docs/DECISIONS.md, 19 September 2026, the chart colours): a colour added or changed is checked
 * again first. Dark, the site's default, then light.
 */
:root {
  --o-passed: #e8aa2b; --o-rej1: #f780b8; --o-rej3: #9a7ed9; --o-withdrawn: #33ae85;
  --o-dissolution: #7d7a7a; --o-finres: #cb711e; --o-progress: #d8d5cb; --o-notpassed: #9c96cf;
  --q1: #23574d; --q2: #2f8676; --q3: #55b3a1; --q4: #a3ded2;
  --sess1: #434a86; --sess2: #5760a5; --sess3: #737cc2; --sess4: #939bd7; --sess5: #b5bbe8; --sess6: #d8dbf6;
}
:root[data-mode="light"] {
  --o-passed: #d77508; --o-rej1: #a32189; --o-rej3: #7967be; --o-withdrawn: #1a835e;
  --o-dissolution: #484943; --o-finres: #925700; --o-progress: #8f8f8f; --o-notpassed: #5f55a8;
  --q1: #78bcae; --q2: #4a9f8c; --q3: #25806e; --q4: #135a4e;
  --sess1: #a7acd9; --sess2: #878dc9; --sess3: #6a71b6; --sess4: #4f569f; --sess5: #383e85; --sess6: #242a63;
}

/* The tabs on Insights: large, boxed, each saying what it holds, so they cannot
   be missed (the owner, 19 September). The Data page's stay as they are. */
.tabs-lead { margin: 0 0 var(--s3); font-size: var(--t-lg); }
/* The signpost above the boxes: the boxes read as headings, so it says in
   words that only one group shows at a time (the owner, 20 September 2026). */
.tabs-say { margin: calc(-1 * var(--s1)) 0 var(--s3); max-width: var(--reading);
  font-size: var(--t-md); color: var(--text-muted); }
.bigtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s8); }
.bigtabs a { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s4); text-decoration: none;
  border: 1px solid var(--border-firm); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.bigtabs a:hover { border-color: var(--accent); }
.bigtabs a:hover .bt-name { color: var(--accent-hover); }
.bigtabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bigtabs .bt-name { font-size: 17px; font-weight: 600; color: var(--accent); }
.bigtabs .bt-what { font-size: var(--t-md); color: var(--text-muted); }
.bigtabs a[aria-current="page"] { background: var(--raised); border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.bigtabs a[aria-current="page"] .bt-name { color: var(--text-strong); }
.bigtabs a[aria-current="page"] .bt-what { color: var(--text); }

/* At a glance: the headline figures, above the tabs as the download is on the
   Data page. Confirmed on the whole-page mock-up, 19 September 2026; the
   figures are thought 1 in docs/DECISIONS.md and docs/wording/INSIGHTS.md. */
.glance { border: 1px solid var(--border); background: var(--surface); padding: var(--s4) var(--s6); margin: 0 0 var(--s8); }
.glance-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s6); }
.glance h2 { margin: 0 0 var(--s3); }
.glance .rests { margin: 0; }
.hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s4); }
.hero b { font-size: 44px; font-weight: 600; color: var(--text-strong); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero span { font-family: var(--serif); font-size: 16px; color: var(--text); max-width: 52ch; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
.tile { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: var(--s3) var(--s4); }
.tile-label { font-size: var(--t-sm); color: var(--text-muted); margin: 0; }
.tile-value { font-size: 24px; font-weight: 600; color: var(--text-strong); margin: 2px 0 0; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tile-value small { font-size: var(--t-md); font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.tile-note { font-size: var(--t-sm); color: var(--text-muted); margin: 2px 0 0; }
.split { margin: 0; padding: 0; list-style: none; font-size: var(--t-md); }
.split li { display: flex; justify-content: space-between; gap: var(--s3); padding: 2px 0; border-bottom: 1px solid var(--border); }
.split li:last-child { border-bottom: 0; }
.split .n { font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: 600; }
.split .of { color: var(--text-muted); font-weight: 400; }
.checked { margin: 0 0 var(--s2); font-size: var(--t-md); color: var(--text-muted); }
.glance-more summary { cursor: pointer; color: var(--accent); font-size: var(--t-md); }
.glance-more summary:hover { color: var(--accent-hover); }
.glance-more[open] summary { margin-bottom: var(--s2); }
.glance-acts { margin: var(--s3) 0 0; font-size: var(--t-md); }

/* A figure that opens its bills: a plain link, as in the tables of numbers. */
.hero a, .tile-value a, .split a { color: inherit; text-decoration: none; }
.hero a:hover, .tile-value a:hover, .split a:hover,
.hero a:focus-visible, .tile-value a:focus-visible, .split a:focus-visible {
  color: var(--accent-hover); text-decoration: underline dotted; }
.hero a:focus-visible, .tile-value a:focus-visible, .split a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* One frame for every chart. */
.chart { padding: 0 0 var(--s8); margin: 0 0 var(--s8); border-bottom: 1px solid var(--border); scroll-margin-top: var(--s4); }
.chart:last-child { border-bottom: 0; }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s4); margin: 0 0 var(--s3); }
.chart-head > div:first-child { flex: 1 1 22rem; }
.chart-title { font-size: 20px; margin: 0 0 var(--s1); text-wrap: balance; }
.chart-title .self { color: var(--text-strong); text-decoration: none; }
.chart-title .self:hover { text-decoration: underline; }
.chart-sub { margin: 0; color: var(--text-muted); font-size: var(--t-lg); max-width: 70ch; }
.filters { display: flex; flex-wrap: wrap; gap: var(--s3); }
.filter { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); font-weight: 600; color: var(--text-muted); }
.filter select { font: inherit; font-weight: 400; font-size: var(--t-md); color: var(--text-strong); background: var(--surface);
  border: 1px solid var(--border-firm); border-radius: var(--radius); padding: 5px 26px 5px 8px; min-width: 12rem; max-width: 100%; }
.filter select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chart .hint { margin: 0 0 var(--s1); }
.chart .hint b { color: var(--text); font-weight: 600; }
.to-bills { margin: 0 0 var(--s3); font-size: var(--t-md); color: var(--text-muted); }
.chart-frame { border: 1px solid var(--border); background: var(--surface); padding: var(--s4) var(--s4) var(--s2); }
.frame-foot { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s3) 0 0; padding-top: var(--s2);
  border-top: 1px solid var(--border); font-size: var(--t-xs); color: var(--text-muted); }
.frame-foot span:last-child { margin-left: auto; }
.chart-scroll { overflow-x: auto; }
.chart-canvas { width: 100%; min-width: 860px; height: 540px; }
/* The timing chart is one line across seven sessions and needs less room than
   the stacked bars: the mock-up's own size (thought 4 in docs/DECISIONS.md and docs/wording/INSIGHTS.md). */
#tt-chart { min-width: 700px; height: 420px; }
/* The quarters chart: the mock-up's own size (thought 5 in docs/DECISIONS.md and docs/wording/INSIGHTS.md). */
#wi-chart { min-width: 700px; height: 460px; }
/* Which type of bill is shown, and where to change it. It reads as a sentence,
   not as a label, because its job is to be noticed (the owner, 20 September
   2026, on keeping government bills first). */
.showing { margin: 0 0 var(--s3); font-size: var(--t-md); color: var(--text); max-width: var(--reading); }
.showing b { color: var(--text-strong); font-weight: 600; }
.imgdesc { margin: var(--s3) 0 0; font-size: var(--t-sm); color: var(--text-muted); max-width: var(--reading); }
.rule-line { font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--text); margin: var(--s4) 0 var(--s1); max-width: var(--reading); }
.rests { font-size: var(--t-md); color: var(--text-muted); margin: 0 0 var(--s3); }
.chip-note { display: inline-block; font-size: var(--t-sm); font-weight: 600; padding: 0 5px; border: 1px solid var(--border-firm);
  border-radius: var(--radius); text-decoration: none; margin: 0 2px 2px 0; }
.chip-note:hover { border-color: var(--accent); }
.notes-under { margin: 0 0 var(--s4); padding-left: var(--s4); font-size: var(--t-sm); color: var(--text-muted); max-width: 90ch; }
.notes-under li { margin-bottom: 3px; }
.numbers { margin: 0 0 var(--s3); }
.numbers summary, .working summary { cursor: pointer; color: var(--accent); font-size: var(--t-md); }
.numbers summary:hover, .working summary:hover { color: var(--accent-hover); }
.numbers[open] summary, .working[open] summary { margin-bottom: var(--s2); }
.chart-acts { margin: 0 0 var(--s2); font-size: var(--t-md); }
.working { margin: var(--s2) 0 0; }
.working pre { background: var(--bg); border: 1px solid var(--border); padding: var(--s3); overflow-x: auto;
  font-size: var(--t-sm); line-height: 1.5; color: var(--text); margin: 0 0 var(--s3); }

/* The table of every number a chart shows; each figure opens its bills. */
table.figures { border-collapse: collapse; width: 100%; min-width: 720px; font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.figures th { font-size: var(--t-sm); font-weight: 600; color: var(--text-muted); text-align: right; vertical-align: bottom;
  padding: 8px; border-bottom: 1px solid var(--border-firm); line-height: 1.3; }
.figures th:first-child, .figures td:first-child { text-align: left; }
.figures th .chip { display: inline-block; width: 9px; height: 9px; margin-right: 5px; }
.figures td { text-align: right; padding: 8px; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.figures td.sess b { color: var(--text-strong); font-weight: 600; }
.figures td.sess span { color: var(--text-muted); margin-left: 8px; font-size: var(--t-sm); }
.figures td .sofar { color: var(--text-muted); font-size: var(--t-xs); margin-left: 4px; }
.figures td .pct { color: var(--text-muted); font-size: var(--t-sm); margin-left: 4px; }
.figures td.zero { color: var(--text-faint); }
.figures tr.total td { border-top: 1px solid var(--border-firm); border-bottom: 0; background: var(--raised); font-weight: 600; color: var(--text-strong); }
.figures tr.total td .pct { font-weight: 400; }
.figures td.fig a { color: inherit; text-decoration: none; }
.figures td.fig:hover { background: var(--raised); }
.figures td.fig a:hover, .figures td.fig a:focus-visible { color: var(--accent-hover); text-decoration: underline dotted; }
.figures td.fig a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* On the Data page: the bills behind a chart's figure, named above the table. */
.behind-line .behind-what { color: var(--text-strong); font-weight: 600; }

/* The quickest and slowest bills (thought 6), from the whole-page mock-up of
   19 September. Two lists side by side; each bill is one link, so the whole
   entry is the target, and its parts are laid out in a grid inside it. */
.lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s6); }
.list h3 { font-size: var(--t-lg); font-weight: 600; color: var(--text-strong); margin: 0 0 2px; }
.list .list-sub { font-size: var(--t-sm); color: var(--text-muted); margin: 0 0 var(--s3); }
.list ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-firm); }
.list li { border-bottom: 1px solid var(--border); }
.list .listed {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 0 var(--s3);
  padding: var(--s3) var(--s2);
  color: inherit;
  text-decoration: none;
}
.list .listed:hover { background: var(--raised); }
.list .listed:hover .title { color: var(--accent-hover); text-decoration: underline; }
.list .listed:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.list .rank { font-size: var(--t-md); color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.list .who { min-width: 0; }
.list .title { display: block; font-weight: 600; color: var(--text-strong); line-height: 1.35; }
.list .meta, .list .dates { display: block; font-size: var(--t-sm); color: var(--text-muted); margin-top: 2px; }
.list .flag {
  display: inline-block;
  font-size: var(--t-xs);
  color: var(--text);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  padding: 0 5px;
  margin: 4px 4px 0 0;
}
.list .days { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list .days b { font-size: 20px; font-weight: 600; color: var(--text-strong); }
.list .days span { display: block; font-size: var(--t-sm); color: var(--text-muted); }
.list .bar { grid-column: 2 / 4; height: 3px; background: var(--raised); border-radius: 2px; margin-top: var(--s2); overflow: hidden; }
.list .listed:hover .bar { background: var(--surface); }
.list .bar i { display: block; height: 100%; background: var(--text-muted); border-radius: 2px; }

@media (max-width: 640px) {
  .glance { padding: var(--s4); }
  .hero b { font-size: 36px; }
  .bigtabs { grid-template-columns: 1fr; }
  .filter select { min-width: 0; width: 100%; }
  .filters, .filter { width: 100%; }
  .frame-foot span:last-child { margin-left: 0; }
  .lists { grid-template-columns: 1fr; }
}

/* ---- Data → Votes -------------------------------------------------------------
 *
 * Phase 3, stage 7, from the votes pages' mock-up agreed 22 September 2026
 * (docs/DECISIONS.md). The parties' own colours, tuned for each mode; colour
 * never stands alone, since every party is named beside its swatch.
 */
:root {
  --p-SNP:#e0b400; --p-Lab:#e0463c; --p-Con:#4a86dc; --p-Green:#3fae5a; --p-LD:#e8832a;
  --p-Reform:#27b3b8; --p-Alba:#a57be0; --p-Ind:#8a8279; --p-NPA:#6b635a; --p-Other:#c4bdb5;
  /* The grids' ramp, from the page's own tone towards the accent, and the
     line for the opposition united, as the mock-up. */
  --seq0:#2b3140; --seq1:#34507a; --seq2:#4b73b0; --seq3:#7ea8e8; --seq4:#c9dbf6; --gov:#dfd9d1;
  /* Late, beside the ramp, on the questions deadline chart: version 23 of the
     questions mock-up's own (group 3, agreed 30 September 2026). */
  --late:#e8aa2b;
}
:root[data-mode="light"] {
  --p-SNP:#b58c00; --p-Lab:#c62f27; --p-Con:#1f5fb8; --p-Green:#23863d; --p-LD:#c25d08;
  --p-Reform:#0b7f85; --p-Alba:#7648b5; --p-Ind:#857e75; --p-NPA:#a9a29a; --p-Other:#57514b;
  --seq0:#eef3fb; --seq1:#c3d5f0; --seq2:#86a9dd; --seq3:#3f72c0; --seq4:#1d4585; --gov:#3d3833;
  --late:#b86a00;
}

/* The line of the coverage statement above the tabs, met before any figure. */
/* The independents' chart is shorter, as the mock-up; the Parties charts'
   "tall" and "short" have never been given a height, and stay as they are. */
.chart-canvas.vt-short { height: 340px; }

.coverage-line { border-left: 2px solid var(--accent); padding: 0 0 0 var(--s4); margin: 0 0 var(--s8); max-width: var(--reading); }
.coverage-line p { margin: 0; }

.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }

.votes-table { border-collapse: collapse; width: 100%; font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.votes-table th { text-align: left; font-weight: 600; color: var(--text-muted); padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--border-firm); white-space: nowrap; }
.votes-table th.n, .votes-table td.n { text-align: right; }
.votes-table th a { color: var(--text-muted); text-decoration-color: var(--border-firm); }
.votes-table th a:hover { color: var(--accent-hover); }
.votes-table th a[aria-sort] { color: var(--text-strong); }
.votes-table td { vertical-align: top; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--border); }
.votes-table td.nowrap { white-space: nowrap; }
.votes-table td.t { width: 45%; }
.votes-table tr:hover td { background: var(--raised); }
.votes-table :target td, .votes-table tr:target td { background: var(--raised); }
.tag { display: inline-block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border-firm); border-radius: var(--radius); padding: 0 4px; margin-left: var(--s1); white-space: nowrap; }
.tag.strong { color: var(--text-strong); border-color: var(--text-muted); }
.more { margin: var(--s4) 0 0; }
.quietnum { color: var(--text-muted); font-size: var(--t-sm); margin-left: 3px; }

/* A division, opened: every member's vote, party by party. */
.party-block { margin: 0 0 var(--s4); }
.party-block h4 { font-size: var(--t-md); margin: 0 0 var(--s2); color: var(--text-strong); }
.party-block h4 .quiet { font-weight: 400; }
.mlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px var(--s4); margin: 0; padding: 0; list-style: none; font-size: var(--t-md); }
.mlist li { display: flex; justify-content: space-between; gap: var(--s2); border-bottom: 1px solid var(--border); padding: 2px 0; }
.mlist li .v { color: var(--text-muted); white-space: nowrap; }
.mlist li.against { font-weight: 600; color: var(--text-strong); }
.mlist li.against .v { color: var(--text-strong); }
.mlist li.nv, .mlist li.nv a { color: var(--text-faint); }
.mlist a { color: inherit; text-decoration: none; }
.mlist a:hover { color: var(--accent-hover); text-decoration: underline; }
.dlg-acts { display: flex; gap: var(--s4); align-items: baseline; }
.cov h3 { margin-top: var(--s8); }
.cov ul li { margin-bottom: var(--s2); }

@media (max-width: 640px) {
  .votes-table td.t { width: auto; }
  .hide-narrow { display: none; }
}

/* ---- Insights → Votes -----------------------------------------------------------
 *
 * The highlights, from the votes pages' mock-up agreed 22 September 2026, in
 * At a glance's frame. A figure that opens its divisions or member is a plain
 * link, as At a glance's are (DECISIONS.md, 22 September, "the highlights", A).
 */
.tiles.six { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tile .who { font-size: var(--t-md); color: var(--text-strong); font-weight: 600; margin: 2px 0 0; }
.tile .who a { color: inherit; text-decoration: none; }
.tile .who a:hover, .tile .who a:focus-visible { color: var(--accent-hover); text-decoration: underline dotted; }
.tile .who a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Against the party (DECISIONS.md, 23 September, "the Against the party group"): two lists in
   place of charts, as the mock-up, each entry a link to Data → Votes; a
   search box among the choices; the ministers' list beneath the chart. */
.dom-chart { padding: var(--s2) 0; }
.list .dissent { display: block; font-size: var(--t-sm); color: var(--text); margin-top: var(--s1); }
.filter-search { font: inherit; font-weight: 400; font-size: var(--t-md); color: var(--text-strong); background: var(--surface);
  border: 1px solid var(--border-firm); border-radius: var(--radius); padding: 5px 8px; min-width: 12rem; }
.filter-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.subhead { font-size: var(--t-lg); font-weight: 600; color: var(--text-strong); margin: var(--s6) 0 var(--s1); }
/* A page's download (download.py), as legislativedata's chart-acts. */
.page-acts { margin: var(--s2) 0 0; font-size: var(--t-md); }
.list-note { font-size: var(--t-sm); color: var(--text-muted); margin: 0 0 var(--s3); }
@media (max-width: 640px) { .filter-search { min-width: 0; width: 100%; } }

/* Results (DECISIONS.md, 23 September, "the Results group"): with a fourth box the boxes go
   five across, as the mock-up's, the fifth place Members'. */
.bigtabs.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .bigtabs.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bigtabs.five { grid-template-columns: 1fr; } }

/* Insights → Questions, Coverage (DECISIONS.md, 29 September, "stage 7's Coverage group"),
   as version 23 of the questions mock-up: the coverage map, on that page and on
   Data → Questions' Coverage tab, its key, and the tiles standing in for a chart.
   The map's shadings are the accent colour, patterned; no colour is added. */
:root { --st-full: var(--accent); }
.covmap { border-collapse: separate; border-spacing: 2px; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.covmap th { font-weight: 600; color: var(--text-muted); text-align: left; padding: 0 var(--s2) 0 0; white-space: nowrap; }
.covmap thead th { text-align: center; font-weight: 400; font-size: var(--t-xs); padding: 0; writing-mode: vertical-rl; transform: rotate(180deg); height: 3.2em; }
.covmap td { width: 26px; min-width: 26px; height: 26px; border-radius: 2px; cursor: pointer; border: 1px solid transparent; }
.covmap td.full, .covkey i.full { background: var(--st-full); }
.covmap td.part, .covkey i.part { background: repeating-linear-gradient(135deg, var(--st-full) 0 5px, var(--surface) 5px 8px); border-color: var(--st-full); }
.covmap td.inc, .covkey i.inc { background: repeating-linear-gradient(135deg, var(--st-full) 0 2px, var(--surface) 2px 7px); border-color: var(--border-firm); }
.covmap td.inc { opacity: .9; }
.covmap td.none, .covkey i.none { background: transparent; border: 1px dashed var(--border-firm); }
.covmap td.nodata, .covkey i.nodata { background: transparent; border: 1px solid var(--border); }
.covmap td.wgap, .covkey i.wgap { background: radial-gradient(circle, var(--surface) 0 1.6px, transparent 2px) 0 0 / 7px 7px, var(--st-full); border-color: var(--st-full); }
.covmap td.open, .covkey i.open { background: linear-gradient(90deg, var(--st-full) 0 55%, var(--surface) 55%); border-color: var(--st-full); }
.covmap td:hover, .covmap td:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 1px; }
.covkey { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: var(--s3) 0 0; font-size: var(--t-md); color: var(--text); }
.covkey span { display: inline-flex; align-items: center; gap: var(--s2); }
.covkey i { display: inline-block; width: 18px; height: 14px; border-radius: 2px; border: 1px solid transparent; }
.cov-cell-info { min-height: 3.2em; margin: var(--s3) 0 0; font-size: var(--t-md); color: var(--text); max-width: var(--reading); }
.panel .covmap-wrap { margin: 0 0 var(--s8); }
.watch { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); }
.chart-canvas.short { height: 340px; }
.chart-canvas.min { min-width: 640px; }
/* Who asks the First Minister: one small panel for each party, four to a row. */
.chart-canvas.fmq-panels { height: 640px; }
.numbers-foot { margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--text-muted); max-width: var(--reading); }

/* ---- Questions: the Members group (DECISIONS.md, 30 September, the Members group agreed) ---- */
/* The member's own chart, in the window on Data → Questions (D): the mock-up's own size. */
.mini-canvas { width: 100%; min-width: 520px; height: 260px; }
/* The ranking: the whole list, scrolled in its own box, as the mock-up. */
.rank-list { max-height: 620px; overflow-y: auto; }

/* The record page (phase 7, step 3). */
.record .subhead { margin-top: var(--s8); }
.record .nowrap { white-space: nowrap; }
.record .plain { list-style: none; margin: 0; padding: 0; }
.record .plain li { margin: 0 0 var(--s2); }
.record .links { margin: 0; padding-left: var(--s4); }
.record .rating-line { display: block; margin: 0 0 var(--s1); }
.record td.variable { min-width: 12em; }
.record td.rating { min-width: 14em; font-size: var(--t-sm); }
.record details > summary { cursor: pointer; }
.record td.variable summary { color: var(--text-strong); }
.record .notice ul { margin: var(--s2) 0 0; }
.find { max-width: 24em; }

/* The record page's summary (phase 7, step 3, session 92). */
.record .lede { max-width: var(--reading); margin: var(--s4) 0 0; }
.record .minorhead { font-size: var(--t-prose); font-weight: 600; color: var(--text-strong); margin: var(--s6) 0 var(--s2); }
.glance { display: grid; grid-template-columns: minmax(10em, max-content) 1fr; gap: var(--s2) var(--s6); margin: 0; }
.glance dt { color: var(--text-muted); }
.glance dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.glance-value { display: inline; }
.glance-value + .glance-value::before { content: " · "; color: var(--text-muted); }
.aside-inline { font-size: var(--t-sm); color: var(--text-muted); }
.mark { font-size: var(--t-xs); color: var(--text-muted); margin-left: var(--s2); border-bottom: 1px dotted var(--border-firm); white-space: nowrap; }
.mark-measured { color: var(--text); }
.record .meetings, .record .exchanges { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.record .meeting { border-top: 1px solid var(--border); padding: var(--s3) 0; }
.record .meeting p { margin: 0; }
.record .meeting .aside { color: var(--text-muted); font-size: var(--t-md); margin-top: var(--s1); }
.record .exchanges > li { border-left: 2px solid var(--border-firm); padding-left: var(--s3); margin: var(--s2) 0 var(--s3); }
.record .said { margin-top: var(--s2); }
.said-list { list-style: none; margin: var(--s3) 0 0; padding: 0; max-width: var(--reading); }
.said-list li { margin: 0 0 var(--s4); }
.said-who { margin: 0; font-weight: 600; color: var(--text-strong); }
.said-text { white-space: pre-wrap; font-family: var(--serif); margin: var(--s1) 0 0; }
.full-detail { margin-top: var(--s8); border-top: 1px solid var(--border); padding-top: var(--s2); }
.full-detail > summary .subhead { display: inline; }
@media (max-width: 600px) { .glance { grid-template-columns: 1fr; gap: 0 0; } .glance dd { margin-bottom: var(--s3); } }
.record .documents { margin: var(--s4) 0 0; }

/* Now (phase 7, step 3, session 93). */
.now td.item { min-width: 18em; }
.now .live td { min-width: 8em; }

/* Search (phase 7, step 3, session 95). */
.search-form { margin-top: var(--s6); max-width: var(--reading); }
.search .filters { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.search .filters .field { flex: 1 1 12em; }
.search .filters .field.year { flex: 0 1 7em; }
.field select {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: var(--t-md);
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  padding: var(--s2) var(--s2);
}
.field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.search .hits { margin: var(--s4) 0 0; padding-left: var(--s6); max-width: var(--reading); }
.search .hit { border-top: 1px solid var(--border); padding: var(--s3) 0; }
.search .hit p { margin: 0; }
.search .hit-head { color: var(--text); }
.search .hit-head .tag { margin-left: 0; margin-right: var(--s1); }
.search .hit-heading { color: var(--text-muted); font-size: var(--t-md); margin-top: var(--s1); }
.search .hit-text { font-family: var(--serif); margin-top: var(--s2); overflow-wrap: anywhere; }
.search .hit .aside { color: var(--text-muted); font-size: var(--t-md); margin-top: var(--s2); overflow-wrap: anywhere; }
.search mark { background: var(--raised); color: var(--text-strong); font-weight: 600; border-bottom: 2px solid var(--accent); padding: 0 1px; }
.search .pager { display: flex; gap: var(--s4); margin: var(--s4) 0 0; }
.search .coverage td.num { text-align: right; }
.search .titles li { overflow-wrap: anywhere; }

/* Ratings and coverage (phase 7, step 3, session 96). */
.ratings .sub th.num, .ratings .sub td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ratings .vars td.var { min-width: 16em; }
.ratings .vars td.rated { min-width: 22em; }
.ratings .rated p { margin: 0 0 var(--s2); }
.ratings .rated p:last-child { margin-bottom: 0; }
.ratings h3 { margin-top: var(--s6); }
.ratings .register-what { margin-top: var(--s1); color: var(--text); max-width: var(--reading); overflow-wrap: anywhere; }
.ratings .register li:target { background: var(--raised); }

/* The tool's pages in the top bar (session 96). */
.topbar nav { flex-wrap: wrap; justify-content: flex-end; column-gap: var(--s6); }
.topbar .pages a { font-weight: 600; }
.topbar .pages a[aria-current="page"] { color: var(--text-strong); text-decoration: none; box-shadow: inset 0 -2px 0 var(--accent); }

/* ---- Trends (phase 7 step 7; web/trends.py) ------------------------------------------------
 * The categorical five passed the palette check in both modes (session 99, the dataviz skill's validator:
 * adjacent CVD separation 9.1 light / 8.4 dark; three light steps under 3:1 against the surface, so every chart
 * has its numbers table). Affirmative tiers share --tr2 and differ by texture; what isn't held is --tr-gap,
 * hatched. The heatmap's ramp is one hue, light to dark in light mode and dark to light in dark mode. Dark, the
 * site's default, then light. */
:root {
  --tr1: #3987e5; --tr2: #d95926; --tr3: #199e70; --tr4: #c98500; --tr5: #d55181; --tr-gap: #6b635a;
  --h0: #1f2a38; --h1: #184f95; --h2: #2a78d6; --h3: #6da7ec; --h4: #cde2fb;
}
:root[data-mode="light"] {
  --tr1: #2a78d6; --tr2: #eb6834; --tr3: #1baf7a; --tr4: #eda100; --tr5: #e87ba4; --tr-gap: #a9a29a;
  --h0: #cde2fb; --h1: #86b6ef; --h2: #3987e5; --h3: #1c5cab; --h4: #0d366b;
}
.trends .chart-canvas { min-width: 640px; height: 400px; }
.trends .chart-canvas.tall { height: 620px; }
.trends .chart-canvas.short { height: 320px; }
.trends .lines { margin: var(--s3) 0 0; padding-left: var(--s6); max-width: var(--reading); font-size: var(--t-md); }
.trends .lines li { margin: 0 0 var(--s1); }
.trends .lines b { color: var(--text-strong); font-weight: 600; }
.trends .switch { display: inline-flex; gap: var(--s2); align-items: center; margin: 0 0 var(--s3); font-size: var(--t-md); cursor: pointer; }
.trends pre.sql { font-family: ui-monospace, Menlo, monospace; font-size: var(--t-sm); background: var(--raised); padding: var(--s3); overflow-x: auto; margin: var(--s2) 0 0; }
.trends .maker-switch { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin: var(--s4) 0 var(--s8); padding: var(--s3) var(--s4); border: 1px solid var(--border-firm); background: var(--surface); }
.trends .maker-switch .switch { margin: 0; font-weight: 600; color: var(--text-strong); }

/* ---- Ask on the record page (ask_box.html) ------------------------------- */

.ask-box { margin: var(--s8) 0; }
/* The warning is the site's, not the model's: small and muted, ruled off from the answers, beside the controls (session 101). */
.ask-warning { font-size: var(--t-sm); line-height: 1.5; color: var(--text-muted); margin: var(--s3) 0; max-width: 46rem; }
.ask-warning p { margin: 0; }
.ask-warning strong { color: var(--text); }
#ask-warning-held { border-top: 1px dashed var(--border); padding-top: var(--s3); margin-top: var(--s6); }
#ask-follow-ups .ask-turn { border-left-color: var(--border); }
.ask-turn { border-left: 2px solid var(--border-firm); padding-left: var(--s4); margin: var(--s6) 0; }
.ask-q { font-weight: 600; color: var(--text-strong); }
.ask-a ul { margin: var(--s2) 0; }
.ask-a .cite { text-decoration: none; font-size: 0.85em; }
.ask-cited { margin: var(--s2) 0; color: var(--text-muted); }
.ask-follow { margin-top: var(--s4); }
.ask-head { margin: var(--s4) 0 var(--s2); color: var(--text-strong); }
.ask-sources summary { cursor: pointer; color: var(--accent); }
.ask-acts { margin: var(--s4) 0; }

/* The Ask page (session 102) */
.ask-page textarea { width: 100%; max-width: 46rem; font: inherit; padding: var(--s2); border: 1px solid var(--border-firm); border-radius: var(--radius); background: var(--surface, transparent); color: inherit; }
.ask-page .ask-question { font-size: var(--t-xl, 1.5rem); max-width: 46rem; }
.ask-examples { margin: var(--s2) 0; }
.ask-asked { padding-left: var(--s4); }
.ask-asked li { margin: var(--s1) 0; }
.ask-workings { padding-left: var(--s5, 1.5rem); }
.ask-workings > li { margin: var(--s5, 1.25rem) 0; }
.ask-src-head { margin: 0 0 var(--s2); }
.ask-page pre.sql { font-family: ui-monospace, Menlo, monospace; font-size: var(--t-sm); background: var(--raised); padding: var(--s3); overflow-x: auto; margin: var(--s2) 0 0; white-space: pre-wrap; }
.ask-page table.ask-rows { min-width: 0; font-size: var(--t-sm); }
.ask-passages { padding-left: var(--s4); }
.ask-passages li { margin: var(--s3) 0; max-width: 46rem; }
.ask-read { white-space: pre-wrap; font-size: var(--t-sm); max-width: 46rem; margin: var(--s2) 0; padding-left: var(--s3); border-left: 2px solid var(--border); }
.inline-form { display: inline; }
.ask-mode { border: 0; padding: 0; margin: 0 0 var(--s4); }
.ask-mode legend { font-weight: 600; margin-bottom: var(--s2); }
.ask-mode label { display: block; margin: var(--s1) 0; font-weight: normal; }
.ask-mode input[type="radio"] { display: inline-block; width: auto; margin: 0 var(--s2) 0 0; padding: 0; vertical-align: baseline; }
.ask-mode legend { padding: 0; }

/* Live SSIs as one list (session 105): a compact row per item that opens to its detail; filters in the page;
   dates within 7 days marked. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.link-button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.link-button:hover { color: var(--accent-hover); text-decoration: underline; }
.live-filters { margin: var(--s4) 0 var(--s3); align-items: flex-end; }
.live-filters input[type="search"] { font: inherit; font-weight: 400; font-size: var(--t-md); color: var(--text-strong); background: var(--surface);
  border: 1px solid var(--border-firm); border-radius: var(--radius); padding: 5px 8px; min-width: 12rem; }
.live-filters input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.live-filters .checks { border: 0; margin: 0; padding: 0; flex-direction: row; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: center; }
.live-filters .checks legend { padding: 0; margin-bottom: 4px; }
.live-filters .checks label { font-weight: 400; color: var(--text); font-size: var(--t-md); white-space: nowrap; }
.live-list td { padding-top: var(--s2); padding-bottom: var(--s2); }
.live-list td.item { min-width: 18em; max-width: 34em; }
.live-list td.item .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.live-list td.item .aside { margin-top: 2px; font-size: var(--t-sm); }
.live-list td.toggle { width: 1.5em; padding-left: var(--s2); padding-right: var(--s1); }
.live-list .toggle button { font-size: 15px; color: var(--text-muted); background: none; border: 0; padding: 0 4px; cursor: pointer; line-height: 1.2; }
.live-list .toggle button:hover { color: var(--accent); }
.live-list .toggle button[aria-expanded="true"] span[aria-hidden] { display: inline-block; transform: rotate(90deg); }
.live-list .live-item.open .row td { border-bottom-color: transparent; }
.live-list tr.detail td { padding-top: 0; padding-bottom: var(--s4); }
.live-list tr.detail .fields { font-size: var(--t-md); }
.live-list .date .days { color: var(--text-muted); font-size: var(--t-sm); }
.live-list .date.near { color: var(--text-strong); font-weight: 600; }
.live-list .date.near .days { color: var(--accent); font-weight: 600; }
.live-list .live-item.soon .row td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.soon-key { border-left: 3px solid var(--accent); padding-left: 4px; color: var(--text); }
.live-filters[hidden] { display: none; }

/* Sign in: the need for an account, before the form (the user, 5 October 2026; as What's On's). */
.newhere { border-left: 2px solid var(--accent); padding: var(--s1) 0 var(--s1) var(--s4); margin: var(--s6) 0 var(--s8); }
.newhere p { margin: 0 0 var(--s3); color: var(--text-strong); }
.button-outline { display: inline-block; font-family: var(--sans); font-size: var(--t-lg); font-weight: 600; color: var(--accent);
  background: none; border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--s2) var(--s6);
  min-height: 44px; box-sizing: border-box; line-height: 26px; text-decoration: none; }
.button-outline:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.button-outline:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.notice + .standfirst { margin-top: var(--s4); }
.newhere-or { margin-left: var(--s4); color: var(--text-muted); white-space: nowrap; }