/* STRIX — surface styles.
   Consumes the semantic tokens from colors_and_type.css. Mode is a class flip
   on <html>; nothing here hardcodes a hex.

   The local --roost-muted override is GONE (a8017003). It existed because the
   canonical token shipped as an alpha value that measured 4.19:1 on Pepper
   White, and this surface's whole job is being readable. Brand doc v2.1 fixed
   the token itself to the opaque #5C5C5A (6.09:1), so the override is
   superseded and comes out in the same commit as the fix, per the contrast
   standard — a per-surface patch left standing after its cause is repaired is
   how a fleet ends up with three different greys.

   NO STATUS COLOURS ANYWHERE (CD ruling ②, ratified). There is no semantic
   red, amber or green in this file. Exception states differentiate by weight,
   position and language. Staleness cannot borrow alarm styling because alarm
   styling does not exist. The one accent in use is Primary Blue, and it marks
   an overline, not a severity.

   Colour is never the sole carrier of meaning on this surface. */

:root {
  --roost-rail: 15rem;
  --roost-gap: 1.5rem;

  /* .btn hover fill. It has to be theme-scoped because the button's ink does
     not change on hover: light writes --fg-on-accent white, so it darkens to
     Deep Navy. Dark writes Owl Black, and Deep Navy under Owl Black measures
     1.6:1 — the label disappears under the cursor. Dark therefore hovers
     LIGHTER, on the periwinkle hover tint the CD bundle already ships. */
  --roost-btn-hover: var(--gog-deep-navy);
}

.theme-dark {
  --roost-btn-hover: var(--gog-periwinkle-hover);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  display: grid;
  grid-template-columns: var(--roost-rail) minmax(0, 1fr);
  min-height: 100vh;
}

/* The skip link carries its colours at all times, not only on :focus. Left to
   the browser default it is #0000EE, which on the dark surface measures
   2.07:1 — the contrast pass caught it off-screen, where eyes never go. */
.skip {
  position: absolute;
  left: -9999px;
  background: var(--bg-1);
  color: var(--fg-1);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-strong);
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── nav rail ─────────────────────────────────────────────────────────── */
.rail {
  border-right: 1px solid var(--border-2);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.rail-name {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--fg-1);
}

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.rail-link {
  display: block;
  padding: 0.5rem 0.625rem;
  color: var(--fg-1);
  text-decoration: none;
  border-left: 2px solid transparent;
  font-size: 0.9375rem;
}
.rail-link:hover { background: var(--bg-2); }
.rail-link:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

/* Active is weight + a rule, not a colour. */
.rail-link.is-active {
  font-weight: 600;
  border-left-color: var(--fg-accent);
  background: var(--bg-2);
}

.rail-soon {
  display: block;
  font-size: 0.75rem;
  color: var(--fg-muted);
}

.rail-foot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

/* ── main ─────────────────────────────────────────────────────────────── */
.main {
  padding: 2rem clamp(1rem, 4vw, 3rem);
  max-width: 68rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--roost-gap);
}

.pane {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  min-width: 0;
}

.pane-narrow { max-width: 32rem; }

.pane-h {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

.overline {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-accent);
}

.lead {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  color: var(--fg-1);
}

.flat { margin: 0 0 0.5rem; color: var(--fg-1); }

.note {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

/* A note that OPENS a pane rather than closing one. Same type, margin flipped:
   .note is built to trail its content, and a head sentence has to lead it. */
.note-head { margin: 0 0 0.75rem; }

.stamp {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--fg-muted);
  font-family: var(--font-mono);
}

.link, a.link { color: var(--fg-link); }

/* Dark-mode legibility: --fg-accent and --fg-link resolve to Periwinkle, which
   over --bg-1 (Deep Navy) measures 3.78:1 — fine for a border, short of the
   4.5 floor for small text. On dark these two carry type on the card, so they
   move to --fg-1 and keep their distinction from weight, case and spacing.
   Nothing is lost: colour was never carrying the meaning. */
.theme-dark .overline,
.theme-dark .link,
.theme-dark a.link { color: var(--fg-1); }
.theme-dark .digest-fold[open] > .digest-line { color: var(--fg-1); text-decoration: underline; }

/* Ruling ② of 0bf432e7 (CD, 2026-08-15): NAVY CARRIES NO MUTED TEXT — the
   pairing is the unit, not the token. Opaque dark muted (#9A9A98) clears the
   house target on Owl Black (6.89) and card (6.16) but lands 4.35 on navy,
   and a grey that WOULD clear 6:1 on navy is indistinguishable from Fog, the
   tier above it. Navy has room for two text tiers, not three. So inside the
   navy ground (.pane = --bg-1), muted RESOLVES to --fg-2 (Fog, 6.59 on navy).
   Scoped to the container rather than per-selector so the next muted element
   added inside a pane inherits the rule instead of reintroducing the defect. */
.theme-dark .pane { --fg-muted: var(--fg-2); }

/* ── re-entry ─────────────────────────────────────────────────────────── */
.pane-reentry { border-left: 3px solid var(--border-strong); }

.figures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.figures li { display: flex; flex-direction: column; }

/* All three figures share one type. The third is not styled as relief; it is
   simply another number, which is what makes it answer the thought instead of
   performing an answer. */
.figure {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--fg-1);
}
.figure-l { font-size: 0.875rem; color: var(--fg-muted); }

/* ── escalation: a note, not an alarm ─────────────────────────────────── */
.pane-escalation { border: 1px solid var(--border-strong); }

.esc-task {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  color: var(--fg-1);
}

/* flex-start, not center: the "Open" disclosure grows downward when it opens
   and its facts must sit under their own trigger, not shove "Not today" about. */
.row-actions {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Open in place. Once expanded it takes the row and "Not today" wraps beneath,
   which keeps the decline reachable instead of stranding it beside a list. */
.esc-fold { margin: 0; min-width: 0; }
.esc-fold[open] { flex: 1 1 100%; }
.esc-fold > summary { list-style: none; }
.esc-fold > summary::-webkit-details-marker { display: none; }
.esc-fold > summary::marker { content: ""; }

.esc-facts {
  margin: 0.75rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.625rem 1.25rem;
}
.esc-facts > div { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.esc-facts dt {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.esc-facts dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--fg-1);
  overflow-wrap: anywhere;
}
.esc-facts dd.mono { font-family: var(--font-mono); font-size: 0.8125rem; }

/* ── digest ───────────────────────────────────────────────────────────── */
.digest-subject {
  margin: 0 0 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--fg-1);
}
.digest-body p {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 0.75rem;
  color: var(--fg-1);
  max-width: 42rem;
}

/* The fold (32097afe ②). Shut, the summary IS the read's opening line and wears
   the prose face; open, it demotes to a plain control so the line does not read
   twice in the same type. Two spans, one CSS switch — no script on this page. */
.digest-fold { margin: 0; }

.digest-line {
  cursor: pointer;
  max-width: 42rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--fg-1);
}
.digest-line:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

.digest-fold[open] > .digest-line {
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-link);
  margin-bottom: 0.5rem;
}

.digest-fold[open] .fold-shut,
.digest-fold:not([open]) .fold-open { display: none; }

/* "One line" is a claim about the rendered box, not the character count. The
   server picks the opening sentence without knowing the viewport, and 103
   characters is one line at 1280px and four at 390px — the narrow reader got
   back the density the fold was built to remove. Clamped here, where the
   viewport is known. Nothing is lost: the whole read is one press away.
   The clamp goes on the SUMMARY, not on an inner span: clamping the span makes
   it a block box, and the list marker then takes a line box of its own — the
   two-line rule measured three and the check said so. */
.digest-fold:not([open]) > .digest-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Which means the disclosure marker has to be ours, inside that box. Drawn in
   borders rather than set as a glyph: ▸ is not in every IBM Plex cut and a
   missing marker is a control with no affordance. currentColor carries it
   through both themes with no second rule. */
.digest-line { list-style: none; }
.digest-line::-webkit-details-marker { display: none; }
.digest-line::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.5rem;
  border-left: 0.38rem solid currentColor;
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
}
.digest-fold[open] > .digest-line::before {
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.38rem solid currentColor;
  border-bottom: 0;
  vertical-align: 0.1em;
}

/* ── movement ─────────────────────────────────────────────────────────── */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem;
}
.column { min-width: 0; }

.column-h {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-muted);
}
.column-list {
  margin: 0;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.column-list li {
  font-size: 0.9375rem;
  color: var(--fg-1);
  overflow-wrap: anywhere;
}
.column-empty, .more {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

/* ── chips: neutral, never ordered by shame ───────────────────────────── */
.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-1);
  font-size: 0.875rem;
  text-decoration: none;
}
.chip:hover { border-color: var(--border-strong); }
.chip:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.chip.is-open { border-color: var(--fg-accent); font-weight: 600; }
/* A couldn't-check chip is a <span>, not a link, but it wears the identical
   pill. Muted italic is a weak tell when it sits alone in a degraded state with
   no live chip beside it to compare against — so it also refuses the pointer. */
.chip.is-unreadable { color: var(--fg-muted); font-style: italic; cursor: default; }
.chip-n { font-weight: 600; font-variant-numeric: tabular-nums; }

/* the basement — inline, beneath the chip row, face intact above */
.drill {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  background: var(--bg-2);
}
.drill-h {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: var(--fg-1);
}
.drill-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 22rem;
  overflow-y: auto;
}
.drill-list li {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-1);
}
.drill-task { color: var(--fg-1); font-size: 0.9375rem; overflow-wrap: anywhere; }
.drill-meta { color: var(--fg-muted); font-size: 0.75rem; }

/* ── state grid ───────────────────────────────────────────────────────── */
.state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}
.state-cell { min-width: 0; }

/* Nominal is a hollow ring and a word. There is no filled/green counterpart,
   by design — see the file header. */
.ring-row { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.375rem; }
.ring {
  width: 0.75rem;
  height: 0.75rem;
  /* 1.5px, per CD's ruled ladder — his own render already draws it there.
     NOT 2px full ink: that weight is reserved to the quarantine band alone,
     and a nominal indicator wearing the exception's weight is how a reserved
     signal stops being a signal. FOCUS RINGS ARE EXEMPT BY CATEGORY (outline
     is not border) — the 2px focus-visible outlines stand, and that exemption
     is now written down rather than assumed. */
  border: 1.5px solid var(--fg-1);
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.ring-word { font-weight: 600; color: var(--fg-1); }

.pickup { font-size: 0.875rem; overflow-wrap: anywhere; }

/* ── footer ───────────────────────────────────────────────────────────── */
.face-foot {
  padding: 0 0.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.counts {
  margin: 0;
  font-size: 0.875rem;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.sources { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); }

/* ── controls ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--fg-accent);
  color: var(--fg-on-accent);
  border: 1px solid var(--fg-accent);
  border-radius: 3px;
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--roost-btn-hover); border-color: var(--roost-btn-hover); }
.btn:focus-visible { outline: 2px solid var(--fg-1); outline-offset: 2px; }

.btn-quiet {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 1px solid var(--border-2);
  border-radius: 3px;
  color: var(--fg-1);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
}
.btn-quiet:hover { border-color: var(--border-strong); }
.btn-quiet:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

.form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-2);
  border-radius: 3px;
  background: var(--bg-0);
  color: var(--fg-1);
  font: inherit;
}
.input:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 1px; }

.theme-switch { margin: 0; }

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 52rem) {
  body { grid-template-columns: minmax(0, 1fr); }
  .rail {
    border-right: none;
    border-bottom: 1px solid var(--border-2);
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
  }
  .rail-list { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; flex: 1 1 100%; }
  /* The phase label rides along instead of being hidden. Suppressed here, the
     narrow rail showed four not-built sections as ordinary nav — indistinguishable
     from Home until you tapped one. A label that only appears on the wide layout
     warns the reader who was least likely to need warning. */
  .rail-soon { display: inline; margin-left: 0.375rem; }
  .rail-link { border-left: none; border-bottom: 2px solid transparent; }
  .rail-link.is-active { border-left: none; border-bottom-color: var(--fg-accent); }
  .main { padding: 1.25rem 1rem; }
  .figures { gap: 1.25rem; }
}

/* ── S5 Pantheon · S6 Workspace · S1 hygiene chip (a8017003) ─────────────
   Rule weights, per CD: hairlines at 10% ink, structural rules at 20%.
   The quarantine band's 2px full-ink rules are reserved to it alone.

   RESOLVED (Sadie ruling ② S258): .ring shipped `border: 2px solid var(--fg-1)`
   — the reserved weight, on a NOMINAL indicator. Escalated rather than quietly
   re-weighted, because a nominal element wearing the exception's weight is how
   a reserved signal stops being one. Ruled a one-line restyle onto the ink
   ladder, applied above. The band is now the only 2px full-ink rule here, and
   it does not rest on that alone: it sits above the title, replaces the
   summary, and has no dismiss.

   No status colours. No icons. Hollow rings are borders, not glyphs. */

.band-h {
  font-family: var(--font-condensed, var(--font-display));
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg-1) 10%, transparent);
}

/* ── S5: exception cards ─────────────────────────────────────────────── */
.ex-list, .roster, .docs { list-style: none; margin: 0; padding: 0; }

.ex-card {
  border-left: 3px solid var(--fg-1);      /* full ink, 3px — CD build note 5 */
  padding: 0.75rem 0 0.75rem 0.875rem;
  margin: 0 0 1rem;
}
.ex-name { font-weight: 600; margin: 0 0 0.25rem; }
.ex-sentence {
  font-family: var(--font-body, Georgia, serif);
  margin: 0 0 0.5rem;
  color: var(--fg-1);
}
.ex-gate { margin: 0 0 0.125rem; font-size: 0.875rem; }
.ex-k {
  font-family: var(--font-condensed, var(--font-display));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  color: var(--fg-muted);
  display: inline-block;
  min-width: 4.5rem;
}
/* Owner and Gate are ALWAYS rendered, and an absent owner prints the words
   "not named" in the SAME type as any other value — never blank, never a dash,
   never a different weight. A missing name in a field that always carries one
   is already the loudest thing on the card, and it points at the fix. */
.ex-v { color: var(--fg-1); }
.ex-meta { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--fg-muted); }

/* ── S5: write-backs (AC 23) ─────────────────────────────────────────────
   Seen · Not this week · Send to Sadie. Three peers, no primary: none of them
   is the recommended one, and giving one a filled .btn would say otherwise in
   the only vocabulary this surface has.

   CD's dimensions, not .btn-quiet's. The first cut reused .btn-quiet (14px,
   8px padding) and measured 294px across six exception cards, which put
   /pantheon over the two-screen ceiling on its own. CD specified a smaller
   control — 11px condensed uppercase on 7px/12px padding, 8px gap, the row
   only 2px off the card above — and the difference is not cosmetic at this
   roster volume. This is the ruled design implemented, not a size chosen to
   buy a number. */
.ex-actions {
  gap: 0.5rem;
  padding-top: 0.125rem;
  margin-top: 0.375rem;
}
.ex-actions form { margin: 0; }
.btn-ack {
  font-family: var(--font-condensed, var(--font-display));
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-1);
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 0.4375rem 0.75rem;
  cursor: pointer;
}
.btn-ack:hover { border-color: var(--fg-1); }
.btn-ack:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

/* "Handled today". A structural rule at 20% ink separates it from the cards
   above — it is a different KIND of list, not a quieter one, and the reserved
   2px full-ink weight stays reserved. */
.handled {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid color-mix(in srgb, var(--fg-1) 20%, transparent);
}
.handled-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.handled-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.375rem;
}
.handled-list form { margin: 0; }
.handled-name { font-weight: 500; color: var(--fg-1); }
.handled-verdict {
  font-family: var(--font-body, Georgia, serif);
  font-size: 0.875rem;
  color: var(--fg-muted);
}

/* Undo is a text control, not a button — it undoes rather than does, and a
   third bordered control in the same eyeline would compete with the three that
   act. Sized to the 44px touch target via padding, not via a visible box. */
.btn-bare {
  font-family: var(--font-condensed, var(--font-display));
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: transparent;
  border: 0;
  padding: 0.375rem 0.25rem;
  cursor: pointer;
}
.btn-bare:hover { color: var(--fg-1); }
.btn-bare:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

/* A write-back that failed. NO ALARM STYLING — none exists on this surface and
   inventing a red for one sentence would be the first status colour in the
   file. It carries weight the way every other exception here does: position
   (first thing under the heading), a full-ink left edge, and plain words. */
.cmd-error {
  border-left: 3px solid var(--fg-1);
  padding: 0.25rem 0 0.25rem 0.875rem;
  margin: 0 0 1rem;
  font-family: var(--font-body, Georgia, serif);
  color: var(--fg-1);
}

/* ── S5: nominal roster — a page of names ────────────────────────────── */
.roster { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.ag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid color-mix(in srgb, var(--fg-1) 20%, transparent);
  border-radius: 999px;
}
.ag-ring {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--fg-muted);        /* hollow, unhued */
  flex: 0 0 auto;
}
.ag-name { font-size: 0.875rem; }
.ag-fresh {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--fg-muted);
}
/* The single 90-day step: muted ink -> full ink, and it stops there.
   There is no second escalation, and staleness never borrows the 2px weight. */
.ag.is-old .ag-fresh { color: var(--fg-1); }

/* ── S6: documents + the quarantine band ─────────────────────────────── */
.doc {
  padding: 0.75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg-1) 10%, transparent);
}
.doc-title { margin: 0 0 0.25rem; font-weight: 600; }
.doc-v { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8125rem; color: var(--fg-muted); }
.doc-lede { margin: 0 0 0.25rem; font-family: var(--font-body, Georgia, serif); }
.doc-meta { margin: 0; font-size: 0.8125rem; color: var(--fg-muted); font-family: var(--font-mono, ui-monospace, monospace); }
.doc-meta.is-old { color: var(--fg-1); }

/* The warning is part OF the row, not decoration ON it. It takes the row's own
   space, in the row's own ink. Removing it leaves a visible hole, because a
   quarantined row has no summary to fall back on — the band replaced it. */
.q-band {
  margin: 0 0 0.5rem;
  padding: 0.4rem 0;
  border-top: 2px solid var(--fg-1);
  border-bottom: 2px solid var(--fg-1);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
}
.q-word {
  font-family: var(--font-condensed, var(--font-display));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.q-date { font-family: var(--font-mono, ui-monospace, monospace); }
.q-reason { color: var(--fg-1); }
.q-owner { color: var(--fg-muted); }

/* ── S1: the hygiene chip ────────────────────────────────────────────── */
.hyg { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.5rem; }
.hyg-ring {
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  border: 1px solid var(--fg-muted);        /* hollow and unhued, like the rest */
  flex: 0 0 auto;
}
.hyg-figures { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }
.hyg-figures li { display: flex; flex-direction: column; }
.hyg-n { font-family: var(--font-mono, ui-monospace, monospace); font-size: 1.25rem; }
.hyg-label {
  font-family: var(--font-condensed, var(--font-display));
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
/* The groom-debt figure lives INSIDE this sentence, not in a numeral slot, and
   the sentence names its owner in the same breath. A number alone invites a
   reading about a person; a sentence stating mechanism and owner reads as the
   meter working. */
.hyg-sentence { font-family: var(--font-body, Georgia, serif); margin: 0 0 0.5rem; }

/* Fixed row height (CD, S258). A row whose height is a function of how much
   prose an author happened to write is the content-dependent-height defect at
   the row level — the same one the pane budget fixes a level up. The lede is
   clipped to its contract length server-side; this stops anything that slips
   through from re-flowing the row. Quarantined rows are EXEMPT: the band is
   three facts plus a reason, and the ruling is that the reason never clips. */
.doc { min-height: 62px; }
.doc:not(.is-quarantined) { max-height: 62px; overflow: hidden; }
.doc-lede { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── drills on the section panes (4c211ef8) ─────────────────────────────
   The basement idiom, extended to S5/S6. Affordances inherit their row's
   ink; focus rings are the category the 2px full-ink reservation exempts. */
.ag-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}
.ag-link:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.ag:has(> .ag-link.is-open) { border-color: var(--fg-accent); }
.ag-link.is-open .ag-name { font-weight: 600; }

.doc-open {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--fg-1) 20%, transparent);
}
.doc-open:hover { border-bottom-color: var(--border-strong); }
.doc-open:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.doc-open.is-open { border-bottom-color: var(--fg-accent); }

.doc-drill, .rec-drill { margin-top: 0.75rem; }
.doc-sum { font-family: var(--font-serif); margin: 0 0 0.5rem; }
.drill-doc {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 72ch;
}
.rec-record {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0 0 0.75rem;
}
.rec-record dt {
  font-family: var(--font-condensed, var(--font-display));
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}
.rec-record dd { margin: 0; overflow-wrap: anywhere; }
.rec-comms, .rec-probes { margin-top: 0.75rem; }

/* ── Tier 1 workspace filter (3e972422) ─────────────────────────────────
   Pane-header tokens; the input inherits the pane's ink and the muted
   placeholder resolves to Fog inside a dark pane per the pairing rule. */
.ws-filter-row { margin: 0 0 0.75rem; }
.ws-filter {
  width: 100%;
  max-width: 28rem;
  padding: 0.4rem 0.75rem;
  font: inherit;
  color: var(--fg-1);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--fg-1) 20%, transparent);
  border-radius: 6px;
}
.ws-filter::placeholder { color: var(--fg-muted); }
.ws-filter:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }
.g-count {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--fg-muted);
}

/* The drilled row escapes the 62px lede-contract cap (Guy's live catch,
   S265): the drill renders INSIDE the row, and a fixed-height clipped row
   swallowed it whole — in the DOM, green to every locator assert, invisible
   to a human. Drill-open is ruled user-intent expansion (4c211ef8 ④), so the
   open row takes its natural height and returns to the cap on close. This
   rule must sit AFTER the .doc:not(.is-quarantined) cap: equal specificity,
   source order decides. */
.doc.is-drilled { max-height: none; overflow: visible; }