/* Witness — base stylesheet.
   No webfonts: they would be a network dependency, a tracking vector, and a
   liability for scripts we cannot anticipate. System stacks with per-script
   fallbacks instead.
   Printer's ink and rubric red. Rubrication was the second colour a scribe
   reached for, usually to mark the words that mattered, and a project about
   which claims are attested should look like something a person stands
   behind. */

:root {
  /* Tells the browser which scheme the native furniture is drawn in: form
     controls, scrollbars, the search field's clear button. Without it those
     follow the system and disagree with the theme chosen in the app. */
  color-scheme: light;

  --paper: #faf8f5;
  --paper-raised: #ffffff;
  --ink: #1c1917;
  --ink-soft: #57534e;
  --ink-faint: #8a8279;
  --rule: #e2dcd4;
  --rule-strong: #cbc2b6;
  --rubric: #a32e22;
  --accent-ok: #2f6b3f;
  --accent-warn: #8a5a12;
  /* Text drawn on a filled accent (the toasts). Inverts with the theme,
     because the accents themselves are dark on light and light on dark. */
  --on-highlight: #ffffff;

  --font-text: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman',
    'Noto Serif Hebrew', 'Noto Sans Hebrew', 'Noto Naskh Arabic', 'Noto Sans Arabic',
    'Noto Serif Devanagari', 'Noto Sans Devanagari', 'Noto Serif CJK SC', 'Noto Sans CJK SC',
    'Noto Serif Tibetan', serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    'Noto Sans Hebrew', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans CJK SC',
    'Noto Sans Tibetan', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 70rem;
  --radius: 6px;
  --text-scale: 1;

  /* Flat colours, not color-mix(): when a browser does not support the function
     the entire declaration is dropped, and a dropped scrim is an invisible
     overlay. */
  --scrim: rgb(28 25 23 / 0.45);
  --tint: rgb(163 46 34 / 0.07);
  --sunken: rgb(28 25 23 / 0.03);
}

/* Dark mode, declared once.
   An earlier version of this file listed the whole palette twice: once inside a
   prefers-color-scheme query and once for an explicit choice. Two copies of the
   same nine colours, updated independently, is a drift hazard, so "follow the
   system" is resolved in JavaScript instead and this is the only dark palette.
   The head script in index.html sets the attribute before the first paint, so a
   dark-mode reader never sees a flash of the light theme. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #14120f;
  --paper-raised: #1d1a16;
  --ink: #f2ece3;
  --ink-soft: #b5ada1;
  --ink-faint: #8b8377;
  --rule: #302b25;
  --rule-strong: #443d34;
  --rubric: #e08a7c;
  --accent-ok: #8fbf9a;
  --accent-warn: #d9ab5e;
  --on-highlight: #1c1917;

  --scrim: rgb(0 0 0 / 0.62);
  --tint: rgb(224 138 124 / 0.12);
  --sunken: rgb(255 255 255 / 0.03);
}

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

/* The hidden attribute must win.
   The UA stylesheet gives [hidden] { display: none }, but any author rule that
   sets `display` beats it — which is how an overlay with `display: flex` ends up
   permanently on the page while element.hidden still reads true. */
[hidden] { display: none !important; }

html {
  font-size: calc(17px * var(--text-scale));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* Non-Latin runs get the text face, which is where the script families live. */
[dir="auto"], [lang]:not([lang^="en"]) { font-family: var(--font-text); }

/* A reader who does not need transliterations can hide them. */
html[data-translit="off"] .translit,
html[data-translit="off"] .translit-inline { display: none; }

h1, h2, h3, h4 { font-family: var(--font-text); line-height: 1.25; font-weight: 600; }
h2 { font-size: 1.7rem; margin: 0 0 0.5rem; }
h3 { font-size: 1.12rem; margin: 1.8rem 0 0.5rem; }
h4 { font-size: 0.98rem; margin: 1.1rem 0 0.35rem; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--rubric); }
code, pre { font-family: var(--font-mono); font-size: 0.88em; }
p { margin: 0 0 0.7rem; }
.lede { color: var(--ink-soft); max-width: 74ch; }
.empty { color: var(--ink-faint); font-style: italic; }
.clean { color: var(--accent-ok); }
.hint, .field-hint { font-size: 0.85rem; color: var(--ink-faint); margin: 0.2rem 0 0; max-width: 74ch; }
.hint.clean { color: var(--accent-ok); }

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

.skip { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--paper-raised); padding: 0.6rem 1rem; z-index: 30; }
.skip:focus { inset-inline-start: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------- chrome */

.site { border-block-end: 1px solid var(--rule); }
.site-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
}
.wordmark { margin: 0; font-family: var(--font-text); font-size: 1.25rem; font-weight: 600; }
.wordmark a { text-decoration: none; }
.tagline { margin: 0; color: var(--ink-faint); font-size: 0.88rem; }
.site nav { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.92rem; }
.site nav a { text-decoration: none; color: var(--ink-soft); }
.site nav a:hover { color: var(--rubric); }
.kbd { font-family: var(--font-mono); font-size: 0.72rem; border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0.05rem 0.3rem; color: var(--ink-faint); flex-shrink: 0; align-self: center; }
/* The shortcut hint is the first thing to go when the nav runs out of room. */
@media (max-width: 52rem) { .kbd { display: none; } }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: inherit; font-size: 0.86rem; padding: 0.2rem 0.55rem;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  cursor: pointer; flex-shrink: 0; align-self: center;
}
.theme-toggle:hover { color: var(--rubric); border-color: var(--rubric); }
.theme-icon { font-size: 0.95rem; line-height: 1; }
/* Icon only where the nav is tight; the label is for screen readers there. */
@media (max-width: 56rem) { .theme-label { display: none; } }

footer.site { border-block: 0; border-block-start: 1px solid var(--rule); margin-block-start: 4rem; }
footer.site p { margin: 0.2rem 0; font-size: 0.84rem; color: var(--ink-soft); }
footer.site .boundary { color: var(--ink-faint); }

main { max-width: var(--measure); margin: 0 auto; padding: 2rem 1.25rem 4rem; display: block; }

/* ------------------------------------------------------------------ search */

.panel { margin-block-end: 1rem; }
.search { display: grid; gap: 0.4rem; }
.search label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.search input {
  font: inherit; font-size: 1.15rem; padding: 0.6rem 0.75rem;
  color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); width: 100%;
}
.filters { margin-block-start: 1rem; font-size: 0.9rem; }
.filters summary { cursor: pointer; color: var(--ink-soft); }
.filter-groups { display: grid; gap: 1rem; margin-block: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.facet-group { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.6rem 0.8rem 0.8rem; margin: 0; }
.facet-group legend { font-size: 0.78rem; color: var(--ink-faint); padding-inline: 0.35rem; }
.facets { list-style: none; margin: 0; padding: 0; max-height: 13rem; overflow-y: auto; }
.facet { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; cursor: pointer; }
.facet input { margin: 0; }
.facet span[dir="auto"] { flex: 1; }
.facet-count { color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.count { color: var(--ink-soft); font-size: 0.88rem; margin: 0 0 0.8rem; }

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

button {
  font: inherit; font-size: 0.88rem; padding: 0.42rem 0.85rem;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  border-radius: var(--radius); cursor: pointer;
}
button.ghost { background: transparent; color: var(--ink-soft); border-color: var(--rule-strong); }
button:hover { border-color: var(--rubric); }
button.ghost:hover { color: var(--rubric); }
button.danger { color: var(--rubric); border-color: var(--rubric); background: transparent; }
button.tiny { font-size: 0.76rem; padding: 0.2rem 0.5rem; }

input, textarea, select {
  font: inherit; font-size: 0.95rem; padding: 0.4rem 0.55rem;
  color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
textarea { width: 100%; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--rubric); }
.checkbox { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.92rem; }
.checkbox input { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0.8rem; align-items: center; }
.sticky-actions { position: sticky; inset-block-end: 0; background: var(--paper); border-block-start: 1px solid var(--rule-strong); padding-block: 0.8rem; z-index: 5; }

/* ------------------------------------------------------------------- cards */

.cards { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--rule); }
.card-item { border-block-end: 1px solid var(--rule); }
.card-item > a { display: grid; gap: 0.25rem; padding: 0.95rem 0.25rem; text-decoration: none; }
.card-item > a:hover { background: var(--paper-raised); }
.card-title { font-family: var(--font-text); font-size: 1.25rem; }
.card-langs { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.card-gloss { color: var(--ink-soft); font-size: 0.94rem; }
.matched { margin: 0 0 0.8rem; font-size: 0.74rem; color: var(--ink-faint); font-family: var(--font-mono); }

.lang {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 3px; padding: 0.05rem 0.35rem;
}
.status { font-size: 0.72rem; letter-spacing: 0.03em; border-radius: 3px; padding: 0.1rem 0.4rem; border: 1px solid currentColor; white-space: nowrap; }
.status-ok { color: var(--accent-ok); }
.status-warn { color: var(--accent-warn); }
.status-alert { color: var(--rubric); }
.status-muted { color: var(--ink-faint); }

/* --------------------------------------------------------------- term view */

.crumb { margin: 0 0 1rem; font-size: 0.88rem; color: var(--ink-faint); }
.crumb a { text-decoration: none; color: var(--ink-soft); }
.term-head { border-block-end: 1px solid var(--rule); padding-block-end: 1rem; }
.term-title { font-size: 2.3rem; margin: 0 0 0.4rem; }
.term-gloss { margin: 0; font-size: 1.02rem; color: var(--ink-soft); max-width: 66ch; }
.origin-term { font-size: 2rem; margin: 0.4rem 0 0.8rem; }
.origin-term.small { font-size: 1.3rem; margin: 0.3rem 0 0.6rem; }
.provenance { max-width: 66ch; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0; padding: 0; }
.chip { font-size: 0.77rem; color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 999px; padding: 0.15rem 0.6rem; }
.chip-muted { color: var(--ink-faint); }
.chip-ok { color: var(--accent-ok); border-color: currentColor; }
.chip-warn { color: var(--rubric); border-color: currentColor; }

.section { margin-block-start: 1.8rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem; margin-block-start: 1.8rem; }
.section-head h3 { margin: 0; }
.section-head .hint { flex: 1 1 20rem; }

.defs { display: grid; grid-template-columns: max-content 1fr; gap: 0.22rem 1.2rem; margin: 0; font-size: 0.9rem; }
.defs dt { color: var(--ink-faint); font-size: 0.8rem; padding-block-start: 0.15rem; }
.defs dd { margin: 0; }

.renditions, .disputes, .sources, .related, .loss-list, .draft-list, .parity-list, .stats { list-style: none; margin: 0; padding: 0; }
.rendition { border-inline-start: 3px solid var(--rule-strong); padding: 0 0 0.9rem 1rem; margin-block-end: 1.3rem; }
.rendition-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--font-text); font-size: 1.35rem; }
.rendition-head .tradition { font-family: var(--font-ui); font-size: 0.78rem; color: var(--ink-faint); }
.translit { margin: 0.2rem 0 0.5rem; font-size: 0.84rem; color: var(--ink-faint); font-family: var(--font-mono); }
.loss { margin: 0.4rem 0; max-width: 70ch; }
.loss-real { color: var(--ink); }
.loss-none { color: var(--ink-faint); font-style: italic; }
.loss-small { font-size: 0.88rem; color: var(--ink-soft); margin: 0.3rem 0 0; }
.alternatives { margin-block: 0.5rem; font-size: 0.9rem; }
.alternatives summary { cursor: pointer; color: var(--ink-soft); font-size: 0.84rem; }
.alternatives ul { margin: 0.5rem 0 0; padding-inline-start: 1.1rem; }
.alternatives .rendering { font-family: var(--font-text); font-size: 1rem; margin-inline-end: 0.4rem; }
.alternatives .rejected { color: var(--ink-soft); }
.basis, .source-meta { font-size: 0.81rem; color: var(--ink-faint); }
.basis { margin: 0.5rem 0 0; }
.citation { color: var(--ink-soft); }
.source-meta { margin-inline-start: 0.3rem; }
.disputes > li, .sources > li { border-block-start: 1px solid var(--rule); padding-block: 0.8rem; }
.dispute-position { margin: 0; max-width: 70ch; }
.dispute-held, .dispute-response { margin: 0.3rem 0 0; font-size: 0.88rem; color: var(--ink-soft); max-width: 70ch; }
.related { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.related a { font-family: var(--font-text); font-size: 1.05rem; }

.provenance-block { border-block-start: 1px solid var(--rule-strong); padding-block-start: 1.1rem; }

/* --------------------------------------------------------------- loss ledger */

.stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-block: 1rem; }
.stat { display: grid; }
.stat-value { font-family: var(--font-text); font-size: 1.6rem; line-height: 1.1; }
.stat-label { font-size: 0.78rem; color: var(--ink-faint); }
.loss-list > li { border-block-start: 1px solid var(--rule); padding-block: 0.8rem; }
.loss-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-family: var(--font-text); font-size: 1.1rem; }

/* -------------------------------------------------------------------- table */

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; font-size: 0.88rem; width: 100%; }
th, td { text-align: start; padding: 0.4rem 0.6rem; border-block-end: 1px solid var(--rule); vertical-align: top; }
thead th { font-size: 0.76rem; color: var(--ink-faint); font-family: var(--font-ui); font-weight: 600; }
tbody th { font-family: var(--font-text); font-size: 1rem; font-weight: 400; }
.cell-empty { color: var(--ink-faint); }
.cell-ok { color: var(--accent-ok); }
.cell-warn { color: var(--accent-warn); }
.cell-alert { color: var(--rubric); }
.cell-muted { color: var(--ink-faint); }
.compare-table tr.shared { background: var(--tint); }

/* ------------------------------------------------------------------ compare */

.compare-controls { display: flex; flex-wrap: wrap; gap: 1rem; margin-block: 1rem; }
.compare-picker { display: grid; gap: 0.2rem; font-size: 0.8rem; color: var(--ink-faint); }
.compare-grid { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .compare-grid { grid-template-columns: 1fr 1fr; } }
.compare-column { border-block-start: 2px solid var(--rule-strong); padding-block-start: 0.8rem; }

/* ------------------------------------------------------------------- editor */

.editor, .drafts, .settings, .import, .ledger, .matrix, .compare, .about, .term { max-width: 74rem; }
fieldset.group {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1rem 1.1rem 1.2rem; margin: 1.4rem 0;
}
fieldset.group > legend { font-family: var(--font-text); font-size: 1.05rem; padding-inline: 0.4rem; }
fieldset.nested-group { border-style: dashed; margin: 0.8rem 0; background: var(--sunken); }
.form-row { display: grid; gap: 0.8rem; }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.2rem; margin-block: 0.6rem; }
.field > label { font-size: 0.8rem; color: var(--ink-soft); }
.field-attention > label { color: var(--rubric); }
.field-attention textarea, .field-attention input { border-color: var(--rubric); }
.field-error { font-size: 0.82rem; color: var(--rubric); margin: 0.2rem 0 0; }

.repeatable-list { display: grid; gap: 0.8rem; }
.repeatable-item { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 0.9rem; background: var(--paper-raised); }
.repeatable-item.nested { background: transparent; border-style: dotted; }
.repeatable-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-block-end: 0.4rem; }
.repeatable-title { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.repeatable .add { margin-block-start: 0.6rem; }

/* Picking which moves a move answers. A long debate has many, so it scrolls. */
.target-list {
  list-style: none; margin: 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  max-height: 12rem; overflow-y: auto;
}
.target-list .facet { font-size: 0.9rem; }
.debate-panel .panel-block { margin-block: 1.2rem; }
.adjudication-fields:empty { display: none; }

/* Who said it, when, and which revision of the record it belongs to. */
.move-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); margin: 0 0 0.7rem; }
.correspondence .defs { margin-block: 0.8rem; }
.import-result:empty { display: none; }
.import-result p { margin: 0.4rem 0 0; font-size: 0.88rem; }
.repeatable-host { display: block; }

.findings { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-block: 1.2rem; background: var(--paper-raised); }
.findings-clean { border-color: var(--accent-ok); }
.finding-group + .finding-group { margin-block-start: 0.8rem; }
.finding-count { margin: 0 0 0.4rem; font-size: 0.85rem; }
.finding-error { color: var(--rubric); }
.finding-warn { color: var(--accent-warn); }
.finding-list { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.finding-list li { display: flex; gap: 0.6rem; padding-block: 0.2rem; }
.finding-path { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-faint); min-width: 11rem; }

.progress { margin-block: 1rem; }
.progress-track { height: 5px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent-warn); }
.progress-label { font-size: 0.82rem; color: var(--ink-faint); margin: 0.3rem 0 0; }
.progress-missing { font-size: 0.82rem; color: var(--ink-soft); margin: 0.3rem 0 0; padding-inline-start: 1.1rem; }
.progress-suggested { font-size: 0.84rem; margin-block-start: 0.4rem; }
.progress-suggested ul { padding-inline-start: 1.1rem; color: var(--ink-soft); }

.panel-block { border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-block: 1.2rem; }
.parity-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-block: 0.35rem; border-block-end: 1px solid var(--rule); }
.approval-row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1fr) minmax(8rem, 2fr); gap: 0.5rem; align-items: center; padding-block: 0.25rem; }
.approval-party { font-family: var(--font-text); font-size: 0.98rem; }
.outstanding, .signals, .cited { margin-block-start: 0.8rem; }
.outstanding ul, .signals ul, .cited ul { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }

.draft-item { border-block-start: 1px solid var(--rule); padding-block: 0.9rem; display: grid; gap: 0.3rem; }

/* ---------------------------------------------------------------- palette */

body.palette-open { overflow: hidden; }
.palette {
  position: fixed; inset: 0; z-index: 40;
  background: var(--scrim);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 1rem 2rem;
  overflow-y: auto;
}
.palette-box { background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius); width: min(34rem, calc(100vw - 2rem)); box-shadow: 0 12px 40px rgb(0 0 0 / 0.25); overflow: hidden; }
.palette-box input { width: 100%; border: 0; border-block-end: 1px solid var(--rule); border-radius: 0; font-size: 1.05rem; padding: 0.7rem 0.9rem; background: var(--paper); }
.palette-list { list-style: none; margin: 0; padding: 0.3rem 0; max-height: 20rem; overflow-y: auto; }
.palette-item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.42rem 0.9rem; cursor: pointer; font-size: 0.95rem; }
.palette-item.active { background: var(--paper-raised); box-shadow: inset 3px 0 0 var(--rubric); }
.palette-hint { font-size: 0.72rem; color: var(--ink-faint); font-family: var(--font-mono); }

/* ------------------------------------------------------------------ notice */

.message { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem; background: var(--paper-raised); }
.message h2, .message h3 { font-size: 1.15rem; margin-block-end: 0.4rem; }
.message p { margin: 0 0 0.5rem; color: var(--ink-soft); }
.message-error { border-color: var(--rubric); }

.toast {
  position: fixed; inset-block-end: 1.25rem; inset-inline-start: 50%; transform: translateX(-50%);
  max-width: min(46rem, calc(100vw - 2rem)); background: var(--ink); color: var(--paper);
  padding: 0.7rem 1rem; border-radius: var(--radius); font-size: 0.9rem; z-index: 50;
}
.toast p { margin: 0; }
.toast.warn { background: var(--accent-warn); color: var(--on-highlight); }
.toast.error { background: var(--rubric); color: var(--on-highlight); }
.citation-block { margin: 0.5rem 0 0; white-space: pre-wrap; font-size: 0.8rem; }

/* ------------------------------------------------------------- the debates
   The home screen is a list of debates, so it should read like one: motion
   first, then what state it is in. */

.debate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.debate-card {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; justify-content: space-between; align-items: baseline;
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 1rem;
  background: var(--paper-raised);
}
.debate-card > a { display: grid; gap: 0.35rem; text-decoration: none; flex: 1 1 22rem; }
.debate-motion { font-family: var(--font-text); font-size: 1.2rem; }
.debate-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.debate-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ------------------------------------------------------------ the thread */

.thread-motion { font-family: var(--font-text); font-size: 1.8rem; margin: 0 0 0.6rem; }
.thread-terms { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 1rem; margin-block: 1rem; }
.thread-terms h3 { margin-block-start: 0; }
.thread-terms ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.thread-terms li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; }
.thread-term-word { font-family: var(--font-text); font-size: 1.2rem; }
.thread-term-note { flex: 1 1 100%; margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

.thread-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.thread-move {
  border-inline-start: 3px solid var(--rule-strong); padding: 0.2rem 0 0.2rem 0.9rem;
}
/* Two sides, distinguishable at a glance without claiming one is right. */
.thread-a { border-inline-start-color: var(--rubric); }
.thread-b { border-inline-start-color: var(--accent-ok); }
.thread-unanswered { background: var(--tint); }
.thread-move-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; margin-block-end: 0.4rem; }
.thread-number { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); }
.thread-kind { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.thread-side { font-family: var(--font-text); font-size: 1.05rem; }
.thread-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); }
.thread-targets { margin: 0 0 0.3rem; font-size: 0.78rem; color: var(--ink-faint); font-family: var(--font-mono); }
.thread-steelman {
  margin: 0 0 0.6rem; padding: 0.5rem 0.8rem;
  border-inline-start: 3px solid var(--accent-warn);
  background: var(--sunken); font-size: 0.92rem; color: var(--ink-soft);
}
.thread-label { color: var(--ink-faint); font-size: 0.78rem; }
.thread-claim { margin: 0 0 0.3rem; font-family: var(--font-text); font-size: 1.08rem; }
.thread-warrant, .thread-impact { margin: 0 0 0.3rem; font-size: 0.95rem; color: var(--ink-soft); }
.thread-evidence { list-style: none; margin: 0 0 0.3rem; padding: 0; font-size: 0.85rem; color: var(--ink-faint); }
.thread-evidence li { padding-block: 0.1rem; }
.thread-state { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--ink-faint); }
.thread-state-alert { color: var(--rubric); font-weight: 600; }
.thread-digest { margin: 0.2rem 0 0; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); }

.thread-state-panel { margin-block-start: 2rem; border-block-start: 1px solid var(--rule-strong); padding-block-start: 1rem; }
.thread-take, .thread-composer { margin-block-start: 1.6rem; border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 1rem; }
.thread-composer h3 { margin-block-start: 0; }

/* ------------------------------------------------------------ the room
   The clock is the largest thing on the page, because in a room the clock is
   what everyone is looking at. */

.room { display: grid; gap: 1rem; }
.room-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.2rem; }
.room-motion { font-family: var(--font-text); font-size: 1.5rem; margin: 0; flex: 1 1 22rem; }
.room-head .actions { margin: 0; }

.room-phase { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.room-phase-name { font-family: var(--font-text); font-size: 1.05rem; }

.room-clock {
  display: grid; justify-items: center; gap: 0.1rem;
  padding: 1rem; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper-raised);
}
.room-time {
  font-family: var(--font-mono); font-size: clamp(3rem, 12vw, 6rem);
  line-height: 1; margin: 0; font-variant-numeric: tabular-nums;
}
.room-whose { margin: 0; font-family: var(--font-text); font-size: 1.15rem; }
.room-left { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.room-clock.over { border-color: var(--rubric); }
.room-clock.over .room-time { color: var(--rubric); }

/* The pinned terms stay on screen while people argue: a constraint nobody can
   see is not a constraint. */
.room-terms { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.7rem 0.9rem; }
.room-terms-empty { margin: 0; font-size: 0.85rem; color: var(--accent-warn); }
.room-terms-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; }
.room-term-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.room-term { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; }
.room-term-word { font-family: var(--font-text); font-size: 1.15rem; }
.room-term-note { flex: 1 1 100%; margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.room-term-note.empty { color: var(--ink-faint); font-style: italic; }
.room-term-contested, .room-term-undefined { border-inline-start: 3px solid var(--accent-warn); padding-inline-start: 0.6rem; }

.room-term-editor { display: grid; gap: 0.8rem; }
.room-term-row { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.7rem 0.9rem; background: var(--paper-raised); }
.room-term-add { display: flex; gap: 0.4rem; }
.room-term-add input { flex: 1; }

.room-columns { display: grid; gap: 1.2rem; }
@media (min-width: 52rem) { .room-columns { grid-template-columns: 1fr 1fr; align-items: start; } }

.room-column {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.9rem 1rem 1rem; background: var(--paper-raised);
  transition: box-shadow 120ms ease;
}
/* Whose floor it is, visible at a glance from across a room. */
.room-column.has-floor { box-shadow: inset 4px 0 0 var(--rubric); border-color: var(--rule-strong); }
.room-column-head h3 { margin: 0; font-size: 1.3rem; }
.room-position { margin: 0.1rem 0 0.5rem; font-size: 0.8rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.room-burden { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 40ch; }
.room-burden.empty { color: var(--accent-warn); }
.room-tally { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.8rem; }

.room-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.room-card {
  display: flex; gap: 0.6rem; justify-content: space-between; align-items: flex-start;
  border-inline-start: 3px solid var(--rule-strong); padding: 0.35rem 0 0.35rem 0.7rem;
}
.room-card-claim { margin: 0; font-family: var(--font-text); font-size: 1.05rem; }
.room-card-support { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.room-card-support.empty { color: var(--ink-faint); font-style: italic; }
.room-card-tools { display: grid; justify-items: end; gap: 0.2rem; flex-shrink: 0; }

.room-add { display: grid; grid-template-columns: 1fr; gap: 0.35rem; margin-block-start: 0.8rem; }
@media (min-width: 34rem) { .room-add { grid-template-columns: 1fr 1fr auto; align-items: center; } }
.room-add input { width: 100%; }

.room-points { display: grid; gap: 0.5rem; margin-block-end: 0.8rem; }
.room-point {
  border: 1px solid var(--rubric); border-radius: var(--radius);
  padding: 0.5rem 0.7rem; font-size: 0.92rem;
}
.room-point strong { font-family: var(--font-text); }
.room-point span { color: var(--ink-soft); }
.room-point .actions { margin: 0.4rem 0 0; }

.room-point-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.7rem; }
.room-poi-why { font-size: 0.78rem; color: var(--ink-faint); }
.room-poi-form { display: flex; gap: 0.4rem; margin-block-start: 0.5rem; }

.room-formats { display: grid; gap: 0.7rem; }
.room-format {
  display: grid; gap: 0.15rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
.room-format.chosen { border-color: var(--rubric); box-shadow: inset 3px 0 0 var(--rubric); }
.room-format input { position: absolute; opacity: 0; pointer-events: none; }
.room-format-name { font-family: var(--font-text); font-size: 1.05rem; }
.room-format-desc { font-size: 0.88rem; color: var(--ink-soft); }
.room-format-phases { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); }

.room-sides { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .room-sides { grid-template-columns: 1fr 1fr; } }
.room-suggestions ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0; padding: 0; }
.room-decisions { display: grid; gap: 0.3rem; margin-block: 0.6rem; }
.room-decision { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }

/* Print the room as a transcript, not as a control panel. */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}