/* ==========================================================================
   state_toggle.css  --  state-as-label toggle buttons + audio mute/volume.
   Agent E3.  2026-06-13.  Locked rules: feedback_mute_button_state_and_color
   + feedback_button_progress_ui.  MUTED = red + ear with prohibition; UNMUTED
   = green + ear + embedded volume slider.  Label = the STATE, not the action.
   ========================================================================== */

/* ---- audio mute / volume control ---- */
.stb-audio {
    display: inline-flex; align-items: center; gap: .5rem;
    border-radius: 12px; padding: .4rem .7rem; border: 2px solid #ffffff;
    font-family: inherit; font-weight: 800; min-height: 48px;
}
.stb-audio[data-muted="1"] { background: #c0140f; color: #ffffff; }   /* RED = muted */
.stb-audio[data-muted="0"] { background: #14803a; color: #ffffff; }   /* GREEN = unmuted */

.stb-gear {
    background: none; border: 0; color: inherit; cursor: pointer;
    font-size: 1.25rem; min-width: 40px; min-height: 44px; line-height: 1;
    text-decoration: none;
}
.stb-ear {
    display: inline-flex; align-items: center; gap: .45rem;
    background: none; border: 0; color: inherit; cursor: pointer;
    font-weight: 800; font-size: 1.05rem; min-height: 44px;
}
.stb-ear .ear-wrap { position: relative; width: 28px; height: 28px; display: inline-block; }
.stb-ear .ear-wrap svg { width: 28px; height: 28px; display: block; }
.stb-ban { position: absolute; inset: 0; display: none; }
.stb-audio[data-muted="1"] .stb-ban { display: block; }   /* prohibition over the ear */

.stb-vol { width: 150px; max-width: 40vw; min-height: 44px; }
.stb-audio[data-muted="1"] .stb-vol { display: none; }     /* no slider when muted */

/* ---- generic state-as-label binary toggle (mic/cam/etc.) ---- */
.stb-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 48px; padding: .5rem 1rem; border-radius: 12px; border: 2px solid #fff;
    font-weight: 800; cursor: pointer; font-family: inherit; color: #fff;
}
.stb-toggle[data-on="0"] { background: #c0140f; }   /* off = red */
.stb-toggle[data-on="1"] { background: #14803a; }   /* on = green */