/* ============================================================
   Decksmith — Luminous Spectrum, the shared layer for the tool
   pages (daily / practice / trainer / methodology).
   The same landscape as the main app — desert, ridges, stars,
   the smith's forge — with each page picking its own terrain via
   data-terrain on #ds-root (the _ds tokens re-alias --hue-*):
     daily.html      → dawn    (a new day, same hand for everyone)
     practice.html   → verd    (growth — reps with receipts)
     trainer.html    → ember   (the forge — what "broken" means)
     methodology.html→ umbra   (depth — the receipts)
   The main app (index.html) keeps its own inline copy of this
   layer (tide terrain) inside its dc-runtime helmet; the scene
   markup itself is injected by src/scene.js on these pages.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
button,a,input,select,textarea,label{touch-action:manipulation}
body{margin:0;background:#0b0f1c;overflow-x:clip}
#ds-root{overflow-x:clip}
.hidden{display:none!important}

/* ---------------- DUSK (base) ---------------- */
#ds-root{
  color-scheme:dark;
  --wrap-max:980px;
  --text-primary:var(--atmos-high);
  --text-secondary:var(--atmos-mid);
  --text-tertiary:var(--atmos-low);
  --on-accent:var(--atmos-void);
  --ink-accent:var(--hue-light);
  --ink-gold:var(--dawn-core);
  --ink-warn:var(--ember-light);
  --ink-good:var(--verd-light);
  --ink-info:var(--tide-light);
  --ink-prem:var(--umbra-light);
  --label-ink:color-mix(in oklab, var(--hue-light) 40%, var(--atmos-low));
  --pool:color-mix(in oklab, var(--hue-abyss) 24%, var(--atmos-void));
  --pool-lit:color-mix(in oklab, var(--hue-abyss) 40%, var(--atmos-night));
  --inset-sh:inset 0 1px 4px rgba(0,0,0,.28);
  --inset-sh-lite:inset 0 1px 3px rgba(0,0,0,.3);
  --grain:.05;
  --sh-bg:
    radial-gradient(120% 70% at 50% 118%, color-mix(in oklab, var(--tide-deep) 16%, transparent) 0%, transparent 58%),
    radial-gradient(70% 56% at 88% 86%, color-mix(in oklab, var(--ember-core) 13%, transparent) 0%, transparent 50%),
    radial-gradient(120% 80% at 50% -16%, #000 0%, transparent 46%),
    linear-gradient(180deg, #080c19 0%, #0d1326 44%, #131a30 74%, #1a2238 100%);
  --sky:
    radial-gradient(760px 320px at 22% 30%, color-mix(in oklab, var(--tide-core) 14%, transparent), transparent 70%),
    radial-gradient(820px 360px at 84% 18%, color-mix(in oklab, var(--umbra-core) 13%, transparent), transparent 72%),
    radial-gradient(560px 300px at 90% 98%, color-mix(in oklab, var(--ember-core) 12%, transparent), transparent 72%);
  --band-bg:color-mix(in oklab, var(--atmos-void) 72%, transparent);
  --panel-bg:linear-gradient(180deg,
    color-mix(in oklab, var(--hue-abyss) 32%, var(--atmos-night)) 0%,
    var(--atmos-night) 32%,
    color-mix(in oklab, var(--atmos-night) 90%, var(--umbra-abyss)) 100%);
  --panel-shadow:0 24px 60px -24px color-mix(in oklab, var(--hue-abyss) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
  --em-grad:linear-gradient(180deg, var(--dawn-glow) 0%, var(--dawn-light) 60%, var(--dawn-core) 100%);
  --btn-bg:color-mix(in oklab, var(--hue-deep) 24%, transparent);
  --btn-ink:color-mix(in oklab, var(--hue-light) 72%, var(--atmos-mid));
  --btn-bg-hover:color-mix(in oklab, var(--hue-deep) 42%, transparent);
  --btn-ink-hover:var(--hue-glow);
  --chip-bg:color-mix(in oklab, var(--hue-deep) 26%, transparent);
  --chip-ink:color-mix(in oklab, var(--hue-light) 68%, var(--atmos-mid));
  --chip-bg-hover:color-mix(in oklab, var(--hue-deep) 46%, transparent);
  --chip-ink-hover:var(--hue-glow);
  --stat-bg:color-mix(in oklab, var(--hue-abyss) 22%, transparent);
  --art-bg:#1A1824;
  --select-opt-bg:var(--atmos-night);
  --menu-bg:color-mix(in oklab, var(--atmos-night) 88%, var(--hue-abyss));
  --menu-sel:color-mix(in oklab, var(--hue-deep) 35%, transparent);
  --toast-bg:color-mix(in oklab, var(--atmos-night) 84%, #2E1E2A);
  --toast-ink:var(--atmos-high);
  /* semantic judge hues: mixed against light in dusk (accents glow) */
  --j-mix:var(--atmos-mid);
  --j-strength:75%;
  /* the scene — desert wilderness with a smith's forge at the horizon */
  --floor-h:17vh;
  --floor-grad:linear-gradient(180deg, #1a2236 0%, #161c2c 38%, #10131e 72%, #0b0e16 100%);
  --ridge-4:color-mix(in oklab, var(--tide-deep) 40%, #131a2c);
  --ridge-3:color-mix(in oklab, var(--tide-abyss) 52%, #0f1524);
  --ridge-2:color-mix(in oklab, var(--umbra-abyss) 58%, #0c101d);
  --ridge-1:color-mix(in oklab, var(--umbra-abyss) 80%, #070811);
  --sky-bloom:radial-gradient(900px 420px at 16% 30%, color-mix(in oklab, var(--tide-core) 12%, transparent), transparent 70%), radial-gradient(820px 460px at 86% 16%, color-mix(in oklab, var(--umbra-core) 12%, transparent), transparent 72%);
  --sky-stars-op:.85;
  --sky-star:color-mix(in oklab, #cdd8ff 82%, #ffffff);
  --forge-glow:radial-gradient(closest-side at 32% 60%, color-mix(in oklab, #FFD79A 82%, var(--ember-core)) 0%, color-mix(in oklab, var(--ember-core) 55%, transparent) 24%, color-mix(in oklab, var(--ember-deep) 30%, transparent) 50%, transparent 78%);
  --mote-op:.9;
  --ember-dot:color-mix(in oklab, var(--ember-light) 60%, #FFD9A0);
  --smithy-ink:#0a0c15;
  --fire-core:#FF9A3C;
  --fire-glow:color-mix(in oklab, #FFB257 70%, transparent);
  --ham-rot:0deg;

  background:var(--sh-bg);
  background-attachment:fixed;
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
  transition:background .4s var(--ease-standard), color .4s var(--ease-standard);
}

/* ---------------- DAWN ---------------- */
#ds-root[data-theme="dawn"]{
  color-scheme:light;
  --text-primary:var(--atmos-night);
  --text-secondary:var(--atmos-dusk);
  --text-tertiary:color-mix(in oklab, var(--atmos-low) 50%, var(--atmos-dusk));
  --on-accent:var(--atmos-zenith);
  --ink-accent:var(--hue-deep);
  --ink-gold:var(--dawn-deep);
  --ink-warn:var(--ember-deep);
  --ink-good:var(--verd-deep);
  --ink-info:var(--tide-deep);
  --ink-prem:var(--umbra-deep);
  --label-ink:color-mix(in oklab, var(--hue-deep) 55%, var(--atmos-low));
  --pool:color-mix(in oklab, var(--hue-glow) 36%, var(--atmos-high));
  --pool-lit:color-mix(in oklab, var(--hue-glow) 55%, #FFFFFF);
  --inset-sh:inset 0 1px 3px rgba(68,66,61,.12);
  --inset-sh-lite:inset 0 1px 2px rgba(68,66,61,.10);
  --grain:.03;
  --sh-bg:
    radial-gradient(100% 66% at 86% 90%, color-mix(in oklab, var(--ember-light) 24%, transparent) 0%, transparent 54%),
    linear-gradient(180deg, #c5d2df 0%, #d4d8d2 34%, #e0dac9 64%, #e6d9bd 100%);
  --sky:
    radial-gradient(760px 320px at 22% 28%, color-mix(in oklab, var(--tide-light) 30%, transparent), transparent 70%),
    radial-gradient(820px 360px at 84% 14%, color-mix(in oklab, #ffffff 42%, transparent), transparent 72%),
    radial-gradient(560px 300px at 90% 98%, color-mix(in oklab, var(--ember-light) 26%, transparent), transparent 74%);
  --band-bg:color-mix(in oklab, #FFFFFF 72%, transparent);
  --panel-bg:linear-gradient(180deg,
    color-mix(in oklab, var(--hue-glow) 42%, #FFFFFF) 0%,
    #FFFFFF 34%,
    #FFFFFF 100%);
  --panel-shadow:0 24px 60px -24px color-mix(in oklab, var(--hue-deep) 22%, transparent), inset 0 1px 0 #FFFFFF;
  --em-grad:linear-gradient(180deg, var(--dawn-core) 0%, var(--dawn-deep) 62%, var(--dawn-abyss) 100%);
  --btn-bg:color-mix(in oklab, var(--hue-light) 32%, transparent);
  --btn-ink:var(--hue-deep);
  --btn-bg-hover:color-mix(in oklab, var(--hue-light) 55%, transparent);
  --btn-ink-hover:color-mix(in oklab, var(--hue-deep) 75%, var(--hue-core));
  --chip-bg:color-mix(in oklab, var(--hue-light) 30%, transparent);
  --chip-ink:var(--hue-deep);
  --chip-bg-hover:color-mix(in oklab, var(--hue-light) 52%, transparent);
  --chip-ink-hover:var(--hue-abyss);
  --stat-bg:color-mix(in oklab, var(--hue-glow) 55%, transparent);
  --art-bg:var(--atmos-high);
  --select-opt-bg:#FFFFFF;
  --menu-bg:#FFFFFF;
  --menu-sel:color-mix(in oklab, var(--hue-light) 45%, transparent);
  --toast-bg:color-mix(in oklab, #FFFFFF 88%, var(--ember-glow));
  --toast-ink:var(--atmos-night);
  /* semantic judge hues: mixed against deep in dawn (mid-tone accents) */
  --j-mix:var(--atmos-dusk);
  --j-strength:80%;
  /* the scene — desert wilderness, daylit, with a smith's forge */
  --floor-h:16vh;
  --floor-grad:linear-gradient(180deg, #d8c8a8 0%, #cab895 42%, #b8a079 74%, #a98f68 100%);
  --ridge-4:color-mix(in oklab, var(--tide-light) 48%, #dfe2d8);
  --ridge-3:color-mix(in oklab, var(--tide-core) 40%, #c6cabf);
  --ridge-2:color-mix(in oklab, var(--umbra-light) 42%, #aaa6b0);
  --ridge-1:color-mix(in oklab, var(--umbra-core) 46%, #8a8090);
  --sky-bloom:radial-gradient(900px 420px at 16% 28%, color-mix(in oklab, var(--tide-light) 22%, transparent), transparent 70%), radial-gradient(820px 460px at 86% 14%, color-mix(in oklab, #ffffff 40%, transparent), transparent 72%);
  --sky-stars-op:.10;
  --sky-star:#ffffff;
  --forge-glow:radial-gradient(closest-side at 32% 60%, color-mix(in oklab, #FFCF86 84%, var(--ember-core)) 0%, color-mix(in oklab, var(--ember-core) 42%, transparent) 24%, color-mix(in oklab, var(--ember-light) 26%, transparent) 50%, transparent 80%);
  --mote-op:.5;
  --ember-dot:color-mix(in oklab, var(--ember-core) 78%, var(--ember-deep));
  --smithy-ink:#3b3440;
  --fire-core:#FF8A2A;
  --fire-glow:color-mix(in oklab, #F4A24A 60%, transparent);
  --ham-rot:54deg;
}

#ds-root::after{
  content:''; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:var(--grain); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 28px;position:relative;z-index:1}

/* ---- the scene: a desert with a smith's forge at the horizon ---- */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Touch devices: iOS Safari ignores background-attachment:fixed and repaints
   the sky on every scroll. Paint the same gradient onto the .scene layer —
   already position:fixed, already behind everything — and give the root a
   solid base so the look is identical without the broken attachment. */
@media(pointer:coarse){
  #ds-root{background:#0d1326;background-attachment:scroll}
  #ds-root[data-theme="dawn"]{background:#d4d8d2}
  .scene{background:var(--sh-bg)}
}

/* faint atmospheric sky bloom */
.scene .skyglow{position:absolute;inset:0;background:var(--sky-bloom)}

/* cool stars in the night desert sky (fade away in dawn) */
.scene .starfield{
  position:absolute;left:0;right:0;top:0;height:60%;
  opacity:var(--sky-stars-op);transition:opacity .6s var(--ease-standard);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 48%,transparent 92%);
  mask-image:linear-gradient(180deg,#000 0%,#000 48%,transparent 92%);
}
.scene .starfield::before,
.scene .starfield::after{
  content:'';position:absolute;top:50%;left:50%;
  width:200vw;height:200vw;background-repeat:repeat;
  transform-origin:center center;will-change:transform,opacity;
}
.scene .starfield::before{
  background-image:
    radial-gradient(circle at 12% 18%, var(--sky-star) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 32% 8%, var(--sky-star) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 54% 24%, var(--sky-star) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 12%, var(--sky-star) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 22% 40%, var(--sky-star) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 60% 44%, var(--sky-star) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 86% 30%, var(--sky-star) 0 1px, transparent 1.6px),
    radial-gradient(circle at 44% 60%, var(--sky-star) 0 .7px, transparent 1.3px);
  background-size:520px 360px;
  animation:skywheel var(--sky-spin,960s) linear infinite, startwinkleA 7s ease-in-out infinite;
}
.scene .starfield::after{
  background-image:
    radial-gradient(circle at 8% 30%, var(--sky-star) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 40% 14%, var(--sky-star) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 64% 6%, var(--sky-star) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 80% 22%, var(--sky-star) 0 .7px, transparent 1.3px),
    radial-gradient(circle at 28% 52%, var(--sky-star) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 52% 34%, var(--sky-star) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 92% 46%, var(--sky-star) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 36% 70%, var(--sky-star) 0 .6px, transparent 1.2px);
  background-size:440px 320px;
  animation:skywheel var(--sky-spin,960s) linear infinite, startwinkleB 9s ease-in-out infinite;
}
@keyframes skywheel{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes startwinkleA{0%,100%{opacity:.95}50%{opacity:.5}}
@keyframes startwinkleB{0%,100%{opacity:.5}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){
  .scene .starfield::before,.scene .starfield::after{animation:none}
}

/* the layered mountain ridges at the horizon */
.scene .ridges{
  position:absolute;left:-2%;right:-2%;width:104%;bottom:var(--floor-h);
  height:36vh;min-height:240px;display:block;
  transition:opacity .6s var(--ease-standard);
}
.scene .ridges .r4{fill:var(--ridge-4)}
.scene .ridges .r3{fill:var(--ridge-3)}
.scene .ridges .r2{fill:var(--ridge-2)}
.scene .ridges .r1{fill:var(--ridge-1)}

/* the desert floor */
.scene .desert{
  position:absolute;left:0;right:0;bottom:0;height:var(--floor-h);
  background:var(--floor-grad);transition:background .6s var(--ease-standard);
}

/* the smith's forge — a small camp at the right edge of the horizon */
.scene .forge{
  position:absolute;right:clamp(8px,3.5vw,84px);bottom:calc(var(--floor-h) - 2.5vh);
  width:clamp(168px,18vw,262px);aspect-ratio:11/9;
}
.scene .forgeglow{
  position:absolute;inset:-16% -4% -10% -8%;
  background:var(--forge-glow);filter:blur(3px);
  animation:forgeflicker 4.6s var(--ease-standard) infinite alternate;
}
@keyframes forgeflicker{
  from{opacity:.78;transform:scale(.99)}
  to{opacity:1;transform:scale(1.02)}
}
.scene .smithy{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scene .smithy .sil{fill:var(--smithy-ink)}
.scene .smithy .fire{fill:var(--fire-core);filter:drop-shadow(0 0 5px var(--fire-glow));animation:firepulse 2.8s var(--ease-standard) infinite alternate}
.scene .smithy .firehi{fill:#FFE9B8}
@keyframes firepulse{from{opacity:.85;transform:translateY(.4px) scaleY(.96)}to{opacity:1;transform:translateY(0) scaleY(1.03)}}
.scene .smithy .hammer{
  transform-box:view-box;transform-origin:170px 122px;
  transform:rotate(var(--ham-rot));
  transition:transform .55s cubic-bezier(.34,1.3,.5,1);
}

/* ember motes — only rising off the forge fire */
.scene .motes{
  position:absolute;left:10%;right:48%;top:-30%;bottom:34%;
  opacity:var(--mote-op);transition:opacity .6s var(--ease-standard);
  background-image:
    radial-gradient(circle at 30% 84%, var(--ember-dot) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 64% 62%, var(--ember-dot) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 46% 42%, var(--ember-dot) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 76% 26%, var(--ember-dot) 0 .9px, transparent 1.5px);
  background-size:120px 150px;background-repeat:repeat;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 6%,transparent 72%);
  mask-image:linear-gradient(0deg,#000 0%,#000 6%,transparent 72%);
  animation:emberrise 11s linear infinite;
  will-change:background-position;
}
.scene .motes.m2{
  left:18%;right:44%;
  background-size:90px 110px;filter:blur(.5px);
  animation-name:emberrise2;animation-duration:7.5s;
  opacity:calc(var(--mote-op) * .6);
}
@keyframes emberrise{from{background-position:0 0}to{background-position:0 -150px}}
@keyframes emberrise2{from{background-position:0 0}to{background-position:0 -110px}}

/* ---- atmospheric nav band ---- */
.band{
  position:sticky;top:0;z-index:50;
  background:var(--band-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:background .4s var(--ease-standard);
}
.band .inner{
  max-width:var(--wrap-max);margin:0 auto;padding:13px 28px;
  display:flex;align-items:center;gap:18px;
}
.band .brand{margin-right:auto}
.bandtools{display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:27px;height:27px;display:block;filter:drop-shadow(0 0 10px color-mix(in oklab, var(--ember-core) 45%, transparent))}
.brand img.mk-dawn{display:none}
#ds-root[data-theme="dawn"] .brand img.mk-dawn{display:block}
#ds-root[data-theme="dawn"] .brand img.mk-dusk{display:none}
.brand span{font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:-0.01em;color:var(--text-primary)}
.brand .brandsub{font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:var(--tracking-eyebrow,.06em);text-transform:uppercase;color:var(--text-tertiary);margin-top:3px}
.bandright{display:flex;align-items:center;gap:18px}
.bandnote{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-eyebrow,.06em);text-transform:uppercase;color:var(--text-tertiary)}
a.bandnote{text-decoration:none;transition:color var(--duration-ui,240ms) var(--ease-standard)}
a.bandnote:hover{color:var(--ink-accent)}
/* Phones: drop the tagline but KEEP the tool links — they become a full-width
   row of equal pill buttons: proper tap targets that read as navigation. */
@media(max-width:640px){
  span.bandnote{display:none}
  .band{padding-top:env(safe-area-inset-top)}
  .band .inner{flex-wrap:wrap;padding:10px 14px 9px;row-gap:8px}
  .bandtools{order:3;flex-basis:100%;gap:7px}
  .bandtools .bandnote{
    display:flex;align-items:center;justify-content:center;flex:1;
    padding:10px 4px;font-size:10.5px;letter-spacing:.04em;
    background:var(--btn-bg);color:var(--btn-ink);border-radius:999px;
    transition:background var(--duration-ui,240ms) var(--ease-standard), color var(--duration-ui,240ms) var(--ease-standard);
  }
  .bandtools .bandnote:active{background:var(--btn-bg-hover);color:var(--btn-ink-hover)}
  .bandtools .bandnote .arr{display:none}
  .brand .brandsub{display:none}
}
.modebtn{
  width:38px;height:38px;border-radius:999px;border:none;cursor:pointer;
  display:grid;place-items:center;
  background:var(--btn-bg);color:var(--btn-ink);
  transition:all var(--duration-ui,240ms) var(--ease-standard);
}
.modebtn:hover{
  background:var(--btn-bg-hover);color:var(--btn-ink-hover);
  box-shadow:0 0 20px color-mix(in oklab, var(--hue-core) 26%, transparent);
}
.modebtn:active{transform:scale(.96)}
.modebtn:focus-visible{outline:none;box-shadow:var(--glow-focus)}
.modebtn svg{width:19px;height:19px;display:block}
.modebtn .ham{transform-origin:52% 56%;transition:transform .5s cubic-bezier(.34,1.3,.5,1);transform:rotate(0deg)}
.modebtn:active .ham{transform:rotate(-24deg)}
#ds-root[data-theme="dawn"] .modebtn .ham{transform:rotate(-32deg)}

/* ---- hero (compact, tool-page sized) ---- */
#ds-root header{position:relative;padding:58px 0 38px;overflow:visible}
#ds-root header::before{
  content:''; position:absolute; inset:-120px -10% 0; z-index:0; pointer-events:none;
  background:var(--sky);
  filter:blur(2px);
  animation:skydrift var(--duration-ambient,28s) ease-in-out infinite alternate;
}
@keyframes skydrift{
  from{transform:translateX(0);filter:blur(2px) hue-rotate(0deg)}
  to{transform:translateX(40px);filter:blur(2px) hue-rotate(16deg)}
}
#ds-root header::after{
  content:''; position:absolute; left:-4%; right:-4%; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in oklab, var(--hue-core) 45%, transparent) 30%,
    color-mix(in oklab, var(--dawn-core) 50%, transparent) 66%,
    transparent);
}
#ds-root header > *{position:relative;z-index:1}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:var(--tracking-eyebrow,.06em);
  text-transform:uppercase; color:var(--ink-accent);
}
#ds-root h1{
  font-family:var(--font-display); font-weight:480; font-optical-sizing:auto;
  font-size:clamp(31px,4.4vw,48px); line-height:1.08; letter-spacing:-0.015em;
  margin:14px 0 14px; color:var(--text-primary); max-width:26ch; text-wrap:balance;
}
#ds-root h1 em{
  font-style:italic; font-weight:430;
  background:var(--em-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 28px color-mix(in oklab, var(--dawn-core) 32%, transparent));
}
.sub{color:var(--text-secondary);font-size:16.5px;max-width:58ch;text-wrap:pretty;line-height:1.65}
.sub b{font-weight:500;color:var(--text-primary)}
#ds-root main{padding-top:30px}

/* ---- panels ---- */
.panel{
  position:relative;
  background:var(--panel-bg);
  border:none; border-radius:24px;
  padding:26px 26px 28px; margin-bottom:28px;
  box-shadow:var(--panel-shadow);
  --ph-deep:var(--hue-deep); --ph-core:var(--hue-core); --ph-light:var(--hue-light);
  --ph-band:var(--ph-deep);
  --ph-num:var(--ph-core);
  --ph-ink:color-mix(in oklab, var(--ph-light) 75%, var(--atmos-mid));
  transition:background .4s var(--ease-standard), box-shadow .4s var(--ease-standard);
}
#ds-root[data-theme="dawn"] .panel{
  --ph-band:var(--ph-light);
  --ph-num:var(--ph-deep);
  --ph-ink:color-mix(in oklab, var(--ph-deep) 80%, var(--atmos-dusk));
}
.panel h2.step{
  display:flex;align-items:baseline;gap:14px;
  margin:-26px -26px 22px;padding:18px 26px 14px;
  border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--ph-band) 30%, transparent) 0%,
    color-mix(in oklab, var(--ph-band) 10%, transparent) 68%,
    transparent 100%);
}
.panel h2.step i{
  font-style:normal;font-family:var(--font-mono);font-weight:400;font-size:12px;
  letter-spacing:.08em;color:var(--ph-num);
  text-shadow:0 0 16px color-mix(in oklab, var(--ph-core) 50%, transparent);
}
.panel h2.step span{
  font-family:var(--font-display);font-weight:500;font-size:21px;letter-spacing:-0.01em;
  color:var(--text-primary);
}
.panel h2.read{
  margin:-26px -26px 20px;padding:16px 26px 13px;
  border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--ph-band) 32%, transparent) 0%,
    color-mix(in oklab, var(--ph-band) 11%, transparent) 66%,
    transparent 100%);
  font-family:var(--font-mono);font-weight:400;font-size:11.5px;
  letter-spacing:var(--tracking-eyebrow,.06em);text-transform:uppercase;
  color:var(--ph-ink);
}

/* ---- labels & notes ---- */
label.fl{
  display:block; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--label-ink);
  margin:18px 0 7px;
}
.note{color:var(--text-tertiary);font-size:13px;line-height:1.55;margin-top:9px;text-wrap:pretty}
.note b{font-weight:500;color:var(--text-secondary)}
.note a,.sub a{color:var(--ink-accent)}
.count{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;color:var(--text-tertiary);margin-top:8px}
.count .warn{color:var(--ink-warn)}

/* ---- recessed pools ---- */
#ds-root textarea,#ds-root input[type=text],#ds-root input[type=email],#ds-root input[type=password],#ds-root select{
  width:100%; background:var(--pool); border:none; border-radius:13px;
  color:var(--text-primary); padding:11px 14px;
  font-family:var(--font-body); font-size:14px;
  transition:background var(--duration-ui,240ms) var(--ease-standard), box-shadow var(--duration-ui,240ms) var(--ease-standard);
  box-shadow:var(--inset-sh);
}
#ds-root textarea{font-family:var(--font-mono);font-size:12.5px;resize:vertical;line-height:1.6}
#ds-root textarea::placeholder,#ds-root input::placeholder{color:var(--text-tertiary)}
#ds-root textarea:focus,#ds-root input:focus,#ds-root select:focus{
  outline:none; background:var(--pool-lit);
  box-shadow:var(--glow-focus), var(--inset-sh-lite);
}
#ds-root select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A877F' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
#ds-root select option{background:var(--select-opt-bg);color:var(--text-primary)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- buttons ---- */
.btn{
  background:var(--btn-bg);
  border:none; border-radius:13px;
  color:var(--btn-ink);
  padding:10px 16px; font-family:var(--font-body); font-weight:500; font-size:13.5px; cursor:pointer;
  text-decoration:none; display:inline-block; text-align:center;
  transition:all var(--duration-ui,240ms) var(--ease-standard);
}
.btn:hover{
  background:var(--btn-bg-hover);
  color:var(--btn-ink-hover);
  box-shadow:0 0 22px color-mix(in oklab, var(--hue-core) 24%, transparent);
}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:none;box-shadow:var(--glow-focus)}
.btn.primary{
  background:linear-gradient(180deg, var(--hue-core) 0%, color-mix(in oklab, var(--hue-core) 55%, var(--hue-deep)) 64%, var(--hue-deep) 100%);
  color:var(--on-accent); font-weight:600;
  font-size:15px; padding:13px 22px; letter-spacing:.01em;
  box-shadow:0 12px 32px -10px color-mix(in oklab, var(--hue-core) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.primary:hover{
  filter:brightness(1.12); color:var(--on-accent);
  box-shadow:0 14px 38px -10px color-mix(in oklab, var(--hue-core) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.32);
}
.btn.primary:disabled{opacity:.4;cursor:default;filter:none;box-shadow:none}
.btn.mini{padding:6px 12px;font-size:12px;border-radius:11px}
.btn:disabled{opacity:.4;cursor:default}

/* ---- segmented controls ---- */
.seg{
  display:inline-flex; background:var(--pool); border:none; border-radius:999px;
  overflow:hidden; padding:3px; gap:2px;
  box-shadow:var(--inset-sh);
}
.seg button{
  flex:1; background:transparent; border:none; border-radius:999px;
  color:var(--text-tertiary); font-family:var(--font-body); font-weight:500; font-size:12.5px;
  padding:7px 11px; cursor:pointer; white-space:nowrap;
  transition:all var(--duration-ui,240ms) var(--ease-standard);
}
.seg button:hover{color:var(--ink-accent)}
.seg button.on{
  background:linear-gradient(180deg, var(--hue-core), color-mix(in oklab, var(--hue-core) 60%, var(--hue-deep)));
  color:var(--on-accent); font-weight:600;
  box-shadow:0 0 16px color-mix(in oklab, var(--hue-core) 42%, transparent);
}
.seg button:focus-visible{outline:2px solid var(--hue-core);outline-offset:-2px;color:var(--ink-accent)}

/* ---- chips (terrain-hued on the tool pages) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--font-body); font-weight:500; font-size:12px; border:none; border-radius:999px;
  padding:7px 14px; cursor:pointer;
  background:var(--chip-bg);
  color:var(--chip-ink);
  transition:all var(--duration-ui,240ms) var(--ease-standard);
}
.chip:hover,.chip.on{
  background:var(--chip-bg-hover);
  color:var(--chip-ink-hover);
  box-shadow:0 0 18px color-mix(in oklab, var(--hue-core) 32%, transparent);
}
.chip:active{transform:scale(.985)}
.chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--hue-core), 0 0 18px color-mix(in oklab, var(--hue-core) 30%, transparent)}

/* ============================================================
   Tool widgets shared by daily / practice / trainer
   ============================================================ */

/* ---- the dealt hand ---- */
.handgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:6px 0 14px}
.card{aspect-ratio:63/88;border-radius:10px;border:none;overflow:hidden;
  background:var(--pool);position:relative;display:flex;align-items:flex-end;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
  transition:transform var(--duration-ui,240ms) var(--ease-standard), box-shadow var(--duration-ui,240ms) var(--ease-standard)}
@media(hover:hover){
  .card:hover{transform:translateY(-4px) scale(1.02);
    box-shadow:0 16px 30px -8px rgba(0,0,0,.5), 0 0 22px color-mix(in oklab, var(--hue-core) 30%, transparent)}
}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .nm{position:relative;z-index:1;font-size:10.5px;line-height:1.25;padding:5px;
  background:linear-gradient(transparent,rgba(10,8,20,.85));width:100%;color:#F4F2EE}

/* phones: the hand is a cascading fan — full fist-fan rotation PLUS a
   step-down per card, so every name bar keeps clear air above the card
   covering it; the front card rides on top, straight and fully visible.
   handstack.js stamps --i/--n and drives tap-to-lift + swipe-to-judge.
   Each page supplies the ::after hint text (keep/mull vs broken). */
@media(max-width:640px){
  /* the swipe fling widens layout overflow; without clipping at the html
     level, mobile Chrome grows the layout viewport and fixed-position UI
     (swipe badge, verdict flash) drifts off-center mid-gesture */
  html,body{overflow-x:hidden;overflow-x:clip}
  .handgrid{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none;
    margin:4px 0 14px;--cw:min(53vw,250px);--ys:clamp(30px,4.6vh,40px);
    height:calc(var(--cw)*1.397 + (var(--n,7) - 1)*var(--ys) + 56px)}
  .handgrid .card{position:absolute;left:6vw;top:0;width:var(--cw);cursor:pointer;
    border-radius:12px;box-shadow:-10px -8px 24px rgba(0,0,0,.55);
    transition:transform .24s ease;transform-origin:20% 110%;
    transform:translate(calc(var(--i,0)*3vw), calc(var(--i,0)*var(--ys)))
      rotate(calc((var(--i,0) - (var(--n,7) - 1)/2)*3.2deg))}
  /* one tap rule, front card included: first tap lifts — straightens,
     rises (clamped so top rows stay on screen), grows — second tap zooms */
  .handgrid .card.active{cursor:zoom-in;z-index:30;
    transform:translate(calc(var(--i,0)*3vw), max(-8px, calc(var(--i,0)*var(--ys) - 7vh)))
      rotate(0deg) scale(1.15);
    box-shadow:0 18px 44px rgba(0,0,0,.75)}
  /* no-art fallback: the name lives in the visible top edge */
  .handgrid .card .nm{position:absolute;top:0;left:0;right:0;width:auto;display:flex;align-items:center;
    height:52px;padding:0 12px;font-size:13px;background:linear-gradient(rgba(10,8,20,.78),rgba(10,8,20,.15))}
  .handgrid .card:has(img) .nm{display:none}
  .handgrid::after{position:absolute;left:0;right:0;bottom:0;text-align:center;
    color:var(--text-tertiary);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em}
  .swipe-badge{position:absolute;top:32%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);
    font-family:var(--font-body);font-size:28px;font-weight:800;letter-spacing:.12em;padding:8px 18px;border:3px solid;
    border-radius:16px;background:rgba(12,10,22,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;pointer-events:none;z-index:40;white-space:nowrap}
}

/* ---- judge / verdict buttons: raised pools that glow their meaning ---- */
.judge,.verdict{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px;align-items:center}
.jbtn,.vbtn{
  flex:1;min-width:110px;border:none;border-radius:14px;padding:14px;
  font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;
  --j-core:var(--hue-core);--j-light:var(--hue-light);--j-deep:var(--hue-deep);
  background:color-mix(in oklab, var(--j-deep) 22%, transparent);
  color:color-mix(in oklab, var(--j-light) var(--j-strength), var(--j-mix));
  transition:all var(--duration-ui,240ms) var(--ease-standard);
}
#ds-root[data-theme="dawn"] .jbtn,#ds-root[data-theme="dawn"] .vbtn{
  background:color-mix(in oklab, var(--j-light) 30%, transparent);
  color:color-mix(in oklab, var(--j-deep) var(--j-strength), var(--j-mix));
}
.jbtn:hover,.vbtn:hover{
  background:color-mix(in oklab, var(--j-deep) 40%, transparent);
  color:var(--j-light);
  box-shadow:0 0 24px color-mix(in oklab, var(--j-core) 32%, transparent);
}
#ds-root[data-theme="dawn"] .jbtn:hover,#ds-root[data-theme="dawn"] .vbtn:hover{
  background:color-mix(in oklab, var(--j-light) 52%, transparent);
  color:var(--j-deep);
}
.jbtn:active,.vbtn:active{transform:scale(.98)}
.jbtn:focus-visible,.vbtn:focus-visible{outline:none;box-shadow:0 0 0 1px var(--j-core), 0 0 24px color-mix(in oklab, var(--j-core) 30%, transparent)}
.jbtn .k,.vbtn .k{display:block;font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:.06em;color:var(--text-tertiary);margin-top:4px}
/* the semantic hues */
.jbtn.keep,.vbtn.good{--j-core:var(--verd-core);--j-light:var(--verd-light);--j-deep:var(--verd-deep)}
.jbtn.mull,.vbtn.broken{--j-core:var(--ember-core);--j-light:var(--ember-light);--j-deep:var(--ember-deep)}
.jbtn.peek,.vbtn.notbroken{--j-core:var(--tide-core);--j-light:var(--tide-light);--j-deep:var(--tide-deep)}
.vbtn.bord{--j-core:var(--umbra-core);--j-light:var(--umbra-light);--j-deep:var(--umbra-deep)}
/* "broken, but not via the shown line" — ember like broken, but hollow: the
   verdict matches, the evidence doesn't */
.vbtn.missed{--j-core:var(--ember-core);--j-light:var(--ember-light);--j-deep:var(--ember-deep);
  background:transparent;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--j-core) 45%, transparent)}
.jbtn.next{--j-core:var(--hue-core);--j-light:var(--hue-light);--j-deep:var(--hue-deep)}

/* ---- verdict readout ---- */
.verdict-head{font-family:var(--font-display);font-size:19px;font-weight:500;margin:2px 0 8px}
.verdict-head.got{color:var(--ink-good)}
.verdict-head.miss{color:var(--ink-warn)}
.agree{font-size:13.5px;margin:2px 0 10px;color:var(--text-secondary)}
.agree .yes{color:var(--ink-good)} .agree .no{color:var(--ink-warn)}
.runglist{display:flex;flex-direction:column;gap:5px;margin:8px 0;font-size:13px;color:var(--text-secondary)}
.runglist .r{display:flex;gap:8px;align-items:baseline}
.runglist .ok{color:var(--ink-good)} .runglist .nope{color:var(--text-tertiary)}
.runglist .tn{color:var(--ink-gold);font-family:var(--font-mono);font-size:12px}
.linebox{background:var(--pool);border:none;border-radius:14px;padding:12px 14px;
  font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--text-secondary);
  white-space:pre-wrap;box-shadow:var(--inset-sh-lite);margin-top:8px}
.linebox .t{color:var(--ink-accent);font-weight:500;margin-right:8px}
.linebox .g{color:var(--ink-gold);text-shadow:0 0 14px color-mix(in oklab, var(--dawn-core) 35%, transparent)}
.linebox .x{color:var(--ink-warn)}
.linebox .seqturn{margin:3px 0}

/* ---- session tally ---- */
.tally{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-secondary)}
.tally b{color:var(--text-primary);font-family:var(--font-mono)}
.tally .stat{display:inline-flex;align-items:baseline;gap:6px;background:none;border:none;border-radius:0;padding:0}
.tally .stat i{font-style:normal;color:var(--text-tertiary)}
/* phones: the tally is just colored numbers — tap the row to decode them */
@media(max-width:640px){
  .tally{gap:8px 18px;cursor:pointer;align-items:baseline}
  .tally .stat i{display:none}
  .tally .stat b{font-size:21px;font-weight:700}
  .tally:not(.labels)::after{content:'tap to decode';color:var(--text-tertiary);font-family:var(--font-mono);font-size:10.5px;align-self:center}
  .tally.labels{flex-direction:column;align-items:flex-start;gap:7px}
  .tally.labels .stat i{display:inline;font-size:12.5px}
}
.smallrow{display:flex;gap:12px;align-items:center;margin-top:12px;color:var(--text-tertiary);font-size:12.5px;flex-wrap:wrap}
.smallrow b{color:var(--text-secondary)}

/* ---- toast ---- */
.toast{
  position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:95;
  transform:translateX(-50%) translateY(14px);opacity:0;
  background:var(--toast-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--toast-ink);font-family:var(--font-body);font-size:14px;
  padding:13px 24px;border-radius:999px;max-width:84vw;text-align:center;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.4), 0 0 26px color-mix(in oklab, var(--ember-core) 26%, transparent);
  transition:all .35s var(--ease-standard);pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- footer ---- */
#ds-root footer{margin-top:32px;padding:36px 0 44px;text-align:center;position:relative}
#ds-root footer::before{
  content:'';position:absolute;left:8%;right:8%;top:0;height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--hue-core) 32%, transparent) 50%, transparent);
}
#ds-root footer p{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--text-tertiary)}
#ds-root footer a{color:inherit}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in oklab, var(--hue-deep) 50%, transparent);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* ---- responsive: phones & small tablets ---- */
@media(max-width:680px){
  .wrap{padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right))}
  #ds-root header{padding:40px 0 28px}
  #ds-root main{padding-top:20px}
  .panel{padding:20px 17px 22px;border-radius:18px;margin-bottom:20px}
  .panel h2.step,.panel h2.read{margin-left:-17px;margin-right:-17px;padding-left:17px;padding-right:17px;border-radius:18px 18px 0 0}
  .sub{font-size:15.5px}
  /* iOS zoom-jumps into any focused field under 16px — hold every field at
     16px on phones so tapping an input never lurches the page */
  #ds-root textarea,#ds-root input[type=text],#ds-root input[type=email],#ds-root input[type=password],#ds-root select{font-size:16px}
  #ds-root footer{padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
}
/* ---- touch devices: hit targets >=44px ---- */
@media(pointer:coarse){
  .btn{padding:13px 18px}
  .btn.mini{padding:10px 15px}
  .seg button{padding:12px 12px}
  .chip{padding:11px 16px}
  .modebtn{width:44px;height:44px}
  /* keyboard hints are mouse-and-keys furniture — no keys on a phone */
  .jbtn .k,.vbtn .k,.kbd{display:none!important}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}