/* Australian Colonial Hansards site styles.
   Identity is entirely token-driven: change the :root block, not components.
   Layer order: components beat base regardless of selector specificity. */

@layer base, components;

:root {
  /* Colour */
  --colour-brand: #1E3A2B;            /* bottle green: header, buttons, active tab */
  --colour-brand-contrast: #F0E6CB;   /* wordmark and text on green */
  --colour-nav-idle: #B9C4B4;         /* inactive nav links on green */
  --colour-accent: #B98D3F;           /* gilt: rules and active underlines */
  --colour-paper: #FCFCFA;            /* page background */
  --colour-card: #FFFFFF;             /* cards and panels */
  --colour-ink: #1B1E22;              /* body text */
  --colour-muted: #656C65;            /* meta lines, labels; keep >= 4.5:1 on paper and pill */
  --colour-border: #E8E6E0;           /* card and input borders */
  --colour-pill: #F0EFEA;             /* inactive tab pill background */
  --colour-highlight: #F3E3C0;        /* amber keyword <mark> */
  --colour-on-brand: #FFFFFF;         /* text on green fills (buttons, active tab) */
  --colour-focus: #8C6A2F;            /* focus rings: darker gilt, >= 3:1 on paper */
  --colour-badge-chamber: #DCE7DF;    /* sage tint for chamber badges */
  --colour-line-on-brand: color-mix(in srgb, var(--colour-brand-contrast) 35%, transparent);
  --colour-line-on-brand-faint: color-mix(in srgb, var(--colour-brand-contrast) 15%, transparent);
  --colour-backdrop: color-mix(in srgb, var(--colour-ink) 28%, transparent);        /* behind side panels */
  --colour-backdrop-faint: color-mix(in srgb, var(--colour-ink) 15%, transparent);  /* behind the picker */
  /* Browse pages-per-year scale: gilt to green, lightness falling every step. */
  --colour-scale-1: #F2E2B8;
  --colour-scale-2: #D9C07E;
  --colour-scale-3: #A9A860;
  --colour-scale-4: #6F9160;
  --colour-scale-5: #3E684B;
  --colour-scale-6: var(--colour-brand);
  --colour-cell-empty: #F6F5F2;       /* a year with no pages from a source */
  --colour-choice: var(--colour-plot-3);  /* Browse's chosen source pill: off the year scale's gilt-to-green */
  /* Plots tab: a decorative palette for groups, words and colonies, and the gradient's hue. */
  --colour-plot-1: #2F6B45;
  --colour-plot-2: #8C6A2F;
  --colour-plot-3: #3F5E8C;
  --colour-plot-4: #A0522D;
  --colour-plot-5: #2F7778;

  /* Type */
  --font-ui: "Public Sans", var(--font-sans);
  --font-extract: "Source Serif 4", var(--font-serif);
  --font-wordmark: "Libre Caslon Text", var(--font-serif);

  /* Signature details */
  --rule-gilt: 3px double var(--colour-accent);
  --radius-card: 10px;
  --radius-pill: 999px;
  /* Lift on a hovered result card. Warm-grey rather than neutral black so it
     reads against the paper background rather than dirtying it. */
  --shadow-card-hover: 0 1px 2px rgba(27, 30, 34, .07), 0 4px 10px rgba(27, 30, 34, .10),
                       0 10px 24px rgba(27, 30, 34, .07);
  --shadow-panel: -10px 0 30px color-mix(in srgb, var(--colour-ink) 18%, transparent);
  --font-size-badge: .72rem;          /* --font-size-00 (0.5rem) reads too small for a badge */
}

@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-400.60715978fab2.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-600.6b1fe1f62892.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-700.3c0eda7c2982.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-400.95bbd98f2b3c.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-400i.fa10869cc45e.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-600.beb0c8d8bee8.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("../fonts/libre-caslon-text-400.001d520e0d8b.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

@layer base {
  * { box-sizing: border-box; }
  /* Room for the scrollbar on every page, so short and long pages centre alike. */
  html { scrollbar-gutter: stable; }
  body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--font-size-1);
    line-height: 1.55;
    color: var(--colour-ink);
    background: var(--colour-paper);
    /* A column whose main grows: the footer sits at the window's foot on short pages. */
    min-height: 100dvh; display: flex; flex-direction: column;
  }
  /* A flex column shrinks auto-margined children to their content; keep main full width. */
  body > main { flex: 1 0 auto; width: 100%; }
  .container { max-width: 64rem; margin-inline: auto; padding-inline: var(--size-4); }
  h1 { font-size: var(--font-size-4); font-weight: 700; margin-block: var(--size-6) var(--size-3); }
  h2 { font-size: var(--font-size-3); font-weight: 600; margin-block: var(--size-6) var(--size-2); }
  a { color: var(--colour-brand); }
  p { margin-block: var(--size-2); }
  input[type="search"], input[type="number"], input[type="text"], input[type="password"], select {
    font: inherit;
    color: inherit;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-card);
    background: var(--colour-card);
    padding: var(--size-2) var(--size-3);
  }
  input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--colour-focus);
    outline-offset: 2px;
  }
  button {
    font: inherit;
    font-weight: 600;
    color: var(--colour-on-brand);
    background: var(--colour-brand);
    border: none;
    border-radius: var(--radius-card);
    padding: var(--size-2) var(--size-4);
    cursor: pointer;
  }
  mark { background: var(--colour-highlight); border-radius: 3px; padding: 0 .12em; }
  .muted { color: var(--colour-muted); }
  .notice { color: var(--colour-muted); font-style: italic; }
}

@layer components {
  .site-header { background: var(--colour-brand); border-bottom: var(--rule-gilt); }
  .site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--size-3); padding-block: var(--size-3);
  }
  .wordmark {
    display: inline-flex; align-items: center; gap: var(--size-3);
    color: var(--colour-brand-contrast); text-decoration: none;
    font-family: var(--font-wordmark); font-size: 1.6rem; line-height: 1;
    letter-spacing: .04em; text-transform: uppercase;
  }
  .wordmark img { height: 72px; width: auto; flex: none; }
  .wordmark .tagline {
    display: block; margin-top: .45rem; font-family: var(--font-ui); font-size: .68rem;
    letter-spacing: .3em; color: var(--colour-nav-idle);
  }
  .site-nav { display: flex; gap: var(--size-5); }
  /* Every link reserves the underline, so marking the current page moves nothing. */
  .site-nav a {
    color: var(--colour-nav-idle); text-decoration: none;
    font-size: var(--font-size-1); font-weight: 500;
    border-bottom: 2px solid transparent; padding-bottom: .15rem;
  }
  .site-nav a[aria-current="page"] { color: var(--colour-on-brand); border-bottom-color: var(--colour-accent); }
  /* Sign out is a POST button dressed as a nav link. */
  .site-nav .sign-out { display: contents; }
  .site-nav .sign-out button {
    background: none; border-radius: 0; padding: 0 0 .15rem;
    color: var(--colour-nav-idle); font-size: var(--font-size-1); font-weight: 500;
    border: 0; border-bottom: 2px solid transparent;
  }
  .sign-in { display: grid; gap: var(--size-2); max-width: 22rem; margin-top: var(--size-4); }
  .sign-in label { font-weight: 600; }
  .sign-in button { justify-self: start; margin-top: var(--size-2); }
  /* Wide: the popover nav sits inline. Narrow: a burger opens it as a side panel. */
  .menu-button, .menu-close { display: none; }
  @media (min-width: 60.01rem) {
    .site-nav[popover] {
      position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0;
      overflow: visible; border: 0; background: none; color: inherit;
    }
  }
  @media (max-width: 60rem) {
    .wordmark { font-size: 1.15rem; gap: var(--size-2); }
    .wordmark img { height: 52px; }
    .wordmark .tagline { font-size: .58rem; letter-spacing: .22em; }
    .menu-button, .menu-close {
      align-items: center; gap: .4rem; padding: .45rem .6rem; background: none; cursor: pointer;
      border: 1px solid var(--colour-line-on-brand); border-radius: 6px;
      color: var(--colour-brand-contrast); font: inherit; font-size: var(--font-size-0);
    }
    .menu-button { display: inline-flex; flex: none; }
    .menu-button svg { width: 20px; height: 20px; }
    .menu-close { display: block; align-self: flex-end; margin-bottom: var(--size-2); }
    /* site-nav's display: flex would otherwise beat the browser's hiding of a closed popover. */
    .site-nav[popover]:not(:popover-open) { display: none; }
    .site-nav[popover] {
      position: fixed; inset: 0 0 0 auto; width: min(18rem, 85vw); height: 100dvh; margin: 0;
      flex-direction: column; gap: 0; padding: var(--size-4);
      border: 0; border-left: var(--rule-gilt); background: var(--colour-brand);
    }
    .site-nav[popover]::backdrop { background: var(--colour-backdrop); }
    .site-nav[popover] a, .site-nav[popover] .sign-out button {
      padding: .8rem 0; border-bottom: 1px solid var(--colour-line-on-brand-faint); font-size: var(--font-size-2);
    }
    .site-nav[popover] .sign-out button { text-align: left; }
    .site-nav[popover] a[aria-current="page"] {
      padding-left: .8rem; border-bottom-color: var(--colour-line-on-brand-faint); box-shadow: inset 3px 0 0 var(--colour-accent);
    }
  }
  @media (max-width: 30rem) {
    .wordmark { font-size: 1rem; }
    .wordmark img { height: 44px; }
    .wordmark .tagline { display: none; }
    .menu-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }
  .site-footer {
    margin-top: var(--size-8);
    border-top: 1px solid var(--colour-border);
    color: var(--colour-muted); font-size: var(--font-size-0);
  }
  .site-footer .container { padding-block: var(--size-4); }
  .site-footer img { max-width: 100%; }

  /* ARDC acknowledgement: shared by the footer and the About page. */
  .ardc { display: flex; align-items: center; gap: var(--size-3); }

  /* Search bar and facets */
  .search-bar { display: flex; gap: var(--size-2); align-items: center; }
  .search-bar input[type="search"] { flex: 1 1 auto; min-width: 0; }
  .search-bar .clear {
    font-size: var(--font-size-0); color: var(--colour-muted);
    align-self: center; white-space: nowrap;
  }
  .search-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--size-6); margin-top: var(--size-5); align-items: start; }
  @media (max-width: 52rem) { .search-layout { grid-template-columns: 1fr; } }
  .search-main { min-width: 0; }

  .facet-sidebar { min-width: 0; }
  /* search.js sets the offset: below the top if the sidebar fits the window,
     else held by its bottom edge so every facet stays reachable. */
  .facet-sidebar.is-sticky { position: sticky; top: var(--facet-sticky-top, var(--size-3)); }
  @media (max-width: 52rem) {
    .facet-sidebar.is-sticky { position: static; }
    .facet-sidebar.is-folded { display: none; }
    .facet-toggle:not([hidden]) { display: inline-block; }
  }
  .facet-toggle {
    display: none; justify-self: start; padding: .4rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--colour-border);
    background: var(--colour-card); color: var(--colour-ink); font: inherit; font-weight: 600; cursor: pointer;
  }
  .facet-toggle[aria-expanded="true"] { background: var(--colour-pill); }
  .facet-toggle span { font-weight: 400; color: var(--colour-muted); }

  .facet-group { border-top: 1px solid var(--colour-border); padding-block: var(--size-3); }
  .facet-group:first-of-type { border-top: 0; padding-top: 0; }
  .facet-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--size-2); margin-bottom: var(--size-2); }
  .facet-group-head h2 { margin: 0; font-size: var(--font-size-1); font-weight: 700; }
  .facet-reset { font-size: var(--font-size-0); }
  .facet-subhead { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--colour-muted); font-weight: 600; margin: var(--size-2) 0 .1rem .35rem; }
  .facet-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--size-2); align-items: center; padding: .28rem .35rem; border-radius: 6px; cursor: pointer; }
  .facet-option:hover { background: var(--colour-pill); }
  .facet-option input { margin: 0; accent-color: var(--colour-brand); }
  .facet-label { min-width: 0; overflow-wrap: anywhere; }
  .facet-label small { display: block; color: var(--colour-muted); font-size: var(--font-size-0); }
  .facet-count { font-size: var(--font-size-0); color: var(--colour-muted); font-variant-numeric: tabular-nums; }
  .facet-option.is-selected .facet-label { font-weight: 600; }
  .facet-option.is-empty { color: var(--colour-muted); }
  .facet-years { display: flex; gap: var(--size-2); align-items: center; }
  .facet-years input { width: 5.5rem; }
  .facet-histogram { display: flex; align-items: end; gap: 1px; height: 3.2rem; margin-top: var(--size-2); }
  .facet-histogram i { flex: 1; background: var(--colour-pill); border-radius: 1px 1px 0 0; min-height: 2px; }
  .facet-histogram i.is-selected { background: var(--colour-brand); }
  .facet-histogram-axis { display: flex; justify-content: space-between; font-size: .66rem; color: var(--colour-muted); font-variant-numeric: tabular-nums; }
  .facet-apply { margin-top: var(--size-3); width: 100%; }
  .facet-note { font-size: var(--font-size-0); color: var(--colour-muted); margin: 0 0 var(--size-3); }

  .applied-filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: var(--size-3); font-size: var(--font-size-0); }
  .filter-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .3rem .2rem .7rem; border-radius: var(--radius-pill); background: var(--colour-badge-chamber); }
  .filter-chip b { font-weight: 600; color: color-mix(in srgb, var(--colour-muted) 80%, var(--colour-ink)); }
  .filter-chip a { width: 1.2rem; height: 1.2rem; border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: var(--colour-ink); }
  .filter-chip a:hover { background: var(--colour-brand); color: var(--colour-on-brand); }

  .results-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--size-3); flex-wrap: wrap; padding-bottom: var(--size-2); border-bottom: 1px solid var(--colour-border); margin-bottom: var(--size-3); }
  .results-head p { margin: 0; }
  .results-count { color: var(--colour-muted); }
  .results-count b { font-family: var(--font-extract); font-size: var(--font-size-4); font-weight: 600; color: var(--colour-ink); font-variant-numeric: tabular-nums; }
  .results-head .muted { font-size: var(--font-size-0); }

  /* Pill tabs. CSS-only via the :checked sibling selectors; search.js only
     syncs the hidden `tab` field, never the visual switch. Only the keyword
     tab's ids are fixed and named here: there is one semantic tab per
     queryable generation, an unbounded, run-time-determined count, so its
     id-based rule is emitted inline per tab by the template instead
     (chunk_results.html), not enumerated here. */
  .tab-radio { position: absolute; opacity: 0; pointer-events: none; }
  .tab-bar { display: flex; gap: var(--size-2); margin-block: var(--size-6) var(--size-4); }
  .tab-bar label {
    padding: .35rem .9rem; border-radius: var(--radius-pill);
    background: var(--colour-pill); color: var(--colour-muted);
    font-size: var(--font-size-0); cursor: pointer;
  }
  .tab-panel { display: none; }
  #tab-keyword:focus-visible ~ .tab-bar label[for="tab-keyword"] {
    outline: 2px solid var(--colour-accent); outline-offset: 2px;
  }
  #tab-keyword:checked ~ .tab-bar label[for="tab-keyword"] {
    background: var(--colour-brand); color: var(--colour-on-brand);
  }
  #tab-keyword:checked ~ #panel-keyword { display: block; }
  #tab-plots:focus-visible ~ .tab-bar label[for="tab-plots"] {
    outline: 2px solid var(--colour-accent); outline-offset: 2px;
  }
  #tab-plots:checked ~ .tab-bar label[for="tab-plots"] {
    background: var(--colour-brand); color: var(--colour-on-brand);
  }
  #tab-plots:checked ~ #panel-plots { display: block; }

  .result-summary { color: var(--colour-muted); font-size: var(--font-size-0); margin-block: var(--size-2); }

  .pagination {
    display: flex; justify-content: center; align-items: center; gap: var(--size-3);
    margin-block: var(--size-5); font-size: var(--font-size-0);
  }
  .pagination a {
    padding: .3rem .8rem; border: 1px solid var(--colour-border);
    border-radius: var(--radius-pill); background: var(--colour-card);
    text-decoration: none;
  }
  .pagination a:hover { background: var(--colour-pill); }
  .page-status { color: var(--colour-muted); }

  /* Result cards */
  /* The whole card is the click target. The link stays on the snippet text and
     stretches over the card with a pseudo-element, rather than the card being
     wrapped in an <a>: wrapping would nest the copy-citation button inside a
     link, which is invalid, and would read the entire card aloud as one link. */
  .hit {
    position: relative;
    background: var(--colour-card);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-card);
    padding: var(--size-3) var(--size-4);
    margin-block: var(--size-3);
    transition: box-shadow .15s ease, border-color .15s ease;
  }
  /* Hover is a lift and nothing else. An accent border here read as a warning
     rather than an affordance against this palette, where gilt means "active".
     Keyboard focus keeps the strong indicator, which is where it belongs. */
  .hit:hover { box-shadow: var(--shadow-card-hover); }
  .hit:focus-within {
    border-color: var(--colour-accent);
    box-shadow: var(--shadow-card-hover);
  }
  .hit .snippet a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  /* Above the stretched overlay. The copy button and the also-in links stop
     working underneath it; the metadata lines stop being SELECTABLE underneath
     it, and the page number in .position is exactly what a reader copies when
     citing. Measured: .position went from 23 selectable characters to 0 before
     these were raised. Clickability is added here, nothing is taken away. */
  .hit .cite, .hit .also-in, .hit .position, .hit .page-date {
    position: relative; z-index: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .hit { transition: none; }
  }
  .hit .title { font-weight: 600; }
  .hit .badges { display: flex; gap: .35rem; margin-top: .25rem; flex-wrap: wrap; }
  .badge {
    display: inline-block;
    font-size: var(--font-size-badge);
    padding: .1rem .55rem;
    border-radius: var(--radius-pill);
    background: var(--colour-pill);
    color: var(--colour-ink);
  }
  .badge-publication { background: var(--colour-brand); color: var(--colour-on-brand); font-weight: 600; }
  .badge-jurisdiction { background: var(--colour-highlight); }
  .badge-year { background: var(--colour-pill); }
  .badge-chamber { background: var(--colour-badge-chamber); }
  .hit .snippet { font-family: var(--font-extract); line-height: 1.6; margin-top: .35rem; }
  .hit .snippet a { color: inherit; text-decoration: none; }
  /* Deliberately no underline on hover. The link now stretches over the whole
     card, so :hover fires from anywhere on it and this underlined two full
     lines of serif at once, which reads as noise. The card's lift is the hover
     affordance; the underline is kept for keyboard focus, where the reader
     needs to see exactly what is focused. */
  .hit .snippet a:focus-visible { text-decoration: underline; }
  /* clamp.js shortens long semantic and reading-list passages to about half a typical one;
     it reads the limit from here. */
  .hit .snippet[data-clamp] { --clamp-lines: 10; }
  /* The fade is a sibling, not a mask on the snippet: a mask clips the card-wide
     link overlay to the text box, so the badges and margins stop opening the passage. */
  .hit .snippet.is-clamped { max-height: calc(var(--clamp-lines) * 1lh); overflow: hidden; }
  .hit .clamp-fade { display: none; }
  .hit .snippet.is-clamped + .clamp-fade {
    display: block; position: relative; pointer-events: none; line-height: 1.6; height: 3lh; margin-top: -3lh;
    background: linear-gradient(to bottom, transparent, var(--colour-card));
  }
  .hit .show-more {
    position: relative; z-index: 1; margin-top: .3rem; cursor: pointer;
    background: var(--colour-card); border: 1px solid var(--colour-border); color: var(--colour-brand);
    border-radius: var(--radius-pill); font-size: var(--font-size-0); font-weight: 600; padding: .2rem .8rem;
  }
  .hit .show-more:hover { background: var(--colour-pill); }
  @media print {
    .hit .snippet.is-clamped { max-height: none; overflow: visible; }
    .hit .snippet.is-clamped + .clamp-fade, .hit .show-more { display: none; }
  }
  .hit .position, .hit .page-date, .hit .also-in {
    color: var(--colour-muted); font-size: var(--font-size-0); margin-top: .2rem;
  }
  .hit .page-date { font-style: italic; }
  .hit .cite {
    margin-top: .2rem; font-size: var(--font-size-0); color: var(--colour-muted);
    display: flex; gap: .6rem; align-items: baseline;
  }
  .copy-cite {
    background: none; border: 1px solid var(--colour-accent); color: var(--colour-brand);
    border-radius: var(--radius-pill); font-size: var(--font-size-badge);
    padding: .15rem .6rem; min-height: 24px; cursor: pointer;
  }
  .copy-cite:hover { background: var(--colour-highlight); }

  /* Passage detail */
  .page-meta { color: var(--colour-muted); font-size: var(--font-size-0); margin-block: .2rem; }
  .page-date { color: var(--colour-muted); font-size: var(--font-size-0); font-style: italic; }
  /* The passage page leads with where and when; the source and position follow. */
  .passage-title { margin-bottom: var(--size-1); }
  .passage-date { font-family: var(--font-extract); font-size: var(--font-size-3); margin: 0 0 var(--size-1); }
  .passage-highlight { color: var(--colour-muted); font-size: var(--font-size-0); margin-block: var(--size-3) var(--size-2); }
  .source-link.is-button {
    display: inline-block; padding: .3rem .9rem; border-radius: var(--radius-pill); background: var(--colour-brand);
    color: var(--colour-on-brand); text-decoration: none; font-weight: 600; font-size: var(--font-size-badge);
  }
  .extract {
    font-family: var(--font-extract);
    line-height: 1.7;
    white-space: pre-wrap;
    background: var(--colour-card);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-card);
    padding: var(--size-4) var(--size-5);
    margin-block: var(--size-4);
  }
  .passage-nav { display: flex; justify-content: space-between; margin-block: var(--size-4); }

  /* Legacy grouped results */
  .group h2 {
    font-size: var(--font-size-1);
    border-bottom: 1px solid var(--colour-border);
    padding-bottom: .3rem;
  }

  /* Browse */
  .browse-intro { display: flex; justify-content: space-between; align-items: end; gap: var(--size-5); flex-wrap: wrap; margin-bottom: var(--size-4); }
  .browse-lede { font-family: var(--font-extract); font-size: var(--font-size-3); line-height: 1.35; max-width: 40ch; margin-top: 0; border-left: var(--rule-gilt); padding-left: var(--size-4); }
  .browse-stats { display: flex; gap: var(--size-5); margin: 0; }
  .browse-stats div { display: flex; flex-direction: column-reverse; }
  .browse-stats dd { margin: 0; font-family: var(--font-extract); font-size: var(--font-size-5); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
  .browse-stats dt { font-size: var(--font-size-0); color: var(--colour-muted); }

  .browse-legend { display: flex; align-items: center; gap: var(--size-2) var(--size-3); flex-wrap: wrap; margin-top: var(--size-5); font-size: var(--font-size-0); color: var(--colour-muted); }
  .browse-legend-steps { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .browse-legend-steps li { display: grid; justify-items: center; gap: .15rem; font-variant-numeric: tabular-nums; }
  .browse-legend .year-cell { width: 2.6rem; height: 1rem; }
  .browse-legend-none { display: inline-flex; align-items: center; gap: var(--size-2); }
  .browse-legend-none .year-cell { width: 1.4rem; border: 1px solid var(--colour-border); }
  .browse-legend .year-cell.shared::after { top: 2px; right: 2px; }

  .browse-region h2 { font-family: var(--font-extract); display: flex; gap: var(--size-3); align-items: baseline; border-bottom: var(--rule-gilt); padding-bottom: var(--size-1); }
  .browse-region h2 .muted { font-family: var(--font-ui); font-size: var(--font-size-0); font-weight: 400; }

  .browse-block { background: var(--colour-card); border: 1px solid var(--colour-border); border-radius: var(--radius-card); margin-top: var(--size-3); padding: var(--size-3) var(--size-4); }
  .browse-block-head { display: flex; gap: var(--size-3) var(--size-5); align-items: center; flex-wrap: wrap; padding-bottom: var(--size-2); border-bottom: 1px solid var(--colour-border); }
  .browse-block-head h3 { margin: 0; font-size: var(--font-size-3); font-weight: 700; min-width: 12rem; }
  .browse-block-head h3 a { color: var(--colour-ink); text-decoration: none; }
  .browse-block-head h3 a:hover { text-decoration: underline; text-decoration-color: var(--colour-accent); }
  .browse-facts { display: flex; gap: var(--size-2) var(--size-4); align-items: center; flex-wrap: wrap; margin: 0; font-size: var(--font-size-0); color: var(--colour-muted); }
  .browse-facts b { font-family: var(--font-extract); font-size: var(--font-size-3); color: var(--colour-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .browse-chip { padding: .1rem .55rem; border-radius: var(--radius-pill); background: var(--colour-pill); color: var(--colour-ink); text-decoration: none; white-space: nowrap; }
  .browse-chip:hover { background: var(--colour-badge-chamber); }

  .browse-sources { display: flex; flex-wrap: wrap; gap: var(--size-2); border: 0; margin: 0; padding: var(--size-4) 0 var(--size-3); min-width: 0; }
  .browse-sources label { position: relative; max-width: 100%; cursor: pointer; }
  .browse-sources input { position: absolute; opacity: 0; }
  .browse-sources label > span, .browse-source-only { display: block; padding: .25rem .75rem; border: 1px solid var(--colour-border); border-radius: var(--radius-pill); font-weight: 600; }
  .browse-sources label:hover > span { background: var(--colour-pill); }
  .browse-sources input:checked + span, .browse-source-only { background: var(--colour-choice); border-color: var(--colour-choice); color: var(--colour-on-brand); }
  .browse-sources input:focus-visible + span { outline: 2px solid var(--colour-focus); outline-offset: 2px; }
  .browse-sources .unnamed { font-style: italic; font-weight: 400; }
  .browse-decades { display: grid; gap: 3px; min-width: 0; padding-bottom: var(--size-2); container-type: inline-size; }
  .browse-decades[hidden] { display: none; }
  .browse-decade { display: grid; grid-template-columns: 3.4rem repeat(10, minmax(0, 4.4rem)); gap: 3px; align-items: center; }
  .browse-decade-label { font-size: var(--font-size-0); font-weight: 600; color: var(--colour-muted); text-decoration: none; font-variant-numeric: tabular-nums; }
  .browse-decade-label:hover { color: var(--colour-brand); text-decoration: underline; }

  .year-cell { display: grid; place-items: center; height: 2.1rem; border-radius: 4px; font-size: .72rem; font-variant-numeric: tabular-nums; text-decoration: none; background: var(--colour-cell-empty); color: var(--colour-muted); }
  a.year-cell { font-weight: 600; color: var(--colour-ink); }
  a.year-cell:hover { filter: brightness(.9); }
  .year-cell.step-1 { background: var(--colour-scale-1); }
  .year-cell.step-2 { background: var(--colour-scale-2); }
  .year-cell.step-3 { background: var(--colour-scale-3); }
  .year-cell.step-4 { background: var(--colour-scale-4); }
  .year-cell.step-5 { background: var(--colour-scale-5); }
  .year-cell.step-6 { background: var(--colour-scale-6); }
  /* White from step 5: on step 4 it is 3.6:1, under the 4.5:1 small text needs. */
  a.year-cell.step-5, a.year-cell.step-6 { color: var(--colour-on-brand); }
  /* A year more than one source has pages in. */
  .year-cell.shared { position: relative; }
  .year-cell.shared::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--colour-accent); box-shadow: 0 0 0 1px var(--colour-card); }
  .year-short { display: none; }
  @container (max-width: 26rem) {
    .browse-decade { grid-template-columns: 2.6rem repeat(10, minmax(0, 1fr)); gap: 2px; }
    .year-full { display: none; }
    .year-short { display: inline; }
  }
  @media (max-width: 40rem) {
    .browse-sources label > span, .browse-source-only { border-radius: 12px; }
  }
}

/* Browse calendar */
@layer components {
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* Browse's views as section tabs above the view's description; the open one is underlined in gilt. */
  .browse-title { margin-bottom: var(--size-2); }
  .browse-tabs { display: flex; gap: var(--size-6); flex-wrap: wrap; border-bottom: 1px solid var(--colour-border); margin-block: 0 var(--size-5); }
  .browse-tabs a { padding-block: var(--size-2); margin-bottom: -1px; border-bottom: 3px solid transparent; font-size: var(--font-size-3); font-weight: 600; color: var(--colour-muted); text-decoration: none; }
  .browse-tabs a:hover { color: var(--colour-ink); }
  .browse-tabs a[aria-current="page"] { color: var(--colour-brand); border-bottom-color: var(--colour-accent); }
  @media (max-width: 40rem) {
    .browse-tabs { gap: var(--size-4); }
    .browse-tabs a { font-size: var(--font-size-2); }
  }

  /* The card breaks out of the reading column, up to 80rem. */
  .calendar {
    width: min(80rem, 100vw - 2 * var(--size-4));
    margin-inline: calc(50% - min(40rem, 50vw - var(--size-4)));
    background: var(--colour-card); border: 1px solid var(--colour-border); border-radius: var(--radius-card);
    padding: var(--size-4);
  }
  @media (max-width: 66rem) { .calendar { width: auto; margin-inline: 0; } }

  .calendar-legislatures { display: flex; gap: .35rem; flex-wrap: wrap; padding-bottom: var(--size-3); margin-bottom: var(--size-4); border-bottom: 1px solid var(--colour-border); }
  .calendar-chip { font-size: var(--font-size-0); padding: .25rem .7rem; border-radius: var(--radius-pill); border: 1px solid var(--colour-border); background: var(--colour-card); color: var(--colour-ink); text-decoration: none; }
  a.calendar-chip:hover { background: var(--colour-pill); }
  .calendar-chip[aria-current="true"] { background: var(--colour-brand); border-color: var(--colour-brand); color: var(--colour-on-brand); font-weight: 600; }
  .calendar-chip small { font-variant-numeric: tabular-nums; opacity: .8; }
  .calendar-chip.is-undated { color: var(--colour-muted); border-style: dashed; }
  .calendar-chip.is-undated small { opacity: 1; }

  /* Home */
  .home-band {
    color: var(--colour-brand-contrast); padding-block: var(--size-9) var(--size-10); border-bottom: var(--rule-gilt);
    /* Lighter at the top and glowing behind the map, so the band reads apart from the header. */
    background:
      radial-gradient(ellipse 45% 70% at 76% 50%, color-mix(in srgb, var(--colour-scale-5) 55%, transparent), transparent 70%),
      linear-gradient(to bottom, color-mix(in srgb, var(--colour-scale-5) 45%, var(--colour-brand)), var(--colour-brand) 75%);
  }
  .home-band .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--size-6); align-items: center; }
  .home-band .container.home-intro-wrap { display: block; }
  .home-intro {
    max-width: 46rem; margin: var(--size-9) 0 0; padding-left: var(--size-4); border-left: var(--rule-gilt);
    font-family: var(--font-extract); font-style: italic; font-size: var(--font-size-3); line-height: 1.5; color: var(--colour-brand-contrast);
  }
  @media (max-width: 52rem) { .home-band .container { grid-template-columns: minmax(0, 1fr); } }
  .home-stats {
    display: flex; flex-wrap: wrap; row-gap: var(--size-5); width: fit-content; max-width: 100%; margin: var(--size-7) 0 0;
    padding-top: var(--size-5); border-top: 1px solid var(--colour-line-on-brand);
  }
  /* Figure above its label; the dt stays first for screen readers. */
  .home-stats div { display: flex; flex-direction: column-reverse; padding: 0 var(--size-6); border-left: 1px solid var(--colour-line-on-brand-faint); }
  .home-stats div:first-child { padding-left: 0; border-left: 0; }
  .home-stats dd { margin: 0; font-family: var(--font-wordmark); font-size: 2.1rem; line-height: 1.1; white-space: nowrap; color: var(--colour-brand-contrast); }
  .home-stats dt { margin-top: var(--size-1); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--colour-nav-idle); }
  @media (max-width: 52rem) {
    .home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--size-4); width: auto; }
    .home-stats div { padding-left: 0; border-left: 0; }
    .home-stats dd { font-size: 1.6rem; }
  }
  .home-band h1 { font-family: var(--font-wordmark); font-weight: 400; font-size: var(--font-size-6); line-height: 1.2; margin: 0 0 var(--size-4); color: var(--colour-brand-contrast); }
  .home-search { display: flex; gap: var(--size-2); }
  /* Ink, not the band's inherited cream: the box itself is white. */
  .home-search input { flex: 1; min-width: 0; font-size: var(--font-size-2); padding: .7rem 1rem; color: var(--colour-ink); }
  .home-search button { font-size: var(--font-size-1); padding-inline: var(--size-4); background: var(--colour-accent); border-color: var(--colour-accent); color: var(--colour-ink); }
  /* The site's gilt focus ring is too dark on the green band; cream reads at 7:1 or better. */
  .home-search input:focus-visible, .home-search button:focus-visible { outline-color: var(--colour-brand-contrast); }
  .home-map { width: 100%; max-width: 30rem; height: auto; justify-self: end; }
  .home-browse-heading { font-family: var(--font-wordmark); font-weight: 400; font-size: var(--font-size-5); margin: var(--size-9) 0 var(--size-5); }
  .home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-3); margin-bottom: var(--size-9); }
  .home-tile {
    aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-2);
    padding: var(--size-4); text-align: center; text-decoration: none; color: var(--colour-ink);
    background: var(--colour-card); border: 1px solid var(--colour-border); border-top: var(--rule-gilt); border-radius: var(--radius-card);
  }
  .home-tile:hover { box-shadow: var(--shadow-card-hover); }
  .home-tile svg { width: 3.4rem; height: 3.4rem; margin-bottom: var(--size-1); fill: none; stroke: var(--colour-brand); stroke-width: 1.4; stroke-linecap: round; flex: none; }
  .home-tile:hover svg { stroke: var(--colour-accent); }
  .home-tile b { font-family: var(--font-wordmark); font-weight: 400; font-size: var(--font-size-5); line-height: 1.15; color: var(--colour-brand); }
  .home-tile span { color: var(--colour-muted); max-width: 20ch; line-height: 1.4; }
  @media (max-width: 44rem) {
    .home-tiles { grid-template-columns: minmax(0, 1fr); gap: var(--size-2); }
    .home-tile { aspect-ratio: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem var(--size-3); align-content: center; text-align: left; padding: var(--size-3) var(--size-4); }
    .home-tile svg { grid-row: span 2; width: 2.2rem; height: 2.2rem; margin: 0; }
    .home-tile b { font-size: var(--font-size-2); }
    .home-tile span { max-width: none; font-size: var(--font-size-0); }
  }

  /* Browse people */
  .people-filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--size-2) var(--size-4); margin-top: var(--size-4); }
  .people-filters .calendar-legislatures { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
  .people-sort { display: flex; gap: var(--size-3); align-items: baseline; font-size: var(--font-size-0); }
  .people-sort span { color: var(--colour-muted); }
  .people-sort a[aria-current="true"] { color: var(--colour-ink); font-weight: 600; text-decoration: none; }
  .people-letters { display: grid; grid-template-columns: 2.6rem repeat(26, minmax(0, 1fr)); gap: 2px; margin-block: var(--size-3) var(--size-4); font-size: var(--font-size-0); font-weight: 600; }
  .people-letters a, .people-letters span { display: grid; place-items: center; height: 1.9rem; border-radius: 6px; text-decoration: none; }
  .people-letters a:hover { background: var(--colour-pill); }
  .people-letters a[aria-current="true"] { background: var(--colour-brand); color: var(--colour-on-brand); }
  .people-letters span { color: var(--colour-border); }
  .people-list { list-style: none; margin: var(--size-2) 0 0; padding: 0; border-top: 1px solid var(--colour-border); }
  .people-list li { border-bottom: 1px solid var(--colour-border); }
  .person-row {
    display: grid; grid-template-columns: minmax(0, 1.4fr) 9.5rem minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--size-3);
    align-items: baseline; padding: .65rem .5rem; color: var(--colour-ink); text-decoration: none;
  }
  .person-row:hover { background: var(--colour-card); }
  .person-name { font-family: var(--font-extract); font-size: var(--font-size-2); }
  .person-name b { font-weight: 600; }
  .person-name small { font-family: var(--font-ui); font-size: var(--font-size-0); color: var(--colour-muted); }
  .person-jurisdiction, .person-terms { font-size: var(--font-size-1); }
  .person-terms { font-variant-numeric: tabular-nums; }
  .person-electorates { font-size: var(--font-size-1); color: var(--colour-muted); }
  @media (max-width: 44rem) {
    .people-letters { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .person-row { grid-template-columns: minmax(0, 1fr) auto; gap: .1rem var(--size-3); }
    .person-jurisdiction { grid-column: 2; grid-row: 1; color: var(--colour-muted); }
    .person-terms, .person-electorates { grid-column: 1 / -1; }
  }

  .calendar-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--size-3); margin-bottom: var(--size-4); }
  .calendar-step { justify-self: start; display: inline-block; font-weight: 600; color: var(--colour-brand); text-decoration: none; padding: .4rem .9rem; border: 1px solid var(--colour-border); border-radius: 8px; background: var(--colour-card); text-align: left; }
  a.calendar-step:hover { background: var(--colour-pill); }
  .calendar-step small { display: block; font-size: .7rem; font-weight: 400; color: var(--colour-muted); }
  .calendar-step.is-next { justify-self: end; text-align: right; }
  .calendar-step.is-disabled { color: var(--colour-muted); font-weight: 400; }
  .calendar-heading { text-align: center; }
  .calendar-heading h2 { margin: 0; font-family: var(--font-extract); font-size: var(--font-size-6); line-height: 1.1; }
  .calendar-sub { margin: .1rem 0 0; font-size: var(--font-size-0); color: var(--colour-muted); }
  .calendar-select { font: inherit; font-size: var(--font-size-0); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--size-2); padding: .4rem .9rem; border: 1px solid var(--colour-brand); border-radius: 8px; background: var(--colour-card); color: var(--colour-brand); }
  .calendar-select:hover { background: var(--colour-brand); color: var(--colour-on-brand); }
  .calendar-select svg { width: 1rem; height: 1rem; }

  /* Day and picker shading share the Browse scale. */
  :is(.calendar-day, .picker-year, .picker-month, .calendar-legend span).step-1 { --cell: var(--colour-scale-1); }
  :is(.calendar-day, .picker-year, .picker-month, .calendar-legend span).step-2 { --cell: var(--colour-scale-2); }
  :is(.calendar-day, .picker-year, .picker-month, .calendar-legend span).step-3 { --cell: var(--colour-scale-3); }
  :is(.calendar-day, .picker-year, .picker-month, .calendar-legend span).step-4 { --cell: var(--colour-scale-4); }
  /* White from step 5: on step 4 it is under the 4.5:1 small text needs. */
  :is(.calendar-day, .picker-year, .picker-month, .calendar-legend span).step-5 { --cell: var(--colour-scale-5); --cell-ink: var(--colour-on-brand); }
  :is(.calendar-day, .picker-year, .picker-month, .calendar-legend span).step-6 { --cell: var(--colour-scale-6); --cell-ink: var(--colour-on-brand); }
  .week-only { --cell: repeating-linear-gradient(135deg, var(--colour-scale-1) 0 4px, var(--colour-card) 4px 8px); }

  .calendar-picker {
    position: fixed; inset: 8vh 0 auto 0; margin-inline: auto; width: min(56rem, 100vw - 2 * var(--size-4)); max-height: 84vh; overflow-y: auto;
    background: var(--colour-card); color: var(--colour-ink); border: 1px solid var(--colour-border); border-top: var(--rule-gilt);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover); padding: var(--size-3) var(--size-4);
  }
  .calendar-picker::backdrop { background: var(--colour-backdrop-faint); }
  .picker-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--size-5); }
  .calendar-picker h3 { margin: 0 0 .4rem; font-size: var(--font-size-0); text-transform: uppercase; letter-spacing: .07em; color: var(--colour-muted); }
  .calendar-picker h3 span { text-transform: none; letter-spacing: 0; font-weight: 400; }
  .picker-decades { display: grid; gap: 3px; }
  .picker-decade { display: grid; grid-template-columns: 2.8rem repeat(10, minmax(0, 1fr)); gap: 3px; align-items: center; }
  .picker-decade-label { font-size: .7rem; font-weight: 600; color: var(--colour-muted); font-variant-numeric: tabular-nums; }
  .picker-year, .picker-month { display: grid; place-content: center; text-align: center; border-radius: 4px; font-size: .7rem; font-variant-numeric: tabular-nums; text-decoration: none; background: var(--cell, var(--colour-cell-empty)); color: var(--cell-ink, var(--colour-muted)); }
  .picker-year { height: 1.9rem; }
  a.picker-year, a.picker-month { font-weight: 600; color: var(--cell-ink, var(--colour-ink)); }
  a.picker-year:hover, a.picker-month:hover { filter: brightness(.9); }
  .picker-year[aria-current="true"], .picker-year[aria-pressed="true"], .picker-month[aria-current="true"] { outline: 2px solid var(--colour-ink); outline-offset: 1px; }
  .picker-month-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
  .picker-month { height: 3rem; font-size: var(--font-size-0); line-height: 1.15; }
  .picker-month small { display: block; font-size: .64rem; font-weight: 400; opacity: .85; }
  .calendar-picker .year-short { display: none; }
  .picker-go { display: flex; gap: var(--size-2); align-items: center; flex-wrap: wrap; margin-top: var(--size-3); padding-top: var(--size-2); border-top: 1px solid var(--colour-border); font-size: var(--font-size-0); }
  .picker-go input { font: inherit; padding: .25rem .5rem; border: 1px solid var(--colour-border); border-radius: 6px; width: 12rem; }
  .picker-go button { font: inherit; padding: .25rem .8rem; border: 0; border-radius: 6px; background: var(--colour-brand); color: var(--colour-on-brand); font-weight: 600; cursor: pointer; }
  .calendar-go-error { text-align: center; }

  .calendar-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 6px; margin-inline: -6px; width: calc(100% + 12px); }
  .calendar-grid th { text-align: left; font-size: var(--font-size-0); font-weight: 700; color: var(--colour-muted); padding: 0 .5rem .35rem; border-bottom: 1px solid var(--colour-border); }
  .calendar-grid td { padding: 0; vertical-align: top; }
  .weekday-short { display: none; }
  .calendar-day { display: flex; flex-direction: column; gap: .25rem; min-height: 8.5rem; padding: .5rem .6rem; border-radius: 8px; border: 1px solid var(--colour-border); background: var(--cell, var(--colour-card)); color: var(--cell-ink, var(--colour-ink)); text-decoration: none; min-width: 0; }
  a.calendar-day:hover { box-shadow: var(--shadow-card-hover); }
  a.calendar-day:focus-visible { outline: 3px solid var(--colour-focus); outline-offset: 1px; }
  a.calendar-day[aria-current="date"] { outline: 3px solid var(--colour-ink); outline-offset: 1px; }
  .calendar-day.is-outside { background: var(--colour-cell-empty); color: var(--colour-muted); border-style: dashed; }
  .day-top { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
  .day-number { font-weight: 700; font-size: var(--font-size-3); font-variant-numeric: tabular-nums; line-height: 1; }
  .day-total { font-size: var(--font-size-0); font-variant-numeric: tabular-nums; opacity: .9; }
  .day-line { display: flex; justify-content: space-between; gap: .4rem; font-size: var(--font-size-0); line-height: 1.25; font-variant-numeric: tabular-nums; }
  .day-line span { white-space: nowrap; }
  .day-line span:first-child { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  .day-sources { font-size: .72rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calendar-grid.is-all a.calendar-day:not(.week-only) { --cell: var(--colour-card); --cell-ink: var(--colour-ink); }
  .calendar-grid.is-all .day-line span:first-child { font-weight: 400; }
  .day-line i { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; margin-right: .3rem; background: var(--dot, var(--colour-muted)); }
  [data-legislature="NSW"] { --dot: var(--colour-scale-5); }
  [data-legislature="Vic"] { --dot: var(--colour-accent); }
  [data-legislature="QLD"] { --dot: var(--colour-scale-4); }
  [data-legislature="SA"] { --dot: var(--colour-focus); }
  [data-legislature="WA"] { --dot: var(--colour-brand); }
  [data-legislature="Tas"] { --dot: var(--colour-scale-3); }
  [data-legislature="NZ"] { --dot: var(--colour-muted); }

  .calendar-foot { display: flex; justify-content: space-between; gap: var(--size-3); flex-wrap: wrap; margin-top: var(--size-3); font-size: var(--font-size-0); color: var(--colour-muted); }
  .calendar-legend { display: flex; align-items: center; gap: var(--size-2) var(--size-3); flex-wrap: wrap; }
  .calendar-legend ol { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .calendar-legend li { display: grid; justify-items: center; gap: .15rem; font-size: .68rem; font-variant-numeric: tabular-nums; }
  .calendar-legend li span, .calendar-legend-week span { display: block; width: 2.2rem; height: .9rem; border-radius: 3px; background: var(--cell); }
  .calendar-legend-week { display: inline-flex; align-items: center; gap: var(--size-2); }
  .calendar-legend-week span { width: 1.4rem; border: 1px solid var(--colour-border); }
  .calendar-note { margin: 0; max-width: 70ch; }
  .calendar-note b { color: var(--colour-ink); }
  .derived-tag { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--colour-muted); border: 1px solid var(--colour-border); border-radius: var(--radius-pill); padding: 0 .45rem; }

  /* Day details: a panel on the right. Rendered open, so it still shows without JS. */
  .day-dialog { position: fixed; inset: 0 0 0 auto; z-index: 20; width: min(30rem, 94vw); height: 100dvh; max-height: none; max-width: none; margin: 0; padding: 0; border: 0; border-left: var(--rule-gilt); background: var(--colour-paper); color: var(--colour-ink); box-shadow: var(--shadow-panel); }
  .day-dialog[open] { display: flex; flex-direction: column; animation: day-dialog-in .18s ease-out; }
  .day-dialog::backdrop { background: var(--colour-backdrop); }
  @keyframes day-dialog-in { from { transform: translateX(100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .day-dialog[open] { animation: none; } }
  .day-dialog-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--size-3); padding: var(--size-4) var(--size-4) var(--size-3); border-bottom: 1px solid var(--colour-border); background: var(--colour-card); }
  .day-dialog-head .eyebrow { margin: 0; font-size: var(--font-size-0); letter-spacing: .08em; text-transform: uppercase; color: var(--colour-muted); font-weight: 600; }
  .day-dialog-head h2 { margin: 0; font-family: var(--font-extract); font-size: var(--font-size-5); line-height: 1.15; }
  .day-dialog-close { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 8px; border: 1px solid var(--colour-border); background: var(--colour-card); color: var(--colour-ink); text-decoration: none; font-size: 1.4rem; line-height: 1; }
  .day-dialog-close:hover { background: var(--colour-pill); }
  .day-dialog-body { flex: 1; overflow-y: auto; padding: var(--size-4); display: grid; gap: var(--size-3); align-content: start; }
  .day-dialog-group { display: grid; gap: var(--size-3); }
  .day-dialog-group h3 { margin: 0; font-size: var(--font-size-1); }
  .sitting-card { background: var(--colour-card); border: 1px solid var(--colour-border); border-top: var(--rule-gilt); border-radius: var(--radius-card); padding: var(--size-3); }
  .sitting-head { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
  .sitting-head .badge { background: var(--colour-badge-chamber); font-weight: 600; }
  .sitting-pages { font-variant-numeric: tabular-nums; }
  .sitting-source { color: var(--colour-muted); font-size: var(--font-size-0); }
  .sitting-read { margin-left: auto; font-weight: 600; white-space: nowrap; }
  .sitting-extract { margin: .5rem 0 .2rem; padding: 0 0 0 .7rem; border: 0; border-left: 3px solid var(--colour-highlight); font-family: var(--font-extract); line-height: 1.5; }
  .sitting-kind { margin: 0; font-size: .74rem; color: var(--colour-muted); }
  .day-dialog-foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--size-2); padding: var(--size-3) var(--size-4); border-top: 1px solid var(--colour-border); background: var(--colour-card); }
  .day-dialog-foot .calendar-step { font-size: var(--font-size-0); }

  @media (max-width: 52rem) {
    .calendar { padding: var(--size-3); }
    .calendar-nav { grid-template-columns: auto 1fr auto; gap: var(--size-2); }
    .calendar-nav .calendar-step { padding: .35rem .7rem; }
    .calendar-nav .step-label, .calendar-nav .calendar-step small { display: none; }
    .calendar-heading h2 { font-size: var(--font-size-4); }
    .calendar-grid { border-spacing: 3px; margin-inline: -3px; width: calc(100% + 6px); }
    .calendar-grid th { text-align: center; padding-inline: 0; }
    .weekday-full { display: none; }
    .weekday-short { display: inline; }
    .calendar-day { min-height: 3.4rem; padding: .3rem; border-radius: 6px; }
    .day-total, .day-line, .day-sources { display: none; }
    .day-number { font-size: var(--font-size-1); }
    .day-dialog { width: 100vw; border-left: 0; }
    .picker-body { grid-template-columns: 1fr; }
  }
  @media (max-width: 40rem) {
    .calendar-picker .year-full { display: none; }
    .calendar-picker .year-short { display: inline; }
    .picker-decade { grid-template-columns: 2.4rem repeat(10, minmax(0, 1fr)); gap: 2px; }
  }
}

@layer components {
  .plots { display: grid; gap: var(--size-5); margin-top: var(--size-3); }
  .plots[hidden] { display: none; }
  /* Each plot is a card, like a search result. */
  .plot {
    display: grid; gap: var(--size-2); min-width: 0;
    background: var(--colour-card); border: 1px solid var(--colour-border); border-radius: var(--radius-card);
    padding: var(--size-4) var(--size-5);
  }
  .plot h2 { padding-right: 8rem; }
  .plot h2 { margin-block: 0; }
  .plot-note { color: var(--colour-muted); font-size: var(--font-size-0); max-width: 65ch; margin: 0; }
  .plot-scroll { overflow-x: auto; }
  .plot-scroll > svg { display: block; width: 100%; min-width: 34rem; height: auto; }
  .plot svg text { fill: var(--colour-muted); font: 400 11px var(--font-ui); cursor: default; }
  .plot svg text.strong { fill: var(--colour-ink); font-weight: 600; }
  .plot-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem var(--size-4); font-size: var(--font-size-0); color: var(--colour-muted); }
  .plot-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; vertical-align: -1px; margin-right: .3rem; }
  .plot-chips { display: flex; flex-wrap: wrap; gap: var(--size-2); }
  .plot-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--size-2) var(--size-5); }
  .plot-chips button {
    font-size: var(--font-size-0); font-weight: 400; padding: .3rem .8rem; border-radius: var(--radius-pill);
    background: var(--colour-pill); color: var(--colour-muted);
  }
  .plot-chips button[aria-pressed="true"] { background: var(--colour-brand); color: var(--colour-on-brand); }
  .plot-cloud { display: block; width: 100%; height: auto; }
  .plot .plot-cloud text { font-family: var(--font-extract); dominant-baseline: middle; }
  .plot-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-5); }
  .plot-counts h3 { font-size: var(--font-size-0); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--size-1); }
  .plot-count { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--size-2); align-items: baseline; margin-bottom: var(--size-1); }
  .plot-count .term { font-family: var(--font-extract); overflow-wrap: anywhere; }
  .plot-count .uses { font-size: var(--font-size-0); font-variant-numeric: tabular-nums; }
  .plot-count .bar { grid-column: 1 / -1; height: .4rem; border-radius: var(--radius-pill); background: var(--colour-pill); overflow: hidden; }
  .plot-count .bar span { display: block; height: 100%; border-radius: var(--radius-pill); }
  .plot-count .in { grid-column: 1 / -1; font-size: var(--font-size-badge); color: var(--colour-muted); }
  .plot-tip {
    position: fixed; z-index: 20; pointer-events: none; max-width: 22rem; padding: .5rem .65rem;
    border-radius: 6px; background: var(--colour-ink); color: var(--colour-paper); font-size: var(--font-size-0); line-height: 1.4;
  }
  .plot-tip-text { display: block; margin-top: .2rem; font-family: var(--font-extract); }
  /* While the plots are fetched, the status line becomes a large centred spinner where the cards will be;
     still for reduced motion. */
  .is-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--size-4);
    min-height: 24rem; font-size: var(--font-size-2); color: var(--colour-muted);
    animation: plot-fade-in .5s ease-in;
  }
  @keyframes plot-fade-in { from { opacity: 0; } }
  .is-loading::before {
    content: ""; flex: none; width: 5rem; height: 5rem; border-radius: 50%;
    border: 7px solid var(--colour-border); border-top-color: var(--colour-brand); border-right-color: var(--colour-accent);
    animation: plot-spin .9s linear infinite;
  }
  @keyframes plot-spin { to { transform: rotate(1turn); } }
  @media (prefers-reduced-motion: reduce) { .is-loading, .is-loading::before { animation: none; } }
  @media (max-width: 45rem) { .plot-counts { grid-template-columns: minmax(0, 1fr); } }
}

@layer components {
  /* Any [data-expandable] element: js/expand.js adds the toggle and handles full screen. */
  [data-expandable] { position: relative; }
  .expand-toggle {
    position: absolute; top: var(--size-3); right: var(--size-3); z-index: 1;
    font-size: var(--font-size-0); font-weight: 400; padding: .3rem .8rem; border-radius: var(--radius-pill);
    background: var(--colour-pill); color: var(--colour-ink);
  }
  .expand-toggle:hover { background: var(--colour-border); }
  [data-expandable]:fullscreen, [data-expandable].is-expanded {
    background: var(--colour-card); border: 0; border-radius: 0; overflow: auto; align-content: start;
    padding-block: var(--size-5);
    padding-inline: max(var(--size-5), env(safe-area-inset-left, 0px)) max(var(--size-5), env(safe-area-inset-right, 0px));
  }
  [data-expandable]:fullscreen > .expand-toggle, [data-expandable].is-expanded > .expand-toggle {
    position: fixed; top: var(--size-4); right: var(--size-5);
  }
  [data-expandable].is-expanded { position: fixed; inset: 0; z-index: 50; }
  .has-expanded body { overflow: hidden; }
}