/* OnAirCore UI — dark theme of the earlier project (06 §8): primary #F2954A, page #4D4A48, app bar #232327, DM Sans. */

@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 800; font-display: swap; src: url("../fonts/dm-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url("../fonts/dm-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "DM Sans"; font-weight: 800; font-display: swap; src: url("../fonts/dm-sans-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }

html, body { margin: 0; background: #4D4A48; font-family: "DM Sans", sans-serif; }

/* Loading screen before WASM starts. */
.boot { position: fixed; inset: 0; display: grid; place-items: center; color: #F2954A; font: 800 28px "DM Sans", sans-serif; background: #232327; }

/* K41 / K64: bands across the top. */
.band { padding: 8px 16px; font-weight: 700; text-align: center; }
.band-disconnected { background: #8a5a00; color: #fff; }
.band-error { background: #b3261e; color: #fff; }
.band-warning { background: #6b4e16; color: #fff; }
.band-info { background: #2f4a5e; color: #fff; }
.band-muted { background: #3a3836; color: #bbb; font-weight: 500; padding: 4px 16px; }

/* K206: the alert line and its list. */
.alert-bar { display: flex; align-items: center; justify-content: center; gap: 14px; cursor: pointer; flex-wrap: wrap; }
.alert-text { overflow: hidden; text-overflow: ellipsis; }
.alert-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.alert-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #8fb4cf; flex: none; }
.alert-dot.error { background: #ff5a4f; }
.alert-dot.warning { background: #f2c14a; }
.alert-seen { font-weight: 500; font-size: 12px; opacity: .8; white-space: nowrap; }
.alert-toggle { opacity: .8; }
.alert-list { background: #2c2a29; border-bottom: 1px solid #555; padding: 6px 16px; }
.alert-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; color: #eee; border-bottom: 1px solid #3a3836; }
.alert-row:last-child { border-bottom: none; }
.alert-row.seen { opacity: .55; }
.alert-row-title { font-weight: 700; min-width: 140px; }
.alert-row-text { flex: 1; }
.alert-row-since { font-size: 12px; color: #aaa; white-space: nowrap; }
.alert-flash { animation: alert-flash .5s ease-in-out 6 alternate; }
@keyframes alert-flash { from { filter: brightness(1); } to { filter: brightness(1.8); } }

/* Virtual Stream Deck faceplate (06 §3). */
.deck-panel {
  background: #222226;
  border: 1px solid #36363a;
  border-radius: 28px;
  padding: 18px 22px 22px;
  max-width: 980px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.deck-name { color: #8a8a90; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; margin: 0 0 12px 4px; }
.deck-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin-bottom: 6px; }
.deck-head .deck-name { margin: 0 0 0 4px; }
.deck-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.deck-key {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18%;
  background: #0c0c0d;
  border: 1px solid #2a2a2e;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
  touch-action: none;
  user-select: none;
}
.deck-key.active { cursor: pointer; border-color: #3d3d42; }
.deck-key.active:hover { filter: brightness(1.15); }
@media (max-width: 700px) {
  .deck-panel { padding: 10px; border-radius: 18px; }
  .deck-grid { gap: 6px; }
}

/* Player status: remaining time turns red in the last 10 s (K114). */
.remaining { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 34px; color: #fff; }
.remaining.warn { color: #ff5a4a; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.thumb { width: 96px; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 4px; display: block; }

/* K56: hold-to-confirm button fill. */
.hold-button { position: relative; overflow: hidden; }
.hold-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(224,90,74,.55); pointer-events: none; }

/* K214: the recording mark after a clip's title; a long press flips it. */
.record-toggle { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; margin-left: 8px; vertical-align: middle; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.55); cursor: pointer; user-select: none; touch-action: none; }
.record-toggle.excluded { border-color: var(--mud-palette-error); color: var(--mud-palette-error); }
.record-toggle.disabled { cursor: default; opacity: .5; }
.record-toggle .mud-icon-root { position: relative; pointer-events: none; }
.record-toggle-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(224,90,74,.45); pointer-events: none; }
.media-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.media-actions > .mud-tooltip-root { display: inline-flex; }

/* K58: browser preview of the multiview. */
.preview-frame { background: #000; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.preview-image { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .3s; }
.preview-image.stale { opacity: .35; }
.preview-image.hidden { display: none; }
/* K192: the WebRTC picture lies over the JPEG; invisible (not display:none) until it plays, so LiveKit still sees its size. */
.preview-frame { position: relative; }
.preview-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.preview-video.hidden { opacity: 0; pointer-events: none; }
.preview-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.preview-status { opacity: .7; }
.preview-bar .on { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }

/* Switcher rows (K20): Program red, Preview green, like a hardware panel. */
.bus-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bus-label { width: 44px; font-weight: 800; font-size: 12px; letter-spacing: .06em; }
.bus-label.pgm { color: #ff5a4a; }
.bus-label.pvw { color: #3ccf6a; }
.bus-key {
  min-width: 72px; height: 44px; padding: 0 10px; border-radius: 6px; border: 1px solid #45454b;
  background: #2b2b30; color: #fff; font: 700 14px "DM Sans", sans-serif; cursor: pointer;
}
.bus-key:hover:not(:disabled) { filter: brightness(1.2); }
.bus-key:disabled { cursor: default; opacity: .75; }
.bus-key.pgm-on { background: #c4231f; border-color: #ff5a4a; opacity: 1; }
.bus-key.pvw-on { background: #1d8a3e; border-color: #3ccf6a; }
.bus-key.lost { box-shadow: inset 0 -4px 0 #ff3b30; }
.bus-key.unset { color: #8a8a90; }
/* A110: the PGM row in Program/Preview mode only shows Program — flat and dim, so nobody expects it to cut. */
.bus-row.locked .bus-key:not(.pgm-on) { background: transparent; border-style: dashed; color: #6d6d72; opacity: 1; cursor: not-allowed; }
.bus-row.locked .bus-key.pgm-on { cursor: not-allowed; }
.bus-row.locked .bus-label { opacity: .8; }

/* K48: ON AIR / REC lights — app bar pills and the Live page switches. */
.light-pill { font-weight: 800; font-size: 12px; letter-spacing: .08em; padding: 3px 9px; border-radius: 4px; margin-right: 8px; color: #6d6d72; border: 1px solid #45454b; }
.light-pill.on { color: #fff; background: #d11a1a; border-color: #ff4a4a; box-shadow: 0 0 10px rgba(255, 40, 40, .6); }
.light-button { min-width: 110px; height: 46px; border-radius: 8px; border: 1px solid #45454b; background: #2b2b30; color: #8a8a90;
  font: 800 16px "DM Sans", sans-serif; letter-spacing: .08em; cursor: pointer; }
.light-button.on { color: #fff; background: #d11a1a; border-color: #ff4a4a; box-shadow: 0 0 14px rgba(255, 40, 40, .55); }
.light-button:disabled { cursor: default; opacity: .7; }
/* K213: the multitrack test's channel levels. */
.mt-meters { display: flex; flex-wrap: wrap; gap: 3px; }
.mt-meter { position: relative; width: 22px; height: 54px; background: #141416; border-radius: 3px; overflow: hidden; }
.mt-meter .mt-fill { position: absolute; left: 0; right: 0; bottom: 0; background: #3ccf6a; }
.mt-meter span { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 9px; color: #fff; text-shadow: 0 0 2px #000; }
/* K137: REC stops after a 3 s hold; the fill shows it. */
.hold-light { position: relative; overflow: hidden; }
.hold-light .hold-fill { background: rgba(255, 255, 255, .35); }

/* K114 / K169: level meters and mixer strips. */
.meter { position: relative; width: 12px; height: 100%; min-height: 160px; background: #141416; border-radius: 3px; overflow: hidden; }
.meter.horizontal { width: 100%; height: 8px; min-height: 0; }
.meter-fill { position: absolute; left: 0; bottom: 0; width: 100%; transition: height 50ms linear, width 50ms linear; }
.meter.horizontal .meter-fill { top: 0; bottom: 0; height: 100%; }
.meter-fill.green { background: #3ccf6a; }
.meter-fill.yellow { background: #e5c22b; }
.meter-fill.red { background: #ff4a3d; }
.meter-clip { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #ff2020; }
.meter.horizontal .meter-clip { left: auto; right: 0; top: 0; bottom: 0; width: 4px; height: auto; }
.program-meter { display: flex; flex-direction: column; gap: 3px; width: 180px; }
.program-audio { width: 100%; height: 32px; }

.strips { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
/* Remote guests: the six slots. */
.guest-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.guest-slot { min-height: 120px; }
.guest-devices { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.strip { background: #2b2b30; border: 1px solid #3d3d42; border-radius: 8px; padding: 10px 8px; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.strip.master { width: 128px; border-color: #F2954A; }
.strip.muted { background: #331c1c; }
.strip-label { font-weight: 800; font-size: 13px; text-align: center; min-height: 34px; display: flex; align-items: center; color: #fff; word-break: break-word; }
/* K196: an AES67 microphone's stream and channel under its name; red while it does not arrive. */
.strip-source { width: 100%; font-size: 10.5px; line-height: 1.3; color: #9a9aa0; text-align: center; margin-top: -4px; }
.strip-source span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-source.missing, .strip-source.silent, .strip-source.pending { color: #ff6b6b; font-weight: 700; }
.strip-body { display: flex; gap: 6px; height: 220px; align-items: stretch; }
.fader { writing-mode: vertical-lr; direction: rtl; height: 220px; width: 30px; margin: 0; accent-color: #F2954A; cursor: ns-resize; }
.fader:disabled { cursor: default; opacity: .6; }
.strip-db { font-variant-numeric: tabular-nums; font-size: 12px; color: #c8c8cc; }
.strip-info { font-size: 11px; color: #8a8a90; display: flex; gap: 6px; min-height: 14px; }
.mute-button { width: 80px; height: 36px; border-radius: 6px; border: 1px solid #45454b; background: #3a3a40; color: #fff; font: 800 13px "DM Sans", sans-serif; cursor: pointer; }
.mute-button.on { background: #c0201f; border-color: #ff4a4a; }
.mute-button.auto { background: #F2954A; color: #000; border-color: #F2954A; }
/* K180: listening to a guest in the browser before its sound goes to air. */
.listen-button { width: 80px; height: 28px; margin-top: 4px; border-radius: 6px; border: 1px solid #45454b; background: #2a2a30; color: #ddd; font: 700 11px "DM Sans", sans-serif; cursor: pointer; }
.listen-button.on { background: #1f6fc0; border-color: #4aa0ff; color: #fff; }
.mute-button:disabled { opacity: .6; cursor: default; }

/* K201: how long a caller has waited */
.phone-wait-medium { color: #f2c94c; font-weight: 700; }
.phone-wait-long { color: #ff6b6b; font-weight: 700; }

/* K200: the three phone lines (Live page and Phone page) */
.phone-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.phone-line { border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 8px; min-height: 64px; }
.phone-line.busy { border-color: #f2954a; }
.phone-line.onair { border: 2px solid #d62828; background: rgba(214,40,40,.12); }
.phone-ready { padding: 2px 0; }
@media (max-width: 700px) { .phone-lines { grid-template-columns: 1fr; } }

/* K212: OnAirCore Desk's lock screen over the whole page. */
.desk-gate { position: fixed; inset: 0; z-index: 2000; background: rgba(18, 18, 22, .94); display: flex; align-items: center; justify-content: center; padding: 16px; }
.desk-gate-card { width: 100%; max-width: 380px; }