/*
  SONO XR — showcase SKINS (2026-07-11, Michael).
  Five visual languages on one engine — the anti-"every-Matterport-looks-
  the-same" feature. Config: "skin": "mission|modern|futuristic|retro|noir"
  → body.sxr-skin-<name> (applied by showcase-config.js).

  MISSION is the default (the current mission-control look) — zero overrides.
  Skins restyle surfaces + typography; the client's accent color still rules.
*/

/* ═══ MODERN — soft minimal gallery ═══ */
body.sxr-skin-modern { font-family: -apple-system, 'Helvetica Neue', 'Segoe UI', sans-serif; }
body.sxr-skin-modern .splash-content-box {
  background: rgba(22, 24, 28, 0.82) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 24px !important; box-shadow: 0 30px 90px rgba(0,0,0,0.5) !important;
}
body.sxr-skin-modern .splash-title { font-weight: 700 !important; letter-spacing: 0.04em !important; }
body.sxr-skin-modern .sxr-title-cine { animation: none; background: none; -webkit-text-fill-color: #fff; }
body.sxr-skin-modern .sxr-dock { border-radius: 20px; background: rgba(20,22,26,0.78); border-color: rgba(255,255,255,0.12); }
body.sxr-skin-modern .sxr-card, body.sxr-skin-modern .sxr-settings-pop {
  border-radius: 22px; background: rgba(24,26,30,0.94); border-color: rgba(255,255,255,0.12);
}
body.sxr-skin-modern .sxr-chip { border-radius: 999px; background: rgba(255,255,255,0.09); border-color: transparent; }
body.sxr-skin-modern .sxr-step { border-radius: 16px; border-color: rgba(255,255,255,0.1); }
body.sxr-skin-modern .hud-header-panel, body.sxr-skin-modern .sidebar-panel-interactive {
  border-radius: 18px !important; border-color: rgba(255,255,255,0.12) !important;
}
body.sxr-skin-modern .sxr-tier-dot, body.sxr-skin-modern .sxr-brandrow .br-av { box-shadow: none; }
body.sxr-skin-modern .sxr-cine .c-kicker { letter-spacing: 0.2em; }

/* ═══ FUTURISTIC — the cyber heritage, turned up ═══ */
body.sxr-skin-futuristic .splash-content-box {
  background: rgba(6, 4, 18, 0.78) !important;
  border: 1px solid rgba(0,240,255,0.35) !important;
  box-shadow: 0 0 60px rgba(0,240,255,0.18), inset 0 0 40px rgba(120,0,255,0.08) !important;
  border-radius: 6px !important;
}
body.sxr-skin-futuristic .splash-title { text-shadow: 0 0 26px rgba(0,240,255,0.5); }
body.sxr-skin-futuristic .sxr-dock {
  border-radius: 8px; border-color: rgba(0,240,255,0.3);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 24px rgba(0,240,255,0.12);
  background: linear-gradient(180deg, rgba(8,6,22,0.85), rgba(4,8,18,0.85));
}
body.sxr-skin-futuristic .sxr-mod.active { box-shadow: 0 0 18px rgba(0,240,255,0.35); }
body.sxr-skin-futuristic .sxr-card, body.sxr-skin-futuristic .sxr-settings-pop {
  border-radius: 8px; border-color: rgba(0,240,255,0.3);
  box-shadow: 0 24px 80px rgba(0,0,0,0.65), 0 0 32px rgba(120,0,255,0.12);
}
body.sxr-skin-futuristic .sxr-chip { border-color: rgba(0,240,255,0.35); border-radius: 4px; }
body.sxr-skin-futuristic .sxr-step { border-color: rgba(0,240,255,0.28); border-radius: 6px; }
body.sxr-skin-futuristic .hud-header-panel, body.sxr-skin-futuristic .sidebar-panel-interactive {
  border-color: rgba(0,240,255,0.3) !important; border-radius: 6px !important;
}
body.sxr-skin-futuristic .sxr-cine h1 { text-shadow: 0 0 40px rgba(0,240,255,0.35); }

/* ═══ RETRO — warm serif, analog ═══ */
body.sxr-skin-retro { font-family: Georgia, 'Times New Roman', serif; }
body.sxr-skin-retro .splash-content-box {
  background: rgba(32, 26, 19, 0.88) !important;
  border: 1px solid rgba(201, 162, 107, 0.4) !important;
  border-radius: 10px !important; box-shadow: 0 24px 80px rgba(15,10,4,0.7) !important;
}
body.sxr-skin-retro .splash-title {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: none !important;
}
body.sxr-skin-retro .sxr-title-cine {
  animation: none; background: none; -webkit-text-fill-color: #f3e5cd;
}
body.sxr-skin-retro .badge-tech span, body.sxr-skin-retro .ov-badge,
body.sxr-skin-retro .sxr-cine .c-kicker, body.sxr-skin-retro .sxr-billing .bb-prod { color: #c9a26b !important; }
body.sxr-skin-retro .sxr-dock {
  border-radius: 12px; background: rgba(30, 24, 17, 0.86); border-color: rgba(201,162,107,0.35);
}
body.sxr-skin-retro .sxr-card, body.sxr-skin-retro .sxr-settings-pop {
  background: rgba(30, 24, 17, 0.96); border-color: rgba(201,162,107,0.35); border-radius: 12px;
}
body.sxr-skin-retro .sxr-chip { background: rgba(201,162,107,0.12); border-color: rgba(201,162,107,0.35); color: #f3e5cd; }
body.sxr-skin-retro .sxr-chip b { color: #c9a26b; }
body.sxr-skin-retro .sxr-step { border-color: rgba(201,162,107,0.3); background: rgba(30,24,17,0.8); }
body.sxr-skin-retro .sxr-step .n, body.sxr-skin-retro .sxr-step i { color: #c9a26b; }
body.sxr-skin-retro .hud-header-panel, body.sxr-skin-retro .sidebar-panel-interactive {
  border-color: rgba(201,162,107,0.35) !important; border-radius: 10px !important;
}
body.sxr-skin-retro .sxr-cine h1 { font-family: Georgia, serif; text-transform: none; font-weight: 700; }
body.sxr-skin-retro .sxr-cine .c-hll li { font-family: Georgia, serif; text-transform: none; letter-spacing: 0; }
body.sxr-skin-retro .sxr-brandrow .br-av { border-color: #c9a26b; box-shadow: 0 0 18px rgba(201,162,107,0.3); }
body.sxr-skin-retro .sxr-brandrow .br-intro .br-ic, body.sxr-skin-retro .sxr-tier-dot { color: #c9a26b; background: #c9a26b; }
body.sxr-skin-retro .sxr-welcome h1 { font-family: Georgia, serif; text-transform: none; }

/* ═══ NOIR — black & white editorial ═══ */
body.sxr-skin-noir .splash-content-box {
  background: rgba(8, 8, 8, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
body.sxr-skin-noir .splash-title { letter-spacing: 0.12em !important; }
body.sxr-skin-noir .sxr-title-cine { animation: none; background: none; -webkit-text-fill-color: #fff; }
body.sxr-skin-noir .badge-tech span, body.sxr-skin-noir .ov-badge,
body.sxr-skin-noir .sxr-cine .c-kicker, body.sxr-skin-noir .sxr-billing .bb-prod,
body.sxr-skin-noir .sxr-chip b, body.sxr-skin-noir .sxr-step .n, body.sxr-skin-noir .sxr-step i { color: #fff !important; }
body.sxr-skin-noir .sxr-dock { border-radius: 0; background: rgba(0,0,0,0.85); border-color: rgba(255,255,255,0.35); }
body.sxr-skin-noir .sxr-mod.active { background: #fff; }
body.sxr-skin-noir .sxr-mod.active i, body.sxr-skin-noir .sxr-mod.active span { color: #000 !important; }
body.sxr-skin-noir .sxr-card, body.sxr-skin-noir .sxr-settings-pop {
  border-radius: 0; background: rgba(5,5,5,0.97); border-color: rgba(255,255,255,0.3); box-shadow: none;
}
body.sxr-skin-noir .sxr-chip { border-radius: 0; background: transparent; border-color: rgba(255,255,255,0.35); }
body.sxr-skin-noir .sxr-step { border-radius: 0; border-color: rgba(255,255,255,0.25); background: rgba(0,0,0,0.75); }
body.sxr-skin-noir .hud-header-panel, body.sxr-skin-noir .sidebar-panel-interactive {
  border-radius: 0 !important; border-color: rgba(255,255,255,0.3) !important;
}
body.sxr-skin-noir .sxr-btn-primary { border-radius: 0; }
body.sxr-skin-noir .sxr-btn-ghost { border-radius: 0; }
body.sxr-skin-noir .sxr-lead-pill { border-radius: 0; }
body.sxr-skin-noir .sxr-brandrow .br-av { border-color: #fff; box-shadow: none; }
body.sxr-skin-noir .sxr-brandrow .br-intro { border-radius: 0; }
body.sxr-skin-noir .sxr-brandrow .br-intro .br-ic { color: #fff; }
body.sxr-skin-noir .sxr-tier-dot { background: #fff; box-shadow: none; }
body.sxr-skin-noir .sxr-cine .c-hll li::before { color: #fff; }

/* ═══ deepening pass (2026-07-11): skins own their FULL palette ═══
   Each skin sets its own accent (buttons, actives, highlights inherit it).
   A client accent explicitly set in the builder still wins — see
   showcase-config.js, which releases the inline accent when it's the stock
   default so these rules can take over. */

body.sxr-skin-modern     { --sxr-accent: #ffffff; }
body.sxr-skin-futuristic { --sxr-accent: #b46bff; }
body.sxr-skin-retro      { --sxr-accent: #c9a26b; }
body.sxr-skin-noir       { --sxr-accent: #ffffff; }

/* buttons carry the skin */
body.sxr-skin-retro .sxr-btn-primary { background: #c9a26b; border-color: #c9a26b; color: #201a13; }
body.sxr-skin-retro .sxr-btn-primary:hover { box-shadow: 0 8px 26px rgba(201,162,107,0.35); }
body.sxr-skin-retro .sxr-lead-pill { background: #c9a26b; color: #201a13; }
body.sxr-skin-retro #enter-experience-btn { background: #c9a26b !important; color: #201a13 !important; }
body.sxr-skin-futuristic .sxr-btn-primary { background: linear-gradient(100deg, #00f0ff, #b46bff); border: 0; color: #05030f; }
body.sxr-skin-futuristic .sxr-lead-pill { background: linear-gradient(100deg, #00f0ff, #b46bff); color: #05030f; }
body.sxr-skin-noir .sxr-btn-primary, body.sxr-skin-noir .sxr-lead-pill { border-radius: 0; }
body.sxr-skin-modern .sxr-btn-primary, body.sxr-skin-modern .sxr-btn-ghost,
body.sxr-skin-modern .sxr-lead-pill { border-radius: 999px; }

/* dock modules take the skin's voice */
body.sxr-skin-retro .sxr-mod span, body.sxr-skin-retro .sxr-mod i { color: rgba(243,229,205,0.75); }
body.sxr-skin-retro .sxr-mod.active { background: rgba(201,162,107,0.16); }
body.sxr-skin-retro .sxr-mod.active span, body.sxr-skin-retro .sxr-mod.active i { color: #c9a26b; }
body.sxr-skin-futuristic .sxr-mod.active span, body.sxr-skin-futuristic .sxr-mod.active i { color: #00f0ff; text-shadow: 0 0 12px rgba(0,240,255,0.6); }
body.sxr-skin-modern .sxr-mod { border-radius: 12px; }

/* HUD + chips + kickers inherit the palette */
body.sxr-skin-retro .hud-header-panel h1, body.sxr-skin-retro .splash-meta { color: #f3e5cd !important; }
body.sxr-skin-retro .sxr-cine .c-p, body.sxr-skin-retro .sxr-overview p.ov-desc { color: rgba(243,229,205,0.85); }
body.sxr-skin-noir .sxr-chip b { color: #fff; }
body.sxr-skin-noir .sxr-cine .c-scroll, body.sxr-skin-noir .sxr-billing .bb-line { color: rgba(255,255,255,0.6); }
body.sxr-skin-futuristic .sxr-chip b { color: #00f0ff; }