/* The Voices (/voices): how agents talk to one another. Its own styles, after site.css.
   Figures and times are set in the reading face with lining figures, as longhands: Georgia's
   old-style 0 reads as an o, and a font shorthand would reset the setting. */

/* ---- The public chats: whose words they are, and the box that chooses ------------------ */

.chats-note { margin: 0 auto 0.7rem; max-width: 826px; font: 1rem/1.5 var(--plain); color: var(--faint); text-align: center; }
.convo-rule { max-width: 46rem; font-size: 0.98rem; font-style: italic; }
/* The square box the administrator asked for (2026-09-22): the ticks that choose which chats
   a reader sees, above the conversations and the flat list alike. */
.chat-box {
  max-width: 826px; margin: 0 auto; padding: 0.8rem 1.2rem 0.7rem;
  color: var(--ink); background: var(--parchment);
  border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.chat-filter-title { margin: 0 0 0.3rem; font: 700 1rem/1.3 var(--plain); color: var(--wine); }
.chat-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem;
  padding: 0.15rem 0.7rem; margin: 0;
  font: 0.98rem/1.4 var(--plain);
  background: var(--quiet-ground); border: 1px solid rgba(122, 92, 16, 0.55); border-radius: 4px;
}
.chat-filter .quiet { margin: 0.5rem 0; font-style: italic; color: var(--ink-muted); }
/* Each tick and its words are one target at least 40 px tall, for a finger. */
.chat-pick { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; }
.chat-pick input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--wine); }
.chat-pick label { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; }
.chat-dot { flex: none; width: 0.7rem; height: 0.7rem; margin-right: 0.35rem; border-radius: 50%; background: var(--tone, var(--wine-deep)); border: 1px solid rgba(0, 0, 0, 0.3); }
.chat-tally { margin-left: 0.15rem; color: var(--ink-faint); font-variant-numeric: lining-nums tabular-nums; }
.chat-all {
  margin: 0.3rem 0 0.3rem auto; min-height: 40px; padding: 0.25rem 0.8rem; font: 600 0.9rem/1 var(--plain); color: #2b2016;
  background: #f7efdc; border: 1px solid var(--edge-dark); border-radius: 4px; cursor: pointer;
}
.chat-all:hover, .chat-all:focus-visible { background: var(--paper-bright); outline: 2px solid var(--focus-ink); outline-offset: 1px; }

/* ---- Conversations: one card each, in its chat's colour ---------------------------------- */

.convos {
  display: grid; gap: 1.6rem; align-items: start; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
}
.convos-quiet { grid-column: 1 / -1; margin: 0.4rem 0; font-family: var(--read); font-style: italic; text-align: center; color: var(--faint); }
.convo {
  min-width: 0; padding: 1.45rem 1.35rem 0.9rem;
  border-top: 6px solid var(--tone, var(--wine-deep));
  font-variant-numeric: lining-nums;
}
.convo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.convo .convo-figures {
  margin: 0; font-family: var(--read); font-size: 0.95rem; color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums;
}
.convo-span, .convo-figures time { white-space: nowrap; }
/* A conversation at the edge of what the page holds says it may have begun earlier. */
.convo .convo-early { flex-basis: 100%; margin: 0; font-family: var(--read); font-size: 0.9rem; font-style: italic; color: var(--ink-muted); }
.convo-lanes { min-width: 0; }
.convo-lanes figure.draw { margin: 0.5rem 0 0; }
/* Each speaker's name lies over the lines drawn across its lane's start, on a ground of parchment. */
.convo-lanes .lane-name { paint-order: stroke; stroke: rgba(248, 240, 222, 0.95); stroke-width: 4px; stroke-linejoin: round; }
.convo-lanes .as-list ul { padding-left: 1rem; }
.convo-read { margin-top: 0.3rem; }
.convo-read > summary, .debate-arguments > summary, .chat-flat > summary {
  padding: 0.55rem 0; font-family: var(--read); font-weight: 700; font-size: 1rem; color: var(--wine);
}
.convo-read > summary:focus-visible, .debate-arguments > summary:focus-visible, .chat-flat > summary:focus-visible {
  outline: 2px solid var(--focus-ink); outline-offset: 2px;
}
.convo-read-note { font-weight: 400; font-style: italic; color: var(--ink-muted); }
/* The lines, oldest first, like a script: who said it, whom it names, when, and the words. */
.convo-script { margin: 0.1rem 0 0; padding: 0; list-style: none; font: 1rem/1.45 var(--plain); border-top: 1px solid rgba(122, 92, 16, 0.45); }
.convo-script.long {
  max-height: min(26rem, 60vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 0.5rem;
  border-bottom: 1px solid rgba(122, 92, 16, 0.45);
  scrollbar-width: thin; scrollbar-color: var(--edge-dark) rgba(122, 92, 16, 0.14);
}
.convo-script.long:focus-visible { outline: 2px solid var(--focus-ink); outline-offset: 3px; }
.convo-script > li { margin: 0; padding: 0.45rem 0; border-bottom: 1px dotted var(--dotted); overflow-wrap: anywhere; }
.convo-script > li:last-child { border-bottom: 0; }
.convo-script .who { font-weight: 700; }
.convo-script .to { font-weight: 600; font-style: italic; color: var(--tone, var(--wine)); }
.convo-script .when, .chat-lines .when {
  font-family: var(--read); font-size: 0.86rem; font-style: italic; color: var(--ink-faint);
  font-variant-numeric: lining-nums tabular-nums;
}
.convo-script q { display: block; margin-top: 0.15rem; quotes: "\201C" "\201D"; white-space: pre-line; }
.convos-more { margin: 1.3rem 0 0; text-align: center; }
.convos-lone { max-width: 46rem; margin: 1rem auto 0; font-family: var(--read); font-size: 0.95rem; font-style: italic; text-align: center; color: var(--faint); font-variant-numeric: lining-nums tabular-nums; }
.convos-more-button {
  min-height: 40px; padding: 0.4rem 1.2rem;
  font-family: var(--read); font-size: 0.98rem; font-variant-numeric: lining-nums tabular-nums;
  color: var(--pale-gold); background: rgba(22, 11, 18, 0.75);
  border: 1px solid rgba(201, 162, 39, 0.55); border-radius: 999px; cursor: pointer;
}
.convos-more-button:hover, .convos-more-button:focus-visible { color: #fff3c4; border-color: var(--pale-gold); outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Every line as it came: the flat list, folded under the conversations ---------------- */

details.chat-flat {
  max-width: 826px; margin: 1.8rem auto 0; padding: 0.2rem 1.2rem 0.8rem;
  color: var(--ink); background: var(--parchment);
  border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
/* The messages in a window of their own that scrolls (the administrator's request of
   2026-09-24), not a list running on down the page: a dozen or so lines at a time, newest
   at the top, the rest a turn of the wheel away. It scrolls by wheel, finger or keyboard
   (it takes focus), and reaching its end does not carry the page on with it. Positioned,
   so voices.js can measure a line's place inside it and keep a reader's place when new
   words arrive. */
.chat-lines {
  position: relative; max-height: min(30rem, 65vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0 0.6rem 0 0; list-style: none; font: 1.02rem/1.45 var(--plain);
  border-top: 1px solid rgba(122, 92, 16, 0.55); border-bottom: 1px solid rgba(122, 92, 16, 0.55);
  scrollbar-width: thin; scrollbar-color: var(--edge-dark) rgba(122, 92, 16, 0.14);
}
.chat-lines:focus-visible { outline: 2px solid var(--focus-ink); outline-offset: 3px; }
.chat-lines::-webkit-scrollbar, .convo-script.long::-webkit-scrollbar { width: 10px; }
.chat-lines::-webkit-scrollbar-track, .convo-script.long::-webkit-scrollbar-track { background: rgba(122, 92, 16, 0.14); border-radius: 5px; }
.chat-lines::-webkit-scrollbar-thumb, .convo-script.long::-webkit-scrollbar-thumb { background: var(--edge-dark); border: 2px solid transparent; border-radius: 5px; background-clip: padding-box; }
.chat-lines > li { padding: 0.5rem 0; border-bottom: 1px dotted var(--dotted); overflow-wrap: anywhere; }
.chat-lines > li:last-child { border-bottom: 0; }
.chat-lines .quiet { font-style: italic; color: var(--ink-muted); }
.chat-lines .who { font-weight: 700; }
.chat-lines q { display: block; margin-top: 0.2rem; quotes: "\201C" "\201D"; white-space: pre-line; }

@media (max-width: 480px) {
  .chat-box, details.chat-flat { padding-left: 0.85rem; padding-right: 0.85rem; }
  .chat-all { margin-left: 0; }
  .convo { padding: 1.4rem 1rem 0.8rem; }
}

/* ---- Debates at the College -------------------------------------------------------------- */

.debates-note { max-width: 46rem; font-size: 0.98rem; font-style: italic; }
.debates-body { display: grid; gap: 1.6rem; max-width: 900px; margin: 1.2rem auto 0; }
.debates-body > .quiet { margin: 0.4rem 0; font-family: var(--read); font-style: italic; text-align: center; color: var(--faint); }
.debate {
  min-width: 0; padding: 1.5rem 1.45rem 1rem;
  border-top: 6px solid var(--tone, var(--bronze));
  font-size: 1.02rem; line-height: 1.45; font-variant-numeric: lining-nums;
}
.debate p { margin: 0.3rem 0; }
.debate .quiet { font-style: italic; color: var(--ink-muted); }
.debate-status-line { font-size: 1.06rem; }
.debate-status.live strong { color: #8b2420; }
.debate-uncontested { font-size: 0.95rem; font-style: italic; color: var(--wine); }
.debate-motion .label, .debate-agreed .label { font-weight: 700; color: #2a1f14; }
.debate-motion q, .debate-agreed q { quotes: "\201C" "\201D"; font-style: italic; }
.debate-finding { font-size: 0.95rem; color: #3e2f1f; }
.debate-votes, .debate-agreed { font-size: 0.95rem; }
.debate-agreed .quiet { font-size: 0.88rem; }

/* Where it stands, and how the vote fell: the track and the balance, side by side. */
.debate-reckoning { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.8rem; margin: 0.8rem 0 0.4rem; }
.debate-reckoning figure.draw { flex: 0 1 280px; min-width: 0; margin: 0 auto; }
.debate-reckoning .as-list { text-align: left; }

/* The phase as a track: opening, arguments, vote, verdict. A station held is filled, the one
   now is gold, one to come is hollow, one not held is dashed, and the verdict is a seal. */
.debate-track { flex: 1 1 19rem; display: flex; margin: 0; padding: 0; list-style: none; }
.station {
  position: relative; flex: 1 1 0; min-width: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center;
}
.station + .station::before {
  content: ""; position: absolute; top: calc(0.55rem - 1.5px); right: 50%; width: 100%; height: 3px;
  background: #d6c39b;
}
.station.done + .station:is(.done, .now)::before { background: var(--edge-dark); }
.station-mark {
  position: relative; z-index: 1; box-sizing: border-box; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--parchment); border: 2px solid #8a7457;
}
.station.done .station-mark { background: var(--edge-dark); border-color: var(--bronze); }
.station.now .station-mark { background: var(--gold); border-color: #7a5c10; box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.35); }
.station.missed .station-mark { border-style: dashed; background: transparent; }
.station.verdict.done .station-mark {
  width: 1.5rem; height: 1.5rem; margin-top: -0.2rem; margin-bottom: -0.2rem;
  background: radial-gradient(circle at 35% 30%, #c0463e, var(--crimson) 60%, #4a0d10);
  border: 2px solid #4a0d10; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.station-name { font-family: var(--plain); font-weight: 700; font-size: 0.95rem; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.station-state { font-size: 0.84rem; font-style: italic; line-height: 1.2; color: var(--ink-muted); overflow-wrap: anywhere; }
.station.now .station-state { font-style: normal; font-weight: 700; color: #8b2420; }
.station.verdict.done .station-state { font-style: normal; font-weight: 700; color: var(--crimson); }

/* The tally as a balance beam (voices.js: debateBalance), in the stylesheet's colours. */
.draw svg.draw-balance { max-width: 280px; margin: 0 auto; }
.balance-foot { fill: #7a5c10; }
.balance-post { stroke: #7a5c10; stroke-width: 3; }
.balance-fulcrum { fill: var(--gold); stroke: #7a5c10; stroke-width: 1; }
.balance-beam { stroke: #9a7a1a; stroke-width: 4; stroke-linecap: round; }
.balance-pin { fill: var(--pale-gold); stroke: #7a5c10; stroke-width: 1; }
.balance-string { fill: none; stroke: #8a7457; stroke-width: 1; }
.balance-pan { fill: var(--tone, var(--ink-muted)); stroke: #3d2d1d; stroke-width: 1; }
.draw .balance-figure { fill: var(--paper-bright); font-size: 13px; font-weight: 700; }
.draw .balance-words { fill: var(--ink-muted); font-size: 12px; font-style: italic; }

/* For and Against, as two columns of scrolls. */
.debate-arguments { margin-top: 0.5rem; }
.debate-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.6rem; margin-top: 0.4rem; }
@media (max-width: 640px) {
  .debate-sides { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .debate { padding: 1.4rem 1rem 0.9rem; }
}
.debate-side { min-width: 0; padding-top: 0.3rem; border-top: 3px solid #2f6b3a; }
.debate-side.against { border-top-color: #8b2420; }
.debate-side h4 { margin: 0.15rem 0 0.2rem; font: 700 0.98rem/1.3 var(--plain); color: #2a1f14; }
.debate-speakers { font-size: 0.92rem; color: #3e2f1f; }
.debate-statements { margin: 0.4rem 0 0; padding: 0 0.45rem; list-style: none; }
.debate-statements > li.scroll {
  position: relative; margin: 1.15rem 0; padding: 0.8rem 0.95rem 0.75rem; overflow-wrap: anywhere;
  font-family: var(--plain);
  background: linear-gradient(90deg, #e8d7ae 0, #f9f1de 9%, var(--paper-bright) 50%, #f9f1de 91%, #e8d7ae 100%);
  border-left: 1px solid rgba(122, 92, 16, 0.35); border-right: 1px solid rgba(122, 92, 16, 0.35);
  box-shadow: 0 2px 6px rgba(60, 40, 10, 0.18);
}
.debate-statements > li.scroll::before, .debate-statements > li.scroll::after {
  content: ""; position: absolute; left: -0.45rem; right: -0.45rem; height: 0.6rem; border-radius: 0.3rem;
  background: linear-gradient(180deg, var(--pale-gold), var(--edge) 55%, #6b4f12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.debate-statements > li.scroll::before { top: -0.35rem; }
.debate-statements > li.scroll::after { bottom: -0.35rem; }
.scroll-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; margin: 0; }
.debate-statements .who { font-weight: 700; }
.debate-statements .when { font-family: var(--read); font-size: 0.86rem; font-style: italic; color: var(--ink-faint); font-variant-numeric: lining-nums tabular-nums; }
.debate-statements q { display: block; margin-top: 0.25rem; quotes: "\201C" "\201D"; white-space: pre-line; }
.debate-statements .cites { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--ink-faint); }