/* P.P.W. colour modes: one full palette per look (data-look on <html>, saved in localStorage.pwLook).
   Additive only: existing approved look rules (waves, look-2 gold pulse, map, top writing) stay in app.css. */
:root,[data-look=dark]{--m-bg:#0d0a24;--m-surface:#161036;--m-text:#e8e2ff;--m-muted:#b9b2d6;--m-heading:#f3ecff;--m-accent:#ff8fd0;--m-btn-line:#c79bff;--m-btn-glow:rgba(199,155,255,.55);--m-link:#d6b8ff;--m-strip-bg:#0b3d2e;--m-strip-ink:#efe6cf;--m-border:rgba(200,170,255,.28);color-scheme:dark}
[data-look=clean]{--m-bg:#f4f9ff;--m-surface:#ffffff;--m-text:#0b2545;--m-muted:#35577d;--m-heading:#0b2545;--m-accent:#1565c0;--m-btn-line:#C9962E;--m-btn-glow:rgba(201,150,46,.40);--m-link:#1565c0;--m-strip-bg:#0b3d2e;--m-strip-ink:#efe6cf;--m-border:rgba(21,101,192,.22);color-scheme:light}
[data-look=candy]{--m-bg:#fff1fa;--m-surface:#ffffff;--m-text:#4a2a66;--m-muted:#7a3d86;--m-heading:#c2187a;--m-accent:#ff3fa4;--m-btn-line:#ff5fb8;--m-btn-glow:rgba(255,95,184,.50);--m-link:#8a2be2;--m-strip-bg:#0b3d2e;--m-strip-ink:#efe6cf;--m-border:rgba(255,80,170,.35);color-scheme:light}
html{background:var(--m-bg)}
.page li,#list li{border-bottom-color:var(--m-border)}
#panel{border-left-color:var(--m-border)}
.small,.onboard,.scope,footer{color:var(--m-muted)}
[data-look=clean] .page a:not(.brand),[data-look=candy] .page a:not(.brand){color:var(--m-link)}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--m-btn-line);outline-offset:2px}
/* Clean look: hero copy sat white-on-white; give it the navy palette */
[data-look=clean] .hero .copy :is(h1,h2,h3,p){color:var(--m-text)!important;-webkit-text-fill-color:var(--m-text)!important;text-shadow:none!important}
/* Mode switch in header: easy to find, thin glowing outline, never filled */
header label.look{display:inline-flex;align-items:center;gap:6px;font-weight:600}
header label.look select{background:transparent!important;color:inherit;border:1px solid var(--m-btn-line);border-radius:22px;padding:0 12px;box-shadow:0 0 8px var(--m-btn-glow)}
header label.look select option{background:var(--m-surface);color:var(--m-text)}

/* pinkeye: light (clean) opening uses a transparent-background logo, no dark disc */
[data-look=clean] .intro .logo,[data-look=clean] .intro .lglow{content:url(/media/logo-main-lg-light.png)}
[data-look=clean] .intro .logo{mix-blend-mode:normal;-webkit-mask:none;mask:none}
[data-look=clean] .intro .lglow{filter:blur(10px) saturate(1.2);opacity:.28;-webkit-mask:none;mask:none}
[data-look=clean] .intro .mask{display:none}

/* Dark look: body text was #111 on the dark background (contrast ~1:1). Use the palette text colour.
   Also apply when data-look is unset: :root already carries the dark tokens, so html background is dark. */
body,[data-look=dark] body{color:var(--m-text)}
/* Map theme switcher (Light / Dark / Generic): small button group, thin outline, pressed state visible without colour alone. */
.maptheme{display:inline-flex;gap:4px}.maptheme button{background:transparent;color:inherit;border:1px solid var(--m-btn-line);border-radius:22px;padding:0 12px;min-height:44px;cursor:pointer}
.maptheme button[aria-pressed=true]{box-shadow:0 0 8px var(--m-btn-glow);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Polished dark palette when the Dark map theme is on */
[data-maptheme=dark]{--m-bg:#0b1020;--m-surface:#121a2e;--m-text:#e6ecf7;--m-muted:#aab6cc;--m-heading:#f2f6ff;--m-border:rgba(150,175,220,.22);--m-link:#9cc3ff}
[data-maptheme=dark] #panel,[data-maptheme=dark] #q{background:var(--m-surface);color:var(--m-text)}
[data-maptheme=dark] .maplibregl-ctrl-attrib{background:rgba(18,26,46,.85)}[data-maptheme=dark] .maplibregl-ctrl-attrib a{color:#cfe0ff}