/* ==========================================================================
   Collector — the reading room.

   The design this replaces split the screen into an instrument (dark slate,
   monospace readings) and paper (light, the text you actually read). That was
   built for an operator watching a machine. The people using this are a
   newsroom: they are here to read Mongolian text and ask questions about it,
   and the machinery is not the point.

   So there is no instrument. One warm paper ground throughout, no dark decks,
   no status LEDs, no monospace standing in for "technical". The only thing
   that changes register is type: collected text is set as a book, in Alegreya;
   the interface speaks around it, quietly, in Golos Text.

   Golos Text is a Cyrillic-native humanist sans (Paratype). It was chosen for
   the script rather than retrofitted to it — Mongolian Cyrillic is the primary
   case here, not a subset bolted onto a Latin design.

   Ө (U+04E8) and Ү (U+04AE) live in Google Fonts' `cyrillic-ext` subset, not
   in `cyrillic`. base.html therefore requests the families unpinned so the
   browser fetches both. Never add `&subset=cyrillic` — it silently breaks
   Mongolian while leaving Russian looking fine.
   ========================================================================== */

:root {
  /* --- surfaces -------------------------------------------------------- */
  /* Warm, low-chroma, tinted toward the clay accent so the neutrals and the
     accent read as one family rather than as grey plus a colour. */
  --paper:       oklch(97.2% 0.007 78);   /* the page itself */
  --sheet:       oklch(99.3% 0.004 85);   /* reading surfaces sit ABOVE the
                                             page, not below it */
  --sunk:        oklch(95.2% 0.009 76);   /* inputs and quiet fills */

  /* --- ink ------------------------------------------------------------- */
  --ink:         oklch(24% 0.020 52);     /* body text        ~13:1 on paper */
  --ink-soft:    oklch(45% 0.016 58);     /* secondary        ~7.2:1         */
  --ink-faint:   oklch(58% 0.014 62);     /* meta and labels  ~4.6:1, AA     */

  /* --- rules ----------------------------------------------------------- */
  --rule:        oklch(90% 0.010 74);     /* decorative hairlines           */
  --edge:        oklch(71% 0.016 68);     /* control borders — 3:1, AA      */

  /* --- accents --------------------------------------------------------- */
  /* One accent, used rarely, so it still means something when it appears.
     Chroma stays low: this is read for hours at a time. */
  --clay:        oklch(51% 0.125 44);
  --clay-deep:   oklch(42% 0.115 42);
  --clay-wash:   oklch(95.5% 0.024 55);

  --moss:        oklch(46% 0.070 148);    /* healthy, collected             */
  --moss-wash:   oklch(95.5% 0.028 150);
  --rust:        oklch(47% 0.140 32);     /* trouble — stated, not alarmed  */
  --rust-wash:   oklch(95.5% 0.030 38);

  /* --- type ------------------------------------------------------------ */
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans:  "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Few sizes, real distance between them. The small end carries different
     registers (tracked labels vs. running meta), not competing steps. */
  --t-label: 0.8125rem;   /* 13 — tracked, uppercase                       */
  --t-meta:  0.9375rem;   /* 15 — dates, counts                            */
  --t-ui:    1.0625rem;   /* 17 — interface base, deliberately generous    */
  --t-read:  1.1875rem;   /* 19 — collected text                           */
  --t-sub:   1.375rem;    /* 22                                            */
  --t-head:  1.75rem;     /* 28                                            */
  --t-title: clamp(2rem, 1.55rem + 1.6vw, 2.75rem);
  --t-display: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);

  /* --- space ----------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --measure: 66ch;
  --shell: 74rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
}

/* Committed to light. The audience reads long Mongolian text at a desk in
   daylight; a dark theme here would be decoration, not a response to how the
   thing is used. Nothing below assumes a dark counterpart exists. */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-ui)/1.65 var(--sans);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Cyrillic lowercase is wider and more even than Latin; it wants a touch more
   air between lines and a hair less between letters than a Latin default. */
:lang(mn) { letter-spacing: -0.002em; }

a { color: var(--clay); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--clay-deep); }

:focus-visible {
  outline: 2px solid var(--clay-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

img { max-width: 100%; }

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-xs);
  background: var(--sheet);
  border: 1px solid var(--edge);
  padding: var(--space-xs) var(--space-md);
  z-index: 100;
}
.skip:focus { left: var(--space-md); }

/* ============================================================ the masthead */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-lg);
  display: flex;
  align-items: baseline;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.masthead-brand {
  font: 700 var(--t-sub)/1 var(--serif);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.masthead-brand:hover { color: var(--clay-deep); }

.masthead-nav {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.masthead-nav a {
  color: var(--ink-soft);
  font-size: var(--t-meta);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.masthead-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--clay);
}

.masthead-end {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-left: auto;
  flex: 0 0 auto;
}

/* A running job is a sentence, not a blinking light. */
.masthead-status {
  font-size: var(--t-meta);
  color: var(--moss);
  text-decoration: none;
}
.masthead-status:hover { text-decoration: underline; }
.masthead-status-kind { color: var(--ink-soft); }

.masthead-account { display: flex; align-items: baseline; gap: var(--space-sm); }
.masthead-account a { font-size: var(--t-meta); color: var(--ink-soft); }
.masthead-account button {
  font: 500 var(--t-label)/1 var(--sans);
  padding: var(--space-2xs) var(--space-xs);
  background: none;
  border: 1px solid var(--edge);
  color: var(--ink-soft);
  cursor: pointer;
}
.masthead-account button:hover { color: var(--ink); border-color: var(--ink-soft); }

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

.page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-4xl);
}

.colophon {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: var(--t-meta);
}
.colophon p { margin: 0 0 var(--space-2xs); max-width: 60ch; }
.colophon-rule { color: var(--ink-soft); }

.backlink {
  margin: 0 0 var(--space-lg);
  font-size: var(--t-meta);
}
.backlink a { text-decoration: none; }
.backlink a::before { content: "← "; color: var(--ink-faint); }
.backlink a:hover { text-decoration: underline; }

/* ============================================================ page heading */

.page-head { margin-bottom: var(--space-2xl); }

.page-title {
  font: 700 var(--t-title)/1.08 var(--serif);
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 20ch;
}

/* The sentence under a title explains the screen. It is set wide and soft so
   it reads as an aside, not as a second heading. */
.page-standfirst {
  margin: var(--space-md) 0 0;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: var(--t-ui);
  line-height: 1.6;
}

/* ================================================================ notices */

/* No coloured stripe down the side. A notice is a full-bordered slip of paper
   with a tinted ground — it reads as something set apart, not as a row with a
   highlighter mark on it. */
.notices { margin-bottom: var(--space-xl); }

.notice {
  margin: 0 0 var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--edge);
  background: var(--sheet);
  font-size: var(--t-meta);
  line-height: 1.6;
  max-width: 68ch;
}
.notice--message, .notice--ok { border-color: var(--moss); background: var(--moss-wash); }
.notice--warn { border-color: var(--clay); background: var(--clay-wash); }
.notice--error { border-color: var(--rust); background: var(--rust-wash); color: var(--ink); }

/* ================================================================== index */

/* A ruled index, the way a periodicals holdings list is set. Not cards: cards
   would put a box around every item and make sixty of them look like sixty
   products. Hairlines let the eye run straight down the titles. */
.index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.index-item {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--rule);
}

/* A filter bar already closes with a rule. Letting the list open with its own
   draws two hairlines a gap apart, which reads as a mistake. */
.sift + .index,
.toolbar + .index { border-top: none; }

.index-source {
  margin: 0 0 var(--space-2xs);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.index-title {
  margin: 0;
  font: 500 var(--t-sub)/1.25 var(--serif);
  letter-spacing: -0.008em;
  max-width: 46ch;
}
.index-title a { color: var(--ink); text-decoration: none; }
.index-title a:hover { color: var(--clay-deep); text-decoration: underline; }

.index-lede {
  margin: var(--space-xs) 0 0;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--t-meta);
  line-height: 1.6;
}

.index-meta {
  margin: var(--space-sm) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--t-meta);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.index-meta a { color: var(--ink-faint); }
.index-meta a:hover { color: var(--clay-deep); }

/* ================================================== the article, and its margin */

.article { margin-bottom: var(--space-3xl); }

.article-head { margin-bottom: var(--space-xl); }

.article-kicker {
  margin: 0 0 var(--space-sm);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay);
}

.article-headline {
  margin: 0;
  font: 700 var(--t-display)/1.06 var(--serif);
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

/* On a wide screen everything the collector knows moves into the margin, and
   the text starts at the top of the page instead of below a stack of chrome. */
@media (min-width: 62rem) {
  .article-layout {
    grid-template-columns: 13rem minmax(0, var(--measure));
    gap: var(--space-3xl);
    align-items: start;
  }
}

.article-margin { font-size: var(--t-meta); }
.article-margin dl { margin: 0; }
.article-margin dt {
  font-size: var(--t-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.article-margin dd {
  margin: 0 0 var(--space-md);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.article-margin-id { font-size: var(--t-label); }
.article-margin-out { margin: 0; padding-top: var(--space-xs); border-top: 1px solid var(--rule); }

/* The reading surface is LIGHTER than the page. The page recedes; the text
   comes forward. Doing it the other way round — a grey card on white — is why
   so much of this kind of tool feels like a form. */
.article-column {
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
}

.article-body {
  margin: 0;
  white-space: pre-wrap;
  font: var(--t-read)/1.8 var(--serif);
  max-width: var(--measure);
  overflow-wrap: break-word;
}
.article-body--absent {
  font-style: italic;
  color: var(--ink-faint);
  font-size: var(--t-ui);
  line-height: 1.6;
}

/* Prose the model wrote, or the operator typed. Same reading treatment. */
.prose {
  margin: 0;
  white-space: pre-wrap;
  font: var(--t-read)/1.8 var(--serif);
  max-width: var(--measure);
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: var(--space-lg) var(--space-xl);
  overflow-wrap: break-word;
}

/* ================================================================= tally */

/* Seven hand-picked hues for seven reaction types was noise pretending to be
   information. The number is the information; the name is a label. */
.tally {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}

.tally-head {
  margin: 0 0 var(--space-sm);
  font: 500 var(--t-label)/1 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tally-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
}

.tally-item { display: flex; align-items: baseline; gap: var(--space-2xs); }
.tally-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}
.tally-label { font-size: var(--t-meta); color: var(--ink-faint); }
.tally-item--total .tally-num { color: var(--clay-deep); }

/* ================================================================ sections */

section.section { margin-top: var(--space-3xl); }

.section-head {
  margin: 0 0 var(--space-md);
  font: 500 var(--t-head)/1.2 var(--serif);
  letter-spacing: -0.012em;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;   /* a heading carrying a count and a price must wrap, not overflow */
}

/* The Schedule screen nests blocks two deep — "Every day" over four collectors —
   so it needs a second heading rank. Without this every heading sits at 28px
   and the page reads flat. */
.section-head--minor { font-size: var(--t-sub); }
.section-count {
  font: 400 var(--t-meta)/1 var(--sans);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.section-note {
  margin: var(--space-md) 0 0;
  max-width: 62ch;
  font-size: var(--t-meta);
  line-height: 1.65;
  color: var(--ink-faint);
}

/* ================================================================= plates */

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-lg);
}

.plate { margin: 0; }
.plate img {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
  background: var(--sunk);
  border: 1px solid var(--rule);
}
.plate figcaption {
  margin-top: var(--space-xs);
  font-size: var(--t-meta);
  color: var(--ink-faint);
  line-height: 1.5;
}
.plate--link {
  border: 1px solid var(--rule);
  background: var(--sheet);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-start;
}
.plate--link a { font-size: var(--t-meta); overflow-wrap: anywhere; }
.plate-alt { margin: 0; font-size: var(--t-meta); color: var(--ink-faint); }

/* ============================================================= discussion */

/* Comments are indented and ruled, never marked with a coloured bar. A reply
   sits further in; that is what a reply looks like on paper. */
.discussion { list-style: none; margin: 0; padding: 0; }

.discussion-item {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}
.discussion-item:first-child { border-top: none; padding-top: 0; }
.discussion-item--reply { margin-left: var(--space-xl); }

.discussion-author {
  margin: 0 0 var(--space-2xs);
  font-weight: 600;
  font-size: var(--t-meta);
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.discussion-text {
  margin: 0;
  white-space: pre-wrap;
  font: var(--t-ui)/1.7 var(--serif);
  overflow-wrap: break-word;
}

.discussion-meta {
  margin: var(--space-xs) 0 0;
  display: flex;
  gap: var(--space-md);
  font-size: var(--t-label);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ========================================================= correspondence */

/* Not a chat. The question is a line in the interface's voice; the answer is
   reading material and is set like everything else worth reading. */
.reading-room { max-width: 52rem; }

.correspondence {
  margin: var(--space-2xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.turn-who {
  margin: 0 0 var(--space-xs);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  gap: var(--space-sm);
}
.turn-who time { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

.turn--asked { margin-left: clamp(0rem, 6vw, 5rem); }
.turn--asked .turn-text {
  margin: 0;
  font-size: var(--t-ui);
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: var(--space-md);
  border-left: 1px solid var(--rule);
}

.turn--answered .turn-text {
  margin: 0;
  white-space: pre-wrap;
  font: var(--t-read)/1.8 var(--serif);
  max-width: var(--measure);
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: var(--space-lg) var(--space-xl);
  animation: settle 420ms var(--ease) both;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* An empty state that teaches the screen rather than announcing its own
   emptiness. */
.opening {
  border: 1px solid var(--rule);
  background: var(--sheet);
  padding: var(--space-xl);
}
.opening > p { margin: 0 0 var(--space-md); color: var(--ink-soft); }
.opening-list { margin: 0; }
.opening-list dt {
  font-weight: 600;
  font-size: var(--t-meta);
  margin-top: var(--space-md);
}
.opening-list dd {
  margin: var(--space-2xs) 0 0;
  color: var(--ink-soft);
  font-size: var(--t-meta);
  line-height: 1.6;
}
.opening-example {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
  font: italic 400 var(--t-ui)/1.6 var(--serif);
  color: var(--ink-faint);
}

.compose { margin-top: var(--space-xl); }
.compose > label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--t-meta);
  color: var(--ink-soft);
}
.compose-row { display: flex; gap: var(--space-sm); align-items: flex-end; }
.compose-row textarea {
  flex: 1 1 auto;
  min-height: 4.5rem;
  font: var(--t-ui)/1.6 var(--sans);
  resize: vertical;
}

.footnote {
  margin-top: var(--space-2xl);
  max-width: 62ch;
  font-size: var(--t-meta);
  line-height: 1.65;
  color: var(--ink-faint);
}

/* ================================================================= roster */

.roster { margin: var(--space-xl) 0 0; }
.roster-head {
  margin: 0 0 var(--space-sm);
  font: 500 var(--t-label)/1 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.roster-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.roster-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--rule);
  background: var(--sheet);
  font-size: var(--t-meta);
}
.roster-name { font-weight: 500; }
.roster-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-label);
  color: var(--ink-faint);
}
.roster-item--collecting { border-style: dashed; }
.roster-item--error { border-color: var(--rust); background: var(--rust-wash); }

/* =============================================================== dossiers */

.index--dossiers .index-item { padding: var(--space-xl) 0; }

.dossier-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.dossier-name {
  margin: 0;
  font: 500 var(--t-head)/1.2 var(--serif);
  letter-spacing: -0.012em;
}
.dossier-name a { color: var(--ink); text-decoration: none; }
.dossier-name a:hover { color: var(--clay-deep); text-decoration: underline; }

.dossier-leaning {
  margin: var(--space-md) 0 0;
  max-width: var(--measure);
  font: var(--t-ui)/1.7 var(--serif);
  color: var(--ink-soft);
}
.dossier-trouble {
  margin: var(--space-md) 0 0;
  max-width: 62ch;
  font-size: var(--t-meta);
  color: var(--rust);
}
.dossier-pending {
  margin: var(--space-md) 0 0;
  font-size: var(--t-meta);
  color: var(--ink-faint);
}

/* Figures are read, not admired. No oversized hero numerals. */
.figures {
  margin: var(--space-lg) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-2xl);
}
.figures--wide { margin-top: var(--space-xl); }
.figure { display: flex; flex-direction: column-reverse; gap: var(--space-2xs); }
.figure dt {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.figure dd {
  margin: 0;
  font: 600 var(--t-sub)/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.tags {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.tag {
  padding: var(--space-2xs) var(--space-sm);
  background: var(--sunk);
  font-size: var(--t-meta);
  color: var(--ink-soft);
}

/* ============================================================ small parts */

.label {
  display: inline-block;
  padding: 0.1em 0.5em;
  background: var(--sunk);
  color: var(--ink-soft);
  font: 500 var(--t-label)/1.5 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* State is a word, in a tinted ground. Not a coloured square bullet. */
.status {
  display: inline-block;
  padding: 0.1em 0.5em;
  font: 500 var(--t-label)/1.5 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--sunk);
  color: var(--ink-soft);
}
.status--ok    { background: var(--moss-wash); color: var(--moss); }
.status--error { background: var(--rust-wash); color: var(--rust); }

.empty {
  margin: 0;
  padding: var(--space-xl);
  border: 1px dashed var(--edge);
  background: var(--sheet);
  color: var(--ink-soft);
  font-size: var(--t-meta);
  line-height: 1.7;
  max-width: 62ch;
}

.pager {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.pager-count {
  font-size: var(--t-meta);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ============================================================== controls */

button, .button {
  display: inline-block;
  font: 500 var(--t-meta)/1.2 var(--sans);
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--edge);
  background: var(--sheet);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease), color 140ms var(--ease);
}
button:hover, .button:hover { border-color: var(--ink-soft); color: var(--ink); }

.button--primary, button.go {
  background: var(--clay);
  border-color: var(--clay);
  color: oklch(98.5% 0.008 70);
}
.button--primary:hover, button.go:hover {
  background: var(--clay-deep);
  border-color: var(--clay-deep);
  color: oklch(98.5% 0.008 70);
}

button:disabled, button[disabled] {
  background: var(--sunk);
  border-color: var(--rule);
  color: var(--ink-faint);
  cursor: not-allowed;
}

button.danger { color: var(--rust); border-color: var(--rust); background: var(--sheet); }
button.danger:hover { background: var(--rust-wash); }
button.link {
  border: none;
  background: none;
  color: var(--rust);
  padding: 0;
  font-size: var(--t-meta);
  text-decoration: underline;
}

input[type=text], input[type=password], input[type=number],
input[type=search], select, textarea {
  font: var(--t-meta)/1.5 var(--sans);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--edge);
  background: var(--sunk);
  color: var(--ink);
  width: 100%;
  border-radius: 0;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
textarea { min-height: 11rem; resize: vertical; }
::placeholder { color: var(--ink-faint); opacity: 1; }

label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--t-meta);
  color: var(--ink-soft);
}

/* The filter bar on Collected: a row of fields on a rule, not a card. */
.sift {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rule);
}
.sift-field { flex: 1 1 11rem; }
.sift-field--wide { flex: 2 1 18rem; }
.sift-actions { display: flex; gap: var(--space-xs); flex: 0 0 auto; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rule);
}
.toolbar-note {
  flex: 1 1 20rem;
  margin: 0;
  font-size: var(--t-meta);
  color: var(--ink-faint);
  line-height: 1.6;
}
.toolbar-note strong { color: var(--rust); font-weight: 600; }

/* ==========================================================================
   Operator components.

   Dashboard, Runs, Schedule, Sources, Accounts and the sign-in gate were not
   in this pass's scope. Their markup is untouched; these rules re-express the
   classes they use on the new tokens so those screens stay coherent instead of
   inheriting a half-replaced palette. They are deliberately quiet — when those
   screens are redesigned, this whole block goes.
   ========================================================================== */

h1 { font: 700 var(--t-title)/1.1 var(--serif); letter-spacing: -0.018em; margin: 0 0 var(--space-xs); }
h1.headline { font-size: var(--t-display); }
h2.section, h3.sub {
  font: 500 var(--t-sub)/1.2 var(--serif);
  color: var(--ink);
  margin: var(--space-2xl) 0 var(--space-md);
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
h3.sub { font-size: var(--t-ui); margin-top: var(--space-xl); }

.eyebrow {
  margin: 0 0 var(--space-xs);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay);
}
.subtitle {
  margin: 0 0 var(--space-xl);
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: var(--t-meta);
  line-height: 1.6;
}

.decks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 52rem) { .decks { grid-template-columns: 1fr; } }

.deck, .panel {
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.panel.paper { padding: var(--space-xs) var(--space-lg); }
.deck-head { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.deck-head h2 { margin: 0; font: 500 var(--t-sub)/1.2 var(--serif); }
.deck-tag {
  font: 500 var(--t-label)/1.5 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.deck-tag.cost { color: var(--clay); }
.deck-form { display: flex; flex-direction: column; gap: var(--space-md); }

.readouts { display: flex; gap: var(--space-xl); margin: var(--space-lg) 0; flex-wrap: wrap; }
.readout b {
  display: block;
  font: 600 var(--t-head)/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.readout b.stamp { font-size: var(--t-ui); }
.readout span {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.deck-note {
  margin: var(--space-md) 0 0;
  max-width: 60ch;
  font-size: var(--t-meta);
  line-height: 1.65;
  color: var(--ink-faint);
}
.deck-note .warn, .warn { color: var(--rust); display: block; margin-top: var(--space-2xs); }

/* The pre-flight cost meter: the same arithmetic as the CLI's estimate, shown
   before the button rather than after the spend. */
.meter { margin: var(--space-lg) 0 var(--space-2xs); }
.meter-track {
  height: 0.5rem;
  background: var(--sunk);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.meter-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--clay);
  transition: width 160ms var(--ease);
}
.meter.over .meter-fill { background: var(--rust); }
.meter-line {
  margin: var(--space-xs) 0 0;
  font-size: var(--t-ui);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.meter.over .meter-line { color: var(--rust); }

/* Alerts, like notices, get a border and a ground — never a side stripe. */
.alert {
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--clay);
  background: var(--clay-wash);
  font-size: var(--t-meta);
  line-height: 1.6;
  max-width: 68ch;
}

table { width: 100%; border-collapse: collapse; font-size: var(--t-meta); }
th, td {
  text-align: left;
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  color: var(--ink-faint);
  font: 500 var(--t-label)/1.4 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

.tier {
  display: inline-block;
  padding: 0.1em 0.5em;
  background: var(--sunk);
  color: var(--ink-soft);
  font: 500 var(--t-label)/1.5 var(--sans);
  letter-spacing: 0.06em;
}
.tier.paid { background: var(--clay-wash); color: var(--clay-deep); }

.state {
  font: 500 var(--t-label)/1.5 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.state.ok { color: var(--moss); }
.state.error { color: var(--rust); }

pre.log {
  margin: 0;
  padding: var(--space-md);
  background: var(--sunk);
  border: 1px solid var(--rule);
  color: var(--ink);
  overflow: auto;
  max-height: 62vh;
  font: 0.8125rem/1.6 ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
pre.log.setup { margin-top: var(--space-sm); user-select: all; }

.row { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 10rem; }
.row > .shrink { flex: 0 0 auto; }
.checkbox { display: flex; align-items: center; gap: var(--space-xs); padding-bottom: var(--space-sm); }
.checkbox input { width: auto; }
.checkbox label { margin: 0; }
.row-actions { display: flex; gap: var(--space-md); align-items: baseline; }
.row-actions form, form.inline { display: inline; }

.gate { max-width: 24rem; margin: var(--space-3xl) auto; }

/* The old list styles, still used by the dashboard's recent-items panel. */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { border-bottom: 1px solid var(--rule); padding: var(--space-md) 0; }
.post-list li:last-child { border-bottom: none; }
.post-list > li > a { color: var(--ink); font: 500 var(--t-ui)/1.35 var(--serif); text-decoration: none; }
.post-list > li > a:hover { color: var(--clay-deep); text-decoration: underline; }
.post-meta {
  margin-top: var(--space-xs);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: var(--t-meta);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--ink-faint); }
.small { font-size: var(--t-meta); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; }
.stamp { font-variant-numeric: tabular-nums; }

/* ================================================== merged from the pass */

/* A column of form controls. `.deck-form` is the old name for the same thing
   and is kept as an alias so the screens still using it keep their rhythm when
   the operator-components block below is finally deleted. */
.stack,
.deck-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* The raw config-file editors on Sources: plain forms, one under another, with
   nothing but space between them. */
.file-editor { margin-top: var(--space-xl); }
.file-editor button { margin-top: var(--space-sm); }

/* Inside a toolbar everything centres on one line; .checkbox's bottom padding
   exists to baseline-align it in a .row and lifts it off-centre here. */
.toolbar .checkbox { padding-bottom: 0; }

/* Section prose has no bottom margin, so a table directly after it collides
   with the explanatory sentence and reads as a caption. */
.section-note + .table-wrap { margin-top: var(--space-lg); }

/* The comments form on Profiles follows a table with no separation of its own.
   Scoped to the form itself: an earlier draft scoped this to `.section
   .deck-form`, which would also have pushed the dashboard's three collector
   forms down. */
#comments-form { margin-top: var(--space-xl); }

/* Neutral status. Declared rather than left implicit, because profiles.html and
   pages.html both emit it and a class with no rule is indistinguishable from a
   typo when someone next reads the sheet. */
.status--idle { background: var(--sunk); color: var(--ink-soft); }

/* A list of items belonging to one entry — the posts under a topic. It drops
   the index's own top rule and indents, so it reads as part of its parent
   rather than as a second index nested inside the first. */
.index--nested {
  border-top: none;
  margin: var(--space-lg) 0 0;
  padding-left: var(--space-lg);
  border-left: 1px solid var(--rule);   /* 1px: a hairline, not an accent stripe */
}
.index--nested .index-item { padding: var(--space-sm) 0; border-bottom: none; }
.index--nested .index-title { font-size: var(--t-ui); }
.index--nested .index-meta { margin-top: var(--space-2xs); }

/* ============================================================== narrow */

/* On a phone the sheet's generous side padding eats the measure — 2rem each
   side of a 430px screen leaves barely 40 characters. The reading surface
   keeps its ground and its border; it just stops wasting the width. */
@media (max-width: 40rem) {
  .page { padding-left: var(--space-md); padding-right: var(--space-md); }
  .masthead-inner { padding-left: var(--space-md); padding-right: var(--space-md); }
  .colophon { padding-left: var(--space-md); padding-right: var(--space-md); }

  .article-column,
  .prose,
  .opening,
  .turn--answered .turn-text {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .empty { padding: var(--space-lg) var(--space-md); }

  /* Send sits under the box rather than squeezing it to a stub. */
  .compose-row { flex-direction: column; align-items: stretch; }

  .figures { gap: var(--space-md) var(--space-lg); }
}

/* ================================================================= motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================== citations */

/* A citation carries its source in a tooltip rather than in a list under the
   answer, which was longer than the answer. Ported onto the new tokens: the
   marker is a superscript numeral in the interface face with tabular figures,
   not a monospace run — monospace here would read as machinery inside a
   sentence somebody is reading. */
.cite {
  font: 600 0.7em/1 var(--sans);
  font-variant-numeric: tabular-nums;
  vertical-align: super;
  padding: 0 0.1em;
  text-decoration: none;
  color: var(--ink-faint);
  border-bottom: 1px dotted var(--rule);
  cursor: help;
}
.cite:hover { color: var(--clay-deep); border-bottom-color: var(--clay); }

/* ---- ask: history beside the conversation ------------------------------ */

.ask-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
@media (max-width: 860px) {
  .ask-layout { grid-template-columns: 1fr; }
  .ask-history { order: 2; }
}

.ask-history-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.ask-history-head h2 { margin: 0; font-size: 13px; letter-spacing: 0.06em; }

.thread-list { list-style: none; margin: 0; padding: 0; }
.thread + .thread { margin-top: 2px; }
.thread a {
  display: block; padding: 8px 10px; border-radius: 5px;
  text-decoration: none; color: inherit;
}
.thread a:hover { background: rgba(127, 127, 127, 0.10); }
/* The open conversation is marked on the edge, not by shouting. */
.thread--open a { background: rgba(127, 127, 127, 0.13); box-shadow: inset 2px 0 0 currentColor; }
.thread-title {
  display: block; font-size: 13.5px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-meta {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; opacity: 0.6; margin-top: 3px;
}

/* Reusing a question is why anyone opens the history. */
.reuse {
  background: none; border: 0; padding: 0 0 0 10px;
  font: inherit; font-size: 11px; opacity: 0.55; cursor: pointer;
  text-decoration: underline;
}
.reuse:hover { opacity: 1; }

.compose-hint { font-size: 11px; opacity: 0.5; margin: 6px 0 0; }
/* An answer arrives a few words at a time; the box must not jump as it grows. */
.turn--answered .turn-text { white-space: pre-wrap; min-height: 1.4em; }