/*
 * /assets/speak.css — the Record button beside every box that takes more
 * than one line (#244), drawn by /assets/js/speak.js.
 *
 * One file for the public pages, the booking form and the admin, because all
 * three carry the same scheme tokens (lib/branding.php,
 * branding_css_scheme_tokens and branding_css_scheme_dark). Tokens only, no
 * literal colour: the admin dark-mode check does not read this file, so the
 * rule it holds is kept here by hand. --green with --navy text is the
 * site's own brand button (the mobile Book bar) and does not flip in dark.
 *
 * Only the recording state is red. Every button is at least 48 by 48.
 */
.speak { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; 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: 10px 16px;
    font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2;
    background: var(--field); color: var(--ink);
    border: 1px solid var(--line); border-radius: 9px; box-shadow: none; cursor: pointer;
}
.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; }

.speak .speak-rec::before {
    content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    background: var(--err-ink); margin-right: 9px; vertical-align: -1px;
}
.speak.on .speak-rec { background: var(--err-bg); border-color: var(--err-ink); color: var(--err-ink); }
.speak.on .speak-rec::before { border-radius: 2px; }

.speak-status { flex-basis: 100%; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.speak-status:empty { display: none; }
.speak-status.warn { color: var(--err-ink); font-weight: 600; }

/* Signed in (the admin): 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: 10px; padding: 10px 12px; background: var(--bg-soft); }
.speak-rich .speak-rec { background: var(--green); border-color: var(--green); color: var(--navy); }
.speak-rich .speak-rec::before { display: none; }
.speak-rich.on .speak-rec { background: var(--err-bg); border-color: var(--err-ink); color: var(--err-ink); }
.speak-clock { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 3.2em; font-size: 15px; }
.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(--ok-ink); transition: width .06s linear; }
.speak-player { height: 40px; max-width: 260px; }