/* ============================================================================
   LEVIATHAN — control-room design system
   Framework-free CSS. Works with plain HTML, Jinja templates, any JS.

   USAGE
     <link rel="stylesheet" href="/assets/leviathan.css">
     (Saira Condensed, the display face, is SELF-HOSTED — the Portal links
      /assets/fonts.css beside this file; no Google Fonts, no internet needed.)

   THEME
     Everything derives from the tokens in :root below — the same CSS
     custom-property model the app already uses. To switch the brand accent
     from control-room Blue to Hot Wheels Orange, set  <html data-accent="orange">.

   ⚠  SCOPE — OPERATOR CONTROL PAGES ONLY
     Do NOT link this stylesheet from the OBS overlay routes:
       /leaderboard  /table  /lower-thirds-overlay
       /tagboard-overlay  /racing-bracket-overlay
     Those are pixel-locked to on-air artwork and OBS scene positions and must
     not be restyled. This kit is for the pages that CONTROL them.
   ========================================================================== */

/* ---- TOKENS --------------------------------------------------------------- */
:root {
  /* surfaces (cool-neutral dark ramp) */
  --bg:#0e1116; --sunken:#0a0d11; --surface:#141a22; --surface-2:#182029; --surface-3:#1e2732;
  /* hairlines / dividers */
  --line:#232c3a; --line-strong:#2e3948; --line-soft:#1a222c;
  /* text */
  --text:#e8ebf0; --text-strong:#f5f7fa; --muted:#949cab; --faint:#68707e;
  /* accent — BLUE (default control-room) */
  --accent:#3b82f6; --accent-hover:#5a97f8; --accent-press:#2f6fe0;
  --accent-weak:rgba(59,130,246,.14); --accent-border:rgba(59,130,246,.42); --accent-contrast:#ffffff;
  /* semantic — fixed across themes, never overloaded */
  --ok:#7ee2a8;   --ok-weak:rgba(126,226,168,.13);   --ok-border:rgba(126,226,168,.35);
  --warn:#f0b454; --warn-weak:rgba(240,180,84,.13);  --warn-border:rgba(240,180,84,.35);
  --danger:#ef5a5a; --danger-weak:rgba(239,90,90,.13); --danger-border:rgba(239,90,90,.38);
  --live:#ff3b3b; --live-weak:rgba(255,59,59,.16);   --live-border:rgba(255,59,59,.5);
  /* radii */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-full:999px;
  /* type */
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Saira Condensed",system-ui,sans-serif; /* wordmark stays --font-ui; display = section headers only */
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* spacing scale (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  /* elevation & focus */
  --shadow-pop:0 14px 34px -12px rgba(0,0,0,.7);
  --shadow-toast:0 14px 34px -12px rgba(0,0,0,.6);
  --focus-ring:0 0 0 3px var(--accent-weak);
}

/* Hot Wheels Monster Trucks accent — <html data-accent="orange"> */
[data-accent="orange"] {
  --accent:#ff7a1a; --accent-hover:#ff9038; --accent-press:#e86c0d;
  --accent-weak:rgba(255,122,26,.15); --accent-border:rgba(255,122,26,.46); --accent-contrast:#160c02;
}
/* Hot Wheels Yellow tour — <html data-accent="yellow"> (dark contrast on the light accent) */
[data-accent="yellow"] {
  --accent:#f5b301; --accent-hover:#ffc734; --accent-press:#d99e00;
  --accent-weak:rgba(245,179,1,.15); --accent-border:rgba(245,179,1,.46); --accent-contrast:#1a1200;
}
/* Hot Wheels Purple tour — <html data-accent="purple"> */
[data-accent="purple"] {
  --accent:#a855f7; --accent-hover:#bd7cfa; --accent-press:#9333ea;
  --accent-weak:rgba(168,85,247,.16); --accent-border:rgba(168,85,247,.46); --accent-contrast:#ffffff;
}

/* ---- BASE ----------------------------------------------------------------- */
.lv-app { display:flex; min-height:100vh; background:var(--bg); color:var(--text);
  font:14px/1.5 var(--font-ui); -webkit-font-smoothing:antialiased; }
.lv-main { flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.lv-scroll { flex:1; overflow-y:auto; }
.lv-page { max-width:1180px; margin:0 auto; padding:30px 32px 66px; }
.lv-wordmark { font:800 22px/1 var(--font-ui); letter-spacing:-.1px; color:var(--text-strong); } /* NOT display face */
.lv-display  { font-family:var(--font-display); font-weight:800; font-style:italic; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text-strong); } /* section headers only, used sparingly */
.lv-label    { font:600 12px/1 var(--font-display); text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.lv-h1       { margin:0 0 5px; font:700 22px var(--font-ui); color:var(--text-strong); }
.lv-mono     { font-family:var(--font-mono); }

/* ---- SIDEBAR / NAV -------------------------------------------------------- */
.lv-sidebar { width:236px; flex:none; height:100vh; position:sticky; top:0; z-index:10;
  background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.lv-nav { flex:1; overflow-y:auto; padding:11px; display:flex; flex-direction:column; gap:2px; }
.lv-nav-item { display:flex; align-items:center; gap:11px; padding:8px 11px; border-radius:8px;
  color:var(--muted); text-decoration:none; font:500 13.5px var(--font-ui); cursor:pointer;
  transition:background .12s,color .12s; }
.lv-nav-item svg { width:18px; height:18px; flex:none; }
.lv-nav-item:hover { background:var(--surface-2); color:var(--text); }
.lv-nav-item.is-active { background:var(--accent-weak); color:var(--text-strong); font-weight:600;
  box-shadow:inset 2.5px 0 0 var(--accent); }
.lv-nav-item.is-active svg { stroke:var(--accent); }
.lv-nav-group { padding:14px 12px 5px; font:600 10.5px/1 var(--font-display);
  text-transform:uppercase; letter-spacing:1.4px; color:var(--faint); }

/* ---- TOPBAR --------------------------------------------------------------- */
.lv-topbar { height:60px; flex:none; position:sticky; top:0; z-index:6; padding:0 32px;
  background:rgba(14,17,22,.86); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }

/* ---- CARDS ---------------------------------------------------------------- */
.lv-card   { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.lv-card--pad { padding:20px 22px; }
.lv-module { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:18px 20px 16px; display:flex; flex-direction:column; }
.lv-module--soon { background:transparent; border-style:dashed; border-color:var(--line-strong); opacity:.62; }

/* ---- BUTTONS -------------------------------------------------------------- */
.lv-btn { font:600 13px/1 var(--font-ui); display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; border-radius:9px; padding:9px 16px; border:1px solid transparent;
  transition:background .12s,border-color .12s,color .12s; }
.lv-btn svg { width:15px; height:15px; }
.lv-btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.lv-btn[disabled] { opacity:.4; cursor:not-allowed; }
.lv-btn--primary   { background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
.lv-btn--primary:hover:not([disabled])   { background:var(--accent-hover); border-color:var(--accent-hover); }
.lv-btn--secondary { background:var(--surface-2); border-color:var(--line-strong); color:var(--text); }
.lv-btn--secondary:hover:not([disabled]) { background:var(--surface-3); border-color:var(--muted); }
.lv-btn--ghost     { background:transparent; color:var(--text); }
.lv-btn--ghost:hover:not([disabled])     { background:var(--surface-2); }
.lv-btn--danger    { background:var(--danger-weak); border-color:var(--danger-border); color:var(--danger); }
.lv-btn--danger:hover:not([disabled])    { background:var(--danger); border-color:var(--danger); color:#fff; }
.lv-btn--live      { background:var(--live); border-color:var(--live); color:#fff; box-shadow:0 0 14px -3px var(--live); }
.lv-btn--sm   { font-size:12px; padding:5px 11px; border-radius:7px; }
.lv-btn--icon { padding:0; width:36px; height:36px; justify-content:center; }

/* ---- INPUTS / SELECT ------------------------------------------------------ */
.lv-input { font:400 13.5px var(--font-ui); background:var(--sunken); border:1px solid var(--line-strong);
  color:var(--text); border-radius:var(--r-sm); padding:9px 12px; width:100%; }
.lv-input::placeholder { color:var(--faint); }
.lv-input:focus { outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.lv-input[disabled] { background:var(--surface); border-style:dashed; color:var(--faint); cursor:not-allowed; }
.lv-input--error { border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-weak); }
.lv-input--mono  { font-family:var(--font-mono); font-size:12.5px; }
.lv-field-error  { font-size:11.5px; color:var(--danger); margin-top:6px; }
.lv-select { font:400 13.5px var(--font-ui); background:var(--sunken); border:1px solid var(--line-strong);
  color:var(--text); border-radius:var(--r-sm); padding:9px 12px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:space-between; gap:10px; }
.lv-select:hover { border-color:var(--muted); }
.lv-select:focus { outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
/* custom dropdown menu (position:absolute under the trigger) */
.lv-menu { background:var(--surface-3); border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:5px; box-shadow:var(--shadow-pop); }
.lv-menu__item { padding:8px 11px; border-radius:7px; font-size:13.5px; color:var(--text); cursor:pointer; }
.lv-menu__item:hover      { background:var(--surface-2); }
.lv-menu__item.is-selected{ background:var(--accent); color:var(--accent-contrast); }

/* ---- SWITCH (toggle) — knob is ::after, positioned with left (not transform) */
.lv-switch { width:38px; height:22px; border-radius:var(--r-full); border:1px solid var(--line-strong);
  background:var(--sunken); position:relative; cursor:pointer; padding:0; flex:none;
  transition:background .15s,border-color .15s; }
.lv-switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:#c3c9d4; transition:left .16s,background .16s; }
.lv-switch[aria-checked="true"], .lv-switch.is-on { background:var(--accent); border-color:var(--accent); }
.lv-switch[aria-checked="true"]::after, .lv-switch.is-on::after { left:18px; background:var(--accent-contrast); }
.lv-switch:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.lv-switch--lg { width:52px; height:30px; }
.lv-switch--lg::after { width:22px; height:22px; top:3px; }
.lv-switch--lg[aria-checked="true"]::after, .lv-switch--lg.is-on::after { left:27px; }

/* ---- SEGMENTED CONTROL ---------------------------------------------------- */
.lv-segmented { display:inline-flex; gap:2px; padding:3px; background:var(--sunken);
  border:1px solid var(--line); border-radius:9px; }
.lv-segmented > button { border:none; background:transparent; color:var(--muted);
  font:600 12.5px var(--font-ui); padding:5px 14px; border-radius:7px; cursor:pointer; }
.lv-segmented > button.is-active { background:var(--surface-3); color:var(--text-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.35); }

/* ---- STATUS: pills, dots, badges, health light ---------------------------- */
.lv-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--r-full);
  font:600 12.5px var(--font-ui); border:1px solid; }
.lv-pill--ok      { color:var(--ok);     background:var(--ok-weak);     border-color:var(--ok-border); }
.lv-pill--warn    { color:var(--warn);   background:var(--warn-weak);   border-color:var(--warn-border); }
.lv-pill--error   { color:var(--danger); background:var(--danger-weak); border-color:var(--danger-border); }
.lv-pill--neutral { color:var(--muted);  background:var(--surface-2);   border-color:var(--line-strong); }
.lv-pill--info    { color:var(--accent); background:var(--accent-weak);  border-color:var(--accent-border); }

.lv-dot { width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
.lv-dot--ok    { background:var(--ok);     box-shadow:0 0 7px var(--ok); }
.lv-dot--warn  { background:var(--warn);   box-shadow:0 0 7px var(--warn); }
.lv-dot--error { background:var(--danger); box-shadow:0 0 7px var(--danger); }
.lv-dot--idle  { background:var(--faint); }

.lv-badge { font:600 11px/1 var(--font-display); letter-spacing:.5px; text-transform:uppercase;
  border-radius:var(--r-full); padding:3px 9px; border:1px solid; }
.lv-badge--active  { color:var(--ok);     background:var(--ok-weak);     border-color:var(--ok-border); }
.lv-badge--planned { color:var(--muted);  background:transparent;        border-color:var(--line); }
.lv-badge--latest  { color:var(--accent); background:var(--accent-weak);  border-color:var(--accent-border); }

.lv-health { width:14px; height:14px; border-radius:50%; flex:none; display:inline-block; }
.lv-health--ok   { background:var(--ok);     box-shadow:0 0 10px 1px var(--ok); }
.lv-health--warn { background:var(--warn);   box-shadow:0 0 10px 1px var(--warn); }
.lv-health--bad  { background:var(--danger); box-shadow:0 0 10px 1px var(--danger); }

/* ---- LIVE / ON AIR -------------------------------------------------------- */
.lv-onair { display:inline-flex; align-items:center; gap:9px; padding:6px 13px; border-radius:8px;
  background:var(--live); color:#fff; font:700 13px/1 var(--font-display); letter-spacing:1.5px;
  text-transform:uppercase; box-shadow:0 0 18px -3px var(--live); }
.lv-onair--outline { background:transparent; color:var(--accent); border:1px solid var(--accent-border);
  box-shadow:none; } /* PREVIEW / armed state */
.lv-live-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex:none;
  animation:lv-live-pulse 1.4s ease-out infinite; }
@keyframes lv-live-pulse {
  0%   { box-shadow:0 0 0 0 rgba(255,59,59,.55); }
  70%  { box-shadow:0 0 0 8px rgba(255,59,59,0); }
  100% { box-shadow:0 0 0 0 rgba(255,59,59,0); }
}

/* ---- PROGRESS ------------------------------------------------------------- */
.lv-progress { height:9px; border-radius:var(--r-full); background:var(--sunken);
  border:1px solid var(--line); overflow:hidden; }
.lv-progress__fill { height:100%; border-radius:var(--r-full); background:var(--accent); transition:width .35s ease; }
.lv-progress__fill--done { background:var(--ok); }
.lv-progress__fill--indeterminate { width:34%; animation:lv-indet 1.3s ease-in-out infinite; }
@keyframes lv-indet { 0% { transform:translateX(-120%); } 100% { transform:translateX(360%); } }

/* ---- TOAST ---------------------------------------------------------------- */
.lv-toast { display:inline-flex; align-items:center; gap:11px; padding:12px 16px;
  background:var(--surface-3); border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-toast); animation:lv-toast-in .22s ease; }
.lv-toast--error { border-color:var(--danger-border); }
@keyframes lv-toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.lv-toast-region { position:fixed; right:26px; bottom:24px; z-index:40;
  display:flex; flex-direction:column; gap:10px; }

/* ---- TABLE / LONG LIST ---------------------------------------------------- */
.lv-table { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.lv-table__toolbar { display:flex; align-items:center; gap:12px; padding:11px 18px;
  border-bottom:1px solid var(--line); background:var(--surface-2); }
.lv-table__head { display:flex; align-items:center; gap:12px; padding:8px 18px;
  border-bottom:1px solid var(--line-soft); font:600 10.5px/1 var(--font-ui);
  text-transform:uppercase; letter-spacing:.7px; color:var(--faint); }
.lv-row { display:flex; align-items:center; gap:12px; padding:11px 18px;
  border-bottom:1px solid var(--line-soft); position:relative; }
.lv-row:hover { background:var(--surface-2); }
.lv-row--onair { background:var(--live-weak); box-shadow:inset 3px 0 0 var(--live); }
.lv-row--onair:hover { background:var(--live-weak); }
/* borderless inline input inside a row (e.g. name field) */
.lv-row-input { flex:1; min-width:0; background:transparent; border:1px solid transparent;
  color:var(--text); border-radius:6px; padding:6px 9px; font:400 14px var(--font-ui); }
.lv-row-input:focus { outline:none; background:var(--sunken); border-color:var(--accent); box-shadow:var(--focus-ring); }

/* ---- EMPTY STATE ---------------------------------------------------------- */
.lv-empty { display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:40px 22px; }
.lv-empty__icon { width:52px; height:52px; border-radius:13px; background:var(--surface-2);
  border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--faint); }
.lv-empty--error .lv-empty__icon { background:var(--danger-weak); border-color:var(--danger-border); color:var(--danger); }
.lv-empty__title { font:600 15px var(--font-ui); color:var(--text-strong); }
.lv-empty__body  { font-size:13px; color:var(--muted); max-width:300px; line-height:1.55; }

/* ---- SCROLLBARS ----------------------------------------------------------- */
.lv-app ::-webkit-scrollbar { width:11px; height:11px; }
.lv-app ::-webkit-scrollbar-thumb { background:#2a3543; border-radius:8px;
  border:3px solid transparent; background-clip:content-box; }
.lv-app ::-webkit-scrollbar-thumb:hover { background:#3a4759; background-clip:content-box; }

/* ---- MOBILE / NARROW SCREENS ----------------------------------------------
   Operator pages only — the OBS overlays never load this file. Below 860px the
   sidebar becomes an off-canvas drawer (lv-shell.js injects the hamburger +
   scrim and toggles .lv-nav-open on <body>). */
@supports (height:100dvh) {
  .lv-main, .lv-sidebar { height:100dvh; } /* iOS: track the collapsing URL bar */
}
.lv-menu-btn { display:none; }
.lv-scrim { display:none; }
@media (max-width:860px) {
  .lv-menu-btn { display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:38px; height:38px; border-radius:9px; border:1px solid var(--line-strong);
    background:var(--surface-2); color:var(--text); cursor:pointer; padding:0; }
  .lv-menu-btn svg { width:20px; height:20px; stroke:currentColor; stroke-width:2;
    fill:none; stroke-linecap:round; }
  .lv-sidebar { position:fixed; left:0; top:0; bottom:0; height:auto; z-index:70;
    width:min(300px, 85vw); transform:translateX(-105%); transition:transform .22s ease;
    box-shadow:14px 0 44px rgba(0,0,0,.55); }
  .lv-app.lv-nav-open .lv-sidebar { transform:none; }
  .lv-scrim { display:block; position:fixed; inset:0; z-index:65; background:rgba(5,7,10,.58);
    opacity:0; pointer-events:none; transition:opacity .22s ease; }
  .lv-app.lv-nav-open .lv-scrim { opacity:1; pointer-events:auto; }
  .lv-topbar { height:auto; min-height:54px; flex-wrap:wrap; gap:8px 12px; padding:8px 14px; }
  .lv-page { padding:18px 14px 56px; }
  /* iOS zooms the page when a focused field is under 16px — hold the line there */
  .lv-input, .lv-select { font-size:16px; }
  .lv-toast-region { left:14px; right:14px; bottom:16px; }
  .lv-toast { width:100%; }
}