/* showkit-skin.css — the Orren Kai look. This IS the deck's look; there is no
 * switch and no default-deck fallback (James, 2026-08-06).
 *
 * Loaded after showkit.css in control.html's <head>, which is the whole
 * mechanism: the token block below is `:root`, same specificity as showkit.css's
 * `:root`, so it wins on source order. Everything else is prefixed `html ` —
 * one extra element in the selector, purely to outrank the host chrome that
 * control.html declares in its own inline <style> (which loads later than this
 * file and would otherwise win at equal specificity, e.g. plain `main`). Don't
 * drop that `html ` prefix thinking it's dead weight; the rail depends on it.
 *
 * Two halves, with very different risk:
 *
 *   1. TOKENS — recolouring. Custom properties only. Cannot break layout.
 *   2. RAIL   — moving nav.tabs to a left rail. This restyles the HOST deck's
 *               own chrome, so it is gated to wide viewports and falls back to
 *               the top pill bar rather than to something broken.
 *
 * The rail deliberately does NOT touch nav.tabs markup, the .tab class, the
 * data-tab attribute, .active, or .hidden — showTab(), applyPanel() and
 * applyGuest() keep working untouched, because all three operate on classes
 * and this is pure presentation.
 */

/* ============================ 1. TOKENS ============================== */

:root {
  --sk-bg:     #05070d;
  --sk-panel:  #0c1119;
  --sk-panel2: #121a27;
  --sk-line:   #1b2740;
  --sk-line2:  #2a3c55;
  --sk-ink:    #d6e7f5;
  --sk-dim:    #9db0c4;
  --sk-quiet:  #6d7f95;

  --sk-accent: #00e5ff;
  /* Status colour keeps the deck's established meaning — current stays green,
     next stays amber. Recolouring the brand is a preference; recolouring what
     "current" means is a mistake the operator pays for on air. */
  --sk-cur:    #00ff9c;
  --sk-armed:  #f6c25e;
  --sk-bad:    #ff2fb9;
  --sk-ready:  #00ff9c;

  --sk-radius: 4px;
  --sk-radius-sm: 3px;
  --sk-title: 'Reith Sans Condensed', 'Rajdhani', system-ui, sans-serif;
  --sk-mono:  ui-monospace, Menlo, Consolas, monospace;
}

/* Only the Show Kit surfaces are retinted. The Control Room's own panels,
   buttons and graphics are left alone — this is a skin, not a rewrite. */
html .sk-rd,
html .sk-pv,
html .sk-tw {
  background: var(--sk-bg);
}
html .sk-h2 {
  color: #a8fbff;
  text-shadow: 0 0 12px rgba(0, 229, 255, .45);
}
html .sk-pv-title { color: #a8fbff; }
html .sk-pb { border-radius: 4px; }
html .sk-prog-bar {
  background: linear-gradient(90deg, rgba(0, 229, 255, .45), rgba(0, 229, 255, .12));
}
html .sk-btn:hover:not(:disabled) {
  border-color: #00e5ff;
  box-shadow: 0 0 10px -3px #00e5ff;
}

/* ============================ 2. LEFT RAIL =========================== */
/*
 * Gated at 1180px. Below that the rail would fight the deck's 880px responsive
 * collapse and its 1220px centred main, so the top pill bar is simply kept —
 * a laptop or a phone gets the layout it already has.
 */
@media (min-width: 1180px) {
  html body { --sk-rail: 208px; }

  html nav.tabs {
    position: fixed;
    left: 0;
    top: var(--sk-rail-top, 64px);
    bottom: 0;
    width: var(--sk-rail);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 10px;
    margin: 0;
    overflow-y: auto;
    background: var(--sk-panel);
    border-right: 1px solid var(--sk-line);
    z-index: 40;
  }

  html nav.tabs .tab {
    width: 100%;
    text-align: left;
    border-radius: 3px;
    padding: 9px 12px;
    /* .tab.active sets background:var(--accent-grad). A rail item reads better
       as an edge marker than a filled pill, so the gradient is replaced rather
       than fought — .active still drives it, so the deck's JS is untouched. */
    background: transparent;
    border-left: 3px solid transparent;
  }
  html nav.tabs .tab:hover { background: rgba(255, 255, 255, .04); }
  html nav.tabs .tab.active {
    background: rgba(0, 229, 255, .10);
    border-left-color: #00e5ff;
    color: #a8fbff;
  }

  html main {
    margin-left: var(--sk-rail);
    max-width: none;
    padding-left: 26px;
    padding-right: 26px;
  }
}

/* Print gets the plain flow; nothing here is load-bearing enough to justify
   a fixed rail on paper. */
@media print {
  html nav.tabs { position: static; width: auto; flex-direction: row; }
  html main { margin-left: 0; }
}