/* Trainlog AI dark theme. Keeps the five icon colors. Linked from index.html; see theme-dark.js. */
/* ===== Dark theme (icon colors kept) ===== */
:root{color-scheme:dark;--bg:#0d1319;--surface:#151d26;--s2:#1c2631;--tile:#1c2631;--line:#2a3542;--grid:#223040;--ink:#e6edf3;--muted:#91a0b1;
--link:#5cbcef;--btn:#0077b6;--err:#ff6b7d;--blue:#0085ca;--green:#009f3d;--red:#e4002b;--yellow:#f4c300;--black:#111;--orange:#f4c300;
--fit:#0085ca;--fat:#e4002b;--form:#f4c300;--swim:#0085ca;--bike:#009f3d;--run:#e4002b;--yoga:#f4c300;--str:#d7dde4;--rest:#6c7a8a;
--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
body,#app{background:var(--bg);color:var(--ink)}#auth{background:var(--surface)}
.hdr{background:var(--stripes) left bottom/100% 3px no-repeat,var(--surface);color:var(--ink)}.logo i{color:var(--link)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:none}
.h{color:var(--ink)}svg text{fill:var(--muted);font-size:12px}
.btn{background:var(--s2);border-color:var(--line);color:var(--ink);border-radius:8px}.btn.pri{background:var(--btn);border-color:var(--btn);color:#fff}
.f input,.f select,.inp,.pw input,textarea{background:#0f161e!important;border-color:var(--line)!important;color:var(--ink)!important;border-radius:8px}
.or::before,.or::after{background:var(--line)}.sw{background:#3a4654}
.quote{color:var(--ink)}
.seg{background:var(--s2);border-radius:8px;padding:3px;gap:2px}.seg button{border-radius:6px;color:var(--muted);font-weight:600}.seg button.on{background:var(--btn);color:#fff}
.seg.mini button{padding:7px 10px;font-size:13px;flex:none;min-width:40px}
.sumbox{background:var(--s2)}.dpct{fill:var(--ink)!important}
.tile{background:var(--s2);border-color:var(--line)}.tile .tv{color:var(--ink)}
.tabs{background:var(--surface);border:1px solid var(--line);box-shadow:none}.tabs button{color:var(--muted);border-bottom-color:var(--line)}.tabs button[aria-current]{color:var(--ink);border-bottom-color:var(--blue)}
.ib{background:var(--s2);border-color:var(--line);color:var(--ink)}
.day{background:var(--surface);border:1px solid var(--line);box-shadow:none}.day.today{outline:2px solid var(--yellow)}.dl span{color:var(--ink)}
.chip{background:color-mix(in srgb,var(--c) 20%,var(--surface));color:var(--ink);border-left-width:3px}.chip.plan{background:transparent}
.ra{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c);box-shadow:none;color:var(--ink)}
.promo{background:var(--s2);color:var(--ink)}.promo span{color:var(--muted)}.promo i{color:var(--link)}
.slot{background:var(--s2);border-color:var(--line);color:var(--ink)}.slot.empty{background:var(--s2);color:var(--link)}.grip{background-color:var(--s2);border-color:var(--line)}
.msg.ai{background:var(--s2);border-color:var(--line)}
nav{background:var(--surface)}nav button{color:var(--muted)}nav button[aria-current]{color:var(--link)}
dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line)}dialog::backdrop{background:#000b}
#toast{background:#2a3644;color:var(--ink)}
.avatar{background:var(--btn)}.tip{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.coachbtn{background:var(--surface);border-color:var(--line);color:var(--ink)}.coachbtn.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 14%,var(--surface))}
.agentbox{background:var(--s2)}.agentbox b{color:var(--link)}.en{background:var(--s2)}.en b{color:var(--muted)}.en.alert2{background:#3a1820}
.hissue{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--yellow);box-shadow:none}
.sh{color:var(--muted)}.safe{background:#3a3010;color:#ffd84d}.warn{color:#ffd84d}.adj{color:var(--yellow)}
.ex{background:var(--surface);border-color:var(--line)}
.ph-Recovery{--pc:#d7dde4}.rb.B{color:#fff}
details code,.osteps code{background:var(--s2)}.mchk label{border-color:var(--line)}
.step>b,.dose b,.rngv{color:var(--link)}
/* chart parts */
.chead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}.chead .h{margin:0}
.row{gap:24px;margin:6px 0 10px}.row b{font-size:26px;font-weight:700}.row span{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.cfit{color:#3fb0ec}.cfat{color:#ff5a72}.cform{color:var(--yellow)}
.ld{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;margin-right:6px;vertical-align:baseline}
.row span .ld{margin-right:0}
#fit,#wload{outline:none;cursor:crosshair}#fit:focus-visible,#wload:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:6px}
.legend{color:var(--muted);font-size:13px}
.wlro .wlparts{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;flex:1 1 200px}.wlp{font-size:13px;color:var(--muted)}
.drawin{stroke-dasharray:1;stroke-dashoffset:1;animation:drawin 1s ease-out forwards}.fadein{animation:fadein 1s ease-out}
.wb rect{transform-box:fill-box;transform-origin:bottom;animation:grow .5s ease-out both;animation-delay:var(--d)}
@keyframes drawin{to{stroke-dashoffset:0}}@keyframes fadein{from{opacity:0}}@keyframes grow{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.drawin,.fadein,.wb rect{animation:none;stroke-dashoffset:0}}
/* calendar */
.calwrap{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}.calwrap .card{margin:0}.calwrap{margin-bottom:12px}
.calnav{display:flex;align-items:center;gap:8px}.calnav b{min-width:120px;text-align:center;font-size:14px}
.calg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(54px,.9fr);gap:4px}
.cdh{font-size:12px;color:var(--muted);padding:2px 4px}
.cday{background:var(--bg);border:1px solid var(--line);border-radius:8px;min-height:72px;padding:4px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cday.today{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}.cdn{font-size:12px;color:var(--muted);padding:0 2px}
.cday.today .cdn{color:var(--yellow);font-weight:700}
.cchip{all:unset;box-sizing:border-box;cursor:pointer;display:block;background:color-mix(in srgb,var(--c) 18%,var(--surface));border-left:3px solid var(--c);border-radius:5px;padding:3px 5px;min-width:0}
.cchip b{display:block;font-size:12px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cchip small{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cchip.plan{background:transparent;border:1px dashed var(--c);border-left:3px solid var(--c)}
.cchip.sel{box-shadow:0 0 0 2px var(--ink)}.cchip:focus-visible{outline:2px solid var(--link)}
.cwk{background:var(--s2);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:0}.cwk b{font-size:14px}.cwk span{font-size:11px;color:var(--muted)}
.dht{font-size:20px;margin:0 0 4px}.dh2{font-size:15px;margin:16px 0 8px}
.dstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:14px}.dstats b{display:block;font-size:24px}.dstats span{font-size:13px;color:var(--muted)}
.czbar{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px}.czbar i{display:block;min-width:3px}
.czleg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);margin-top:8px}

/* new workout cards etc. in dark */
.stats div{background:var(--s2)!important}.wi b{color:var(--ink);background:var(--s2)}.cb{background:var(--s2);color:var(--ink);border-color:var(--line)}
.cb.on.adjusted{color:#111}.mist,.mistl{color:#ff8a9a}.sh2 span,.en.pn small,.agentbox small{color:var(--muted)}
.agentbox.master,.en.pn.triathlon_coach{border-left-color:var(--str)}.st-adjusted{color:var(--yellow)}.gear span{border-color:var(--line)}
.pmedit input{background:#0f161e;color:var(--ink)}#lnotes{background:#0f161e;color:var(--ink)}
@media (max-width:699px){.cday{min-height:52px;padding:3px}.cchip{padding:0;height:8px;border-left:0;background:var(--c)}.cchip.plan{background:transparent;border:1.5px dashed var(--c);height:8px}
  .cchip b,.cchip small{display:none}.cwk{padding:4px}.cwk b{font-size:12px}.cwk span.note{display:none}.calg{gap:3px;grid-template-columns:repeat(7,minmax(0,1fr)) 48px}.row{gap:16px}.row b{font-size:22px}}
@media (min-width:900px){
  #side{background:var(--surface);border-right:1px solid var(--line)}#side button{color:var(--ink)}#side button:hover{background:var(--s2)}#side button.on{background:var(--btn);color:#fff}
  .sb-user{background:var(--s2)}.sb-ver{color:var(--muted)}.hdr{background:var(--bg)}
  .page,.hero .card,.tabs{max-width:1200px}
  .calwrap{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
}

/* things the page sets inline */
.badge[style*="--str"],.badge[style*="--yoga"]{color:#111!important}
#donut circle[stroke="#dcdcdc"]{stroke:var(--line)}
#curve:empty{display:none}
#fit text,#wload text{font-size:12px}

/* ===== Hybrid layer: one background, glass cards, yellow active tab (design session, 2026-10-18) ===== */
html,body{background:radial-gradient(120% 50% at 0% 0%,rgba(0,133,202,.40),rgba(0,133,202,0) 62%) fixed,radial-gradient(90% 40% at 100% 100%,rgba(244,195,0,.14),rgba(244,195,0,0) 60%) fixed,#0d1319;min-height:100%}
#app{background:transparent}
.card,.tip,.hissue,.promo,.day,.ra,.calwrap .card{background:rgba(21,29,38,.72);border:1px solid rgba(230,237,243,.10);border-radius:18px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ra{border-left:3px solid var(--c)}.hissue{border-left:5px solid var(--yellow)}
.hdr{background:rgba(13,19,25,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.h{font-family:"Barlow Condensed",Barlow,system-ui,sans-serif;font-weight:800;letter-spacing:.3px}
.btn,.ib,.seg{border-radius:12px}.seg button{border-radius:9px}
.btn.pri,.seg button.on{background:#0085ca;border-color:#0085ca}
nav{background:rgba(13,19,25,.92);border-top:1px solid rgba(230,237,243,.08);border-image:none;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
nav button{color:var(--muted);font-weight:600}
nav button svg{padding:3px 14px;border-radius:16px;box-sizing:content-box}
nav button[aria-current]{color:var(--ink);font-weight:800}nav button[aria-current] svg{background:#f4c300;color:#0d1319}
@media (min-width:900px){#side{background:rgba(13,19,25,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  #side button{border-radius:12px;margin:2px 8px}#side button.on{background:#f4c300;color:#0d1319}.hdr{background:transparent}}
/* ===== Theme system: 20 personal themes (design session, 2026-10-18) =====
   Set <html data-theme="KEY">. No attribute = the original Coach theme above.
   Keys: stealth, olympic, ocean, solar, volcanic, alpine, cyber, nordic, desert, titanium, carbon, velocity, glacier, synthwave, matcha, ironman, aurora, sandstorm, indigo, sunset, lagoon, sakura, arctic, mint, forest, royal, berry, copper, lava, monaco.
   Sport colors (swim blue, bike green, run red, yoga yellow) and chart colors stay the same in every theme so data reads the same everywhere. */
html[data-theme="stealth"]{color-scheme:dark;--accent-primary:#00F2FE;--accent-secondary:#FF0844;--bg-primary:#0a0d12;--bg-card:rgba(20,26,34,0.78);--text-main:#e8edf3;--text-muted:#8f949b;--bg:#0a0d12;--surface:#141a22;--s2:#21272f;--tile:#21272f;--line:#32383f;--grid:#252b33;--ink:#e8edf3;--muted:#8f949b;--btn:#00F2FE;--on-btn:#000000;--link:#00F2FE;--pill:#FF0844;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(0,242,254,0.3);--glow2:rgba(255,8,68,0.14);--nav-bg:rgba(10,13,18,0.92);--input-bg:#0a0d12;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="olympic"]{color-scheme:dark;--accent-primary:#F5A623;--accent-secondary:#FFFFFF;--bg-primary:#121212;--bg-card:rgba(29,29,31,0.78);--text-main:#e8edf3;--text-muted:#93969a;--bg:#121212;--surface:#1d1d1f;--s2:#29292c;--tile:#29292c;--line:#393a3d;--grid:#2d2e30;--ink:#e8edf3;--muted:#93969a;--btn:#F5A623;--on-btn:#000000;--link:#F5A623;--pill:#FFFFFF;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(245,166,35,0.3);--glow2:rgba(255,255,255,0.14);--nav-bg:rgba(18,18,18,0.92);--input-bg:#121212;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="ocean"]{color-scheme:dark;--accent-primary:#00C6FF;--accent-secondary:#0072FF;--bg-primary:#03142a;--bg-card:rgba(11,34,64,0.78);--text-main:#e8edf3;--text-muted:#8b98a8;--bg:#03142a;--surface:#0b2240;--s2:#182e4b;--tile:#182e4b;--line:#2a3e59;--grid:#1d324e;--ink:#e8edf3;--muted:#8b98a8;--btn:#00C6FF;--on-btn:#000000;--link:#00C6FF;--pill:#0072FF;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(0,198,255,0.3);--glow2:rgba(0,114,255,0.14);--nav-bg:rgba(3,20,42,0.92);--input-bg:#03142a;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="solar"]{color-scheme:dark;--accent-primary:#A8FF00;--accent-secondary:#FF512F;--bg-primary:#050806;--bg-card:rgba(14,26,19,0.78);--text-main:#e8edf3;--text-muted:#8c9495;--bg:#050806;--surface:#0e1a13;--s2:#1b2720;--tile:#1b2720;--line:#2d3832;--grid:#1f2b25;--ink:#e8edf3;--muted:#8c9495;--btn:#A8FF00;--on-btn:#000000;--link:#A8FF00;--pill:#FF512F;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(168,255,0,0.3);--glow2:rgba(255,81,47,0.14);--nav-bg:rgba(5,8,6,0.92);--input-bg:#050806;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="volcanic"]{color-scheme:dark;--accent-primary:#FF416C;--accent-secondary:#FF4B2B;--bg-primary:#101012;--bg-card:rgba(28,28,32,0.78);--text-main:#e8edf3;--text-muted:#92959a;--bg:#101012;--surface:#1c1c20;--s2:#28292d;--tile:#28292d;--line:#39393e;--grid:#2c2d31;--ink:#e8edf3;--muted:#92959a;--btn:#FF416C;--on-btn:#000000;--link:#ff547b;--pill:#FF4B2B;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(255,65,108,0.3);--glow2:rgba(255,75,43,0.14);--nav-bg:rgba(16,16,18,0.92);--input-bg:#101012;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="alpine"]{color-scheme:dark;--accent-primary:#11998E;--accent-secondary:#38EF7D;--bg-primary:#0d1512;--bg-card:rgba(23,35,30,0.78);--text-main:#e8edf3;--text-muted:#90989a;--bg:#0d1512;--surface:#17231e;--s2:#242f2b;--tile:#242f2b;--line:#343f3c;--grid:#28332f;--ink:#e8edf3;--muted:#90989a;--btn:#11998E;--on-btn:#000000;--link:#2fa69c;--pill:#38EF7D;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(17,153,142,0.3);--glow2:rgba(56,239,125,0.14);--nav-bg:rgba(13,21,18,0.92);--input-bg:#0d1512;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="cyber"]{color-scheme:dark;--accent-primary:#8A2BE2;--accent-secondary:#E056FD;--bg-primary:#0d0a17;--bg-card:rgba(25,20,39,0.78);--text-main:#e8edf3;--text-muted:#91929d;--bg:#0d0a17;--surface:#191427;--s2:#252133;--tile:#252133;--line:#363244;--grid:#2a2537;--ink:#e8edf3;--muted:#91929d;--btn:#8A2BE2;--on-btn:#ffffff;--link:#b070eb;--pill:#E056FD;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(138,43,226,0.3);--glow2:rgba(224,86,253,0.14);--nav-bg:rgba(13,10,23,0.92);--input-bg:#0d0a17;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="nordic"]{color-scheme:light;--accent-primary:#1E3A8A;--accent-secondary:#EF4444;--bg-primary:#f6f7f9;--bg-card:rgba(255,255,255,0.78);--text-main:#0f172a;--text-muted:#666973;--bg:#f6f7f9;--surface:#ffffff;--s2:#f3f3f4;--tile:#f3f3f4;--line:#dddfe1;--grid:#ececee;--ink:#0f172a;--muted:#666973;--btn:#1E3A8A;--on-btn:#ffffff;--link:#1E3A8A;--pill:#EF4444;--on-pill:#000000;--str:#1f2937;--glow1:rgba(30,58,138,0.3);--glow2:rgba(239,68,68,0.14);--nav-bg:rgba(246,247,249,0.92);--input-bg:#ffffff;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#1f2937 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="desert"]{color-scheme:dark;--accent-primary:#F59E0B;--accent-secondary:#F43F5E;--bg-primary:#1a1210;--bg-card:rgba(42,30,26,0.78);--text-main:#e8edf3;--text-muted:#989698;--bg:#1a1210;--surface:#2a1e1a;--s2:#352a27;--tile:#352a27;--line:#453b38;--grid:#392f2b;--ink:#e8edf3;--muted:#989698;--btn:#F59E0B;--on-btn:#000000;--link:#F59E0B;--pill:#F43F5E;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(245,158,11,0.3);--glow2:rgba(244,63,94,0.14);--nav-bg:rgba(26,18,16,0.92);--input-bg:#1a1210;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="titanium"]{color-scheme:dark;--accent-primary:#E2E8F0;--accent-secondary:#FFFFFF;--bg-primary:#16181c;--bg-card:rgba(34,37,43,0.78);--text-main:#e8edf3;--text-muted:#989ca1;--bg:#16181c;--surface:#22252b;--s2:#2e3137;--tile:#2e3137;--line:#3e4147;--grid:#32353b;--ink:#e8edf3;--muted:#989ca1;--btn:#E2E8F0;--on-btn:#000000;--link:#E2E8F0;--pill:#FFFFFF;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(226,232,240,0.3);--glow2:rgba(255,255,255,0.14);--nav-bg:rgba(22,24,28,0.92);--input-bg:#16181c;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="carbon"]{color-scheme:dark;--accent-primary:#FFFFFF;--accent-secondary:#D1D5DB;--bg-primary:#000000;--bg-card:rgba(17,17,17,0.78);--text-main:#e8edf3;--text-muted:#8e9194;--bg:#000000;--surface:#111111;--s2:#1e1e1f;--tile:#1e1e1f;--line:#2f3031;--grid:#222323;--ink:#e8edf3;--muted:#8e9194;--btn:#FFFFFF;--on-btn:#000000;--link:#FFFFFF;--pill:#D1D5DB;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(255,255,255,0.3);--glow2:rgba(209,213,219,0.14);--nav-bg:rgba(0,0,0,0.92);--input-bg:#000000;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="velocity"]{color-scheme:dark;--accent-primary:#FF6B00;--accent-secondary:#FFD600;--bg-primary:#121314;--bg-card:rgba(31,33,36,0.78);--text-main:#e8edf3;--text-muted:#94979c;--bg:#121314;--surface:#1f2124;--s2:#2b2d30;--tile:#2b2d30;--line:#3b3e41;--grid:#2f3135;--ink:#e8edf3;--muted:#94979c;--btn:#FF6B00;--on-btn:#000000;--link:#FF6B00;--pill:#FFD600;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(255,107,0,0.3);--glow2:rgba(255,214,0,0.14);--nav-bg:rgba(18,19,20,0.92);--input-bg:#121314;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="glacier"]{color-scheme:dark;--accent-primary:#38BDF8;--accent-secondary:#818CF8;--bg-primary:#0a1220;--bg-card:rgba(19,32,54,0.78);--text-main:#e8edf3;--text-muted:#8f97a4;--bg:#0a1220;--surface:#132036;--s2:#202c41;--tile:#202c41;--line:#313d50;--grid:#243045;--ink:#e8edf3;--muted:#8f97a4;--btn:#38BDF8;--on-btn:#000000;--link:#38BDF8;--pill:#818CF8;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(56,189,248,0.3);--glow2:rgba(129,140,248,0.14);--nav-bg:rgba(10,18,32,0.92);--input-bg:#0a1220;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="synthwave"]{color-scheme:dark;--accent-primary:#FF007F;--accent-secondary:#00E5FF;--bg-primary:#120724;--bg-card:rgba(31,15,56,0.78);--text-main:#e8edf3;--text-muted:#9490a4;--bg:#120724;--surface:#1f0f38;--s2:#2b1c43;--tile:#2b1c43;--line:#3b2e52;--grid:#2f2147;--ink:#e8edf3;--muted:#9490a4;--btn:#FF007F;--on-btn:#000000;--link:#ff399c;--pill:#00E5FF;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(255,0,127,0.3);--glow2:rgba(0,229,255,0.14);--nav-bg:rgba(18,7,36,0.92);--input-bg:#120724;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="matcha"]{color-scheme:light;--accent-primary:#84CC16;--accent-secondary:#10B981;--bg-primary:#f4f6f1;--bg-card:rgba(255,255,255,0.78);--text-main:#0f172a;--text-muted:#666973;--bg:#f4f6f1;--surface:#ffffff;--s2:#f3f3f4;--tile:#f3f3f4;--line:#dddfe1;--grid:#ececee;--ink:#0f172a;--muted:#666973;--btn:#84CC16;--on-btn:#000000;--link:#4e7a0d;--pill:#10B981;--on-pill:#000000;--str:#1f2937;--glow1:rgba(132,204,22,0.3);--glow2:rgba(16,185,129,0.14);--nav-bg:rgba(244,246,241,0.92);--input-bg:#ffffff;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#1f2937 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="ironman"]{color-scheme:dark;--accent-primary:#DC2626;--accent-secondary:#9CA3AF;--bg-primary:#0c0c0c;--bg-card:rgba(26,26,27,0.78);--text-main:#e8edf3;--text-muted:#919498;--bg:#0c0c0c;--surface:#1a1a1b;--s2:#262728;--tile:#262728;--line:#373839;--grid:#2a2b2c;--ink:#e8edf3;--muted:#919498;--btn:#DC2626;--on-btn:#ffffff;--link:#e66767;--pill:#9CA3AF;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(220,38,38,0.3);--glow2:rgba(156,163,175,0.14);--nav-bg:rgba(12,12,12,0.92);--input-bg:#0c0c0c;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="aurora"]{color-scheme:dark;--accent-primary:#14B8A6;--accent-secondary:#A855F7;--bg-primary:#060a18;--bg-card:rgba(15,22,48,0.78);--text-main:#e8edf3;--text-muted:#8d93a1;--bg:#060a18;--surface:#0f1630;--s2:#1c233c;--tile:#1c233c;--line:#2d344b;--grid:#202740;--ink:#e8edf3;--muted:#8d93a1;--btn:#14B8A6;--on-btn:#000000;--link:#14B8A6;--pill:#A855F7;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(20,184,166,0.3);--glow2:rgba(168,85,247,0.14);--nav-bg:rgba(6,10,24,0.92);--input-bg:#060a18;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="sandstorm"]{color-scheme:dark;--accent-primary:#D97706;--accent-secondary:#C2410C;--bg-primary:#1a1611;--bg-card:rgba(41,35,27,0.78);--text-main:#e8edf3;--text-muted:#9b9b9b;--bg:#1a1611;--surface:#29231b;--s2:#342f28;--tile:#342f28;--line:#443f39;--grid:#38332c;--ink:#e8edf3;--muted:#9b9b9b;--btn:#D97706;--on-btn:#000000;--link:#dd851f;--pill:#C2410C;--on-pill:#ffffff;--str:#d7dde4;--glow1:rgba(217,119,6,0.3);--glow2:rgba(194,65,12,0.14);--nav-bg:rgba(26,22,17,0.92);--input-bg:#1a1611;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="indigo"]{color-scheme:dark;--accent-primary:#6366F1;--accent-secondary:#8B5CF6;--bg-primary:#0b0e1a;--bg-card:rgba(21,26,44,0.78);--text-main:#e8edf3;--text-muted:#8f949f;--bg:#0b0e1a;--surface:#151a2c;--s2:#222738;--tile:#222738;--line:#333848;--grid:#262b3c;--ink:#e8edf3;--muted:#8f949f;--btn:#6366F1;--on-btn:#000000;--link:#8486f4;--pill:#8B5CF6;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(99,102,241,0.3);--glow2:rgba(139,92,246,0.14);--nav-bg:rgba(11,14,26,0.92);--input-bg:#0b0e1a;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="sunset"]{color-scheme:dark;--accent-primary:#FB7185;--accent-secondary:#F97316;--bg-primary:#140f1c;--bg-card:rgba(34,26,46,0.78);--text-main:#e8edf3;--text-muted:#9594a0;--bg:#140f1c;--surface:#221a2e;--s2:#2e273a;--tile:#2e273a;--line:#3e384a;--grid:#322b3e;--ink:#e8edf3;--muted:#9594a0;--btn:#FB7185;--on-btn:#000000;--link:#FB7185;--pill:#F97316;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(251,113,133,0.3);--glow2:rgba(249,115,22,0.14);--nav-bg:rgba(20,15,28,0.92);--input-bg:#140f1c;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="lagoon"]{color-scheme:light;--accent-primary:#0E7490;--accent-secondary:#F97316;--bg-primary:#f0f9fa;--bg-card:rgba(255,255,255,0.78);--text-main:#0f172a;--text-muted:#666973;--bg:#f0f9fa;--surface:#ffffff;--s2:#f3f3f4;--tile:#f3f3f4;--line:#dddfe1;--grid:#ececee;--ink:#0f172a;--muted:#666973;--btn:#0E7490;--on-btn:#ffffff;--link:#0E7490;--pill:#F97316;--on-pill:#000000;--str:#1f2937;--glow1:rgba(14,116,144,0.3);--glow2:rgba(249,115,22,0.14);--nav-bg:rgba(240,249,250,0.92);--input-bg:#ffffff;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#1f2937 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="sakura"]{color-scheme:light;--accent-primary:#DB2777;--accent-secondary:#7C3AED;--bg-primary:#fdf4f8;--bg-card:rgba(255,255,255,0.78);--text-main:#0f172a;--text-muted:#666973;--bg:#fdf4f8;--surface:#ffffff;--s2:#f3f3f4;--tile:#f3f3f4;--line:#dddfe1;--grid:#ececee;--ink:#0f172a;--muted:#666973;--btn:#DB2777;--on-btn:#ffffff;--link:#cb246e;--pill:#7C3AED;--on-pill:#ffffff;--str:#1f2937;--glow1:rgba(219,39,119,0.3);--glow2:rgba(124,58,237,0.14);--nav-bg:rgba(253,244,248,0.92);--input-bg:#ffffff;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#1f2937 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="arctic"]{color-scheme:light;--accent-primary:#0284C7;--accent-secondary:#475569;--bg-primary:#f1f5f9;--bg-card:rgba(255,255,255,0.78);--text-main:#0f172a;--text-muted:#666973;--bg:#f1f5f9;--surface:#ffffff;--s2:#f3f3f4;--tile:#f3f3f4;--line:#dddfe1;--grid:#ececee;--ink:#0f172a;--muted:#666973;--btn:#0284C7;--on-btn:#000000;--link:#0271ab;--pill:#475569;--on-pill:#ffffff;--str:#1f2937;--glow1:rgba(2,132,199,0.3);--glow2:rgba(71,85,105,0.14);--nav-bg:rgba(241,245,249,0.92);--input-bg:#ffffff;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#1f2937 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="mint"]{color-scheme:light;--accent-primary:#059669;--accent-secondary:#1E3A8A;--bg-primary:#f0fdf5;--bg-card:rgba(255,255,255,0.78);--text-main:#0f172a;--text-muted:#666974;--bg:#f0fdf5;--surface:#ffffff;--s2:#f3f3f4;--tile:#f3f3f4;--line:#dddfe1;--grid:#ececee;--ink:#0f172a;--muted:#666974;--btn:#059669;--on-btn:#000000;--link:#047d57;--pill:#1E3A8A;--on-pill:#ffffff;--str:#1f2937;--glow1:rgba(5,150,105,0.3);--glow2:rgba(30,58,138,0.14);--nav-bg:rgba(240,253,245,0.92);--input-bg:#ffffff;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#1f2937 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="forest"]{color-scheme:dark;--accent-primary:#65A30D;--accent-secondary:#EAB308;--bg-primary:#0b140c;--bg-card:rgba(21,34,22,0.78);--text-main:#e8edf3;--text-muted:#8f9896;--bg:#0b140c;--surface:#152216;--s2:#222e23;--tile:#222e23;--line:#333e35;--grid:#263228;--ink:#e8edf3;--muted:#8f9896;--btn:#65A30D;--on-btn:#000000;--link:#69a513;--pill:#EAB308;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(101,163,13,0.3);--glow2:rgba(234,179,8,0.14);--nav-bg:rgba(11,20,12,0.92);--input-bg:#0b140c;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="royal"]{color-scheme:dark;--accent-primary:#EAB308;--accent-secondary:#38BDF8;--bg-primary:#0a1128;--bg-card:rgba(18,28,61,0.78);--text-main:#e8edf3;--text-muted:#8e95a7;--bg:#0a1128;--surface:#121c3d;--s2:#1f2948;--tile:#1f2948;--line:#303956;--grid:#232d4c;--ink:#e8edf3;--muted:#8e95a7;--btn:#EAB308;--on-btn:#000000;--link:#EAB308;--pill:#38BDF8;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(234,179,8,0.3);--glow2:rgba(56,189,248,0.14);--nav-bg:rgba(10,17,40,0.92);--input-bg:#0a1128;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="berry"]{color-scheme:dark;--accent-primary:#E11D48;--accent-secondary:#C026D3;--bg-primary:#160812;--bg-card:rgba(37,16,30,0.78);--text-main:#e8edf3;--text-muted:#96909a;--bg:#160812;--surface:#25101e;--s2:#311d2b;--tile:#311d2b;--line:#402f3c;--grid:#35222f;--ink:#e8edf3;--muted:#96909a;--btn:#E11D48;--on-btn:#ffffff;--link:#e95c7b;--pill:#C026D3;--on-pill:#ffffff;--str:#d7dde4;--glow1:rgba(225,29,72,0.3);--glow2:rgba(192,38,211,0.14);--nav-bg:rgba(22,8,18,0.92);--input-bg:#160812;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="copper"]{color-scheme:dark;--accent-primary:#F97316;--accent-secondary:#14B8A6;--bg-primary:#111417;--bg-card:rgba(28,33,37,0.78);--text-main:#e8edf3;--text-muted:#92979c;--bg:#111417;--surface:#1c2125;--s2:#282d31;--tile:#282d31;--line:#393e42;--grid:#2c3135;--ink:#e8edf3;--muted:#92979c;--btn:#F97316;--on-btn:#000000;--link:#F97316;--pill:#14B8A6;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(249,115,22,0.3);--glow2:rgba(20,184,166,0.14);--nav-bg:rgba(17,20,23,0.92);--input-bg:#111417;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="lava"]{color-scheme:dark;--accent-primary:#F97316;--accent-secondary:#DB2777;--bg-primary:#1a0b14;--bg-card:rgba(42,19,34,0.78);--text-main:#e8edf3;--text-muted:#98919b;--bg:#1a0b14;--surface:#2a1322;--s2:#35202f;--tile:#35202f;--line:#45323f;--grid:#392433;--ink:#e8edf3;--muted:#98919b;--btn:#F97316;--on-btn:#000000;--link:#F97316;--pill:#DB2777;--on-pill:#ffffff;--str:#d7dde4;--glow1:rgba(249,115,22,0.3);--glow2:rgba(219,39,119,0.14);--nav-bg:rgba(26,11,20,0.92);--input-bg:#1a0b14;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
html[data-theme="monaco"]{color-scheme:dark;--accent-primary:#3B82F6;--accent-secondary:#EF4444;--bg-primary:#0b1220;--bg-card:rgba(20,31,53,0.78);--text-main:#e8edf3;--text-muted:#8f96a3;--bg:#0b1220;--surface:#141f35;--s2:#212b40;--tile:#212b40;--line:#323c50;--grid:#252f44;--ink:#e8edf3;--muted:#8f96a3;--btn:#3B82F6;--on-btn:#000000;--link:#5894f7;--pill:#EF4444;--on-pill:#000000;--str:#d7dde4;--glow1:rgba(59,130,246,0.3);--glow2:rgba(239,68,68,0.14);--nav-bg:rgba(11,18,32,0.92);--input-bg:#0b1220;--stripes:linear-gradient(90deg,#0085ca 0 20%,#f4c300 20% 40%,#d7dde4 40% 60%,#009f3d 60% 80%,#e4002b 80%)}
/* shared rules for every theme (use the tokens above) */
html[data-theme],html[data-theme] body{background:radial-gradient(120% 50% at 0% 0%,var(--glow1),transparent 62%) fixed,radial-gradient(90% 40% at 100% 100%,var(--glow2),transparent 60%) fixed,var(--bg)!important;color:var(--ink)}
html[data-theme] .card,html[data-theme] .tip,html[data-theme] .hissue,html[data-theme] .promo,html[data-theme] .day,html[data-theme] .ra,html[data-theme] .calwrap .card,html[data-theme] dialog{background:var(--bg-card);border-color:var(--line);color:var(--ink)}
html[data-theme] .hissue{border-left-color:var(--accent-secondary)}
html[data-theme] .hdr,html[data-theme] nav,html[data-theme] #side{background:var(--nav-bg);border-color:var(--line)}
html[data-theme] .btn{background:var(--s2);border-color:var(--line);color:var(--ink)}
html[data-theme] .btn.pri,html[data-theme] .seg button.on,html[data-theme] .wtile,html[data-theme] .msg.me,html[data-theme] .mchk label:has(input:checked){background:var(--btn);border-color:var(--btn);color:var(--on-btn)}
html[data-theme] .f input,html[data-theme] .f select,html[data-theme] .inp,html[data-theme] .pw input,html[data-theme] textarea{background:var(--input-bg)!important;border-color:var(--line)!important;color:var(--ink)!important}
html[data-theme] a,html[data-theme] .link,html[data-theme] .promo i,html[data-theme] .step>b,html[data-theme] .dose b,html[data-theme] .rngv,html[data-theme] .agentbox b,html[data-theme] .logo i,html[data-theme] .sb-logo i{color:var(--link)}
html[data-theme] .tabs{background:var(--bg-card);border-color:var(--line)}html[data-theme] .tabs button[aria-current]{color:var(--ink);border-bottom-color:var(--accent-primary)}
html[data-theme] nav button[aria-current]{color:var(--ink)}html[data-theme] nav button[aria-current] svg{background:var(--pill);color:var(--on-pill)}
html[data-theme] #side button{color:var(--ink)}html[data-theme] #side button:hover{background:var(--s2)}html[data-theme] #side button.on{background:var(--pill);color:var(--on-pill)}
html[data-theme] .avatar{background:var(--btn);color:var(--on-btn)}html[data-theme] .sw:checked{background:var(--btn)}
html[data-theme] .day.today,html[data-theme] .cday.today{outline-color:var(--accent-primary);border-color:var(--accent-primary)}html[data-theme] .cday.today .cdn{color:var(--link)}
html[data-theme] .cday{background:var(--bg)}html[data-theme] .cwk,html[data-theme] .sumbox,html[data-theme] .tile,html[data-theme] .slot,html[data-theme] .msg.ai,html[data-theme] .agentbox,html[data-theme] .en,html[data-theme] .stats div{background:var(--s2)!important;color:var(--ink)}
html[data-theme] #toast{background:var(--s2);color:var(--ink);border:1px solid var(--line)}
html[data-theme] .btn:focus-visible,html[data-theme] .link:focus-visible,html[data-theme] nav button:focus-visible,html[data-theme] .tabs button:focus-visible,html[data-theme] .seg button:focus-visible{outline-color:var(--accent-primary)}
/* light themes: dark glyph colors flip */
html[data-theme="nordic"] .badge[style*="--str"],html[data-theme="matcha"] .badge[style*="--str"],html[data-theme="lagoon"] .badge[style*="--str"],html[data-theme="sakura"] .badge[style*="--str"],html[data-theme="arctic"] .badge[style*="--str"],html[data-theme="mint"] .badge[style*="--str"]{color:#fff!important}
html[data-theme="nordic"] .ph-Recovery,html[data-theme="matcha"] .ph-Recovery,html[data-theme="lagoon"] .ph-Recovery,html[data-theme="sakura"] .ph-Recovery,html[data-theme="arctic"] .ph-Recovery,html[data-theme="mint"] .ph-Recovery{--pc:#1f2937}
html[data-theme="nordic"] dialog::backdrop,html[data-theme="matcha"] dialog::backdrop,html[data-theme="lagoon"] dialog::backdrop,html[data-theme="sakura"] dialog::backdrop,html[data-theme="arctic"] dialog::backdrop,html[data-theme="mint"] dialog::backdrop{background:#0f172a99}
html[data-theme="nordic"] .cfit,html[data-theme="matcha"] .cfit,html[data-theme="lagoon"] .cfit,html[data-theme="sakura"] .cfit,html[data-theme="arctic"] .cfit,html[data-theme="mint"] .cfit{color:#00659e}
html[data-theme="nordic"] .cfat,html[data-theme="matcha"] .cfat,html[data-theme="lagoon"] .cfat,html[data-theme="sakura"] .cfat,html[data-theme="arctic"] .cfat,html[data-theme="mint"] .cfat{color:#b8001f}
html[data-theme="nordic"] .cform,html[data-theme="matcha"] .cform,html[data-theme="lagoon"] .cform,html[data-theme="sakura"] .cform,html[data-theme="arctic"] .cform,html[data-theme="mint"] .cform{color:#7a6000}
html[data-theme] .chip,html[data-theme] .cchip{color:var(--ink)}
html[data-theme="nordic"] .chip small,html[data-theme="matcha"] .chip small,html[data-theme="lagoon"] .chip small,html[data-theme="sakura"] .chip small,html[data-theme="arctic"] .chip small,html[data-theme="mint"] .chip small,html[data-theme="nordic"] .cchip small,html[data-theme="matcha"] .cchip small,html[data-theme="lagoon"] .cchip small,html[data-theme="sakura"] .cchip small,html[data-theme="arctic"] .cchip small,html[data-theme="mint"] .cchip small{color:#3f4450}

/* Phase 2 classes (hybrid.css) follow the theme too */
html[data-theme] .syncchip,html[data-theme] .hrace,html[data-theme] .hcoach button,html[data-theme] .dcell,html[data-theme] .rc:not(.hero),html[data-theme] .fpill,html[data-theme] .bub,html[data-theme] .prc,html[data-theme] #chat .msg.ai{background:var(--bg-card);border-color:var(--line);color:var(--ink)}
html[data-theme] .qr button{background:var(--s2);border-color:var(--line);color:var(--ink)}
html[data-theme] .cav{background:var(--s2)}
html[data-theme] .fab,html[data-theme] .pills button.on,html[data-theme] #chat .msg.me{background:var(--btn);border-color:var(--btn);color:var(--on-btn)}
html[data-theme] .cav.solid,html[data-theme] .mav.solid{background:var(--btn);border-color:var(--btn);color:var(--on-btn)}
html[data-theme] .dcell.on,html[data-theme] .cin .send{background:var(--pill);border-color:var(--pill);color:var(--on-pill)}
html[data-theme] .dcell.on small{color:var(--on-pill)}html[data-theme] .dcell.on .dots i{box-shadow:0 0 0 1px var(--on-pill)}
html[data-theme] .dcell.today:not(.on),html[data-theme] .rc.sel,html[data-theme] .cavb.on .cav{border-color:var(--accent-primary)}
html[data-theme] .hrace .big,html[data-theme] .rc:not(.hero) .goalt,html[data-theme] .legs .tot b{color:var(--link)}
html[data-theme] .splits .fin{background:var(--pill);color:var(--on-pill)}html[data-theme] .splits .fin small{color:var(--on-pill)}
html[data-theme] .rb.A{background:var(--btn);color:var(--on-btn)}
html[data-theme]:not([data-theme="nordic"]):not([data-theme="matcha"]):not([data-theme="lagoon"]):not([data-theme="sakura"]):not([data-theme="arctic"]):not([data-theme="mint"]) .x{color:#ff6b80}
html[data-theme="nordic"] .x,html[data-theme="matcha"] .x,html[data-theme="lagoon"] .x,html[data-theme="sakura"] .x,html[data-theme="arctic"] .x,html[data-theme="mint"] .x{color:#b8001f}
html[data-theme="nordic"] .pwh .tag,html[data-theme="matcha"] .pwh .tag,html[data-theme="lagoon"] .pwh .tag,html[data-theme="sakura"] .pwh .tag,html[data-theme="arctic"] .pwh .tag,html[data-theme="mint"] .pwh .tag{color:color-mix(in srgb,var(--c) 55%,#000)}

/* ===== Theme picker cards (Account › Personalization). Markup in DESIGN_HANDOFF.md ===== */
.thgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.thcard{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:var(--s2);border:2px solid var(--line);color:var(--ink);min-height:44px}
.thcard:hover{border-color:var(--muted)}.thcard:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.thprev{height:64px;border-radius:10px;background:var(--tb);position:relative;overflow:hidden;border:1px solid rgba(127,127,127,.25)}
.thprev::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:22px;border-radius:6px;background:var(--ts)}
.thprev::after{content:"";position:absolute;left:8px;bottom:8px;width:46%;height:16px;border-radius:5px;background:var(--t1)}
.thprev i{position:absolute;right:8px;bottom:8px;width:26px;height:16px;border-radius:8px;background:var(--t2)}
.thcard b{font-size:14px;line-height:1.2}.thcard small{font-size:12px;color:var(--muted)}
.thsw{display:flex;gap:4px}.thsw span{width:16px;height:16px;border-radius:50%;border:1px solid rgba(127,127,127,.35)}
.thcard .thapply{font-size:12px;font-weight:700;color:var(--link)}
.thcard.on{border-color:var(--accent-primary,var(--blue))}
.thcard.on::after{content:"✓ Active";position:absolute;top:16px;right:16px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--pill,#f4c300);color:var(--on-pill,#0d1319)}
.thcard.on .thapply{visibility:hidden}

/* ===== Onboarding, smart inputs, race logos, swipe (design session, 2026-10-18). Markup in DESIGN_HANDOFF.md ===== */
/* onboarding shell */
.ob{max-width:560px;margin:0 auto;padding:18px 16px 120px}
.obhead{display:flex;align-items:center;gap:14px}
.obring{--p:20;width:72px;height:72px;border-radius:50%;flex:none;display:grid;place-items:center;background:radial-gradient(closest-side,var(--bg,#0d1319) 78%,transparent 79%),conic-gradient(var(--pill,#f4c300) calc(var(--p)*1%),var(--line,#2a3542) 0);transition:--p .6s}
.obring b{font-family:"Barlow Condensed",Barlow,sans-serif;font-size:22px}
.obstep{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--link,#f4c300);text-transform:uppercase}
.obtitle{font-family:"Barlow Condensed",Barlow,sans-serif;font-style:italic;font-weight:800;font-size:26px;line-height:1;text-transform:uppercase;margin:0}
.obbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:12px 0 4px;padding:0;list-style:none}
.obbar li{height:6px;border-radius:3px;background:var(--line,#2a3542);transition:background .4s}
.obbar li.done{background:var(--green,#009f3d)}.obbar li.now{background:var(--pill,#f4c300)}
.obfoot{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:var(--nav-bg,rgba(13,19,25,.92));border-top:1px solid var(--line,#2a3542);display:flex;gap:8px;z-index:8}
.obfoot .btn{flex:1;height:54px;font-size:16px;font-weight:800}
.obskip{all:unset;cursor:pointer;color:var(--link);font-weight:600;font-size:14px;padding:12px;min-height:44px;box-sizing:border-box;text-align:center}
@keyframes obpop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.obcheck{animation:obpop .5s ease-out both}
/* choice chips (pre-selected default) */
.chc{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
.chc button{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;min-height:46px;padding:10px 6px;border-radius:12px;border:1px solid var(--line,#2a3542);color:var(--ink);font-weight:600}
.chc button[aria-pressed="true"]{border:2px solid var(--pill,#f4c300);background:color-mix(in srgb,var(--pill,#f4c300) 14%,transparent);font-weight:800}
.chc button:focus-visible{outline:3px solid var(--link);outline-offset:2px}
/* stepper (− value +) */
.stp{display:flex;align-items:center;gap:6px}.stp button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:12px;background:var(--s2,#1c2631);color:var(--ink);display:grid;place-items:center;font-size:20px}
.stp b{min-width:64px;text-align:center;font-family:"Barlow Condensed",Barlow,sans-serif;font-size:28px}
.est{font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:var(--s2,#1c2631);color:var(--muted)}
/* wheel picker: columns of scroll-snap lists, band marks the value */
.wheel{position:relative;display:flex;justify-content:center;align-items:center;gap:4px;height:200px;user-select:none;-webkit-user-select:none}
.wheel::before{content:"";position:absolute;left:0;right:0;top:80px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--accent-primary,#0085ca) 22%,transparent);border:1px solid var(--accent-primary,#0085ca);pointer-events:none}
.wheel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--bg-card,#151d26),transparent 35%,transparent 65%,var(--bg-card,#151d26))}
.wcol{height:200px;width:64px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;padding:80px 0;box-sizing:border-box;overscroll-behavior:contain;touch-action:pan-y}
.wcol::-webkit-scrollbar{display:none}
.wcol div{height:40px;line-height:40px;text-align:center;scroll-snap-align:center;font-family:"Barlow Condensed",Barlow,sans-serif;font-size:24px;color:var(--muted)}
.wcol div.sel{color:var(--ink);font-size:30px;font-weight:700}
.wsep{font-size:26px;font-weight:700;color:var(--ink)}.wunit{font-size:14px;color:var(--muted);margin-left:4px}
.wbtn{all:unset;box-sizing:border-box;cursor:pointer;min-height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--accent-primary,#0085ca);background:color-mix(in srgb,var(--accent-primary,#0085ca) 14%,transparent);color:var(--ink);font-family:"Barlow Condensed",Barlow,sans-serif;font-size:26px;font-weight:700;display:inline-grid;place-items:center}
/* scan & auto-fill */
.scanok{display:flex;align-items:center;gap:8px;font-size:13px;border-radius:12px;padding:10px 12px;background:color-mix(in srgb,var(--green,#009f3d) 14%,transparent);border:1px solid color-mix(in srgb,var(--green,#009f3d) 50%,transparent)}
.scanbusy{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.scanbusy::before{content:"";width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent-primary,#0085ca);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.found{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--green,#009f3d)}
.found.check{color:var(--pill,#f4c300)}
/* race logo or sport badge */
.rlogo{position:relative;width:56px;height:56px;border-radius:14px;flex:none;overflow:hidden;background:#fff;display:grid;place-items:center}
.rlogo img{max-width:86%;max-height:86%;object-fit:contain}
.rlogo.badge-fb{background:none}.rlogo.badge-fb img{width:100%;height:100%;max-width:none;max-height:none}
.rlogo[data-dist]::after{content:attr(data-dist);position:absolute;bottom:3px;left:0;right:0;text-align:center;font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:800;font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.rlogo.sm{width:32px;height:32px;border-radius:9px}.rlogo.sm[data-dist]::after{display:none}
.rlogo.lg{width:72px;height:72px;border-radius:18px}
/* confetti (finish screen) */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.confetti i{position:absolute;top:-30px;width:8px;height:22px;border-radius:4px;animation:fall 2.4s cubic-bezier(.2,.6,.4,1) forwards}
.confetti i:nth-child(5n+1){background:#0085ca}.confetti i:nth-child(5n+2){background:#f4c300}.confetti i:nth-child(5n+3){background:var(--str,#d7dde4)}.confetti i:nth-child(5n+4){background:#009f3d}.confetti i:nth-child(5n){background:#e4002b}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}
/* swipe between tabs */
@keyframes tabInL{from{transform:translateX(28%);opacity:.3}to{transform:none;opacity:1}}
@keyframes tabInR{from{transform:translateX(-28%);opacity:.3}to{transform:none;opacity:1}}
.tab-in-left{animation:tabInL .26s ease-out}.tab-in-right{animation:tabInR .26s ease-out}
.swipe-drag{transition:none!important;will-change:transform}
.swipe-hint{position:fixed;top:50%;width:6px;height:56px;border-radius:3px;background:var(--pill,#f4c300);opacity:0;transform:translateY(-50%);transition:opacity .15s;z-index:9;pointer-events:none}
.swipe-hint.l{left:4px}.swipe-hint.r{right:4px}.swipe-hint.on{opacity:.8}
@media (prefers-reduced-motion:reduce){.tab-in-left,.tab-in-right,.obcheck,.confetti i,.scanbusy::before,.obring{animation:none!important;transition:none!important}.confetti{display:none}}
.rlogo.badge-fb[data-dist] img{transform:translateY(-5px) scale(.8)}
.rlogo[data-dist]::after{bottom:0;padding:1px 0 2px;background:rgba(0,0,0,.35)}


/* ===== Calendar tab, split chart view, close buttons, intra-week drag (design session, 2026-10-19). Markup in DESIGN_HANDOFF.md ===== */
/* close button on every dialog / panel: 44 px, high contrast */
.xclose,.pclose{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink,#e6edf3);background:var(--bg,#0d1319);color:var(--ink,#e6edf3);font-size:24px;line-height:1;display:grid;place-items:center;cursor:pointer;z-index:3}
.xclose:hover,.pclose:hover{background:var(--s2,#1c2631)}.xclose:focus-visible,.pclose:focus-visible{outline:3px solid var(--link);outline-offset:2px}
dialog>.xclose{position:sticky;top:4px;margin:-4px -4px -44px auto;justify-self:end}
dialog .h{padding-right:56px}
/* 6-tab bottom bar when a Calendar tab is added */
nav:has(button:nth-child(6)){grid-template-columns:repeat(6,minmax(0,1fr))}
nav:has(button:nth-child(6)) button{font-size:11px}
/* view switch (Month / Week) */
.vsw{display:inline-flex;padding:3px;border-radius:12px;background:var(--s2,#1c2631);border:1px solid var(--line,#2a3542)}
.vsw button{all:unset;cursor:pointer;min-height:40px;padding:0 18px;border-radius:9px;font-weight:700;color:var(--muted)}
.vsw button[aria-selected="true"]{background:var(--pill,#f4c300);color:var(--on-pill,#0d1319)}
.vsw button:focus-visible{outline:3px solid var(--link);outline-offset:2px}
/* month grid */
.mcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(64px,.8fr);gap:6px}
.mcal .mh{font-size:12px;font-weight:700;color:var(--muted);padding:0 4px}
.mday{min-height:92px;border-radius:12px;padding:6px;background:var(--bg-card,rgba(21,29,38,.72));border:1px solid var(--line,#2a3542);display:flex;flex-direction:column;gap:4px;cursor:pointer;min-width:0}
.mday.out{opacity:.4}.mday.today{border:2px solid var(--pill,#f4c300)}
.mday .dn{font-size:12px;font-weight:700;color:var(--muted)}.mday.today .dn{color:var(--link)}
.mday .hrs{margin-top:auto;font-family:"Barlow Condensed",Barlow,sans-serif;font-size:18px;font-weight:700}
.mdots{display:flex;flex-wrap:wrap;gap:3px}
.sb{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:900}
.sb.done{background:#009f3d;color:#fff}.sb.miss{background:#e4002b;color:#fff}.sb.plan{background:transparent;border:2px solid #0085ca;color:#0085ca}
.mwk{border-radius:12px;padding:6px;background:var(--s2,#1c2631);display:flex;flex-direction:column;justify-content:center;font-size:12px;color:var(--muted)}.mwk b{font-size:15px;color:var(--ink)}
.mrace{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700}
.mlegend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted);align-items:center}
/* week board with drag handles */
.wkb{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:8px;overflow-x:auto}
.wkd{min-height:300px;border-radius:14px;padding:8px;background:var(--bg-card,rgba(21,29,38,.72));border:1px solid var(--line,#2a3542);display:flex;flex-direction:column;gap:8px;transition:border-color .15s,background .15s}
.wkd.today{border:2px solid var(--pill,#f4c300)}
.wkd.drop-ok{border:2px dashed var(--green,#009f3d);background:color-mix(in srgb,var(--green,#009f3d) 10%,transparent)}
.wkd.drop-warn{border:2px dashed var(--yellow,#f4c300);background:color-mix(in srgb,var(--yellow,#f4c300) 10%,transparent)}
.wkd.locked,.wklock{background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(127,127,127,.12) 8px 16px);border-style:dashed;opacity:.65;cursor:not-allowed}
.wcard{position:relative;display:flex;gap:6px;border-radius:10px;padding:8px 8px 8px 4px;background:color-mix(in srgb,var(--c) 18%,var(--surface,#151d26));border-left:3px solid var(--c)}
.wcard.dragging{opacity:.45}.wcard.ghost{box-shadow:0 10px 28px rgba(0,0,0,.5);transform:rotate(-2deg)}
.dh{all:unset;-webkit-user-drag:element;cursor:grab;flex:none;width:28px;min-height:44px;border-radius:8px;display:grid;place-items:center;color:var(--muted);touch-action:none}
.dh:hover{background:var(--s2)}.dh:active{cursor:grabbing}.dh:focus-visible{outline:3px solid var(--link)}
.dh svg{width:16px;height:16px}
.wcard b{display:block;font-size:14px}.wcard small{display:block;font-size:12px;color:var(--muted)}
.wcard .tgt{font-size:12px;font-weight:700;color:var(--ink)}
.hardtag{font-size:10px;font-weight:800;letter-spacing:.05em;padding:1px 6px;border-radius:999px;background:var(--red,#e4002b);color:#fff}
.wktotal{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}.wktotal b{color:var(--ink)}
/* recovery warning from the Medical agent */
.recwarn{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:12px 14px;border:2px dashed var(--red,#e4002b);background:color-mix(in srgb,var(--red,#e4002b) 10%,var(--bg-card,#151d26))}
.recwarn .ma{flex:none;width:34px;height:34px;border-radius:50%;border:2px dashed var(--red,#e4002b);display:grid;place-items:center;color:var(--red,#e4002b)}
.recwarn p{margin:2px 0 8px;font-size:14px}.recwarn .actions{margin:0}
/* split view: list left, chart right */
.split{display:flex;gap:16px;align-items:flex-start}
.split>.slist{flex:1 1 380px;min-width:0}
.chartpanel{flex:1.4 1 480px;min-width:0;position:sticky;top:16px;border-radius:18px;padding:18px;background:var(--bg-card,rgba(21,29,38,.72));border:1px solid var(--line,#2a3542);animation:panelIn .22s ease-out}
.chartpanel[hidden]{display:none}
.chartpanel .pclose{top:12px;right:12px}
@keyframes panelIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.slist .srow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;min-height:44px}
.slist .srow:hover{background:var(--s2)}.slist .srow[aria-selected="true"]{background:color-mix(in srgb,var(--accent-primary,#0085ca) 16%,transparent);box-shadow:inset 3px 0 0 var(--accent-primary,#0085ca)}
/* phones: the chart panel becomes a full-screen slide-over with a sticky close bar */
@media (max-width:899px){
  .split{display:block}
  .chartpanel{position:fixed;inset:0;z-index:30;border-radius:0;border:0;padding:0;overflow-y:auto;background:var(--bg,#0d1319);animation:slideIn .24s ease-out}
  .chartpanel .pbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:var(--nav-bg,rgba(13,19,25,.94));border-bottom:1px solid var(--line)}
  .chartpanel .pbar .pclose{position:static;flex:none}
  .chartpanel .pbody{padding:16px}
}
@media (min-width:900px){.chartpanel .pbar{display:flex;align-items:center;gap:10px;padding-right:52px;margin-bottom:10px}.chartpanel .pbar .pback{display:none}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.pback{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;font-weight:700;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.chartpanel{animation:none}}

/* Web layout surfaces follow the theme: no fixed dark-grey boxes (design session, 2026-10-19).
   web.css hard-codes rgba(21,29,38,.72) on these; in light themes that showed as grey slabs. */
html[data-theme] #coaches .cavb,html[data-theme] .cfc,html[data-theme] #side .sb-acct,html[data-theme] #patpband{background:var(--bg-card);border-color:var(--line);color:var(--ink)}
html[data-theme] #side{background:var(--nav-bg)}
html[data-theme] #coaches .cavb .cst,html[data-theme] #side .sbsync{color:var(--muted)}
html[data-theme] #side .sb-acct:hover,html[data-theme] #side .sb-acct.on{background:var(--s2);border-color:var(--pill)}
html[data-theme] #coaches .cavb.on{background:color-mix(in srgb,var(--accent-primary) 12%,var(--bg-card));border-color:var(--accent-primary)}
html[data-theme] .cfc .ccomposer{border-top-color:var(--line)}
html[data-theme] .cfc .cin .inp{background:var(--input-bg);color:var(--ink);border:1px solid var(--line)}


/* ===== Background library: 20 styles (design session, 2026-10-19) =====
   Hooks set by the app:  html[data-bg="1".."20"|"auto"|"off"], html[data-sport="Run|Bike|Swim|OpenWater"],
   html[data-daypart="night"], html[data-terrain="hilly"], html[data-celebrate] (finish line).
   Data styles accept --bg-wave-area, --bg-wave-line, --bg-route (url(data:image/svg+xml,...)) and --bg-season (a gradient).
   Layers: html = theme colour, body::before / body::after = the style (fixed, under everything),
   body background = readability scrim (var(--bg) at --bg-scrim). Colours come only from theme tokens. */
html[data-theme="nordic"],html[data-theme="matcha"],html[data-theme="lagoon"],html[data-theme="sakura"],html[data-theme="arctic"],html[data-theme="mint"]{--bg-boost:1.7}
html{--bgP:var(--accent-primary,var(--blue,#0085ca));--bgS:var(--accent-secondary,var(--yellow,#f4c300))}
html[data-bg]:not([data-bg="off"]),html[data-celebrate]{background:var(--bg)!important}
html[data-bg]:not([data-bg="off"]) body,html[data-celebrate] body{background:color-mix(in srgb,var(--bg) var(--bg-scrim,0%),transparent)!important}
html[data-bg]:not([data-bg="off"]) body::before,html[data-bg]:not([data-bg="off"]) body::after,html[data-celebrate] body::before,html[data-celebrate] body::after{content:"";position:fixed;z-index:-1;pointer-events:none;will-change:transform}
.bgprev{position:relative;overflow:hidden;isolation:isolate;border-radius:12px;aspect-ratio:16/10;background:var(--bg);border:1px solid var(--line)}
.bgprev::before,.bgprev::after{content:"";position:absolute;z-index:-1;pointer-events:none}
@keyframes bgPulse{from{opacity:.75}to{opacity:1}}
@keyframes bgAurora{from{transform:translate3d(-6%,0,0) rotate(-3deg)}to{transform:translate3d(6%,4%,0) rotate(3deg)}}
@keyframes bgAurora2{from{transform:translate3d(5%,2%,0)}to{transform:translate3d(-7%,-2%,0)}}
@keyframes bgMesh{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5%,4%,0) scale(1.08)}}
@keyframes bgMesh2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(6%,-4%,0) scale(1)}}
@keyframes bgDrift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,0,0)}}

/* 1. Two glows */
html[data-bg="1"],html[data-bg="auto"]:where(:has(#t-plan:not([hidden]))),html[data-bg="auto"]:where(:has(#t-cal:not([hidden]))),html[data-bg="auto"]:where(:has(#t-account:not([hidden]))),html[data-bg="auto"]:where(:has(#t-help:not([hidden]))){--bg-scrim:0%}
html[data-bg="1"] body::before,html[data-bg="auto"]:where(:has(#t-plan:not([hidden]))) body::before,html[data-bg="auto"]:where(:has(#t-cal:not([hidden]))) body::before,html[data-bg="auto"]:where(:has(#t-account:not([hidden]))) body::before,html[data-bg="auto"]:where(:has(#t-help:not([hidden]))) body::before{display:block;inset:0;background:radial-gradient(60% 55% at 0% 0%,color-mix(in srgb,var(--bgP) 42%,transparent),transparent 65%),radial-gradient(55% 50% at 100% 100%,color-mix(in srgb,var(--bgS) 26%,transparent),transparent 62%);opacity:calc(1 * var(--bg-boost,1));animation:bgPulse 9s ease-in-out infinite alternate;-webkit-mask:none;mask:none}
html[data-bg="1"] body::after,html[data-bg="auto"]:where(:has(#t-plan:not([hidden]))) body::after,html[data-bg="auto"]:where(:has(#t-cal:not([hidden]))) body::after,html[data-bg="auto"]:where(:has(#t-account:not([hidden]))) body::after,html[data-bg="auto"]:where(:has(#t-help:not([hidden]))) body::after{display:none}
.bgprev[data-bgv="1"]::before{display:block;inset:0;background:radial-gradient(60% 55% at 0% 0%,color-mix(in srgb,var(--bgP) 42%,transparent),transparent 65%),radial-gradient(55% 50% at 100% 100%,color-mix(in srgb,var(--bgS) 26%,transparent),transparent 62%);opacity:calc(1 * var(--bg-boost,1));animation:bgPulse 9s ease-in-out infinite alternate;-webkit-mask:none;mask:none}.bgprev[data-bgv="1"]::after{display:none}
/* 2. Five-color dawn */
html[data-bg="2"]{--bg-scrim:0%}
html[data-bg="2"] body::before{display:block;inset:0;background:linear-gradient(115deg,color-mix(in srgb,var(--blue) 30%,transparent) 0%,color-mix(in srgb,var(--yellow) 16%,transparent) 26%,color-mix(in srgb,var(--str) 8%,transparent) 46%,color-mix(in srgb,var(--green) 18%,transparent) 70%,color-mix(in srgb,var(--red) 22%,transparent) 100%);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
html[data-bg="2"] body::after{display:none}
.bgprev[data-bgv="2"]::before{display:block;inset:0;background:linear-gradient(115deg,color-mix(in srgb,var(--blue) 30%,transparent) 0%,color-mix(in srgb,var(--yellow) 16%,transparent) 26%,color-mix(in srgb,var(--str) 8%,transparent) 46%,color-mix(in srgb,var(--green) 18%,transparent) 70%,color-mix(in srgb,var(--red) 22%,transparent) 100%);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}.bgprev[data-bgv="2"]::after{display:none}
/* 3. Aurora */
html[data-bg="3"]{--bg-scrim:0%}
html[data-bg="3"] body::before{display:block;inset:-25%;background:radial-gradient(45% 22% at 30% 30%,color-mix(in srgb,var(--bgP) 40%,transparent),transparent 70%),radial-gradient(40% 18% at 65% 38%,color-mix(in srgb,var(--green) 30%,transparent),transparent 70%),radial-gradient(35% 16% at 50% 22%,color-mix(in srgb,var(--bgS) 20%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgAurora 38s ease-in-out infinite alternate;-webkit-mask:none;mask:none}
html[data-bg="3"] body::after{display:block;inset:-25%;background:radial-gradient(50% 20% at 60% 25%,color-mix(in srgb,var(--bgP) 22%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgAurora2 52s ease-in-out infinite alternate;-webkit-mask:none;mask:none}
.bgprev[data-bgv="3"]::before{display:block;inset:-25%;background:radial-gradient(45% 22% at 30% 30%,color-mix(in srgb,var(--bgP) 40%,transparent),transparent 70%),radial-gradient(40% 18% at 65% 38%,color-mix(in srgb,var(--green) 30%,transparent),transparent 70%),radial-gradient(35% 16% at 50% 22%,color-mix(in srgb,var(--bgS) 20%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgAurora 38s ease-in-out infinite alternate;-webkit-mask:none;mask:none}.bgprev[data-bgv="3"]::after{display:block;inset:-25%;background:radial-gradient(50% 20% at 60% 25%,color-mix(in srgb,var(--bgP) 22%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgAurora2 52s ease-in-out infinite alternate;-webkit-mask:none;mask:none}
/* 4. Sunrise run */
html[data-bg="4"]{--bg-scrim:0%}
html[data-bg="4"] body::before{display:block;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bgP) 40%,transparent) 0%,transparent 52%,color-mix(in srgb,var(--bgS) 30%,transparent) 100%);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
html[data-bg="4"] body::after{display:none}
.bgprev[data-bgv="4"]::before{display:block;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bgP) 40%,transparent) 0%,transparent 52%,color-mix(in srgb,var(--bgS) 30%,transparent) 100%);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}.bgprev[data-bgv="4"]::after{display:none}
/* 5. Spotlight */
html[data-bg="5"],html[data-bg="auto"]:where(:has(#t-coach:not([hidden]))){--bg-scrim:0%}
html[data-bg="5"] body::before,html[data-bg="auto"]:where(:has(#t-coach:not([hidden]))) body::before{display:block;inset:0;background:radial-gradient(42% 70% at 50% -8%,color-mix(in srgb,var(--bgP) 38%,transparent),transparent 72%),radial-gradient(130% 120% at 50% 40%,transparent 55%,color-mix(in srgb,#000 28%,transparent));opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
html[data-bg="5"] body::after,html[data-bg="auto"]:where(:has(#t-coach:not([hidden]))) body::after{display:none}
.bgprev[data-bgv="5"]::before{display:block;inset:0;background:radial-gradient(42% 70% at 50% -8%,color-mix(in srgb,var(--bgP) 38%,transparent),transparent 72%),radial-gradient(130% 120% at 50% 40%,transparent 55%,color-mix(in srgb,#000 28%,transparent));opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}.bgprev[data-bgv="5"]::after{display:none}
/* 6. Frosted mesh */
html[data-bg="6"]{--bg-scrim:0%}
html[data-bg="6"] body::before{display:block;inset:-15%;background:radial-gradient(30% 38% at 20% 70%,color-mix(in srgb,var(--green) 28%,transparent),transparent 70%),radial-gradient(34% 42% at 80% 28%,color-mix(in srgb,var(--bgP) 34%,transparent),transparent 70%),radial-gradient(26% 30% at 55% 92%,color-mix(in srgb,var(--bgS) 22%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgMesh 30s ease-in-out infinite alternate;-webkit-mask:none;mask:none}
html[data-bg="6"] body::after{display:block;inset:-15%;background:radial-gradient(22% 26% at 92% 92%,color-mix(in srgb,var(--red) 18%,transparent),transparent 70%),radial-gradient(25% 30% at 40% 20%,color-mix(in srgb,var(--bgS) 14%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgMesh2 41s ease-in-out infinite alternate;-webkit-mask:none;mask:none}
.bgprev[data-bgv="6"]::before{display:block;inset:-15%;background:radial-gradient(30% 38% at 20% 70%,color-mix(in srgb,var(--green) 28%,transparent),transparent 70%),radial-gradient(34% 42% at 80% 28%,color-mix(in srgb,var(--bgP) 34%,transparent),transparent 70%),radial-gradient(26% 30% at 55% 92%,color-mix(in srgb,var(--bgS) 22%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgMesh 30s ease-in-out infinite alternate;-webkit-mask:none;mask:none}.bgprev[data-bgv="6"]::after{display:block;inset:-15%;background:radial-gradient(22% 26% at 92% 92%,color-mix(in srgb,var(--red) 18%,transparent),transparent 70%),radial-gradient(25% 30% at 40% 20%,color-mix(in srgb,var(--bgS) 14%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgMesh2 41s ease-in-out infinite alternate;-webkit-mask:none;mask:none}
/* 7. Track lanes */
html[data-bg="7"],html[data-bg="auto"][data-sport="Run"]{--bg-scrim:30%}
html[data-bg="7"] body::before,html[data-bg="auto"][data-sport="Run"] body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.3 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/07-track.svg) center/cover no-repeat;mask:url(backgrounds/07-track.svg) center/cover no-repeat}
html[data-bg="7"] body::after,html[data-bg="auto"][data-sport="Run"] body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/07-track-accent.svg) center/cover no-repeat;mask:url(backgrounds/07-track-accent.svg) center/cover no-repeat}
.bgprev[data-bgv="7"]::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.3 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/07-track.svg) center/cover no-repeat;mask:url(backgrounds/07-track.svg) center/cover no-repeat}.bgprev[data-bgv="7"]::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/07-track-accent.svg) center/cover no-repeat;mask:url(backgrounds/07-track-accent.svg) center/cover no-repeat}
/* 8. Topo map */
html[data-bg="8"],html[data-bg="auto"][data-sport="Bike"]{--bg-scrim:30%}
html[data-bg="8"] body::before,html[data-bg="auto"][data-sport="Bike"] body::before{display:block;inset:0;background:linear-gradient(135deg,var(--bgP),var(--bgS));opacity:calc(0.3 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/08-topo.svg) center/cover no-repeat;mask:url(backgrounds/08-topo.svg) center/cover no-repeat}
html[data-bg="8"] body::after,html[data-bg="auto"][data-sport="Bike"] body::after{display:none}
.bgprev[data-bgv="8"]::before{display:block;inset:0;background:linear-gradient(135deg,var(--bgP),var(--bgS));opacity:calc(0.3 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/08-topo.svg) center/cover no-repeat;mask:url(backgrounds/08-topo.svg) center/cover no-repeat}.bgprev[data-bgv="8"]::after{display:none}
/* 9. Pool lanes */
html[data-bg="9"],html[data-bg="auto"][data-sport="Swim"]{--bg-scrim:30%}
html[data-bg="9"] body::before,html[data-bg="auto"][data-sport="Swim"] body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.32 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/09-pool.svg) center/cover no-repeat;mask:url(backgrounds/09-pool.svg) center/cover no-repeat}
html[data-bg="9"] body::after,html[data-bg="auto"][data-sport="Swim"] body::after{display:block;inset:-4%;background:var(--bgS);opacity:calc(0.22 * var(--bg-boost,1));animation:bgDrift 24s linear infinite alternate;-webkit-mask:url(backgrounds/09-ripple.svg) center/cover no-repeat;mask:url(backgrounds/09-ripple.svg) center/cover no-repeat}
.bgprev[data-bgv="9"]::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.32 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/09-pool.svg) center/cover no-repeat;mask:url(backgrounds/09-pool.svg) center/cover no-repeat}.bgprev[data-bgv="9"]::after{display:block;inset:-4%;background:var(--bgS);opacity:calc(0.22 * var(--bg-boost,1));animation:bgDrift 24s linear infinite alternate;-webkit-mask:url(backgrounds/09-ripple.svg) center/cover no-repeat;mask:url(backgrounds/09-ripple.svg) center/cover no-repeat}
/* 10. Road ribbon */
html[data-bg="10"]{--bg-scrim:30%}
html[data-bg="10"] body::before{display:block;inset:0;background:var(--ink);opacity:calc(0.07 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/10-road.svg) center/cover no-repeat;mask:url(backgrounds/10-road.svg) center/cover no-repeat}
html[data-bg="10"] body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/10-road-dash.svg) center/cover no-repeat;mask:url(backgrounds/10-road-dash.svg) center/cover no-repeat}
.bgprev[data-bgv="10"]::before{display:block;inset:0;background:var(--ink);opacity:calc(0.07 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/10-road.svg) center/cover no-repeat;mask:url(backgrounds/10-road.svg) center/cover no-repeat}.bgprev[data-bgv="10"]::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/10-road-dash.svg) center/cover no-repeat;mask:url(backgrounds/10-road-dash.svg) center/cover no-repeat}
/* 11. Heart-rate line */
html[data-bg="11"],html[data-bg="auto"]:where(:has(#t-acts:not([hidden]))){--bg-scrim:30%}
html[data-bg="11"] body::before,html[data-bg="auto"]:where(:has(#t-acts:not([hidden]))) body::before{display:block;inset:0;background:linear-gradient(90deg,var(--bgP),var(--bgS));opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/11-hr.svg) center top/cover no-repeat;mask:url(backgrounds/11-hr.svg) center top/cover no-repeat}
html[data-bg="11"] body::after,html[data-bg="auto"]:where(:has(#t-acts:not([hidden]))) body::after{display:block;inset:0;background:radial-gradient(70% 30% at 50% 0%,color-mix(in srgb,var(--bgP) 18%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
.bgprev[data-bgv="11"]::before{display:block;inset:0;background:linear-gradient(90deg,var(--bgP),var(--bgS));opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/11-hr.svg) center top/cover no-repeat;mask:url(backgrounds/11-hr.svg) center top/cover no-repeat}.bgprev[data-bgv="11"]::after{display:block;inset:0;background:radial-gradient(70% 30% at 50% 0%,color-mix(in srgb,var(--bgP) 18%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
/* 12. Five stripes */
html[data-bg="12"]{--bg-scrim:30%}
html[data-bg="12"] body::before{display:block;inset:0;background:linear-gradient(-62deg,transparent 0 58%,var(--blue) 58% 60.5%,transparent 60.5% 61.5%,var(--yellow) 61.5% 64%,transparent 64% 65%,var(--str) 65% 67.5%,transparent 67.5% 68.5%,var(--green) 68.5% 71%,transparent 71% 72%,var(--red) 72% 74.5%,transparent 74.5%);opacity:calc(0.3 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
html[data-bg="12"] body::after{display:none}
.bgprev[data-bgv="12"]::before{display:block;inset:0;background:linear-gradient(-62deg,transparent 0 58%,var(--blue) 58% 60.5%,transparent 60.5% 61.5%,var(--yellow) 61.5% 64%,transparent 64% 65%,var(--str) 65% 67.5%,transparent 67.5% 68.5%,var(--green) 68.5% 71%,transparent 71% 72%,var(--red) 72% 74.5%,transparent 74.5%);opacity:calc(0.3 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}.bgprev[data-bgv="12"]::after{display:none}
/* 13. Your fitness wave */
html[data-bg="13"],html[data-bg="auto"]:where(:has(#t-home:not([hidden]))){--bg-scrim:25%}
html[data-bg="13"] body::before,html[data-bg="auto"]:where(:has(#t-home:not([hidden]))) body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.24 * var(--bg-boost,1));animation:none;-webkit-mask:var(--bg-wave-area,url(backgrounds/13-wave-area.svg)) center/100% 100% no-repeat;mask:var(--bg-wave-area,url(backgrounds/13-wave-area.svg)) center/100% 100% no-repeat}
html[data-bg="13"] body::after,html[data-bg="auto"]:where(:has(#t-home:not([hidden]))) body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.6 * var(--bg-boost,1));animation:none;-webkit-mask:var(--bg-wave-line,url(backgrounds/13-wave-line.svg)) center/100% 100% no-repeat;mask:var(--bg-wave-line,url(backgrounds/13-wave-line.svg)) center/100% 100% no-repeat}
.bgprev[data-bgv="13"]::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.24 * var(--bg-boost,1));animation:none;-webkit-mask:var(--bg-wave-area,url(backgrounds/13-wave-area.svg)) center/100% 100% no-repeat;mask:var(--bg-wave-area,url(backgrounds/13-wave-area.svg)) center/100% 100% no-repeat}.bgprev[data-bgv="13"]::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.6 * var(--bg-boost,1));animation:none;-webkit-mask:var(--bg-wave-line,url(backgrounds/13-wave-line.svg)) center/100% 100% no-repeat;mask:var(--bg-wave-line,url(backgrounds/13-wave-line.svg)) center/100% 100% no-repeat}
/* 14. Season map */
html[data-bg="14"]{--bg-scrim:25%}
html[data-bg="14"] body::before{display:block;inset:0;background:var(--bg-season,linear-gradient(90deg,color-mix(in srgb,var(--blue) 22%,transparent) 0 38%,color-mix(in srgb,var(--green) 22%,transparent) 38% 66%,color-mix(in srgb,var(--yellow) 24%,transparent) 66% 86%,color-mix(in srgb,var(--red) 26%,transparent) 86% 95%,color-mix(in srgb,var(--blue) 12%,transparent) 95%));opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
html[data-bg="14"] body::after{display:block;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/16 - 1px),color-mix(in srgb,var(--ink) 10%,transparent) calc(100%/16 - 1px) calc(100%/16));opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
.bgprev[data-bgv="14"]::before{display:block;inset:0;background:var(--bg-season,linear-gradient(90deg,color-mix(in srgb,var(--blue) 22%,transparent) 0 38%,color-mix(in srgb,var(--green) 22%,transparent) 38% 66%,color-mix(in srgb,var(--yellow) 24%,transparent) 66% 86%,color-mix(in srgb,var(--red) 26%,transparent) 86% 95%,color-mix(in srgb,var(--blue) 12%,transparent) 95%));opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}.bgprev[data-bgv="14"]::after{display:block;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/16 - 1px),color-mix(in srgb,var(--ink) 10%,transparent) calc(100%/16 - 1px) calc(100%/16));opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
/* 15. Route shadow */
html[data-bg="15"]{--bg-scrim:25%}
html[data-bg="15"] body::before{display:block;inset:0;background:var(--bgS);opacity:calc(0.45 * var(--bg-boost,1));animation:none;-webkit-mask:var(--bg-route,url(backgrounds/15-route.svg)) center/contain no-repeat;mask:var(--bg-route,url(backgrounds/15-route.svg)) center/contain no-repeat}
html[data-bg="15"] body::after{display:block;inset:0;background:repeating-linear-gradient(0deg,transparent 0 47px,color-mix(in srgb,var(--ink) 6%,transparent) 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,color-mix(in srgb,var(--ink) 6%,transparent) 47px 48px);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
.bgprev[data-bgv="15"]::before{display:block;inset:0;background:var(--bgS);opacity:calc(0.45 * var(--bg-boost,1));animation:none;-webkit-mask:var(--bg-route,url(backgrounds/15-route.svg)) center/contain no-repeat;mask:var(--bg-route,url(backgrounds/15-route.svg)) center/contain no-repeat}.bgprev[data-bgv="15"]::after{display:block;inset:0;background:repeating-linear-gradient(0deg,transparent 0 47px,color-mix(in srgb,var(--ink) 6%,transparent) 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,color-mix(in srgb,var(--ink) 6%,transparent) 47px 48px);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
/* 16. Nordic lake at dawn */
html[data-bg="16"]{--bg-scrim:40%}
html[data-bg="16"] body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.38 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/16-lake.svg) center/cover no-repeat;mask:url(backgrounds/16-lake.svg) center/cover no-repeat}
html[data-bg="16"] body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.45 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/16-lake-sun.svg) center/cover no-repeat;mask:url(backgrounds/16-lake-sun.svg) center/cover no-repeat}
.bgprev[data-bgv="16"]::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.38 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/16-lake.svg) center/cover no-repeat;mask:url(backgrounds/16-lake.svg) center/cover no-repeat}.bgprev[data-bgv="16"]::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.45 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/16-lake-sun.svg) center/cover no-repeat;mask:url(backgrounds/16-lake-sun.svg) center/cover no-repeat}
/* 17. Mountain road */
html[data-bg="17"],html[data-bg="auto"][data-sport="Bike"][data-terrain="hilly"]{--bg-scrim:40%}
html[data-bg="17"] body::before,html[data-bg="auto"][data-sport="Bike"][data-terrain="hilly"] body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.4 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/17-mountains.svg) center/cover no-repeat;mask:url(backgrounds/17-mountains.svg) center/cover no-repeat}
html[data-bg="17"] body::after,html[data-bg="auto"][data-sport="Bike"][data-terrain="hilly"] body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.6 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/17-hairpins.svg) center/cover no-repeat;mask:url(backgrounds/17-hairpins.svg) center/cover no-repeat}
.bgprev[data-bgv="17"]::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.4 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/17-mountains.svg) center/cover no-repeat;mask:url(backgrounds/17-mountains.svg) center/cover no-repeat}.bgprev[data-bgv="17"]::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.6 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/17-hairpins.svg) center/cover no-repeat;mask:url(backgrounds/17-hairpins.svg) center/cover no-repeat}
/* 18. Open-water swim */
html[data-bg="18"],html[data-bg="auto"][data-sport="OpenWater"],html[data-bg="auto"][data-sport="Swim"][data-terrain="open"]{--bg-scrim:40%}
html[data-bg="18"] body::before,html[data-bg="auto"][data-sport="OpenWater"] body::before,html[data-bg="auto"][data-sport="Swim"][data-terrain="open"] body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.4 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/18-water.svg) center/cover no-repeat;mask:url(backgrounds/18-water.svg) center/cover no-repeat}
html[data-bg="18"] body::after,html[data-bg="auto"][data-sport="OpenWater"] body::after,html[data-bg="auto"][data-sport="Swim"][data-terrain="open"] body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.6 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/18-buoys.svg) center/cover no-repeat;mask:url(backgrounds/18-buoys.svg) center/cover no-repeat}
.bgprev[data-bgv="18"]::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.4 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/18-water.svg) center/cover no-repeat;mask:url(backgrounds/18-water.svg) center/cover no-repeat}.bgprev[data-bgv="18"]::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.6 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/18-buoys.svg) center/cover no-repeat;mask:url(backgrounds/18-buoys.svg) center/cover no-repeat}
/* 19. City run at night */
html[data-bg="19"],html[data-bg="auto"][data-sport="Run"][data-daypart="night"]{--bg-scrim:40%}
html[data-bg="19"] body::before,html[data-bg="auto"][data-sport="Run"][data-daypart="night"] body::before{display:block;inset:0;background:linear-gradient(180deg,var(--bgP),transparent);opacity:calc(0.2 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/19-skyline.svg) center bottom/cover no-repeat;mask:url(backgrounds/19-skyline.svg) center bottom/cover no-repeat}
html[data-bg="19"] body::after,html[data-bg="auto"][data-sport="Run"][data-daypart="night"] body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.5 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/19-lights.svg) center bottom/cover no-repeat;mask:url(backgrounds/19-lights.svg) center bottom/cover no-repeat}
.bgprev[data-bgv="19"]::before{display:block;inset:0;background:linear-gradient(180deg,var(--bgP),transparent);opacity:calc(0.2 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/19-skyline.svg) center bottom/cover no-repeat;mask:url(backgrounds/19-skyline.svg) center bottom/cover no-repeat}.bgprev[data-bgv="19"]::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.5 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/19-lights.svg) center bottom/cover no-repeat;mask:url(backgrounds/19-lights.svg) center bottom/cover no-repeat}
/* 20. Finish line */
html[data-bg="20"],html[data-bg="auto"]:where(:has(#t-races:not([hidden]))),html[data-celebrate][data-celebrate][data-celebrate][data-celebrate]{--bg-scrim:40%}
html[data-bg="20"] body::before,html[data-bg="auto"]:where(:has(#t-races:not([hidden]))) body::before,html[data-celebrate][data-celebrate][data-celebrate][data-celebrate] body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.32 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/20-arch.svg) center/cover no-repeat;mask:url(backgrounds/20-arch.svg) center/cover no-repeat}
html[data-bg="20"] body::after,html[data-bg="auto"]:where(:has(#t-races:not([hidden]))) body::after,html[data-celebrate][data-celebrate][data-celebrate][data-celebrate] body::after{display:block;inset:0;background:linear-gradient(90deg,var(--blue) 0 20%,var(--yellow) 20% 40%,var(--str) 40% 60%,var(--green) 60% 80%,var(--red) 80%);opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/20-confetti.svg) center/cover no-repeat;mask:url(backgrounds/20-confetti.svg) center/cover no-repeat}
.bgprev[data-bgv="20"]::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.32 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/20-arch.svg) center/cover no-repeat;mask:url(backgrounds/20-arch.svg) center/cover no-repeat}.bgprev[data-bgv="20"]::after{display:block;inset:0;background:linear-gradient(90deg,var(--blue) 0 20%,var(--yellow) 20% 40%,var(--str) 40% 60%,var(--green) 60% 80%,var(--red) 80%);opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/20-confetti.svg) center/cover no-repeat;mask:url(backgrounds/20-confetti.svg) center/cover no-repeat}
/* auto preview card: four context swatches */
.bgprev[data-bgv="auto"]{background:linear-gradient(90deg,color-mix(in srgb,var(--bgP) 22%,var(--bg)) 0 25%,color-mix(in srgb,var(--green) 22%,var(--bg)) 25% 50%,color-mix(in srgb,var(--bgS) 22%,var(--bg)) 50% 75%,color-mix(in srgb,var(--red) 22%,var(--bg)) 75%)}
.bgprev[data-bgv="off"]{background:radial-gradient(70% 60% at 0% 0%,var(--glow1,transparent),transparent 62%),var(--bg)}
html[data-bg]:not([data-bg="off"]) .bgprev::before{will-change:auto}
@media (prefers-reduced-motion:reduce){html[data-bg] body::before,html[data-bg] body::after,html[data-celebrate] body::before,html[data-celebrate] body::after,.bgprev::before,.bgprev::after{animation:none!important}}
html[data-motion="off"] body::before,html[data-motion="off"] body::after{animation:none!important}

/* Background picker (Account > Personalization) */
.bgsec{margin-top:6px}
.bgsec h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.bggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bgcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:16px;background:var(--s2);border:2px solid var(--line);color:var(--ink);min-height:44px}
.bgcard:hover{border-color:var(--muted)}.bgcard:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.bgcard[aria-checked="true"]{border-color:var(--bgP);box-shadow:0 0 0 2px color-mix(in srgb,var(--bgP) 35%,transparent)}
.bgcard b{font-size:13px;line-height:1.2;display:flex;gap:6px;align-items:baseline}.bgcard b i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.bgcard small{font-size:11.5px;color:var(--muted);line-height:1.25}
.bgcard .bgtag{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--bgP) 18%,transparent);color:var(--ink)}
.bgauto{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:var(--s2);border:1px solid var(--line)}
.bgauto p{margin:2px 0 0;font-size:13px;color:var(--muted);max-width:60ch}
.bgnote{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* Finish line celebration overlay (style 20 runs behind it) */
.finishov{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.finishov[hidden]{display:none}
.finishcard{position:relative;width:min(520px,100%);box-sizing:border-box;padding:26px 22px 20px;border-radius:22px;background:var(--bg-card,var(--surface));border:1px solid var(--line);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:finIn .55s cubic-bezier(.2,.9,.25,1.2) both}
.finishtape{position:absolute;left:-14px;right:-14px;top:18px;height:14px;background:linear-gradient(90deg,var(--blue) 0 20%,var(--yellow) 20% 40%,var(--str) 40% 60%,var(--green) 60% 80%,var(--red) 80%);border-radius:3px;animation:finTape .7s .25s ease-out both;transform-origin:center}
.finishcard .fl{margin:22px 0 4px;font:800 italic 13px/1 "Barlow Condensed",var(--font,system-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.finishcard h2{margin:0;font:800 italic clamp(30px,7vw,44px)/1 "Barlow Condensed",system-ui,sans-serif;text-transform:uppercase;color:var(--ink)}
.finishcard .ftime{margin:10px 0 2px;font:700 clamp(40px,10vw,64px)/1 "Barlow Condensed",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--bgP)}
.finishcard .fsub{margin:0 0 14px;color:var(--muted);font-size:14px}
.fsplits{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px;margin:0 0 16px}
.fsplits div{padding:8px 4px;border-radius:12px;background:var(--s2)}.fsplits small{display:block;font-size:11px;color:var(--muted)}.fsplits b{font-variant-numeric:tabular-nums;font-size:16px}
.finishcard .actions{justify-content:center}
@keyframes finIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes finTape{0%{transform:scaleX(1)}60%{transform:scaleX(1.04)}100%{transform:scaleX(0) rotate(-3deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.finishcard,.finishtape{animation:none}.finishtape{opacity:.9}}

/* ===== Login A + D: split hero with quick sign-in (design session, 2026-10-19) =====
   Active only when the app adds <section class="ahero"> inside #auth, so today's login is untouched until wired. */
#auth:has(.ahero){max-width:none;display:grid;grid-template-columns:1fr;align-content:start;background:var(--bg)!important;min-height:100vh;min-height:100dvh}
#auth:has(.ahero)[hidden]{display:none}
#auth:has(.ahero)>.hdr{display:none}
.ahero{position:relative;overflow:hidden;isolation:isolate;box-sizing:border-box;min-height:290px;padding:calc(20px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 22px max(20px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:space-between;gap:18px;color:var(--ink);background:linear-gradient(160deg,color-mix(in srgb,var(--bgP,#0085ca) 42%,transparent),color-mix(in srgb,var(--bg) 20%,transparent) 75%),var(--bg)}
.ahero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bgS,#f4c300);opacity:.18;-webkit-mask:url(backgrounds/07-track.svg) right bottom/cover no-repeat;mask:url(backgrounds/07-track.svg) right bottom/cover no-repeat}
.ahero::after{content:"";position:absolute;top:0;bottom:0;right:0;left:auto;width:42%;z-index:-1;opacity:.26;background:linear-gradient(-68deg,transparent 0 30%,var(--blue,#0085ca) 30% 34%,transparent 34% 36%,var(--yellow,#f4c300) 36% 40%,transparent 40% 42%,var(--str,#d7dde4) 42% 46%,transparent 46% 48%,var(--green,#009f3d) 48% 52%,transparent 52% 54%,var(--red,#e4002b) 54% 58%,transparent 58%)}
.ahero .alogo{display:flex;align-items:center;gap:10px;font:800 italic 24px/1 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.01em}
.ahero h1{margin:0;max-width:11ch;font:800 italic clamp(34px,9vw,40px)/.98 "Barlow Condensed",system-ui,sans-serif;text-transform:uppercase;text-wrap:balance}
.ahero p{display:none;margin:14px 0 0;max-width:30em;font-size:19px;line-height:1.4;color:color-mix(in srgb,var(--ink) 80%,var(--bg))}
.achips{display:flex;flex-wrap:wrap;gap:6px}
.achip{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;color:var(--ink);border:1px solid}
.achip.c-swim{background:color-mix(in srgb,var(--blue) 22%,transparent);border-color:color-mix(in srgb,var(--blue) 55%,transparent)}
.achip.c-bike{background:color-mix(in srgb,var(--green) 22%,transparent);border-color:color-mix(in srgb,var(--green) 55%,transparent)}
.achip.c-run{background:color-mix(in srgb,var(--red) 22%,transparent);border-color:color-mix(in srgb,var(--red) 55%,transparent)}
.achip.c-str{display:none;background:color-mix(in srgb,var(--str) 18%,transparent);border-color:color-mix(in srgb,var(--str) 45%,transparent)}
#auth:has(.ahero) .authbox{box-sizing:border-box;width:100%;max-width:460px;justify-self:center;padding:22px max(20px,env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:none;border:0;box-shadow:none;display:flex;flex-direction:column;gap:12px}
#auth:has(.ahero) .authbox>*{margin-top:0;margin-bottom:0}
#auth:has(.ahero) #atitle{text-align:left;margin:0;font:800 italic 40px/1 "Barlow Condensed",system-ui,sans-serif;text-transform:uppercase}
.asub{margin:-4px 0 4px;color:var(--muted);font-size:15px}
.aquick{display:flex;flex-direction:column;gap:10px}
.qbtn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 18px;border-radius:12px;font-weight:800;font-size:15px;color:var(--ink);background:var(--s2);border:1px solid var(--line)}
.qbtn:hover{border-color:var(--muted)}.qbtn:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.qbtn.garmin{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.qbtn .qi{width:22px;height:22px;flex:none}
#auth:has(.ahero) .or{margin:6px 0 0;font-size:13px}
#auth:has(.ahero) .or::before,#auth:has(.ahero) .or::after{background:var(--line)}
#auth:has(.ahero) .btn.pri.wide{min-height:48px;border-radius:12px;font-weight:800}
@media (min-width:900px){
  #auth:has(.ahero){grid-template-columns:minmax(0,1.1fr) minmax(440px,1fr);align-content:stretch}
  .ahero{min-height:100vh;min-height:100dvh;padding:56px}
  .ahero h1{font-size:clamp(56px,5.2vw,76px)}
  .ahero p,.achip.c-str{display:block}
  .achip.c-str{display:inline-block}
  .ahero .alogo{font-size:28px}
  #auth:has(.ahero) .authbox{align-self:center;padding:40px}
}
@media (prefers-reduced-motion:no-preference){.ahero h1{animation:aIn .6s ease-out both}@keyframes aIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}

/* ===== Home C: race countdown hero (design session, 2026-10-19) =====
   Blocks the app renders at the top of #t-home: #hcd (countdown), .hc-row (#htoday + #hready), then #hweek, then .hc-coach. */
.hcd{position:relative;overflow:hidden;isolation:isolate;box-sizing:border-box;display:grid;grid-template-columns:1fr;gap:18px;padding:22px 20px;border-radius:22px;margin:0 0 14px;color:var(--ink);border:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,var(--bgP,#0085ca) 45%,var(--bg)),color-mix(in srgb,var(--red,#e4002b) 22%,var(--bg)))}
.hcd::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.14;background:var(--ink);-webkit-mask:url(backgrounds/20-arch.svg) right center/auto 140% no-repeat;mask:url(backgrounds/20-arch.svg) right center/auto 140% no-repeat}
.hcd .hcd-race{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.hcd .hcd-race .rlogo{width:32px;height:32px;flex:none}
.hcd .hcd-num{display:flex;align-items:baseline;gap:10px;margin:2px 0 6px}
.hcd .hcd-num b{font:800 italic clamp(72px,20vw,120px)/.9 "Barlow Condensed",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hcd .hcd-num span{font:700 clamp(22px,5vw,34px)/1 "Barlow Condensed",system-ui,sans-serif}
.hcd-chips{display:flex;flex-wrap:wrap;gap:6px}
.hcd-chip{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;color:var(--ink);background:color-mix(in srgb,var(--c,var(--bgP)) 24%,transparent);border:1px solid color-mix(in srgb,var(--c,var(--bgP)) 60%,transparent)}
.hcd-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.hcd-bar{position:relative;display:flex;height:14px;border-radius:8px;overflow:visible}
.hcd-bar i{display:block;height:100%;flex:var(--w,1) 1 0;background:var(--c)}
.hcd-bar i:first-child{border-radius:8px 0 0 8px}.hcd-bar i:last-of-type{border-radius:0 8px 8px 0}
.hcd-bar .ph-Base,.hcd-bar .ph-base{--c:var(--blue)}.hcd-bar .ph-Build,.hcd-bar .ph-build{--c:var(--green)}.hcd-bar .ph-Peak,.hcd-bar .ph-peak{--c:var(--yellow)}.hcd-bar .ph-Taper,.hcd-bar .ph-Race,.hcd-bar .ph-taper,.hcd-bar .ph-race{--c:var(--red)}.hcd-bar .ph-Transition,.hcd-bar .ph-Prep{--c:var(--muted)}
.hcd-now{position:absolute;top:-6px;bottom:-6px;left:var(--at,0%);width:4px;margin-left:-2px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px var(--bg)}
.hcd-labels{display:flex;justify-content:space-between;font-size:12px;color:color-mix(in srgb,var(--ink) 75%,transparent)}
.hcd-fit{font-size:14px;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.hcd.empty{grid-template-columns:1fr;text-align:left}
.hcd.empty .hcd-num b{font-size:44px}
.hc-row{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 14px}
.hc-today{box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:20px 22px;border-radius:18px;background:var(--bg-card,var(--surface));border:1px solid var(--line);border-left:6px solid var(--c,var(--red))}
.hc-today .ht-chips{display:flex;flex-wrap:wrap;gap:6px}
.hc-today h2{margin:0;font:800 italic clamp(26px,6vw,34px)/1 "Barlow Condensed",system-ui,sans-serif;text-transform:uppercase;text-wrap:balance}
.hc-today p{margin:0;color:var(--muted);font-size:16px}
.hc-today .ht-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.hc-today .ht-acts .btn{min-height:44px;border-radius:12px;font-weight:800}
.hc-today.rest{--c:var(--muted)}
.hc-ready{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:18px 20px;border-radius:18px;background:var(--bg-card,var(--surface));border:1px solid var(--line)}
.hc-ready .hr-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hc-ready .hr-head h2{margin:0;font:800 italic 22px/1 "Barlow Condensed",system-ui,sans-serif;text-transform:uppercase}
.hr-verdict{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;color:var(--ink);background:color-mix(in srgb,var(--c) 24%,transparent);border:1px solid color-mix(in srgb,var(--c) 60%,transparent)}
.hr-verdict.go{--c:var(--green)}.hr-verdict.easy{--c:var(--yellow)}.hr-verdict.rest{--c:var(--red)}
.hr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hr-stats>div{min-width:0;padding:10px 12px;border-radius:12px;background:var(--s2)}
.hr-stats small{display:block;font-size:12px;color:var(--muted)}
.hr-stats b{display:block;font:700 26px/1.1 "Barlow Condensed",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.hr-stats span{display:block;font-size:11.5px;color:var(--muted);line-height:1.25}
.hr-stats .warn b{color:var(--yellow)}.hr-stats .good b{color:var(--green)}.hr-stats .bad b{color:var(--red)}
.hc-coach{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;margin:0 0 14px;background:var(--bg-card,var(--surface));border:1px solid var(--line);color:var(--muted)}
.hc-coach b{color:var(--ink)}.hc-coach .hc-av{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:800}
.hc-coach p{flex:1;margin:0;min-width:0}
.hc-coach .link{white-space:nowrap;font-weight:700}
/* when Home C is on, the old hero and the duplicate race line step aside */
#t-home:has(#hcd) .hero,#t-home:has(#hcd) #racecd,#t-home:has(#hcd) .htoday,#t-home:has(#hcd) .hrace,#t-home:has(#hcd) .hring,#t-home:has(#hcd) .hform{display:none!important}
#t-home>#hcd,#t-home>.hc-row,#t-home>.hc-coach{min-width:0}
@media (max-width:899px){#t-home:has(#hcd) #hweek .wk7{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px}#t-home:has(#hcd) #hweek .wk7>*{flex:0 0 42%;scroll-snap-align:start}}
@media (min-width:900px){
  .hcd{grid-template-columns:minmax(0,1fr) minmax(260px,320px);align-items:center;padding:28px 32px}
  .hc-row{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}
  #t-home:has(#hcd)>.pghead{order:-1}
  #t-home #hcd{order:0;grid-column:1/-1;margin:0}
  #t-home .hc-row{order:1;grid-column:1/-1;margin:0}
  #t-home:has(#hcd) #hweek{order:2}
  #t-home .hc-coach{order:3;grid-column:1/-1;margin:0}
}
@media (prefers-reduced-motion:no-preference){.hcd .hcd-num b{animation:hcdIn .7s cubic-bezier(.2,.9,.25,1.1) both}@keyframes hcdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}
.hc-today .hcd-chip:not([style]){--c:var(--bgP,#0085ca)}

/* ===== Polish pass after the app review (design session, 2026-10-19) ===== */
/* 7. Primary blue: #0077b6 (darker shade of logo blue) passes 4.5:1 with white; themes keep their own --btn */
html:not([data-theme]) .btn.pri,html:not([data-theme]) .fab{background:#0077b6;border-color:#0077b6;color:#fff}
/* 6 + 11. One selection style everywhere: segmented track + pill colour for the chosen item (same as the menu and Month/Week) */
html:is([data-theme],:not([data-theme])) .tabs{display:flex;gap:2px;padding:3px;border-radius:14px;background:var(--s2);border:1px solid var(--line);box-shadow:none;overflow-x:auto;scrollbar-width:none}
html:is([data-theme],:not([data-theme])) .tabs::-webkit-scrollbar{display:none}
html:is([data-theme],:not([data-theme])) .tabs button{flex:1 0 auto;box-sizing:border-box;display:grid;place-items:center;min-height:44px;padding:0 14px;border:0;border-radius:11px;font-style:normal;text-transform:none;letter-spacing:0;font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap}
html:is([data-theme],:not([data-theme])) .tabs button:hover{color:var(--ink)}
html:is([data-theme],:not([data-theme])) .tabs button[aria-current],
html:is([data-theme],:not([data-theme])) .seg button.on,
html:is([data-theme],:not([data-theme])) .pghead .pseg button.on,
html:is([data-theme],:not([data-theme])) .pills button.on{background:var(--pill,#f4c300);border-color:var(--pill,#f4c300);color:var(--on-pill,#0d1319)}
html:is([data-theme],:not([data-theme])) .seg button,html:is([data-theme],:not([data-theme])) .pghead .pseg button{color:var(--muted)}
html:is([data-theme],:not([data-theme])) .seg button:hover,html:is([data-theme],:not([data-theme])) .pghead .pseg button:hover{color:var(--ink)}
/* 8. Account card in the sidebar when Account is open */
#side .sb-acct.on,#side .sb-acct.on b,#side .sb-acct.on .sbt{color:var(--ink)!important}
/* 9 + 10. Finger-sized controls on phones; keep the calendar + button clear of the last card */
@media (max-width:899px){
  html:is([data-theme],:not([data-theme])) .seg.mini button,html:is([data-theme],:not([data-theme])) .pills button{box-sizing:border-box;display:grid;place-items:center;min-height:44px}
  #rcalc input,#rcalc select{min-height:44px;box-sizing:border-box}
  #t-cal .page{padding-bottom:104px}
  #pfab{box-shadow:0 0 0 4px var(--bg),0 8px 22px rgba(0,0,0,.45)}
}
/* 14. Race hero: the big number shows days, the line below shows weeks and the goal, so the three tiles repeat them */
#rcards .rc.hero .rct{display:none}
/* 13 + 1. Empty states the app can use (analytics chart with no data, side panel with nothing picked) */
.emptybox{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 20px;border-radius:14px;border:1px dashed var(--line);background:color-mix(in srgb,var(--s2) 60%,transparent);color:var(--muted);font-size:15px;line-height:1.4}
.emptybox b{color:var(--ink);font-size:16px}
.emptybox .btn{min-height:44px}

/* ===== Auto backgrounds per tab, matched to the theme (design session, 2026-10-19) =====
   bg.js sets html[data-bg-tab="N"] in Auto mode: the user's choice for this tab, else the theme's pack (static/backgrounds/auto-packs.json).
   A sport you open (data-sport) and the finish line (data-celebrate) still win. */
html[data-bg="auto"]:where([data-bg-tab="1"]){--bg-scrim:0%}html[data-bg="auto"]:where([data-bg-tab="1"]) body::before{display:block;inset:0;background:radial-gradient(60% 55% at 0% 0%,color-mix(in srgb,var(--bgP) 42%,transparent),transparent 65%),radial-gradient(55% 50% at 100% 100%,color-mix(in srgb,var(--bgS) 26%,transparent),transparent 62%);opacity:calc(1 * var(--bg-boost,1));animation:bgPulse 9s ease-in-out infinite alternate;-webkit-mask:none;mask:none}html[data-bg="auto"]:where([data-bg-tab="1"]) body::after{display:none}
html[data-bg="auto"]:where([data-bg-tab="2"]){--bg-scrim:0%}html[data-bg="auto"]:where([data-bg-tab="2"]) body::before{display:block;inset:0;background:linear-gradient(115deg,color-mix(in srgb,var(--blue) 30%,transparent) 0%,color-mix(in srgb,var(--yellow) 16%,transparent) 26%,color-mix(in srgb,var(--str) 8%,transparent) 46%,color-mix(in srgb,var(--green) 18%,transparent) 70%,color-mix(in srgb,var(--red) 22%,transparent) 100%);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}html[data-bg="auto"]:where([data-bg-tab="2"]) body::after{display:none}
html[data-bg="auto"]:where([data-bg-tab="3"]){--bg-scrim:0%}html[data-bg="auto"]:where([data-bg-tab="3"]) body::before{display:block;inset:-25%;background:radial-gradient(45% 22% at 30% 30%,color-mix(in srgb,var(--bgP) 40%,transparent),transparent 70%),radial-gradient(40% 18% at 65% 38%,color-mix(in srgb,var(--green) 30%,transparent),transparent 70%),radial-gradient(35% 16% at 50% 22%,color-mix(in srgb,var(--bgS) 20%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgAurora 38s ease-in-out infinite alternate;-webkit-mask:none;mask:none}html[data-bg="auto"]:where([data-bg-tab="3"]) body::after{display:block;inset:-25%;background:radial-gradient(50% 20% at 60% 25%,color-mix(in srgb,var(--bgP) 22%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgAurora2 52s ease-in-out infinite alternate;-webkit-mask:none;mask:none}
html[data-bg="auto"]:where([data-bg-tab="4"]){--bg-scrim:0%}html[data-bg="auto"]:where([data-bg-tab="4"]) body::before{display:block;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bgP) 40%,transparent) 0%,transparent 52%,color-mix(in srgb,var(--bgS) 30%,transparent) 100%);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}html[data-bg="auto"]:where([data-bg-tab="4"]) body::after{display:none}
html[data-bg="auto"]:where([data-bg-tab="5"]){--bg-scrim:0%}html[data-bg="auto"]:where([data-bg-tab="5"]) body::before{display:block;inset:0;background:radial-gradient(42% 70% at 50% -8%,color-mix(in srgb,var(--bgP) 38%,transparent),transparent 72%),radial-gradient(130% 120% at 50% 40%,transparent 55%,color-mix(in srgb,#000 28%,transparent));opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}html[data-bg="auto"]:where([data-bg-tab="5"]) body::after{display:none}
html[data-bg="auto"]:where([data-bg-tab="6"]){--bg-scrim:0%}html[data-bg="auto"]:where([data-bg-tab="6"]) body::before{display:block;inset:-15%;background:radial-gradient(30% 38% at 20% 70%,color-mix(in srgb,var(--green) 28%,transparent),transparent 70%),radial-gradient(34% 42% at 80% 28%,color-mix(in srgb,var(--bgP) 34%,transparent),transparent 70%),radial-gradient(26% 30% at 55% 92%,color-mix(in srgb,var(--bgS) 22%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgMesh 30s ease-in-out infinite alternate;-webkit-mask:none;mask:none}html[data-bg="auto"]:where([data-bg-tab="6"]) body::after{display:block;inset:-15%;background:radial-gradient(22% 26% at 92% 92%,color-mix(in srgb,var(--red) 18%,transparent),transparent 70%),radial-gradient(25% 30% at 40% 20%,color-mix(in srgb,var(--bgS) 14%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:bgMesh2 41s ease-in-out infinite alternate;-webkit-mask:none;mask:none}
html[data-bg="auto"]:where([data-bg-tab="7"]){--bg-scrim:30%}html[data-bg="auto"]:where([data-bg-tab="7"]) body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.3 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/07-track.svg) center/cover no-repeat;mask:url(backgrounds/07-track.svg) center/cover no-repeat}html[data-bg="auto"]:where([data-bg-tab="7"]) body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/07-track-accent.svg) center/cover no-repeat;mask:url(backgrounds/07-track-accent.svg) center/cover no-repeat}
html[data-bg="auto"]:where([data-bg-tab="8"]){--bg-scrim:30%}html[data-bg="auto"]:where([data-bg-tab="8"]) body::before{display:block;inset:0;background:linear-gradient(135deg,var(--bgP),var(--bgS));opacity:calc(0.3 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/08-topo.svg) center/cover no-repeat;mask:url(backgrounds/08-topo.svg) center/cover no-repeat}html[data-bg="auto"]:where([data-bg-tab="8"]) body::after{display:none}
html[data-bg="auto"]:where([data-bg-tab="9"]){--bg-scrim:30%}html[data-bg="auto"]:where([data-bg-tab="9"]) body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.32 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/09-pool.svg) center/cover no-repeat;mask:url(backgrounds/09-pool.svg) center/cover no-repeat}html[data-bg="auto"]:where([data-bg-tab="9"]) body::after{display:block;inset:-4%;background:var(--bgS);opacity:calc(0.22 * var(--bg-boost,1));animation:bgDrift 24s linear infinite alternate;-webkit-mask:url(backgrounds/09-ripple.svg) center/cover no-repeat;mask:url(backgrounds/09-ripple.svg) center/cover no-repeat}
html[data-bg="auto"]:where([data-bg-tab="10"]){--bg-scrim:30%}html[data-bg="auto"]:where([data-bg-tab="10"]) body::before{display:block;inset:0;background:var(--ink);opacity:calc(0.07 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/10-road.svg) center/cover no-repeat;mask:url(backgrounds/10-road.svg) center/cover no-repeat}html[data-bg="auto"]:where([data-bg-tab="10"]) body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/10-road-dash.svg) center/cover no-repeat;mask:url(backgrounds/10-road-dash.svg) center/cover no-repeat}
html[data-bg="auto"]:where([data-bg-tab="11"]){--bg-scrim:30%}html[data-bg="auto"]:where([data-bg-tab="11"]) body::before{display:block;inset:0;background:linear-gradient(90deg,var(--bgP),var(--bgS));opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/11-hr.svg) center top/cover no-repeat;mask:url(backgrounds/11-hr.svg) center top/cover no-repeat}html[data-bg="auto"]:where([data-bg-tab="11"]) body::after{display:block;inset:0;background:radial-gradient(70% 30% at 50% 0%,color-mix(in srgb,var(--bgP) 18%,transparent),transparent 70%);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
html[data-bg="auto"]:where([data-bg-tab="12"]){--bg-scrim:30%}html[data-bg="auto"]:where([data-bg-tab="12"]) body::before{display:block;inset:0;background:linear-gradient(-62deg,transparent 0 58%,var(--blue) 58% 60.5%,transparent 60.5% 61.5%,var(--yellow) 61.5% 64%,transparent 64% 65%,var(--str) 65% 67.5%,transparent 67.5% 68.5%,var(--green) 68.5% 71%,transparent 71% 72%,var(--red) 72% 74.5%,transparent 74.5%);opacity:calc(0.3 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}html[data-bg="auto"]:where([data-bg-tab="12"]) body::after{display:none}
html[data-bg="auto"]:where([data-bg-tab="13"]){--bg-scrim:25%}html[data-bg="auto"]:where([data-bg-tab="13"]) body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.24 * var(--bg-boost,1));animation:none;-webkit-mask:var(--bg-wave-area,url(backgrounds/13-wave-area.svg)) center/100% 100% no-repeat;mask:var(--bg-wave-area,url(backgrounds/13-wave-area.svg)) center/100% 100% no-repeat}html[data-bg="auto"]:where([data-bg-tab="13"]) body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.6 * var(--bg-boost,1));animation:none;-webkit-mask:var(--bg-wave-line,url(backgrounds/13-wave-line.svg)) center/100% 100% no-repeat;mask:var(--bg-wave-line,url(backgrounds/13-wave-line.svg)) center/100% 100% no-repeat}
html[data-bg="auto"]:where([data-bg-tab="14"]){--bg-scrim:25%}html[data-bg="auto"]:where([data-bg-tab="14"]) body::before{display:block;inset:0;background:var(--bg-season,linear-gradient(90deg,color-mix(in srgb,var(--blue) 22%,transparent) 0 38%,color-mix(in srgb,var(--green) 22%,transparent) 38% 66%,color-mix(in srgb,var(--yellow) 24%,transparent) 66% 86%,color-mix(in srgb,var(--red) 26%,transparent) 86% 95%,color-mix(in srgb,var(--blue) 12%,transparent) 95%));opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}html[data-bg="auto"]:where([data-bg-tab="14"]) body::after{display:block;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/16 - 1px),color-mix(in srgb,var(--ink) 10%,transparent) calc(100%/16 - 1px) calc(100%/16));opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
html[data-bg="auto"]:where([data-bg-tab="15"]){--bg-scrim:25%}html[data-bg="auto"]:where([data-bg-tab="15"]) body::before{display:block;inset:0;background:var(--bgS);opacity:calc(0.45 * var(--bg-boost,1));animation:none;-webkit-mask:var(--bg-route,url(backgrounds/15-route.svg)) center/contain no-repeat;mask:var(--bg-route,url(backgrounds/15-route.svg)) center/contain no-repeat}html[data-bg="auto"]:where([data-bg-tab="15"]) body::after{display:block;inset:0;background:repeating-linear-gradient(0deg,transparent 0 47px,color-mix(in srgb,var(--ink) 6%,transparent) 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,color-mix(in srgb,var(--ink) 6%,transparent) 47px 48px);opacity:calc(1 * var(--bg-boost,1));animation:none;-webkit-mask:none;mask:none}
html[data-bg="auto"]:where([data-bg-tab="16"]){--bg-scrim:40%}html[data-bg="auto"]:where([data-bg-tab="16"]) body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.38 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/16-lake.svg) center/cover no-repeat;mask:url(backgrounds/16-lake.svg) center/cover no-repeat}html[data-bg="auto"]:where([data-bg-tab="16"]) body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.45 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/16-lake-sun.svg) center/cover no-repeat;mask:url(backgrounds/16-lake-sun.svg) center/cover no-repeat}
html[data-bg="auto"]:where([data-bg-tab="17"]){--bg-scrim:40%}html[data-bg="auto"]:where([data-bg-tab="17"]) body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.4 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/17-mountains.svg) center/cover no-repeat;mask:url(backgrounds/17-mountains.svg) center/cover no-repeat}html[data-bg="auto"]:where([data-bg-tab="17"]) body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.6 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/17-hairpins.svg) center/cover no-repeat;mask:url(backgrounds/17-hairpins.svg) center/cover no-repeat}
html[data-bg="auto"]:where([data-bg-tab="18"]){--bg-scrim:40%}html[data-bg="auto"]:where([data-bg-tab="18"]) body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.4 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/18-water.svg) center/cover no-repeat;mask:url(backgrounds/18-water.svg) center/cover no-repeat}html[data-bg="auto"]:where([data-bg-tab="18"]) body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.6 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/18-buoys.svg) center/cover no-repeat;mask:url(backgrounds/18-buoys.svg) center/cover no-repeat}
html[data-bg="auto"]:where([data-bg-tab="19"]){--bg-scrim:40%}html[data-bg="auto"]:where([data-bg-tab="19"]) body::before{display:block;inset:0;background:linear-gradient(180deg,var(--bgP),transparent);opacity:calc(0.2 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/19-skyline.svg) center bottom/cover no-repeat;mask:url(backgrounds/19-skyline.svg) center bottom/cover no-repeat}html[data-bg="auto"]:where([data-bg-tab="19"]) body::after{display:block;inset:0;background:var(--bgS);opacity:calc(0.5 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/19-lights.svg) center bottom/cover no-repeat;mask:url(backgrounds/19-lights.svg) center bottom/cover no-repeat}
html[data-bg="auto"]:where([data-bg-tab="20"]){--bg-scrim:40%}html[data-bg="auto"]:where([data-bg-tab="20"]) body::before{display:block;inset:0;background:var(--bgP);opacity:calc(0.32 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/20-arch.svg) center/cover no-repeat;mask:url(backgrounds/20-arch.svg) center/cover no-repeat}html[data-bg="auto"]:where([data-bg-tab="20"]) body::after{display:block;inset:0;background:linear-gradient(90deg,var(--blue) 0 20%,var(--yellow) 20% 40%,var(--str) 40% 60%,var(--green) 60% 80%,var(--red) 80%);opacity:calc(0.55 * var(--bg-boost,1));animation:none;-webkit-mask:url(backgrounds/20-confetti.svg) center/cover no-repeat;mask:url(backgrounds/20-confetti.svg) center/cover no-repeat}
/* per-tab picker under Personalization (shown when Auto is on) */
.bgmatch{display:none;margin:12px 0 4px;padding:16px;border-radius:16px;background:var(--s2);border:1px solid var(--line)}
#bgpick:has(#bgauto:checked) .bgmatch{display:block}
.bgm-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.bgm-head b{font-size:16px}.bgm-head p{margin:4px 0 0;font-size:13px;color:var(--muted);max-width:62ch}
.bgm-theme{display:inline-block;padding:1px 8px;border-radius:999px;font-weight:800;font-size:12px;color:var(--on-pill,#0d1319);background:var(--pill,#f4c300)}
.bgm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.bgm-row{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:6px;align-items:center;padding:8px;border-radius:14px;background:var(--bg-card,var(--surface));border:1px solid var(--line)}
.bgm-row .bgprev{grid-row:1/3;width:92px;aspect-ratio:16/10;border-radius:10px}
.bgm-row .bgm-t{min-width:0}.bgm-row .bgm-t b{display:block;font-size:14px}.bgm-row .bgm-t small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgm-row select{min-height:40px;width:100%;box-sizing:border-box;border-radius:10px;background:var(--input-bg,var(--bg));color:var(--ink);border:1px solid var(--line);padding:0 8px;font:inherit;font-size:13px}
.bgm-row.mine{border-color:var(--pill,#f4c300)}
.bgm-row.mine .bgm-t small::after{content:" · your pick";color:var(--ink);font-weight:700}
.bgm-row.now{box-shadow:0 0 0 2px var(--link)}
.thcard .thpack{font-size:11px;color:var(--muted)}
/* Home "This week" on phones: web.css styles the day cells for desktop only, so they showed as plain grey boxes */
@media (max-width:899px){
  #hweek .chead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
  #hweek .wk7{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
  #hweek .wk7::-webkit-scrollbar{display:none}
  #hweek .wd{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 40%;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-height:112px;padding:10px 10px 10px 12px;border-radius:14px;background:var(--s2);border:1px solid var(--line);border-left:4px solid var(--c,var(--line))}
  #hweek .wd .dn{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;display:flex;justify-content:space-between}
  #hweek .wd .dd{font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:800;font-size:22px;line-height:1}
  #hweek .wd .it{font-size:12.5px;line-height:1.25;overflow:hidden}
  #hweek .wd .it b{display:block;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  #hweek .wd .it span{color:var(--muted)}
  #hweek .wd.done .dn::after{content:"✓";color:var(--green);font-size:14px}
  #hweek .wd.plan{background:color-mix(in srgb,var(--c) 8%,var(--s2))}
  #hweek .wd.rest{background:transparent;border:1px dashed var(--line)}
  #hweek .wd.today{outline:2px solid var(--pill,#f4c300);outline-offset:-1px}
  #hweek .wd:focus-visible{outline:2px solid var(--link)}
}

/* Races: the next-race card follows the theme (it was always red), design session 2026-10-20.
   Tinted from the theme's own colours on the theme background, text in the theme ink, so every theme stays readable. */
html #t-races #rcards .rc.hero{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-primary,var(--red)) 40%,var(--bg)) 0%,color-mix(in srgb,var(--accent-secondary,var(--accent-primary,var(--red))) 20%,var(--bg)) 100%);
  border:2px solid var(--accent-primary,var(--red));color:var(--ink)}
html #t-races #rcards .rc.hero .tag,html #t-races #rcards .rc.hero .sub{color:color-mix(in srgb,var(--ink) 92%,transparent)}
html #t-races #rcards .rc.hero .goalt{color:var(--ink)}
html #t-races #rcards .rc.hero .goalt small{color:color-mix(in srgb,var(--ink) 80%,transparent)!important}
html #t-races #rcards .rc.hero .edit{color:var(--ink)}
html #t-races #rcards .rc.hero.sel{outline:3px solid var(--pill,#f4c300);outline-offset:2px}
/* the three tiles repeat the days, weeks and goal shown above them */
html #t-races #rcards .rc.hero .rct{display:none}

/* Calendar: keep the week summary right under the week board when a workout is open beside it (design session, 2026-10-20).
   Before, the board stretched to the panel's height and the summary dropped below the panel. */
@media (min-width:1240px){
  body.panel-open #t-cal>.page{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);grid-template-rows:auto auto auto auto auto 1fr;
    grid-template-areas:"head head" "recbar recbar" "warn warn" "main panel" "sum panel" "fill panel";column-gap:16px;align-items:start}
  body.panel-open #t-cal>.page>*{grid-column:1/-1}
  body.panel-open #t-cal #calsplit{display:contents}
  body.panel-open #t-cal .calhead{grid-area:head}
  body.panel-open #t-cal #recbar{grid-area:recbar}
  body.panel-open #t-cal #calwarn{grid-area:warn}
  body.panel-open #t-cal #calmain{grid-area:main;align-self:start;min-width:0}
  body.panel-open #t-cal #calsum{grid-area:sum;margin-top:16px}
  body.panel-open #t-cal #calpanel{grid-area:panel;align-self:start;max-width:none}
}
/* on every width the day columns only grow to their cards, never to the panel's height */
#t-cal #calsplit{align-items:flex-start}

/* Plan > weekly schedule: one row per day, day name beside its sessions, quieter controls (design session, 2026-10-21) */
#sgrid{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:12px;row-gap:0;margin-top:4px}
#sgrid .sday{margin:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 0;border-top:1px solid var(--line);font:800 italic 20px/1 "Barlow Condensed",Barlow,sans-serif;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
#sgrid .srow{display:flex;gap:8px;align-items:stretch;padding:8px 0;border-top:1px solid var(--line)}
#sgrid .sday:first-child,#sgrid .sday:first-child+.srow{border-top:0}
/* sessions first, the empty "+" after them, so a single session always sits next to the day name */
#sgrid .srow>.slot:not(.empty){order:1;flex:1 1 0}
#sgrid .srow>.slot.empty{order:2;flex:0 0 auto}
#sgrid .srow:not(:has(.slot:not(.empty)))>.slot.empty:first-child{flex:1 1 0}
#sgrid .slot{min-height:52px;border-radius:14px;border:1px solid var(--line);background:var(--bg-card,var(--s2));gap:10px;padding:0 6px 0 0;text-transform:none;font-size:15px;font-weight:600;letter-spacing:0;transition:border-color .15s,box-shadow .15s,transform .15s}
#sgrid .slot:not(.empty):hover{border-color:var(--muted)}
#sgrid .slot>span:not(.badge){color:var(--ink)}
#sgrid .slot .badge{flex:none;border-radius:10px}
/* grip: a small six-dot handle instead of the blue dotted block */
#sgrid .grip{width:26px;align-self:stretch;border:0;border-right:1px solid var(--line);border-radius:14px 0 0 14px;background:transparent radial-gradient(circle,var(--muted) 1.3px,transparent 1.8px) center/7px 7px;background-size:7px 7px;background-repeat:repeat;background-position:center;mask:linear-gradient(#000,#000) center/12px 20px no-repeat;-webkit-mask:linear-gradient(#000,#000) center/12px 20px no-repeat}
#sgrid .slot:hover .grip{background-image:radial-gradient(circle,var(--ink) 1.3px,transparent 1.8px)}
#sgrid .slot .x{flex:none;width:32px;height:32px;padding:0;display:grid;place-items:center;border-radius:10px;color:var(--muted);font-size:14px;opacity:.75}
#sgrid .slot .x:hover,#sgrid .slot .x:focus-visible{opacity:1;color:var(--red,#e4002b);background:color-mix(in srgb,var(--red,#e4002b) 12%,transparent)}
/* empty slot: a quiet dashed "+ Add" */
#sgrid .slot.empty{display:flex;align-items:center;justify-content:center;white-space:nowrap;min-height:52px;min-width:96px;padding:0 16px;border-radius:14px;border:1.5px dashed var(--line);background:transparent;color:var(--muted);font:600 14px/1 Barlow,sans-serif}
#sgrid .slot.empty::after{content:" Add";margin-left:4px}
#sgrid .slot.empty:hover,#sgrid .slot.empty:focus-visible{border-color:var(--link);color:var(--link)}
/* rest day: both slots empty, show one wide "Rest day · + Add a session" */
#sgrid .srow:not(:has(.slot:not(.empty)))>.slot.empty:first-child::before{content:"Rest day";font-style:italic;font-weight:500;margin-right:auto;color:var(--muted)}
#sgrid .srow:not(:has(.slot:not(.empty)))>.slot.empty:first-child{justify-content:flex-end;gap:4px}
#sgrid .srow:not(:has(.slot:not(.empty)))>.slot.empty:first-child::after{content:" Add a session"}
#sgrid .srow:not(:has(.slot:not(.empty)))>.slot.empty+.slot.empty{display:none}
/* picked for moving */
#sgrid .slot.pick{outline:none;border-color:var(--pill,#f4c300);box-shadow:0 0 0 3px color-mix(in srgb,var(--pill,#f4c300) 45%,transparent);transform:translateY(-1px)}
#sgrid:has(.slot.pick) .slot.empty{border-color:var(--pill,#f4c300);color:var(--ink)}
#sgrid:has(.slot.pick) .slot.empty::after{content:" Move here"}
@media (max-width:620px){
  #sgrid{grid-template-columns:52px minmax(0,1fr);column-gap:10px}
  #sgrid .sday{font-size:17px}
  #sgrid .srow{flex-direction:column;gap:6px}
  #sgrid .srow>.slot.empty{min-height:40px}
  #sgrid .srow:has(.slot:not(.empty))>.slot.empty{align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){#sgrid .slot{transition:none}#sgrid .slot.pick{transform:none}}

/* Coach diagnostic: training hours per year chart (design session, 2026-10-21) */
.ash{margin:14px 0 4px}
.ash figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:10px;font-size:13px}
.ash figcaption b{font-size:14px;color:var(--ink)}
.ash-leg{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted)}.ash-leg span{display:inline-flex;align-items:center;gap:5px}.ash-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.ash-plot{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px}
.ash-axis{position:relative;height:170px;margin-top:20px}
.ash-axis span{position:absolute;right:0;transform:translateY(50%);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ash-bars{display:flex;gap:clamp(4px,1.4vw,14px);align-items:stretch;min-width:0;padding-top:20px;background:linear-gradient(var(--line),var(--line)) 0 20px/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 calc(20px + 85px)/100% 1px no-repeat}
.ash-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ash-track{position:relative;width:100%;height:170px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-bottom:1px solid var(--muted)}
.ash-bar{position:relative;flex:none;width:min(100%,56px);min-height:2px}
.ash-seg{height:100%;display:flex;flex-direction:column;border-radius:6px 6px 2px 2px;overflow:hidden}
.ash-seg i{display:block;min-height:0}
.ash-v{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px);font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ash-y{font-size:12px;font-weight:600;color:var(--muted);text-align:center;line-height:1.2;font-variant-numeric:tabular-nums}
.ash-y small{display:block;font-size:10.5px;font-weight:500}
.ash-col.now .ash-seg{opacity:.85;background-image:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(255,255,255,.18) 5px 8px)}
.ash-col.now .ash-y{color:var(--ink)}
.ash-col:hover .ash-seg{filter:brightness(1.12)}
@media (max-width:560px){.ash-plot{grid-template-columns:34px minmax(0,1fr)}.ash-track,.ash-axis{height:140px}.ash-bars{background:linear-gradient(var(--line),var(--line)) 0 20px/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 calc(20px + 70px)/100% 1px no-repeat}.ash-v{font-size:10.5px}.ash-y{font-size:11px}}

/* Analytics > Summary tab and removed repeats (design session, 2026-10-21) */
#a-sum:not([hidden]){display:flex;flex-direction:column;gap:16px}
#a-sum>.card{margin:0}
#a-sum #bigs,#a-sum #racecd{display:none!important}          /* all-time totals repeat the ALL TIME view; the race countdown lives on Home and Races */
@media (min-width:900px){
  html #t-acts #atabs{display:flex;max-width:1180px;margin:0 auto 16px;box-sizing:border-box}
  html #t-acts #alistbtn,html #t-acts #atrendsbtn{display:none!important}   /* Activities and Trends are tabs now */
  html #t-acts:has(#a-fit[hidden]) .pmseg{display:none!important}  /* Swim/Bike/Run/Heart rate only belong to Fitness */
}
/* Coach: today's workout and readiness are on Home, so the Coach page keeps the chat and the specialists */
html #t-coach #cctx{display:none!important}
@media (min-width:900px){html #t-coach #cpanel,html #t-coach #cpanel[hidden]{grid-row:1/3}}

/* ===== Layout pass (design session, 2026-10-21): suggestions 1–5 ===== */
/* 1. One place and one look for sub-tabs: a pill row under the page title, left aligned, on every page and width */
html #t-plan #ptabs,html #t-acts #atabs,html #t-account #mtabs{width:fit-content;max-width:100%;margin:0 0 16px;box-sizing:border-box}
html #t-plan #ptabs button,html #t-acts #atabs button,html #t-account #mtabs button{flex:0 0 auto}
@media (min-width:900px){
  html #t-plan #ptabs{display:flex!important}
  html #t-plan .pghead .pseg,html #t-plan #pdiagbtn{display:none!important}     /* the same five views now live in #ptabs */
  html #t-plan #ptabs,html #t-acts #atabs,html #t-account #mtabs{margin-left:0;margin-right:auto}
  html #t-plan>#ptabs,html #t-acts>#atabs{max-width:1180px}
}
/* phones: rows that scroll sideways fade at the edge so you can tell there is more */
@media (max-width:899px){
  html #ptabs.fadeR,html #mtabs.fadeR,html #atabs.fadeR,#coaches.cavrow.fadeR{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  html #ptabs,html #mtabs,html #atabs{width:auto;margin:0 0 12px}
}

/* 2. Use the width on desktop */
@media (min-width:1100px){
  /* Plan: AI planning on the left, quick links on the right */
  #p-plan:not([hidden]){display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);grid-template-rows:auto auto auto 1fr;gap:16px;align-items:start}
  #p-plan>*{margin:0!important;min-width:0}
  #p-plan>#bcard{grid-column:1/-1;grid-row:1}
  #p-plan>#patpband{grid-column:1/-1;grid-row:2}
  #p-plan>.card{grid-column:1;grid-row:3/5}
  #p-plan>#sickplan{grid-column:2;grid-row:3}
  #p-plan>#libbtn{grid-column:2;grid-row:4}
  #p-plan:has(#bcard:empty)>#bcard,#p-plan:has(#patpband:empty)>#patpband{display:none}
}
@media (min-width:1200px){
  /* Races: one race → pacing and split calculator beside it; two races → no empty third column */
  #t-races>.page:has(#rcards>.rc:only-child) #rcards{grid-column:1;grid-row:1/3;grid-template-columns:1fr}
  #t-races>.page:has(#rcards>.rc:only-child)>#rpace{grid-column:2;grid-row:1}
  #t-races>.page:has(#rcards>.rc:only-child)>#rcalc{grid-column:2;grid-row:2}
  #rcards:has(>.rc:nth-child(2):last-child){grid-template-columns:2fr 1fr}
}
@media (min-width:900px){
  /* Account: forms at a readable width, short fields two to a row */
  html #t-account .page .card{max-width:860px}
  #m-profile .card:has(#pathlete){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  #m-profile .card:has(#pathlete)>:not(label.f){grid-column:1/-1}
  #m-profile .card:has(#pathlete)>label.f{margin:0 0 10px}
}

/* 3. Empty cards stay small and say what to do */
.hc-ready:has(.hr-stats:empty){align-self:start;gap:8px}
.hc-ready:has(.hr-stats:empty) .hr-stats{display:none}
.hc-ready .xcta,#rpace .xcta{align-self:flex-start;min-height:40px;margin-top:2px}
#rpace:has(.xcta){display:flex;flex-direction:column;gap:8px;align-items:flex-start}
#rpace:has(.xcta)>p.note{margin:0}
#a-sum .sumbox{justify-content:flex-start;gap:clamp(24px,6vw,72px);padding:16px 28px}

/* 4. Home ends with the coach message: the three coach buttons repeat the Coach tab */
#t-home #hcoach{display:none!important}

/* 5. Phones: smaller card titles, the calendar + button steps aside while you scroll down */
@media (max-width:620px){html .card>.h,html .card .chead>.h,html .card>h2.h{font-size:19px}}
#pfab{transition:transform .25s ease,opacity .25s ease}
body.scroll-down #pfab{transform:translateY(120px);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){#pfab{transition:none}}

/* 6. Sidebar "Today" line (needs static/sidebar-today.js linked, see DESIGN_HANDOFF.md) */
#side .sb-today{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;margin:14px 12px 0;padding:10px 12px;border-radius:14px;background:var(--s2);border:1px solid var(--line);color:var(--ink)}
#side .sb-today:hover{border-color:var(--muted)}#side .sb-today:focus-visible{outline:3px solid var(--link);outline-offset:2px}
#side .sb-today .badge{flex:none}
#side .sb-today .sbt2{display:flex;flex-direction:column;min-width:0;gap:1px}
#side .sb-today small{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#side .sb-today b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#side .sb-today em{font-style:normal;font-size:12px;color:var(--muted)}
#side .sb-today.rest b{color:var(--muted)}
#side .sb-help{margin-top:auto}

/* Home: more compact, and no week strip (the Calendar tab has the week) (design session, 2026-10-21) */
#t-home #hweek{display:none!important}
#t-home .hcd{padding:20px 20px 16px;gap:12px;border-radius:18px}
#t-home .hcd .hcd-num{margin:0 0 4px}
#t-home .hcd .hcd-num b{font-size:clamp(52px,10vw,76px)}
#t-home .hcd .hcd-num span{font-size:clamp(17px,3.4vw,24px)}
#t-home .hcd .hcd-race{font-size:13px}
#t-home .hcd::after{opacity:.09}
#t-home .hc-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:12px}
#t-home .hc-today{padding:14px 16px;gap:6px;border-radius:16px}
#t-home .hc-today h2{font-size:clamp(20px,3vw,26px)}
#t-home .hc-today p{font-size:14px}
#t-home .hc-today .ht-acts{gap:6px;margin-top:2px}
#t-home .hc-today .ht-acts .btn{min-height:38px;padding:0 12px;font-size:14px;border-radius:10px}
#t-home .hc-ready{padding:14px 16px;gap:8px;border-radius:16px}
#t-home .hc-ready .hr-head h2{font-size:19px}
#t-home .hr-stats>div{padding:8px 10px}
#t-home .hr-stats b{font-size:22px}
#t-home .hc-coach{padding:10px 14px;font-size:14px}
#t-home .hadapt,#t-home .hdata{padding:14px 16px;font-size:14px;line-height:1.4}
#t-home .hadapt .h,#t-home .hdata .h{font-size:18px;margin-bottom:6px}
#t-home .hadapt p{margin:0 0 6px}
#t-home .hdata ul{margin:0;padding-left:18px}
#t-home .hadapt details,#t-home .hadapt .note{font-size:12.5px}
@media (min-width:900px){
  #t-home{gap:12px!important}
  #t-home .hadapt,#t-home .hdata{grid-column:span 6!important}
}

/* Race logos are square icons now (race_logo.py iconify): fill the frame like an app icon (design session, 2026-10-21) */
.rlogo:not(.badge-fb){background:var(--bg-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent)}
.rlogo:not(.badge-fb) img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;display:block}

/* Race icons: fallback initials, pending state, focus badge (design session, 2026-10-21) */
.rlogo[data-ini]::after{content:attr(data-ini);position:absolute;inset:auto 0 0 0;padding:1px 0 2px;text-align:center;font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:800;font-size:12px;letter-spacing:.5px;color:#fff;background:color-mix(in srgb,var(--accent-primary,#0085ca) 70%,#000)}
.rlogo.badge-fb[data-ini] img{transform:translateY(-5px) scale(.8)}
.rlogo.sm[data-ini]::after{display:none}
.rlogo.badge-fb[data-pending]::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent-secondary,#f4c300) 55%,transparent);animation:rlogoPend 2.4s ease-in-out infinite;pointer-events:none}
@keyframes rlogoPend{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.rlogo.badge-fb[data-pending]::before{animation:none}}
.rlogo img{transition:opacity .25s}
.focbadge .rlogo.sm{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.8)}

/* Speed echo icons (sport-icons.js): frameless, the figure takes the theme's text colour (design session, 2026-10-21) */
.echo-ic{display:block;overflow:visible;color:var(--ink,#111)}
.badge.echo{background:none!important;box-shadow:none!important;border-radius:0}
.badge.echo .echo-ic{width:100%;height:100%}
.rlogo.badge-fb .echo-ic{width:100%;height:100%}
.rlogo.badge-fb[data-dist] .echo-ic,.rlogo.badge-fb[data-ini] .echo-ic{transform:translateY(-5px) scale(.8)}
.rlogo.sm.badge-fb .echo-ic{transform:none}
.focbadge .rlogo.badge-fb{background:#fff}.focbadge .rlogo.badge-fb .echo-ic{color:#111}

/* Plan > ATP: "Your next 16 months" and "Month by month" in one card (moved from Races; design session, 2026-10-21) */
#seasoncard .smonths{margin:18px 0 2px;padding-top:14px;border-top:1px solid var(--line)}
#seasoncard .seasonbar{height:16px;border-radius:999px}
#seasoncard .seasonends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px}
#seasoncard .legend{margin-top:6px}
#atprows .sphs{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
#atprows .sph{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink)}
#atprows .sph small{font-weight:400;color:var(--muted);font-size:12px}
#atprows .sph .phdot{margin:0}

/* Personal details and place droplists: two fields side by side, stacked on phones (design session, 2026-10-21) */
.pair2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0 12px}
.pair2>.f{min-width:0}
select:disabled{opacity:.55}

/* Home order (design session, 2026-10-21): countdown, today + readiness, head coach, sick/injured link,
   then "New activity synced" and "Data health" side by side. Before, those two had no place in the grid and landed above today. */
#t-home:has(#hcd) #hcd{order:0}
#t-home:has(#hcd) .hc-row{order:1}
#t-home:has(#hcd) .hc-coach{order:2}
#t-home:has(#hcd) #healthcard{order:3;grid-column:1/-1;margin:0}
#t-home:has(#hcd) .hadapt{order:4;grid-column:1/-1;margin:0}
#t-home:has(#hcd) .hdata{order:5;grid-column:1/-1;margin:0}
#t-home:has(#hcd) #healthcard p{margin:0!important;padding:0 6px}
#t-home .hadapt .actions{margin:6px 0 8px}
#t-home .hadapt .actions .btn,#t-home .hadapt .aprop .btn{min-height:34px;padding:0 12px;font-size:13.5px;border-radius:10px}
#t-home .hadapt hr{margin:8px 0}
@media (min-width:900px){
  #t-home:has(#hcd) .hadapt{grid-column:1/span 7!important}
  #t-home:has(#hcd) .hdata{grid-column:8/-1!important}
  #t-home:has(#hcd):not(:has(.hdata)) .hadapt,#t-home:has(#hcd):not(:has(.hadapt)) .hdata{grid-column:1/-1!important}
}
@media (max-width:899px){#t-home:has(#hcd){display:flex;flex-direction:column;gap:12px}#t-home:has(#hcd)>.hero,#t-home:has(#hcd)>.page,#t-home:has(#hcd) #hgrid{display:contents}}

/* Plan page arranged (design session, 2026-10-21). "html #t-plan" beats web.css, which loads after this file. */
html #t-plan #p-plan>*,html #t-plan #p-zones>*,html #t-plan #p-sched>*,html #t-plan #p-atp>*{margin:0!important;min-width:0}
html #t-plan #p-plan:not([hidden]),html #t-plan #p-zones:not([hidden]),html #t-plan #p-sched:not([hidden]),html #t-plan #p-atp:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
html #t-plan #zextra:empty,html #t-plan #pmcard:empty,html #t-plan #bcard:empty,html #t-plan #patpband:empty{display:none}
@media (min-width:1100px){
  /* Plan: the phase band across the top, AI planning left, the two quick links stacked right */
  html #t-plan #p-plan:not([hidden]){grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);grid-template-rows:auto auto auto auto 1fr}
  html #t-plan #p-plan>#bcard{grid-column:1/-1;grid-row:1}
  html #t-plan #p-plan>#patpband{grid-column:1/-1!important;grid-row:2}
  html #t-plan #p-plan>.card{grid-column:1;grid-row:3/6}
  html #t-plan #p-plan>#sickplan{grid-column:2;grid-row:3}
  html #t-plan #p-plan>#libbtn{grid-column:2;grid-row:4}
  /* Schedule: why the coaches built this week beside the hours link, the week below at full width */
  html #t-plan #p-sched:not([hidden]){grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr)}
  html #t-plan #p-sched>#swhy{grid-column:1;grid-row:1}
  html #t-plan #p-sched>#hrsbtn{grid-column:2;grid-row:1}
  html #t-plan #p-sched:has(#swhy[hidden])>#hrsbtn{grid-column:1/-1}
  html #t-plan #p-sched>.card:not(#swhy){grid-column:1/-1;grid-row:2}
}
@media (min-width:1200px){
  /* Zones: the link on top, Training zones and Racing guidelines side by side, extras below */
  html #t-plan #p-zones:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}
  html #t-plan #p-zones>#custz,html #t-plan #p-zones>#zextra,html #t-plan #p-zones>#pmcard{grid-column:1/-1}
  html #t-plan #p-zones>#zextra{grid-row:3}
  html #t-plan #p-zones>#pmcard{grid-row:4}
  html #t-plan #p-zones .zseg{flex-wrap:wrap}
  html #t-plan #p-zones .zseg button{flex:1 1 auto;padding-inline:8px;font-size:12px}
}

/* Plan tab status box: Sick · Injured · Vacation · Travel (design session, 2026-10-22) */
#sickplan.stbox{display:block;cursor:pointer;text-align:left}
#sickplan.stbox>div{display:flex;flex-direction:column;gap:2px}
#sickplan .stchips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
#sickplan .stchips button{min-height:40px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink);font:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:0 6px}
#sickplan .stchips button:hover{border-color:var(--accent-primary,#0085ca);background:color-mix(in srgb,var(--accent-primary,#0085ca) 14%,transparent)}
#sickplan .stchips button:focus-visible{outline:3px solid var(--accent-secondary,#f4c300);outline-offset:2px}
@media (max-width:420px){#sickplan .stchips{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Coach tab: one coach to talk to; the head coach asks the specialists in the background (design session, 2026-10-24) */
html #t-coach #coaches,html #t-coach #spec,html #t-coach label[for="spec"],html #t-coach #teamrow{display:none!important}
html #t-coach .coachtop{display:flex;justify-content:flex-end;min-height:0}
html #t-coach .teamnote{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
html #t-coach .teamnote b{display:block;font-size:14px;margin-bottom:2px}
html #t-coach .teamnote p{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
@media (min-width:900px){
  html #t-coach>.page{grid-template-columns:minmax(0,3fr) minmax(240px,1fr)!important}
  html #t-coach .coachtop{display:none}
  html #t-coach #aboutcoach{grid-column:1;grid-row:1}
  html #t-coach .cfc{grid-column:1;grid-row:2/5}
  html #t-coach #cpanel,html #t-coach #cpanel[hidden]{grid-column:2!important;grid-row:1/3!important}
}

/* Race icons on phones: Races and ATP like the web (design session, 2026-10-27) */
.atpevs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 10px;margin-top:4px}
.atprace{display:inline-flex;align-items:center;gap:6px}
.atprace .rlogo.sm{width:24px;height:24px;border-radius:7px}
.bandrace{position:absolute;top:-1px;width:12px;height:12px;border-radius:50%;transform:translateX(-50%);background:var(--grey,#8a95a1);border:2px solid var(--bg);z-index:2}
.bandrace.A{width:18px;height:18px;top:-4px;background:var(--red)}.bandrace.B{background:var(--blue)}.bandrace.T{background:var(--orange,#f4c300)}
#patpband .bandwrap{position:relative}
.tllist{display:none}
@media (max-width:899px){
  #rcards .rc{position:relative}
  #rcards .rc .rcl{display:block;position:absolute;right:12px;top:12px;z-index:1}
  #rcards .rc .rcl .rlogo{width:44px;height:44px;border-radius:12px}
  #rcards .rc.hero .rcl .rlogo{width:56px;height:56px;border-radius:14px}
  #rcards .rc>b{padding-right:58px}
  html #t-races #rtl{display:block;margin:0 0 14px;padding:14px 14px 8px}
  html #t-races #rtl[hidden]{display:none}
  #rtl .chead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  #rtl .tlwrap{position:relative;height:34px;margin:8px 6px 4px}
  #rtl .tlband{position:absolute;left:0;right:0;top:10px;height:12px}
  #rtl .tltoday{position:absolute;left:0;top:4px;width:4px;height:24px;border-radius:2px;background:var(--yellow);transform:translateX(-50%)}
  #rtl .tlm{position:absolute;top:0;bottom:0;width:0}
  #rtl .tld{position:absolute;left:0;top:9px;transform:translate(-50%,0);width:14px;height:14px;border-radius:50%;background:var(--grey,#8a95a1);border:2px solid var(--bg);z-index:2}
  #rtl .tlm.A .tld{width:20px;height:20px;top:6px;background:var(--red)}#rtl .tlm.B .tld{width:16px;height:16px;top:8px;background:var(--blue)}#rtl .tlm.T .tld{background:var(--orange,#f4c300)}
  #rtl .tll{display:none}
  #rtl .tllist{display:flex;flex-direction:column;gap:8px;list-style:none;margin:10px 0 4px;padding:0}
  #rtl .tllist li{display:flex;align-items:center;gap:10px;min-width:0}
  #rtl .tllist li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--grey,#8a95a1)}
  #rtl .tllist li.A::before{background:var(--red)}#rtl .tllist li.B::before{background:var(--blue)}#rtl .tllist li.T::before{background:var(--orange,#f4c300)}
  #rtl .tllist .rlogo.sm{width:30px;height:30px;border-radius:8px;flex:none}
  #rtl .tllist span{display:flex;flex-direction:column;min-width:0}
  #rtl .tllist b{font-size:14px;line-height:1.25}
  #rtl .tllist small{font-size:12px;color:var(--muted)}
}

/* Home countdown: the small race icon shows no distance label (it covered the icon on every screen size) (design session, 2026-10-27) */
html #t-home .hcd .hcd-race .rlogo{width:38px;height:38px;border-radius:10px}
html #t-home .hcd .hcd-race .rlogo[data-dist]::after,html #t-home .hcd .hcd-race .rlogo[data-ini]::after{display:none}
html #t-home .hcd .hcd-race .rlogo.badge-fb .echo-ic,html #t-home .hcd .hcd-race .rlogo.badge-fb img{transform:none}

/* ==== BILLING HIDDEN until the official launch (design session, 2026-10-27) ====
   Hides the Billing tab under Account, its section and the Billing row in the phone account sheet.
   To bring Billing back: delete this block. Nothing else was changed. */
html:not(.owner-view) #mtabs [data-m="billing"],html:not(.owner-view) #m-billing,html:not(.owner-view) #acctsheet.acs .acs-list button[data-acs="billing"]{display:none!important}   /* shown in Owner view */
/* ==== end BILLING HIDDEN ==== */