/* GearPool theme layer, v3 (Nico, 2026-09-23: "futuristic and expensive look with multiple theme view options").
   Loaded after style.css. Everything here is either a palette swap on html[data-theme] or a motion/depth layer.
   Rules:
   - The palette is swapped through the same variables style.css already uses, so no page has to know a theme exists.
   - --inv is always a DARK surface in every theme, because the white text painted on it is hard-coded in style.css.
   - Every motion is switched off under prefers-reduced-motion. Nothing here may move a button under a thumb. */

/* ── the premium layer, on every theme ───────────────────────────────────────── */
:root{--speed:.45s;--ease:cubic-bezier(.22,1,.36,1)}
body{position:relative}
/* a slow-drifting aurora behind everything. Painted on a fixed pseudo-element so it never scrolls or reflows. */
body:before{content:"";position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;background:var(--aurora,none);filter:blur(0);animation:gp-drift 34s ease-in-out infinite alternate}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--veil,none)}
@keyframes gp-drift{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(2%,2%,0) scale(1.08)}}

/* buttons: gradient body, a sheen that sweeps across on hover, a glow that breathes on the main call to action */
.btn{position:relative;overflow:hidden;background-color:var(--accent);background-image:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 58%);color:var(--onaccent);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 18px -8px var(--glow);transition:box-shadow var(--speed) var(--ease),transform .12s var(--ease),filter .2s}
.btn:before{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg)}
.btn:hover:before{animation:gp-sheen .85s var(--ease) forwards}
@keyframes gp-sheen{to{left:160%}}
.btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 12px 30px -8px var(--glow);filter:saturate(1.08)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.ghost{background-image:none;box-shadow:none}
.btn.ok{background-image:linear-gradient(135deg,#34936a,#22694b)}
.btn.bad{background-image:linear-gradient(135deg,#c9382f,#8f1d16)}
.btn.warn{background-image:linear-gradient(135deg,#d09b16,#96690a)}
/* the one on-page call to action breathes, so the eye lands on it. Never on a form's submit in a handover. */
nav.main a.cta,.btn.pulse{animation:gp-pulse 3.4s ease-in-out infinite}
@keyframes gp-pulse{0%,100%{box-shadow:0 0 0 0 var(--glow)}50%{box-shadow:0 0 0 7px transparent}}

/* cards and tiles: lift further, and pick up an accent edge on the way */
a.card.asset,.tile,.cattile{transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease),border-color var(--speed) var(--ease)}
a.card.asset:hover,.tile:hover{transform:translateY(-4px)}
a.card.asset:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.45),0 0 0 1px var(--accent) inset}
.asset img.ph{transition:transform .6s var(--ease)}a.card.asset:hover img.ph{transform:scale(1.045)}

/* headings carry a little light */
h1{background-image:var(--h1grad,none);-webkit-background-clip:var(--h1clip,border-box);background-clip:var(--h1clip,border-box);color:var(--h1color,inherit)}

/* content arrives rather than appearing. Set by app.js; without JS everything is simply visible. */
html.gp-reveal .rv{opacity:0;transform:translateY(14px)}
html.gp-reveal .rv.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

@media(prefers-reduced-motion:reduce){
  body:before{animation:none}.btn:hover:before{animation:none}nav.main a.cta,.btn.pulse{animation:none}
  a.card.asset:hover,.tile:hover{transform:none}a.card.asset:hover img.ph{transform:none}
  html.gp-reveal .rv{opacity:1;transform:none}
}

/* ── MIDNIGHT (default): the high-end dark one ───────────────────────────────── */
html[data-theme=noir]{
  --ink:#EAF0F7;--ink2:#A9B4C2;--mute:#7E8896;--line:rgba(255,255,255,.10);
  --paper:#080B10;--paper2:#10151D;--card:rgba(255,255,255,.045);--inv:#0C1016;--invtx:#fff;
  --accent:#FF7A2F;--accent2:#E8641B;--accentsoft:rgba(255,122,47,.13);--glow:rgba(255,122,47,.55);
  --ok:#3FD9A0;--warn:#F2C14E;--out:#A98CFF;--bad:#FF6B5E;
  --sh:0 1px 0 rgba(255,255,255,.05) inset,0 20px 48px -28px rgba(0,0,0,.9);
  --aurora:radial-gradient(48vmax 38vmax at 12% -6%,rgba(255,122,47,.22),transparent 62%),radial-gradient(44vmax 40vmax at 92% 8%,rgba(64,140,255,.16),transparent 60%),radial-gradient(52vmax 44vmax at 60% 108%,rgba(169,140,255,.14),transparent 62%);
  --veil:linear-gradient(180deg,rgba(8,11,16,0) 0%,rgba(8,11,16,.55) 70%,rgba(8,11,16,.85) 100%);
  --h1grad:linear-gradient(180deg,#fff 30%,#9FB0C6 100%);--h1clip:text;--h1color:transparent;
  color-scheme:dark;
}
html[data-theme=noir] .card,html[data-theme=noir] .tile,html[data-theme=noir] .searchbar,html[data-theme=noir] .quote,html[data-theme=noir] .calm,html[data-theme=noir] details.more,html[data-theme=noir] .copybox,html[data-theme=noir] .picklist,html[data-theme=noir] .bubble,html[data-theme=noir] table,html[data-theme=noir] .cattile,html[data-theme=noir] .chip{backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
html[data-theme=noir] header.top{background:rgba(10,13,19,.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.08)}
html[data-theme=noir] input,html[data-theme=noir] select,html[data-theme=noir] textarea{background:rgba(255,255,255,.05);color:var(--ink);border-color:rgba(255,255,255,.14)}
html[data-theme=noir] th{background:rgba(255,255,255,.05);color:var(--ink2)}
html[data-theme=noir] .notice{background:rgba(242,193,78,.10);border-color:rgba(242,193,78,.30);color:#F3DFAE}
html[data-theme=noir] .notice.ok{background:rgba(63,217,160,.10);border-color:rgba(63,217,160,.30);color:#B6F0D9}
html[data-theme=noir] .notice.bad{background:rgba(255,107,94,.10);border-color:rgba(255,107,94,.32);color:#FFC5BF}
html[data-theme=noir] .pill{background:rgba(255,255,255,.09);color:var(--ink2)}
html[data-theme=noir] .bottomnav{background:rgba(10,13,19,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-theme=noir] a{color:#FFA468}
html[data-theme=noir] .copybox .copybar{background:rgba(255,255,255,.04);border-top-color:rgba(255,255,255,.08)}
html[data-theme=noir] .kpis div,html[data-theme=noir] .stat,html[data-theme=noir] .tfx{background:linear-gradient(150deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09)}
html[data-theme=noir] .trust{background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09)}

/* ── DAYLIGHT: the warm paper the pool launched on ───────────────────────────── */
html[data-theme=paper]{--aurora:radial-gradient(40vmax 30vmax at 90% -10%,rgba(232,100,27,.10),transparent 60%);--veil:none}

/* ── LEOPARD: animal print, full-page ────────────────────────────────────────── */
html[data-theme=wild]{
  --ink:#1B1409;--ink2:#4A3A22;--mute:#7C6A4C;--line:#D8C49A;--paper:#F6ECD6;--paper2:#EFE0C2;
  --card:rgba(255,251,242,.93);--inv:#1B1409;--accent:#D2751A;--accent2:#A5530C;--accentsoft:#FBE6C9;--glow:rgba(210,117,26,.5);
  --sh:0 2px 3px rgba(27,20,9,.06),0 14px 34px -18px rgba(27,20,9,.35);
  --aurora:none;--veil:none;
}
html[data-theme=wild]{background-image:var(--spots);background-size:190px 190px;background-attachment:fixed;
  --spots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Crect width='190' height='190' fill='%23F0DDB6'/%3E%3Cg fill='none' stroke='%234A3210' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M28 30c9-8 22-6 26 4s-4 20-15 20-19-16-11-24z'/%3E%3Cpath d='M112 22c10-7 23-3 25 7s-7 19-18 17-16-17-7-24z'/%3E%3Cpath d='M62 92c10-8 24-5 27 5s-6 20-17 19-19-16-10-24z'/%3E%3Cpath d='M148 86c9-8 22-6 26 4s-5 20-16 19-18-15-10-23z'/%3E%3Cpath d='M20 140c10-8 23-5 26 5s-6 20-17 19-18-16-9-24z'/%3E%3Cpath d='M102 150c10-8 24-5 27 5s-6 20-17 19-19-16-10-24z'/%3E%3C/g%3E%3Cg fill='%23C8890F'%3E%3Ccircle cx='41' cy='44' r='9'/%3E%3Ccircle cx='124' cy='33' r='9'/%3E%3Ccircle cx='76' cy='106' r='9'/%3E%3Ccircle cx='161' cy='98' r='9'/%3E%3Ccircle cx='33' cy='154' r='9'/%3E%3Ccircle cx='116' cy='164' r='9'/%3E%3C/g%3E%3C/svg%3E");}
html[data-theme=wild] body{background:rgba(246,236,214,.72)}
html[data-theme=wild] .card,html[data-theme=wild] .tile,html[data-theme=wild] .searchbar,html[data-theme=wild] table,html[data-theme=wild] .quote{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html[data-theme=wild] header.top{background:linear-gradient(90deg,#1B1409,#3A2A10)}

/* ── CARTOON: flat, bold outline, chunky shadow ──────────────────────────────── */
html[data-theme=toon]{
  --ink:#141414;--ink2:#3A3A3A;--mute:#6A6A6A;--line:#141414;--paper:#FFE9A8;--paper2:#FFF6DA;--card:#FFFFFF;
  --inv:#141414;--accent:#FF4D2E;--accent2:#E02F12;--accentsoft:#FFE1D8;--glow:rgba(255,77,46,.55);
  --ok:#00A05A;--warn:#F2A900;--out:#7A4FD8;--bad:#E02F12;--r:18px;
  --sh:5px 5px 0 #141414;
  --aurora:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 14px,transparent 14px 28px);--veil:none;
}
html[data-theme=toon] .card,html[data-theme=toon] .tile,html[data-theme=toon] .cattile,html[data-theme=toon] .searchbar,html[data-theme=toon] .quote,html[data-theme=toon] table,html[data-theme=toon] .calm,html[data-theme=toon] .copybox,html[data-theme=toon] .notice,html[data-theme=toon] details.more{border:3px solid #141414;box-shadow:5px 5px 0 #141414}
html[data-theme=toon] .btn{border:3px solid #141414;box-shadow:4px 4px 0 #141414;background-image:none;background:var(--accent);font-weight:800}
html[data-theme=toon] .btn:hover{box-shadow:6px 6px 0 #141414;transform:translate(-1px,-1px)}
html[data-theme=toon] .btn:active{box-shadow:2px 2px 0 #141414;transform:translate(2px,2px)}
html[data-theme=toon] input,html[data-theme=toon] select,html[data-theme=toon] textarea{border:3px solid #141414;border-radius:12px}
html[data-theme=toon] h1,html[data-theme=toon] h2{-webkit-text-stroke:0;letter-spacing:-.03em}
html[data-theme=toon] .pill{border:2px solid #141414;font-weight:800}
html[data-theme=toon] a.card.asset:hover{box-shadow:8px 8px 0 #141414}

/* ── PLAYA: sun and dust, warm dusk ──────────────────────────────────────────── */
html[data-theme=playa]{
  --ink:#F7EFE4;--ink2:#D8C6AF;--mute:#A8957E;--line:rgba(255,255,255,.12);
  --paper:#1A1208;--paper2:#241808;--card:rgba(255,236,210,.07);--inv:#150E06;
  --accent:#FFA22E;--accent2:#E07A12;--accentsoft:rgba(255,162,46,.14);--glow:rgba(255,162,46,.55);
  --ok:#5FD39B;--warn:#FFD166;--out:#C79BFF;--bad:#FF7A6B;
  --sh:0 1px 0 rgba(255,255,255,.06) inset,0 22px 50px -30px #000;
  --aurora:radial-gradient(60vmax 40vmax at 50% 106%,rgba(255,162,46,.40),transparent 60%),radial-gradient(50vmax 34vmax at 10% -4%,rgba(255,86,34,.20),transparent 60%),radial-gradient(40vmax 30vmax at 95% 20%,rgba(120,80,255,.14),transparent 60%);
  --veil:linear-gradient(180deg,rgba(26,18,8,.10),rgba(26,18,8,.72));
  --h1grad:linear-gradient(180deg,#FFF3E0 30%,#E0B07A 100%);--h1clip:text;--h1color:transparent;
  color-scheme:dark;
}
html[data-theme=playa] header.top{background:rgba(21,14,6,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.09)}
html[data-theme=playa] .card,html[data-theme=playa] .tile,html[data-theme=playa] .searchbar,html[data-theme=playa] table,html[data-theme=playa] .quote,html[data-theme=playa] .calm,html[data-theme=playa] .copybox,html[data-theme=playa] .picklist,html[data-theme=playa] .cattile{backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
html[data-theme=playa] input,html[data-theme=playa] select,html[data-theme=playa] textarea{background:rgba(255,255,255,.06);color:var(--ink);border-color:rgba(255,255,255,.15)}
html[data-theme=playa] th{background:rgba(255,255,255,.06);color:var(--ink2)}
html[data-theme=playa] .pill{background:rgba(255,255,255,.10);color:var(--ink2)}
html[data-theme=playa] a{color:#FFC27A}
html[data-theme=playa] .bottomnav{background:rgba(21,14,6,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-theme=playa] .notice{background:rgba(255,209,102,.10);border-color:rgba(255,209,102,.3);color:#FFE6B0}
html[data-theme=playa] .kpis div,html[data-theme=playa] .stat,html[data-theme=playa] .tfx,html[data-theme=playa] .trust{background:linear-gradient(150deg,rgba(255,236,210,.10),rgba(255,236,210,.02));border:1px solid rgba(255,255,255,.10)}

/* ── the picker itself, beside the language globe ────────────────────────────── */
#themebox{position:relative;display:flex;align-items:center}
#themebox>button{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:10px;height:34px;padding:0 10px;cursor:pointer;font:inherit;font-size:13px;font-weight:600}
#themebox>button:hover{background:rgba(255,255,255,.16)}
#themebox>button i{width:13px;height:13px;border-radius:50%;display:inline-block;background:conic-gradient(#FF7A2F,#A98CFF,#3FD9A0,#FFD166,#FF7A2F);box-shadow:0 0 0 2px rgba(255,255,255,.18)}
#themebox>button span{display:none}@media(min-width:900px){#themebox>button span{display:inline}}
#thememenu{position:absolute;right:0;top:42px;z-index:40;min-width:208px;background:var(--card,#fff);color:var(--ink,#14181D);border:1px solid var(--line,#E6E0D6);border-radius:14px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6);padding:6px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#thememenu button{display:flex;width:100%;align-items:center;gap:10px;background:transparent;border:0;color:inherit;font:inherit;font-size:14px;padding:9px 10px;border-radius:10px;cursor:pointer;text-align:left}
#thememenu button:hover{background:var(--accentsoft)}
#thememenu button[aria-checked=true]{font-weight:700}
#thememenu button[aria-checked=true]:after{content:"✓";margin-left:auto;color:var(--accent)}
#thememenu em{font-style:normal;width:22px;height:22px;border-radius:7px;flex:0 0 auto;border:1px solid rgba(0,0,0,.18)}
#thememenu .sw-noir{background:linear-gradient(135deg,#0B1018,#FF7A2F)}
#thememenu .sw-paper{background:linear-gradient(135deg,#FBF8F2,#E8641B)}
#thememenu .sw-wild{background:linear-gradient(135deg,#F0DDB6,#4A3210)}
#thememenu .sw-toon{background:linear-gradient(135deg,#FFE9A8,#FF4D2E)}
#thememenu .sw-playa{background:linear-gradient(135deg,#1A1208,#FFA22E)}
@media print{#themebox{display:none}}

/* surfaces that were written as a fixed light colour before the themes existed */
html[data-theme=noir],html[data-theme=playa]{--soft:rgba(255,255,255,.05)}
html[data-theme=wild]{--soft:rgba(255,251,242,.85)}
html[data-theme=toon]{--soft:#FFF6DA}
html[data-theme=noir] .copybox .copybar,html[data-theme=playa] .copybox .copybar{background:rgba(255,255,255,.05)}
/* the menu is a panel, not a wash: a 4% card over live content is unreadable however much it blurs */
html[data-theme=noir] #thememenu{background:rgba(16,21,29,.94);border-color:rgba(255,255,255,.12)}
html[data-theme=playa] #thememenu{background:rgba(26,18,8,.95);border-color:rgba(255,255,255,.12)}
html[data-theme=wild] #thememenu{background:#FFFBF2}
html[data-theme=toon] #thememenu{background:#fff;border:3px solid #141414;box-shadow:6px 6px 0 #141414}

/* ── ORIGINAL: exactly the look the pool launched on, with the v3 motion layer off.
   Nico, 2026-09-23: "I want the original option we had as a theme too."
   The palette is style.css's own :root, untouched — this block only switches off the premium layer. */
html[data-theme=classic]{--aurora:none;--veil:none;--glow:transparent;--h1grad:none;--h1clip:border-box;--h1color:inherit}
html[data-theme=classic] body:before,html[data-theme=classic] body:after{display:none}
html[data-theme=classic] .btn{background-image:none;background:var(--accent);box-shadow:none;transition:background .15s,transform .05s}
html[data-theme=classic] .btn:before{display:none}
html[data-theme=classic] .btn:hover{background:var(--accent2);box-shadow:none;filter:none}
html[data-theme=classic] .btn.ok{background:var(--ok);background-image:none}
html[data-theme=classic] .btn.bad{background:var(--bad);background-image:none}
html[data-theme=classic] .btn.warn{background:var(--warn);background-image:none}
html[data-theme=classic] .btn.ghost{background:transparent;background-image:none;box-shadow:none}
html[data-theme=classic] nav.main a.cta,html[data-theme=classic] .btn.pulse{animation:none}
html[data-theme=classic] a.card.asset,html[data-theme=classic] .tile,html[data-theme=classic] .cattile{transition:transform .15s,box-shadow .15s}
html[data-theme=classic] a.card.asset:hover{transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(20,24,29,.25)}
html[data-theme=classic] .tile:hover{transform:translateY(-2px);box-shadow:var(--sh)}
html[data-theme=classic] a.card.asset:hover img.ph{transform:none}
html[data-theme=classic].gp-reveal .rv{opacity:1;transform:none}
#thememenu .sw-classic{background:linear-gradient(135deg,#FBF8F2,#14181D)}

/* Rows and chips that carry a warning need a ground of their own in the dark themes: a fixed pale pink
   with themed text was the same class of bug as the unreadable "Request this one" chip (Nico, 2026-09-23). */
html[data-theme=noir],html[data-theme=playa],html[data-theme=wild]{--badsoft:rgba(255,107,94,.12)}