/* ==========================================================================
   Wodonga Wire — visual system
   Implements the Complete Site Layout and Design Specification v2.0 (28 Jul 2026)
   as revised by v3 (card overlay), with one client-authorised exception:

   PALETTE EXCEPTION, pass-15. v2 section 3.2 locked the site to four colours
   and section 15 banned anything wider. The client reopened that decision:
   "Open the colour palette. Use the existing palette as a guide, but do not be
   restrained by it. Graphs/charts/etc do not have to be restrained by the
   existing palette." v2's own change rule permits this, because the decision
   has been explicitly reopened rather than implicitly overridden.

   The split that replaces the lock:

     CHROME  — masthead, footer, page field, body text, borders — stays in the
               warm neutral family, so the site keeps its identity and does not
               become a generic blue product.
     DATA    — every chart mark, series, delta and legend — draws from a named
               five-colour data ramp grounded in the subject (Hume reservoir,
               regional Victoria, galvanised wire), because colour is the
               information channel that was missing.

   Brick now carries exactly one meaning inside a chart: it is the mark the
   card is *about* — the latest point in a series, Wodonga's own bar among
   peers, the disclosed share of a disclosed/undisclosed split. Never a second
   series, never a delta. Outside charts it remains the publication's own
   voice: the section rule and links.

   Fonts are local/system only (spec 3.3, 13.3) — no runtime font service.
   ========================================================================== */

:root {
  /* --- chrome: the shared publication ground ---
     The page field is the publication's ground (--bg in publication.css,
     #F5F4ED), so every family sits on one paper. Panels lift by hairline and
     shadow rather than by a darker field: --surface is one step off the
     ground, --surface-raised is near-white, and --surface-sunk is a genuinely
     sunk tone, darker than the ground, where on the old taupe field it was
     lighter. Retuned as a set for the shell convergence (D-065). */
  --paper: #F5F4ED;
  --frame: #1E1C1A;
  --brick: #935A45;
  --wire: #7D8F97;

  --paper-deep: #CBC9BD;
  /* --surface is the one token name publication.css also defines; this value
     must stay equal to its --surface (#faf9f5) because this file loads later. */
  --surface: #FAF9F5;
  --surface-raised: #FDFDFB;
  --surface-sunk: #E8E6DC;
  --frame-2: #2B2825;
  --frame-3: #3C3833;

  /* --- derived ink --- */
  --ink: #1E1C1A;
  --ink-2: #46423C;
  --ink-3: #625D55;
  --on-frame: #E8E6DB;
  --on-frame-2: #B4AFA4;

  /* --- derived accents --- */
  --brick-deep: #7A4634;
  --brick-soft: #C08D78;
  --brick-wash: #EFE2DB;
  --wire-deep: #5B6D76;
  --wire-soft: #A9B6BB;
  --wire-wash: #E0E4E4;

  /* --- the data ramp (pass-15, redeployed and resaturated in pass-16) ---
     Ordered. A chart takes them in order and stops when it runs out of series.
     data-1 is the default fill for anything that is simply "the data"; brick
     is reserved for the one mark the card is about; data-5 is the neutral,
     used for peers, comparisons and anything explicitly *not* the subject.

     pass-16 measured what was actually rendering: slate 231 uses, wire 169,
     brick 77, ochre 6, eucalypt 0. A five-colour system was running on
     two-and-a-half, which is why the charts read as dull. Two changes:

       1. Slate and eucalypt are pushed up in saturation. On a warm stone field
          a greyed teal reads as washed out rather than restrained.
       2. Ochre and eucalypt are put to work — see --sec-ink below, and the
          procurement lifecycle bars — instead of sitting unused in the tokens.

     Nothing here encodes good or bad. Direction lives in the delta pills,
     which state it in words as well. */
  --data-1: #0F5F78;   /* reservoir slate — primary series                */
  --data-1-soft: #3E8DA8;
  --data-1-wash: #DDEAEF;
  --data-2: #935A45;   /* muted brick — the subject mark, one per chart   */
  --data-3: #B87F31;   /* ochre — second category (darkened from #C08A3E
                          to clear 3:1 as a graphical mark on a card)     */
  --data-3-deep: #8A5F21;
  --data-4: #3F7A52;   /* eucalypt — third category                       */
  --data-5: #7D8F97;   /* galvanised wire — neutral / peer / comparison   */
  --data-6: #A9B6BB;   /* wire, light — fifth and beyond                  */
  --data-7: #3C3833;   /* charcoal — residual and "everything else"       */

  /* --- section ink (pass-16) ---
     A register section sets --sec-ink and every unremarkable mark inside it
     takes that colour. This is wayfinding, not measurement: it says which
     part of the register you are reading, never anything about the values.
     Brick stays reserved for the one mark a chart is about, so the subject
     is still legible against whichever section ink is in force. */
  --sec-ink: var(--data-1);

  /* --- absence (pass-16) ---
     Solid fill means the source published a figure. A dashed open outline
     means it did not. This began as one chart on Council Record and is now
     the site's grammar for missing information, everywhere it occurs. It is
     always accompanied by a text label; the outline alone never carries the
     meaning. */
  --absent-line: #9A9486;
  --absent-ink: #5C574E;
  --absent-wash: rgba(30, 28, 26, .035);

  /* --- movement semantics ---
     Direction is stated, never scored. These are not good/bad colours: they
     exist so an increase and a decrease do not look identical, which is what
     brick-for-everything produced. Problem red stays reserved for confirmed
     contradictions and broken sources (spec 3.2), so a routine fall is drawn
     in warm ochre, not in that red. */
  --up-ink: #2F6446;   --up-wash: #E2EDE5;   --up-line: #A8C6B4;
  --down-ink: #8A5A1E; --down-wash: #F5EBD8; --down-line: #DCC08A;
  --flat-ink: #46423C; --flat-wash: #E9E8E1; --flat-line: #C9C6B9;

  /* --- rules --- */
  --line: #D5D2C5;
  --line-strong: #BDB9AB;
  --line-frame: #46423C;

  /* --- problem colour: reserved (spec 3.2) --- */
  --problem: #8C3A2E;

  /* --- type --- */
  /* The publication's faces (publication.css, D-069). This family no longer
     carries a type system of its own; the names stay so every rule below
     reads as it was written. */
  --serif: var(--font-display);
  --sans: var(--font-body);
  --mono: var(--font-mono);

  /* Display scale is compact and precise. The register is a data product, not
     a brochure: the Home hero is the one editorial moment, and everything
     else is sized to be read as an instrument panel (spec 3.1, 3.3). */
  --t-display: clamp(2.4rem, 5vw, 3.4rem);
  --t-h1: clamp(1.95rem, 3.4vw, 2.6rem);
  --t-h2: clamp(1.32rem, 1.9vw, 1.6rem);
  --t-h3: 1.05rem;
  --t-lead: clamp(1rem, 1.15vw, 1.1rem);
  --t-body: 0.9375rem;
  --t-small: 0.8125rem;
  --t-micro: 0.6875rem;

  /* --- geometry --- */
  --radius: 3px;
  --radius-card: 8px;
  --touch: 44px;
  --card-gap: clamp(.5rem, .65vw, .7rem);
  --card-pad: clamp(.8rem, .95vw, .95rem);
  /* Grey field, white panel, hairline, and a genuinely subtle shadow. The
     shadow is one short offset only — enough to lift the panel off the field,
     never a halo (spec 3.1, 3.7 both still ban those). */
  --shadow-1: 0 1px 1px rgba(30, 28, 26, .04);
  --shadow-2: 0 1px 2px rgba(30, 28, 26, .06), 0 2px 6px -3px rgba(30, 28, 26, .16);
  --shadow-overlay: 0 1px 2px rgba(30, 28, 26, .10), 0 12px 28px -12px rgba(30, 28, 26, .42);
  --section-gap: clamp(1.5rem, 2.6vw, 2.1rem);

  /* The section rail's height, for the rows drawn inside it. The masthead's
     height (--mast-h) is the publication shell's, measured by shell.js. */
  --secnav-h: 46px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Tables and navigation rails expose their own horizontal scroll areas;
     the document itself must never become a competing horizontal scroller. */
  overflow-x: clip;
}

body {
  /* Ground, margin and vertical structure belong to publication.css; this
     family sets its own type. The horizontal axis is clipped, never hidden:
     `hidden` made body a scroll container, and every position: sticky
     element in this family (section rail, chapter bar, map column) stuck to
     body instead of the viewport — which is to say, never. `clip` clips the
     same overflow without creating a scroll container. */
  color: var(--ink);
  font: var(--t-body)/1.6 var(--sans);
  font-synthesis-weight: none;
  overflow-x: clip;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* The publication's link grammar (foundation.css carries the same rule):
   ink, a hairline underline, accent on interaction. Brick is a chart mark on
   this canvas — the one thing a figure is about — never a link colour. */
a { color: var(--fg-2); text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--border-soft); }
a:hover { color: var(--fg); text-decoration-color: var(--accent); }
/* The motion floor (publication.css): a colour that changes, never a thing
   that moves. Controls with their own shadow or border join it below. */
a, button, summary { transition: var(--transition-feedback); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

img, svg { max-width: 100%; }

/* The publication's focus ring (publication.css --focus-ring): one grammar
   on every family's controls. Forced colours restore an outline below. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
/* Inside a horizontal scroller the ring would be clipped; draw it inset. */
.secnav-list a:focus-visible, .cr-view-nav a:focus-visible, .cs-railbar a:focus-visible {
  box-shadow: inset 0 0 0 3px var(--accent);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   Layout shell
   ========================================================================== */

/* Same content edge as the shell's .w (publication.css): 1152px inside a
   1200px frame with the shared responsive gutter. Kept width-based (no
   padding) so .narrow and the one negative-margin bleed keep their meaning. */
.wrap {
  width: min(calc(var(--container-max) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

/* Section heading mark. One small, precise geometric accent rule — the wire
   motif reduced to a single straight stroke. No running illustration. */
.section-head { position: relative; margin: 0 0 clamp(.6rem, 1vw, .8rem); padding-top: .7rem; }
.section-head::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 40px; height: 2px;
  background: var(--accent);
}
.section-head .eyebrow { margin: 0 0 .35rem; width: 100%; }
.section-head h2 { font-size: var(--t-h2); letter-spacing: -.018em; text-wrap: balance; }
/* Source tag, not narration. A section states what the data is and where it
   came from in one compact line; the numbers carry the meaning. From pass-15
   it sits on the heading's own baseline rather than on a second line — eight
   section heads on Numbers and nine on Council Record, so a line each is a
   screenful of chrome for nothing. */
.section-head p {
  color: var(--ink-3); max-width: 62ch; margin: 0;
  font: 500 var(--t-small)/1.4 var(--sans);
  letter-spacing: .015em;
}
@media (min-width: 721px) {
  .section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .6rem 2rem; flex-wrap: wrap;
  }
  .section-head p { text-align: right; }
}
@media (max-width: 720px) {
  .section-head p { margin-top: .3rem; }
}
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.section-head--split > div { min-width: 0; }

.eyebrow {
  font: 600 var(--t-micro)/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .4rem;
}
.eyebrow--wire { color: var(--muted); }

.lead { font-size: var(--t-lead); color: var(--ink-2); line-height: 1.5; max-width: 46ch; }

section { margin-block: var(--section-gap); }
section:first-child { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
section.hero, section.hero:first-child { margin: 0; }

/* ==========================================================================
   In-page section navigation (pass-15)

   Wodonga in Numbers carries eight locked sections and Council Record nine.
   Before this, the only way through either was the scrollbar, which is what
   produced "I have to scroll for hours" far more than card size did. This is a
   rail of real anchor links directly beneath the band, which sticks under
   the masthead once the band has scrolled away (the two rows move as one
   stacked header): keyboard operable because they are links, active-section
   marked by wire.js, and horizontally scrollable rather than wrapping so it
   never grows into a second block of chrome.
   ========================================================================== */

/* The section row is the family's local row: it sticks directly under the
   masthead (publication.css --mast-h), one step below it in the paint order,
   on its own opaque surface so the page never shows through the two-row
   stack. shell.js measures its height into --local-h for the jump offset
   and the rails. */
.secnav {
  position: sticky; top: var(--mast-h); z-index: 29;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 1px 2px rgba(30, 28, 26, .05);
}
.secnav-inner { display: flex; align-items: stretch; gap: 1.1rem; min-height: var(--secnav-h); }
.secnav-label {
  display: flex; align-items: center; flex: none;
  font: 600 var(--t-micro)/1.3 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  padding-right: 1.1rem; border-right: 1px solid var(--line);
  white-space: nowrap;
}
.secnav-list {
  display: flex; align-items: stretch; gap: 0;
  list-style: none; margin: 0; padding: 0; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.secnav-list::-webkit-scrollbar { display: none; }
.secnav-list li { flex: none; }
.secnav-list a {
  display: inline-flex; align-items: center;
  height: 100%; min-height: var(--secnav-h);
  padding: 0 .7rem;
  font: 500 .84rem/1 var(--sans);
  color: var(--ink-2); text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: var(--transition-feedback);
}
.secnav-list a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
/* "true" is the active section on a register (wire.js); "page" is the current
   destination on Council Record's row, which has no visible mark without it. */
.secnav-list a[aria-current="true"],
.secnav-list a[aria-current="page"] {
  color: var(--fg); font-weight: 600;
  border-bottom-color: var(--accent);
}

/* An in-page jump lands its target clear of the sticky masthead, the only
   bar that stays at the top; publication.css owns that offset. */

@media (prefers-reduced-motion: no-preference) {
  html:has(.secnav) { scroll-behavior: smooth; }
}

/* ==========================================================================
   Cards, surfaces and expansion (spec 3.7, 4.1)
   ========================================================================== */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  transition: var(--transition-feedback);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }

/* expandable card built on <details> so expansion is keyboard- and
   screen-reader-correct with no scripting required. */
.xcard { margin: 0; }
.xcard > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) + .95rem);
  border-radius: var(--radius-card);
  position: relative;
}
.xcard > summary > .push { margin-top: auto; padding-top: .5rem; }
.xcard > summary::-webkit-details-marker { display: none; }
.xcard > summary::after {
  content: "";
  position: absolute; right: .8rem; bottom: .8rem;
  width: 18px; height: 18px;
  background: no-repeat center/18px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%235B6D76' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 8.2 11 14.6l7.5-6.4'/%3E%3C/g%3E%3C/svg%3E");
  transition: transform .18s ease;
}
.xcard[open] > summary::after { transform: rotate(180deg); }
.xcard[open] { box-shadow: var(--shadow-2); border-color: var(--line-strong); background: var(--surface-raised); }
.xcard > .xbody {
  padding: .75rem var(--card-pad) var(--card-pad);
  border-top: 1px solid var(--line);
  margin-top: -.15rem;
}
.xcard > .xbody > *:first-child { margin-top: 0; }

/* the wire eyelet that marks an opened card */
.xcard[open] > summary::before {
  content: "";
  position: absolute; left: -1px; top: 1.1rem; bottom: -1px; width: 4px;
  background: var(--brick);
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.xcard-label { font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .28rem; }
.xcard-title { font-size: var(--t-h3); margin: 0 0 .25rem; line-height: 1.25; }
.xcard-meta { font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); letter-spacing: .01em; }

/* deterministic inline expansion direction (spec 4.1) */
.row-3, .row-4, .row-2 { display: grid; gap: var(--card-gap); align-items: stretch; }
.row-3 > .xcard, .row-4 > .xcard, .row-2 > .xcard { display: flex; flex-direction: column; }
.row-3 > .xcard[open], .row-4 > .xcard[open], .row-2 > .xcard[open] { align-self: start; }
.row-3 { grid-template-columns: repeat(3, 1fr); }
.row-4 { grid-template-columns: repeat(4, 1fr); }
.row-2 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 901px) {
  /* left and centre cards expand to the right; the right card expands left.
     This is the no-script fallback: with the overlay script running the grid
     never reflows at all (spec v3 §6). */
  .row-3 > .xcard[open] { grid-column: span 2; }
  .row-3 > .xcard[open]:nth-child(3n) { grid-column: 2 / span 2; }
  .row-4 > .xcard[open] { grid-column: span 2; }
  .row-4 > .xcard[open]:nth-child(4n+3) { grid-column: 2 / span 2; }
  .row-4 > .xcard[open]:nth-child(4n) { grid-column: 3 / span 2; }
}

/* ==========================================================================
   Anchored floating expansion (spec v3 §6)

   On desktop an expanded card rises above its grid and covers the neighbours
   it needs, rather than pushing them aside. Only the visual presentation
   changes: the control is still a native <details>/<summary> disclosure that
   lives in the document, so keyboard order, focus and screen-reader semantics
   are exactly what they were. `app/static/js/wire.js` measures the grid and
   writes the position; everything below is the appearance of that state.

   Without JavaScript, or below the mobile breakpoint, none of this applies and
   the grid rules above take over.
   ========================================================================== */

.js-overlay .ov-grid { position: relative; }

/* the ghost holds the trigger's slot open so no track resizes and no card
   moves while the overlay is up */
.ov-ghost { pointer-events: none; visibility: hidden; }

.js-overlay .xcard.is-overlay {
  position: absolute;
  z-index: 25;
  margin: 0;
  /* An absolutely positioned grid child with `auto` placement is positioned
     against the grid's padding box, which is the box the script measures.
     `!important` overrides the no-script reflow rules further down the file,
     which are equally specific and would otherwise win on order. */
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: start;
  background: var(--surface-raised);
  border-color: var(--line-strong);
  border-radius: var(--radius-card);
  /* grounded, not glassy: one crisp hairline plus a short, tight shadow */
  box-shadow: var(--shadow-overlay);
}
.js-overlay .xcard.is-overlay > summary { padding-bottom: calc(var(--card-pad) + .2rem); }
.js-overlay .xcard.is-overlay > .xbody { border-top: 1px solid var(--line); }

/* a card the overlay is sitting on top of is genuinely out of reach: `inert`
   removes it from focus order and the pointer, and it is hidden from assistive
   technology for as long as it is covered */
.ov-covered { pointer-events: none; }

.card-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .92rem; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.card-link:hover { border-bottom-width: 2px; }
.card-links { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; justify-content: flex-end; margin-top: .85rem; padding-top: .7rem; border-top: 1px dotted var(--line-strong); }
.card-links--start { justify-content: flex-start; }

/* ==========================================================================
   Data display
   ========================================================================== */

/* Data figures read as instrument readouts: compact, tightly tracked and
   tabular so a column of them lines up. Serif display is kept for headings;
   numbers are set in the sans stack with lining tabular figures (spec 3.3 —
   monospace is reserved for evidence and metadata, not the data display). */
.figure {
  font: 600 clamp(1.55rem, 2.1vw, 1.9rem)/1.05 var(--sans);
  letter-spacing: -.02em;
  display: block;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.bento > .standard .figure, .status-strip .figure { font-size: clamp(1.5rem, 1.9vw, 1.75rem); }
.bento > .lead-card .figure { font-size: clamp(1.8rem, 2.6vw, 2.25rem); }
.figure--sm { font-size: clamp(1.25rem, 1.5vw, 1.4rem); }
.figure-unit { font-size: .58em; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.figure-period { font: var(--t-micro)/1.4 var(--mono); color: var(--ink-3); display: block; margin-top: .35rem; }
.figure-note { font-size: var(--t-small); color: var(--ink-3); margin: .4rem 0 0; line-height: 1.4; max-width: 62ch; }

/* Every element that carries a number gets tabular lining figures so values
   align vertically down a column and do not shift when they update. */
.figure, .figure-note, .figure-period, .delta, .chart-key, .chartbox,
.colchart, .barchart, .bar-row, .deflist, table, .tick-v, .tick-n,
.ch-l, .ch-v, .ch-n, .stat-source, .register-row, .module {
  font-variant-numeric: tabular-nums lining-nums;
}

/* The comparison pill. Colour now carries direction and weight carries
   materiality, which is the pair of facts the pill actually holds. Before
   pass-15 every pill was brick, so a rise and a fall looked identical and the
   pill said nothing the arrow had not already said.

   None of these colours scores the movement. Green is not "good" here — it is
   simply the increase colour, and it is used on measures where an increase is
   plainly unwelcome (closed-session share, planning decision days) as readily
   as on ones where it is not. Problem red stays reserved for confirmed
   contradictions and broken sources (spec 3.2), so a routine fall is drawn in
   warm ochre and is visibly not that red. */
.delta {
  display: inline-flex; align-items: center; gap: .28rem;
  font: 600 .72rem/1 var(--sans); letter-spacing: .01em;
  padding: .22rem .4rem; border-radius: 999px;
  border: 1px solid var(--flat-line); background: var(--flat-wash); color: var(--flat-ink);
  white-space: nowrap; vertical-align: .28em;
  font-variant-numeric: tabular-nums lining-nums;
}
.delta::before { content: ""; width: 0; height: 0; border-inline: 3.5px solid transparent; }
.delta--up { border-color: var(--up-line); background: var(--up-wash); color: var(--up-ink); }
.delta--up::before { border-bottom: 5px solid currentColor; }
.delta--down { border-color: var(--down-line); background: var(--down-wash); color: var(--down-ink); }
.delta--down::before { border-top: 5px solid currentColor; }
.delta--flat::before { content: ""; border: 0; width: 7px; height: 1.5px; background: currentColor; }
/* materiality (>=5%) is weight, not a fourth hue: a small movement is drawn
   as an outline on the card surface, a material one as a filled capsule */
.delta:not(.delta--material) { background: var(--surface-raised); font-weight: 500; }
.delta-on { font: var(--t-micro)/1.4 var(--mono); color: var(--ink-3); margin-left: .45rem; white-space: nowrap; }

/* figure row: the number and its comparison sit on one baseline */
.figure-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .55rem; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font: 600 var(--t-micro)/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 2px;
  border: 1px solid var(--line-strong); background: var(--surface-sunk); color: var(--ink-2);
}
.chip--open { border-color: var(--brick-soft); background: var(--brick-wash); color: var(--brick-deep); }
.chip--quiet { background: transparent; }

.caveat { font-size: var(--t-small); color: var(--ink-2); border-left: 2px solid var(--data-5); padding-left: .75rem; margin: .7rem 0; max-width: 62ch; }

.deflist { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1rem; font-size: .92rem; }
.deflist dt { color: var(--ink-3); font: var(--t-micro)/1.7 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.deflist dd { margin: 0; min-width: 0; }
/* A provenance value is often one unbreakable token -- a URL, a file path, a
   SHA-256 -- and must wrap inside its box rather than run past it; the value
   itself is never shortened. */
.deflist dd, .file-kind, .evidence-page p, .claim-path { overflow-wrap: anywhere; }
/* The claim page's path back to the source: one labelled step per row, in
   the same label grammar as .deflist, so the label and the value never read
   as one word. */
.claim-path { margin: 0; padding-left: 1.4rem; display: grid; gap: .55rem; font-size: .92rem; }
.claim-path li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .1rem 1rem; align-items: baseline; }
.claim-path .claim-step { color: var(--ink-3); font: var(--t-micro)/1.7 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

.table-wrap { overflow-x: auto; margin: .7rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: .42rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font: 600 var(--t-micro)/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- charts --
   Chart colour is an information channel from pass-15 onward. The default
   fill is reservoir slate; galvanised wire is the neutral used for anything
   that is explicitly *not* the subject; brick marks the one thing the card is
   about and appears once per chart.

   A chart also fills the height it is given. In a stretched grid row the slack
   used to fall to the floor of the card as dead space — the single loudest
   source of "too much blank space in the cards". The chart now takes it, so
   the card reads as filled without the page getting any taller.
   -------------------------------------------------------------------------- */
/* Section ink (pass-16). A register section declares which of the three
   category colours its unremarkable marks take. It is wayfinding — it tells a
   reader which part of the register they are in — and encodes nothing about
   the values. Brick is still reserved for the one mark a chart is about, so
   the subject stays legible whichever ink is in force. */
[data-ink="slate"]    { --sec-ink: var(--data-1); }
[data-ink="ochre"]    { --sec-ink: var(--data-3); }
[data-ink="eucalypt"] { --sec-ink: var(--data-4); }
[data-ink="wire"]     { --sec-ink: var(--data-5); }

.chartbox { margin: .7rem 0 0; display: flex; flex-direction: column; min-height: 0; }
.chartbox svg { display: block; width: 100%; overflow: visible; }
.chartbox text { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chartbox .ch-l { font-size: 11px; fill: var(--ink-3); }
.chartbox .ch-v { font-size: 11.5px; fill: var(--ink-2); }
.chartbox .ch-n { font-size: 12px; font-family: var(--sans); fill: var(--ink-2); }
.chartbox .ch-v.is-me, .chartbox .ch-n.is-me { fill: var(--brick-deep); font-weight: 600; }
.chart-key { display: flex; flex-wrap: wrap; gap: .25rem .85rem; margin-top: .45rem; font-size: var(--t-micro); color: var(--ink-2); font-family: var(--mono); }
.chart-key span { display: inline-flex; align-items: center; gap: .35rem; }
.chart-key i { width: 12px; height: 9px; border-radius: 1px; display: inline-block; flex: none; }
.chart-ends { justify-content: space-between; color: var(--ink-3); }
/* Keep the right-hand end label clear of the card's expansion chevron. Applied
   to the final row only, so it costs no height anywhere. */
.stat-card .chart-ends > span:last-child,
.stat-card .barchart > .bar-row:last-child .bar-v { padding-right: 1.4rem; }
.bento > .full .chart-ends > span:last-child { padding-right: 0; }

/* --- the plot box and its axis (pass-16) ---------------------------------
   Every quantitative chart now sits inside `.plot`, which is the region the
   bars or the line actually occupy. Reference hairlines are absolutely
   positioned inside it, so a gridline at 40% is at 40% of the same scale the
   marks are drawn against — the axis cannot drift from the data.

   Deliberately recessive: a 1px line at low contrast and a 10px mono label in
   the left gutter. Present, readable, never the loudest thing in the card. */
.plot {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding-left: var(--axis-gutter, 0px);
}
.plot:has(.axis) { --axis-gutter: 2.6rem; }

.axis { position: absolute; inset: 0 0 0 0; pointer-events: none; }
.axis-t { position: absolute; left: 0; right: 0; height: 0; display: block; }
.axis-t > i {
  display: block; position: absolute; left: var(--axis-gutter, 0px); right: 0; top: 0;
  border-top: 1px solid var(--line);
}
.axis-t.is-zero > i { border-top-color: var(--line-strong); }
.axis-t > b {
  position: absolute; left: 0; top: 0; transform: translateY(-52%);
  width: calc(var(--axis-gutter, 0px) - .45rem);
  text-align: right;
  font: 400 10px/1 var(--mono); color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}

/* Sparkline / area: takes the slack its card is given, and nothing more.
   The flex basis has to be zero rather than `auto` — an SVG with a viewBox and
   `width:100%` otherwise claims its whole aspect-ratio height as intrinsic
   content, which made the card taller instead of just better filled. The
   inline `min-height` remains the floor. */
.plot--spark > svg.spark { flex: 1 1 0; height: 0; width: 100%; }

/* The hit layer carries the hover and keyboard value readout. It is the
   labelled, focusable object; the drawing itself is aria-hidden, so a screen
   reader gets one description rather than a pile of decorative nodes. */
.plot-hit { position: absolute; inset: 0 0 0 var(--axis-gutter, 0px); display: flex; }
.plot-hit .hit { flex: 1 1 0; position: relative; }
.plot-hit .hit::after {
  content: ""; position: absolute; left: 50%; bottom: var(--y); width: 7px; height: 7px;
  margin: 0 0 -3.5px -3.5px; border-radius: 50%;
  background: var(--sec-ink, var(--data-1)); opacity: 0;
}
.plot-hit .hit.is-on::after { opacity: 1; }

/* column chart — real text, so labels stay legible in a narrow card */
.colchart { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.cols { display: flex; align-items: stretch; gap: 5px; flex: 1 1 auto; min-width: 0; min-height: 0; }
.colchart.is-dense .cols { gap: 2px; }
.col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.col-track { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
             flex: 1 1 auto; min-height: var(--col-h);
             border-bottom: 1px solid var(--line-strong); }
.col-v { position: absolute; left: 50%; transform: translateX(-50%); margin-bottom: 3px;
         font: 11.5px/1.3 var(--mono); color: var(--ink-2);
         font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.col-bar { display: block; background: var(--sec-ink, var(--data-1)); min-height: 2px;
           border-radius: 1px 1px 0 0; position: relative; z-index: 1; }
.col.is-last .col-bar { background: var(--data-2); }
.col-bar.is-neg { background: var(--data-3-deep); }
.col.is-proj .col-bar { background: transparent; border: 1.4px dashed var(--sec-ink, var(--data-1)); }
.col.is-on .col-bar { filter: brightness(.88); }
.colx { display: flex; gap: 5px; }
.colchart.is-dense .colx { gap: 2px; }
.colx-i { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.colchart.has-axis .colx { padding-left: 2.6rem; }
.col-l, .col-f { font: 11px/1.5 var(--mono); color: var(--ink-3); text-align: center; margin-top: 4px;
                 white-space: nowrap; overflow: hidden; flex: none; }
.col-f { margin-top: 0; }

/* the value readout, attached by wire.js on hover and on keyboard focus */
.chart-readout {
  position: absolute; z-index: 4; transform: translate(-50%, -100%);
  background: var(--frame); color: var(--on-frame);
  font: 11px/1.35 var(--mono); font-variant-numeric: tabular-nums;
  padding: .3rem .48rem; border-radius: 3px; white-space: nowrap;
  pointer-events: none; box-shadow: var(--shadow-2);
}
.chart-readout b { display: block; font-weight: 600; color: #fff; }
.chart-readout::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px;
  border: 4px solid transparent; border-top-color: var(--frame); border-bottom: 0;
}

/* ranked comparison bars */
.barchart { display: grid; gap: .45rem; align-content: center; flex: 1 1 auto; }
.barchart.has-scale { position: relative; padding-top: .95rem; }
.barscale { position: absolute; inset: .9rem 0 0 0; pointer-events: none; }
.barscale-t { position: absolute; top: 0; bottom: 0; width: 0; }
.barscale-t > i { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.barscale-t > b { position: absolute; top: -1.05rem; left: 0; transform: translateX(-50%);
                  font: 400 10px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.barscale-t:first-child > b { transform: none; }
.barscale-t:last-child > b { transform: translateX(-100%); }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 0 .8rem; align-items: baseline; position: relative; }
.bar-l { font: .83rem/1.25 var(--sans); color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.bar-v { font: .8rem/1.25 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-track { grid-column: 1 / -1; height: 7px; background: var(--surface-sunk); border-radius: 2px; margin-top: 2px; }
.bar-fill { display: block; height: 100%; background: var(--bar-ink, var(--sec-ink, var(--data-1))); border-radius: 2px; }
/* a quantity the source did not publish is drawn open, never filled */
.bar-fill.is-open { background: transparent; border: 1.4px dashed var(--bar-ink, var(--absent-line)); }
/* in a peer comparison the other councils are context, so they take the
   neutral and Wodonga takes the subject mark */
.barchart:has(.is-me) .bar-fill { background: var(--data-5); }
.bar-row.is-me .bar-l { color: var(--ink); font-weight: 600; }
.bar-row.is-me .bar-v { color: var(--brick-deep); font-weight: 600; }
.barchart .bar-row.is-me .bar-fill { background: var(--data-2); }

/* plan against outcome */
.planbar { display: block; }
.plan-mark { display: block; position: relative; font: 11px/1.4 var(--mono); color: var(--ink-2);
             white-space: nowrap; transform: translateX(-100%); padding-right: 5px; margin-bottom: 3px; }
.plan-track { display: block; position: relative; height: 24px; background: var(--surface-sunk); border-radius: 2px; }
.plan-fill { display: block; height: 100%; background: var(--data-2); border-radius: 2px 0 0 2px; }
.plan-line { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--frame); }
.plan-actual { display: block; margin-top: 5px; font: 600 11.5px/1.4 var(--mono); color: var(--brick-deep); }

/* ==========================================================================
   Absence, stated (pass-16)

   The site's biggest structural problem was that its honest empty states read
   as a broken website: fixed slots reserved for records that mostly do not
   exist, each one apologising. The fix is not to hide the absence — that would
   defeat the whole project — but to draw it deliberately, in the same grammar
   the disclosure chart already used: solid means the source published a
   figure, a dashed open outline means it did not.

   Every one of these carries a text label. The dashed outline is never the
   only thing saying "not published", so the meaning survives a stylesheet
   failure, a monochrome print, and colour-blind reading alike.
   ========================================================================== */
.absent-slot {
  border: 1.5px dashed var(--absent-line);
  border-radius: var(--radius-card);
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 9px, var(--absent-wash) 9px 10px);
  padding: var(--card-pad);
  display: flex; flex-direction: column; min-width: 0;
}
.absent-tag {
  display: inline-flex; align-items: center; gap: .42rem;
  font: 600 var(--t-micro)/1.3 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--absent-ink);
  margin: 0 0 .45rem;
}
.absent-mark {
  width: 22px; height: 10px; flex: none; border-radius: 2px;
  border: 1.5px dashed var(--absent-line); background: transparent;
}
.absent-head { font-size: var(--t-h3); margin: 0 0 .3rem; line-height: 1.25; color: var(--ink); }
.absent-body { font-size: var(--t-small); color: var(--ink-2); margin: 0; max-width: 62ch; }
.absent-src { font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); margin: .55rem 0 0; max-width: 70ch; }
.absent-slot .card-links { margin-top: auto; }
/* inside the fixed status strip the slot has to match the card next to it */
.status-strip .absent-slot { justify-content: flex-start; }
.status-strip .absent-slot .absent-head { font-size: 1.28rem; font-family: var(--sans); font-weight: 600; }

/* the same grammar in the legend of any strip or bar */
.dk-solid, .dk-open { width: 12px; height: 9px; border-radius: 1px; display: inline-block; flex: none; }
.dk-solid { background: var(--brick-soft); }
.dk-open { border: 1.5px dashed var(--on-frame-2); background: transparent; }


/* evidence (spec 11) — comprehensive but visually subordinate */
.evidence {
  margin-top: .85rem; padding-top: .65rem;
  border-top: 1px dotted var(--line-strong);
  font: var(--t-micro)/1.6 var(--mono);
  color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline;
}
.evidence a { color: var(--ink-2); }
.evidence .src-org { color: var(--ink-2); font-weight: 600; }

/* ==========================================================================
   Hero (Home)
   ========================================================================== */

/* A wide, moderate-height full-bleed photographic band. The locked hero copy
   sits at the bottom of the photo on a dark gradient scrim; the support
   paragraph carries on below it on stone paper. */
.hero { margin: 0; position: relative; }

.hero-photo {
  position: relative;
  background: var(--frame);
  overflow: hidden;
  border-bottom: 1px solid var(--line-frame);
}
.hero-photo > img {
  display: block;
  width: 100%;
  height: clamp(300px, 30vw, 420px);
  object-fit: cover;
  object-position: 50% 46%;
}
.hero-copy {
  position: absolute; inset: auto 0 0 0;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.3rem, 2.4vw, 1.9rem);
  background: linear-gradient(to top,
    rgba(16, 15, 14, .95) 0%,
    rgba(16, 15, 14, .90) 28%,
    rgba(16, 15, 14, .72) 56%,
    rgba(16, 15, 14, .34) 80%,
    rgba(16, 15, 14, 0) 100%);
  text-shadow: 0 1px 14px rgba(16, 15, 14, .6);
}
.hero h1 {
  font-size: var(--t-display);
  letter-spacing: -.04em;
  line-height: .9;
  color: #fff;
  margin: .1rem 0 .5rem;
  text-wrap: balance;
}
.hero .hero-lead {
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  line-height: 1.32;
  color: #fff;
  font-family: var(--serif);
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
}
.hero-eyebrow { color: #E6C4B1; margin-bottom: .55rem; }

/* the support paragraph, on paper, with the spool as a small identity detail */
.hero-intro {
  display: flex; align-items: flex-start; gap: clamp(.9rem, 2vw, 1.5rem);
  padding-block: clamp(1.1rem, 2vw, 1.6rem);
}
.hero-mark { flex: none; margin-top: .1rem; }
.hero-spool { display: block; width: 60px; height: auto; filter: invert(1) brightness(.28) contrast(1.15); }
.hero .hero-body {
  color: var(--ink-2);
  max-width: 72ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  margin: 0;
}

/* --- the finding panel (pass-16) -----------------------------------------
   The hero used to carry a mission statement. A stranger arriving on a mission
   statement learns that the site exists; a stranger arriving on the disclosure
   figures learns what it is *for*, and that a council website would not show
   them this. Both numbers in the panel are council's own and both come out of
   the database at request time — nothing here is written into the template.

   It sits on the photograph at desktop width and moves below it on a phone,
   where a 300px photo plus a panel would push the finding off the first
   screen. */
.hero-finding {
  background: rgba(16, 15, 14, .82);
  border: 1px solid rgba(232, 230, 219, .22);
  border-left: 3px solid var(--brick-soft);
  border-radius: var(--radius-card);
  padding: clamp(.85rem, 1.4vw, 1.15rem) clamp(.95rem, 1.5vw, 1.25rem);
  backdrop-filter: blur(3px);
  max-width: 34rem;
}
.hero-finding .hf-eyebrow {
  font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--brick-soft); margin: 0 0 .5rem;
}
.hero-finding .hf-body {
  font: 400 clamp(.92rem, 1.05vw, 1.02rem)/1.45 var(--sans);
  color: #fff; margin: 0; text-wrap: pretty; text-shadow: none;
}
.hero-finding .hf-body b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-finding .hf-note { font: var(--t-micro)/1.5 var(--mono); color: var(--on-frame-2); margin: .55rem 0 0; }
.hero-finding .evidence { border-top: 1px solid rgba(232, 230, 219, .2); color: var(--on-frame-2); }
.hero-finding .evidence a, .hero-finding .evidence .src-org { color: var(--on-frame); }
.hero-finding .evidence a { border-bottom: 1px solid rgba(232, 230, 219, .45); text-decoration: none; }

/* the disclosed / undisclosed bar, at hero size */
.dbar {
  display: block; height: 16px; margin: .8rem 0 .5rem; border-radius: 2px;
  border: 1.5px dashed var(--on-frame-2);
  position: relative;
}
.dbar-fill {
  display: block; position: absolute; inset: -1.5px auto -1.5px -1.5px;
  background: var(--brick-soft); border-radius: 2px 0 0 2px;
}
.dbar-key {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem;
  font: var(--t-micro)/1.5 var(--mono); color: var(--on-frame-2);
}
.dbar-key > span { display: inline-flex; align-items: center; gap: .35rem; }

@media (min-width: 861px) {
  .hero-copy .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: end; }
  .hero-copy .hero-title { min-width: 0; }
  .hero-photo > img { height: clamp(360px, 34vw, 480px); }
}
@media (max-width: 860px) {
  .hero-finding { max-width: none; margin-top: 1.1rem; }
}

.hero-ticker {
  border-block: 1px solid var(--line-strong);
  background: var(--surface);
}
.hero-ticker .wrap { display: flex; flex-wrap: wrap; gap: 0; }
.hero-ticker a, .hero-ticker span.tick {
  flex: 1 1 auto; min-width: 200px;
  padding: .75rem 1rem;
  border-right: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  display: block;
}
.hero-ticker a:last-child, .hero-ticker span.tick:last-child { border-right: 0; }
.hero-ticker a:hover { background: var(--surface-raised); }
.tick-k { display: block; font: 600 var(--t-micro)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brick-deep); }
.tick-v { display: block; font: 600 .95rem/1.3 var(--sans); color: var(--ink); margin-top: .22rem; }
.tick-n { display: block; font: var(--t-micro)/1.4 var(--mono); color: var(--ink-3); margin-top: .22rem; }

/* ==========================================================================
   Home — events, community cards, participation band, stats, destinations
   ========================================================================== */

/* --- what's happening (pass-16) ------------------------------------------
   Three fixed period cards, two of which said "nothing is listed yet", was the
   single clearest instance of the site reserving slots for data that does not
   exist. The periods that have listings keep their card; the periods that do
   not are collected into one dashed absence panel that names the sources
   checked. Nothing is hidden and nothing is invented — the same facts, in a
   shape that reads as reporting rather than as a broken page. */
.whatson { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.whatson > .absent-slot { grid-column: span var(--absent-span, 1); }
@media (max-width: 860px) {
  .whatson { grid-template-columns: 1fr; }
  .whatson > .absent-slot { grid-column: auto; }
}
.absent-periods { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.absent-periods li {
  font: var(--t-micro)/1.4 var(--mono); color: var(--absent-ink);
  border: 1px dashed var(--absent-line); border-radius: 2px; padding: .22rem .45rem;
}

.event-card .evt { padding: .6rem 0; border-top: 1px solid var(--line); }
.event-card .evt:first-of-type { border-top: 0; padding-top: 0; }
.evt-date { font: 600 var(--t-micro)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brick-deep); }
.evt-title { font: 600 1.02rem/1.3 var(--serif); margin: .15rem 0 .1rem; }
.evt-meta { font-size: var(--t-small); color: var(--ink-2); }
.evt-none { font-size: var(--t-small); color: var(--ink-2); }
.evt-empty-mark { display: block; color: var(--wire); margin: .4rem 0 .8rem; opacity: .85; }

.info-card > summary { padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) + 1.4rem); }
.info-card { background: var(--surface); }
.info-card .xcard-title { font-size: 1.05rem; }

/* participation band — ruled and illustrated, deliberately not a card */
.participate {
  background: var(--surface-sunk);
  border-block: 2px solid var(--frame);
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  position: relative;
  overflow: hidden;
}
/* a single quiet geometric accent, not an illustration */
.participate::after {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: var(--brick); pointer-events: none;
}
.participate .wrap { position: relative; z-index: 1; }
.participate h2 { font-size: var(--t-h2); letter-spacing: -.015em; }
.participate .lead { margin-top: .6rem; }
.participate-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.participate-links a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--touch);
  padding: .55rem 1.1rem;
  background: var(--frame); color: var(--on-frame);
  text-decoration: none; border-radius: 2px; font-weight: 600; font-size: .95rem;
}
.participate-links a:hover { background: var(--brick-deep); color: #fff; }
.participate-lead {
  border: 1px solid var(--line-strong); border-left: 4px solid var(--brick);
  background: var(--surface-raised); padding: .85rem 1.05rem; margin-top: 1rem; max-width: 44rem;
}
.participate-lead strong { font-family: var(--serif); font-size: 1.1rem; }

/* Measure cards follow the dashboard-card order the client's references use:
   small muted label, then the figure with its comparison pill, then a modest
   supporting chart, then the reading. The chart illustrates the number; it is
   no longer the first thing in the card. */
.stat-card > summary { padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) + .1rem); }
/* the chart takes the row's slack instead of leaving it at the floor of the
   card — filled cards, same page height (pass-15) */
.stat-card .stat-visual { margin-top: .6rem; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.stat-card .stat-visual > .chartbox { flex: 1 1 auto; margin-top: 0; }
.stat-card .figure { margin-top: .1rem; }
.stat-card .figure-period { margin-top: .22rem; }

/* destination cards */
.destinations { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.destination {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.25rem 1.25rem 1.35rem;
  text-decoration: none; color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.destination:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--ink); }
.destination:nth-child(2) { background: var(--surface); }
.destination svg { color: var(--wire-deep); }
.destination strong { font: 600 1.3rem/1.15 var(--serif); }
.destination span { font-size: .96rem; color: var(--ink-2); line-height: 1.5; }
.destination em { font-style: normal; font-weight: 600; color: var(--brick-deep); font-size: .92rem; margin-top: auto; padding-top: .5rem; }

/* ==========================================================================
   Page intro (interior pages)
   ========================================================================== */

/* A canvas that opens directly under the band with running text, a back
   link or a tile row (the contracts, suppliers, meeting, councillor and
   spatial-story pages) breathes before it begins; canvases that open with
   an intro block or a section rail carry their own spacing. */
.wf-band + .wrap > .lede:first-child, .wf-band + .wrap > .ag-back:first-child,
.wf-band + .wrap > .meta:first-child, .wf-band + .wrap > .rs-measures:first-child {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
}
/* Under the band (which carries the title), the intro holds the lead and any
   control that belongs beside it — the Council Record search, for one. */
.page-intro { padding-block: clamp(1.35rem, 2.4vw, 1.9rem) clamp(.7rem, 1.2vw, 1rem); }
.page-intro .lead { margin-top: .5rem; font-size: var(--t-lead); max-width: 62ch; color: var(--ink-2); }
.page-intro::after { content: ""; display: block; height: 1px; background: var(--line-strong); margin-top: clamp(.9rem, 1.6vw, 1.3rem); }
/* a page whose intro is followed immediately by the section rail already has
   its rule — the rail's own top border — so it does not draw a second one */
.page-intro--tabbed::after { display: none; }
.page-intro--tabbed { padding-bottom: clamp(.9rem, 1.6vw, 1.3rem); }
.page-intro + section, .page-intro + .numbers-section { margin-top: clamp(1.1rem, 2vw, 1.5rem); }
.secnav + .wrap > section:first-child,
.secnav + .wrap > .numbers-section:first-child { margin-top: clamp(1.1rem, 2vw, 1.5rem); }

/* ==========================================================================
   Wodonga in Numbers — editorial bento (spec 7.2)
   ========================================================================== */

/* Three tracks, not four. A standard card is a third of the measure, so a
   figure and its chart both read at a confident size (spec 7.2, 5.2). */
.bento {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto); grid-auto-flow: row dense;
  gap: var(--card-gap); align-items: stretch;
}
.bento > .xcard { display: flex; flex-direction: column; min-width: 0; }
.bento > .xcard[open] { align-self: start; }
.bento > .lead-card { grid-column: span 2; }
.bento > .major { grid-column: span 2; }
.bento > .tall { grid-row: span 2; }
.bento > .full { grid-column: 1 / -1; }
.bento > .standard { grid-column: span 1; }

.bento .xcard > summary { display: flex; flex-direction: column; height: 100%; }
/* The text block does not grow: in a stretched row the chart stays directly
   under its figure and the slack falls to the bottom of the card, rather than
   the chart drifting to the floor away from the number it explains. */
.stat-text { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 0; }

/* A full-width card is the section's feature: the chart takes the measure and
   the reading sits beside it, so the row never becomes a stretched line above
   a narrow column of text. */
@media (min-width: 901px) {
  .bento > .full > summary {
    flex-direction: row;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }
  /* keep the chart's end labels clear of the expansion chevron */
  .bento > .full > summary > .stat-visual { flex: 1 1 58%; min-width: 0; margin: 0; padding-right: 2rem; }
  .bento > .full > summary > .stat-text { flex: 0 1 21rem; align-self: center; }
  .bento > .full > summary > .stat-text > .push { margin-top: 1rem; padding-top: 0; }
}
.bento .lead-card > summary { padding: clamp(1.2rem, 1.5vw, 1.5rem) clamp(1.2rem, 1.5vw, 1.5rem) clamp(1.4rem, 1.7vw, 1.7rem); }

@media (min-width: 901px) {
  .bento > .xcard[open] { grid-column: span 2; }
  .bento > .lead-card[open], .bento > .full[open] { grid-column: 1 / -1; }
}

.numbers-section { margin-block: var(--section-gap); }

/* ===========================================================================
   Design v2 Numbers slice
   Scoped to Numbers so the established record, map and Council layouts retain
   their proven dimensions. The overview gets an editorial rhythm; subject
   pages get a distinct analytical stage rather than a re-skinned bento.
   ======================================================================== */
/* The page header is the publication's identity band (publication.css
   .wf-band, rendered by identity_banner() from _foundation.html) since
   D-069; the family's own ochre-eyebrow header is retired. */

.numbers-topic-nav {
  background: color-mix(in srgb, var(--surface-raised) 94%, #EFC27A);
  border-bottom: 1px solid var(--line-strong); box-shadow: 0 7px 18px rgba(30,28,26,.07);
}
.numbers-topic-nav-inner { display: flex; align-items: center; gap: .45rem; min-height: 44px; overflow-x: auto; scrollbar-width: thin; }
.numbers-topic-pill { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 32px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); text-decoration: none; font: 600 var(--t-small)/1.25 var(--sans); white-space: nowrap; }
.numbers-topic-pill:hover { background: var(--surface-sunk); color: var(--ink); }
.numbers-topic-pill.is-active { background: var(--frame); border-color: var(--frame); color: #fff; box-shadow: 0 2px 5px rgba(30,28,26,.18); }

.numbers-opening { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding-block: clamp(1.6rem, 3vw, 2.6rem); border-bottom: 1px solid var(--line); }
.numbers-opening-copy { padding-top: .25rem; }
.numbers-opening-copy h2 { font-size: clamp(2.2rem, 4vw, 3.45rem); letter-spacing: -.045em; max-width: 12ch; }
.numbers-opening-copy > p:not(.eyebrow) { max-width: 38ch; color: var(--ink-2); margin-top: .55rem; }
.numbers-subject-link { display: inline-flex; margin-top: 1rem; font-weight: 700; color: var(--brick-deep); }
.numbers-overview-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.numbers-overview-stat { min-width: 0; padding: clamp(.85rem, 1.5vw, 1.35rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.numbers-overview-stat > p { color: var(--ink-3); font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.numbers-overview-stat .figure { font-size: clamp(1.65rem, 2.7vw, 2.45rem); }
.numbers-overview-stat .evidence { margin-top: .7rem; font-size: .72rem; }

.numbers-overview-register .numbers-section { padding-top: clamp(1.2rem, 2vw, 1.8rem); border-top: 1px solid var(--line); }
.numbers-overview-register .bento { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.numbers-overview-register .bento > .xcard { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
.numbers-overview-register .bento .xcard > summary { padding: clamp(.85rem, 1.2vw, 1.2rem); }

/* .numbers-subject previously overrode .wrap's 1220px width up to 1400px,
   which is why this page's columns hugged the browser edges — .wrap alone
   already gives the intended centred content frame, so no override here. */

/* ======================================================================
   Growth & Housing — summary-card strip

   The one established, intentional card on the page: a contained warm-paper
   surface with a border and soft shadow, sitting between the subject nav and
   the flat editorial body. Deliberately not the flat `.gh-stats`/`.gh-columns`
   ruled matrices used inside the body sections below — this component is not
   a pattern to be repeated elsewhere on the page.
   ====================================================================== */
.gh-summary-wrap { margin-block: clamp(1.25rem, 2.4vw, 2rem) 0; }
.gh-summary-strip { display: grid; grid-template-columns: repeat(var(--count, 6), minmax(0, 1fr)); border-radius: 18px; overflow: hidden; background: linear-gradient(120deg, #FDFCF8, #F7F3EA); border: 1px solid #E2D9C4; box-shadow: 0 14px 30px -22px rgba(30,28,26,.45), 0 2px 6px rgba(30,28,26,.06); }
.gh-summary-cell { min-width: 0; padding: clamp(1rem, 1.7vw, 1.4rem); border-left: 1px solid rgba(91,70,84,.22); }
.gh-summary-cell:first-child { border-left: 0; }
.gh-summary-label { min-height: 2.85em; color: var(--ink-3); font: 600 var(--t-micro)/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.gh-summary-value { margin: .45rem 0 .2rem; color: var(--frame); font: 600 clamp(1.55rem, 2.2vw, 2.15rem)/1 var(--serif); letter-spacing: -.04em; overflow-wrap: anywhere; }
.gh-summary-period { min-height: 2.6em; margin: 0; color: var(--ink-2); font: var(--t-small)/1.35 var(--sans); }
.gh-summary-source { display: block; margin-top: .55rem; color: var(--ink-3); font: var(--t-micro)/1.35 var(--mono); }

/* ======================================================================
   Growth & Housing — flat editorial layout (City Atlas rhythm)

   One shell, `.gh-section`, used by every section on the page: a small
   eyebrow + editorial heading (+ optional one-line intro) in a left column,
   the data — a ruled matrix, a table, a chart or a map — in a right column.
   Sections are separated by a hairline rule, never a card. No background
   tint, no shadow, no corner radius, no per-topic pastel treatment: visual
   variety comes from what is on the right (matrix / table / chart / map),
   not from decorating the container.
   ====================================================================== */
.gh-doc { padding-block: clamp(.6rem, 1.2vw, 1rem) clamp(2rem, 4vw, 3rem); }
/* The page's deck opens the canvas under the band and the section rail. */
.gh-doc > .lede { margin: clamp(1.1rem, 2vw, 1.6rem) 0 clamp(.9rem, 1.6vw, 1.3rem); }
.gh-section { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: clamp(3rem, 4vw, 4rem); align-items: start; padding-block: clamp(1.7rem, 3vw, 2.5rem); border-top: 1px solid var(--line-strong); }
.gh-section:first-child { border-top: 0; padding-top: clamp(1.1rem, 2vw, 1.6rem); }
.gh-head, .gh-content { min-width: 0; }
.gh-head h2 { margin-top: .4rem; font-size: clamp(1.5rem, 2.3vw, 2.05rem); line-height: 1.08; letter-spacing: -.03em; max-width: 16ch; }
.gh-head > p:not(.eyebrow) { margin-top: .7rem; max-width: 34ch; color: var(--ink-2); font-size: var(--t-small); }
.gh-head .figure { margin-top: .9rem; font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.gh-head .caveat { font-size: var(--t-small); }
.gh-head .evidence { margin-top: .6rem; }
.gh-note { margin-top: .5rem; color: var(--ink-2); font-size: var(--t-small); }
.gh-content > .caveat { margin-top: 1rem; font-size: var(--t-small); max-width: 62ch; }

/* At-a-glance / other short numeric rows: flat columns divided by a hairline,
   never a card — the direct translation of the City Atlas reference. */
.gh-stats { display: grid; grid-template-columns: repeat(var(--count, 5), minmax(0, 1fr)); }
.gh-stat, .gh-columns > div { min-width: 0; padding-left: clamp(1rem, 1.6vw, 1.4rem); border-left: 1px solid var(--line); }
.gh-stat:first-child, .gh-columns > div:first-child { padding-left: 0; border-left: 0; }
.gh-stat-label, .gh-col-label { color: var(--ink-3); font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; min-height: 2.6em; }
.gh-stat-value, .gh-col-value { margin: .5rem 0 .15rem; color: var(--ink); font: 600 clamp(1.7rem, 2.5vw, 2.35rem)/1 var(--serif); letter-spacing: -.03em; overflow-wrap: anywhere; }
.gh-stat-period { margin: 0; color: var(--ink-2); font-size: var(--t-small); }
.gh-columns { display: grid; grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr)); }

/* Labelled value list: label left, value right, hairline row rules. */
.gh-ruled-list { border-top: 1px solid var(--line); }
.gh-ruled-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.gh-ruled-list dt { margin: 0; color: var(--ink-2); font-size: var(--t-small); }
.gh-ruled-list dd { margin: 0; color: var(--ink); font: 600 1.3rem/1 var(--serif); letter-spacing: -.02em; text-align: right; }
.gh-ruled-list--lead dd { font-size: 1.55rem; }
.gh-inline-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-small); }
.gh-inline-row strong { color: var(--ink); font: 600 1.3rem/1 var(--serif); letter-spacing: -.02em; }
.gh-inline-row--lead { border-top: 1px solid var(--line); border-bottom: 0; padding-bottom: 0; }
.gh-inline-row--lead strong { font-size: 2rem; }

/* Compact table — hairlines only, no enclosing box. */
.gh-table-wrap { overflow-x: auto; }
.gh-table { width: 100%; border-collapse: collapse; min-width: 30rem; }
.gh-table caption { text-align: left; font-size: var(--t-small); color: var(--ink-2); padding-bottom: .5rem; }
.gh-table th, .gh-table td { padding: .6rem .6rem .6rem 0; text-align: right; border-bottom: 1px solid var(--line); }
.gh-table th:first-child, .gh-table td:first-child { text-align: left; }
.gh-table thead th { color: var(--ink-2); font-size: var(--t-small); font-weight: 600; border-bottom: 1px solid var(--line-strong); }
.gh-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); margin-top: clamp(1.3rem, 2.4vw, 1.9rem); }
.gh-group-grid h3 { font-size: .95rem; margin-bottom: .4rem; }

/* Restrained chart block: sits directly in the flow, no tinted panel. */
.gh-chart { min-width: 0; }
.gh-chart--lead { margin-bottom: .8rem; }
.plot--population { min-height: 220px; }
.plot--population > svg { flex: 1 1 0; height: 0; width: 100%; }
.population-chart { margin-top: 0; }
.population-chart-key { justify-content: space-between; border-top: 1px solid var(--line); padding-top: .5rem; }
.population-chart-key b { color: var(--eucalypt); font-family: var(--sans); font-weight: 700; }
.gh-projection { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.gh-projection .chartbox { margin-top: .3rem; }

.gh-plain-list { margin: 0; padding-left: 1.1rem; color: var(--ink-2); }
.gh-plain-list li + li { margin-top: .4rem; }

/* Evidence rows: label column + long-form detail, flat hairline rows. */
.gh-evidence-rows { border-top: 1px solid var(--line); }
.gh-evidence-rows > div { display: grid; grid-template-columns: minmax(9rem, 15ch) 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.gh-evidence-rows dt { color: var(--ink-3); font: 600 var(--t-micro)/1.35 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.gh-evidence-rows dd { margin: 0; color: var(--ink-2); font-size: var(--t-small); }

/* Council & Governance: decision pathway as a wrapped label sequence, and a
   twelve-bar month histogram — both flat, hairline-only, no new colour. */
.cg-pathway { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin: 0; padding: 0; list-style: none; }
.cg-pathway li { font-size: var(--t-small); color: var(--ink-2); white-space: nowrap; }
.cg-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: .4rem; height: 8rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.cg-month { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .25rem; }
.cg-month-bar { width: 100%; min-height: 2px; background: var(--wire); border-radius: 1px 1px 0 0; }
.cg-month-label { font-size: var(--t-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.cg-month-count { font-size: var(--t-micro); color: var(--ink-2); }

@media (max-width: 900px) {
  .numbers-topic-nav { top: 0; }
  .numbers-opening { grid-template-columns: 1fr; }
  .gh-section { grid-template-columns: 1fr; gap: .9rem; }
  .plot--population { min-height: 240px; }
  /* At-a-glance and other short numeric rows fall back to a two-column
     grid; an odd trailing item spans both columns instead of leaving an
     empty slot beside it. */
  .gh-stats, .gh-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-stat, .gh-columns > div { padding-left: 1.1rem; border-left: 1px solid var(--line); padding-top: .6rem; }
  .gh-stat:nth-child(2n+1), .gh-columns > div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .gh-stat:nth-child(-n+2), .gh-columns > div:nth-child(-n+2) { padding-top: 0; }
  .gh-stat:last-child:nth-child(odd), .gh-columns > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gh-evidence-rows > div { grid-template-columns: 1fr; gap: .2rem; }
  .gh-group-grid { grid-template-columns: 1fr; }
  /* Tablet: a balanced multi-column layout, never a horizontal scroll. */
  .gh-summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gh-summary-cell:nth-child(3n+1) { border-left: 0; }
  .gh-summary-cell:nth-child(n+4) { border-top: 1px solid rgba(91,70,84,.22); }
}
@media (max-width: 560px) {
  .numbers-topic-nav-inner { width: 100%; padding-inline: 1.25rem; }
  /* Mobile: two columns, three rows for a full six-item set, with clear
     dividers on every edge. */
  .gh-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-summary-cell:nth-child(3n+1) { border-left: 1px solid rgba(91,70,84,.22); }
  .gh-summary-cell:nth-child(2n+1) { border-left: 0; }
  .gh-summary-cell:nth-child(n+3) { border-top: 1px solid rgba(91,70,84,.22); }
  .gh-summary-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ==========================================================================
   Explore Wodonga
   ========================================================================== */


.field { display: inline-flex; flex-direction: column; gap: .2rem; }
.field > span { font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.field select, .field input {
  min-height: var(--touch); padding: .35rem .6rem;
  border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--surface-raised);
  font-size: .92rem;
  max-width: 15rem;
}


.result-row {
  display: block; width: 100%; text-align: left;
  background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1rem;
  margin-bottom: .5rem;
}
.result-row[aria-expanded="true"], .result-row.is-selected {
  border-color: var(--accent); border-left-width: 4px; background: var(--surface);
  box-shadow: var(--shadow-1);
}
.result-row .rr-top { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: .3rem; }
.result-row .rr-kind { font: 600 var(--t-micro)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.result-row .rr-title { display: block; font: 600 1.02rem/1.3 var(--serif); }
.result-row .rr-meta { display: block; font-size: var(--t-small); color: var(--ink-2); margin-top: .2rem; }
.result-detail {
  border: 1px solid var(--accent); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface-raised); padding: 1.2rem; margin: -.5rem 0 1rem;
  box-shadow: var(--shadow-1);
}
.result-detail .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem 2rem; }

/* ==========================================================================
   Council Record
   ========================================================================== */

.decision-lead {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--card-gap);
}
.decision {
  background: var(--surface-raised); border: 1px solid var(--line);
  border-top: 3px solid var(--frame);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: var(--card-pad); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: .4rem;
}
.decision h3 { font-size: 1.08rem; line-height: 1.25; }
.decision .dec-meta { font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); letter-spacing: .02em; }

.status-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap); align-items: stretch; }
.status-strip .xcard { background: var(--surface-raised); }
.status-strip .xcard > summary { display: flex; flex-direction: column; height: 100%; }
.status-strip .figure { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
/* the summary strip takes the slack the taller absence slot creates, so the
   published cards read as filled rather than as two figures and a void */
.status-strip .stat-visual { margin-top: auto; padding-top: .9rem; }
.status-strip .stat-visual .chartbox { margin-top: 0; }
.status-strip .stat-visual .chart-key { gap: .2rem .7rem; }

.module { min-width: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1rem 1.1rem 1.05rem; box-shadow: var(--shadow-1); }
.module h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.module .module-sub { font-size: var(--t-small); color: var(--ink-3); margin-bottom: .65rem; }
.module > p { margin-bottom: .7rem; }
.module .caveat { margin: .7rem 0; }
.module-grid { display: grid; gap: var(--card-gap); }
.module-grid > * { min-width: 0; }
.module-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.module-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-grid .span-2 { grid-column: span 2; }

.roster { display: grid; gap: 1.1rem; }
.ward-group { border-top: 1px solid var(--line-strong); padding-top: .7rem; }
.ward-group h3 { font-size: 1.05rem; letter-spacing: .01em; }
.ward-group .ward-meta { font: var(--t-micro)/1.6 var(--mono); color: var(--ink-3); }
.roster-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; margin-top: .7rem; }
.roster-person { display: flex; gap: .8rem; align-items: flex-start; }
.roster-person .rp-mark { flex: none; width: 34px; height: 34px; color: var(--fg-2); }
.roster-person strong { font: 600 1.02rem/1.25 var(--serif); display: block; }
.roster-person span { font-size: var(--t-small); color: var(--ink-2); display: block; }

.register { border-top: 1px solid var(--line-strong); }
.register-row { display: grid; grid-template-columns: 10rem 1fr auto; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.register-row .reg-date { font: var(--t-micro)/1.6 var(--mono); color: var(--ink-3); letter-spacing: .04em; }

/* A register row is a table row, not a card: no panel, no shadow, one line.
   Eight meeting records used three lines each before pass-15, which is most of
   a screen spent restating the same three facts. */
.register-item { background: transparent; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
.register-item:hover { box-shadow: none; }
.register-item > summary { padding: .55rem 2.2rem .55rem 0; }
.register-item[open] { background: var(--surface-raised); }
.register-item[open] > summary { padding-left: .8rem; }
@media (min-width: 721px) {
  .register-item > summary {
    flex-direction: row; flex-wrap: nowrap; align-items: baseline;
    gap: 0 1.1rem; min-height: 0;
  }
  .register-item .rr-top { margin-bottom: 0; flex: none; }
  .register-item .rr-title { flex: 1 1 auto; min-width: 0; font-size: .97rem; }
  .register-item .rr-meta { margin-top: 0; flex: none; text-align: right; }
  .register-item > summary::after { bottom: auto; top: 50%; margin-top: -9px; right: .5rem; }
}

/* --------------------------------------------------------------------------
   Meeting digest

   What a resident reads instead of the published PDF. Two registers are kept
   visually distinct throughout: council's own words sit in the serif behind a
   rule, Wodonga Wire's framing stays in the sans. A reader should never have
   to guess which is which.
   -------------------------------------------------------------------------- */

.digest-lead { font: 500 .95rem/1.55 var(--sans); color: var(--ink-2); margin: 0 0 .9rem; }

.digest-head {
  font: 600 var(--t-micro)/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 1.3rem 0 .5rem;
}

.digest-plain { list-style: none; margin: 0; padding: 0; }
.digest-plain > li { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.digest-plain > li:last-child { border-bottom: 0; }
.digest-plainline { font-size: .9rem; color: var(--ink-2); margin: 0; }

.digest-items { list-style: none; margin: 0; padding: 0; }
.digest-item { padding: .8rem 0; border-top: 1px solid var(--line); }
.digest-item:first-child { border-top: 0; padding-top: .2rem; }

.digest-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; margin: 0 0 .4rem; }
.digest-num { font: 600 var(--t-micro)/1.5 var(--mono); color: var(--ink-3); letter-spacing: .04em; flex: none; }
.digest-title { font: 600 1rem/1.35 var(--serif); flex: 1 1 14rem; min-width: 0; }

.digest-motion { margin: .5rem 0 .2rem; }
.digest-motion--procedural { opacity: .78; }
.digest-motion-meta {
  font: var(--t-micro)/1.6 var(--mono); color: var(--ink-3);
  letter-spacing: .03em; margin: 0 0 .25rem;
}

/* Council's wording, quoted. The rule marks the boundary between what the
   source said and what this site says about it. */
.digest-quote {
  display: block; font: .92rem/1.55 var(--serif); color: var(--ink-1); max-width: 72ch;
  border-left: 2px solid var(--line-strong); padding-left: .8rem; margin: .3rem 0;
}

.digest-division { font-size: .87rem; color: var(--ink-2); margin: .4rem 0 0; line-height: 1.5; }
.digest-division span { font: 600 var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

.digest-amounts, .digest-ground { font: var(--t-small)/1.5 var(--sans); color: var(--ink-2); margin: .35rem 0 0; }
.digest-rec { font-size: .89rem; color: var(--ink-2); margin: .5rem 0 0; }
.digest-rec span { font: 600 var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

@media (max-width: 560px) {
  .digest-title { flex-basis: 100%; }
}

/* A council decision shown against a consultation, or the reverse. This is a
   record Wodonga Wire assembled rather than one council published, so it is set
   apart from the source listing above it and always carries its reason. The
   exhibition variant is held back visually: it is council deciding to consult,
   not an outcome, and it must not read with the same weight. */
.consult-decision {
  margin: .55rem 0 .2rem; padding: .55rem .7rem;
  background: var(--surface-sunk); border-left: 2px solid var(--line-strong);
}
.consult-decision--exhibition { border-left-style: dashed; }
.consult-decision-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem;
  font: 600 var(--t-micro)/1.5 var(--sans); text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-2); margin: 0 0 .3rem;
}
.consult-decision-meta { font: var(--t-micro)/1.6 var(--mono); color: var(--ink-3); margin: 0 0 .3rem; }
.consult-decision-note,
.consult-decision-derived { font: var(--t-small)/1.5 var(--sans); color: var(--ink-2); margin: .35rem 0 0; }
.consult-decision-derived { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.consult-decision-absent {
  font: var(--t-small)/1.5 var(--sans); color: var(--ink-2);
  border-left: 2px solid var(--data-5); padding-left: .75rem; margin: .5rem 0 .2rem;
}

/* ==========================================================================
   Evidence pages
   ========================================================================== */

.evidence-page { max-width: 54rem; }
.file-action {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: var(--touch); padding: .6rem 1.15rem;
  background: var(--frame); color: var(--on-frame); text-decoration: none;
  border-radius: 2px; font-weight: 600; margin-top: .4rem;
}
.file-action:hover { background: var(--frame-2); color: #fff; }
.file-kind { font: var(--t-micro)/1.4 var(--mono); color: var(--ink-3); display: block; margin-top: .5rem; max-width: 60ch; }


/* ==========================================================================
   Secondary pages
   Registers and About pages that sit beneath the four primary destinations.
   They share the same tokens so the site stays coherent end to end.
   ========================================================================== */

.narrow { padding-block: clamp(2rem, 4vw, 3.5rem); }
.narrow { max-width: 52rem; }
/* The support canvas is 52rem so callouts, forms and records have room; the
   running text inside it reads at the publication measure. */
.narrow > p, .narrow > ul, .narrow > ol { max-width: 62ch; }
.lede { font-size: var(--t-lead); color: var(--ink-2); max-width: 44rem; margin-bottom: 1.5rem; }
.wrap > h1 { font-size: var(--t-h1); letter-spacing: -.03em; margin: clamp(2rem, 4vw, 3rem) 0 .8rem; max-width: 26ch; text-wrap: balance; }
.wrap > h2 { font-size: var(--t-h2); margin: 2.4rem 0 .8rem; max-width: 34ch; }
.wrap > h3 { font-size: var(--t-h3); margin: 1.6rem 0 .5rem; max-width: 34ch; }

.callout {
  background: var(--surface-raised); border: 1px solid var(--line);
  border-left: 4px solid var(--line-frame);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.2rem 0;
  font-size: .96rem;
}
.callout-warn { border-left-color: var(--accent); }
.callout-info { border-left-color: var(--line-frame); }

.rows { display: grid; gap: .9rem; margin: 1.4rem 0; }
.rows > .card, .rows > li { list-style: none; padding: 1.1rem 1.2rem; }
.rows .title { font: 600 1.08rem/1.3 var(--serif); display: block; margin-bottom: .25rem; }
.rows .meta, .meta { font: var(--t-micro)/1.6 var(--mono); color: var(--ink-3); }
.empty { color: var(--ink-2); font-size: .96rem; }

.filters, .pill-row, .inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: 1rem 0 1.4rem; }
.filters label { display: inline-flex; flex-direction: column; gap: .2rem;
  font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.filters input, .filters select {
  min-height: var(--touch); padding: .35rem .6rem; font-size: .92rem;
  border: 1px solid var(--line-strong); border-radius: 2px; background: var(--surface-raised);
  color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 400;
}
.pill, .pill-row a {
  display: inline-flex; align-items: center; min-height: 36px; padding: .3rem .8rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface-raised); color: var(--ink-2);
  font-size: .86rem; text-decoration: none;
}
.pill.on, .pill-row a.on { background: var(--frame); border-color: var(--frame); color: #fff; }

.chip-ok { border-color: var(--wire); background: var(--wire-wash);
  /* --wire-deep on --wire-wash is 4.2:1 at chip size; deepened to clear AA. */
  color: color-mix(in oklab, var(--wire-deep), var(--ink) 20%); }
.chip-warn { border-color: var(--brick-soft); background: var(--brick-wash); color: var(--brick-deep); }
.chip-alert { border-color: var(--problem); background: var(--brick-wash); color: var(--problem); }

.btn, .btn-quiet {
  display: inline-flex; align-items: center; min-height: var(--touch);
  padding: .55rem 1.1rem; border-radius: 2px; text-decoration: none; font-weight: 600;
  background: var(--frame); color: var(--on-frame); border: 1px solid var(--frame);
}
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn:hover { background: var(--frame-2); border-color: var(--frame-2); color: #fff; }

.dir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--card-gap); }
.dir-group { background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: var(--card-pad); box-shadow: var(--shadow-1); }
.dir-item { display: block; padding: .45rem 0; border-top: 1px solid var(--line); }
.dir-item:first-of-type { border-top: 0; }
.ext::after { content: " 97"; color: var(--ink-3); }

.timeline { list-style: none; padding: 0; margin: 1.2rem 0; border-left: 2px solid var(--data-6); }
.timeline li { padding: .5rem 0 .5rem 1.2rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 1rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--fg); }
.timeline .when { font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); display: block; }

.ref { font-family: var(--mono); font-size: .88rem; }
.source-date { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); }
.coverage-card { background: var(--surface-raised); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: var(--card-pad); box-shadow: var(--shadow-1); }
.split-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.record-section { margin-block: 1.9rem; }
.record-list, .two-col { display: grid; gap: var(--card-gap); }
.two-col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.record-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ==========================================================================
   Responsive (spec 13.1)
   ========================================================================== */

@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .lead-card, .bento > .major, .bento > .full { grid-column: 1 / -1; }
  .bento > .tall { grid-row: auto; }
  .status-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .section-head::before { width: 44px; }
  .secnav-inner { gap: 0; }
  .secnav-label { display: none; }
  .secnav-list a { padding: 0 .65rem; font-size: .82rem; }
  .hero-photo > img { height: clamp(380px, 105vw, 460px); object-position: 58% 50%; }
  .hero-copy { padding-block: 5rem 1.4rem; }
  .hero-intro { flex-direction: column; gap: 1rem; }
  .hero-spool { width: 64px; }
  .row-3, .row-4, .row-2, .destinations, .status-strip,
  .module-grid--2, .module-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .decision-lead, .roster-list { grid-template-columns: minmax(0, 1fr); }
  .module-grid .span-2 { grid-column: auto; }
  .bento { grid-template-columns: 1fr; }
  .bento > .lead-card, .bento > .major, .bento > .full, .bento > .tall,
  .bento > .standard, .bento > .xcard[open] { grid-column: auto; grid-row: auto; }
  .register-row { grid-template-columns: 1fr; gap: .25rem; }
  .result-detail .cols { grid-template-columns: 1fr; }
  .hero-ticker a, .hero-ticker span.tick { min-width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-ticker a:last-child, .hero-ticker span.tick:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .deflist { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .deflist dd { margin-bottom: .6rem; }
  .claim-path li { grid-template-columns: minmax(0, 1fr); gap: .05rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
}

@media print {
  .participate-links { display: none; }
  body { background: #fff; }
}


/* ------------------------------------------------- Council Record, v2 ---
   Permanent search, five record views over one connected model, canonical
   council-matter card (details-left / facts-right, ~72/28). See
   council-record-page-layout-architecture.md sections 4, 10-12. */

.cr-search { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 .3rem; }
.cr-search input[type="text"] {
  flex: 1 1 22rem; min-width: 0; min-height: var(--touch); padding: .5rem .85rem; font: var(--t-body)/1.3 var(--sans);
  border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface-raised); color: var(--ink);
}
/* One submit-button treatment for the register forms (search, apply). */
.cr-search button, .cr-filters .button, .filters button, .inline button {
  flex: 0 0 auto; min-height: var(--touch); padding: .45rem 1rem; border: 1px solid var(--line-strong);
  border-radius: 3px; background: var(--surface-raised); color: var(--ink); font-weight: 600;
}
.cr-search button:hover, .cr-filters .button:hover, .filters button:hover, .inline button:hover { border-color: var(--fg); color: var(--fg); }
/* In-page search results (static-search.js) and the type / year / stage
   pages of a bounded register. */
.cr-search-results { margin: .9rem 0 1.4rem; }
.cr-search-results[hidden] { display: none; }
.cr-search-results .cr-count { margin: 0 0 .6rem; font: 600 var(--t-small)/1.4 var(--sans); color: var(--ink); }
.static-search-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.static-search-rows li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .2rem .8rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.static-search-rows .ref { font: 600 var(--t-micro)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.static-search-rows .title a { color: var(--ink); }
.cr-type-nav { margin: 1rem 0 .2rem; }
.cr-months { margin: .4rem 0 1rem; font: var(--t-small)/1.8 var(--sans); color: var(--ink-3); }
.cr-months .cr-months-l { font-weight: 600; color: var(--ink-2); margin-right: .6rem; }
.cr-months a { margin-right: .7rem; color: var(--ink-2); }
.cr-months a.is-current { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); text-decoration: none; }
.pill.is-empty { color: var(--ink-3); background: transparent; cursor: default; }
@media (max-width: 640px) { .static-search-rows li { grid-template-columns: 1fr; } }
.cr-search-clear { font: var(--t-micro)/1.4 var(--mono); color: var(--ink-3); align-self: center; }

.cr-view-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .3rem; margin: .9rem 0 0; border-bottom: 1px solid var(--line-strong); }
.cr-view-nav::-webkit-scrollbar { display: none; }
/* The view row is this family's local navigation, so it follows the reader
   down a register rather than leaving them to scroll back for it. The
   subview row under Participation is a second row of the same kind and does
   not stick: one sticky bar per page. */
.cr-view-nav:not(.cr-subview-nav) { background: var(--surface-raised); }
.cr-view-nav a {
  flex: 0 0 auto; padding: .55rem .9rem; font: 600 var(--t-small)/1.3 var(--sans); color: var(--ink-3);
  text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.cr-view-nav a:hover { color: var(--ink); }
.cr-view-nav a.is-active { color: var(--fg); border-bottom-color: var(--accent); }
/* Six destinations since D-080. Below 640px the row wraps rather than
   scrolling, so every preset stays visible and reachable, as the masthead's
   destinations do. */
@media (max-width: 640px) {
  .cr-view-nav { flex-wrap: wrap; overflow-x: visible; }
  .cr-view-nav a { padding: .45rem .7rem; }
}

.cr-context-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .8rem 0 1.1rem; font: var(--t-small)/1.4 var(--sans); color: var(--ink-3); }
.cr-context-bar .cr-count { color: var(--ink); font-weight: 600; }
.cr-chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.cr-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border: 1px solid var(--line-strong); border-radius: 999px; font: var(--t-micro)/1.4 var(--mono); background: var(--surface-raised); }
.cr-chip a { color: var(--ink-3); text-decoration: none; }

.cr-filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin: 0 0 1.1rem; align-items: flex-end; }
.cr-filters label { display: flex; flex-direction: column; gap: .2rem; font: var(--t-micro)/1.3 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.cr-filters select, .cr-filters input { padding: .4rem .55rem; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface-raised); font: var(--t-small) var(--sans); }

/* The results region is where the record runtime moves the reading position
   after it answers an address. It is a landing target, not a control — it is
   not in the tab order — so focusing it must not paint a focus ring the width
   of the page, which reads as an alert box rather than a cue. The live region
   announces what changed. */
.cr-runtime:focus, .cr-runtime:focus-visible { outline: none; box-shadow: none; }

/* The participation records use the same tab row as the views above them:
   one contextual-navigation grammar, not a second pill grammar. */
.cr-subview-nav { margin-bottom: 1.2rem; }

/* A preset's own words (D-080): a short contract to the reader, set as a
   heading and one measured paragraph above the list. Same grammar as the
   explorer's section heads; no card, no band. */
.cr-preset-lead { margin: 1.1rem 0 .4rem; padding-bottom: .9rem; border-bottom: 1px dotted var(--line-strong); }
.cr-preset-head { margin: 0 0 .35rem; font-size: var(--t-h3); line-height: 1.25; }
.cr-preset-text { margin: 0; color: var(--ink-2); font-size: var(--t-small); max-width: 72ch; }
.cr-preset-lead .card-links { margin-top: .6rem; padding-top: 0; border-top: 0; }
.cr-search-scope { font: var(--t-micro)/1.4 var(--mono); color: var(--ink-3); align-self: center; }

/* The mechanism line a Decision carries: what kind of decision, and who made
   it where the source says. Mono, because it is a record field rather than
   prose, and ink rather than accent, because it is a fact and not a state. */
.cr-mechanism { margin: .3rem 0 .4rem; font: var(--t-micro)/1.5 var(--mono); color: var(--ink-2); letter-spacing: .01em; }
.cr-mechanism-kind { color: var(--ink); font-weight: 600; }
.cr-mechanism-maker { color: var(--ink-2); }

/* A Planning record's location: the state in words first, then every
   address council printed as equal ruled rows with the month each was
   reported. A conflicted group gets the same rows and a caveat; nothing here
   is carried by colour alone. */
.cr-evidence-tag { display: inline-block; margin: .2rem 0 .5rem; padding: .15rem 0; font: 600 var(--t-micro)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--line-strong); }
.cr-evidence-tag.is-conflict { color: var(--brick-deep); border-bottom-color: var(--brick-soft); }
.cr-planning-location { margin: 1.4rem 0; }
.cr-planning-locations { list-style: none; margin: .4rem 0 0; padding: 0; border-top: 1px solid var(--line-strong); max-width: 72ch; }
.cr-planning-locations li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.cr-planning-address { font-size: .95rem; color: var(--ink); }
.cr-planning-when { font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); }
.cr-observations { list-style: none; margin: .6rem 0 0; padding: 0; counter-reset: obs; max-width: 72ch; }
.cr-observation { padding: .8rem 0; border-top: 1px solid var(--line); }
.cr-observation:first-child { border-top: 0; }
.cr-observation > p { margin: 0 0 .3rem; }

.cr-group { margin: 0 0 2rem; }
.cr-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .7rem; }
.cr-group-head h2 { margin: 0; }
.cr-group-head p { margin: 0; font: var(--t-small) var(--sans); color: var(--ink-3); }

.matter-list { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.matter-card {
  display: flex; gap: 1.4rem; padding: 1.05rem 1.2rem; border: 1px solid var(--line-strong); border-radius: 4px;
  background: var(--surface-raised); box-shadow: var(--shadow-1);
  transition: var(--transition-feedback);
}
.matter-card:hover { border-color: var(--line-frame); box-shadow: var(--shadow-2); }
.matter-details { flex: 1 1 72%; min-width: 0; }
.matter-facts { flex: 0 0 26%; max-width: 15rem; display: flex; flex-direction: column; gap: .5rem; border-left: 1px dotted var(--line-strong); padding-left: 1.1rem; }
.matter-kind { font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .25rem; }
.matter-title { margin: 0 0 .3rem; font-size: 1.08rem; line-height: 1.3; }
.matter-title a { color: inherit; text-decoration: none; }
.matter-title a:hover { text-decoration: underline; }
.matter-summary { margin: 0 0 .4rem; color: var(--ink-2); max-width: 72ch; }
.matter-meta { margin: 0 0 .3rem; font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); letter-spacing: .01em; }
.matter-excerpt { margin: .4rem 0 0; padding: .5rem .7rem; background: var(--surface-sunk); border-left: 2px solid var(--accent); font-size: .92rem; max-width: 72ch; }
.matter-fact { margin: 0; }
.matter-fact dt { font: 600 var(--t-micro)/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 .12rem; }
.matter-fact dd { margin: 0 0 .55rem; font-size: .92rem; }
.matter-links { margin-top: auto; padding-top: .5rem; display: flex; flex-direction: column; gap: .25rem; }
.matter-links a { font: 600 var(--t-micro)/1.4 var(--sans); color: var(--fg-2); text-decoration: none; }
.matter-links a:hover { text-decoration: underline; }

.cr-next-meeting { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; padding: .8rem 1.1rem; margin: 0 0 1.6rem; border: 1px dashed var(--line-strong); border-radius: 4px; font: var(--t-small) var(--sans); color: var(--ink-3); }
.cr-next-meeting strong { color: var(--ink); }

.cr-pagination { display: flex; justify-content: center; gap: .6rem; margin: 1.6rem 0; font: var(--t-small) var(--sans); }
.cr-pagination a, .cr-pagination span { padding: .4rem .8rem; border: 1px solid var(--line-strong); border-radius: 3px; text-decoration: none; color: var(--ink); }
.cr-pagination .is-current { background: var(--surface-sunk); border-color: var(--fg); }

.cr-coverage-foot { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line-strong); font: var(--t-small)/1.5 var(--sans); color: var(--ink-3); }

@media (max-width: 720px) {
  .matter-card { flex-direction: column; }
  .matter-facts { max-width: none; border-left: 0; border-top: 1px dotted var(--line-strong); padding-left: 0; padding-top: .8rem; flex-direction: row; flex-wrap: wrap; gap: 1rem 1.6rem; }
  .matter-fact { flex: 1 1 40%; }
}
.button--quiet { min-height:var(--touch); padding:.55rem .8rem; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:999px; font-weight:650; }
.button--quiet:hover,.button--quiet:focus-visible { border-color:var(--fg); color:var(--fg); }

/* ==========================================================================
   Explore Wodonga (xp-) — the map application

   Below the masthead the page is an application, not an article. A compact
   bar carries the page identity, the starting views and the quick-information
   switch; under it one layer catalogue, the map and — only while a record is
   open — a detail rail share the viewport as columns. The rails resize the
   map; over it sit only MapLibre's own controls, a one-line status, the quick
   card beside whatever was clicked and the timeline along the foot. Under
   760px the rails become bottom sheets, the quick card a strip along the
   foot, and the map stays the primary surface. Built from the site tokens:
   near-white surfaces, hairline borders, the one accent, serif for names and
   sans for controls.
   ========================================================================== */
.xp-app {
  --xp-mast: 4.25rem; --xp-rail-w: 20rem; --xp-detail-w: 24rem;
  display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  height: calc(100svh - var(--xp-mast)); min-height: 30rem;
  background: var(--surface); color: var(--ink); font-family: var(--sans);
  border-bottom: 1px solid var(--line);
}

/* --- the bar: identity, starting views, tools ---------------------------- */
.xp-bar { display: flex; align-items: center; gap: .5rem 1rem; min-height: 2.9rem; min-width: 0; padding: .3rem var(--gutter, 1rem); border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.xp-h1 { margin: 0; padding-right: 1rem; border-right: 1px solid var(--line); font: 500 1rem/1.2 var(--serif); letter-spacing: -.01em; white-space: nowrap; }
.xp-views-nav { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0; }
.xp-bar-label { flex: none; color: var(--ink-3); font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.xp-views { display: flex; gap: .2rem; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
.xp-views::-webkit-scrollbar { display: none; }
.xp-view {
  flex: none; min-height: 2.05rem; padding: .3rem .7rem;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink-2);
  font: 600 var(--t-small)/1.2 var(--sans); white-space: nowrap; cursor: pointer; transition: var(--transition-feedback);
}
.xp-view:hover { color: var(--fg); border-color: var(--line-strong); }
.xp-view[aria-pressed="true"] { background: var(--frame); border-color: var(--frame); color: var(--on-frame); }
.xp-view:focus-visible, .xp-tool:focus-visible, .xp-close:focus-visible, .xp-link:focus-visible, .xp-info:focus-visible,
.xp-seg:focus-visible, .xp-chip:focus-visible, .xp-key-toggle:focus-visible, .xp-also-item:focus-visible, .xp-browse-item:focus-visible,
.xp-nearby-item:focus-visible, .xp-time-now:focus-visible, .xp-time-step:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.xp-bar-tools { display: flex; align-items: center; gap: .6rem; flex: none; margin-left: auto; }
.xp-tool {
  flex: none; min-height: 2.05rem; padding: .3rem .65rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  font: 600 var(--t-small)/1.2 var(--sans); white-space: nowrap; cursor: pointer; transition: var(--transition-feedback);
}
.xp-tool:hover { border-color: var(--fg); }
.xp-tool[aria-expanded="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
.xp-tool--quiet { border-color: transparent; color: var(--ink-2); }
.xp-tool--quiet:hover { border-color: var(--line-strong); color: var(--fg); }
.xp-tool--primary { background: var(--frame); border-color: var(--frame); color: var(--on-frame); }
.xp-tool--primary:hover { background: var(--fg); }
.xp-tool:disabled { opacity: .45; cursor: default; }
/* A segmented switch: Off · Hover · On, 1 yr · 3 yrs · 5 yrs. */
.xp-segment { display: flex; align-items: center; gap: .4rem; }
.xp-segment .xp-seg + .xp-seg { margin-left: -1px; }
.xp-seg { min-height: 1.85rem; padding: .2rem .55rem; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: 600 var(--t-micro)/1.2 var(--sans); letter-spacing: .02em; cursor: pointer; }
.xp-seg:first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.xp-seg:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; }
.xp-seg:hover { color: var(--fg); }
.xp-seg[aria-pressed="true"] { background: var(--frame); border-color: var(--frame); color: var(--on-frame); position: relative; z-index: 1; }

/* --- the body: rail | map | detail ---------------------------------------- */
.xp-body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 0; }
.xp-rail, .xp-detail { display: flex; flex-direction: column; min-height: 0; background: var(--surface-raised); }
.xp-rail { grid-column: 1; width: var(--xp-rail-w); border-right: 1px solid var(--line); }
.xp-map { grid-column: 2; }
.xp-detail { grid-column: 3; width: var(--xp-detail-w); border-left: 1px solid var(--line); }
.xp-rail[hidden], .xp-detail[hidden] { display: none; }
.xp-detail > section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.xp-detail > section[hidden] { display: none; }
.xp-rail-head, .xp-detail-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .9rem .5rem; border-bottom: 1px solid var(--line); flex: none; }
.xp-rail-head > div, .xp-detail-head > div { min-width: 0; }
.xp-detail-head { align-items: flex-start; padding-top: .65rem; }
.xp-rail-head-tools { display: flex; align-items: center; gap: .6rem; flex: none; }
.xp-rail-title { margin: 0; font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.xp-rail-scroll, .xp-detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .7rem .9rem 1.2rem; scrollbar-width: thin; }
.xp-eyebrow { margin: 0; font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--brick-deep); }
.xp-detail-title { margin: .1rem 0 0; font: 600 1.1rem/1.2 var(--serif); text-wrap: balance; }
.xp-close {
  flex: none; width: 2.1rem; height: 2.1rem; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.xp-close:hover { border-color: var(--fg); }
#xp-rail-close { display: none; }
.xp-info { flex: none; width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--ink-3); font: italic 600 .78rem/1 var(--serif); cursor: pointer; }
.xp-info:hover, .xp-layer:hover .xp-info { border-color: var(--line-strong); color: var(--fg); }

/* --- the map --------------------------------------------------------------- */
.xp-map { position: relative; min-width: 0; min-height: 0; background: #F7F5EE; }
#wodonga-map { position: absolute; inset: 0; }
#wodonga-map:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }
.xp-map-status { position: absolute; z-index: 3; top: .6rem; left: .6rem; margin: 0; max-width: min(22rem, calc(100% - 4rem)); padding: .3rem .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(250, 249, 245, .94); color: var(--ink-2); font: var(--t-micro)/1.4 var(--sans); pointer-events: none; }
.xp-map-status:empty { display: none; }
.xp-map .maplibregl-ctrl-group { border-radius: var(--radius); box-shadow: var(--shadow-2); border: 1px solid var(--line-strong); }
.xp-map .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.xp-map .maplibregl-ctrl-attrib { font: var(--t-micro)/1.4 var(--sans); background: rgba(250, 249, 245, .9); }
.xp-map .maplibregl-ctrl-attrib a { color: var(--ink-2); }
.xp-map .maplibregl-ctrl-scale { font: var(--t-micro)/1.3 var(--sans); color: var(--ink-2); background: rgba(250, 249, 245, .7); border-color: var(--ink-2); }
#wodonga-map.is-unavailable { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--surface-raised) 0 12px, var(--surface) 12px 24px); }
#wodonga-map.is-unavailable::after { content: "The map could not start on this device. The layer list carries the same information."; max-width: 26rem; padding: 1rem 1.15rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-raised); color: var(--ink-2); font-size: .9rem; line-height: 1.45; text-align: center; }
.xp-sheet-bar { display: none; }

/* --- the quick card: a popup beside the feature; a strip on a phone ------ */
.xp-popup .maplibregl-popup-content { padding: 0; border-radius: var(--radius); box-shadow: var(--shadow-overlay, 0 8px 24px rgba(30, 28, 26, .18)); border: 1px solid var(--line-strong); background: var(--surface-raised); font-family: var(--sans); color: var(--ink); }
.xp-popup .maplibregl-popup-tip { border-top-color: var(--surface-raised); border-bottom-color: var(--surface-raised); }
.xp-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface-raised); }
.xp-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface-raised); }
.xp-popup--hover .maplibregl-popup-content { pointer-events: none; box-shadow: var(--shadow-2); }
/* A card the resident asked for sits above a card that merely follows the pointer. */
.xp-popup { z-index: 7; }
.xp-popup--hover { z-index: 6; }
.xp-quick-card, .xp-hover-card { padding: .6rem .75rem .6rem; min-width: 13rem; }
.xp-hover-card { padding: .45rem .65rem .5rem; }
.xp-quick-kind { margin: 0 0 .1rem; font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brick-deep); }
.xp-quick-title { margin: 0 0 .35rem; font: 600 1.02rem/1.2 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.xp-hover-title { margin: 0 0 .2rem; font: 600 .92rem/1.25 var(--serif); }
.xp-quick-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .12rem .6rem; margin: 0; font-size: .84rem; line-height: 1.35; }
.xp-quick-rows > div { display: contents; }
.xp-quick-rows dt { margin: 0; color: var(--ink-3); font: 600 var(--t-micro)/1.55 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.xp-quick-rows dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.xp-quick-rows > div:first-child dd { font-weight: 600; font-size: .95rem; }
.xp-quick-note { margin: .35rem 0 0; color: var(--ink-3); font-size: var(--t-micro); }
.xp-quick-actions { display: flex; align-items: center; gap: .35rem; margin-top: .55rem; }
.xp-quick-actions .xp-tool { min-height: 1.9rem; padding: .25rem .6rem; }
.xp-quick-close { margin-left: auto; width: 1.8rem; height: 1.8rem; font-size: 1.1rem; }
.xp-quick-others { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.xp-quick-others .xp-also { margin: 0; padding: 0; border: 0; }
.xp-quick-others .xp-also h4 { display: none; }
.xp-quick-section { margin: .45rem 0 .2rem; font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.xp-quick-card .xp-choose { margin-top: 0; }
.xp-quick { display: none; }

/* --- the timeline: one global point in time along the foot of the map ----- */
.xp-timeline {
  position: absolute; z-index: 4; left: .6rem; right: 3.4rem; bottom: .6rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .55rem; row-gap: .15rem; align-items: center;
  max-width: 44rem; padding: .3rem .55rem .35rem .3rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: rgba(250, 249, 245, .95); box-shadow: var(--shadow-2);
}
.xp-timeline.is-past { border-color: var(--line-strong); }
.xp-time-now { grid-row: 1 / span 2; min-height: 2.1rem; padding: .3rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: 600 var(--t-small)/1.2 var(--sans); white-space: nowrap; cursor: pointer; }
.xp-time-now[aria-pressed="true"] { background: var(--frame); border-color: var(--frame); color: var(--on-frame); cursor: default; }
.xp-time-track { display: flex; align-items: center; gap: .3rem; min-width: 0; grid-column: 2; }
.xp-time-track[hidden] { display: none; }
.xp-time-slider { flex: 1 1 auto; min-width: 6rem; height: 1.6rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.xp-time-step { flex: none; width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer; }
.xp-time-step:disabled { opacity: .4; cursor: default; }
.xp-time-play { font-size: .7rem; }
.xp-time-play[aria-pressed="true"] { background: var(--frame); border-color: var(--frame); color: var(--on-frame); }
.xp-time-label { grid-column: 2; grid-row: 2; margin: 0; color: var(--ink); font: 600 var(--t-small)/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-timeline:not(.has-history) .xp-time-label { grid-row: 1 / span 2; color: var(--ink-2); font-weight: 500; }
.xp-time-clauses { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: .2rem .6rem; margin: .05rem 0 0; }
.xp-time-clauses[hidden] { display: none; }
.xp-time-clause { color: var(--ink-2); font: var(--t-micro)/1.3 var(--sans); white-space: nowrap; }
.xp-time-clause::before { content: ""; display: inline-block; width: .3rem; height: .3rem; margin: 0 .3rem .1rem 0; border-radius: 50%; background: var(--line-strong); }
.xp-time-window { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: .4rem; }
.xp-time-window[hidden] { display: none; }

/* --- the catalogue --------------------------------------------------------- */
.xp-search { position: relative; margin: 0 0 .6rem; }
.xp-search input { width: 100%; box-sizing: border-box; min-height: 2.3rem; padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font: var(--t-small)/1.4 var(--sans); }
.xp-search input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.xp-search-results { margin: .3rem 0 0; padding: .3rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); max-height: 16rem; overflow-y: auto; }
.xp-search-results[hidden] { display: none; }
.atlas-search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.atlas-search-result { display: grid; gap: .05rem; width: 100%; padding: .45rem .55rem; border: 1px solid transparent; border-radius: var(--radius); background: transparent; text-align: left; cursor: pointer; }
.atlas-search-result:hover, .atlas-search-result:focus-visible { border-color: var(--fg); background: var(--surface-raised); }
.atlas-search-kind { color: var(--ink-3); font: 600 .66rem/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.atlas-search-name { font-weight: 600; font-size: .9rem; }
.atlas-search-context { color: var(--ink-3); font-size: .76rem; }
.xp-link { padding: 0; border: 0; background: none; color: var(--fg-2); font: 600 var(--t-small)/1.4 var(--sans); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.xp-link:hover { color: var(--fg); text-decoration-color: var(--accent); }
.xp-link:disabled { opacity: .4; cursor: default; text-decoration: none; }
.xp-note { margin: .4rem 0 0; color: var(--ink-3); font-size: var(--t-small); line-height: 1.45; max-width: 62ch; }
.xp-note:empty { display: none; }

.xp-layer-list { display: grid; gap: .1rem; }
.xp-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .45rem; min-height: 2.1rem; padding: .1rem .3rem; border-radius: var(--radius-sm); font: 600 .88rem/1.3 var(--sans); color: var(--ink); }
.xp-group > summary > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.xp-group > summary:hover { background: var(--surface); }
.xp-group > summary::-webkit-details-marker, .xp-browse > summary::-webkit-details-marker, .xp-more > summary::-webkit-details-marker { display: none; }
.xp-group > summary::before, .xp-browse > summary::before, .xp-more > summary::before { content: ""; flex: none; width: .36rem; height: .36rem; margin-top: -.12rem; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s; }
.xp-group[open] > summary::before, .xp-browse[open] > summary::before, .xp-more[open] > summary::before { transform: rotate(45deg); margin-top: -.25rem; }
.xp-group > summary:hover, .xp-browse > summary:hover, .xp-more > summary:hover { color: var(--fg); }
.xp-group > summary:focus-visible, .xp-browse > summary:focus-visible, .xp-more > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.xp-count { color: var(--ink-3); font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .02em; white-space: nowrap; }
.xp-count:empty { display: none; }
.xp-group[open] { padding-bottom: .35rem; }
.xp-group--reference { margin-top: .5rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.xp-group--reference > summary { color: var(--ink-2); }
.xp-subgroup { margin: .15rem 0 .2rem; padding-left: .55rem; border-left: 2px solid var(--line); }
.xp-subgroup h4 { margin: .15rem 0 .1rem .35rem; font: 600 .74rem/1.3 var(--sans); color: var(--ink-3); }
.xp-layer { border-radius: var(--radius-sm); }
.xp-layer.is-on { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); margin: .1rem 0; }
.xp-layer-line { display: grid; grid-template-columns: 1.1rem .8rem minmax(0, 1fr) auto auto; gap: .45rem; align-items: center; min-height: 2.05rem; padding: .1rem .3rem .1rem .55rem; }
.xp-layer:hover { background: var(--surface); }
.xp-layer:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.xp-layer input { margin: 0; width: 1rem; height: 1rem; accent-color: var(--accent); }
.xp-layer-text { min-width: 0; font-size: .88rem; line-height: 1.25; cursor: pointer; }
.xp-layer.is-on .xp-layer-text { font-weight: 600; }
.xp-layer-text small { display: block; margin-top: .1rem; color: var(--ink-3); font-size: .74rem; line-height: 1.35; }
.xp-layer-text small.is-unavailable { color: var(--ink-2); font-weight: 600; }
.xp-inview { color: var(--ink-3); font: 600 var(--t-micro)/1.3 var(--sans); white-space: nowrap; }
.xp-inview:empty { display: none; }
.xp-swatch { display: block; width: .8rem; height: .8rem; border-radius: 2px; border: 1px solid rgba(30, 28, 26, .18); background: var(--swatch); }
.xp-swatch--line { height: .3rem; border-radius: .15rem; }
.xp-swatch--point { border-radius: 50%; }
.xp-swatch--dashed { background: repeating-linear-gradient(90deg, var(--swatch) 0 .22rem, transparent .22rem .4rem); }
.xp-layer-controls { padding: .1rem .5rem .55rem 2.95rem; display: grid; gap: .45rem; }

/* chips: fuel types, filter values */
.xp-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.xp-chip { min-height: 1.7rem; padding: .15rem .55rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-raised); color: var(--ink-2); font: 600 var(--t-micro)/1.2 var(--sans); cursor: pointer; }
.xp-chip:hover { border-color: var(--fg); color: var(--fg); }
.xp-chip[aria-pressed="true"] { background: var(--frame); border-color: var(--frame); color: var(--on-frame); }
.xp-chip-count { opacity: .7; font-weight: 500; }

/* the key is the control */
.xp-key-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; }
.xp-key-title { font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.xp-key-tools { display: flex; gap: .55rem; }
.xp-key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .05rem; }
.xp-key-row { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; width: 100%; min-height: 1.6rem; padding: .05rem .3rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: .8rem/1.3 var(--sans); text-align: left; }
.xp-key-toggle { cursor: pointer; }
.xp-key-toggle:hover { background: var(--surface-raised); }
.xp-key-toggle[aria-pressed="false"] { color: var(--ink-3); }
.xp-key-toggle[aria-pressed="false"] .atlas-swatch { opacity: .25; }
.xp-key-toggle[aria-pressed="false"] > span:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.xp-key-count { color: var(--ink-3); font: 600 var(--t-micro)/1.3 var(--sans); }
.atlas-swatch { display: block; width: 1.05rem; height: 1.05rem; background: var(--swatch); }
.atlas-swatch--fill { border: 1px solid rgba(30, 28, 26, .35); border-radius: 2px; }
.atlas-swatch--line { height: .28rem; border-radius: .14rem; }
.atlas-swatch--line-thick { height: .45rem; border-radius: .22rem; }
.atlas-swatch--line-thin { height: .18rem; border-radius: .09rem; }
.atlas-swatch--line-dashed { height: .28rem; border-radius: .14rem; background: repeating-linear-gradient(90deg, var(--swatch) 0 .28rem, transparent .28rem .5rem); }
.atlas-swatch--point, .atlas-swatch--point-large { width: .95rem; height: .95rem; border-radius: 50%; border: 2px solid var(--surface); }
.atlas-swatch--point-medium { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--surface); }
.atlas-swatch--point-small { width: .62rem; height: .62rem; border-radius: 50%; border: 2px solid var(--surface); }
.atlas-swatch--label { width: 1.05rem; height: .7rem; border-radius: 2px; background: transparent; border: 1px dashed var(--swatch); }

/* filters */
.xp-filters { display: grid; gap: .4rem; }
.xp-field { display: grid; gap: .2rem; }
.xp-field > span { font: 600 var(--t-micro)/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.xp-field select, .xp-field input { width: 100%; max-width: none; box-sizing: border-box; min-height: 2rem; padding: .25rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-raised); font: var(--t-small)/1.3 var(--sans); }
.xp-result-list { display: grid; gap: .3rem; margin-top: .4rem; }
.xp-result-list .result-row { display: grid; gap: .1rem; margin: 0; padding: .55rem .7rem; border-radius: var(--radius); text-align: left; cursor: pointer; }
.xp-result-list .result-row .rr-title { font-size: .92rem; }
.xp-result-list .result-row.is-selected { border-color: var(--accent); border-left-width: 3px; box-shadow: none; }

/* --- the detail rail: the full record, a cluster's list, a stack, about --- */
.xp-card-body > h3 { margin: 0 0 .3rem; font: 600 1.3rem/1.15 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.xp-card-body > p { margin: .5rem 0; }
.xp-where { margin: 0 0 .7rem !important; color: var(--ink-3); font: 600 var(--t-micro)/1.4 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.atlas-summary { margin: 0 0 .7rem; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.xp-lead { display: grid; gap: .45rem; margin: 0 0 .8rem; }
.xp-lead > div { display: grid; gap: .05rem; }
.xp-lead dt { margin: 0; font: 600 var(--t-micro)/1.4 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.xp-lead dd { margin: 0; font: 500 1.02rem/1.35 var(--serif); color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.xp-prose { margin: 0 0 .8rem; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.xp-muted { color: var(--ink-3); }
.xp-prices { width: 100%; border-collapse: collapse; margin: 0 0 .5rem; font-size: .9rem; }
.xp-prices th, .xp-prices td { padding: .3rem .35rem .3rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; vertical-align: baseline; }
.xp-prices td:nth-child(2) { font: 600 1rem/1.2 var(--serif); white-space: nowrap; }
.xp-prices td:nth-child(2) small { font: 500 var(--t-micro)/1 var(--sans); color: var(--ink-3); }
.xp-prices td:last-child { font-size: var(--t-micro); text-align: right; }
.xp-prices tr.is-chosen th, .xp-prices tr.is-chosen td { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); }
.xp-prices tr.is-chosen th { padding-left: .4rem; }
.xp-nearby { margin: .7rem 0 .4rem; }
.xp-nearby ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.xp-nearby-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: baseline; width: 100%; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; font: var(--t-small)/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.xp-nearby-item:hover { border-color: var(--fg); }
.xp-nearby-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-nearby-dist { color: var(--ink-3); font-size: var(--t-micro); }
.xp-nearby-price { font: 600 .95rem/1.2 var(--serif); }
.xp-nearby-price small { font: 600 var(--t-micro)/1 var(--sans); color: var(--ink-3); }
.xp-more { margin: .4rem 0 .6rem; }
.xp-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; min-height: 1.8rem; font: 600 .84rem/1.3 var(--sans); color: var(--ink-2); }
.atlas-facts { margin: .3rem 0 .6rem; border-top: 1px solid var(--line); }
.atlas-facts .deflist, .xp-card-body .deflist { display: block; font-size: .9rem; }
.atlas-facts .deflist dt, .xp-card-body .deflist dt { margin: 0; padding-top: .4rem; font: 600 var(--t-micro)/1.5 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.atlas-facts .deflist dd, .xp-card-body .deflist dd { margin: 0; padding: .05rem 0 .4rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; white-space: pre-line; }
.atlas-interpretation { margin: .8rem 0; padding: .1rem 0 .1rem .8rem; border-left: 3px solid var(--accent); }
.atlas-interpretation h4 { margin: 0 0 .25rem; font: 600 .84rem/1.3 var(--sans); }
.atlas-interpretation p { margin: 0 0 .3rem; font-size: .92rem; line-height: 1.5; }
.atlas-when { margin: .6rem 0 .2rem; color: var(--ink-2); font: 600 .82rem/1.4 var(--sans); }
.map-note { font: var(--t-small)/1.5 var(--sans); color: var(--ink-3); margin: .5rem 0 0; max-width: 62ch; }
.atlas-limitation { margin: .4rem 0 .6rem; padding-left: .8rem; border-left: 2px solid var(--line-strong); }
.xp-actions { margin: .4rem 0 .8rem; }
.xp-also, .xp-browse-block { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.xp-stack { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .25rem; }
.xp-stack-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.xp-stack-item > summary { display: grid; gap: .05rem; padding: .5rem .6rem; cursor: pointer; font: var(--t-body)/1.3 var(--sans); color: var(--ink); list-style: none; }
.xp-stack-item > summary::-webkit-details-marker { display: none; }
.xp-stack-item > summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.xp-stack-item[open] { border-color: var(--fg); }
.xp-stack-body { padding: 0 .6rem .6rem; border-top: 1px solid var(--line); }
.xp-stack-body > h3 { display: none; }
.xp-also h4, .xp-browse-block h4, .atlas-related h4, .atlas-links h4, .map-related-story h4, .xp-card-body h4, .xp-nearby h4 { margin: 0 0 .35rem; font: 600 .84rem/1.3 var(--sans); }
.xp-also ul, .xp-choose, .xp-browse-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.xp-choose { margin-top: .6rem; }
.xp-also-item, .xp-browse-item { display: grid; gap: .05rem; width: 100%; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; font: var(--t-small)/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.xp-also-item:hover, .xp-browse-item:hover { border-color: var(--fg); }
.xp-also-kind { color: var(--ink-3); font: 600 .66rem/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.xp-browse-item small { color: var(--ink-3); font-size: .76rem; }
.xp-browse-item strong { color: var(--brick-deep); }
.xp-browse { margin-top: .8rem; }
.xp-browse > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; min-height: 1.8rem; font: 600 .84rem/1.3 var(--sans); color: var(--ink-2); }
.xp-browse-list { margin-top: .4rem; }
.atlas-related ul, .atlas-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.atlas-related, .atlas-links { margin: .5rem 0 .6rem; }
.xp-card-body .card-link { font-size: .9rem; }
.xp-card-body button.card-link { border-top: 0; border-left: 0; border-right: 0; background: none; padding: 0 0 1px; color: var(--fg-2); cursor: pointer; }
.map-related-story { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.atlas-provenance { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.atlas-provenance summary { cursor: pointer; font: 600 .84rem/1.3 var(--sans); color: var(--ink-2); }
.atlas-provenance summary:hover { color: var(--fg); }
.atlas-provenance--open h4 { margin-top: 0; }
.atlas-provenance .deflist { margin-top: .5rem; }
.atlas-source-list { margin: .25rem 0 .6rem; padding-left: 1.1rem; }
.atlas-source-list li + li { margin-top: .3rem; }
.atlas-source-note { color: var(--ink-3); }
.atlas-limitations { margin: .4rem 0 0; padding-left: 1.1rem; }
.atlas-limitations li { margin: .2rem 0; }
.xp-card-body ul.map-note { padding-left: 1.1rem; }
.xp-card-body .rs-analysis, .xp-detail-scroll .rs-analysis { margin-top: 1rem; }
.placeholder { color: var(--ink-2); }

/* --- tablet: narrower rails, one at a time -------------------------------- */
@media (max-width: 1099px) {
  .xp-app { --xp-rail-w: 18rem; --xp-detail-w: 20rem; }
  .xp-bar { gap: .4rem .7rem; }
  .xp-views-nav .xp-bar-label { display: none; }
}

/* --- phone: the rails become sheets; the map keeps the whole width -------- */
@media (max-width: 759px) {
  .xp-app { min-height: 0; }
  .xp-bar { flex-wrap: wrap; gap: .3rem .6rem; padding: .35rem .75rem .4rem; }
  .xp-h1 { border-right: 0; padding-right: 0; font-size: .95rem; }
  #xp-rail-toggle { display: none; }
  .xp-views-nav { flex: 1 1 100%; order: 3; }
  .xp-views { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); padding-right: 1.5rem; }
  .xp-view, .xp-tool { min-height: 2.5rem; }
  .xp-body { grid-template-columns: minmax(0, 1fr); }
  .xp-map { grid-column: 1; }
  .xp-rail, .xp-detail {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; width: auto; max-height: 62%;
    border: 0; border-top: 1px solid var(--line-strong); border-radius: 12px 12px 0 0; box-shadow: var(--shadow-overlay);
  }
  .xp-detail { max-height: 56%; }
  #xp-rail-close { display: block; }
  .xp-rail-head, .xp-detail-head { padding: .95rem .85rem .5rem; }
  .xp-rail-head::before, .xp-detail-head::before { content: ""; position: absolute; top: .35rem; left: 50%; width: 2.2rem; height: .22rem; margin-left: -1.1rem; border-radius: .11rem; background: var(--line-strong); }
  .xp-rail-scroll, .xp-detail-scroll { padding: .7rem .85rem 1rem; }
  .xp-sheet-bar { display: flex; gap: .3rem; position: absolute; z-index: 5; left: .6rem; bottom: .6rem; }
  .xp-sheet-bar .xp-tool { min-height: var(--touch, 2.75rem); padding-inline: .85rem; box-shadow: var(--shadow-2); }
  .xp-sheet-bar .xp-tool[hidden] { display: none; }
  .xp-quick { display: block; position: absolute; z-index: 5; left: .6rem; right: .6rem; bottom: 3.6rem; max-height: 34%; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
  .xp-quick[hidden] { display: none; }
  .xp-quick .xp-quick-card { min-width: 0; }
  .xp-timeline { left: .6rem; right: .6rem; bottom: 3.6rem; max-width: none; min-width: 0; grid-template-columns: auto minmax(0, 1fr); }
  .xp-time-window { grid-column: 1 / -1; grid-row: 4; }
  .xp-body:has(.xp-quick:not([hidden])) .xp-timeline { display: none; }
  .xp-time-step { width: 2.2rem; height: 2.2rem; }
  .xp-map .maplibregl-ctrl-bottom-right { margin-bottom: 6.4rem; }
  .xp-body:has(.xp-rail:not([hidden])) .xp-sheet-bar,
  .xp-body:has(.xp-detail:not([hidden])) .xp-sheet-bar,
  .xp-body:has(.xp-rail:not([hidden])) .xp-timeline,
  .xp-body:has(.xp-detail:not([hidden])) .xp-timeline,
  .xp-body:has(.xp-rail:not([hidden])) .xp-quick,
  .xp-body:has(.xp-detail:not([hidden])) .xp-quick { display: none; }
  .xp-body:has(.xp-rail:not([hidden])) .maplibregl-ctrl-bottom-left,
  .xp-body:has(.xp-detail:not([hidden])) .maplibregl-ctrl-bottom-left,
  .xp-body:has(.xp-rail:not([hidden])) .maplibregl-ctrl-bottom-right,
  .xp-body:has(.xp-detail:not([hidden])) .maplibregl-ctrl-bottom-right { display: none; }
  .xp-layer-controls { padding-left: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-view, .xp-tool, .xp-close, .xp-group > summary::before, .xp-browse > summary::before, .xp-more > summary::before { transition: none !important; }
}


/* --- Road Safety analysis -------------------------------------------------
   Lives inside the existing Details panel rather than a new surface, so
   ordinary layer browsing is untouched: nothing here renders until a reader
   asks for an analysis. Severity is carried by position and by text in every
   place it is carried by colour. */
.rs-analysis { margin-top:1rem; padding-top:.9rem; border-top:2px solid var(--frame); }
.rs-head h3 { margin:.15rem 0 .3rem; font-size:1.1rem; }
.rs-count { margin:0 0 .6rem; font:750 1.05rem/1.3 var(--mono); color:var(--frame); }
.rs-section { padding-top:.85rem; margin-top:.85rem; border-top:1px solid var(--line); }
.rs-section h4 { margin:0 0 .5rem; font-size:.98rem; }
.rs-scope-row { display:flex; flex-wrap:wrap; gap:.35rem; }
.rs-scope { padding:.45rem .65rem; min-height:var(--touch); border:1px solid var(--line-strong); border-radius:.3rem; background:var(--surface-raised); color:var(--ink-2); font:600 .82rem/1.2 var(--sans); cursor:pointer; }
.rs-scope:hover { border-color:var(--fg); color:var(--fg); }
.rs-scope.is-on { border-color:var(--frame); background:var(--frame); color:var(--on-frame); }
.rs-check:focus-within { box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }
.rs-field-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.rs-field-row .field input { width:100%; max-width:none; }
.rs-fieldset { margin:.75rem 0 0; padding:0; border:0; }
.rs-fieldset legend { padding:0; margin-bottom:.35rem; font:600 var(--t-micro)/1.5 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.rs-check { display:flex; gap:.5rem; align-items:center; min-height:2rem; font-size:.86rem; color:var(--ink-2); cursor:pointer; }
.rs-check input { accent-color:var(--accent); }
.rs-measures { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin:0; }
.rs-measures > div { padding:.6rem .65rem; border-top:3px solid var(--fg); background:var(--surface-raised); }
.rs-measures dt { margin:0; font:var(--t-micro)/1.4 var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.rs-measures dd { margin:.2rem 0 0; font:750 1.3rem/1 var(--mono); color:var(--frame); }
.rs-key { display:flex; flex-wrap:wrap; gap:.15rem .8rem; margin:.45rem 0 .2rem; padding:0; list-style:none; font:var(--t-micro)/1.5 var(--mono); color:var(--ink-3); }
.rs-key li { display:flex; gap:.3rem; align-items:center; }
.rs-key .rs-bar-part { width:.7rem; height:.7rem; flex:none; border-radius:.1rem; }
.rs-chart { display:grid; gap:.15rem; margin:.5rem 0; }
.rs-bar-row { display:grid; grid-template-columns:2.7rem minmax(0,1fr) 2.2rem; gap:.45rem; align-items:center; width:100%; min-height:1.9rem; padding:.15rem .25rem; border:1px solid transparent; border-radius:.25rem; background:none; text-align:left; cursor:pointer; }
.rs-bar-row:hover { background:var(--surface-raised); border-color:var(--line); }
.rs-bar-row.is-on { border-color:var(--frame); background:var(--surface-raised); box-shadow:inset 3px 0 var(--frame); }
.rs-bar-year,.rs-bar-count { font:var(--t-micro)/1.4 var(--mono); color:var(--ink-2); }
.rs-bar-count { text-align:right; }
.rs-bar-track { height:.85rem; background:var(--surface-sunk); border-radius:.1rem; }
.rs-bar { display:flex; height:100%; min-width:2px; border-radius:.1rem; overflow:hidden; }
.rs-bar-part--fatal { background:var(--frame); }
.rs-bar-part--serious-injury { background:var(--data-2); }
.rs-bar-part--other-injury { background:var(--data-5); }
.rs-chart-active { margin:.4rem 0 0; font:600 var(--t-small)/1.4 var(--sans); color:var(--ink-2); }
.rs-offer { padding-top:.9rem; margin-top:.9rem; border-top:2px solid var(--frame); }
.rs-evidence .deflist { margin-bottom:.5rem; }
@media (max-width:760px) {
  .rs-measures,.rs-field-row { grid-template-columns:1fr; }
  .rs-scope { flex:1 1 8.5rem; }
}
@media (prefers-reduced-motion:reduce) {
  .rs-bar,.rs-scope,.rs-bar-row { transition:none; }
}

@media (prefers-reduced-motion:reduce) { .button--quiet { transition:none !important; } }
.spatial-embed {
  border: 1px solid var(--line, #d8d4ca);
  background: #f8f7f0;
  padding: .75rem;
}

.spatial-embed-map {
  min-height: 28rem;
  background: #e8ebe5;
}

.spatial-embed-status {
  margin: .55rem 0 0;
  color: var(--muted);
  font-size: .88rem;
}
.spatial-embed-fallback {
  margin: .75rem 0 0;
  padding: .7rem .8rem;
  border-left: 3px solid var(--brick, #9b4f3d);
  background: var(--surface-raised, #fffdf8);
  color: var(--ink-2, #3f4b4d);
}
.spatial-story-embed { margin: 1rem 0; }
.spatial-story-controls { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.65rem; }
.spatial-story-controls .button.is-active { background:var(--ink, #1b2324); color:var(--paper, #f8f7f0); }
.map-related-story { border-top:1px solid var(--line, #d8d4ca); margin-top:.9rem; padding-top:.7rem; }
@media (max-width:760px) {
  .spatial-embed-map { min-height:22rem; }
  .spatial-story-controls { gap:.35rem; }
  .spatial-story-controls .button { min-height:2.65rem; }
}

/* ==========================================================================
   Civic stories

   The page problem this solves is competition, not decoration: a civic story
   has an opening, a chronology, a ledger, a process trail, a reconciliation
   and a gap register, and if all six read at the same visual level none of
   them reads at all. So the rhythm alternates deliberately — an editorial
   opening, a narrow proposition column, a full-width chronology with a real
   spine, tables where tables are honest, one dark section where the story
   has a physical cause, and a quiet gap register at the end.

   Evidence is a closed native <details> everywhere. It costs one line, it is
   keyboard-reachable, it works without JavaScript, and it never outweighs
   the sentence it supports.
   ========================================================================== */

.civic-story { padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.cs-crumb { margin-top: 1rem; }

/* --- opening: orientation, not a second current-state panel --------------- */

.cs-opening { padding: clamp(.8rem, 2vw, 1.4rem) 0 clamp(1.6rem, 3vw, 2.4rem); }
.cs-opening h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -.035em;
  margin: .3rem 0 0;
  max-width: 18ch;
}
.cs-deck {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1.7vw, 1.42rem);
  line-height: 1.42;
  color: var(--ink-2);
  max-width: 46ch;
  margin: .9rem 0 0;
  text-wrap: pretty;
}
.cs-opening-grid { display: grid; gap: clamp(1.2rem, 3vw, 2.6rem); margin-top: clamp(1.3rem, 2.6vw, 2rem); }
@media (min-width: 901px) {
  .cs-opening-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
}
.cs-now { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.cs-now-label {
  display: block;
  font: 600 var(--t-micro)/1.4 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brick-deep);
  margin-bottom: .3rem;
}
.cs-why { margin: .9rem 0 0; color: var(--ink-2); max-width: 52ch; }
.cs-vintage { margin: .9rem 0 0; font: var(--t-micro)/1.6 var(--mono); color: var(--ink-3); }

.cs-openmap { margin: 0; }
.cs-openmap .cs-embed { margin: 0; }
.cs-openmap .spatial-embed-map { min-height: 18rem; }
.cs-openmap figcaption { margin-top: .6rem; font-size: var(--t-small); color: var(--ink-2); }
.cs-openmap-alt { display: block; margin-top: .35rem; color: var(--ink-3); }
.cs-openmap .card-link { display: inline-block; margin-top: .45rem; }

.cs-facts {
  display: grid;
  gap: 0;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  border-top: 2px solid var(--frame);
}
@media (min-width: 721px) { .cs-facts { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.cs-fact { padding: .9rem 1.1rem .9rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 721px) { .cs-fact + .cs-fact { padding-left: 1.1rem; border-left: 1px solid var(--line); } }
.cs-fact dt { font: 600 var(--t-micro)/1.4 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.cs-fact dd { margin: .35rem 0 0; }
.cs-fact-value { display: block; font-family: var(--serif); font-size: clamp(1.28rem, 2vw, 1.6rem); line-height: 1.12; letter-spacing: -.02em; }
.cs-fact-note { display: block; margin-top: .35rem; font-size: var(--t-small); color: var(--ink-2); }

/* --- shared section rhythm ------------------------------------------------ */

.civic-story .cs-section { border-top: 1px solid var(--line-strong); }
.civic-story .gh-section--full { grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.civic-story .gh-section--full .gh-head h2 { max-width: 26ch; }
.civic-story .gh-section--full .gh-head > p:not(.eyebrow) { max-width: 68ch; }
.cs-body { max-width: 62ch; }
.cs-caveat {
  margin: .55rem 0 0;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
  border-left: 2px solid var(--absent-line);
  padding-left: .7rem;
  max-width: 62ch;
}
.cs-caveat--inline { display: block; margin-top: .4rem; }

/* --- record, money and evidence state ------------------------------------- */

.cs-rs, .cs-ms, .cs-outcome, .cs-tag, .cs-state {
  display: inline-block;
  font: 600 var(--t-micro)/1.5 var(--sans);
  letter-spacing: .04em;
  padding: .12rem .45rem;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--ink-2);
  background: var(--surface);
  white-space: nowrap;
}
/* Family is carried by a left rule as well as by tint, so no distinction
   here depends on colour alone. */
.cs-rs { border-left-width: 3px; white-space: normal; }
.cs-rs--intent { border-left-color: var(--data-5); }
.cs-rs--instrument { border-left-color: var(--data-1); }
.cs-rs--money { border-left-color: var(--data-3-deep); }
.cs-rs--outcome { border-left-color: var(--data-4); }
.cs-rs--context { border-left-color: var(--absent-line); }
.cs-ms { border-left-width: 3px; white-space: normal; }
.cs-ms--public-money { border-left-color: var(--data-1); }
.cs-ms--commitment { border-left-color: var(--data-4); }
.cs-ms--private-proposal { border-left-color: var(--data-3-deep); }
.cs-ms--forecast { border-left-color: var(--absent-line); border-style: dashed; }
.cs-ms--asset { border-left-color: var(--data-2); }
.cs-ms--scale { border-left-color: var(--data-5); }
.cs-ms--undisclosed { border-left-color: var(--absent-line); border-style: dashed; color: var(--absent-ink); }
.cs-ms--contract { border-left-color: var(--data-7); }
.cs-state--supported, .cs-state--inference { border-color: var(--down-line); background: var(--down-wash); color: var(--down-ink); }
.cs-state--disputed { border-color: var(--down-line); background: var(--down-wash); color: var(--down-ink); font-style: italic; }
.cs-state--unestablished { border-style: dashed; border-color: var(--absent-line); color: var(--absent-ink); background: transparent; }
.cs-outcome { text-transform: lowercase; }
.cs-outcome--delivered { border-left: 3px solid var(--data-4); }
.cs-outcome--superseded, .cs-outcome--withdrawn, .cs-outcome--not-progressed { border-left: 3px dashed var(--absent-line); color: var(--absent-ink); }
.cs-outcome--current-proposal, .cs-outcome--remains-in-planning, .cs-outcome--evolved-into { border-left: 3px solid var(--data-1); }

.cs-ev { display: inline-block; margin-top: .45rem; max-width: 100%; }
.cs-ev > summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  font: 500 var(--t-micro)/1.6 var(--sans);
  letter-spacing: .05em;
  color: var(--ink-3);
  list-style: none;
  padding: .1rem .1rem .1rem 0;
  min-height: 1.6rem;
}
.cs-ev > summary::-webkit-details-marker { display: none; }
.cs-ev > summary::before { content: "\25B8"; font-size: .7em; color: var(--brick-deep); }
.cs-ev[open] > summary::before { content: "\25BE"; }
.cs-ev > summary:hover { color: var(--ink); }
.cs-ev-label { text-transform: uppercase; }
.cs-ev-count { font-family: var(--mono); }
.cs-ev-body {
  margin-top: .4rem;
  padding: .6rem .75rem;
  background: var(--surface-sunk);
  border-left: 2px solid var(--line-strong);
  font-size: var(--t-small);
}
.cs-ev-basis { margin: 0 0 .4rem; color: var(--ink-2); }
.cs-ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cs-ev-list li { line-height: 1.45; }
.cs-ev-meta { display: block; font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); }
.cs-ev-register.is-outside { color: var(--absent-ink); }

/* --- proposition ---------------------------------------------------------- */

.cs-props { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; counter-reset: prop; }
.cs-prop { padding-left: 2.2rem; position: relative; max-width: 66ch; }
.cs-prop::before {
  counter-increment: prop;
  content: counter(prop);
  position: absolute; left: 0; top: .1rem;
  font: 600 var(--t-small)/1.4 var(--mono);
  color: var(--brick-deep);
}
.cs-prop h3 { font-size: 1.18rem; letter-spacing: -.015em; }
.cs-prop p { margin: .35rem 0 0; color: var(--ink-2); }
.cs-prop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }

/* --- chronology: a real spine, with scale that means something ------------ */

.cs-eras { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
.cs-era { display: grid; gap: 1rem; }
@media (min-width: 901px) {
  .cs-era { grid-template-columns: minmax(200px, 15rem) minmax(0, 1fr); gap: clamp(2rem, 3vw, 3rem); }
  /* Clear the sticky stack (masthead and local row), whose height the shell
     measures into --chrome-h. */
  .cs-era-head { position: sticky; top: calc(var(--chrome-h) + 12px); align-self: start; }
}
.cs-era-label { font-size: clamp(1.15rem, 1.7vw, 1.42rem); letter-spacing: -.02em; }
.cs-era-span { margin: .2rem 0 0; font: var(--t-micro)/1.5 var(--mono); color: var(--brick-deep); letter-spacing: .08em; }
.cs-era-summary { margin: .55rem 0 0; font-size: var(--t-small); color: var(--ink-2); }
.cs-era-body {
  border-left: 2px solid var(--line-strong);
  padding-left: clamp(1rem, 2vw, 1.6rem);
  display: grid;
  gap: 1.1rem;
}
.cs-event { position: relative; max-width: 68ch; }
/* One marker per event, sized by importance. There is no icon vocabulary to
   learn: a big filled dot is a turning point, a small hollow one is not. */
.cs-event::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1rem, 2vw, 1.6rem) - 6px);
  top: .55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 2px solid var(--line-strong);
}
.cs-event--lead::before { width: 15px; height: 15px; left: calc(-1 * clamp(1rem, 2vw, 1.6rem) - 9px); border-color: var(--brick-deep); background: var(--brick); }
.cs-event-when { margin: 0; font: 600 var(--t-micro)/1.5 var(--mono); letter-spacing: .07em; color: var(--ink-3); text-transform: uppercase; }
.cs-event-title { margin: .18rem 0 0; font-size: 1.05rem; letter-spacing: -.012em; }
.cs-event--lead .cs-event-title { font-size: clamp(1.24rem, 2vw, 1.6rem); line-height: 1.16; }
.cs-event--lead .cs-event-when { color: var(--brick-deep); }
.cs-event-detail { margin: .4rem 0 0; color: var(--ink-2); font-size: var(--t-small); }
.cs-event--lead .cs-event-detail { font-size: 1rem; }
.cs-event-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 0; }
.cs-supporting > summary {
  cursor: pointer;
  font: 500 var(--t-small)/1.5 var(--sans);
  color: var(--ink-2);
  padding: .45rem 0;
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.cs-supporting > summary::marker { color: var(--brick-deep); }
.cs-supporting-body { display: grid; gap: 1rem; padding-top: .4rem; }

/* --- tables: lineage, ledger, current state ------------------------------- */

.cs-lineage th[scope="row"], .cs-ledger th[scope="row"], .cs-state-table th[scope="row"] { vertical-align: top; padding-right: 1rem; }
.cs-lineage td, .cs-ledger td, .cs-state-table td { vertical-align: top; text-align: left; padding-right: 1rem; font-size: var(--t-small); }
.cs-lineage th[scope="col"], .cs-ledger th[scope="col"], .cs-state-table th[scope="col"] { text-align: left; }
.cs-lineage, .cs-ledger, .cs-state-table { min-width: 46rem; }
.cs-lineage-group th {
  padding-top: 1.1rem;
  font: 600 var(--t-micro)/1.5 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brick-deep);
  border-bottom: 1px solid var(--frame);
}
.cs-lineage-ev { white-space: normal; }
.cs-amount { display: block; font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; }
.cs-amount-label { display: block; margin-top: .2rem; font-size: var(--t-small); color: var(--ink-2); font-weight: 400; }
.cs-verified { font-family: var(--mono); font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; }
.cs-noadd {
  margin: 0 0 1.2rem;
  padding: .85rem 1rem;
  background: var(--surface-sunk);
  border-left: 3px solid var(--brick);
  font-size: var(--t-small);
  line-height: 1.6;
  max-width: 70ch;
}
.cs-delivered { margin-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--line-strong); padding-top: 1.1rem; }
.cs-delivered h3 { font-size: 1.18rem; }
.cs-delivered > p { margin: .4rem 0 .9rem; color: var(--ink-2); font-size: var(--t-small); max-width: 62ch; }
.cs-delivered-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
@media (min-width: 901px) { .cs-delivered-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; } }
.cs-delivered-list li { border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.cs-delivered-name { display: block; font-family: var(--serif); font-size: 1.02rem; }
.cs-delivered-note { display: block; font-size: var(--t-small); color: var(--ink-2); margin-top: .15rem; }

/* --- public-process trail ------------------------------------------------- */

.cs-questions {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: .35rem;
  counter-reset: q;
  max-width: 62ch;
}
.cs-questions li {
  padding-left: 1.8rem;
  position: relative;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink-2);
}
.cs-questions li::before {
  counter-increment: q;
  content: counter(q);
  position: absolute; left: 0; top: .15rem;
  font: 600 var(--t-micro)/1.5 var(--mono);
  color: var(--brick-deep);
}
.cs-trail { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.cs-trail-item { display: grid; gap: .3rem; border-top: 1px solid var(--line); padding-top: .9rem; }
@media (min-width: 721px) { .cs-trail-item { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.4rem; } }
.cs-trail-when { margin: 0; font: 600 var(--t-micro)/1.6 var(--mono); letter-spacing: .06em; color: var(--brick-deep); text-transform: uppercase; }
.cs-trail-main h3 { font-size: 1.06rem; letter-spacing: -.012em; }
.cs-trail-main p { margin: .35rem 0 0; color: var(--ink-2); font-size: var(--t-small); max-width: 66ch; }
.cs-trail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }

/* --- constraints: the one dark section ------------------------------------ */

/* Bleeds past the text column, but never past the wrap's own gutter — a vw
   bleed would overshoot by the scrollbar width and give the page a
   horizontal scroll. The bleed is the shared --gutter, so it reaches exactly
   the viewport edge until the frame's 1200px maximum is cleared. */
.cs-constraints {
  background: var(--frame);
  color: var(--on-frame);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  border-top: 0;
}
.cs-constraints .eyebrow { color: #EFC27A; }
.cs-constraints h2, .cs-constraints h3 { color: var(--on-frame); }
.cs-constraints .gh-head > p:not(.eyebrow), .cs-constraints p { color: var(--on-frame-2); }
.cs-constraints .cs-caveat { border-left-color: var(--on-frame-2); color: var(--on-frame-2); }
.cs-constraints .cs-tag { background: transparent; border-color: var(--on-frame-2); color: var(--on-frame); }
.cs-constraints .cs-ev > summary { color: var(--on-frame-2); }
.cs-constraints .cs-ev > summary::before { color: #EFC27A; }
.cs-constraints .cs-ev > summary:hover { color: var(--on-frame); }
.cs-constraints .cs-ev-body { background: rgba(255, 255, 255, .07); border-left-color: var(--on-frame-2); }
.cs-constraints .cs-ev-body a { color: #EFC27A; }
.cs-constraints .cs-ev-meta { color: var(--on-frame-2); }
.cs-constraint-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
@media (min-width: 901px) { .cs-constraint-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); } }
.cs-constraint-list h3 { font-size: 1.1rem; letter-spacing: -.012em; }
.cs-constraint-list p { margin: .35rem 0 0; font-size: var(--t-small); }
.cs-constraint-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* --- open questions: restrained, never a warning dashboard ---------------- */

.cs-openq-group + .cs-openq-group { margin-top: 1.6rem; }
.cs-openq-group h3 { font-size: 1.1rem; letter-spacing: -.012em; }
.cs-openq-note { margin: .25rem 0 .7rem; font-size: var(--t-small); color: var(--ink-3); max-width: 60ch; }
.cs-openq-list { margin: 0; display: grid; gap: .85rem; }
.cs-openq-list > div { border-left: 2px dashed var(--absent-line); padding-left: .85rem; }
.cs-openq-list dt { font-family: var(--serif); font-size: 1.02rem; line-height: 1.3; }
.cs-openq-list dd { margin: .3rem 0 0; font-size: var(--t-small); color: var(--ink-2); max-width: 66ch; }

/* --- evidence gateway ----------------------------------------------------- */

.cs-gateway { border-top: 2px solid var(--frame); }
.cs-gateway-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
@media (min-width: 721px) { .cs-gateway-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.cs-gateway-group h3 { font-size: 1.02rem; letter-spacing: -.01em; padding-bottom: .4rem; border-bottom: 1px solid var(--line-strong); }
.cs-gateway-note { margin: .45rem 0 .2rem; font-size: var(--t-micro); color: var(--ink-3); }
.cs-gateway-group ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .65rem; }
.cs-gateway-group li { line-height: 1.4; font-size: var(--t-small); }
.cs-gateway-meta { display: block; font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); }
.cs-related { margin-top: 1.6rem; border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.cs-related h3 { font-size: 1.02rem; }
.cs-related ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.cs-footnote { margin-top: 2rem; max-width: 70ch; }

/* --- entry points on other pages ------------------------------------------ */

.cs-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.cs-index li { border-left: 3px solid var(--accent); padding-left: .9rem; }
.cs-index-title { font-family: var(--serif); font-size: 1.24rem; letter-spacing: -.018em; }
.cs-index-deck { margin: .3rem 0 .35rem; color: var(--ink-2); font-size: var(--t-small); max-width: 62ch; }
.cs-crosslink { margin: .9rem 0; padding: .7rem .9rem; background: var(--surface-sunk); border-left: 3px solid var(--accent); }
.cs-crosslink .meta { display: block; margin-top: .2rem; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .cs-opening h1 { font-size: clamp(2rem, 8vw, 2.5rem); }
  .cs-era-head { position: static; }
  .cs-openmap .spatial-embed-map { min-height: 15rem; }
}
@media (max-width: 720px) {
  .cs-facts { border-top-width: 1px; }
  .cs-fact { padding-right: 0; }
  .cs-supporting > summary { min-height: 2.75rem; }
  .cs-ev > summary { min-height: 2.4rem; }
  .cs-lineage, .cs-ledger, .cs-state-table { min-width: 34rem; }
}


/* ---------------------------------------------- council record: people ----
   The councillor, division, declaration and series pages. Deliberately built
   from the existing tokens and card conventions rather than a new visual
   language: these are new destinations in the Council Record, not a redesign
   of it. Vote direction is carried by the "For"/"Against" labels, not by
   colour alone. */

.cr-shortcuts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1rem 0 1.6rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.cr-shortcuts a { font: 500 var(--t-small)/1.4 var(--sans); color: var(--fg-2);
  border-bottom: 1px solid var(--line-strong); text-decoration: none; }
.cr-shortcuts a:hover { color: var(--fg); border-bottom-color: var(--accent); }

/* `.cr-people` is the page wrapper, not the list — the list is `.cr-person-list`. */
.cr-people { padding-bottom: 2.5rem; }
.cr-person { border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface-raised); padding: .8rem .9rem; }
.cr-person h2, .cr-person h3 { font-size: 1rem; margin: 0 0 .2rem; }
.cr-person a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.cr-person a:hover { border-bottom-color: var(--accent); }

.cr-vote-list { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .55rem; }
.cr-division, .cr-declaration, .cr-vote-list > li {
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface-raised); padding: .7rem .85rem; }
.cr-division h2, .cr-division h3, .cr-declaration h2, .cr-declaration h3 {
  font-size: .95rem; margin: 0 0 .25rem; line-height: 1.35; }
.cr-vote-meta { display: block; font-size: var(--t-small); color: var(--ink-3); margin-bottom: .35rem; }
.cr-for, .cr-against { font-size: var(--t-small); color: var(--ink-2); margin: .2rem 0; line-height: 1.5; }
.cr-for strong, .cr-against strong { display: inline-block; min-width: 4.2rem; color: var(--ink); }
.cr-for { border-left: 2px solid var(--data-4); padding-left: .55rem; }
.cr-against { border-left: 2px solid var(--data-2); padding-left: .55rem; }
.cr-for a, .cr-against a { color: var(--fg-2); }

.cr-filters { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; align-items: flex-end;
  margin: 1rem 0; padding: .8rem .9rem; background: var(--surface-sunk);
  border: 1px solid var(--line); border-radius: var(--radius-card); }
.cr-filters label { display: grid; gap: .25rem; font: 500 var(--t-small)/1.3 var(--sans); color: var(--ink-2); }
.cr-filters select { max-width: 100%; padding: .3rem .4rem; font: inherit;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-raised); }

.cr-paging { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center;
  margin: 1.2rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line);
  font-size: var(--t-small); }

.cr-unknown-filter { margin: .9rem 0; }
.cr-unknown-filter .caveat { border-left-color: var(--data-3); margin: .3rem 0; }

.cr-people-hit { margin: 1.2rem 0; padding: .9rem 1rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-card); background: var(--surface-raised); }
.cr-people-hit h2 { font-size: 1rem; margin: 0 0 .5rem; }
.cr-people-hit ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }

.cr-series { margin: 1.4rem 0; padding: .9rem 1rem; border: 1px solid var(--line);
  border-left: 3px solid var(--wire); border-radius: var(--radius); background: var(--surface); }
.cr-series h2 { font-size: .95rem; margin: 0 0 .35rem; }
.cr-series-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .5rem; font-size: var(--t-small); }

.cr-person-detail .rs-measures { margin-bottom: 1.2rem; }
/* Each record type is a collapsible section using the agenda's own pattern. */
.cr-person-detail .ag-section { margin-bottom: .5rem; }
.cr-section-body { padding: 0 .9rem .8rem; }
.cr-section-body .cr-vote-list { margin-top: .6rem; }
.cr-person-detail .ag-section-count { font: 600 var(--t-small)/1.5 var(--mono); color: var(--ink-2); }

@media (max-width: 40rem) {
  .cr-filters { flex-direction: column; align-items: stretch; }
  .cr-filters label { width: 100%; }
  .cr-for strong, .cr-against strong { display: block; min-width: 0; }
  /* Seven counts stacked one per row filled two thirds of a phone screen
     before any record appeared. Two up keeps every count and halves that. */
  .cr-person-detail .rs-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-person-detail .rs-measures dd { font-size: 1.15rem; }
  .cr-section-body { padding: 0 .7rem .7rem; }
}
.cr-division-list, .cr-declaration-list, .cr-people-list { list-style: none; padding: 0;
  margin: 1rem 0; display: grid; gap: .55rem; }
.cr-count { font-size: var(--t-small); color: var(--ink-2); margin: .6rem 0 0; }
.cr-person-list { list-style: none; padding: 0; margin: 1.2rem 0;
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cr-person-period { font-size: var(--t-small); color: var(--ink-3); margin: .15rem 0 .4rem; }
.cr-person-counts { font-size: var(--t-small); color: var(--ink-2); margin: 0; line-height: 1.5; }
.cr-unresolved { margin: 1.6rem 0 0; padding: .9rem 1rem; border: 1px solid var(--line);
  border-left: 3px solid var(--data-3); border-radius: var(--radius); background: var(--surface); }
.cr-unresolved h2 { font-size: .95rem; margin: 0 0 .35rem; }
.cr-index { padding-bottom: 2.5rem; }
@media (max-width: 40rem) { .cr-person-list { grid-template-columns: 1fr; } }

/* --------------------------------- council record: the motion record ------
   A recorded vote used to render as an extraction log — a monospaced metadata
   line first, the motion's actual words second, and a 4,000-character raw text
   dump as the page's largest block. This is the reading order instead: what was
   proposed, what happened to it, who voted which way. The audit trail is intact
   and one disclosure away. Built from the existing tokens; no new palette. */

.motion-record { margin: 1.4rem 0; padding: 1rem 1.15rem;
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-card); background: var(--surface-raised); }
.motion-record--carried { border-left-color: var(--data-4); }
.motion-record--lost { border-left-color: var(--data-2); }
.motion-record--lapsed { border-left-color: var(--data-5); }

.motion-record-head { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem .8rem; margin: 0 0 .6rem; }
.motion-record-label { font: 600 var(--t-small)/1.4 var(--sans); color: var(--ink-3);
  letter-spacing: .02em; margin: 0; }
.motion-record-outcome { margin: 0; }

/* Council's own wording is the principal content of a motion record. */
.motion-record-text { margin: 0 0 .7rem; padding: 0 0 0 .9rem;
  border-left: 2px solid var(--line-strong);
  font: 1rem/1.6 var(--serif); color: var(--ink); max-width: 62ch; }

.motion-record-movers { font-size: var(--t-small); color: var(--ink-2); margin: 0 0 .6rem; }
.motion-record-novote { font-size: var(--t-small); color: var(--ink-2); margin: .5rem 0 0;
  padding-left: .75rem; border-left: 2px solid var(--data-5); }

.motion-record-vote { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.motion-record-vote .figure-note { margin-top: .5rem; }

/* Source inspection: present, subordinate, never removed. */
.motion-source, .matter-source { margin-top: .8rem; }
.motion-source > summary, .matter-source > summary {
  cursor: pointer; font: 500 var(--t-small)/1.5 var(--sans); color: var(--ink-3);
  padding: .3rem 0; }
.motion-source > summary:hover, .matter-source > summary:hover { color: var(--fg); }
.motion-source-dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem;
  margin: .5rem 0 0; font-size: var(--t-small); }
.motion-source-dl dt { color: var(--ink-3); }
.motion-source-dl dd { margin: 0; color: var(--ink-2); }
.matter-source { margin-top: 1.6rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.matter-source-h { font-size: .95rem; margin: 1rem 0 .2rem; }
.matter-raw { white-space: pre-wrap; overflow-x: auto; max-height: 32rem; overflow-y: auto;
  font: var(--t-small)/1.6 var(--mono); color: var(--ink-2); background: var(--surface-sunk);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; margin: .5rem 0 0; }

/* Recorded votes grouped under the matter they belong to. */
.cr-matter-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .8rem; }
.cr-matter { border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface-raised); padding: .9rem 1rem; }
.cr-matter-title { font: 600 1rem/1.35 var(--serif); margin: 0 0 .2rem; }
.cr-matter-title a { color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line-strong); }
.cr-matter-title a:hover { border-bottom-color: var(--accent); }
.cr-matter-meta { font-size: var(--t-small); color: var(--ink-3); margin: 0 0 .6rem; }

.cr-vote { padding: .65rem 0 0; border-top: 1px solid var(--line); margin-top: .55rem; }
.cr-vote:first-of-type { border-top: 0; margin-top: 0; }
.cr-vote-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .7rem; margin: 0 0 .4rem; }
.cr-motion-label { font: 600 var(--t-small)/1.4 var(--sans); color: var(--ink-3); }
.cr-motion-text { display: block; font: .9rem/1.55 var(--serif); color: var(--ink-2);
  margin: .2rem 0 .45rem; max-width: 62ch; }
.cr-vote-movers { font-size: var(--t-small); color: var(--ink-3); margin: 0 0 .4rem; }

@media (max-width: 40rem) {
  .motion-record { padding: .85rem .9rem; }
  .motion-record-text { font-size: .95rem; padding-left: .7rem; }
  .motion-source-dl { grid-template-columns: 1fr; gap: .1rem; }
  .motion-source-dl dt { margin-top: .4rem; }
  .matter-raw { max-height: 22rem; }
}

/* A councillor's name must not break across lines — "Cr Graeme / Simpfendorfer"
   reads as two people. The list wraps between names instead of inside one. */
.cr-for a, .cr-for span, .cr-against a, .cr-against span,
.motion-record-vote a, .motion-record-vote span { white-space: nowrap; }
.cr-for, .cr-against { overflow-wrap: anywhere; }

/* A vote outcome reads as a sentence, not a shout. The chip's uppercase house
   style is what made "LOST 1 / 6" look like parser output in the first place;
   these carry a tally and a comma and need their own case. */
.motion-record-outcome .chip, .cr-vote-head .chip, .matter-outcome .chip {
  text-transform: none; letter-spacing: 0; font-size: var(--t-small);
}
.matter-outcome { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem;
  margin: 0 0 .3rem; font-size: var(--t-small); color: var(--ink-3); }

/* ------------------------------------------- council record: meeting agenda
   The meeting page rendered every parsed row at one level inside a single tall
   white card, so the numbered section headings floated among unrelated items
   and a reader could not see that 9.1-9.5 were the reports council determined.
   The section is now the structural unit and the collapsible one; items are a
   contained list inside it. Hierarchy, not decoration. */

.ag-back { font-size: var(--t-small); margin: 0 0 .6rem; }
.ag-summary { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: .5rem 0 .6rem;
  font-size: var(--t-small); color: var(--ink-2); }
.ag-summary a { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.ag-summary a:hover { color: var(--data-1); border-bottom-color: var(--data-1); }
.ag-sources { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: 0 0 1rem;
  font-size: var(--t-small); }
.ag-note { font-size: var(--t-small); color: var(--ink-2); margin: 0 0 1rem;
  padding-left: .75rem; border-left: 2px solid var(--data-5); max-width: 70ch; }

.ag-meta { display: grid; gap: .35rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: 0 0 1.6rem; padding: .85rem 1rem; background: var(--surface-sunk);
  border: 1px solid var(--line); border-radius: var(--radius-card); }
.ag-meta > div { min-width: 0; }
.ag-meta dt { font: 600 var(--t-small)/1.5 var(--sans); color: var(--ink-3); margin: 0; }
.ag-meta dd { margin: 0; font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; }
.ag-meta dd a { white-space: nowrap; }
.ag-qualifier { color: var(--ink-3); font-size: var(--t-micro); }

/* Section jump strip: one line that scrolls, never a tall table of contents. */
.ag-jump { display: flex; gap: .4rem; align-items: center; overflow-x: auto;
  padding: .5rem 0; margin: 0 0 .3rem; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.ag-jump-label { flex: none; font: 600 var(--t-micro)/1.5 var(--sans); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; padding-right: .3rem; }
.ag-jump a { flex: none; white-space: nowrap; font-size: var(--t-small); color: var(--ink-2);
  text-decoration: none; padding: .15rem .5rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface-raised); }
.ag-jump a:hover { border-color: var(--data-1); color: var(--data-1); }

.ag-controls { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .4rem 1rem; margin: 1.2rem 0 .5rem; }
.ag-h { font-size: 1.05rem; margin: 0; }
.ag-toggle { display: flex; gap: .5rem; margin: 0; }
.ag-toggle button { font: 500 var(--t-small)/1.4 var(--sans); color: var(--ink-3);
  background: none; border: 0; border-bottom: 1px solid var(--line-strong);
  padding: 0 0 1px; cursor: pointer; }
.ag-toggle button:hover { color: var(--data-1); border-bottom-color: var(--data-1); }

.ag-section { border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface-raised); margin: 0 0 .5rem; }
.ag-section--empty { background: var(--surface); }
.ag-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
  padding: .6rem .9rem; cursor: pointer; list-style: none; }
.ag-section-head::-webkit-details-marker { display: none; }
.ag-section-head::before { content: "\25BE"; flex: none; color: var(--ink-3); font-size: .7rem;
  transform: rotate(-90deg); transition: transform .12s ease; }
.ag-section[open] > .ag-section-head::before { transform: rotate(0deg); }
.ag-section-num { flex: none; font: 600 var(--t-small)/1.5 var(--mono); color: var(--ink-3);
  min-width: 1.6rem; }
.ag-section-title { font: 600 .98rem/1.35 var(--serif); color: var(--ink); flex: 1 1 12rem; min-width: 0; }
.ag-section-count { flex: none; font-size: var(--t-small); color: var(--ink-3); }
.ag-section--empty .ag-section-title { font-weight: 500; color: var(--ink-2); }

.ag-items { list-style: none; margin: 0; padding: 0 .9rem .6rem; }
.ag-item { padding: .55rem 0; border-top: 1px solid var(--line); }
.ag-item:first-child { border-top: 0; }
.ag-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 0; }
.ag-num { flex: none; font: 600 var(--t-small)/1.5 var(--mono); color: var(--ink-3); min-width: 2.4rem; }
.ag-title { font: 500 .95rem/1.4 var(--sans); color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent; flex: 1 1 14rem; min-width: 0; }
.ag-title:hover { border-bottom-color: var(--data-1); color: var(--data-1); }
.ag-item-meta, .ag-outcomes, .ag-ground, .ag-declared {
  margin: .2rem 0 0 3rem; font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; }
.ag-outcome { color: var(--ink); }
.ag-count { color: var(--ink-3); }
.ag-mover, .ag-ground { color: var(--ink-3); }
.ag-declared a { white-space: nowrap; }
.ag-section-note { margin: 0 .9rem .8rem; font-size: var(--t-small); color: var(--ink-2); max-width: 62ch; }

.ag-declarations { margin: 1.8rem 0 0; }
.ag-declaration-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .7rem; }
.ag-declaration-list > li { padding: .7rem .9rem; border: 1px solid var(--line);
  border-left: 3px solid var(--data-3); border-radius: var(--radius); background: var(--surface-raised); }
.ag-declaration-head { margin: 0 0 .3rem; font-size: .93rem; }

/* The page an item was read from. Quiet by design: it is provenance, not
   business, and it sits on every row. */
.ag-page { font: var(--t-small)/1 var(--mono); color: var(--ink-3); white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--radius); padding: .1rem .35rem; }
a.ag-page { text-decoration: none; }
a.ag-page:hover { color: var(--data-1); border-color: var(--data-1); }
.ag-sources-note { margin: .2rem 0 0; font-size: var(--t-small); color: var(--ink-3); }

/* Chamber movements carry their own accent so a reader does not read them as a
   second list of declarations. Status is in the wording as well as the rule. */
.ag-movements { margin: 1.8rem 0 0; }
.ag-movement-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .7rem; }
.ag-movement-list > li { padding: .7rem .9rem; border: 1px solid var(--line);
  border-left: 3px solid var(--data-5); border-radius: var(--radius); background: var(--surface-raised); }
.ag-movement-head { margin: 0 0 .3rem; font-size: .93rem; }
.ag-moved { margin: .2rem 0 0 3rem; font-size: var(--t-small); color: var(--ink-3); line-height: 1.5; }
.ag-moved a { white-space: nowrap; }
.matter-movements > ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.matter-movements > ul > li + li { border-top: 1px solid var(--line); padding-top: .8rem; }
.ag-close { margin: 1.6rem 0 .4rem; font-size: var(--t-small); color: var(--ink-2); }

@media (max-width: 40rem) {
  .ag-meta { grid-template-columns: 1fr; }
  .ag-section-head { gap: .2rem .5rem; }
  .ag-section-count { flex: 1 1 100%; margin-left: 1.9rem; }
  .ag-item-meta, .ag-outcomes, .ag-ground, .ag-declared, .ag-moved { margin-left: 0; }
  .ag-title { flex: 1 1 100%; }
}
.ag-item--self .ag-item-meta, .ag-item--self .ag-outcomes { margin-left: 0; }
.ag-title--self { font-weight: 400; color: var(--ink-3); font-size: var(--t-small); }

/* ------------------------------------------ projects & consultations */
/* Projects & Consultations: three strands on one canvas — what residents can
   act on now and what Council has recently done side by side, then the
   whole catalogue as the working surface — and one detail layer over it.
   Strands are compact: a mono label as the section head, fine rules between
   rows, the full width for the rows. The detail is a modal panel from the
   right — about two thirds of a desktop viewport, the whole of a phone's —
   over the register it was opened from, so the browse state stays where it
   was. Namespaced pc-/pcl- so no shared component is restyled. */
.pc-page { padding-top: .2rem; }
.pc-strand { border-top: 1px solid var(--line-strong); padding: .95rem 0 1.1rem; }
.pc-h {
  font: 600 var(--t-micro)/1.5 var(--mono); text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-3); margin: 0 0 .45rem;
}
.pc-h--major { color: var(--ink); }
.pc-empty { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.pc-empty .card-link { margin-left: .4rem; }
.pc-more { margin: .6rem 0 0; }

/* The top: Open for feedback beside Recent activity on a desktop — about a
   third to two thirds — and stacked on a phone. Neither strand grows to
   fill; an empty one is one line. */
.pc-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 13fr); gap: 0 clamp(1.6rem, 4vw, 3.5rem); align-items: start; }
.pc-top .pc-strand { border-top: 0; }
.pc-strand--recent { border-left: 1px solid var(--line); padding-left: clamp(1.2rem, 3vw, 2.4rem); }

/* The split kicker (D-079): the item's type in mono caps, the place in
   quieter text, then the pill a record supports. Two faces because they are
   two assertions; a row with no supported state prints no state. */
.pcl-kicker {
  font: var(--t-micro)/1.5 var(--mono); text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3); margin: 0 0 .3rem;
}
.pcl-kicker .pcl-type { font-family: var(--mono); }
.pcl-kicker .pcl-state { font: 600 var(--t-micro)/1.5 var(--sans); letter-spacing: .06em; color: var(--ink); }
.pcl-kicker .pcl-extra { color: var(--ink-3); text-transform: none; letter-spacing: .02em; }
.pcl-kicker .pcl-sep { color: var(--line-strong); }
.pcl-title { font: 600 1.08rem/1.3 var(--serif); margin: 0 0 .3rem; }
.pcl-title a { color: inherit; text-decoration: none; }
.pcl-title a:hover, .pcl-title a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.pcl-scope { font-size: var(--t-small); color: var(--ink-2); margin: 0 0 .35rem; max-width: 62ch; }
.pcl-position { font-size: var(--t-small); color: var(--ink); margin: 0 0 .3rem; max-width: 66ch; }
.pcl-actions { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .45rem 0 0; }

/* Open for feedback: the title, then closes · days left · Have your say on
   one line. */
.pc-open { list-style: none; margin: 0; padding: 0; }
.pc-open-row { padding: .5rem 0 .55rem; border-top: 1px solid var(--line); }
.pc-open-row:first-child { border-top: 0; padding-top: .1rem; }
.pc-open-row .pcl-title { margin: 0 0 .15rem; font-size: 1rem; }
.pc-open-line { display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline; margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.pc-open-closes time { font-weight: 600; color: var(--ink); }
.pc-open-left { font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); }

/* Recent activity: compact horizontal rows — date · subject · what happened
   (with the amount or vote) — so the width is used. The status column sits
   under the subject below 640px. */
.pc-act { list-style: none; margin: 0; padding: 0; }
.pc-act-row {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .1rem 1rem;
  align-items: baseline; padding: .45rem 0 .5rem; border-top: 1px solid var(--line);
}
.pc-act-row:first-child { border-top: 0; padding-top: .1rem; }
.pc-act-d { font: var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; }
.pc-act-k { font: 600 var(--t-micro)/1.5 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.pc-act-t { font: 600 1rem/1.3 var(--serif); min-width: 0; }
.pc-act-t a { color: inherit; text-decoration: none; }
.pc-act-t a:hover, .pc-act-t a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.pc-act-s { text-align: right; white-space: nowrap; }
.pc-act-m { font: var(--t-micro)/1.5 var(--mono); color: var(--ink-2); margin-left: .5rem; }

/* The catalogue: the working surface, full width. A header line names the
   columns; each row is the project, its latest known activity, and the
   date at the precision the record carries. */
.pc-explore { padding-top: 1.1rem; margin-top: .4rem; }
.pc-list { list-style: none; margin: 0; padding: 0; }
.pc-cat-head, .pc-list--register .pc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem 8.5rem; gap: .2rem 1.5rem; align-items: start;
}
.pc-cat-head {
  font: var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  padding: .55rem 0 .4rem; border-bottom: 1px solid var(--line-strong); margin-top: .5rem;
}
.pc-row { padding: .7rem 0 .8rem; border-top: 1px solid var(--line); }
.pc-row:first-child { border-top: 0; }
/* A row outside the result set is gone at every width, whatever a later display rule says. */
.pc-row[hidden] { display: none !important; }
.pc-row-main { min-width: 0; }
.pc-row .pcl-kicker { margin: .15rem 0 0; }
.pc-row .pcl-title { margin: 0; font-size: 1.05rem; }
.pc-row .pcl-actions { margin-top: .3rem; }
.pc-row-act { margin: .15rem 0 0; font-size: var(--t-small); color: var(--ink); }
.pc-row-act:empty { display: none; }
.pc-row-act-m { color: var(--ink-2); white-space: nowrap; }
.pc-row-date { margin: .2rem 0 0; font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); white-space: nowrap; }
.pc-row-date:empty { display: none; }
.pc-count { margin: .5rem 0 0; min-height: 1.2em; }
.pill-n { color: var(--ink-3); font-weight: 400; }
.pill.on .pill-n, .pill-row a.on .pill-n { color: inherit; }

/* The register's toolbar: the search on its own line, wide; the filters and
   the sort on the next. The same search field as the Council Record's. */
.pcl-toolbar { display: grid; gap: .6rem; margin: .5rem 0 0; }
.pcl-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; }
.pcl-toolbar .pill-row { margin: 0; }
.pcl-search { margin: 0; max-width: 46rem; }
.pcl-search input {
  font: inherit; font-size: var(--t-body); min-height: var(--touch); width: 100%; min-width: 0;
  padding: .5rem .85rem; border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--surface-raised); color: var(--ink);
}
.pcl-search input:focus-visible { outline: 2px solid var(--wire); outline-offset: 1px; }
.pcl-order { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; margin: 0 0 0 auto; }
.pcl-order-l, .pcl-order-v, .pcl-sort button {
  font: var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
}
.pcl-order-v { color: var(--ink); }
.pcl-sort { display: inline-flex; gap: .6rem; }
.pcl-sort button {
  background: none; border: 0; border-bottom: 1px solid transparent; padding: .25rem .1rem;
  cursor: pointer; color: var(--ink-2);
}
.pcl-sort button:hover { color: var(--ink); }
.pcl-sort button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.pcl-sort button:focus-visible { outline: 2px solid var(--wire); outline-offset: 2px; }

/* The section rail's one utility action, at its end. */
.secnav-aside {
  margin-left: auto; display: inline-flex; align-items: center; gap: .3em; flex: none;
  padding-left: 1rem; white-space: nowrap;
  font: 500 .84rem/1 var(--sans); color: var(--ink-2); text-decoration: none;
}
.secnav-aside:hover { color: var(--ink); }

/* ------------------------------------------------------ the detail layer */
/* One reusable detail state for every project. Modal, it is a panel from
   the right over the register; without scripting it simply follows the
   register at full width, and the Back link is an ordinary link. */
.pc-detail { border: 0; padding: 0; margin: 0; color: inherit; background: var(--surface-raised); max-width: none; max-height: none; }
.pc-detail:modal {
  position: fixed; inset: 0 0 0 auto; width: min(100%, 68vw); max-width: 74rem;
  height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  border-left: 1px solid var(--line-strong); box-shadow: -12px 0 32px rgba(30, 28, 26, .18);
}
.pc-detail::backdrop { background: rgba(20, 20, 19, .42); }
.pc-detail[open]:not(:modal) { position: static; width: auto; border-top: 1px solid var(--line-strong); margin-top: 1rem; }
html.pc-open { overflow: hidden; padding-right: var(--pc-gutter, 0px); }
.pc-detail-in { padding: 0 clamp(1rem, 3vw, 2.4rem) 2.5rem; }
/* The bar: Back and the position on the left; Previous and Next on the
   right, each the whole project name on up to two lines, never cut. */
.pc-bar {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .4rem 1.2rem;
  background: var(--surface-raised); border-bottom: 1px solid var(--line);
  padding: .85rem 0 .6rem; margin: 0 0 1rem;
}
.pc-bar--foot { position: static; border-bottom: 0; border-top: 1px solid var(--line); padding: .8rem 0 0; margin: 1.6rem 0 0; grid-template-columns: auto 1fr; }
.pc-bar--foot .pc-bar-step { justify-self: end; text-align: right; }
.pc-bar-back { font-size: var(--t-small); white-space: nowrap; }
.pc-bar-pos { font: var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.pc-bar-steps { display: flex; gap: .4rem 1.6rem; justify-content: end; }
.pc-bar-step { display: inline-grid; gap: .05rem; max-width: 26ch; text-decoration: none; color: inherit; }
.pc-bar-step:hover .pc-bar-step-t, .pc-bar-step:focus-visible .pc-bar-step-t { text-decoration: underline; text-underline-offset: .15em; }
.pc-bar-step-l { font: var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.pc-bar-step--prev .pc-bar-step-l::before { content: "\2190\00a0"; }
.pc-bar-step--next .pc-bar-step-l::after { content: "\00a0\2192"; }
.pc-bar-step--next { text-align: right; }
.pc-bar-step-t { font: var(--t-small)/1.3 var(--sans); color: var(--ink); }
.pc-name { font: 600 clamp(1.45rem, 3vw, 2rem)/1.2 var(--serif); letter-spacing: -.015em; margin: 0 0 .3rem; max-width: 32ch; }
.pc-name:focus-visible { outline: 2px solid var(--wire); outline-offset: 3px; }
.pc-alias { margin: 0 0 .35rem; font-size: var(--t-small); color: var(--ink-2); }
.pc-body > .pcl-kicker { margin-bottom: .9rem; }
/* The latest known activity: the one current fact, set large under its label. */
.pc-latest { margin: 0 0 .2rem; padding: .7rem 0 .8rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.pc-latest .pc-h { margin-bottom: .2rem; }
.pc-latest-v { margin: 0; font: 600 1.15rem/1.3 var(--serif); color: var(--ink); }
.pc-latest-d { font: var(--t-small)/1.5 var(--sans); font-weight: 400; color: var(--ink-2); }
.pc-module { margin: 1.1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.pc-module .pc-h { margin-bottom: .35rem; }
.pc-module--open .pcl-title { margin-bottom: .2rem; }
.pcl-facts { margin: .15rem 0 0; display: grid; gap: .45rem; align-content: start; }
.pcl-facts > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .1rem 1rem; align-items: baseline; }
.pcl-facts dt { font: var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.pcl-facts dd { margin: 0; font-size: var(--t-small); color: var(--ink); }
.pcl-facts-n { color: var(--ink-3); }
/* The history: dated events on one rule, each with its outcome and its
   direct links to the Council material. */
.pcl-story { list-style: none; margin: .4rem 0 0; padding: 0; border-left: 2px solid var(--line-strong); }
.pcl-chapter { position: relative; padding: .2rem 0 .95rem 1.1rem; }
.pcl-chapter::before { content: ""; position: absolute; left: -6px; top: .55rem; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-raised); border: 2px solid var(--accent); }
.pcl-chapter--council_decision::before, .pcl-chapter--contract_awarded::before, .pcl-chapter--completion_recorded::before { background: var(--accent); }
.pcl-chapter .pcl-kicker { margin-bottom: .15rem; }
.pcl-chapter-t { margin: 0 0 .15rem; font: 600 1rem/1.35 var(--serif); color: var(--ink); max-width: 62ch; }
.pcl-chapter-s { margin: 0 0 .2rem; font-size: var(--t-small); color: var(--ink-2); max-width: 66ch; }
.pcl-chapter-m { margin: 0 0 .2rem; font: var(--t-small)/1.5 var(--sans); color: var(--ink); }
.pcl-chapter .pcl-actions { margin-top: .25rem; }
.pc-gap { margin: 0 0 .5rem; font-size: var(--t-small); color: var(--ink-3); }
.pc-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: var(--t-small); }
/* In-page, the forward link is already inside the page's own measure, so it
   does not take the shell container's width or gutters a second time. */
.gh-doc .wf-next .w { max-width: none; padding-inline: 0; }

@media (prefers-reduced-motion: no-preference) {
  .pc-detail:modal { animation: pc-slide .18s ease-out; }
  @keyframes pc-slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
}
/* The education link lives on the rail where there is room for it, and at
   the foot of the register on a phone, where there is not. */
.pc-how-foot { display: none; margin: 1.4rem 0 0; }
@media (max-width: 900px) {
  .secnav-aside { display: none; }
  .pc-how-foot { display: block; }
  .pc-top { grid-template-columns: 1fr; }
  .pc-strand--recent { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-strong); }
  .pc-detail:modal { width: 100%; max-width: none; border-left: 0; box-shadow: none; }
  .pc-bar-step { max-width: 20ch; }
}
@media (max-width: 767px) {
  .pcl-order { margin-left: 0; }
  .pc-cat-head { display: none; }
  .pc-list--register .pc-row { display: block; }
  .pc-row-act { display: inline; margin: 0; }
  .pc-row-date { display: inline; margin: 0 0 0 .3rem; }
  .pc-row-date::before { content: "\00b7\00a0"; }
  .pc-row-act, .pc-row-date { font-size: var(--t-small); }
  .pc-row-main + .pc-row-act { display: inline-block; margin-top: .25rem; }
  .pc-bar { grid-template-columns: auto 1fr; }
  .pc-bar-steps { grid-column: 1 / -1; justify-content: space-between; }
  .pc-bar-step { max-width: 45%; }
}
@media (max-width: 640px) {
  .pc-act-row { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .pc-act-s { grid-column: 2; text-align: left; white-space: normal; }
}

/* Council Record — one record product (12 September 2026).
   The family shares one shell: the identity band, one sticky local
   navigation row (Meetings · Decisions · Contracts · Planning · People &
   participation, with the record search at its end), a compact breadcrumb
   on deeper pages. The landing is the latest meeting in full. Every list
   draws the same collapsed row; every record page the same head, the same
   source actions and the same compact "About this record" disclosure.
   Namespaced cr-; the agenda (ag-) and motion (motion-) blocks are reused. */

/* ------------------------------------------------------- the local row */
.cr-nav .cr-nav-in { display: flex; align-items: center; gap: .6rem 1rem; }
.cr-nav .cr-nav-list { flex: 1 1 auto; }
.cr-nav .cr-nav-home { color: var(--ink-3); }
.cr-nav-search { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; margin-left: auto; }
.cr-nav-search input {
  font: inherit; font-size: var(--t-small); width: 14rem; max-width: 40vw; min-height: 34px;
  padding: .3rem .6rem; border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--surface-raised); color: var(--ink);
}
.cr-nav-search input:focus-visible { outline: 2px solid var(--wire); outline-offset: 1px; }
.cr-nav-search button {
  font: 600 var(--t-micro)/1.2 var(--sans); text-transform: uppercase; letter-spacing: .06em;
  min-height: 34px; padding: .3rem .6rem; border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--surface-raised); color: var(--ink-2); cursor: pointer;
}
.cr-nav-search button:hover { color: var(--ink); border-color: var(--ink); }
.cr-nav-search button:focus-visible { outline: 2px solid var(--wire); outline-offset: 2px; }
@media (max-width: 767px) {
  .cr-nav .cr-nav-in { flex-wrap: wrap; }
  /* Five destinations must all be visible on a phone: the row wraps to a
     second line rather than scrolling "People & participation" off-screen. */
  .cr-nav .cr-nav-list { flex-wrap: wrap; overflow: visible; }
  .cr-nav .cr-nav-list a { min-height: 38px; }
  .cr-nav-search { width: 100%; margin: 0 0 .4rem; }
  .cr-nav-search input { flex: 1 1 auto; width: auto; max-width: none; }
}

/* ---------------------------------------------------------- breadcrumb */
.cr-crumbs { margin-top: .75rem; }
.cr-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .3rem; font: var(--t-small)/1.5 var(--sans); color: var(--ink-3); }
.cr-crumbs li + li::before { content: "\2192"; margin-right: .3rem; color: var(--line-strong); }
.cr-crumbs a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.cr-crumbs a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.cr-crumbs [aria-current] { color: var(--ink); }

/* ------------------------------------------------------------- page base */
.cr-page { padding-top: .6rem; padding-bottom: 2.5rem; }
.cr-h { font: 600 var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin: 0 0 .35rem; }
.cr-h2 { font: 600 1.15rem/1.3 var(--serif); margin: 0 0 .5rem; }
.cr-h2 a { color: inherit; text-decoration: none; }
.cr-h2 a:hover { text-decoration: underline; text-underline-offset: .15em; }
.cr-lead { margin: .2rem 0 1rem; font-size: var(--t-body); color: var(--ink-2); max-width: 72ch; }
.cr-lead .card-link { margin-left: .6rem; }
.cr-empty { margin: .6rem 0; font-size: var(--t-small); color: var(--ink-2); max-width: 72ch; }
.cr-count { margin: .4rem 0 .8rem; font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); }
.cr-actions { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: .5rem 0 0; }
.cr-source { margin: .4rem 0 0; }

/* ------------------------------------------------- latest and next strip */
/* The Latest/Next strip (.cr-orient) is drawn by the publication shell
   (publication.css), since Home draws the same strip on the other canvas.
   On the landing it sits a little clear of the row above and the meeting
   below. */
.cr-landing .cr-orient { margin: .4rem 0 1.2rem; }

/* ------------------------------------------------ chronological sequence */
.cr-seq { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem 1rem; align-items: baseline; margin: 0 0 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.cr-seq-prev, .cr-seq-next, .cr-seq-here { display: inline-grid; gap: .05rem; text-decoration: none; color: inherit; min-width: 0; }
.cr-seq-next { text-align: right; justify-self: end; }
.cr-seq-here { text-align: center; justify-self: center; }
.cr-seq-l { font: var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.cr-seq-t { font: var(--t-small)/1.3 var(--sans); color: var(--ink); }
.cr-seq-here .cr-seq-t { font-weight: 600; }
.is-off .cr-seq-t { color: var(--ink-3); }
a.cr-seq-prev:hover .cr-seq-t, a.cr-seq-next:hover .cr-seq-t { text-decoration: underline; text-underline-offset: .15em; }
.cr-seq-browse { grid-column: 1 / -1; justify-self: center; }
@media (max-width: 640px) {
  .cr-seq { grid-template-columns: 1fr 1fr; }
  .cr-seq-here { grid-column: 1 / -1; grid-row: 1; text-align: left; justify-self: start; }
}

/* ------------------------------------------------------------ a meeting */
.cr-meeting-head { margin: 0 0 1rem; }
.cr-meeting-title { font: 600 clamp(1.4rem, 3vw, 1.9rem)/1.2 var(--serif); letter-spacing: -.015em; margin: 0 0 .4rem; }
.cr-meeting-sources { margin: .2rem 0 0; }
.cr-meeting .ag-summary { margin: .3rem 0 .5rem; }
.cr-meeting .ag-h { font-size: 1rem; }

/* ----------------------------------------------------- meetings archive */
.cr-meeting-list { list-style: none; margin: .2rem 0 0; padding: 0; }
.cr-meeting-row { display: grid; grid-template-columns: 11rem 9rem minmax(0, 1fr); gap: .2rem 1rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--line); }
.cr-meeting-row:first-child { border-top: 0; }
.cr-meeting-row-t { font: 600 1rem/1.3 var(--serif); color: var(--ink); text-decoration: none; }
.cr-meeting-row-t:hover { text-decoration: underline; text-underline-offset: .15em; }
.cr-meeting-row-k { font: var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.cr-meeting-row-m { font-size: var(--t-small); color: var(--ink-2); }
@media (max-width: 640px) {
  .cr-meeting-row { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------- the search */
.cr-search-form { display: flex; gap: .5rem; margin: .4rem 0 .8rem; max-width: 46rem; }
.cr-search-form input {
  font: inherit; font-size: var(--t-body); min-height: var(--touch); flex: 1 1 auto; min-width: 0;
  padding: .5rem .85rem; border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--surface-raised); color: var(--ink);
}
.cr-search-form input:focus-visible { outline: 2px solid var(--wire); outline-offset: 1px; }
.cr-search-form button {
  font: 600 var(--t-small)/1.2 var(--sans); min-height: var(--touch); padding: .5rem 1rem;
  border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--surface); cursor: pointer;
}
.cr-search-form button:focus-visible { outline: 2px solid var(--wire); outline-offset: 2px; }
.cr-scopes { margin: 0 0 .6rem; }
.cr-runtime[hidden] { display: none; }
.cr-runtime:focus { outline: none; }

/* ------------------------------------------------------------- records */
.cr-record-page .lede { max-width: 72ch; }
.cr-record-back { margin: 0 0 .8rem; }
.cr-record-back[hidden] { display: none; }
.cr-record-title { font: 600 clamp(1.3rem, 2.6vw, 1.7rem)/1.25 var(--serif); letter-spacing: -.01em; margin: 0 0 .5rem; max-width: 40ch; }
.cr-record h3, .cr-record-page h2:not(.cr-record-title) { font-size: 1.05rem; margin: 1.4rem 0 .5rem; }
.cr-record-facts { margin: .6rem 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem 1.2rem; }
.cr-about { margin: 1.6rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: var(--t-small); }
.cr-about summary { cursor: pointer; font: 600 var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.cr-about summary:hover { color: var(--ink); }
.cr-about-dl { margin: .6rem 0 0; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .3rem 1rem; }
.cr-about-dl dt { font: var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.cr-about-dl dd { margin: 0; color: var(--ink-2); min-width: 0; }
.cr-about .matter-raw { margin: .3rem 0 0; max-height: 18rem; overflow: auto; }
@media (max-width: 640px) { .cr-about-dl { grid-template-columns: 1fr; gap: .1rem; } .cr-about-dl dt { margin-top: .4rem; } }

/* --------------------------------------------------- people & participation */
.cr-people-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .2rem 0 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line-strong); }
.cr-people-nav a { font: 600 var(--t-small)/1.4 var(--sans); color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.cr-people-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.cr-hub-section { padding: .9rem 0 1rem; border-top: 1px solid var(--line); }
.cr-hub-section:first-of-type { border-top: 0; }
.cr-hub-n { font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); margin-left: .4rem; }
.cr-hub-p { margin: 0 0 .5rem; font-size: var(--t-small); color: var(--ink-2); max-width: 72ch; }
.cr-hub-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .25rem 1.2rem; font-size: var(--t-small); }
.cr-hub-people a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.cr-hub-people a:hover { border-bottom-color: var(--accent); }
.cr-hub-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: var(--t-small); }
.cr-hub-rows li { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.cr-hub-d { font: var(--t-micro)/1.5 var(--mono); color: var(--ink-3); flex: 0 0 7rem; }
/* What tells two entries on one item apart: the motion's place, or what the
   minutes recorded about a declaration. */
.cr-hub-m { font-size: var(--t-micro); color: var(--ink-3); }
.cr-hub-rows .digest-quote { display: block; width: 100%; }
.cr-table th { font: 600 var(--t-micro)/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

/* council record landing v2 — 28 Aug 2026 baseline: compact heading with
   in-heading search, numbered opening strands (01 recent substantive
   activity, 02 follow-up outstanding) flowing into the complete record
   explorer. Register grammar: hairline rows, no card grids, no KPI tiles. */

.crl-head { padding-bottom: clamp(.9rem, 1.6vw, 1.3rem); }
.crl-head .lead { max-width: 68ch; }
.crl-search { margin: 1rem 0 0; }
/* .page-intro--tabbed::after sets display:none; restore the closing rule
   under the in-heading search (equal specificity, later in the file). */
.crl-head.page-intro--tabbed::after { content: ""; display: block; height: 1px; background: var(--line-strong); margin-top: clamp(.9rem, 1.6vw, 1.3rem); }

.crl-section { margin: clamp(1.4rem, 2.6vw, 2rem) 0 clamp(1.8rem, 3vw, 2.6rem); }
.crl-section-head { display: flex; align-items: flex-start; gap: .9rem; margin: 0 0 .9rem; padding-top: .65rem; border-top: 2px solid var(--ink); }
.crl-section-head h2 { margin: 0; letter-spacing: -.015em; }
.crl-num { margin: .15rem 0 0; font: 600 var(--t-small)/1 var(--mono); color: var(--brick-deep); letter-spacing: .08em; }
.crl-section-sub { margin: .35rem 0 0; font: var(--t-small)/1.5 var(--sans); color: var(--ink-3); max-width: 72ch; }

/* Opening register (batch 4): a routine unanimous carried outcome recedes; a
   divided vote, or a lost / tied / deferred / withdrawn / casting-vote
   outcome, stands forward. The printed outcome and vote text carry the same
   distinction, so it never rests on styling alone. */
.crl-recent-card.is-routine .chip-ok { background: transparent; border-color: var(--line-strong); color: var(--ink-3); }
.crl-recent-card.is-routine .matter-fact dd { color: var(--ink-3); }
.crl-recent-card.is-divided .matter-facts,
.crl-recent-card.is-exceptional .matter-facts { border-left: 3px solid var(--brick); padding-left: 1rem; }
.crl-recent-card.is-divided .matter-fact dd,
.crl-recent-card.is-exceptional .matter-fact dd { font-weight: 600; color: var(--ink); }
.crl-recent-card.is-exceptional .chip-warn,
.crl-recent-card.is-exceptional .chip-neutral,
.crl-recent-card.is-exceptional .chip--quiet { border-color: var(--brick); }
/* Evidence claim pages: the machine path (record id, release id, artifact,
   parser, hash) is complete and copyable, under a disclosure. */
.claim-tech > summary { cursor: pointer; list-style: none; }
.claim-tech > summary::-webkit-details-marker { display: none; }
.claim-tech > summary .xcard-title { display: inline; }
.claim-tech > summary::before { content: "▸ "; color: var(--ink-3); }
.claim-tech[open] > summary::before { content: "▾ "; }
.claim-tech > summary:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.claim-tech .claim-path { margin-top: .9rem; }
.claim-tech .deflist { margin-top: .9rem; }
.crl-decision { margin: 0 0 .4rem; color: var(--ink-2); max-width: 72ch; }
.crl-decision strong, .crl-next-step strong { font: 600 var(--t-micro)/1.4 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.crl-next-step { margin: .1rem 0 .4rem; }
.crl-sequence-note { margin: 0 0 .4rem; font: var(--t-small)/1.5 var(--sans); color: var(--ink-3); }

.crl-followup-class { margin: 1.3rem 0 .2rem; font: 700 var(--t-small)/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.crl-followup-list { margin: 0; padding: 0; list-style: none; }
.crl-followup-row { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.crl-followup-row:first-child { border-top: 1px solid var(--line); }
.crl-followup-row .matter-title { font-size: 1rem; margin: .15rem 0 .3rem; }
.crl-followup-row .matter-excerpt { max-width: 78ch; }
.crl-followup-state { margin: 0 0 .3rem; font: var(--t-small)/1.5 var(--sans); color: var(--ink-2); }

@media (max-width: 720px) {
  .crl-section-head { flex-direction: column; gap: .3rem; }
  .crl-search input[type="text"] { width: 100%; }
}

/* ==========================================================================
   Sources (/sources) — a directory of the public sources the site uses.
   Typographic only: the level of government as h2, the publisher as h3,
   each source a hairline-ruled row. No cards, chips or status tables; a
   source's known limits sit behind a native <details>.
   ========================================================================== */
.src-jump { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin: 1.4rem 0 0; padding: 0; list-style: none; font-size: var(--t-small); }
.src-dir > h2 { max-width: none; margin-top: clamp(2.2rem, 4vw, 3rem); padding-top: clamp(1.1rem, 2vw, 1.5rem); border-top: 1px solid var(--line-strong); }
.src-dir > h3 { max-width: 62ch; margin: 1.7rem 0 .5rem; font-size: 1.15rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
/* Each group: a lead sentence, then its publishers one per row — the name
   in ink, the collections a resident can open as links after it. */
.src-dir > .src-lead { max-width: 62ch; color: var(--ink-2); margin-bottom: .9rem; }
.src-dir > .src-pubs, .src-dir > .src-limits-list { max-width: none; }
.src-pubs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.src-pubs > li { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: .15rem 1.2rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); overflow-wrap: anywhere; }
.src-pub { font-weight: 600; color: var(--ink); }
.src-coll { color: var(--ink-2); line-height: 1.7; }
.src-coll a { color: var(--ink-2); }
.src-coll a:hover { color: var(--ink); }
.src-coll > span { color: var(--ink-3); margin: 0 .1rem; }
@media (max-width: 640px) { .src-pubs > li { grid-template-columns: minmax(0, 1fr); } }
/* The limits of the whole public record, once, as a run-in list. */
.src-limits-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.src-limits-list > li { max-width: 62ch; color: var(--ink-2); }
.src-limits-list > li > b { color: var(--ink); }
.src-fine { margin-top: 1.4rem; font-size: var(--t-small); color: var(--ink-3); }