/* ============================================================================
   palette-switcher.css — DEMO ONLY chrome. Ships alongside palette-switcher.js
   and is injected by render.ts only for builds flagged `demoPaletteSwitcher`.

   Styled to read as an overlay ON the demo rather than part of it — a visitor
   must never mistake this control for something their own site would have.
   Hence the neutral surface that ignores the page palette, and the explicit
   "This is a demo" copy in the panel.
   ========================================================================== */

.pswitch{
  position:fixed;right:18px;bottom:18px;z-index:9000;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
/* Stay a compact bottom-right pill on narrow screens. An earlier version
   stretched edge-to-edge and sat on top of the hero copy — demo chrome must
   never obscure the thing it is demonstrating. */
@media (max-width:640px){
  .pswitch{right:10px;bottom:10px}
  .pswitch-toggle{padding:9px 13px;font-size:.78rem}
  .pswitch-label{display:none}   /* dot only; the panel explains itself */
  .pswitch-toggle::after{content:"Colour";font-weight:600}
}

/* Deliberately NOT themed with the site's own tokens. The control keeps a
   fixed dark surface in both light and dark mode so it stays legible while the
   palette underneath it changes, and so it reads as chrome, not content. */
.pswitch-toggle{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 17px;border-radius:100px;border:1px solid rgba(255,255,255,.16);
  background:rgba(22,22,26,.92);color:#f2f2f4;backdrop-filter:blur(12px);
  font-size:.86rem;font-weight:600;cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.34);
  transition:transform .18s cubic-bezier(0.16,1,0.3,1),box-shadow .18s;
}
.pswitch-toggle:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.42)}
.pswitch-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* The dot samples the live accent, so the button itself previews the change. */
.pswitch-dot{
  width:13px;height:13px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.22);
  transition:background .3s ease;
}

.pswitch-panel{
  position:absolute;right:0;bottom:calc(100% + 10px);width:290px;
  padding:16px;border-radius:14px;
  background:rgba(22,22,26,.97);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(16px);box-shadow:0 18px 46px rgba(0,0,0,.48);
  color:#f2f2f4;
}
@media (max-width:640px){ .pswitch-panel{width:min(280px,calc(100vw - 24px));left:auto;right:0} }

.pswitch-note{font-size:.78rem;line-height:1.5;color:#b6b6bd;margin:0 0 13px}

.pswitch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pswitch-swatch{
  display:flex;flex-direction:column;gap:6px;align-items:stretch;
  padding:8px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid transparent;color:inherit;
  transition:border-color .16s,background .16s;
}
.pswitch-swatch:hover{background:rgba(255,255,255,.1)}
.pswitch-swatch.is-on{border-color:#fff;background:rgba(255,255,255,.13)}
.pswitch-swatch:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pswitch-chips{display:flex;height:22px;border-radius:5px;overflow:hidden}
.pswitch-chips i{flex:1}
.pswitch-name{font-size:.7rem;font-weight:600;letter-spacing:.02em;text-align:center;color:#dcdce1}

.pswitch-reset{
  width:100%;margin-top:11px;padding:8px;border-radius:8px;
  background:transparent;border:1px solid rgba(255,255,255,.18);color:#b6b6bd;
  font-size:.76rem;cursor:pointer;transition:all .16s;
}
.pswitch-reset:hover{color:#fff;border-color:rgba(255,255,255,.4)}

@media print{ .pswitch{display:none} }