/* ============================================================
   FBM LIVE CONTROL — ADMIN + LAUNCHER SKIN
   Flat, editorial re-skin (CastingTable design system) for the
   operator panel and launcher ONLY. Loaded after fbm-theme.css +
   theme.css on admin.html and index.html. Broadcast outputs never
   load this file, so their look is untouched.
   Black-neutral dark mode · white editorial light mode · one red accent.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* ---- Typography: Inter (UI) + Space Mono (labels) ---- */
  --font-ui:'Inter',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Inter',system-ui,sans-serif;
  --font-num:'Space Mono',ui-monospace,Menlo,monospace;

  /* ---- DARK MODE = neutral black (not navy) ---- */
  --bg:#0a0a0a; --panel:#141414; --panel2:#1c1c1c;
  --bg-0:#0a0a0a; --bg-1:#141414; --bg-2:#191919;
  --surface:rgba(255,255,255,.055); --surface-2:rgba(255,255,255,.11); --stroke:rgba(255,255,255,.13);
  --text-0:#f4f4f3; --text-1:#c3c3c1; --text-2:#8b8b89; --dim:#8b8b89; --white:#f4f4f3;

  --accent:var(--fbm-red); --accent-hover:#c40010;
  --radius:12px; --r-sm:10px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 10px 34px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --bg:#f2f2f0; --panel:#ffffff; --panel2:#f6f6f4;
  --bg-0:#f2f2f0; --bg-1:#eaeae7; --bg-2:#ffffff;
  --surface:rgba(10,10,10,.04); --surface-2:rgba(10,10,10,.085); --stroke:rgba(10,10,10,.13);
  --text-0:#0a0a0a; --text-1:#3d3d3d; --text-2:#6f6f6f; --dim:#6f6f6f; --white:#0a0a0a;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06); --shadow-md:0 10px 34px rgba(0,0,0,.07);
}

/* ---- Base type ---- */
body{ font-family:var(--font-body); color:var(--text-0); -webkit-font-smoothing:antialiased; letter-spacing:.01em; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; color:var(--text-0); }
.kicker,.pilltag,.mono-label,.sub{ font-family:var(--font-num); font-weight:700; letter-spacing:.12em; }

/* ---- Page canvas: flat, subtle ---- */
.aurora{ background:
    radial-gradient(700px 420px at 88% -6%, rgba(227,0,15,.05), transparent 60%),
    var(--bg) !important; }
.aurora::after{ opacity:0 !important; }

/* ---- Surfaces: flat cards, thin border, soft shadow ---- */
.glass{ background:var(--panel) !important; border:1px solid var(--stroke) !important;
  border-radius:var(--r-lg) !important; box-shadow:var(--shadow-sm) !important; backdrop-filter:none !important; }
.card{ border-radius:var(--r-lg); }
.side{ background:var(--panel) !important; border-right:1px solid var(--stroke) !important; backdrop-filter:none !important; }

/* ---- Flat buttons (kill the 3D drop shadow; solid fills, subtle hover) ---- */
.btn{ font-family:var(--font-ui); font-weight:600; font-size:14px; border:1px solid transparent;
  border-radius:var(--r-sm); padding:11px 18px; color:#fff; box-shadow:none !important;
  background:var(--accent); transition:filter .14s, background .14s, transform .1s, border-color .14s; }
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(1px); box-shadow:none !important; }
.btn.secondary{ background:#2563eb; }
.btn.success{ background:#16a34a; }
.btn.danger{ background:var(--bad); }
.btn.gold{ background:var(--gold); color:#241500; }
.btn.ghost{ background:var(--surface); color:var(--text-0); border:1px solid var(--stroke); filter:none; }
.btn.ghost:hover{ background:var(--surface-2); filter:none; }
.btn.small{ padding:8px 13px; font-size:13px; border-radius:9px; }
.btn:disabled{ opacity:.45; }

/* ---- Flat icon tiles (nav + launcher): no bevel, no glow ---- */
.nav .ic{ background:var(--surface) !important; color:var(--text-1);
  border:1px solid var(--stroke); box-shadow:none !important; border-radius:10px; }
.nav .ic svg{ width:19px; height:19px; display:block; }
.nav a:hover .ic{ background:var(--surface-2) !important; color:var(--text-0); }
.nav a.active{ background:var(--surface) !important; color:var(--text-0) !important; box-shadow:inset 0 0 0 1px var(--stroke) !important; }
.nav a.active .ic{ background:var(--accent) !important; color:#fff !important; border-color:transparent !important; }

/* ---- Inputs: flat ---- */
input, select, textarea{ font-family:var(--font-ui); color:var(--text-0) !important; background:var(--bg-2) !important;
  border:1px solid var(--stroke) !important; border-radius:9px; }
input::placeholder, textarea::placeholder{ color:var(--text-2); }
input[type=color]{ background:transparent !important; border:1px solid var(--stroke) !important; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent) !important; }

/* ---- Pills / chips → flat ---- */
.pilltag{ background:var(--surface); border:1px solid var(--stroke); color:var(--text-2); border-radius:var(--r-pill); }
.chip{ background:var(--surface) !important; border:1px solid var(--stroke) !important; color:var(--text-1) !important; }
.chip.on{ background:var(--accent) !important; border-color:transparent !important; color:#fff !important; }

/* ---- List rows / deck cards ---- */
.dcard{ background:var(--panel); border:1px solid var(--stroke) !important; border-radius:var(--r-md); }
.dcard:hover{ border-color:var(--accent) !important; transform:translateY(-2px); }
.dcard .meta .nm, .lrow .lmain .lt{ color:var(--text-0) !important; }
.hint{ color:var(--text-2); }

/* ============================================================
   LAYOUT — full-width top header (logo + hamburger, left) + a collapsed
   icon-rail that expands into an OVERLAY drawer (like the reference).
   ============================================================ */
#app{ display:block !important; }
.opbar{ position:fixed !important; top:0; left:0; right:0; height:56px; z-index:60 !important;
  display:flex; align-items:center; gap:14px; padding:0 18px !important; }
.topbar-left{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.opbar .nav-toggle{ font-size:20px; line-height:1; background:transparent; border:none; color:var(--text-1);
  cursor:pointer; padding:6px 9px; border-radius:9px; }
.opbar .nav-toggle:hover{ background:var(--surface-2) !important; color:var(--text-0) !important; }
.opbar .nrk-logo-h{ height:22px; }
.opbar .now{ margin-left:6px; }
.opbar .opbar-right{ margin-left:auto; }

/* collapsed icon rail (default), pinned under the header */
.side{ position:fixed !important; top:56px !important; left:0; bottom:0 !important; width:72px;
  height:auto !important; z-index:55 !important; overflow:hidden; padding:14px 8px !important;
  transition:width .22s var(--ease), box-shadow .22s; }
.side.collapsed{ width:72px !important; }
.side:not(.collapsed){ width:264px !important; padding:16px 14px !important; box-shadow:26px 0 70px rgba(0,0,0,.5); }
.side .kicker{ display:none; }
.side:not(.collapsed) .kicker{ display:block; }

/* content sits right of the rail + below the header; the drawer floats OVER it (no shift) */
.main{ margin-left:72px !important; margin-top:56px !important; height:calc(100vh - 56px) !important; }
.cdrawer{ left:72px !important; top:56px !important; }

/* dim backdrop shown while the drawer is expanded */
.drawer-backdrop{ position:fixed; top:56px; left:0; right:0; bottom:0; z-index:54; background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .22s; }
.drawer-backdrop.on{ opacity:1; pointer-events:auto; }

/* ---- Kill residual navy/blue: neutral-black surfaces, red as the only accent ---- */
.opbar{ background:var(--panel) !important; border-bottom:1px solid var(--stroke) !important; }
/* broadcast preview stages → pure black (matches an OBS canvas), both themes */
.lr-screen, .lr-screen2, #stStage, #studio, .masset .mthumb, .dcard .thumb, .dcard .thumb .tcam{ background:#000 !important; }
.dcard .thumb{ background:#000 radial-gradient(600px 200px at 50% 0, rgba(227,0,15,.08), transparent) !important; }
/* blue-tinted hovers → neutral surface */
.opnav-icon:hover, .nav-toggle:hover, .rail-studio:hover, .cdrawer-close:hover, .setup summary:hover{ background:var(--surface-2) !important; color:var(--text-0) !important; }
/* cyan/blue "active" chrome (studio + surface + settings tabs) → the single red accent */
.surftab.active, .wsurftab.active, .st-surf.active, .settab.active, .ftab.active, .rail-studio.on,
.rail-collapse:hover, .dcard .dedit:hover, .mpick-btn:hover, .masset .mcopy:hover, .opnav-icon.active{
  background:var(--accent) !important; color:#fff !important; border-color:transparent !important; box-shadow:none !important; }
/* the collapse/studio rails when idle → neutral */
.rail-collapse, .rail-studio{ background:var(--surface) !important; color:var(--text-1) !important; border-color:var(--stroke) !important; }

/* ---- Pin Comments = PUSH drawer: the page slides right to make room (no overlay) ---- */
.main{ transition:margin-left .24s cubic-bezier(.4,0,.2,1) !important; }
body.comments-open .main{ margin-left:412px !important; }
.cdrawer{ z-index:52 !important; }
#pinComments{ position:relative; display:inline-flex; align-items:center; gap:7px; }
#pinComments svg{ flex:0 0 auto; }
#pinComments.on{ background:var(--accent) !important; color:#fff !important; border-color:transparent !important; }
#pinComments .nav-badge{ position:static; margin:0 0 0 2px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--accent); color:#fff; font-family:var(--font-num); font-weight:900; font-size:10px; display:inline-flex;
  align-items:center; justify-content:center; }
#pinComments.on .nav-badge{ background:#fff; color:var(--accent); }
#pinComments .nav-badge.zero{ display:none; }

/* flat toolbar icons */
.rail-studio svg, .rail-collapse svg{ vertical-align:-2px; }

/* ---- Square preview / program screens (no rounded corners) ---- */
.lr-screen, .lr-screen2, .pvbox, #stStage, .lr-screen iframe, .lr-screen2 iframe, .pvbox iframe{ border-radius:0 !important; }

/* ---- Checkboxes → toggle switches (unambiguous active/inactive) ----
   OFF = grey track, knob LEFT.  ON = green track, knob RIGHT + glow.
   NOTE: the global `input,select,textarea{ background:…!important }` rule forces these to use
   !important on background/border/background-image or the track + knob get wiped. ---- */
input[type="checkbox"]{ appearance:none !important; -webkit-appearance:none !important; flex:0 0 auto; box-sizing:border-box;
  width:46px !important; height:26px !important; border-radius:999px !important; cursor:pointer; vertical-align:middle; margin:0;
  background:#414c66 !important; border:1px solid #5a6788 !important;
  background-image:radial-gradient(circle 9px, #eef1f8 96%, transparent 100%) !important;   /* OFF knob: light, LEFT */
  background-repeat:no-repeat !important; background-position:4px 50% !important; background-size:auto !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  transition:background-color .18s ease, background-position .2s cubic-bezier(.4,0,.2,1), border-color .18s, box-shadow .18s; }
input[type="checkbox"]:hover{ border-color:#7f8db0 !important; }
input[type="checkbox"]:checked{ background-color:#1fbf6f !important; border-color:#1fbf6f !important;   /* ON track: green */
  background-image:radial-gradient(circle 9px, #fff 96%, transparent 100%) !important;         /* ON knob: white, RIGHT */
  background-position:calc(100% - 4px) 50% !important;
  box-shadow:0 0 0 1px rgba(31,191,111,.4), 0 0 8px rgba(31,191,111,.5); }
input[type="checkbox"]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
input[type="checkbox"]:disabled{ opacity:.45; cursor:not-allowed; }
.showtoggle{ align-items:center; gap:11px; }
.showtoggle input[type="checkbox"]{ accent-color:initial; width:46px !important; height:26px !important; }

/* ---- Settings tabs → flat pills (latest theme) ---- */
.settab{ background:var(--surface) !important; border:1px solid var(--stroke) !important; color:var(--text-2) !important;
  border-radius:999px !important; font-weight:600; box-shadow:none !important; }
.settab:hover{ background:var(--surface-2) !important; color:var(--text-0) !important; }
.settab.active{ background:var(--accent) !important; color:#fff !important; border-color:transparent !important; }
.settab{ display:inline-flex; align-items:center; gap:7px; }
.settab svg, .ftab svg, .chip svg{ width:15px; height:15px; flex:0 0 auto; }
.ftab, .chip{ display:inline-flex; align-items:center; gap:6px; }

/* ---- NRK LIVE CONTROL logo (masked SVG → recolours with the theme: ink in light, white in dark) ---- */
.nrk-logo{ display:inline-block; background:currentColor; color:var(--text-0);
  -webkit-mask:var(--nrk-src) center/contain no-repeat; mask:var(--nrk-src) center/contain no-repeat; }
.nrk-logo-h{ --nrk-src:url('../assets/logo-nrklc-h.svg'); height:26px; width:calc(26px * 516.86 / 37.96); }
body.launcher .nrk-logo-h{ height:44px; margin:0 auto 6px; display:block; }

/* ---- Keep broadcast PREVIEWS (deck thumbnails + studio canvas) in the FBM broadcast fonts,
        so they still look exactly like what goes on air — only the admin CHROME uses Inter. ---- */
.tmini, .gfx, .gfx-inner, .gfx-winboard, #stStage, .st-edit, .st-el, .cf-list, .lf-footer, .gfx-comment{
  --font-display:'Bungee',cursive; --font-ui:'Chakra Petch',sans-serif; --font-num:'Orbitron',sans-serif;
}

/* ---- LAUNCHER (index.html) ---- */
body.launcher .wrap h1{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; }
body.launcher a.card{ color:var(--text-0); background:var(--panel); border:1px solid var(--stroke);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
body.launcher a.card:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow-md); }
body.launcher a.card .ic{ width:54px; height:54px; display:grid; place-items:center; border-radius:14px;
  background:var(--surface); color:var(--text-1); border:1px solid var(--stroke); margin-bottom:14px; }
body.launcher a.card:hover .ic{ background:var(--accent); color:#fff; border-color:transparent; }
body.launcher a.card .ic svg{ width:26px; height:26px; }
body.launcher a.card p{ color:var(--text-2); }

/* ── Media picker: bigger, legible thumbnails (force over any earlier rule/collapse) ── */
/* Show every image WHOLE at its own aspect ratio: the tile height follows the image (wide banners become
   wide-short thumbs, logos become tall thumbs) so nothing is cropped and nothing is a sliver in an empty box. */
.mpick-overlay .mgrid{ grid-template-columns:repeat(auto-fill, minmax(360px,1fr)) !important; gap:16px !important; align-items:start !important; }
.mpick-overlay .masset{ height:auto !important; }
.mpick-overlay .masset .mthumb{ display:block !important; height:auto !important; min-height:0 !important;
  flex:none !important; padding:8px !important; box-sizing:border-box !important; background:#252d44 !important; }
.mpick-overlay .masset .mthumb img, .mpick-overlay .masset .mthumb video{
  width:100% !important; height:auto !important; max-height:360px !important; object-fit:contain !important; display:block !important; }

/* ── Studio: multi-stop gradient editor ── */
.grad-ed{ border:1px solid var(--stroke); border-radius:10px; padding:9px; margin:2px 0 8px; background:var(--bg-2); }
.grad-prev{ height:26px; border-radius:7px; border:1px solid var(--stroke); margin-bottom:9px; }
.grad-arow{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2); margin-bottom:7px; }
.grad-arow input{ width:84px; }
.grad-stop{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.grad-stop .gs-c{ width:46px; height:30px; padding:2px; border:1px solid var(--stroke); border-radius:7px; background:none; cursor:pointer; }
.grad-stop .gs-p{ width:74px; }
.grad-stop span{ color:var(--text-2); font-size:12px; }
.grad-stop .gs-del{ margin-left:auto; border:none; background:rgba(255,60,80,.14); color:#ff6a7d; width:28px; height:28px; border-radius:7px; cursor:pointer; font-weight:800; }
.grad-stop .gs-del:hover{ background:#e3000f; color:#fff; }
.grad-ed input[type=number]{ background:var(--bg); border:1px solid var(--stroke); color:var(--text); border-radius:7px; padding:6px 8px; font:inherit; font-size:13px; }

/* ── Studio: rotator face picker ── */
.rot-faces{ display:flex; flex-direction:column; gap:6px; margin:2px 0 8px; }
.rot-face-item{ display:block; }
.rot-face-opts{ margin:5px 0 2px 8px; gap:6px; padding-left:8px; border-left:2px solid var(--stroke); }
.rot-face{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2, #93a1c4); background:var(--bg-2); border:1px solid var(--stroke); border-radius:8px; padding:6px 10px; cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
.rot-face input, #rotOn{ accent-color:#f4c430; width:40px !important; height:22px !important; }
.rot-face:has(input:checked){ background:rgba(244,196,48,.16); border-color:#f4c430; box-shadow:inset 0 0 0 1px #f4c430; color:#fff; font-weight:700; }   /* ACTIVE face — clearly lit */
.rot-face:has(input:checked)::after{ content:"✓ in rotation"; font-size:10px; font-weight:700; color:#f4c430; margin-left:2px; }
.rot-face input{ margin:0; width:auto; }
.rot-face span{ white-space:nowrap; }

/* built-in footer removed — hide the dormant Settings → Footer panel */
.glass.card[data-stab="footer"]{ display:none !important; }