/* strmrx-core UI — shared, brand-neutral CSS for every StrmrX app.
   STRMRX_UI_VERSION 0.2.1  (keep in lockstep with core.js SX.uiVersion)

   Distribution: canonical here → tools/sync.ps1 copies it into each app's docroot
   (same "no Composer on SiteGround" model as strmrx-core.php). Every app loads this
   BEFORE its own style.css, on EVERY shell (landing, dashboard, admin, overlay…),
   and overrides only the token VALUES in its :root skin.

   How an app skins it (in its own style.css :root): map the app's brand palette onto
   the --sx-* contract, e.g.  :root{ --sx-accent:var(--blood); --sx-bg:var(--bg); … }
   The app keeps its brand vars (--accent, --bg, …) for app-specific CSS; the --sx-*
   mapping is the bridge that drives all the shared chrome below.

   @layer order means everything here is OVERRIDABLE by an app's own unlayered rules —
   so promoting chrome into core can never regress an app, and an app drops its now-
   duplicate rule to let core own it. The app's font @import stays in its style.css. */
@layer sx-tokens, sx-base, sx-components, sx-overlay;

/* ── Tokens ──────────────────────────────────────────────────────────────────
   Neutral defaults. Each app re-declares these in its own :root skin — usually by
   mapping its existing brand vars onto them, e.g.  :root{ --sx-accent:var(--blood) } */
@layer sx-tokens{
  :root{
    /* surfaces */
    --sx-bg:#0a0a0c; --sx-surface:#15151b; --sx-surface2:#1c1c24;
    --sx-border:#2a2230; --sx-border2:#3a3040;
    /* text */
    --sx-text:#e9e3e6; --sx-muted:#8b8390; --sx-muted2:#a89faa;
    /* accent + status */
    --sx-accent:#c41e3a; --sx-accent2:#ff6b35;
    --sx-accent-ink:#ffffff; --sx-accent-soft:#241016; --sx-accent-hover:#d6263f;
    --sx-ok:#3ddc84; --sx-danger:#f87171;
    /* shape + type */
    --sx-radius:16px; --sx-radius-sm:10px;
    --sx-page-max:1120px;
    --sx-font:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --sx-mono:'JetBrains Mono',ui-monospace,monospace;
    /* twitch brand (constant across apps) */
    --sx-twitch:#9146FF;

    /* back-compat aliases for already-shipped components / app skins */
    --sx-panel:var(--sx-surface); --sx-panel2:var(--sx-surface2); --sx-line:var(--sx-border);
  }
}

/* ── Base ─────────────────────────────────────────────────────────────────────
   The reset + page defaults every app repeated verbatim. Overlay pages override
   body via their own unlayered `body.sx-overlay` / `body.overlay` rule. */
@layer sx-base{
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sx-font);background:var(--sx-bg);color:var(--sx-text);
    line-height:1.6;overflow-x:hidden}
  a{color:var(--sx-accent);text-decoration:none}
  .mono{font-family:var(--sx-mono)}
  button:disabled{opacity:.6;cursor:not-allowed}
  ::-webkit-scrollbar{width:7px}
  ::-webkit-scrollbar-track{background:var(--sx-surface)}
  ::-webkit-scrollbar-thumb{background:var(--sx-accent);border-radius:4px}
}

/* ── Components ───────────────────────────────────────────────────────────────*/
@layer sx-components{
  /* buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 20px;border-radius:var(--sx-radius-sm);border:1px solid var(--sx-border2);
    background:var(--sx-surface);color:var(--sx-text);font-weight:600;font-size:14px;
    cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
  .btn:hover{border-color:var(--sx-accent)}
  .btn-primary{background:var(--sx-accent);border-color:var(--sx-accent);color:var(--sx-accent-ink)}
  .btn-primary:hover{background:var(--sx-accent-hover);border-color:var(--sx-accent-hover)}
  .btn-block{width:100%}
  .btn-twitch{background:var(--sx-twitch);border-color:var(--sx-twitch);color:#fff}
  .btn-twitch:hover{background:#7d2ff7;border-color:#7d2ff7;box-shadow:0 0 22px rgba(145,70,255,.45)}
  .btn-danger{background:transparent;border-color:rgba(248,113,113,.4);color:#fca5a5}
  .btn-danger:hover{background:rgba(248,113,113,.12);border-color:var(--sx-danger)}
  .btn-ghost{background:transparent}
  .btn-sm{padding:7px 13px;font-size:13px;border-radius:8px}

  /* top nav / wordmark — shared chrome on landing + app pages */
  .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    background:color-mix(in srgb,var(--sx-bg) 78%,transparent);border-bottom:1px solid var(--sx-border)}
  .nav-inner{max-width:var(--sx-page-max);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:20px}
  .brand{font-size:22px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:9px}
  .brand .x,.brand b,.brand .b2{color:var(--sx-accent)}
  .brand .b1{color:var(--sx-text)}
  .brand svg{flex-shrink:0}
  .brand-mark{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;color:var(--sx-accent);flex-shrink:0}
  .nav-links{margin-left:auto;display:flex;gap:22px;align-items:center;font-size:14px}
  .nav-links a{color:var(--sx-muted2)}
  .nav-links a:hover{color:var(--sx-text)}
  .nav-burger{display:none;margin-left:auto;background:none;border:none;color:var(--sx-text);font-size:22px;cursor:pointer}

  .app-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    background:color-mix(in srgb,var(--sx-bg) 82%,transparent);border-bottom:1px solid var(--sx-border)}
  .app-nav-inner{max-width:980px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px}
  .app-nav .spacer{margin-left:auto}

  /* form controls */
  label.field{display:block}
  .field span{display:block;font-size:12px;color:var(--sx-muted2);text-transform:uppercase;letter-spacing:.4px;margin:0 0 5px}
  input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--sx-border);border-radius:8px;
    background:var(--sx-surface2);color:var(--sx-text);font-size:15px;outline:none;font-family:inherit;color-scheme:dark}
  input:focus,select:focus,textarea:focus{border-color:var(--sx-accent)}
  select{cursor:pointer}

  /* base panel (apps layer their own decoration on top, e.g. HUD corners) */
  .panel{background:var(--sx-surface);border:1px solid var(--sx-border);border-radius:var(--sx-radius);padding:24px;margin-bottom:20px}

  /* tables (admin) */
  table{width:100%;border-collapse:collapse}
  thead th{text-align:left;font-size:12px;color:var(--sx-muted);text-transform:uppercase;letter-spacing:.5px;padding:0 12px 10px;border-bottom:1px solid var(--sx-border)}
  tbody td{padding:14px 12px;border-bottom:1px solid var(--sx-border);vertical-align:top;font-size:14px}
  tbody tr:last-child td{border-bottom:none}
  .tbl-wrap{overflow-x:auto}

  /* helpers */
  .muted{color:var(--sx-muted)}
  .small{font-size:12px}
  .hidden{display:none}

  /* ── toggle: replaces raw checkboxes everywhere. Markup is minimal — JS
     (SX.toggles) builds the switch + label wrapper; if JS never runs, the bare
     checkbox still works.
       <label class="sx-toggle" data-tip="Longer explanation on hover">
         <input type="checkbox" id="x" checked> Short label
       </label> */
  .sx-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
    position:relative;font-weight:600;color:var(--sx-text);font-size:14px;line-height:1.3}
  .sx-toggle input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
  .sx-track{flex:none;width:40px;height:23px;border-radius:999px;background:#3a323f;position:relative;
    transition:background .18s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .sx-knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#cfc7d2;
    transition:transform .18s ease,background .18s ease;box-shadow:0 1px 3px rgba(0,0,0,.5)}
  .sx-toggle input:checked + .sx-track{background:var(--sx-accent)}
  .sx-toggle input:checked + .sx-track .sx-knob{transform:translateX(17px);background:#fff}
  .sx-toggle input:focus-visible + .sx-track{outline:2px solid var(--sx-accent);outline-offset:2px}
  .sx-toggle input:disabled + .sx-track{opacity:.4}
  .sx-label{font-weight:600}
  /* a small info affordance the app can drop in if a label needs a visible hint cue */
  .sx-info{flex:none;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
    border-radius:50%;font-size:10px;font-weight:800;color:var(--sx-muted);
    box-shadow:inset 0 0 0 1.4px currentColor;cursor:help}

  /* ── Hover/focus tooltip: any element with [data-tip] ── */
  [data-tip]{position:relative}
  [data-tip]::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 9px);z-index:60;
    width:max-content;min-width:150px;max-width:280px;padding:8px 11px;border-radius:9px;
    background:#14121a;color:#ece6ea;font-family:var(--sx-font);font-size:12px;font-weight:500;line-height:1.45;
    white-space:normal;text-align:left;letter-spacing:0;text-transform:none;
    box-shadow:0 12px 34px -10px #000,inset 0 0 0 1px rgba(255,255,255,.09);
    opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s ease,transform .15s ease}
  [data-tip]::before{content:"";position:absolute;left:16px;bottom:calc(100% + 4px);z-index:60;
    border:5px solid transparent;border-top-color:#14121a;opacity:0;transition:opacity .15s ease}
  [data-tip]:hover::after,[data-tip]:focus-within::after,
  [data-tip]:hover::before,[data-tip]:focus-within::before{opacity:1;transform:translateY(0)}

  /* ── Toast (SX.toast) ── */
  .sx-toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translateX(-50%) translateY(20px);
    background:var(--sx-panel2);color:var(--sx-text);font-family:var(--sx-font);font-size:14px;font-weight:600;
    padding:11px 18px;border-radius:10px;box-shadow:0 16px 44px -14px #000,inset 0 0 0 1px var(--sx-line);
    opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
  .sx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* ── Overlay shell (games only) ───────────────────────────────────────────────
   The shared OBS browser-source frame — ONE shell for every StrmrX overlay, so a
   streamer's experience (and any future "change the overlay" request) is uniform
   across apps. Contract: a full-viewport root that fades in on .ready (via
   SX.revealOverlay), holding the app's own game UI in one of two stage modes:
     • .sx-stage-wrap  — BOXED: a fixed-size design (app sets width) that
       SX.fitStage() scales-to-fit + centres in any source size. Streamers size
       the OBS source (e.g. left half, chat on the right) and it scales to fit.
     • .sx-stage-fill  — FULL-BLEED: a canvas/WebGL app (e.g. PixiJS with
       resizeTo:window) that fills the source and self-fits its own world.
   The app renders its OWN game inside — this layer only frames + reveals it. */
@layer sx-overlay{
  body.sx-overlay{margin:0;overflow:hidden;background:transparent}
  .sx-overlay-root{position:fixed;inset:0;overflow:hidden;opacity:0;transition:opacity .5s ease}
  .sx-overlay-root.ready{opacity:1}
  /* BOXED: absolutely centred; SX.fitStage applies translateX(-50%) scale(). */
  .sx-stage-wrap{position:absolute;left:50%;top:16px;transform:translateX(-50%)}
  /* FULL-BLEED: fills the root; the app's canvas/world self-fits inside. */
  .sx-stage-fill{position:absolute;inset:0}
}