/* The room server's pages on a CommVio box: the gallery theme over the booth's
   and the producer page's own styles (portal/brand.py adds this file; a CommVio
   box never loads it). Same values as the app's tokens (commvio
   web/src/styles/commvio.css). Blue means press this, red only live, green
   ready, amber attention and a mute. */
@font-face { font-family: "IBM Plex Sans"; src: url(/plex-sans.woff2) format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(/schibsted.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --field: #1B2129; --panel: #252D37; --line: #3B4653; --ink: #E9EDF1; --dim: #A6B1BD; --edge: #7A8796;
  --volt: #2A6BF0; --tally: #E4262C; --amber: #F0B429; --ready: #22A45F; --link: #8DB2FF;
  --onair: #E4262C; --mutered: #F0B429; --on-amber: #1B2129;
  --bg: var(--field); --green: var(--ready); --red: var(--tally); --blue: var(--line);
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --plexmono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
body, button, select, input, textarea, label, h1, h2, h3 { font-family: var(--sans); }
kbd, #air button small, #fs-keys kbd { font-family: var(--plexmono); text-transform: none; }
.mono, code, .clock span, .strip .val, .scale, #rundown li .t, #mic-rate, #lufs { font-family: var(--plexmono); }
:focus-visible { outline-color: var(--link); }
button, select, input { border-radius: 6px; }

.wm-room { display: inline-flex; align-items: flex-start; font: 800 19px/1 "Schibsted Grotesk", var(--sans); letter-spacing: -.025em; color: #fff; }
.wm-room::after { content: ""; width: .24em; height: .24em; border-radius: 50%; background: var(--tally); margin: .02em 0 0 .07em; flex: none; }
#start .wm-room { align-self: flex-start; font-size: 22px; }

/* Words: sentence case, as the app. */
#air button .name, #air button small, #headset-row label, #setup h3, #checklist li .need,
#rundown-box h2, #right h2, kbd { text-transform: none; letter-spacing: 0; }
#setup h3, #rundown-box h2, #right h2, #mixer-head, .strip .ch, #producer-card .cap { font-size: 13px; font-weight: 600; letter-spacing: 0; }
#banner, #air button .name { letter-spacing: 0; font-weight: 600; }

/* Press this: solid blue, white words. */
#start-btn, #chat-form button, form button[type="submit"]:not(.second), button.primary {
  background: var(--volt); border-color: #5C8FF7; color: #fff; font-weight: 600;
}
#start-btn:hover, #chat-form button:hover, form button[type="submit"]:not(.second):hover, button.primary:hover { background: #1F5AD6; }
button, select { border-color: #55626F; }
button.second { background: #38434F; color: #fff; }
.error { color: var(--amber); }
#setup-btn.attn { background: var(--volt); border-color: #5C8FF7; color: #fff; }
#producer-wa, form a, a { color: var(--link); }
form h1, div > h1, header h1 { color: var(--ink); }
form, form + div, body > div:only-of-type { border-top-color: var(--line); border-radius: 8px; }

/* Ready: green. Not the colour of a button. */
#conn.ok::before, #checklist li.ok::before, .ppm .fill.good, .dot.ok, .steps li.done b,
.tile .dot, .meter { background: var(--ready); border-color: var(--ready); }
#ready-line.ok, #level-word.good, .state-up { color: var(--ready); }
.steps li.done b { color: #fff; }
#fs-notch .fs-cam.speaking { box-shadow: 0 0 0 2px var(--ready); }

/* Faults are amber. Red is only on air. */
#conn.bad::before { background: var(--amber); }
#level-word.hot { color: var(--amber); }

/* Live: red. The not-yet LIVE button is quiet until the checks pass. */
#air-live { border-color: var(--line); color: var(--dim); }
#air-live.ready { border-color: var(--tally); color: #fff; }
#air-live.on, #banner.live { background: var(--tally); border-color: var(--tally); color: #fff; }
#state.onair, #state.leaving { color: #fff; }

/* A mute: amber with dark words, so it can never pass for on air. */
#banner.muted, #mute.on, #state.muted, #video-wrap.fs-muted #fs-keys button[data-press="mute"],
#mic-warn, #headset-warn, #tab-warn { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }

/* Talking to the producer only: attention, not a button. */
#banner.talk, #air-talk.on, #state.going { border-color: var(--amber); color: var(--amber); }
#video-wrap.fs-talk #fs-tally { border-color: var(--amber); }

/* Marks that were yellow and mean neither. */
#rundown li.now { border-left-color: var(--ink); }
#rundown li.now .t { color: var(--ink); }
#start .card, #setup .sheet { border-top: 1px solid var(--line); border-radius: 8px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#start, #setup { background: rgba(5, 8, 12, .8); }
.msg.mine { background: #22304A; border-color: #5C8FF7; }
.fader { accent-color: var(--volt); }
.tile.enlarged, .tile:focus-visible { outline-color: var(--link); }
#logo.wm-room { height: auto; width: auto; display: inline-flex; }