/* =============================================================================
   BsRecordAnnounce.css — %BS_RECORD_ANNOUNCE%

   Same framed-panel language as BsApiTools: an instrument sitting inside an
   article, not prose. What it adds is a transport — record button, level meter,
   waveform — but it stays in the wiki's light palette throughout. A recorder
   is conventionally a dark surface; here that would make this one component
   invert itself against every other element on the page.

   Colour comes from the Behnke tokens (--behnke-design and the greys) rather
   than from hexes of its own, so the panel follows the design system wherever
   it is themed. The literals after each comma are fallbacks for the case where
   the token stylesheet has not loaded.

   Only three colours are not tokens, and each is a state rather than a brand:
   the red of an armed recorder, and the green/amber/red of the level meter.
   Those mean the same thing on every device with a record button on it.
   ============================================================================= */

.bs-rec {
    /* Read back by the script to paint the waveform, so it follows the theme
       instead of the canvas hard-coding a colour of its own. */
    --bs-rec-wave: var(--behnke-design, #0066cc);

    --bs-rec-live: #c0392b;
    --bs-rec-line: var(--behnke-light-gray, #e5e7eb);
    --bs-rec-surface: var(--behnke-white, #fff);
    --bs-rec-sunken: color-mix(in srgb, var(--behnke-design, #0066cc) 4%, var(--behnke-white, #fff));
    --bs-rec-ink: var(--behnke-black, #1f2937);
    --bs-rec-ink-soft: var(--behnke-medium-black, #4b5563);
    --bs-rec-ink-muted: var(--behnke-medium-gray, #6b7280);

    margin: calc(1.5 * var(--behnke-basic)) 0;
    border: 1px solid var(--bs-rec-line);
    border-radius: calc(0.5 * var(--behnke-basic));
    background: var(--bs-rec-surface);
    color: var(--bs-rec-ink);
    overflow: hidden;
}

.bs-rec__title {
    margin: 0;
    padding: calc(0.7 * var(--behnke-basic)) var(--behnke-basic);
    border-bottom: 1px solid var(--bs-rec-line);
    background: var(--bs-rec-sunken);
    font-size: calc(0.95 * var(--behnke-normal-font-size));
    font-weight: 600;
    color: var(--bs-rec-ink);
}

/* ── Blocked notice ──────────────────────────────────────────────────────── */

.bs-rec__blocked,
.bs-rec__note {
    margin: 0;
    padding: calc(0.7 * var(--behnke-basic)) var(--behnke-basic);
    border-bottom: 1px solid var(--bs-rec-line);
    background: #fdf3f2;
    color: #8c2f26;
    font-size: calc(0.9 * var(--behnke-normal-font-size));
    line-height: 1.5;
}

/* ── Target format ───────────────────────────────────────────────────────── */

.bs-rec__format {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    background: var(--bs-rec-line);
    border-bottom: 1px solid var(--bs-rec-line);
}

.bs-rec__format-row {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding: calc(0.6 * var(--behnke-basic)) var(--behnke-basic);
    background: var(--bs-rec-surface);
}

.bs-rec__format dt {
    font-size: calc(0.75 * var(--behnke-normal-font-size));
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-rec-ink-muted);
}

.bs-rec__format dd {
    margin: 0;
    font-family: var(--behnke-mono-font, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
    font-size: calc(0.95 * var(--behnke-normal-font-size));
    font-variant-numeric: tabular-nums;
    color: var(--bs-rec-ink);
}

/* ── Stage ───────────────────────────────────────────────────────────────── */

.bs-rec__stage {
    padding: var(--behnke-basic);
    background: var(--bs-rec-sunken);
    border-bottom: 1px solid var(--bs-rec-line);
    display: flex;
    flex-direction: column;
    gap: calc(0.7 * var(--behnke-basic));
}

.bs-rec__meter {
    position: relative;
    height: 0.6rem;
    border-radius: 0.3rem;
    border: 1px solid var(--bs-rec-line);
    background: var(--bs-rec-surface);
    overflow: hidden;
}

.bs-rec__meter-fill {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    /* Green through amber to red: the last stretch is the one worth avoiding. */
    background: linear-gradient(90deg, #2e8b52 0%, #2e8b52 62%, #c98a1e 82%, var(--bs-rec-live) 96%);
    transition: transform 60ms linear;
}

.bs-rec__meter-peak {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    left: 0;
    background: var(--bs-rec-ink);
    opacity: 0.55;
    transition: left 120ms ease-out;
}

.bs-rec.is-clipping .bs-rec__meter { border-color: var(--bs-rec-live); }

.bs-rec__wave {
    display: block;
    width: 100%;
    height: 7.5rem;
    border: 1px solid var(--bs-rec-line);
    border-radius: calc(0.35 * var(--behnke-basic));
    background: var(--bs-rec-surface);
}

/* ── Transport ───────────────────────────────────────────────────────────── */

.bs-rec__transport {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(0.5 * var(--behnke-basic));
}

.bs-rec__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: calc(0.45 * var(--behnke-basic)) calc(0.9 * var(--behnke-basic));
    border: 1px solid transparent;
    border-radius: calc(0.35 * var(--behnke-basic));
    background: var(--behnke-design, #0066cc);
    color: var(--behnke-white, #fff);
    font: inherit;
    font-size: calc(0.9 * var(--behnke-normal-font-size));
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.bs-rec__btn:hover:not(:disabled) { filter: brightness(1.08); }
.bs-rec__btn:disabled             { opacity: 0.45; cursor: not-allowed; }

.bs-rec__btn:focus-visible {
    outline: 2px solid var(--behnke-design, #0066cc);
    outline-offset: 2px;
}

.bs-rec__btn--record { background: var(--bs-rec-live); }

.bs-rec__btn--record:focus-visible { outline-color: var(--bs-rec-live); }

/* One ghost style for the whole panel: the stage is no longer a dark island,
   so there is nothing left to make a second variant for. */
.bs-rec__btn--ghost {
    background: var(--bs-rec-surface);
    border-color: var(--behnke-gray, #cbd5e1);
    color: var(--bs-rec-ink);
}

.bs-rec__btn--ghost:hover:not(:disabled) {
    filter: none;
    background: color-mix(in srgb, var(--behnke-design, #0066cc) 8%, var(--behnke-white, #fff));
    border-color: var(--behnke-design, #0066cc);
}

.bs-rec__dot {
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--behnke-white, #fff);
}

.bs-rec.is-recording .bs-rec__dot { animation: bs-rec-pulse 1.1s ease-in-out infinite; }

@keyframes bs-rec-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .bs-rec.is-recording .bs-rec__dot { animation: none; }
    .bs-rec__meter-fill,
    .bs-rec__meter-peak { transition: none; }
}

.bs-rec__time {
    font-family: var(--behnke-mono-font, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
    font-size: calc(1.05 * var(--behnke-normal-font-size));
    font-variant-numeric: tabular-nums;
    color: var(--bs-rec-ink);
    margin-left: auto;
}

.bs-rec__limit {
    font-size: calc(0.8 * var(--behnke-normal-font-size));
    color: var(--bs-rec-ink-muted);
}

.bs-rec__status {
    margin: 0;
    min-height: 1.4em;
    font-size: calc(0.85 * var(--behnke-normal-font-size));
    color: var(--bs-rec-ink-soft);
}

/* Darkened against a light ground: the stage colours would fail on white. */
.bs-rec__status--live  { color: #b3261e; font-weight: 600; }
.bs-rec__status--ok    { color: #1e7a45; }
.bs-rec__status--warn  { color: #8a5a00; }
.bs-rec__status--error { color: #b3261e; }

/* ── Options ─────────────────────────────────────────────────────────────── */

.bs-rec__options {
    padding: var(--behnke-basic);
    border-bottom: 1px solid var(--bs-rec-line);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: calc(0.7 * var(--behnke-basic));
}

.bs-rec__toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
    cursor: pointer;
}

.bs-rec__toggle input {
    margin-top: 0.25em;
    flex: none;
    accent-color: var(--behnke-design, #0066cc);
}

.bs-rec__toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    min-width: 0;
}

.bs-rec__toggle-label {
    font-size: calc(0.9 * var(--behnke-normal-font-size));
    font-weight: 600;
    color: var(--bs-rec-ink);
}

.bs-rec__toggle-hint {
    font-size: calc(0.8 * var(--behnke-normal-font-size));
    line-height: 1.45;
    color: var(--bs-rec-ink-soft);
}

/* ── Result ──────────────────────────────────────────────────────────────── */

.bs-rec__result {
    padding: var(--behnke-basic);
    display: flex;
    flex-direction: column;
    gap: calc(0.6 * var(--behnke-basic));
}

.bs-rec__result-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5em;
}

.bs-rec__result-title {
    font-size: calc(0.9 * var(--behnke-normal-font-size));
    font-weight: 600;
    color: var(--bs-rec-ink);
}

.bs-rec__result-meta {
    font-family: var(--behnke-mono-font, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
    font-size: calc(0.8 * var(--behnke-normal-font-size));
    font-variant-numeric: tabular-nums;
    color: var(--bs-rec-ink-muted);
}

.bs-rec__player { width: 100%; }

.bs-rec__field {
    display: flex;
    flex-direction: column;
    gap: calc(0.2 * var(--behnke-basic));
    min-width: 0;
}

.bs-rec__field > span {
    font-size: calc(0.8 * var(--behnke-normal-font-size));
    font-weight: 600;
    color: var(--bs-rec-ink-soft);
}

.bs-rec__name {
    padding: calc(0.4 * var(--behnke-basic)) calc(0.55 * var(--behnke-basic));
    border: 1px solid var(--behnke-gray, #cbd5e1);
    border-radius: calc(0.3 * var(--behnke-basic));
    background: var(--bs-rec-surface);
    font: inherit;
    font-size: calc(0.9 * var(--behnke-normal-font-size));
    color: var(--bs-rec-ink);
    min-width: 0;
}

.bs-rec__name:focus-visible {
    outline: 2px solid var(--behnke-design, #0066cc);
    outline-offset: 1px;
}

.bs-rec__actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.5 * var(--behnke-basic));
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
    /* A recorder on paper is a dead control; keep the format table, which is
       the part someone might actually want in a printed instruction. */
    .bs-rec__stage,
    .bs-rec__options,
    .bs-rec__result { display: none; }
}