/* Theme takeover (gst-supertheme, App\Support\Themes\Palettes): while a theme shows, the door screen and the member app take
   its whole palette. Colours come in as variables (--th-*) from themes.js (the door) or the page head (the app). The door
   is scoped to [data-takeover] (the screen, or the preview stage); the app to .th-takeover (the html element, or the
   preview phone). Loaded after themes.css, so these win. Outside a theme none of this applies. */

/* ---------- door screen ---------- */
[data-takeover]{color:var(--th-text); font-family:var(--th-fontstack)}
body[data-takeover]{background:radial-gradient(120vh 120vh at 50% 42%, var(--th-bg2) 0%, var(--th-bg) 62%)}
.kw-stage[data-takeover]{background:radial-gradient(120cqh 120cqh at 50% 42%, var(--th-bg2) 0%, var(--th-bg) 62%)}
[data-takeover] .th-k-tint,[data-takeover] .th-k-hero,[data-takeover] .th-k-strip{display:none}
[data-takeover] .th-k-artlayer{opacity:.55}
[data-takeover] .kiosk-wordmark,[data-takeover] .kiosk-heading{font-family:var(--th-head,inherit); color:var(--th-text); text-shadow:0 0 2.4vh color-mix(in srgb,var(--th-glow) 55%,transparent)}
[data-takeover] #display{background:var(--th-surface); color:var(--th-text); font-family:var(--th-head,inherit); box-shadow:inset 0 0 0 .3vh var(--th-border), 0 0 3vh color-mix(in srgb,var(--th-glow) 40%,transparent)}
[data-takeover] .key{background:var(--th-key); color:var(--th-keytext); font-family:var(--th-head,inherit); border:.3vh solid var(--th-border);
  box-shadow:0 .5vh 0 color-mix(in srgb,var(--th-border) 60%,#000), 0 0 2.4vh color-mix(in srgb,var(--th-glow) 35%,transparent)}
[data-takeover] .key:active{transform:translateY(.4vh) scale(.98); box-shadow:0 .1vh 0 color-mix(in srgb,var(--th-border) 60%,#000), 0 0 3.6vh color-mix(in srgb,var(--th-glow) 70%,transparent)}
[data-takeover] .key.enter{background:linear-gradient(180deg,color-mix(in srgb,var(--th-accent) 80%,#fff),var(--th-accent)); color:var(--th-accent-ink); border-color:var(--th-glow)}
[data-takeover] .key.clear{background:var(--th-surface); color:var(--th-text); opacity:1; box-shadow:none}
/* the keypad and the number box wear the palette even if a plain door style sneaks in later (higher specificity than .key / #display) */
body[data-takeover] #keypad .key{background:var(--th-key); color:var(--th-keytext); border-color:var(--th-border)}
body[data-takeover] #keypad .key.enter{background:linear-gradient(180deg,color-mix(in srgb,var(--th-accent) 80%,#fff),var(--th-accent)); color:var(--th-accent-ink); border-color:var(--th-glow)}
body[data-takeover] #keypad .key.clear{background:var(--th-surface); color:var(--th-text)}
body[data-takeover] #display{background:var(--th-surface); color:var(--th-text)}
[data-takeover] #vibes-staff{background:var(--th-surface); color:var(--th-text); border:.3vh solid var(--th-border); box-shadow:0 0 2.4vh color-mix(in srgb,var(--th-glow) 35%,transparent)}
[data-takeover] #vibes-promo{color:var(--th-text); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--th-surface) 88%,transparent) 15%,color-mix(in srgb,var(--th-surface) 88%,transparent) 85%,transparent); padding:1vh 0; border-top:.25vh solid var(--th-border); bottom:0; opacity:1; text-shadow:0 0 1.6vh color-mix(in srgb,var(--th-glow) 45%,transparent)}
[data-takeover] .vibes-qr{border:.7vh solid var(--th-border); box-shadow:0 0 3vh color-mix(in srgb,var(--th-glow) 55%,transparent)}   /* the code itself stays black on white so it scans */
[data-takeover] .vibes-qr .vibes-qr-label{color:#1a1a2e}
[data-takeover] #serial-bar button{background:var(--th-surface); color:var(--th-text); border-color:var(--th-border)}

/* the welcome and goodbye cards (an Access Denied card stays red) */
[data-takeover] .memberGreen{background:linear-gradient(160deg,var(--th-surface),var(--th-bg2)) !important; color:var(--th-text); border:.7cqh solid var(--th-border);
  box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 8cqh color-mix(in srgb,var(--th-glow) 50%,transparent) !important}
[data-takeover] .memberBye{background:linear-gradient(165deg,var(--th-bg2),var(--th-surface)) !important; color:var(--th-text); border:.7cqh solid var(--th-border);
  box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 8cqh color-mix(in srgb,var(--th-glow) 50%,transparent) !important}
[data-takeover] .memberGreen .mc-title,[data-takeover] .memberBye .mc-title{font-family:var(--th-head,inherit); color:var(--th-text); text-shadow:0 0 2cqh color-mix(in srgb,var(--th-glow) 55%,transparent)}
[data-takeover] .memberGreen .mc-icon{color:var(--th-accent)}
[data-takeover] .memberBye .mc-seeyou{color:var(--th-text)}
[data-takeover] .memberCard .mc-photo{border-color:var(--th-accent)}
/* progress and streak bars: each line under the name is a pill with an accent bar along its foot */
[data-takeover] .memberGreen .mc-line,[data-takeover] .memberBye .mc-line{background:color-mix(in srgb,var(--th-accent) 22%,var(--th-surface)); border:1px solid var(--th-border); color:var(--th-text);
  box-shadow:inset 0 -.5cqh 0 var(--th-accent)}
[data-takeover] .memberGreen .mc-occasion{background:var(--th-accent); color:var(--th-accent-ink)}
[data-takeover] .memberGreen .mc-quote,[data-takeover] .memberBye .mc-leave-line{color:var(--th-text)}
[data-takeover] .memberBye .mc-leave-line,[data-takeover] .vibes-checkin-extra{border-top-color:var(--th-border)}

/* corner decorations (themes.js draws them in the layer behind the keypad) */
.th-k-deco{position:absolute; pointer-events:none; color:var(--th-border)}
.th-k-web{top:0; width:26vh; height:26vh; opacity:.8} .th-k-web svg{display:block; width:100%; height:100%}
.th-k-web{filter:drop-shadow(0 0 .4vh rgba(183,156,242,.35)); animation:th-silk 7s ease-in-out infinite}
.th-dew{opacity:.25; animation:th-dew 3.4s ease-in-out infinite}
@keyframes th-silk{0%,100%{opacity:.62} 50%{opacity:.88}}
@keyframes th-dew{0%,100%{opacity:.12} 50%{opacity:.95}}
@media (prefers-reduced-motion: reduce){.th-k-web,.th-dew{animation:none}}
.th-k-web.th-l{left:0} .th-k-web.th-r{right:0; transform:scaleX(-1)}
.th-k-frost{width:34vh; height:34vh; background:radial-gradient(circle at var(--fx) var(--fy), rgba(240,250,255,.6), rgba(190,225,255,.22) 45%, transparent 70%)}
.th-k-frost.th-tl{top:0; left:0; --fx:0%; --fy:0%} .th-k-frost.th-tr{top:0; right:0; --fx:100%; --fy:0%}
.th-k-frost.th-bl{bottom:0; left:0; --fx:0%; --fy:100%} .th-k-frost.th-br{bottom:0; right:0; --fx:100%; --fy:100%}
.th-k-bracket{width:12vh; height:12vh; border:0 solid var(--th-border); filter:drop-shadow(0 0 1.2vh var(--th-glow))}
.th-k-bracket.th-tl{top:2vh; left:2vh; border-width:.8vh 0 0 .8vh} .th-k-bracket.th-tr{top:2vh; right:2vh; border-width:.8vh .8vh 0 0}
.th-k-bracket.th-bl{bottom:2vh; left:2vh; border-width:0 0 .8vh .8vh} .th-k-bracket.th-br{bottom:2vh; right:2vh; border-width:0 .8vh .8vh 0}
.kw-stage .th-k-web{width:26cqh;height:26cqh} .kw-stage .th-k-frost{width:34cqh;height:34cqh} .kw-stage .th-k-bracket{width:12cqh;height:12cqh}

/* ---------- member app ---------- */
.th-takeover [data-th-header]{background:linear-gradient(135deg,var(--th-h1),var(--th-h2)) !important; border-bottom:3px solid var(--th-accent);
  box-shadow:0 8px 28px -10px color-mix(in srgb,var(--th-glow) 55%,transparent)}
.th-takeover [data-th-header] .bg-vibe-800{background:color-mix(in srgb,var(--th-accent) 28%,var(--th-h1)) !important}
.th-takeover h1,.th-takeover h2,.th-takeover h3,.th-takeover .th-banner-title,.th-takeover [data-th-header] .text-2xl{font-family:var(--th-head,var(--th-fontstack))}
.th-takeover .bg-vibe-50{background-color:color-mix(in srgb,var(--th-accent) 7%,#ffffff) !important}
.th-takeover .bg-vibe-600,.th-takeover .bg-vibe-700,.th-takeover .bg-vibe-500{background-color:var(--th-accent) !important; color:var(--th-accent-ink) !important}
.th-takeover .hover\:bg-vibe-700:hover,.th-takeover .hover\:bg-vibe-600:hover{background-color:color-mix(in srgb,var(--th-accent) 85%,#000) !important}
.th-takeover button.bg-vibe-600,.th-takeover a.bg-vibe-600{box-shadow:0 0 14px -2px color-mix(in srgb,var(--th-glow) 60%,transparent)}
.th-takeover .text-vibe-700,.th-takeover .text-vibe-600{color:var(--th-link) !important}
.th-takeover nav{background:color-mix(in srgb,var(--th-accent) 6%,#fff) !important; border-top:2px solid var(--th-accent)}
.th-takeover nav a.font-semibold,.th-takeover nav a.text-vibe-700{color:var(--th-link) !important; box-shadow:inset 0 3px 0 var(--th-accent)}
.th-takeover nav [data-scan-tab]{box-shadow:none}
.th-takeover .border-vibe-100{border-color:color-mix(in srgb,var(--th-accent) 32%,#fff) !important}
.th-takeover main .rounded-xl.bg-white,.th-takeover main .rounded-2xl.bg-white{box-shadow:0 2px 14px -6px color-mix(in srgb,var(--th-glow) 55%,transparent), inset 0 3px 0 color-mix(in srgb,var(--th-accent) 70%,transparent)}
.th-takeover .bg-vibe-950{background:linear-gradient(135deg,var(--th-h1),var(--th-h2)) !important; border:1px solid var(--th-accent)}
.th-takeover .th-banner{border:2px solid var(--th-accent); box-shadow:0 0 22px -6px color-mix(in srgb,var(--th-glow) 60%,transparent)}
.th-takeover .th-banner-title{color:var(--th-ink)}
.th-takeover .th-pill{background:var(--th-accent); color:var(--th-accent-ink)}

/* the light overlay on the app's Home: over the page, never taking a tap */
.th-app-fx{position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden}
.th-app-fx.th-contained{position:absolute}
@media (prefers-reduced-motion: reduce){ .th-app-fx,.th-k-layer .th-fx-canvas{display:none !important} }
[data-takeover="neon_city"],.th-takeover [data-th-header]{letter-spacing:.03em}