/*
 * The Record button beside every multi-line box, drawn by /assets/speak.js
 * (vault dc-2026-09-26-spoken-input-silence-caught-on-every-page).
 *
 * Copied from the Copycat Go apex's site.css, which ported it from
 * freezermealbiz-app's speak.css, onto site.css's colour tokens. Only the
 * recording state is red, and every button is at least 48 by 48: it is
 * pressed by someone who cannot aim.
 */

.speak { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 4px; }
/* The hidden attribute loses to display:flex without this. */
.speak[hidden], .speak [hidden] { display: none !important; }
.speak button {
  width: auto; min-height: 48px; min-width: 48px; margin: 0; padding: 12px 16px;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--line); border-radius: 12px; box-shadow: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.speak button:hover { border-color: var(--ink); }
.speak button[disabled] { opacity: .75; cursor: progress; }
.speak .speak-rec::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--rec-line); margin-right: 8px; }
.speak.on .speak-rec { background: var(--rec-bg); border-color: var(--rec-line); color: var(--rec-ink); }
.speak.on .speak-rec::before { border-radius: 2px; }
.speak-status { flex-basis: 100%; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.speak-status:empty { display: none; }
.speak-status.warn { color: var(--warn); font-weight: 700; }

/* Signed in: PurrHelp's recorder. A dashed panel, the Record button filled,
   a clock, a sound meter, and a player once there is something to play. */
.speak-rich { border: 2px dashed var(--line); border-radius: 12px; padding: 12px; background: var(--wash); }
.speak-rich .speak-rec { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.speak-rich .speak-rec::before { display: none; }
.speak-rich.on .speak-rec { background: var(--rec-bg); border-color: var(--rec-line); color: var(--rec-ink); }
.speak-clock { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 3.2em; font-size: .9rem; }
.speak-meter { width: 64px; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; flex: 0 0 auto; }
.speak-meter i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .06s linear; }
.speak-player { height: 40px; max-width: 260px; }