/* ============================================================
   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;
  --paper-0:    rgba(242, 242, 236, 0);   /* --paper at zero alpha */

  --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;
    --paper-0:    rgba(25, 27, 22, 0);

    --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; --paper-0: rgba(25, 27, 22, 0);
  --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;
  /* This site is made of things that do not break where prose does: file
     numbers, application references, statute citations, transcript runs set in
     capitals. One of them ran a deputation page 18px past the right edge of a
     phone. break-word only acts when a word genuinely cannot fit, so ordinary
     lines are unaffected. */
  overflow-wrap: break-word;
}
.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; }
  /* Only what would be wrong to break stays on one line. Setting nowrap on the
     whole table made the court register 1,868px wide on a 375px phone: every
     matter title held on one line, and Outcome and Before pushed so far off the
     right edge that nothing on screen said they were there. Wrapping the prose
     columns brings the same table back to about a screen and a half. */
  table.grid td, table.grid th, table.grid td.date { white-space: normal; }
  table.grid .num, table.grid .closed, table.grid .pill { white-space: nowrap; }
  /* The date column is held on one line by giving it room for a date rather
     than by forbidding the break. Council files some multi-year grants under a
     period of "MEC Multi-year Environment Collaborative Grant - ROUND 1 year
     1", and nowrap made that 61-character string set the width of the column:
     525px for a cell reading "2019-20", the other four columns crushed into
     what was left, and rows nine lines deep on a recipient's page. A real date
     fits the floor and never wraps; anything that is not a date now wraps
     instead of deciding the table. */
  table.grid th:first-child, table.grid td:first-child { min-width: 6.5rem; }
  table.grid.legal th:nth-child(2), table.grid.legal td:nth-child(2) { min-width: 11rem; }

  /* Five columns of prose do not survive a 375px screen as a table. On a
     recipient's page the project description got 109px -- ten lines of two
     words -- while Amount and the source link sat off the right edge, and every
     row was nine lines deep. `.stack` gives up the grid and prints each row as
     the record it is: the year and who it went to, then the project, then the
     money and the document it came from.

     The heading row is dropped because each value says what it is -- a year, a
     name, a dollar amount -- and a column heading in a stack has nothing to sit
     above. The elements carry explicit ARIA roles in the template, because
     changing an element's display takes its implicit table role with it. */
  table.grid.stack, table.grid.stack tbody { display: block; }
  table.grid.stack thead { display: none; }
  table.grid.stack tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem;
    padding: .75rem 0; border-bottom: 1px solid var(--rule-soft);
  }
  table.grid.stack td { display: block; border: 0; padding: 0; }
  /* The prose columns take a line of their own; the short ones share the first. */
  table.grid.stack td.quiet { order: 1; flex-basis: 100%; font-size: .95rem; }
  table.grid.stack td.num { margin-left: auto; text-align: right; font-weight: 600; }
  table.grid.stack td:empty { display: none; }
  table.grid.stack tbody tr:hover td { background: none; }

  /* A table in a dossier is written in Markdown and carries no class of ours,
     so it got no scroll box and pushed the whole page sideways instead -- the
     eight-column vote table on the Lions Park page made every line of prose on
     it start off-screen. */
  .editorial table { display: block; overflow-x: auto; max-width: 100%; }

  /* Say that a table continues past the edge. The two `local` layers are the
     paper itself and travel with the content, so each covers its shadow when
     that end is reached: the shadow is visible only while there is more table
     to see, and a table that fits shows nothing at all. */
  table.grid, .editorial table {
    background:
      linear-gradient(to right, var(--paper) 30%, var(--paper-0)) left / 2rem 100% no-repeat local,
      linear-gradient(to left,  var(--paper) 30%, var(--paper-0)) right / 2rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.15), var(--paper-0)) left / .7rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.15), var(--paper-0)) right / .7rem 100% no-repeat scroll;
  }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 34rem) {
  .masthead .wrap { gap: .5rem 1rem; padding-top: 1.35rem; padding-bottom: .8rem; }
  .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; }

/* Document series index. Same shape as ol.deps -- a stack of rules with a
   strong title and a quiet meta line -- but each row is a series rather than
   a person, and the count is the thing being scanned for. */
ul.doc-series { list-style: none; padding: 0; margin: 1.2rem 0 0; }
ul.doc-series li { padding: .85rem 0; border-top: 1px solid var(--rule-soft); }
ul.doc-series .who { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0 0 .25rem; }
ul.doc-series .meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: baseline; margin: 0; }
ul.doc-series .replaced { color: var(--stamp); }
ul.doc-series .replaced strong { font-variant-numeric: tabular-nums; }

/* Secondary detail inside a table cell — project descriptions, the program a
   grant came from. Present, but not competing with the name and the figure. */
.quiet { color: var(--ink-soft); }
td.quiet { font-size: .88rem; }

/* The "why this is hard" list: each item is a claim with evidence, so it gets
   room to breathe rather than being compressed into a bullet run. */
ul.reasons li { padding: .6rem 0; }
ul.reasons strong { font-family: var(--display); }
ul.reasons code { font-family: var(--mono); font-size: .85em; }

/* Unadorned list, for the few places a bullet adds nothing. */
ul.plain { list-style: none; padding: 0; margin: 1rem 0; }
ul.plain li { padding: .45rem 0; border-top: 1px solid var(--rule-soft); }

/* A document council has revised in place: the copy we hold no longer exists
   anywhere on council's site, which is a finding rather than a gap. */
table.grid td .note { display: block; margin: .2rem 0 0; font-size: .8rem; color: var(--stamp); }
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; }

/* ---------- the phone ----------
   Last in the file on purpose. These are floors, and a floor only holds if it
   is the last thing said: .pill, .sortbar and the sub-nav are all declared
   further down than the narrow-viewport block above, so an override placed
   there lost to them on specificity and left the type at 10.6px. */
@media (max-width: 34rem) {
  /* The mono microcopy is set small so it stays subordinate on a wide page. On
     a phone .66-.74rem lands at 10.6-11.8px, below what anyone should have to
     read at arm's length -- 102 of the labels on /deputations/ were 11.2px.
     The floor keeps the hierarchy, because the body it defers to is 17px. */
  .counter span, table.grid th, .doc, a.tiny, .pill, .filtercount, .meta,
  p.meta, p.meta a, .filterbar .label, .filterbar button, .subnav-label,
  .sortbar, .pager .of, figure.chart figcaption, .foot .meta,
  .navsearch input[type=search], table.grid.legal .closed,
  table.grid td .note, ul.doc-series .meta { font-size: .8rem; }

  /* Navigation is the one place on this site where a link is a control rather
     than a word in a sentence, so it gets a target you can hit. 24px is the
     floor WCAG 2.2 sets and these sat exactly on it; prose links are exempt
     and stay as they are. */
  .masthead nav a, .subnav nav a { font-size: .8rem; padding-top: .32rem; padding-bottom: .44rem; }
  .subnav .wrap { padding-block: .45rem; }

  /* An agenda row is [item number] [title] [cue the video]. Below about 340px
     the three do not fit on one line, and the video chip -- which must not
     break, it is a timestamp -- took 41 meeting pages sideways with it. Letting
     the row wrap drops the chip under the title it belongs to. */
  ol.agenda .row { flex-wrap: wrap; gap: .45rem .9rem; }
  ol.agenda .iname { flex: 1 1 55%; min-width: 0; }
}