/* sx-skin.css — BingoX's teal night, handed to the SHARED chrome.
 * BX_SX_SKIN_VERSION 1.0.0
 *
 * WHY THIS FILE EXISTS (family standard, Joey 2026-08-20, StreamPals = reference impl).
 * The family header, footer and Store panel are shared code served by strmrx.com's
 * layout tag. The layout config paints the StrmrX DEFAULT theme (near-black #16161d,
 * stark near-white text, orange accent) as INLINE styles on `.sxh` — which is a
 * fallback look for identity-less apps, never meant to override an app with its own
 * brand. This file is BingoX telling the chrome where it is standing: teal night,
 * Space Grotesk, the bingo-hall Lilita One wordmark.
 *
 * ⚠️ !important is LOAD-BEARING on every token in the .sxh block AND on the root
 *    `color:` — inline styles win everything else.
 * ⚠️ Scope to .sxh only. A body-level change reaches the family footer and Store
 *    panel on every page: wide blast radius for a local tweak.
 * ⚠️ Load AFTER core.css on every page carrying the layout tag (all eight shells).
 *
 * The `--bxh-*` hooks exist for ONE reason: sb-landing.html (the StreamBingoX brand,
 * amber/coral on the same engine) redeclares them so ITS header wears amber, from the
 * same skin file. Everything chains down to the app's live palette vars, so a future
 * palette tweak in style.css carries the header automatically. */

body {
  --bxh-bar:    var(--surface, #0f1417);           /* the bar = one step up from the page */
  --bxh-ink:    var(--text, #e6f0ee);
  --bxh-mut:    var(--muted2, #8aa099);
  --bxh-word:   var(--text, #e6f0ee);              /* wordmark ink: white (Joey's call, teal read too loud) */
  --bxh-x:      #ff7828;                           /* the ONE branded X — orange everywhere in BingoX (.sxx) */
}

.sxh {
  --sx-bg:        var(--bxh-bar) !important;
  --sx-surface:   var(--bxh-bar) !important;
  /* Hover pills, the Live chip and similar fills draw --sx-surface2. A flat panel
     tone reads as grey blobs on the night bar; a quiet tint OF THE INK sits in the
     world instead (same lesson as StreamPals 1.3.1). */
  --sx-surface2:  color-mix(in srgb, var(--bxh-ink) 8%, transparent) !important;
  --sx-head-fill: 92% !important;                  /* a whisper of glass over the sky */
  --sx-text:      var(--bxh-ink) !important;
  --sx-muted:     var(--bxh-mut) !important;
  --sx-muted2:    var(--bxh-mut) !important;
  --sx-faint:     var(--bxh-mut) !important;
  --sx-border:    color-mix(in srgb, var(--bxh-ink) 12%, transparent) !important;
  --sx-border2:   color-mix(in srgb, var(--bxh-ink) 24%, transparent) !important;
  /* The X signature + badges. Deliberately NOT teal: BingoX's brand X is orange on
     every footer and landing (.sxx), and the header must wear the same one X. */
  --sx-accent:      var(--bxh-x) !important;
  --sx-accent-ink:  #1a0c02 !important;
  --sx-radius:    var(--radius, 16px) !important;
  --sx-font:      var(--font, 'Space Grotesk', system-ui, sans-serif) !important;
  /* The config theme also lands a literal near-white `color:` inline; items that
     merely inherit go stark white without this. */
  color: var(--bxh-ink) !important;
}

/* The wordmark speaks bingo hall: Lilita One, in white ink (sb-landing re-tints it amber). */
.sxh .sxh-brand-txt { font-family: 'Lilita One', var(--font, 'Space Grotesk', sans-serif); font-weight: 400; letter-spacing: .4px; }
.sxh .sxh-word { color: var(--bxh-word); }

/* Nav ink: muted at rest, full ink on hover — the same grading the app's own pills
   use. Declared explicitly: marketing-shell items carry no colour of their own and
   would otherwise inherit the config theme's inline near-white. */
.sxh .sxh-item { font-weight: 700; color: var(--bxh-mut); }
.sxh .sxh-item:hover, .sxh .sxh-item.on { color: var(--bxh-ink); }

/* The account chip's own greys are white-alpha tuned for the family default bar;
   re-tint them from OUR ink so they read quiet on the teal night. */
.sxh .sxa-chip {
  background: color-mix(in srgb, var(--bxh-ink) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bxh-ink) 13%, transparent);
  color: var(--bxh-mut);
}
.sxh .sxa-chip:hover { background: color-mix(in srgb, var(--bxh-ink) 12%, transparent); }

/* ── Per-item icon art (family bones, BingoX rendering) ──────────────────────────
   The Store entry wears the Ember Glass daub — the flair store IS the daub store.
   Stroke glyph hidden, art painted in its place, so a chrome update that re-renders
   the glyph changes nothing visible. Other items keep the ink-tinted stroke glyphs
   until matching art lands; add them here the same way. */
.sxh #navStore .sxh-ico-g, .sxh #navStore .sxh-ico { display: none; }
.sxh #navStore::before {
  content: ""; flex: none; width: 24px; height: 24px;
  background: url('/icons/daub.png') center/contain no-repeat;
}