/* ---------------------------------------------------------------------------
   The Trusted Knowledge Accord — "The Working Draft"

   Design read: the site is a working document, not a product page. Its
   reference points are a circulated draft agreement and the margin of the copy
   the secretariat is working from: a measured text column, a working right
   margin for annotations and metadata, hairline rules instead of boxes, and a
   red seal used only where the record is being marked.

   Locks, applied throughout:
     - ONE theme. A single light "paper" theme, no dark variant (see NOTE).
     - ONE accent, the seal (--seal). It appears in links, rules that mark a
       change, and disposition stamps. Nothing else is chromatic.
     - RADIUS 0 everywhere. Nothing on this page is a rounded card.
     - ELEVATION is a hairline rule. There are no shadows on this site.
     - TWO typefaces, each with one job. Piazzolla (variable serif, opsz+wght)
       is the document voice: body copy, headings, clause text. Fragment Mono
       is the record voice: identifiers, dates, labels, running heads, clause
       numbers, stamps. Mono is always 13px / +0.06em; running heads are
       uppercase.
     - ONE spacing scale (--s1..--s8), ONE document grid (see .doc-grid).
     - Motion is confined to two things: the annotation that pins itself into
       the margin once on load, and reveal/state transitions (hover, focus,
       disclosure). Nothing animates on scroll. Everything sits behind
       prefers-reduced-motion, which resolves to the final frame rather than to
       nothing.

   NOTE on dark mode: this surface is a printed-record metaphor. A second
   palette cannot be verified honestly against the print stylesheet and the
   seal's role, so the page commits to one light theme and declares
   color-scheme: light so form controls, caret and scrollbars match it.

   Contrast (WCAG 2.1, computed):
     ink #1B1A17 on paper #FCFBF9 .............. 16.83:1
     ink on seal-paper #F6ECEA ................. 15.00:1
     seal #8C1D18 on paper ...................... 8.81:1
     seal on seal-paper ......................... 7.86:1
     ink-muted #6B675F on paper ................. 5.44:1
     ink-muted on seal-paper .................... 4.85:1
   Every text pairing clears 4.5:1, including the 13px mono labels (which are
   normal-size text, not large text). No separate darkened --seal-text was
   needed; the seal is used for text and for rules at the same value.
--------------------------------------------------------------------------- */

/* --- Faces ----------------------------------------------------------------
   Self-hosted. The site's CSP is default-src 'self', so a Google Fonts <link>
   would be blocked outright — these are committed under public/fonts/ with
   their OFL licences alongside. Piazzolla is the variable face (wght 100-900,
   opsz 8-30 in the file; declared 400-600, the range this design uses), so
   font-optical-sizing: auto below actually does something: the running text
   and the 3.6rem title are drawn from different optical sizes.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Piazzolla';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/piazzolla-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fragment-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Surfaces and ink. */
  --paper: #FCFBF9;
  --surface: #FCFBF9;
  --sunken: #F5F3EF;
  --ink: #1B1A17;
  --ink-2: #3B3833;
  --muted: #6B675F;
  --rule: #D9D5CC;
  --rule-strong: #1B1A17;

  /* The seal. The only chromatic voice on the site. */
  --seal: #8C1D18;
  --seal-paper: #F6ECEA;

  /* Legacy aliases, kept so that nothing silently loses its colour: the
     older token names are still referenced in a handful of places. */
  --line: var(--rule);
  --line-strong: var(--muted);
  --accent: var(--seal);
  --accent-ink: var(--seal);
  --accent-soft: var(--seal-paper);
  --danger: var(--seal);

  /* The one status dot's two states (see .dot). */
  --dot-open: var(--seal);
  --dot-closed: var(--muted);

  --serif: 'Piazzolla', Georgia, 'Times New Roman', serif;
  --mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* No third family: the interface voice on this site is the mono. */
  --sans: var(--serif);

  --fs-mono: 13px;       /* the one mono size */
  --ls-mono: .06em;      /* the one mono tracking */

  --fs-xs: 13px;
  --fs-sm: 13px;
  --fs-ui: 15px;
  --fs-data: 17px;
  --fs-body: 18px;
  --fs-lede: 20px;
  --fs-h3: 20px;
  --fs-h2: clamp(1.8rem, 3.2vw, 2.4rem);
  --fs-h1: clamp(2.4rem, 5vw, 3.6rem);

  --measure: 68ch;
  --margin-col: 300px;
  --gutter: 56px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r: 0;
  --r-pill: 0;

  /* Motion. One reveal curve (the mock's), one hover duration. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-press: 120ms;
  --dur-hover: 150ms;
  --dur-reveal: 180ms;

  color-scheme: light;
  accent-color: var(--seal);
}

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

* { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-body)/1.55 var(--serif);
  font-optical-sizing: auto;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--seal-paper); color: var(--seal) }

:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
  border-radius: 0;
}
[id] { scroll-margin-top: var(--s5) }

a {
  color: var(--seal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--ink) }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance }
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 var(--s5); max-width: 22ch }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.01em; margin: var(--s8) 0 var(--s5) }
h3 { font-size: var(--fs-h3); line-height: 1.3; margin: var(--s6) 0 var(--s2) }
p { margin: 0 0 var(--s4); max-width: var(--measure) }
/* As a block the stamp is a line of the document, so it wraps; only the inline
   chip in the metadata line stays on one line. */
p.stamp { margin-bottom: var(--s6); max-width: none; white-space: normal }
p.mono { margin-bottom: var(--s6); max-width: none }
button + p.mono, .btn + p.mono { margin-top: var(--s4) }
ul, ol { max-width: var(--measure) }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--s6);
}
.muted { color: var(--muted) }
.small { font-size: var(--fs-ui); line-height: 1.6 }
code { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono) }

/* The record voice. Every identifier, date, label and clause number on the
   site is set with this, at one size and one tracking. */
.mono, .kicker, .runhead, .stamp, .cite, .metaline {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1.5;
  letter-spacing: var(--ls-mono);
  font-weight: 400;
}
.kicker, .runhead { color: var(--muted); text-transform: uppercase }
.runhead { margin: 0 0 var(--s8); max-width: none }
.kicker { margin: 0 0 var(--s5); max-width: none }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--s6) }
.narrow { max-width: var(--measure) }
/* A narrow page keeps the site gutter instead of re-centring its column under
   a full-width masthead: the container stays put, its children are measured. */
.wrap.narrow { max-width: 1240px }
.wrap.narrow > * { max-width: var(--measure) }
main { padding: var(--s8) 0 var(--s8) }

/* --- The document grid ----------------------------------------------------
   The whole site is laid on one grid: a measured content column and a working
   right margin for annotations, metadata and reveals. Below 900px the margin
   cells drop inline under the text they annotate, indented to the width of the
   clause-number column so they still read as marginalia.
--------------------------------------------------------------------------- */

.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, var(--margin-col));
  column-gap: var(--gutter);
  row-gap: var(--s7);
  align-items: start;
}
.doc-grid > .margin { padding-top: var(--s2) }
.margin > :last-child { margin-bottom: 0 }
/* A clause with no annotation leaves its margin cell empty. It must still hold
   its place in the two-column grid — display:none would let the next clause
   flow up into the margin column — so it is only zeroed, not removed. Once the
   columns stack (below), there is no column to hold and it goes entirely. */
.doc-grid > .margin:empty,
.doc-grid > .margin:not(:has(*)) { padding: 0 }

/* A margin note: hairline above, mono, quiet. */
.marginnote {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
  margin: 0 0 var(--s4);
  max-width: none;
}

@media (max-width: 900px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5) }
  .doc-grid > .margin { grid-column: auto; padding-left: 44px }
  .doc-grid > .margin:empty,
  .doc-grid > .margin:not(:has(*)) { display: none }
}

/* --- Masthead and navigation --------------------------------------------- */

/* Skip link. Off-screen until focused, then a ruled mono chip in the corner. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9;
  background: var(--paper);
  color: var(--seal);
  border: 1px solid var(--seal);
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-decoration: none;
}
.skip:focus { left: 16px; top: 16px }

header.site { border-bottom: 1px solid var(--rule); background: var(--paper) }
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: 26px 0 18px;
}
.wordmark {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  align-content: center;
}
.wordmark .mark { grid-row: 1 / span 2; display: block }
.wordmark:hover { color: var(--seal) }
.wordmark span {
  grid-column: 2;
  display: block;
  margin-top: var(--s1);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted);
}

nav.site { display: flex; flex-wrap: wrap; column-gap: clamp(14px, 2.2vw, 28px); row-gap: 0; justify-content: flex-end }
nav.site a {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
}
nav.site a:hover { color: var(--seal) }
nav.site a.current { color: var(--seal) }

@media (max-width: 720px) {
  .wrap { padding: 0 var(--s5) }
  nav.site { justify-content: flex-start }
}

/* --- Consultation status bar ----------------------------------------------
   Not a coloured slab any more: the site's metadata line, set in mono under a
   hairline, with the dated stamp chip carrying the close date.
--------------------------------------------------------------------------- */

.statusbar { background: var(--paper); border-bottom: 1px solid var(--rule) }
.statusbar .wrap {
  display: flex;
  align-items: center;
  gap: var(--s2) var(--s5);
  flex-wrap: wrap;
  padding: var(--s3) var(--s6);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--muted);
}
.statusbar strong { font-weight: 400; color: var(--ink) }
.statusbar a { color: var(--muted); text-decoration-thickness: 1px }
.statusbar a:hover { color: var(--seal) }
.statusbar .links { margin-left: auto }
/* The one status dot on the site. It carries real state (the comment period is
   open or closed) and is paired with the words that say so, so it is an
   indicator rather than decoration. Square, like everything else here. */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--dot-open);
  margin-right: var(--s2);
  vertical-align: middle;
}
.dot.closed { background: var(--dot-closed) }

/* The dated stamp chip: mono, seal on seal-paper. Used for the close date and
   anywhere else the record carries a date-stamped state. */
.stamp {
  display: inline-block;
  color: var(--seal);
  background: var(--seal-paper);
  padding: var(--s2) var(--s3);
  white-space: nowrap;
}

/* --- Notices, callouts, messages ------------------------------------------
   Elevation is a hairline. No shadowed cards; the seal lives in the label.
--------------------------------------------------------------------------- */

.notice {
  background: var(--paper);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  padding: var(--s4) 0 var(--s5);
  margin: 0 0 var(--s6);
  max-width: var(--measure);
  font-size: var(--fs-ui);
  line-height: 1.6;
}
.notice b {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.callout {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: var(--s5);
  margin: 0 0 var(--s6);
  max-width: var(--measure);
}
.callout > :first-child { margin-top: 0 }
.callout > :last-child { margin-bottom: 0 }

.errors, .ok {
  padding: var(--s4) 0;
  margin-bottom: var(--s6);
  max-width: var(--measure);
  border-top: 1px solid var(--seal);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-ui);
  line-height: 1.6;
}
.errors { color: var(--seal) }
.ok { border-top-color: var(--rule-strong); color: var(--ink) }
.errors ul { margin: var(--s2) 0 0; padding-left: var(--s5) }
.errors li + li { margin-top: var(--s1) }

.empty {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s7) 0;
  color: var(--ink);
  font-size: var(--fs-lede);
  line-height: 1.5;
}
.empty .small {
  display: inline-block;
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--muted);
}

/* --- Clauses --------------------------------------------------------------
   The four terms, set as clauses of a draft: a mono number column, a serif
   title, the text, and a hairline above each.
--------------------------------------------------------------------------- */

.clause {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: 20px;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
}
.clause .num {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: 1.5;
  color: var(--muted);
}
.clause .num b { display: block; font-weight: 400; color: var(--ink) }
.clause h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 10px;
}
.clause p { margin: 0; max-width: 62ch }

@media (max-width: 900px) {
  /* Too narrow for a number column: the clause number and its term label sit
     on their own line above the title, as a kicker. */
  .clause { grid-template-columns: minmax(0, 1fr) }
  .clause .num { display: flex; gap: 10px; margin-bottom: var(--s2) }
  .clause .num b { display: inline }
}

/* Legacy .terms/.term markup on the Accord page is now laid out as clauses;
   the grid container just stacks them. */
.terms { margin: var(--s7) 0 }

/* --- Margin annotation ----------------------------------------------------
   A pinned note in the working margin: 2px seal rule, mono, and the one
   entrance on the site (see Motion).
--------------------------------------------------------------------------- */

.annotation {
  border-left: 2px solid var(--seal);
  padding: 2px 0 2px 14px;
  transform-origin: top left;
}
.annotation a {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--seal);
  text-decoration: none;
  border-bottom: 1px solid var(--seal);
  padding-bottom: 1px;
}
.annotation a:hover { color: var(--ink); border-bottom-color: var(--ink) }
.annotation p {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: 1.5;
  color: var(--muted);
  margin: var(--s2) 0 0;
  max-width: none;
}

/* --- The ruled CTA box ---------------------------------------------------- */

.cta {
  display: block;
  border: 1px solid var(--ink);
  padding: 22px 24px;
  text-decoration: none;
  color: var(--seal);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  max-width: var(--measure);
}
.cta span {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--muted);
  font-weight: 400;
  margin-top: var(--s2);
}
.cta:hover { background: var(--seal-paper); border-color: var(--seal); color: var(--seal) }
.ctas { display: grid; row-gap: var(--s4); margin: var(--s7) 0 var(--s4); max-width: var(--measure) }

/* --- Buttons --------------------------------------------------------------
   A button is a ruled control, not a filled pill. The primary one is ink-ruled
   with seal text; the ghost is the same control with a hairline.
--------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: transparent;
  color: var(--seal);
  text-decoration: none;
  padding: 14px 18px;
  min-height: 44px;
  font: 400 var(--fs-mono)/1.3 var(--mono);
  letter-spacing: var(--ls-mono);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}
.btn.ghost { border-color: var(--rule); color: var(--muted) }
.btn:disabled { opacity: .5; cursor: not-allowed }
.btn:not(:disabled):hover { background: var(--seal-paper); border-color: var(--seal); color: var(--seal) }
.btn.ghost:not(:disabled):hover { background: var(--seal-paper); border-color: var(--seal); color: var(--seal) }
.btnrow { display: flex; gap: var(--s3); flex-wrap: wrap; margin: var(--s6) 0 var(--s3) }

/* --- Figures --------------------------------------------------------------
   Counts, set as a ruled row: hairline above each cell, serif figure, mono
   label. No filled tiles.
--------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  column-gap: var(--s5);
  row-gap: var(--s5);
  margin-bottom: var(--s7);
}
.stat { border-top: 1px solid var(--rule); padding: var(--s3) 0 0 }
.stat .n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .l {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: 1.4;
  color: var(--muted);
}

/* --- Register controls ---------------------------------------------------- */

.controls { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-bottom: var(--s4) }
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5) }
.chip {
  font: 400 var(--fs-mono)/1.3 var(--mono);
  letter-spacing: var(--ls-mono);
  padding: var(--s2) var(--s3);
  min-height: 34px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  border-radius: 0;
  cursor: pointer;
}
.chip:hover { border-color: var(--seal); color: var(--seal) }
.chip.on { background: var(--seal-paper); border-color: var(--seal); color: var(--seal) }
.count {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s3);
}

/* --- Tables ---------------------------------------------------------------
   The register reads as a document table: a heavy rule under the head, mono
   column headers, hairlines between rows, no fills.
--------------------------------------------------------------------------- */

/* Wide tabular data scrolls inside its own container rather than forcing the
   page to scroll sideways. The container is focusable so it can be scrolled
   from the keyboard. */
.table-wrap { overflow-x: auto; margin-bottom: var(--s7) }
.table-wrap > table { margin-bottom: 0 }

table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: transparent;
  border-top: 1px solid var(--rule-strong);
  font-size: var(--fs-data);
  line-height: 1.45;
}
thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  vertical-align: bottom;
}
tbody td { padding: var(--s4) var(--s4) var(--s4) 0; vertical-align: top; border-top: 1px solid var(--rule) }
tbody tr:first-child td { border-top: 0 }
tbody tr.row { cursor: pointer }
tbody tr.row:hover td, tbody tr.row:focus-within td { background: var(--seal-paper) }
td.id, td.id a {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  font-variant-numeric: tabular-nums;
  color: var(--seal);
  white-space: nowrap;
}
td.sec {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--muted);
  white-space: nowrap;
}
td.who { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); color: var(--muted) }
td.who em { display: block; font-style: normal; margin-top: 2px }
.caret { color: var(--muted); font-size: 11px }
tbody tr.row:hover .caret { color: var(--seal) }

/* Disposition stamps. A mono chip, seal border and seal text on seal-paper,
   struck slightly off square as a rubber stamp is. The label carries the
   meaning, so the five dispositions share one stamp rather than five colours —
   with one exception: "Under review" is not a disposition at all, so it is set
   as a quiet unstamped label instead of a stamp that has not been made yet. */
.tag, .badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--ls-mono);
  line-height: 1.4;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--seal);
  background: var(--seal-paper);
  color: var(--seal);
  border-radius: 0;
  white-space: nowrap;
  transform: rotate(-1.2deg);
}
.t-open, .badge.prep {
  border-color: var(--rule);
  background: transparent;
  color: var(--muted);
  transform: none;
}
/* .t-accepted / .t-modified / .t-declined / .t-deferred all take the stamp
   above unchanged; they are listed here so a grep for them finds this note. */

/* --- Register detail row -------------------------------------------------- */

tr.detail > td { background: transparent; border-top: 0; padding: 0 var(--s4) var(--s7) 0 }
.detail-inner { padding-top: var(--s2); display: grid; row-gap: var(--s5) }
.dl-h {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}
blockquote { margin: 0 }
.reasoning { max-width: 62ch; font-size: 17px; line-height: 1.6 }
.quote {
  margin: 0;
  border-left: 1px solid var(--rule);
  padding-left: var(--s5);
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.meta {
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--muted);
}
.pending {
  display: inline-block;
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--muted);
}

/* --- Versions and tracked changes -----------------------------------------
   /draft is the working copy's revision history: each version opens on a heavy
   rule with a serif label and a mono date, and every changelog line cites the
   comment that caused it. Hovering or focusing a line lights its cite chip and
   brings the margin cell — the cited comment's section and summary — up from
   dimmed to full. We hold no before/after redline text in the database, so the
   margin shows the real cited comment rather than a fabricated strike-through.
--------------------------------------------------------------------------- */

.ver { margin: var(--s8) 0 0 }
.ver-h {
  display: flex;
  align-items: baseline;
  gap: var(--s3) var(--s5);
  flex-wrap: wrap;
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--s5);
  margin-bottom: var(--s5);
}
.ver-h .v { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.2 }
.ver-h .small { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono) }
.ver-b { padding: 0 }
.ver-b > .small { margin-bottom: var(--s5) }
.ver-b > blockquote.quote { margin-bottom: var(--s4) }
.ver-b ul.lines { margin: 0; padding: 0; list-style: none; max-width: none }

li.line {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, var(--margin-col));
  column-gap: var(--gutter);
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
li.line .text { font-size: var(--fs-body); line-height: 1.55 }
li.line .margin { font-size: 15px; line-height: 1.6 }
@media (max-width: 900px) {
  li.line { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3) }
  li.line .margin { padding-left: 44px }
}

a.cref, .cite {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--seal);
  text-decoration: none;
  background: transparent;
  padding: 2px 4px;
  white-space: nowrap;
}
a.cref:hover, li.line:hover a.cref, li.line:focus-within a.cref { background: var(--seal-paper) }

/* The margin cell of a changelog line: dimmed until its line is hovered or
   focused, then full — the mock's reveal, carried by real data. */
li.line .exlabel {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  margin: 0 0 var(--s2);
  max-width: none;
}
li.line .excerpt { color: var(--muted); opacity: .55; margin: 0; max-width: none }
li.line:hover .exlabel, li.line:focus-within .exlabel { color: var(--seal); border-top-color: var(--seal) }
li.line:hover .excerpt, li.line:focus-within .excerpt { opacity: 1; color: var(--ink) }

/* Redline marks, for wherever tracked text is genuinely held: a struck run and
   an inserted run, both in the seal. */
.struck { color: var(--seal); text-decoration: line-through; text-decoration-color: var(--seal) }
.insert { color: var(--seal); border-bottom: 1px solid var(--seal) }

/* --- Forms ----------------------------------------------------------------
   A form is a ruled block on the page, not a card. Labels are mono; the
   fields themselves are serif, because what is typed into them is document
   text that will be published verbatim.
--------------------------------------------------------------------------- */

.form {
  background: transparent;
  border-top: 1px solid var(--rule-strong);
  padding: var(--s6) 0 0;
  max-width: var(--measure);
}
.field { margin-bottom: var(--s5) }
.field:last-of-type { margin-bottom: var(--s5) }
.field label.q {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}
.field .hint { font-size: var(--fs-ui); color: var(--muted); line-height: 1.55; margin-bottom: var(--s2); max-width: var(--measure) }

input, select, textarea {
  font-family: var(--serif);
  font-size: var(--fs-ui);
  line-height: 1.5;
  padding: 10px var(--s3);
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  caret-color: var(--seal);
}
input[type=search] { min-width: 15rem }
input:hover, select:hover, textarea:hover { border-color: var(--muted) }
input:focus, select:focus, textarea:focus { border-color: var(--seal) }
/* :user-invalid only fires after the visitor has actually interacted, so a
   required field is not shown as an error before it has been reached. */
input:user-invalid, textarea:user-invalid { border-color: var(--seal) }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1 }

.field input[type=text], .field input[type=email], .field input[type=password],
.field select, .field textarea { width: 100% }
.field textarea { min-height: 9.5rem; resize: vertical }

.radio {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule);
  border-radius: 0;
  margin-bottom: var(--s2);
  background: transparent;
  cursor: pointer;
}
.radio:hover { border-color: var(--muted) }
.radio:has(:checked) { border-color: var(--seal); background: var(--seal-paper) }
.radio:focus-within { outline: 2px solid var(--seal); outline-offset: 2px }
.radio input { margin: 4px 0 0; width: auto; flex: none }
.radio b { display: block; font-size: var(--fs-ui); font-weight: 600 }
.radio span.d { font-size: var(--fs-ui); color: var(--muted); line-height: 1.5 }
.req { color: var(--seal) }

/* Honeypot. Off-screen rather than display:none so that bots still fill it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* --- Colophon (footer) ----------------------------------------------------
   The record line, a hairline, then the claims and a quiet correspondence
   cell in the working margin.
--------------------------------------------------------------------------- */

footer.site {
  margin-top: var(--s8);
  border-top: 1px solid var(--rule-strong);
  background: var(--paper);
  padding: var(--s5) 0 var(--s8);
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}
footer.site .record {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s6);
  max-width: none;
}
footer.site .cols {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(0, var(--margin-col));
  column-gap: var(--gutter);
  row-gap: var(--s5);
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
}
@media (max-width: 900px) { footer.site .cols { grid-template-columns: 1fr } }
footer.site p { max-width: 60ch }
footer.site strong { color: var(--ink); font-weight: 600 }
footer.site a { color: var(--muted) }
footer.site a:hover { color: var(--seal) }
footer.site .links {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  line-height: 1.9;
  margin-top: var(--s3);
  max-width: none;
}

/* --- Motion ---------------------------------------------------------------
   Two things move on this site. The margin annotation pins itself in once, on
   load, as a note being pushed into the margin of a working copy; and state
   changes (hover, focus, disclosure) transition rather than snap. Nothing
   animates on scroll and there is no entrance choreography anywhere else.
--------------------------------------------------------------------------- */

@keyframes pinIn {
  0%   { opacity: 0; transform: translate(10px, -6px) rotate(-2.4deg) }
  70%  { opacity: 1; transform: translate(0, 0) rotate(-1.1deg) }
  100% { opacity: 1; transform: translate(0, 0) rotate(-0.6deg) }
}

@media (prefers-reduced-motion: no-preference) {
  .annotation { animation: pinIn 600ms var(--ease-out) 400ms both }

  a, .wordmark, nav.site a, .statusbar a, a.cref, .cite, .cta, .btn, .chip {
    transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease,
                border-color var(--dur-hover) ease;
  }
  /* Press feedback: the control moves under the pointer at the moment of the
     press, not on release. */
  .btn:not(:disabled):active, .chip:active { transform: scale(.98) }
  tbody tr.row td { transition: background-color var(--dur-hover) ease }
  input, select, textarea, .radio { transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease }

  /* The tracked-changes reveal on /draft, and the register row expanding. Both
     use the mock's curve at 180ms. */
  li.line .exlabel { transition: color var(--dur-reveal) var(--ease-out), border-top-color var(--dur-reveal) var(--ease-out) }
  li.line .excerpt { transition: opacity var(--dur-reveal) var(--ease-out), color var(--dur-reveal) var(--ease-out) }
  a.cref, .cite { transition: background-color var(--dur-reveal) var(--ease-out), color var(--dur-hover) ease }

  /* Disclosure: expanding a register row would otherwise teleport a block of
     text into the middle of the table. This bridges that change. The row itself
     is toggled with the hidden attribute by register.js, so the animation is
     carried by the contents, which begin to run the moment they are displayed. */
  tr.detail:not([hidden]) .detail-inner { animation: disclose var(--dur-reveal) var(--ease-out) both }
  @keyframes disclose {
    from { opacity: 0; transform: translateY(-3px) }
    to   { opacity: 1; transform: none }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Reduced, not removed: the annotation is simply already pinned, and the
     disclosure still fades so the new content is noticed, but nothing moves. */
  .annotation { animation: none; opacity: 1; transform: rotate(-0.6deg) }
  tr.detail:not([hidden]) .detail-inner { animation: disclose-fade var(--dur-reveal) ease both }
  @keyframes disclose-fade { from { opacity: 0 } to { opacity: 1 } }
}

/* --- Print ----------------------------------------------------------------
   Consultation documents get printed and circulated. The printed page keeps the
   record and drops the interface: no navigation, no filters, no forms, every
   register row expanded, and link targets written out so a paper copy is still
   traceable.
--------------------------------------------------------------------------- */

@media print {
  :root { --fs-body: 10.5pt; --fs-mono: 8.5pt; --measure: none; --margin-col: 1fr }
  body { background: #fff; color: #000; font-size: 10.5pt }
  /* Only chrome forms (subscribe/follow/sign-in prompts) are dropped; forms
     that carry document content — /submit, the admin queue — must still
     print, so the blanket "form" selector is scoped to .form-chrome. */
  header.site nav.site, .statusbar, .controls, .chips, .btn, .btnrow, .form-chrome, .cta, .ctas { display: none }
  header.site { border-bottom: 1px solid #999 }
  main { padding: 12pt 0 0 }
  .wrap { max-width: none; padding: 0 }
  a { color: #000; text-decoration: underline }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all }
  table, .ver, .notice, .callout, .form, .stats, .empty { background: #fff; border-color: #999 }
  .stat { border-top: 1px solid #999 }
  table { font-size: 9.5pt; min-width: 0; border-top-color: #999 }
  .table-wrap { display: block; overflow: visible }
  /* Print the whole record, not just the rows a reader happened to open. */
  tr.detail[hidden] { display: table-row }
  tr.detail > td { background: #fff }
  .caret { display: none }
  /* The inline column widths are sized for the interactive table; on paper the
     comment column should take the space the filters no longer need. */
  thead th { width: auto !important }
  /* Stamps print as ruled labels, square: a rotated chip reproduces badly and
     the seal is not a print colour. */
  .tag, .badge { transform: none; background: #fff; border-color: #666; color: #000 }
  .stamp { background: #fff; color: #000; border: 1px solid #666 }
  .annotation { animation: none; opacity: 1; transform: none; border-left-color: #666 }
  /* On paper the working margin is not a second column — everything reads in
     one measure, in order. */
  .doc-grid, footer.site .cols, li.line { display: block }
  .doc-grid > .margin, li.line .margin { padding-left: 0; margin-top: 6pt }
  li.line .excerpt { opacity: 1; color: #000 }
  li.line .exlabel { color: #444 }
  h1, h2, h3 { break-after: avoid }
  tr.row, .ver, .clause, .term, .notice, .callout, li.line { break-inside: avoid }
  /* A full comment is often taller than a page, so let it flow across one. */
  tr.detail, tr.detail > td { break-inside: auto }
  footer.site { margin-top: 18pt; border-top: 1px solid #999; color: #333 }
}