/* HoopStatix Träning — one app, two looks. Shared structure first, then the Notebook and the Hardwood skins. */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{min-height:100vh;background:var(--bg);color:var(--ink);font:500 15px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
svg{display:block}
#app{max-width:560px;margin:0 auto;min-height:100vh;position:relative}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--barbg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bar .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--chip)}
.bar .ic svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bar .crumb{flex:1;font:800 11px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .brand{flex:none;font:800 13px Inter;letter-spacing:.06em;color:var(--dim)}.bar .brand b{color:var(--acc)}
.pg{padding:8px 22px 40px}
.kick{font:800 11px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin:6px 0 8px}
.pre{color:var(--dim)}
.lead{color:var(--ink2);margin:0 0 18px;font-size:15px}
.lead mark{background:var(--mark);color:inherit;padding:0 2px}
.dim{color:var(--dim);font-size:13.5px}
.lbl{font:800 11px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.sec{margin:22px 0}
.who{font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r);font:800 15px Inter;background:var(--chip);color:var(--ink)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.btn svg .f{fill:currentColor;stroke:none}
.btn.pri{background:var(--pri);color:var(--prink);box-shadow:var(--prish)}
.btn.wide{width:100%}.btn[disabled]{opacity:.35}
.btns{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.dock{position:sticky;bottom:0;padding:14px 0 calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 35%);margin-top:10px}
/* home */
.hero{line-height:.9;margin:2px 0 16px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 18px}.stats div{padding:12px 0;font:700 11px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}.stats b{display:block;font-size:28px;line-height:1.1;color:var(--ink);letter-spacing:0}
.next{border-radius:var(--rl);padding:18px;background:var(--card);border:1px solid var(--line);margin-bottom:6px}
.next h2{margin:6px 0 2px;line-height:1.05}.next .dim{margin-bottom:14px}
.tl{display:flex;gap:3px;height:7px;margin-bottom:16px}.tl i{display:block;border-radius:4px;background:var(--acc)}.tl i.water,.tl i.end{opacity:.35}.tl i.warm{opacity:.65}
.idx{list-style:none}
.idx a{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:6px;padding:12px 2px;border-bottom:1px solid var(--line)}
.idx b{font-size:15px;color:var(--dim)}.idx em{display:block;font-style:normal;font-weight:800;font-size:16.5px;line-height:1.2}.idx small{color:var(--dim);font-size:12.5px}
.idx i{font:800 11px Inter;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}.idx i svg{width:18px;height:18px;fill:none;stroke:var(--ok);stroke-width:2.6}
.idx li.on b,.idx li.on i{color:var(--acc)}
.plan-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--rl);background:var(--card);border:1px solid var(--line);margin:14px 0}
.plan-card .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accsoft);flex:none}.plan-card .ico svg{width:22px;height:22px;fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plan-card>span:nth-child(2){flex:1}.plan-card b{display:block;font-size:16px}.plan-card small{color:var(--dim);font-size:12.5px}
.plan-card>i svg{width:18px;height:18px;fill:none;stroke:var(--dim);stroke-width:2.2}
.foot{color:var(--dim);font-size:11.5px;margin-top:22px}
/* session */
.title{line-height:.95;margin:0 0 12px}.title span{color:var(--acc2)}
.note{padding:12px 0;border-bottom:1px solid var(--line)}.note h4{font:800 10.5px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:4px}.note p{color:var(--ink2);font-size:14.5px}
.stamp{margin:18px 0 6px}
.lbl-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.lbl-row .lbl{margin:0}
.seg{display:flex;padding:3px;border-radius:12px;background:var(--chip)}.seg button{padding:7px 12px;border-radius:9px;font:800 12px Inter;color:var(--dim)}.seg button.on{background:var(--pri);color:var(--prink)}
.plan{list-style:none}
.plan li>a,.plan li>div{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--line)}
.plan b{font-variant-numeric:tabular-nums;color:var(--acc);font-weight:800}.plan em{font-style:normal;font-weight:700}.plan small{display:block;color:var(--dim);font-size:12px}.plan i{font-style:normal;color:var(--dim);font:700 12px Inter}
.plan li.water em,.plan li.end em{color:var(--dim);font-weight:600}.plan li.cut{opacity:.35}.plan li.cut em{text-decoration:line-through}
.drills{display:flex;flex-direction:column;gap:8px}
.dcard{display:grid;grid-template-columns:36px 1fr 86px;gap:10px;align-items:center;padding:10px 10px 10px 14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.dcard>b{color:var(--acc);font-size:16px}.dcard em{display:block;font-style:normal;font-weight:800;font-size:15px;line-height:1.2}.dcard small{color:var(--dim);font-size:12px}
.dcard .mini{width:86px;border-radius:8px;overflow:hidden}.dcard .mini .court.full{height:60px;width:auto;margin:0 auto}
.rules{display:flex;flex-direction:column;gap:8px}.rule{display:flex;gap:14px;padding:12px 14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.rule b{font-size:30px;line-height:1;color:var(--acc);min-width:22px}.rule em{display:block;font-style:normal;font-weight:800;font-size:16px;margin-bottom:2px}.rule span{color:var(--ink2);font-size:14px}
.rkey{margin-top:10px;font-weight:800}
/* drill */
.title.sm{font-size:var(--h2)}
.cw{border-radius:var(--rc);overflow:hidden;margin:4px 0 8px;box-shadow:var(--courtsh)}
.cw figcaption{padding:9px 12px;font-size:13px;color:var(--ink2);background:var(--card)}
.cw.hide{display:none}
.tabs{display:flex;gap:6px;margin-bottom:8px}.tabs button{flex:1;padding:9px;border-radius:10px;font:800 12.5px Inter;background:var(--chip);color:var(--dim)}.tabs button.on{background:var(--pri);color:var(--prink)}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font:600 11px Inter;color:var(--dim);margin:6px 0 16px}.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{display:inline-block}.lx{width:12px;height:12px;border-radius:50%;background:var(--x)}.lo{width:11px;height:11px;border-radius:50%;border:2px solid var(--o)}.lb{width:9px;height:9px;border-radius:50%;background:var(--ball)}
.lmv{width:16px;height:3px;background:var(--x);border-radius:2px}.lh{width:16px;border-top:2.5px dashed var(--x)}.lc{width:16px;height:3px;background:var(--cut);border-radius:2px}.lp{width:16px;border-top:2.5px dashed var(--pass)}.ld{width:16px;border-top:3px dotted var(--ball)}.ls{width:3px;height:12px;background:var(--cut);box-shadow:4px 0 0 var(--cut),-4px 0 0 var(--cut);margin:0 4px}
.do{list-style:none;display:flex;flex-direction:column;gap:7px;margin:4px 0 12px}
.do li{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);font-weight:700;font-size:15px}
.do li b{font-size:18px;color:var(--acc);min-width:16px}.do li.hot{background:var(--hotbg);color:var(--hotink);border-color:transparent}.do li.hot b{color:var(--hotnum)}
.goal{display:flex;gap:10px;align-items:baseline;padding:12px 14px;border-radius:var(--r);border:1.5px solid var(--acc);margin-bottom:10px}.goal b{font:800 11px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.small{display:flex;gap:10px;align-items:baseline;padding:10px 2px;font-size:14px;color:var(--ink2)}.small b{flex:none;font:800 10.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.more{margin:12px 0}.more summary{list-style:none;font:800 11px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding:10px 0;cursor:pointer}.more summary::-webkit-details-marker{display:none}.more summary::after{content:" ▾"}
.vids{display:flex;flex-direction:column;gap:8px}.vid{display:flex;gap:12px;align-items:center;padding:8px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.vid .th{flex:none;width:104px;height:58px;border-radius:9px;background:#222 center/cover no-repeat;display:grid;place-items:center}.vid .th svg{width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(0,0,0,.6)}.vid .th svg .f{fill:#fff}
.vid b{display:block;font-size:13.5px;line-height:1.25}.vid em{font-style:normal;font-size:11.5px;color:var(--dim)}
.key{margin:16px 0}.key span{display:block;font:800 10.5px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin-bottom:4px}
.pn{display:flex;justify-content:space-between;gap:8px;margin-top:18px}.pn .btn{flex:1}
.link{display:inline-block;margin:6px 0 4px;font-weight:800;color:var(--acc)}
/* run */
.clock{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:16px;border-radius:var(--rl);background:var(--card);border:1px solid var(--line);margin:4px 0 8px}
.clock .lbl{margin-bottom:2px}.clock b#clk{font-size:62px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-1px}.clock b#clk.over{color:var(--warn)}
.cbtn{display:flex;gap:8px}.cbtn .btn{min-height:56px;padding:0 14px}.cbtn .btn.pri{width:64px}.cbtn .btn.pri svg{width:24px;height:24px}
.prog{display:flex;gap:3px;height:6px;margin:0 0 16px}.prog i{display:block;border-radius:3px;background:var(--chip)}.prog i.past{background:var(--acc);opacity:.45}.prog i.now{background:var(--acc)}
.run-nav{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 35%)}
/* evaluation, checklist, names */
.evs{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.evr{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.evr>span:first-child{flex:1}.evr em{display:block;font-style:normal;font-weight:800}.evr small{color:var(--dim);font-size:12.5px}
.b3{display:flex;gap:5px;flex:none}.b3 button{width:38px;height:38px;border-radius:10px;font:800 15px Inter;background:var(--chip)}
.b3 .v1{background:var(--warn);color:#fff}.b3 .v2{background:var(--mid);color:#fff}.b3 .v3{background:var(--ok);color:#fff}
.evsum{display:flex;justify-content:space-between;color:var(--dim);font-size:12.5px;margin-bottom:18px}.evsum b{color:var(--ok)}
.checks{display:flex;flex-direction:column;gap:8px}.chk{display:flex;gap:12px;align-items:center;text-align:left;padding:12px 14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.chk i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;border:2px solid var(--line2);flex:none}.chk i svg{width:16px;height:16px;fill:none;stroke:transparent;stroke-width:3}
.chk.on i{background:var(--ok);border-color:var(--ok)}.chk.on i svg{stroke:#fff}.chk em{display:block;font-style:normal;font-weight:800}.chk small{color:var(--dim);font-size:12.5px}
.fld{display:block;margin-bottom:10px}.fld span{display:block;font-size:12.5px;color:var(--dim);margin-bottom:4px}.fld b{color:var(--acc);margin-right:8px}
.fld input{width:100%;padding:14px;border-radius:var(--r);border:1px solid var(--line2);background:var(--card);color:var(--ink);font:600 16px Inter}
/* the court (both skins colour it through variables) */
.court{width:100%;height:auto}
.court .floor{fill:var(--floor)}.court .paint{fill:var(--paint)}.court .ln{fill:none;stroke:var(--cline);stroke-width:var(--clw)}.court .board{stroke:var(--cline);stroke-width:4}.court .rim{fill:none;stroke:var(--rim);stroke-width:3.5}
.court .mid{font:800 12px Inter;letter-spacing:.2em;fill:var(--cline);opacity:.6}
.court .zone{fill:var(--zonef);stroke:var(--warn);stroke-width:2.5;stroke-dasharray:8 7}.court .zl{font:800 13px Inter;letter-spacing:.2em;fill:var(--warn)}
.court .pair{stroke:var(--x);stroke-opacity:.4;stroke-width:2.5;stroke-dasharray:2 6;stroke-linecap:round}
.court .pass{fill:none;stroke:var(--pass);stroke-width:3;stroke-dasharray:9 8}.court .drv{fill:none;stroke:var(--ball);stroke-width:4;stroke-dasharray:2.5 7;stroke-linecap:round}
.court .cut{fill:none;stroke:var(--cut);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}.court .oscr{stroke:var(--cut);stroke-width:3.4;stroke-linecap:round}.court .dscr{stroke:var(--x);stroke-width:3.6;stroke-linecap:round}.court .bar{stroke-width:5.5}
.court .mv{fill:none;stroke:var(--x);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.court .help{fill:none;stroke:var(--x);stroke-width:3.4;stroke-dasharray:7 6;stroke-linecap:round}
.court .a-mv{fill:var(--x)}.court .a-cut{fill:var(--cut)}.court .a-pass{fill:var(--pass)}.court .a-drv{fill:var(--ball)}
.court .o circle{fill:var(--ofill);stroke:var(--o);stroke-width:2.8}.court .o text{font:800 13px var(--tokfont);fill:var(--otext)}
.court .x circle{fill:var(--x);stroke:var(--xline);stroke-width:2.5}.court .x text{font:800 17px var(--tokfont);fill:var(--xtext)}
.court .ball{fill:var(--ball);stroke:var(--floor);stroke-width:2.5}
.court .pl{fill:transparent}

/* =============================== NOTEBOOK =============================== */
[data-theme="notebook"]{
  --bg:#F3EDE1;--barbg:rgba(243,237,225,.88);--ink:#1A1916;--ink2:#3B3832;--dim:#7A746A;--acc:#C93026;--acc2:#C93026;--accsoft:rgba(201,48,38,.1);
  --card:#FBF8F1;--chip:rgba(26,25,22,.07);--line:rgba(26,25,22,.16);--line2:rgba(26,25,22,.3);--mark:linear-gradient(transparent 60%,rgba(201,48,38,.22) 60%);
  --pri:#1A1916;--prink:#FBF7EE;--prish:0 3px 0 rgba(26,25,22,.25);--r:10px;--rl:14px;--rc:6px;--ok:#2F7D4A;--mid:#B07A1E;--warn:#C93026;
  --hotbg:#1A1916;--hotink:#FBF7EE;--hotnum:#FF8C80;--courtsh:3px 3px 0 rgba(26,25,22,.16);--h2:40px;
  --floor:#FCF9F2;--paint:rgba(201,48,38,.05);--cline:#2A2722;--clw:2.6;--rim:#C93026;--x:#1A1916;--xline:#1A1916;--xtext:#FBF7EE;--o:#1A1916;--ofill:#FCF9F2;--otext:#1A1916;
  --cut:#6E685E;--pass:#6E685E;--ball:#C93026;--zonef:rgba(201,48,38,.07);--tokfont:Fraunces,serif}
[data-theme="notebook"] body{background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(70,90,140,.08) 31px 32px),#F3EDE1}
[data-theme="notebook"] #app::before{content:"";position:fixed;top:0;bottom:0;width:1.5px;margin-left:44px;background:rgba(201,48,38,.25);pointer-events:none;z-index:0}
[data-theme="notebook"] .pg{position:relative;z-index:1}
[data-theme="notebook"] .bar{border-bottom:2px solid #1A1916}
[data-theme="notebook"] .pre{font:italic 500 19px Fraunces,serif}
[data-theme="notebook"] .hero{font:900 72px/.9 Fraunces,serif;letter-spacing:-2.5px}
[data-theme="notebook"] .title{font:900 46px/.95 Fraunces,serif;letter-spacing:-1.4px}[data-theme="notebook"] .title span{font-style:italic;font-weight:500}
[data-theme="notebook"] .title.sm{font-size:40px}
[data-theme="notebook"] .next h2{font:900 28px Fraunces,serif;letter-spacing:-.5px}
[data-theme="notebook"] .stats{border-top:1.5px solid #1A1916;border-bottom:1px solid var(--line)}[data-theme="notebook"] .stats b{font:900 30px Fraunces,serif}
[data-theme="notebook"] .idx{border-top:1.5px solid #1A1916}[data-theme="notebook"] .idx b{font:700 15px Fraunces,serif}[data-theme="notebook"] .idx em{font:800 18px Fraunces,serif}
[data-theme="notebook"] .plan{border-top:1.5px solid #1A1916}[data-theme="notebook"] .plan b{font-family:Fraunces,serif}[data-theme="notebook"] .plan em{font:700 16px Fraunces,serif}
[data-theme="notebook"] .dcard>b,[data-theme="notebook"] .rule b,[data-theme="notebook"] .do li b{font-family:Fraunces,serif;font-weight:700}
[data-theme="notebook"] .dcard em,[data-theme="notebook"] .rule em,[data-theme="notebook"] .evr em,[data-theme="notebook"] .chk em{font-family:Fraunces,serif;font-size:16.5px}
[data-theme="notebook"] .stamp{display:inline-block;border:2.5px solid #C93026;color:#C93026;font:800 12.5px Inter;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border-radius:4px;transform:rotate(-1.8deg)}
[data-theme="notebook"] .stamp .who{color:#C93026}
[data-theme="notebook"] .hand,[data-theme="notebook"] .key{font:600 26px/1.15 Caveat,cursive;color:#C93026}
[data-theme="notebook"] .hand{margin:18px 0 0 6px;transform:rotate(-1.5deg)}
[data-theme="notebook"] .key{transform:rotate(-1deg);margin-left:4px}[data-theme="notebook"] .key span{font-family:Inter;transform:none}
[data-theme="notebook"] .rkey{font:600 24px Caveat,cursive;color:#C93026}
[data-theme="notebook"] .clock b#clk{font:900 66px Fraunces,serif;letter-spacing:-2px}
[data-theme="notebook"] .goal b{font:italic 700 18px Fraunces,serif;letter-spacing:0;text-transform:none}
[data-theme="notebook"] .cw{border:1.5px solid #1A1916}
[data-theme="notebook"] .btn.pri{border-radius:10px}

/* =============================== HARDWOOD =============================== */
[data-theme="hardwood"]{
  --bg:#0B261F;--barbg:rgba(11,38,31,.86);--ink:#F6EEDC;--ink2:#CFDAD2;--dim:#9DB5A8;--acc:#E8C277;--acc2:#E8C277;--accsoft:rgba(232,194,119,.14);
  --card:rgba(246,238,220,.055);--chip:rgba(246,238,220,.09);--line:rgba(246,238,220,.10);--line2:rgba(232,194,119,.4);--mark:rgba(232,194,119,.25);
  --pri:linear-gradient(180deg,#F3D79C,#D9A752);--prink:#0E3328;--prish:0 8px 20px rgba(217,167,82,.22);--r:14px;--rl:20px;--rc:18px;--ok:#3FA36B;--mid:#C99A3E;--warn:#E26A3B;
  --hotbg:#F6EEDC;--hotink:#0E3328;--hotnum:#B4471D;--courtsh:0 14px 30px rgba(0,0,0,.4),0 0 0 2px rgba(232,194,119,.32);--h2:40px;
  --floor:#D8B282;--paint:rgba(14,51,40,.16);--cline:rgba(255,248,234,.92);--clw:3;--rim:#B4471D;--x:#0E3328;--xline:#E8C277;--xtext:#F6EEDC;--o:#0E3328;--ofill:#F6EEDC;--otext:#0E3328;
  --cut:#FFF8EA;--pass:#FFF8EA;--ball:#B4471D;--zonef:rgba(180,71,29,.14);--tokfont:Archivo,sans-serif}
[data-theme="hardwood"] body{background:radial-gradient(90% 50% at 100% 0%,rgba(232,194,119,.16),transparent 60%),linear-gradient(175deg,#12392E 0%,#0B261F 50%,#071B15 100%) fixed}
[data-theme="hardwood"] .bar{border-bottom:1px solid rgba(232,194,119,.18)}
[data-theme="hardwood"] .pre{font:800 11px Inter;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);margin-top:14px}
[data-theme="hardwood"] .hero{font:900 60px/.88 Archivo,sans-serif;text-transform:uppercase;letter-spacing:-1.5px;margin-top:8px}[data-theme="hardwood"] .hero span{color:var(--acc)}
[data-theme="hardwood"] .title{font:900 40px/.95 Archivo,sans-serif;text-transform:uppercase;letter-spacing:-.8px}[data-theme="hardwood"] .title.sm{font-size:36px}
[data-theme="hardwood"] .next{background:linear-gradient(160deg,rgba(246,238,220,.10),rgba(246,238,220,.03));border-color:rgba(232,194,119,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
[data-theme="hardwood"] .next h2{font:800 25px Archivo,sans-serif}
[data-theme="hardwood"] .stats{border-top:1px solid rgba(232,194,119,.3);border-bottom:1px solid rgba(232,194,119,.3)}[data-theme="hardwood"] .stats div+div{border-left:1px solid rgba(232,194,119,.3);padding-left:14px}[data-theme="hardwood"] .stats b{font:900 30px Archivo,sans-serif}
[data-theme="hardwood"] .idx b,[data-theme="hardwood"] .dcard>b,[data-theme="hardwood"] .plan b{font-family:Archivo,sans-serif;color:var(--acc)}
[data-theme="hardwood"] .rule b,[data-theme="hardwood"] .do li b{font-family:Archivo,sans-serif;font-weight:900}
[data-theme="hardwood"] .stamp{border-left:3px solid var(--acc);padding:4px 0 4px 12px;font-weight:800;font-size:16px}
[data-theme="hardwood"] .key{border-left:3px solid var(--acc);padding:4px 0 4px 12px;font-weight:700;font-size:16px}
[data-theme="hardwood"] .rkey{color:var(--acc)}
[data-theme="hardwood"] .clock{background:linear-gradient(160deg,rgba(246,238,220,.10),rgba(246,238,220,.03));border-color:rgba(232,194,119,.3)}
[data-theme="hardwood"] .clock b#clk{font:900 64px Archivo,sans-serif;color:var(--acc)}[data-theme="hardwood"] .clock b#clk.over{color:var(--warn)}
[data-theme="hardwood"] .court .pl.p0{fill:rgba(120,70,20,.07)}[data-theme="hardwood"] .court .pl.p1{fill:rgba(255,240,210,.06)}[data-theme="hardwood"] .court .pl.p2{fill:rgba(90,50,10,.04)}
[data-theme="hardwood"] .court .pl{stroke:rgba(90,50,15,.12);stroke-width:1}
[data-theme="hardwood"] .court .mid{fill:#0E3328}
[data-theme="hardwood"] .dcard .mini{box-shadow:0 0 0 1px rgba(232,194,119,.3)}

/* a wider screen: the drill's diagram and its words side by side */
@media (min-width:1000px){
  #app{max-width:1080px}
  .pg.drill .dgrid>div{display:grid;grid-template-columns:1.15fr 1fr;gap:0 28px;align-items:start}
  .pg.drill .dgrid>div>figure,.pg.drill .dgrid>div>.steps-d,.pg.drill .dgrid>div>.legend{grid-column:1}
  .pg.drill .dgrid>div>:not(figure):not(.steps-d):not(.legend){grid-column:2}
  .pg.home,.pg.sess,.pg.match,.pg.ev,.pg.names,.pg.run{max-width:620px;margin:0 auto}
}
/* hardwood: the hero fits a phone; the legend's dark-green marks get a gold edge so they show on the dark page */
[data-theme="hardwood"] .hero{font-size:clamp(40px,13.2vw,58px)}
[data-theme="hardwood"] .legend .lx{background:#0E3328;box-shadow:0 0 0 1.5px #E8C277}[data-theme="hardwood"] .legend .lmv{background:#E8C277}[data-theme="hardwood"] .legend .lh{border-top-color:#E8C277}[data-theme="hardwood"] .legend .lo{border-color:#F6EEDC}
/* long Swedish words in a title must never push the page sideways */
.title,.hero{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
[data-theme="hardwood"] .title{font-size:clamp(28px,9.4vw,40px)}[data-theme="hardwood"] .title.sm{font-size:clamp(26px,8.6vw,36px)}
[data-theme="notebook"] .title{font-size:clamp(32px,10.6vw,46px)}[data-theme="notebook"] .title.sm{font-size:clamp(30px,9.6vw,40px)}

/* =============================== the diagram player =============================== */
.cw .stage{position:relative}
.aplay{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px 0 11px;border-radius:999px;font:800 13.5px Inter;letter-spacing:.02em;background:var(--apbg);color:var(--apink);box-shadow:var(--apsh)}
.aplay svg{width:17px;height:17px}.aplay svg .f{fill:currentColor}
.cw.started .aplay{display:none}
.actl{display:flex;align-items:center;gap:8px;padding:9px 10px 0;background:var(--card)}
.actl[hidden],.asay[hidden]{display:none}
.actl .ab{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--chip);font:800 12px Inter}
.actl .ab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.actl .ab svg .f{fill:currentColor;stroke:none}
.actl .ab[data-act="atog"]{background:var(--apbg);color:var(--apink)}
.abar{flex:1;display:flex;gap:4px;height:36px;align-items:center;cursor:pointer;touch-action:none}
.abar i{position:relative;height:6px;border-radius:3px;background:var(--line);overflow:hidden}.abar i u{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc);border-radius:3px}
.abar i.on{height:8px}
.asay{display:flex;gap:10px;align-items:baseline;padding:8px 12px 11px;background:var(--card);min-height:52px}
.asay b{flex:none;font:800 11px Inter;letter-spacing:.12em;color:var(--acc);min-width:26px}
.asay span{font-weight:700;font-size:15px;line-height:1.35;color:var(--ink)}
.cw.started figcaption{display:none}
.cw.started.ended figcaption{display:block;border-top:1px solid var(--line)}
.court .glow{fill:var(--acc);fill-opacity:.16;stroke:var(--acc);stroke-width:2.5;stroke-dasharray:7 6}
.court .guide{stroke:var(--acc);stroke-width:2.5;stroke-dasharray:3 6;stroke-linecap:round;opacity:.9}
.court .ring{fill:none;stroke:var(--acc);stroke-width:3.5}
.court .bub path{fill:var(--bubf);stroke:var(--bubs);stroke-width:1.5}.court .bub path.tip{stroke:none}
.court .bub text{font:900 12.5px Inter;letter-spacing:.04em;fill:var(--bubt)}
.court .ball.fly{filter:drop-shadow(0 3px 2px rgba(0,0,0,.28))}
[data-theme="notebook"]{--apbg:#1A1916;--apink:#FBF7EE;--apsh:2px 2px 0 rgba(201,48,38,.85);--bubf:#C93026;--bubs:#C93026;--bubt:#FFFDF7}
[data-theme="notebook"] .asay span{font:600 23px/1.1 Caveat,cursive;color:#C93026}
[data-theme="notebook"] .asay{align-items:center}
[data-theme="notebook"] .court .glow{fill:#C93026;stroke:#C93026}[data-theme="notebook"] .court .guide,[data-theme="notebook"] .court .ring{stroke:#C93026}
[data-theme="notebook"] .abar i u{background:#C93026}
[data-theme="hardwood"]{--apbg:linear-gradient(180deg,#F3D79C,#D9A752);--apink:#0E3328;--apsh:0 6px 16px rgba(0,0,0,.35);--bubf:#0E3328;--bubs:#E8C277;--bubt:#F3D79C}
[data-theme="hardwood"] .actl .ab[data-act="atog"]{background:linear-gradient(180deg,#F3D79C,#D9A752)}
[data-theme="hardwood"] .court .glow{fill:#0E3328;fill-opacity:.2;stroke:#0E3328}[data-theme="hardwood"] .court .guide,[data-theme="hardwood"] .court .ring{stroke:#0E3328}