/* Theme switcher in the header (button + popover). Kept apart from the generated /themes/* files and never rewritten by them. */
.th-switch{position:relative;flex:none;display:flex;align-items:center;--th-line:#a7c4d340;--th-btn:#ffffff0d;--th-pop:#07101c;--th-pop-line:#a7c4d338;--th-fg:#e6eef4;--th-mute:#8fa3b3;--th-on:#7fe3f6;--th-hover:#ffffff12;--th-shadow:#0008}
html[data-theme=ice] .th-switch{--th-line:#1e3a5a30;--th-btn:#d3e3f2;--th-pop:#fff;--th-pop-line:#1e3a5a26;--th-fg:#10243b;--th-mute:#566c84;--th-on:#1d6fb8;--th-hover:#1e3a5a0f;--th-shadow:#1e3a5a40}
html[data-theme=aurora] .th-switch{--th-line:#9d8cff42;--th-btn:#ffffff0e;--th-pop:#130e36;--th-pop-line:#9d8cff42;--th-fg:#ece9ff;--th-mute:#a7a2d4;--th-on:#3df0cf;--th-hover:#ffffff15;--th-shadow:#05021a99}
html[data-theme=ocean] .th-switch{--th-line:#7fd8ff42;--th-btn:#ffffff0e;--th-pop:#073660;--th-pop-line:#7fd8ff42;--th-fg:#e6f6ff;--th-mute:#9bc6e0;--th-on:#7cecf8;--th-hover:#ffffff15;--th-shadow:#021a3399}

.th-btn{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid var(--th-line);background:var(--th-btn);cursor:pointer;transition:border-color .18s,transform .18s}
.th-btn:hover,.th-switch.is-open .th-btn{border-color:var(--th-on)}
.th-btn:active{transform:scale(.94)}
.th-btn .th-mark{width:24px;height:24px;display:block}
.th-btn:focus-visible,.th-opt:focus-visible{outline:2px solid var(--th-on);outline-offset:3px}

.th-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:264px;padding:6px;border-radius:12px;background:var(--th-pop);border:1px solid var(--th-pop-line);box-shadow:0 22px 48px var(--th-shadow);animation:th-pop .16s ease-out}
.th-menu[hidden]{display:none}
.th-opt{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--th-fg);font:inherit;text-align:left;cursor:pointer}
.th-opt:hover{background:var(--th-hover)}
.th-sw{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--th-pop-line)}
.th-sw .th-mark{width:24px;height:24px;display:block}
.th-sw-dark{background:#02050c}
.th-sw-ice{background:linear-gradient(145deg,#f4f9fe,#cfe0f1)}
.th-sw-aurora{background:linear-gradient(145deg,#0d0830,#2a1480)}
.th-sw-ocean{background:linear-gradient(145deg,#04264a,#0c5aa6)}
.th-tx{flex:1;min-width:0;display:grid;gap:2px}
.th-tx b{font-size:13px;font-weight:600;letter-spacing:0;line-height:1.3}
.th-tx small{font-size:11px;line-height:1.35;color:var(--th-mute)}
.th-tick{flex:none;width:18px;height:18px;fill:none;stroke:var(--th-on);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.th-opt[aria-checked=true] .th-tick{opacity:1}
@keyframes th-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* short cross-fade while the colours swap (JS adds .th-fade for ~0.5 s, never with reduced motion) */
html.th-fade *,html.th-fade *::before,html.th-fade *::after{transition-property:background-color,border-color,color,fill,stroke,box-shadow,opacity!important;transition-duration:.35s!important;transition-delay:0s!important}

@media(max-width:1100px){
  .th-switch{margin-left:auto}
  .th-switch+.contact{margin-left:0!important}
}
@media(max-width:700px){
  .th-switch{position:static}
  .th-menu{top:70px;right:5%;width:min(272px,90vw)}
  .th-btn{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){.th-menu{animation:none}.th-btn{transition:none}}

/* Picker samples and the ONMATE identity retain their actual colours in every palette. */
html body.pw .th-mark{filter:none}
html:root:root:root:root:root body :is(.brand,.brand-mini){--om-a:#00e0ff;--om-c:#2f8dff;--om-d:#8a22ff;--om-e:#9a0aff;--om-m:#00ffc2;--om-b:#10d6e8;--om-c2:#0a9af4;--om-h1:#22a8ff;--om-h2:#0a72f2;--om-w1:#00ffc2;--om-w2:#2f8dff}