/* On-air looks — what Plex/Jellyfin viewers see (design/claude-design 21).
 *
 * Shared by the OBS browser sources: the break screen (overlay.html), the
 * multiview overlay, the answer toast and the multiview backdrop. Nobody can
 * press anything on air, so every screen explains itself from across the room.
 *
 * Rules that come from OBS, not taste (docs/ui-redesign/audit/onair.md):
 * - Bodies stay TRANSPARENT. These pages sit above or around live video;
 *   never link studio.css (it paints an opaque page background).
 * - Nothing animates on the break edge: the scene switch is the reveal.
 * - The look is a class on <body> (look-gameday|newsroom|telly|cinema),
 *   chosen server-side (onair_look.py) and latched for a whole break.
 */
@import url('/ui/fonts.css');

:root, body.look-cinema {
  --oa-bg: #0a0a0d; --oa-panel: rgba(18,18,24,0.78); --oa-panel-solid: #16161c;
  --oa-ink: #ffffff; --oa-ink2: rgba(255,255,255,0.74); --oa-ink3: rgba(255,255,255,0.48);
  --oa-accent: #5b9eff; --oa-accent2: #ff7e5f; --oa-live: #4cd982; --oa-brk: #ff7e5f;
  --oa-border: rgba(255,255,255,0.14);
  --oa-f-body: "Inter", system-ui, sans-serif; --oa-f-q: "Inter", system-ui, sans-serif; --oa-f-num: "Inter", system-ui, sans-serif;
  --oa-q-weight: 700; --oa-q-track: -2px; --oa-q-case: none; --oa-q-style: normal;
  --oa-radius: 22px; --oa-pip-radius: 14px; --oa-panel-border: 1px solid var(--oa-border); --oa-panel-shadow: 0 30px 60px rgba(0,0,0,0.35);
  --oa-label-bg: rgba(0,0,0,0.62); --oa-label-ink: #ffffff;
  --oa-backdrop: radial-gradient(ellipse 70% 70% at 25% 20%, rgba(91,158,255,0.16), transparent 60%),
                 radial-gradient(ellipse at center, rgba(10,10,13,0.35) 20%, rgba(10,10,13,0.82) 100%);
}
body.look-gameday {
  --oa-bg: #1a1814; --oa-panel: rgba(35,33,26,0.95); --oa-panel-solid: #23211a;
  --oa-ink: #f3eedf; --oa-ink2: rgba(243,238,223,0.74); --oa-ink3: rgba(243,238,223,0.48);
  --oa-accent: #e3a14a; --oa-accent2: #c25543; --oa-live: #6cc28a; --oa-brk: #d9573f;
  --oa-border: rgba(243,238,223,0.13);
  --oa-f-q: "Anton", "Bebas Neue", sans-serif; --oa-f-num: "Anton", "Bebas Neue", sans-serif;
  --oa-q-weight: 400; --oa-q-track: 0.2px; --oa-q-case: uppercase; --oa-q-style: italic;
  --oa-radius: 0px; --oa-pip-radius: 2px; --oa-panel-border: 0; --oa-panel-shadow: none;
  --oa-label-bg: rgba(20,18,15,0.92); --oa-label-ink: #f3eedf;
  --oa-backdrop: repeating-linear-gradient(-10deg, transparent 0 110px, rgba(255,255,255,0.02) 110px 112px),
                 linear-gradient(180deg, rgba(26,24,20,0.74) 0%, rgba(26,24,20,0.88) 100%);
}
body.look-newsroom {
  --oa-bg: #0e1a2e; --oa-panel: rgba(22,38,64,0.96); --oa-panel-solid: #162640;
  --oa-ink: #f3eedf; --oa-ink2: rgba(243,238,223,0.74); --oa-ink3: rgba(243,238,223,0.48);
  --oa-accent: #d4a73c; --oa-accent2: #c8362f; --oa-live: #6cc28a; --oa-brk: #c8362f;
  --oa-border: rgba(243,238,223,0.14);
  --oa-f-q: "Source Serif 4", Georgia, serif; --oa-f-num: "Source Serif 4", Georgia, serif;
  --oa-q-weight: 600; --oa-q-track: -1px; --oa-q-case: none; --oa-q-style: normal;
  --oa-radius: 0px; --oa-pip-radius: 0px; --oa-panel-border: 1px solid var(--oa-border); --oa-panel-shadow: none;
  --oa-label-bg: rgba(10,18,32,0.94); --oa-label-ink: #f3eedf;
  --oa-backdrop: linear-gradient(180deg, rgba(14,26,46,0.8) 0%, rgba(14,26,46,0.92) 100%);
}
body.look-telly {
  --oa-bg: #fbf5ea; --oa-panel: #ffffff; --oa-panel-solid: #ffffff;
  --oa-ink: #221c14; --oa-ink2: #5a4c3a; --oa-ink3: #9a8b75;
  --oa-accent: #ff5d8f; --oa-accent2: #4ea7ff; --oa-live: #3f9e4f; --oa-brk: #ff5d8f;
  --oa-border: rgba(34,28,20,0.12);
  --oa-f-body: "DM Sans", "Inter", system-ui, sans-serif; --oa-f-q: "Fraunces", Georgia, serif; --oa-f-num: "Fraunces", Georgia, serif;
  --oa-q-weight: 800; --oa-q-track: -1.2px; --oa-q-case: none; --oa-q-style: normal;
  --oa-radius: 28px; --oa-pip-radius: 18px; --oa-panel-border: 3.5px solid #221c14; --oa-panel-shadow: 8px 8px 0 #221c14;
  --oa-label-bg: #ffffff; --oa-label-ink: #221c14;
  --oa-backdrop: radial-gradient(circle, rgba(34,28,20,0.06) 1.5px, transparent 2px) 0 0 / 26px 26px, #fbf5ea;
  --oa-sky: #cfe5ff; --oa-sun: #ffe999; --oa-grass: #d8efb7; --oa-pink: #ffd6e3;
}

html, body { margin: 0; padding: 0; background: transparent !important; }
body { width: 1920px; height: 1080px; overflow: hidden; position: relative; color: var(--oa-ink); font-family: var(--oa-f-body); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }

/* ---- shared pieces ---- */
.oa-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 17px; white-space: nowrap; }
.oa-brand .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--oa-accent2); }
body.look-cinema .oa-brand { padding: 9px 18px; border-radius: 999px; background: var(--oa-panel); border: 1px solid var(--oa-border); }
body.look-gameday .oa-brand { transform: skewX(-10deg); background: var(--oa-accent); color: var(--oa-bg); padding: 6px 16px; font: italic 400 18px/1.1 var(--oa-f-q); letter-spacing: 1.4px; text-transform: uppercase; }
body.look-gameday .oa-brand > * { transform: skewX(10deg); }
body.look-gameday .oa-brand .dot { display: none; }
body.look-newsroom .oa-brand { font: 700 25px var(--oa-f-q); letter-spacing: -0.3px; }
body.look-newsroom .oa-brand::after { content: "WIRE"; font: 500 13px "JetBrains Mono", monospace; color: var(--oa-accent); letter-spacing: 2px; margin-left: 2px; }
body.look-newsroom .oa-brand .dot { display: none; }
body.look-telly .oa-brand { font: 800 28px var(--oa-f-q); letter-spacing: -0.5px; }
body.look-telly .oa-brand .dot { display: none; }
.oa-telly { display: none; }
body.look-telly .oa-telly { display: block; }

.oa-tag { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; font-size: 16px; font-weight: 600; white-space: nowrap;
  background: rgba(91,158,255,0.18); color: var(--oa-accent); }
.oa-tag::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.oa-tag.brk { background: rgba(255,126,95,0.16); color: var(--oa-brk); }
body.look-gameday .oa-tag { border-radius: 0; transform: skewX(-10deg); background: var(--oa-accent); color: var(--oa-bg); font: italic 400 17px/1.1 var(--oa-f-q); letter-spacing: 1.4px; text-transform: uppercase; padding: 6px 16px; }
body.look-gameday .oa-tag.brk { background: var(--oa-brk); color: var(--oa-ink); }
body.look-gameday .oa-tag::before { display: none; }
body.look-newsroom .oa-tag { border-radius: 0; background: var(--oa-accent); color: var(--oa-bg); font-weight: 700; font-size: 15px; letter-spacing: 1.8px; text-transform: uppercase; padding: 6px 14px; }
body.look-newsroom .oa-tag.brk { background: var(--oa-accent2); color: var(--oa-ink); }
body.look-newsroom .oa-tag::before { display: none; }
body.look-telly .oa-tag { background: var(--oa-sky); color: var(--oa-ink); border: 2.5px solid var(--oa-ink); font-weight: 700; }
body.look-telly .oa-tag.brk { background: var(--oa-pink); }
body.look-telly .oa-tag::before { display: none; }

.oa-panel { background: var(--oa-panel); border: var(--oa-panel-border); border-radius: var(--oa-radius); box-shadow: var(--oa-panel-shadow); }
body.look-cinema .oa-panel { backdrop-filter: blur(22px); }
body.look-gameday .oa-panel { border-top: 5px solid var(--oa-accent); }
.oa-head { font-size: 17px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--oa-ink2); }
body.look-gameday .oa-head { font: italic 400 20px var(--oa-f-q); letter-spacing: 1.2px; color: var(--oa-ink); }
body.look-newsroom .oa-head, body.look-telly .oa-head { font: 600 24px var(--oa-f-q); letter-spacing: -0.2px; text-transform: none; color: var(--oa-ink); }
body.look-telly .oa-head { font-weight: 800; }
.oa-mono { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 1px; }
.oa-num { font-family: var(--oa-f-num); font-weight: 700; }
body.look-gameday .oa-num { font-style: italic; font-weight: 400; }
.oa-name { font-weight: 600; }
body.look-gameday .oa-name { font-family: var(--oa-f-q); font-style: italic; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3px; }
body.look-newsroom .oa-name, body.look-telly .oa-name { font-family: var(--oa-f-q); }
body.look-telly .oa-name { font-weight: 800; }

/* A channel window's label: a tab ABOVE the picture, never on it. */
.oa-label { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; background: var(--oa-label-bg); color: var(--oa-label-ink);
  font-size: 17px; font-weight: 600; white-space: nowrap; border-radius: calc(var(--oa-pip-radius) / 2) calc(var(--oa-pip-radius) / 2) 0 0; }
body.look-gameday .oa-label { font: italic 400 18px var(--oa-f-q); letter-spacing: 1.2px; text-transform: uppercase; }
body.look-newsroom .oa-label { font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; font-size: 15px; }
body.look-telly .oa-label { border: 3px solid var(--oa-ink); border-bottom: 0; font-weight: 700; }
.oa-label .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--oa-live); }
.oa-label.brk .dot { background: var(--oa-brk); }
.oa-chip { padding: 3px 10px; border-radius: 999px; font: 800 13px var(--oa-f-body); letter-spacing: 1.2px; color: #fff; background: var(--oa-brk); }
.oa-chip.back { background: var(--oa-live); color: #0b1a10; }
body.look-gameday .oa-chip, body.look-newsroom .oa-chip { border-radius: 2px; }