/* The Voices card (voicesbox.js), shared by the Voices page and the Realm: every message in
   the six public chats and everything said aloud in public, newest first, with six toggles of
   its own. After site.css, before the page's own stylesheet. 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. */

/* Each chat's dot, in its colour (site.css: .tone-chat-*). */
.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); }

/* Room at the foot for the corner flourishes, clear of the box's lower edge; a card with no
   title of its own (the Realm's, under its band's title) has room at the head for them too. */
.voices-card { max-width: 826px; margin: 0 auto; padding: 1.5rem 1.35rem 2.4rem; }
.voices-card.untitled { padding-top: 2.6rem; }
.band .card h3.voices-title { margin: 0 0 0.5rem; font-size: 1.35rem; letter-spacing: 0.03em; text-align: center; }
.voices-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem 0.5rem; margin: 0 0 0.8rem; }
/* Each toggle a target at least 40 px tall, for a finger: filled while its part is heard,
   dashed and hollow while it is not. */
.voices-part {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.25rem 0.85rem;
  font-family: var(--plain); font-size: 0.98rem; line-height: 1.3; font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink); background: #f7efdc; border: 1px solid var(--edge-dark); border-radius: 999px; cursor: pointer;
}
.voices-part:hover { background: var(--paper-bright); }
.voices-part:focus-visible { outline: 2px solid var(--focus-ink); outline-offset: 2px; }
.voices-part[aria-pressed="false"] { color: var(--ink-muted); background: transparent; border-style: dashed; }
.voices-part[aria-pressed="false"] .chat-dot { background: transparent; border: 1.5px solid var(--tone, var(--wine-deep)); }
.voices-tally { margin-left: 0.15rem; color: var(--ink-faint); font-variant-numeric: lining-nums tabular-nums; }
/* The messages in a window of their own that scrolls (the administrator's requests of
   2026-09-24 and 2026-10-07): four at a time, newest at the top, the rest a turn of the wheel
   away. voicesbox.js sizes it to its first four entries as drawn; the height here is for a
   browser that measures nothing. It scrolls by wheel, finger or keyboard (it takes focus), and
   reaching its end does not carry the page on with it. Positioned, so voicesbox.js can measure
   an entry's place inside it and keep a reader's place when new words arrive. */
.chat-lines {
  position: relative; max-height: 22rem; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0 0.6rem 0 0; list-style: none; font: 1.02rem/1.45 var(--plain);
  font-variant-numeric: lining-nums tabular-nums;
  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 { width: 10px; }
.chat-lines::-webkit-scrollbar-track { background: rgba(122, 92, 16, 0.14); border-radius: 5px; }
.chat-lines::-webkit-scrollbar-thumb { background: var(--edge-dark); border: 2px solid transparent; border-radius: 5px; background-clip: padding-box; }
.chat-lines > li { margin: 0; padding: 0.5rem 0; border-bottom: 1px dotted var(--dotted); overflow-wrap: anywhere; }
.chat-lines > li:last-child { border-bottom: 0; }
.chat-lines .chat-who { margin: 0; }
.chat-lines .quiet { font-style: italic; color: var(--ink-muted); }
.chat-lines .who { font-weight: 700; }
.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;
}
/* Where words said aloud were said: "said aloud at the Plaza of Unity". */
.chat-lines .voice-where { font-family: var(--read); font-size: 0.9rem; font-style: italic; color: var(--ink-soft); }
.chat-lines q { display: block; margin-top: 0.2rem; quotes: "\201C" "\201D"; white-space: pre-line; }
/* A long line folded (voicesbox.js: folded), and the word under it that shows all of it or
   folds it again: on the Voices card, the Voices page's conversations and the Realm's "Heard at".
   A press target of 32px in the card's own link ink. */
.unfold {
  display: inline-flex; align-items: center; min-height: 32px; margin: 0.1rem 0 0; padding: 0 0.15rem;
  border: 0; background: none; color: #6b1418; cursor: pointer;
  font-family: var(--read); font-size: 0.92rem; font-style: italic; text-decoration: underline;
  text-underline-offset: 0.18em;
}
.unfold:hover { color: var(--crimson); }
.unfold:focus-visible { outline: 2px solid var(--focus-ink); outline-offset: 2px; }

/* The way to the Voices page, under the card where another page shows it (the Realm). */
.voices-more { margin: 0.6rem 0 0; text-align: center; font-family: var(--plain); font-weight: 700; font-size: 1.05rem; }
.voices-more a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0 0.6rem; color: var(--pale-gold); }
.voices-more a:hover, .voices-more a:focus-visible { color: #fff3c4; }

@media (max-width: 480px) {
  .voices-card { padding: 1.4rem 0.95rem 2.4rem; }
  .voices-card.untitled { padding-top: 2.6rem; }
}