/*
 * ASK SHAI — Fox Midnight visual contract · 2026-10-20
 * Applies only to the public, route-based ASK SHAI site.
 * Single purpose: apply the approved champagne-gold fox identity.
 * Existing logic, page templates, translations, commerce and security untouched.
 * Watch & Learn keeps a pale neutral surface for legibility.
 */
:root{
  color-scheme:dark;
  --fox-bg:#0f1119;
  --fox-surface:#1a1e2b;
  --fox-raised:#232738;
  --fox-ink:#f7f5f0;
  --fox-muted:#d9cdb6;
  --fox-border:#504b41;
  --fox-violet:#d6c4a0;
  --fox-ice:#dcd1bc;
  --fox-focus:#dcd1bc;
  --ink:var(--fox-ink);
  --muted:var(--fox-muted);
  --paper:var(--fox-bg);
  --card:var(--fox-surface);
  --line:var(--fox-border);
  --navy:var(--fox-violet);
  --teal:var(--fox-violet);
  --action:var(--fox-violet);
  --action-hover:#e0d6c3;
  --wine:var(--fox-violet);
  --focus:var(--fox-focus);
}
body{background:var(--fox-bg);color:var(--fox-ink)}
.topbar{background:#141720f5;border-bottom:1px solid #e5ddcd27}
.topbar .brand-mark img{
  filter:none!important;opacity:1!important;mix-blend-mode:normal!important;
}
.topbar .brand-copy .brand-shai{color:#f8f6f2}
.topbar .brand-copy .brand-ai{color:var(--fox-violet);font-style:italic}
.topbar .brand-copy .brand-ask{color:#e3dac9}
.topbar .brand-copy small{color:#d4c6ac}
/* Shared header controls. Purple is an accent, not a full-bright button fill. */
.topbar #openShai.ask-button,
.topbar #menuBtn.menu-btn{
  background:#23283a;border:1px solid #706859;border-radius:11px;
  color:var(--fox-ink);font-weight:680;
}
.topbar #openShai.ask-button:hover,
.topbar #menuBtn.menu-btn:hover{
  background:#433f36;border-color:var(--fox-violet);color:#fff;
}
.topbar #langSelect.lang-select{
  background:#1e2332;border:1px solid #6c6557;
  color:#f5f2eb;border-radius:11px;
}
.topbar #langSelect.lang-select option{background:#191d29;color:#f7f5f0}
.topbar #desktopNav button,
.topbar #desktopNav :is(.training-nav-link,.shop-nav-link){
  color:#e9e2d4!important;
}
.topbar #desktopNav button:hover,
.topbar #desktopNav :is(.training-nav-link,.shop-nav-link):hover,
.topbar #desktopNav button.active{
  color:#fcfbf8!important;border-bottom-color:var(--fox-violet);
}
/* Fix the real regression: all ordinary mobile menu destinations identical.
 * The Watch & Learn dock is NOT one of these selectors and is unchanged. */
.topbar #mobilePanel{
  background:#151823;border-top:1px solid #4a453c;
  box-shadow:0 18px 35px #07080c6b;
}
.topbar #mobilePanel[hidden]{display:none!important}
.topbar #mobilePanel #mobileNav{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;padding-block:20px 26px;
}
.topbar #mobilePanel #mobileNav :is(button[data-go],a.training-nav-link,a.shop-nav-link){
  display:flex;align-items:center;justify-content:flex-start;
  width:100%;min-width:0;min-height:76px;padding:14px 16px;
  border:1px solid #5a5448;border-radius:14px;
  background:#1f2332;color:#f7f4ef!important;
  box-shadow:none;font:650 15px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;
  white-space:normal;overflow-wrap:break-word;text-decoration:none;text-align:start;
}
.topbar #mobilePanel #mobileNav :is(button[data-go],a.training-nav-link,a.shop-nav-link):is(:hover,:focus-visible){
  background:#282e42;border-color:#a29781;color:#fff!important;
}
.topbar #mobilePanel #mobileNav button.active,
.topbar #mobilePanel #mobileNav button[aria-current="page"]{
  background:#292f43;border-color:#a79c88;
  box-shadow:inset 3px 0 0 var(--fox-violet);
}
[dir="rtl"] .topbar #mobilePanel #mobileNav button.active,
[dir="rtl"] .topbar #mobilePanel #mobileNav button[aria-current="page"]{
  box-shadow:inset -3px 0 0 var(--fox-violet);
}
body:not([data-route="home"]) #main{
  color:var(--fox-ink);background:#0f1119;
}
/* Keep the original layouts and functional light workspaces intact. */
#main .button.primary:not(:disabled),
#main .hero-actions .button.primary:not(:disabled),
#main .navigator-submit:not(:disabled){
  background:var(--fox-violet);border-color:var(--fox-violet);
  color:#171a26;
}
#main .button.primary:not(:disabled):hover,
#main .hero-actions .button.primary:not(:disabled):hover,
#main .navigator-submit:not(:disabled):hover{
  background:#e1d7c4;border-color:#e1d7c4;color:#181b26;
}
#main .discovery-heading .eyebrow,
#main .discovery-page-heading .eyebrow{color:var(--fox-violet)}
#main .source-card>a{color:var(--fox-violet)}
.floating-shai:not(:disabled){
  background:#d6c9af;border-color:#d6c9af;color:#161924;
}
.floating-shai:not(:disabled):hover{
  background:#e1d7c4;border-color:#e1d7c4;color:#161924;
}
/* Do not alter the separate Watch & Learn light control. */
:where(body) :is(a,button,input,textarea,select,summary):focus-visible{
  outline-color:var(--fox-focus);outline-offset:3px;
}
@media(max-width:760px){
  .topbar #mobilePanel #mobileNav{gap:10px;padding-block:16px 22px}
  .topbar #mobilePanel #mobileNav :is(button[data-go],a.training-nav-link,a.shop-nav-link){
    min-height:64px;padding:13px 14px;font-size:14px;
  }
}
@media(max-width:360px){
  .topbar #mobilePanel #mobileNav{gap:8px}
  .topbar #mobilePanel #mobileNav :is(button[data-go],a.training-nav-link,a.shop-nav-link){
    padding:11px 10px;font-size:13px;min-height:63px;
  }
}
@media(prefers-reduced-motion:reduce){
  .topbar #mobilePanel #mobileNav :is(button[data-go],a.training-nav-link,a.shop-nav-link){
    transition:none!important;
  }
}