/*
 * /assets/speak.css — the Record button beside every box that takes more
 * than one line (row 7.3, card #49), drawn by /assets/js/speak.js. Ported
 * from FixItSir's assets/speak.css onto this app's tokens (public/assets/
 * fmb.css), so it follows light and dark with every shell.
 *
 * Only the recording state is red. Every button is at least 48 by 48.
 */
.speak { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0 var(--space-1); }
/* The hidden attribute loses to display:flex without this. */
.speak[hidden], .speak [hidden] { display: none !important; }

.speak button {
    /* 48 by 48 is row 7.3's floor, not a spacing token: a Record button is pressed by someone who cannot aim. */
    width: auto; min-height: 48px; min-width: 48px; margin: 0; padding: var(--space-3) var(--space-4);
    font: inherit; font-size: var(--text-m); font-weight: var(--weight-strong); line-height: 1.2;
    background: var(--field); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.speak button:hover { border-color: var(--ink); }
.speak button:focus-visible { outline: 3px solid var(--info-ink); outline-offset: 2px; }
.speak button[disabled] { opacity: .75; cursor: progress; }
/* The server's button, before the script has put the recorder in its place. */
.speak-waiting button[disabled] { cursor: default; }

.speak .speak-rec::before {
    content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; /* token-exempt: a round recording dot, not a box */
    background: var(--error-ink); margin-right: var(--space-2);
}
.speak.on .speak-rec { background: var(--error-bg); border-color: var(--error-ink); color: var(--error-ink); }
.speak.on .speak-rec::before { border-radius: 2px; } /* token-exempt: the dot becomes a stop square */

.speak-status { flex-basis: 100%; color: var(--muted); font-size: var(--text-s); line-height: 1.45; }
.speak-status:empty { display: none; }
.speak-status.warn { color: var(--error-ink); font-weight: var(--weight-strong); }

/* Signed in (the Operator's and staff screens): PurrHelp's recorder. A dashed
   panel, the Record button filled, a clock, a sound meter, and a player once
   there is something to play. The 🎙 in the button replaces the dot. */
.speak-rich { border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--space-3); background: var(--bg); }
.speak-rich .speak-rec { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.speak-rich .speak-rec::before { display: none; }
.speak-rich.on .speak-rec { background: var(--error-bg); border-color: var(--error-ink); color: var(--error-ink); }
.speak-clock { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 3.2em; font-size: var(--text-s); }
.speak-meter { width: 64px; height: 8px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; flex: 0 0 auto; }
.speak-meter i { display: block; height: 100%; width: 0; background: var(--ok-ink); transition: width .06s linear; }
.speak-player { height: 40px; max-width: 260px; }