/* ============================================================
   Noosa Council Watch — "Minute Book"

   The visual language of council's own paperwork, turned around:
   form headers, a ruled margin, item numbers in a mono gutter,
   rubber-stamp decision marks, and redaction blocks. Official in
   register, adversarial in intent.

   Type
     Archivo          form headers and headlines, uppercase, tracked
     IBM Plex Serif   body — people read long editorial here
     IBM Plex Mono    every reference number, date, timestamp, tally

   Colour — lifted from council's own brand, then split by voice.
     Their palette, sampled from noosa.qld.gov.au's stylesheet:
       #627244 olive/moss (their primary), #55623c hover,
       #171717/#252722/#0a0b07 green-biased near-blacks,
       #d8d9d4 rule grey, #c40c06 alert red.

     olive  COUNCIL'S voice — structure, labels, rules, links. Using
            their own colour for the scaffolding makes the page read as
            official record rather than commentary about it.
     stamp  OUR voice — verdicts, stamps, redaction, alarm. The single
            bold spend, and deliberately the one colour that is not theirs.
     paper  bone carrying their green-grey bias, not a cool grey.

   Themes are three-state: bare :root is light; the media query is
   guarded so an explicit light choice beats a dark OS; the
   [data-theme="dark"] block lets the toggle win the other way. Dark
   steps are chosen against the dark ground, never inverted.
   ============================================================ */

:root {
  --paper:      #f2f2ec;
  --paper-2:    #e9e9e1;
  --ink:        #1a1c17;
  --ink-soft:   #5f665c;
  --ink-faint:  #8b9086;
  --rule:       #d8d9d4;   /* council's own rule grey */
  --rule-soft:  #e4e5df;
  --olive:      #627244;   /* council's primary */
  --olive-deep: #55623c;   /* council's hover */
  --stamp:      #b32014;
  --stamp-soft: #f4e3e0;

  --chart-surface: #f7f7f1;
  --grid:          #e4e5df;
  --rain:          #3d8fd6;

  --display: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --body:    "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max:     64rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #191b16;
    --paper-2:    #20231d;
    --ink:        #e7e9e2;
    --ink-soft:   #9aa196;
    --ink-faint:  #6f766b;
    --rule:       #32362c;
    --rule-soft:  #282b23;
    --olive:      #9aac74;   /* their olive, lifted to hold the dark ground */
    --olive-deep: #b0c08c;
    --stamp:      #e0584a;
    --stamp-soft: #33201c;

    --chart-surface: #20231d;
    --grid:          #32362c;
    --rain:          #5fa8e8;
  }
}
:root[data-theme="dark"] {
  --paper: #191b16; --paper-2: #20231d; --ink: #e7e9e2;
  --ink-soft: #9aa196; --ink-faint: #6f766b;
  --rule: #32362c; --rule-soft: #282b23;
  --olive: #9aac74; --olive-deep: #b0c08c;
  --stamp: #e0584a; --stamp-soft: #33201c;
  --chart-surface: #20231d; --grid: #32362c; --rain: #5fa8e8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--ink); text-decoration-color: var(--olive); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--stamp); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }

/* ---------- masthead: a document header ---------- */
.masthead { border-bottom: 3px double var(--olive); background: var(--paper); }
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-top: 2rem; padding-bottom: 1.05rem; }
.brand {
  font-family: var(--display); font-weight: 800; font-size: 1.12rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--ink); text-decoration: none;
}
.brand span { color: var(--olive); }
.brand-rule { flex: 1 1 2rem; height: 0; border-top: 2px solid var(--olive); min-width: 1rem; opacity: .55; }
/* Item gap has to beat the word gap inside "Behind closed doors", or the nav
   reads as one run of words. The hover rule then underlines a whole item, so
   what you are about to click is unambiguous. */
.masthead nav { display: flex; flex-wrap: wrap; gap: 1.1rem 1.9rem; }
.masthead nav a {
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); text-decoration: none;
  padding-bottom: .22rem; border-bottom: 2px solid transparent;
}
.masthead nav a:hover,
.masthead nav a:focus-visible {
  color: var(--olive-deep); border-bottom-color: var(--olive);
}

/* main carries .wrap for its width, and a bare `main` loses to `.wrap` on
   specificity - which silently zeroed this padding and left every h1 sitting
   flush against the masthead rule. Match the class so it applies. */
main.wrap { padding: clamp(2.5rem, 4.5vw, 3.5rem) 1.5rem 4rem; }

/* ---------- headings: form headers ---------- */
h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.85rem, 4.2vw, 2.7rem); line-height: 1.08;
  letter-spacing: -0.02em; text-wrap: balance;
  margin: 0 0 .85rem;
}
h2 {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  text-transform: uppercase; letter-spacing: .1em;
  margin: 3rem 0 .9rem; padding-top: .6rem; border-top: 2px solid var(--olive);
}
h3 { font-family: var(--display); font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; margin: 2rem 0 .5rem; color: var(--olive-deep); }

.lede { font-size: 1.16rem; line-height: 1.55; color: var(--ink); max-width: 44rem; margin: 0 0 1rem; }
.hero { padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 2px solid var(--olive); }
.hero-sub { max-width: 44rem; color: var(--ink-soft); }
p { max-width: 44rem; }

.meta, .crumb { font-family: var(--mono); font-size: .76rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.crumb { margin: 0 0 .75rem; }
.snip { color: var(--ink-soft); font-size: .95rem; margin: .25rem 0 0; }
.empty { color: var(--ink-soft); font-style: italic; }

.note {
  font-family: var(--body); font-size: .93rem; color: var(--ink-soft);
  background: var(--paper-2); border-left: 3px solid var(--olive);
  padding: .75rem 1rem; border-radius: 0;
}
.note.callout { border-left-color: var(--stamp); background: var(--stamp-soft); color: var(--ink); }
.note.callout p { margin: 0; }

/* ---------- counters: register tallies ---------- */
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0; margin: 0 0 2rem; border: 1px solid var(--olive); border-top: 3px solid var(--olive); }
.counter { padding: .9rem 1rem; border-right: 1px solid var(--olive); }
.counter:last-child { border-right: 0; }
.counter b {
  display: block; color: var(--olive-deep); font-family: var(--display); font-weight: 800;
  font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.counter b small { font-family: var(--display); font-size: .85rem; font-weight: 600; margin-left: .1rem; }
.counter span { display: block; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-top: .35rem; }
.counter.alarm { background: var(--stamp-soft); }
.counter.alarm b { color: var(--stamp); }

/* ---------- the stamp ---------- */
.stamp {
  display: inline-block; float: right; margin: .2rem 0 .75rem 1.25rem;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--stamp);
  border: 2px solid var(--stamp); border-radius: 3px;
  padding: .45rem .9rem; text-align: center; line-height: 1.15;
  transform: rotate(-2.2deg); opacity: .92;
  box-shadow: inset 0 0 0 1px var(--paper);
}
.stamp .verdict-word { display: block; font-size: 1.05rem; }
.stamp .tally { display: block; font-family: var(--mono); font-size: .82rem; font-weight: 600; letter-spacing: .04em; }

.panel { border-top: 2px solid var(--olive); padding-top: 1.25rem; margin-top: 2.5rem; }
.panel h2 { margin-top: 0; border-top: 0; padding-top: 0; color: var(--olive-deep); }
.verdict { font-family: var(--body); font-size: 1.1rem; line-height: 1.5; border-left: 3px solid var(--stamp); padding-left: 1rem; margin: .9rem 0; }
.btn {
  display: inline-block; font-family: var(--mono); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  background: var(--olive); color: #fff; padding: .6rem 1.1rem; text-decoration: none;
}
.btn:hover { background: var(--stamp); color: var(--paper); }

/* ---------- lists ---------- */
ul.meeting-list, ul.issue-list, ul.upcoming, ul.sources { list-style: none; padding: 0; margin: 0; }
ul.meeting-list li, ul.issue-list li { padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); }
ul.issue-list a { font-family: var(--display); font-weight: 700; font-size: .98rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; border-bottom: 2px solid var(--olive); }
ul.upcoming li { display: flex; flex-wrap: wrap; gap: .85rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--rule-soft); }
ul.upcoming .date { font-family: var(--mono); font-size: .78rem; color: var(--olive-deep); min-width: 7rem; text-transform: uppercase; }
ul.upcoming .name { flex: 1 1 14rem; }
ul.sources li { padding: .35rem 0; font-size: .95rem; }

/* ---------- tables: the register ---------- */
table.grid { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .93rem; }
table.grid th {
  text-align: left; font-family: var(--mono); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
  border-bottom: 2px solid var(--olive); padding: .5rem .65rem;
}
table.grid td { padding: .5rem .65rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
table.grid td.date { font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
table.grid .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; width: 5.5rem; }
table.grid tr.covered td { background: var(--stamp-soft); }
table.grid tbody tr:hover td { background: var(--paper-2); }
.dot { color: var(--stamp); font-weight: 900; margin-right: .4rem; }
td.num.warm { color: var(--stamp); font-weight: 600; }
td.num.zero { color: var(--stamp); }
a.tiny { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }

/* ---------- redaction bars ----------
   A real bar chart whose bars are drawn as blacked-out blocks: width is
   proportional to the count, so the rhetoric never distorts the data. */
td.bar { width: 55%; }
td.bar span {
  display: block; height: .85rem; min-width: 3px;
  background-color: var(--ink);
  background-image: repeating-linear-gradient(90deg, transparent 0 13px, var(--paper) 13px 16px);
}
tr:hover td.bar span { background-color: var(--stamp); }

/* ---------- agenda: mono gutter, ruled ---------- */
ol.agenda { list-style: none; padding: 0; margin: 1.25rem 0; border-top: 2px solid var(--olive); }
ol.agenda li { padding: .5rem 0; border-bottom: 1px solid var(--rule-soft); }
ol.agenda li.procedural { opacity: .5; font-size: .9rem; }
ol.agenda .row { display: flex; gap: .9rem; align-items: baseline; }
ol.agenda .outline { font-family: var(--mono); font-size: .78rem; font-weight: 500; color: var(--ink-faint); min-width: 4rem; flex-shrink: 0; text-align: right; }
ol.agenda .iname { flex: 1; }
ol.agenda .ts {
  font-family: var(--mono); font-size: .76rem; font-weight: 600;
  border: 1px solid var(--olive); color: var(--olive-deep);
  padding: .12rem .5rem; text-decoration: none; white-space: nowrap;
}
ol.agenda .ts::before { content: "\25B8 "; color: var(--stamp); }
ol.agenda .ts:hover { background: var(--stamp); border-color: var(--stamp); color: var(--paper); }
ol.agenda .ts:hover::before { color: var(--paper); }
li.depth-1 { padding-left: 1.1rem; } li.depth-2 { padding-left: 2.2rem; } li.depth-3 { padding-left: 3.3rem; }
.docs { margin: .4rem 0 0 4.9rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.doc { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: .1rem .45rem; border: 1px solid var(--rule); color: var(--ink-faint); }
.doc.report { border-color: var(--olive); color: var(--olive-deep); }

/* ---------- editorial: ruled margin, like a minute book ---------- */
.editorial { border-left: 3px solid var(--olive); padding: .25rem 0 .25rem 1.5rem; margin: 1.75rem 0; }
.editorial.bare { border-left: 0; padding-left: 0; }
.editorial .label, .related .label {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--olive-deep); font-weight: 600; margin: 0 0 .6rem;
}
.editorial h2 { font-size: .92rem; margin: 1.75rem 0 .5rem; border-top: 0; padding-top: 0; color: var(--olive-deep); }
.editorial blockquote {
  border-left: 3px solid var(--stamp); margin: 1.1rem 0; padding: .3rem 0 .3rem 1.1rem;
  color: var(--ink-soft); font-style: italic;
}
.related { border: 1px solid var(--rule); padding: .9rem 1.2rem; margin: 1.75rem 0; }
.related ul { margin: 0; padding-left: 1.1rem; }

/* ---------- charts ---------- */
figure.chart { margin: 1.75rem 0; background: var(--chart-surface); border: 1px solid var(--olive); padding: 1rem .75rem .5rem; overflow-x: auto; }
figure.chart svg { display: block; width: 100%; min-width: 34rem; height: auto; }
figure.chart figcaption { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: .6rem .5rem 0; line-height: 1.5; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--ink-soft); stroke-width: 1; opacity: .5; }
.chart text.ax { fill: var(--ink-soft); font-size: 10px; font-family: var(--mono); }
/* Series colour comes from --c (light) / --cd (dark), set inline on each mark.
   These must be read DIRECTLY on the element: a `--series: var(--c)` shortcut
   declared on :root resolves --c against :root, where it does not exist, so the
   property is invalid at computed-value time and inherits as invalid. For
   `stroke` that silently falls back to the initial value `none` - i.e. lines
   that exist in the markup and never draw. Hence the repetition below. */
.chart rect.rain { fill: var(--c, var(--rain)); }
.chart rect.rain:hover { fill: var(--stamp); }
.chart line.mean { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 4; opacity: .6; }
.chart text.mean-lbl { fill: var(--ink-soft); font-size: 10px; font-family: var(--mono); text-transform: uppercase; }
.chart path.ln { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart circle.dot { fill: var(--c); stroke: var(--chart-surface); stroke-width: 2; opacity: 0; }
.chart circle.dot:hover { opacity: 1; }
.chart text.ser-lbl { fill: var(--c); font-size: 10px; font-weight: 700; font-family: var(--mono); text-transform: uppercase; }

/* ---------- footer: the colophon ---------- */
.foot { border-top: 3px double var(--olive); background: var(--paper); padding: 2.25rem 0 3rem; margin-top: 3.5rem; font-size: .88rem; color: var(--ink-soft); }
.foot p { max-width: 48rem; margin: 0 0 .7rem; }
.foot .meta { font-family: var(--mono); font-size: .7rem; }

/* Full-width tables on desktop. `display: block` is what makes a table
   horizontally scrollable, but it also stops `width: 100%` applying, so it is
   scoped to narrow viewports where the scroll is actually needed. */
table.grid { display: table; width: 100%; }
@media (max-width: 44rem) {
  table.grid { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 34rem) {
  .masthead .wrap { gap: .5rem 1rem; }
  .brand-rule { display: none; }
  ol.agenda .outline { min-width: 3rem; }
  .docs { margin-left: 0; }
  .stamp { float: none; display: block; margin: 1rem 0; transform: rotate(-1.2deg); max-width: 11rem; }
}

/* chart legend keys — identity never rests on colour alone: each swatch is
   paired with the gauge's name and its span */
figure.chart figcaption .key { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; text-transform: none; letter-spacing: 0; }
figure.chart figcaption .sw { display: inline-block; width: .7rem; height: .7rem; background: var(--c); border-radius: 2px; flex-shrink: 0; }

/* Dark theme: same marks, the palette's separately-chosen dark steps. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chart path.ln { stroke: var(--cd); }
  :root:not([data-theme="light"]) .chart circle.dot { fill: var(--cd); }
  :root:not([data-theme="light"]) .chart text.ser-lbl { fill: var(--cd); }
  :root:not([data-theme="light"]) .chart rect.rain { fill: var(--cd, var(--rain)); }
  :root:not([data-theme="light"]) figure.chart figcaption .sw { background: var(--cd); }
}
:root[data-theme="dark"] .chart path.ln { stroke: var(--cd); }
:root[data-theme="dark"] .chart circle.dot { fill: var(--cd); }
:root[data-theme="dark"] .chart text.ser-lbl { fill: var(--cd); }
:root[data-theme="dark"] .chart rect.rain { fill: var(--cd, var(--rain)); }
:root[data-theme="dark"] figure.chart figcaption .sw { background: var(--cd); }

/* ---------- court register ---------- */
/* Outcome marks. Won/lost are OUR reading of a judgment, so they carry the
   stamp red and the olive; the rest stay neutral so a settlement does not
   read as a verdict. */
.pill {
  display: inline-block; font-family: var(--mono); font-size: .66rem;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  padding: .18rem .45rem; border: 1px solid var(--rule); color: var(--ink-soft);
  white-space: nowrap;
}
.pill.won    { border-color: var(--olive); color: var(--olive-deep); }
.pill.lost   { border-color: var(--stamp); color: var(--stamp); background: var(--stamp-soft); }
.pill.live   { border-color: var(--stamp); color: var(--stamp); }
.pill.settled{ border-color: var(--ink-faint); color: var(--ink-soft); }
.pill.unknown{ border-style: dashed; color: var(--ink-faint); }

table.grid.legal td { font-size: .9rem; }
table.grid.legal th:nth-child(3), table.grid.legal td:nth-child(3) { width: 8rem; }
table.grid.legal td strong { font-weight: 600; }
table.grid.legal .sub {
  display: block; font-size: .82rem; color: var(--ink-soft); margin-top: .15rem;
}
table.grid.legal .closed {
  font-size: .72rem; color: var(--stamp); white-space: nowrap;
}

ul.case-list { list-style: none; padding: 0; margin: 1.25rem 0; border-top: 2px solid var(--olive); }
ul.case-list li { padding: .85rem 0; border-bottom: 1px solid var(--rule-soft); }
ul.case-list .case-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
ul.case-list .ref {
  font-family: var(--mono); font-size: .78rem; color: var(--ink-faint);
}
ul.case-list p { margin: .35rem 0 0; }
/* Register notes run long; the mono/uppercase .meta treatment is for stamps
   and dates, not for a sentence. */
.case-note { font-size: .86rem; color: var(--ink-soft); }
.pill.flat { border-color: var(--ink-faint); color: var(--ink); }

/* Contact form. No JS; native POST to /contact/submit. Honeypot hidden off-screen. */
form.contact { margin: 1.5rem 0 2rem; max-width: 40rem; }
form.contact label {
  display: block; margin: 1.1rem 0 .35rem; font-weight: 600;
  font-family: var(--mono); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink);
}
form.contact label .opt {
  font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-faint);
}
form.contact textarea,
form.contact input[type=text],
form.contact input[type=email] {
  width: 100%; box-sizing: border-box; padding: .7rem .75rem;
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink-faint); border-radius: 2px;
}
form.contact input[type=email] { max-width: 26rem; }
form.contact textarea:focus,
form.contact input[type=text]:focus,
form.contact input[type=email]:focus {
  outline: 2px solid var(--olive); outline-offset: 1px; border-color: var(--olive);
}
form.contact .meta { margin: .4rem 0 0; text-transform: none; letter-spacing: 0; }
form.contact button {
  margin-top: 1.25rem; padding: .55rem 1.4rem; cursor: pointer;
  font-family: var(--mono); font-size: .85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--olive); border: none; border-radius: 2px;
}
form.contact button:hover { background: var(--ink); }
/* Honeypot: kept in the DOM for bots, removed from view and a11y tree. */
form.contact .hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ---------- search (served by the /search/ service, styled here) ----------
   The search page is rendered by a separate Flask app, but it links THIS
   stylesheet and uses the same masthead and footer markup as every other
   page. Its styles live here so there is one theme, not two that drift. */
form.search { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .9rem; max-width: 52rem; }
form.search input[type=search] {
  flex: 1 1 22rem; font-family: var(--mono); font-size: .95rem;
  padding: .7rem .75rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-faint); border-radius: 2px;
}
form.search input[type=search]:focus,
form.search input[type=date]:focus {
  outline: 2px solid var(--olive); outline-offset: 1px; border-color: var(--olive);
}
form.search button {
  padding: .55rem 1.4rem; cursor: pointer;
  font-family: var(--mono); font-size: .85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--olive); border: none; border-radius: 2px;
}
form.search button:hover { background: var(--ink); }
.search-filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.search-filters label {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faint);
}
.search-filters input[type=date] {
  font-family: var(--mono); font-size: .82rem; padding: .45rem .5rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
}

/* Collection filters. Same pill vocabulary as .doc elsewhere on the site. */
ul.facets { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.2rem 0 1.4rem; padding: 0; list-style: none; }
ul.facets a {
  display: inline-block; font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
  padding: .28rem .65rem; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--ink-soft); background: var(--paper-2);
}
ul.facets a:hover { border-color: var(--olive); color: var(--olive-deep); }
ul.facets a[aria-current] { background: var(--olive); color: #fff; border-color: var(--olive); }

.result { padding: 1.15rem 0; border-top: 1px solid var(--rule-soft); }
.result h2 {
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  text-transform: none; letter-spacing: -0.01em; line-height: 1.35;
  margin: 0 0 .3rem; padding-top: 0; border-top: none;
}
.result h2 a { text-decoration: none; color: var(--ink); }
.result h2 a:hover { color: var(--olive-deep); text-decoration: underline; }
.result .snip { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .95rem; max-width: 52rem; }
.result .snip mark {
  background: var(--stamp-soft); color: var(--ink);
  padding: 0 .12em; font-weight: 600; border-radius: 1px;
}
.result .link { font-family: var(--mono); font-size: .78rem; margin: 0; }
.result .link a { text-decoration: none; border-bottom: 1px solid var(--olive); }
.result .gone { font-family: var(--mono); font-size: .78rem; color: var(--stamp); margin: 0; }
.result .hint {
  font-family: var(--mono); font-size: .7rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .05em;
}
.count { font-family: var(--mono); font-size: .82rem; color: var(--ink-soft); margin: 0 0 .4rem; }
.pager { display: flex; gap: .6rem; align-items: center; margin: 1.8rem 0; font-family: var(--mono); font-size: .8rem; }
.pager a { padding: .4rem .8rem; border: 1px solid var(--rule); border-radius: 2px; text-decoration: none; background: var(--paper-2); }
.pager a:hover { border-color: var(--olive); }
table.corpus { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-size: .95rem; max-width: 44rem; }
table.corpus th, table.corpus td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--rule-soft); }
table.corpus th {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-faint);
}
table.corpus td.n, table.corpus th.n { font-family: var(--mono); text-align: right; }

/* ---------- deputations register ---------- */
.subnav { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.subnav .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.4rem; padding-block: .6rem; }
.subnav-label {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint);
}
.subnav nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.subnav nav a {
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft); text-decoration: none;
  padding-bottom: .15rem; border-bottom: 2px solid transparent;
}
.subnav nav a:hover { color: var(--olive-deep); border-bottom-color: var(--olive); }
.subnav nav a[aria-current] { color: var(--ink); border-bottom-color: var(--olive); }

ol.deps { list-style: none; padding: 0; margin: 1.2rem 0 0; }
ol.deps li { padding: 1rem 0; border-top: 1px solid var(--rule-soft); }
ol.deps .meta { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: baseline; margin: 0 0 .3rem; }
ol.deps .meta a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
ol.deps .meta a:hover { color: var(--olive-deep); border-bottom-color: var(--olive); }
ol.deps .who { font-family: var(--display); font-weight: 700; font-size: 1rem; margin: 0 0 .25rem; }
ol.deps .who .topic { font-weight: 400; color: var(--ink-soft); }
ol.deps .snip { margin: 0; color: var(--ink-soft); font-size: .93rem; }
ol.deps.compact li { padding: .7rem 0; }
ol.deps.compact .meta { margin: 0 0 .15rem; }
ol.deps.compact .who { font-size: .95rem; }
.related.storycard .verdict { margin: .3rem 0 .6rem; }
.related.storycard a { font-family: var(--display); font-weight: 600; }
.pager { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin: 1.8rem 0; font-family: var(--mono); font-size: .8rem; }
.pager a, .pager .here {
  min-width: 2.1rem; text-align: center; padding: .35rem .55rem;
  border: 1px solid var(--rule); border-radius: 2px; text-decoration: none;
}
.pager a { background: var(--paper-2); color: var(--ink-soft); }
.pager a:hover { border-color: var(--olive); color: var(--olive-deep); }
.pager .here { background: var(--olive); color: #fff; border-color: var(--olive); font-weight: 600; }
.pager .gap { padding: 0 .15rem; color: var(--ink-faint); }
.pager .of { margin-left: auto; color: var(--ink-faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- masthead search ----------
   The index is the biggest thing the site holds; it should not be reachable
   only by first clicking a nav item. */
.navsearch { display: flex; gap: .3rem; margin-left: auto; }
.navsearch input[type=search] {
  font-family: var(--mono); font-size: .76rem; padding: .38rem .55rem;
  width: 11rem; max-width: 46vw; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
}
.navsearch input[type=search]::placeholder { color: var(--ink-faint); }
.navsearch input[type=search]:focus {
  outline: 2px solid var(--olive); outline-offset: 1px; border-color: var(--olive);
}
.navsearch button {
  font-size: .8rem; padding: .3rem .6rem; cursor: pointer; line-height: 1;
  color: #fff; background: var(--olive); border: none; border-radius: 2px;
}
.navsearch button:hover { background: var(--ink); }
@media (max-width: 640px) {
  .navsearch { margin-left: 0; width: 100%; }
  .navsearch input[type=search] { flex: 1; max-width: none; width: auto; }
}
.sortbar { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin: 0 0 1rem; display: flex; gap: .55rem; flex-wrap: wrap; align-items: baseline; }
.sortbar a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
.sortbar a:hover { color: var(--olive-deep); border-bottom-color: var(--olive); }
.sortbar .here { color: var(--ink); border-bottom: 2px solid var(--olive); }

/* ---------- meetings filter (progressive enhancement) ---------- */
.filterbar { display: flex; gap: .35rem; flex-wrap: wrap; align-items: baseline; margin: .5rem 0; }
.filterbar .label { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); min-width: 3rem; }
.filterbar button {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; padding: .25rem .6rem; cursor: pointer;
  color: var(--ink-soft); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 2px;
}
.filterbar button:hover { border-color: var(--olive); color: var(--olive-deep); }
.filterbar button.on { background: var(--olive); color: #fff; border-color: var(--olive); }
.filtercount { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; margin: .6rem 0 1rem; }
.grid .topic { display: block; color: var(--ink-soft); font-size: .9rem; }

/* A published transcript is OUR text, not council's record. The provenance
   banner says which, and the block is set apart so it can never be mistaken
   for the minuted extract above it. */
.note.provenance {
  border-left: 3px solid var(--stamp);
  padding-left: .9rem;
}
.editorial.transcript {
  border-left: 1px solid var(--rule);
  padding-left: 1.1rem;
}
.editorial.transcript p { margin: 0 0 .55rem; }