/* ATP design system. Dark theme, no framework. Typography is role-based: a modular scale (--fs-*) + line-heights (--lh-*) so every surface sizes for its job — readable body, a slightly larger nav, strong title hierarchy, and data/numbers sized for scanning (closer to TrainerRoad's calmer, larger feel). */ :root{ /* Dark theme — athletic instrument */ --bg:#0d1117; --bg2:#11161d; --surface:#161b22; --surface2:#1c232c; --border:#2a323c; --border2:#39424e; --text:#e6edf3; --text2:#9aa7b4; --text3:#6b7785; --accent:#3b82f6; /* Conventional PMC colors (D26 §4) */ --ctl:#4a9eff; --atl:#c678dd; --tsb:#e3c93b; /* TSB / form states */ --fresh:#4ec9a3; --neutral:#9aa7b4; --fatigued:#e0a458; --overreached:#e06c75; /* day-type chips */ --ez:#4ec9a3; --ss:#e3c93b; --end:#4a9eff; --vo2:#e06c75; --tmp:#e0a458; --rest:#6b7785; --ok:#4ec9a3; --warn:#e0a458; --mono:"SF Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Type scale (role-based) */ --fs-2xs:11px; /* micro: day-of-week, badges */ --fs-xs:12px; /* chips, day-type, captions */ --fs-sm:13px; /* secondary / meta */ --fs-base:14.5px;/* body */ --fs-md:15px; /* nav, emphasized body */ --fs-lg:18px; /* card / workout titles */ --fs-xl:23px; /* page heading */ --fs-data:20px; /* hero numbers (TSS, watts, deltas) */ --lh-tight:1.25; --lh-snug:1.4; --lh-base:1.55; --eyebrow:.07em; /* tracking for uppercase section labels */ /* spacing ramp */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; color-scheme:dark; --tip-bg:rgba(13,17,23,.95); /* chart-tooltip surface (themed below) */ } /* Light theme — same tokens, flipped surfaces. Toggle in Settings (persisted per device); a head script sets data-theme="light" on before paint, so everything that uses the vars follows. */ [data-theme="light"]{ color-scheme:light; --bg:#f6f8fa; --bg2:#ffffff; --surface:#ffffff; --surface2:#eef1f5; --border:#d0d7de; --border2:#b9c2cc; --text:#1f2328; --text2:#57606a; --text3:#8b949e; --neutral:#57606a; /* deepen accent/day-type colors so sparklines and chip text read on white */ --tsb:#b08400; --ss:#b08400; --end:#2563eb; --ez:#0d9668; --tmp:#c2740a; --vo2:#dc2626; --tip-bg:rgba(255,255,255,.97); /* light tooltip surface (was hardcoded dark) */ } /* Light overrides for surfaces that hardcode a dark tint (kept dark-only above). */ [data-theme="light"] .dt-ez,[data-theme="light"] .dt-ss,[data-theme="light"] .dt-end, [data-theme="light"] .dt-vo2,[data-theme="light"] .dt-tmp,[data-theme="light"] .dt-rest{ background:var(--surface2)} [data-theme="light"] .upd-chip,[data-theme="light"] .note-banner{ background:#eaf2fb;border-color:#cfe0f5} /* sparklines are tuned for dark; lift opacity so the colored line/area read on white */ [data-theme="light"] .rideviz .line{opacity:1} [data-theme="light"] .rideviz .area{opacity:.22} /* chips: the tag fill + tsb borders are dark-tinted; flip to light surfaces/borders */ [data-theme="light"] .chip.tag{background:var(--surface2);border-color:var(--border2)} [data-theme="light"] .chip.tsb{border-color:#a7cdbc} [data-theme="light"] .chip.tsb.fatigued,[data-theme="light"] .chip.tsb.overreached{border-color:#dac28e} *{box-sizing:border-box;margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--fs-base); line-height:var(--lh-base);-webkit-font-smoothing:antialiased;display:flex;min-height:100vh} a{color:inherit;text-decoration:none} /* ---------- NAV RAIL (a touch larger — primary wayfinding) ---------- */ .nav{width:204px;flex:0 0 204px;background:var(--bg2);border-right:1px solid var(--border);padding:18px 12px;position:sticky;top:0;height:100vh} .logo{font-weight:700;font-size:var(--fs-lg);letter-spacing:.4px;padding:6px 10px 20px;color:var(--text)} .logo small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--text3);letter-spacing:.2px;margin-top:2px} .nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;color:var(--text2);font-size:var(--fs-md);font-weight:500;margin-bottom:3px;cursor:pointer;position:relative} .nav a:hover{background:var(--surface);color:var(--text)} .nav a.active{background:var(--surface2);color:var(--text)} .nav a .ico{width:18px;text-align:center;opacity:.85} .badge{position:absolute;right:10px;background:var(--accent);color:#fff;font-size:var(--fs-2xs);font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px} .nav .note{margin-top:20px;padding:8px 12px;font-size:var(--fs-xs);color:var(--text3);border-top:1px solid var(--border);line-height:var(--lh-snug)} /* ---------- LAYOUT ---------- */ main{flex:1;min-width:0;overflow-x:hidden} .demo-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 16px 0;padding:7px 12px;font-size:var(--fs-xs);color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:7px} .demo-banner b{color:var(--text)} .demo-reset{flex:none;color:var(--accent);text-decoration:none;font-weight:600;border:1px solid var(--border);border-radius:5px;padding:2px 9px} .demo-reset:hover{border-color:var(--accent)} .proform{display:grid;grid-template-columns:120px 1fr;gap:9px 12px;align-items:center;margin-top:10px} .proform label{margin:0} .proform input,.proform select{width:100%;background:var(--bg2);color:var(--text);border:1px solid var(--border);padding:5px 7px;border-radius:6px;font-size:var(--fs-sm)} .proform input:focus,.proform select:focus{outline:none;border-color:var(--accent)} .proform-actions{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin-top:4px} .ftp-timeline{margin-top:12px;border-top:1px solid var(--border);padding-top:10px} .ftp-marker{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border)} .ftp-marker:last-child{border-bottom:none} .ftp-date{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text2);min-width:96px} .ftp-w{font-family:var(--mono);font-size:var(--fs-base);color:var(--text)} .ftp-del{background:none;border:1px solid var(--border);color:var(--text3);border-radius:5px;width:22px;height:22px;cursor:pointer;line-height:1;padding:0} .ftp-del:hover{border-color:#e06c75;color:#e06c75} .ftp-add{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ftp-add input{background:var(--bg2);color:var(--text);border:1px solid var(--border);padding:5px 7px;border-radius:6px;font-size:var(--fs-sm)} .ftp-add input[type=number]{width:80px} .ftp-add input:focus{outline:none;border-color:var(--accent)} .racelist{margin-bottom:10px} .racerow{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--border)} .racerow:last-child{border-bottom:none} .rprio{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:5px;flex:none} .rprio-a{background:var(--accent);color:#fff} .rprio-b{background:var(--surface2);color:var(--text);border:1px solid var(--border2)} .rprio-c{background:var(--surface2);color:var(--text3);border:1px solid var(--border)} .rname{font-weight:600;color:var(--text)} .raceact{margin-left:auto;display:flex;gap:8px;align-items:center} .rlink{background:none;border:none;color:var(--accent);cursor:pointer;font-size:var(--fs-sm);padding:0} .rlink:hover{text-decoration:underline} .raceform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px} .raceform input,.raceform select{background:var(--bg2);color:var(--text);border:1px solid var(--border);padding:5px 7px;border-radius:6px;font-size:var(--fs-sm)} .raceform input[type=number]{width:64px} .raceform input[type=text]{min-width:140px} .raceform input:focus,.raceform select:focus{outline:none;border-color:var(--accent)} .raceform .rf-lab{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-2xs);color:var(--text2)} .raceform .rf-group{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);padding-left:4px} .raceform.editing{background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:8px;margin:6px 0} .evmark{display:block;font-size:var(--fs-2xs);font-weight:600;margin:3px 0 2px;padding:2px 6px;border-radius:5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--surface2);border:1px solid var(--border2);color:var(--text)} .mevent{font-size:var(--fs-2xs);font-weight:600;align-self:flex-start;padding:1px 5px;border-radius:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--surface2);border:1px solid var(--border2);color:var(--text)} .ev-a{background:rgba(59,130,246,.18);border-color:var(--accent)} .ev-b,.ev-c{background:var(--surface2);border-color:var(--border2)} /* --- workouts --- */ .wo-filter{display:flex;flex-direction:column;gap:10px;margin-bottom:16px} .wo-sports{display:flex;gap:6px;flex-wrap:wrap} .wo-pill{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:5px 13px;font-size:var(--fs-sm);color:var(--text2);transition:background .12s,border-color .12s,color .12s} .wo-pill input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .wo-pill:hover{border-color:var(--accent);color:var(--text)} .wo-pill.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600} .wo-pill-n{font-family:var(--mono);font-size:var(--fs-2xs);background:var(--surface2);color:var(--text2);border-radius:999px;padding:0 6px;min-width:18px;text-align:center} .wo-pill.on .wo-pill-n{background:rgba(255,255,255,.25);color:#fff} .wo-pill.empty{opacity:.45} .wo-pill:focus-within{outline:2px solid var(--accent);outline-offset:1px} .wo-controls{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap} .wo-field{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.04em;color:var(--text2)} .wo-field select,.wo-field input{background:var(--bg2);color:var(--text);border:1px solid var(--border);padding:6px 8px;border-radius:6px;font-size:var(--fs-sm);text-transform:none;letter-spacing:0} .wo-field select:focus,.wo-field input:focus{outline:none;border-color:var(--accent)} .wo-search input{min-width:190px} .wo-clear{align-self:center;color:var(--text2);font-size:var(--fs-sm);text-decoration:none;padding:6px 9px;border-radius:6px;white-space:nowrap} .wo-clear:hover{color:var(--text);background:var(--surface2)} .wo-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)} .wo-row:last-child{border-bottom:none} .wo-row:hover{background:var(--surface2)} .wo-name{font-weight:600} .wo-badge{font-size:var(--fs-2xs);color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:1px 7px;text-transform:capitalize} .wo-row-meta{margin-left:auto;font-family:var(--mono);font-size:var(--fs-xs)} .wo-actions{display:flex;gap:8px;margin-top:14px} .wo-build{margin-top:14px;border-top:1px solid var(--border);padding-top:12px} .wo-build-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .wo-totals{margin-left:auto;font-family:var(--mono);font-weight:600;color:var(--text)} .wo-steps{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .wo-steps th{text-align:left;color:var(--text3);font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;padding:2px 6px} .wo-steps td{padding:2px 6px;border-bottom:1px solid var(--border)} .wo-steps tr.dragging{opacity:.4} .wo-grip{cursor:grab;color:var(--text3);user-select:none;width:18px} .wo-steps input[type=number]{width:72px;background:var(--bg2);color:var(--text);border:1px solid var(--border);padding:3px 6px;border-radius:5px;font-family:var(--mono)} .wo-steps input:focus{outline:none;border-color:var(--accent)} .wo-watts{font-family:var(--mono);color:var(--text2);font-size:var(--fs-xs)} .wo-build-actions{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:10px} .wo-paste textarea{display:block;width:200px;background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px;font-family:var(--mono);font-size:var(--fs-xs);margin:6px 0} .wo-gen{margin-bottom:14px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px} .wo-gen summary{cursor:pointer} .wo-genform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px} .wo-genform select,.wo-genform input{background:var(--bg2);color:var(--text);border:1px solid var(--border);padding:6px 8px;border-radius:6px;font-size:var(--fs-sm)} .wo-genform input[type=number]{width:160px} .wo-genform select:focus,.wo-genform input:focus{outline:none;border-color:var(--accent)} .screen{padding:22px 28px 64px} .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .topbar h1{font-size:var(--fs-xl);font-weight:650;letter-spacing:-.01em;line-height:var(--lh-tight)} .topbar .meta{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text2)} .row{display:flex;gap:16px;flex-wrap:wrap} .panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-bottom:16px} .panel h2{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--eyebrow);color:var(--text2);font-weight:600;margin-bottom:13px;display:flex;align-items:center;justify-content:space-between} .grow{flex:1;min-width:0} /* ---------- BUTTONS / CHIPS ---------- */ .btn{background:var(--surface2);border:1px solid var(--border2);color:var(--text);border-radius:8px;padding:7px 13px;font-size:var(--fs-sm);cursor:pointer;font-weight:500} .btn:hover{border-color:var(--accent)} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn.ghost{background:transparent} .btn:disabled{opacity:.7;cursor:default} .seg{display:inline-flex;border:1px solid var(--border2);border-radius:8px;overflow:hidden} .seg button{background:transparent;border:none;color:var(--text2);padding:6px 13px;font-size:var(--fs-sm);cursor:pointer;font-weight:500} .seg button.on{background:var(--surface2);color:var(--text)} .chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;padding:3px 9px;border-radius:11px;border:1px solid var(--border2);background:var(--bg2)} .chip.tsb{color:var(--fresh);border-color:#2f5f50} .chip.tsb.fatigued{color:var(--fatigued);border-color:#4a3a20} .chip.tsb.overreached{color:var(--overreached);border-color:#4a3a20} .chip.tag{color:var(--tmp);background:#2a2117;border-color:#4a3a20;font-weight:500} .chip.sport{color:#fff;font-weight:600;border-color:transparent;background:var(--text3)} .chip.sport-cycling{background:#3b82f6} .chip.sport-running{background:#e2683a} .chip.sport-yoga{background:#9333ea} .chip.sport-lifting{background:#0d9488} .chip.sport-swimming{background:#0e7490} .dtype{display:inline-block;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:5px} .dt-ez{color:var(--ez);background:#13261f} .dt-ss{color:var(--ss);background:#262213} .dt-end{color:var(--end);background:#13202e} .dt-vo2{color:var(--vo2);background:#2a1719} .dt-tmp{color:var(--tmp);background:#2a2117} .dt-rest{color:var(--rest);background:#1a1f25} /* ---------- CALENDAR ---------- */ .wellness{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:16px;display:flex;align-items:center;gap:22px;flex-wrap:wrap} .wellness .wl{font-size:var(--fs-sm);color:var(--text2)} .wellness .dots{letter-spacing:1px;font-size:var(--fs-xs);color:var(--text)} .week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px} .daycell{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:10px 10px 12px;min-height:166px;display:flex;flex-direction:column;gap:5px;position:relative;cursor:pointer} .daycell:hover{border-color:var(--border2)} .daycell.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:var(--surface2)} .daycell .dh{display:flex;justify-content:space-between;align-items:baseline} .daycell .dow{font-size:var(--fs-2xs);color:var(--text3);text-transform:uppercase;letter-spacing:.5px} .daycell .dnum{font-size:var(--fs-md);font-weight:700;color:var(--text2)} .daycell.today .dow{color:var(--accent)} .daycell.today .dnum{color:var(--text)} .daycell .wn{font-weight:600;font-size:var(--fs-sm);line-height:var(--lh-tight)} .daycell .wn .meta{font-weight:500;color:var(--text3)} .daycell .wmeta{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text2)} .daycell .wsport{color:var(--text);font-weight:600} .spark{display:flex;align-items:flex-end;gap:1.5px;height:20px;margin:1px 0} .spark i{flex:1;background:var(--ctl);opacity:.55;border-radius:1px} .daycell .foot{margin-top:auto;display:flex;flex-direction:column;gap:4px} .ceil{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--text3);border:1px dashed var(--border2);border-radius:5px;padding:1px 5px;align-self:flex-start;cursor:text} .tick{position:absolute;top:8px;right:9px;color:var(--ok);font-size:var(--fs-sm)} .restlabel{color:var(--rest);font-style:italic;font-size:var(--fs-sm)} .upd-chip{font-size:var(--fs-2xs);color:var(--accent);background:#13202e;border:1px solid #244;border-radius:4px;padding:1px 5px;align-self:flex-start} .summary .srow{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--fs-sm);padding:4px 0;border-bottom:1px solid var(--border)} .summary .srow:last-child{border:none} .summary .srow span:last-child{color:var(--text)} .summary .lbl{color:var(--text2)} /* ---------- DAY DETAIL ---------- */ .reccard{background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:15px 17px;margin-bottom:16px} .reccard .rt{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em} /* multi-ride day: one pill per ride; selected one drives the analysis below */ .ridepills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} .ridepill{display:flex;flex-direction:column;align-items:flex-start;gap:2px; padding:7px 13px 7px 11px;border-radius:9px;cursor:pointer;text-align:left; background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--border2); transition:border-color .12s,background .12s,box-shadow .12s} .ridepill:hover{border-color:var(--accent)} .ridepill.on{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .ridepill .rp-name{font-weight:600;color:var(--text);font-size:var(--fs-sm)} .ridepill .rp-meta{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--text3)} .ridepill .rp-dot{width:7px;height:7px;border-radius:50%;background:var(--border2);flex:0 0 auto} .ridepill.dt-ez{border-left-color:var(--ez)} .rp-dot.dt-ez{background:var(--ez)} .ridepill.dt-end{border-left-color:var(--end)} .rp-dot.dt-end{background:var(--end)} .ridepill.dt-tmp{border-left-color:var(--tmp)} .rp-dot.dt-tmp{background:var(--tmp)} .ridepill.dt-ss{border-left-color:var(--ss)} .rp-dot.dt-ss{background:var(--ss)} .ridepill.dt-vo2{border-left-color:var(--vo2)} .rp-dot.dt-vo2{background:var(--vo2)} /* calendar List view: one row per ride, newest first, grouped by day; sparkline kept */ .actlist{display:flex;flex-direction:column;gap:6px} .actlist-day{font-family:var(--mono);font-size:11px;color:var(--text3);text-transform:uppercase; letter-spacing:.04em;margin:12px 0 2px;padding-left:2px} .actlist-day:first-child{margin-top:0} .actrow{display:grid;grid-template-columns:46px 1fr auto 120px;gap:13px;align-items:center; padding:9px 13px;border-radius:9px;background:var(--surface);border:1px solid var(--border); border-left:3px solid var(--border2);cursor:pointer;transition:border-color .12s,background .12s} .actrow:hover{border-color:var(--accent);background:var(--surface2)} .actrow .dtype{justify-self:start} .actrow .ar-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .actrow .ar-meta{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text2);white-space:nowrap} .actrow .rideviz{width:120px;height:26px} .actrow.dt-ez{border-left-color:var(--ez)} .actrow.dt-end{border-left-color:var(--end)} .actrow.dt-tmp{border-left-color:var(--tmp)} .actrow.dt-ss{border-left-color:var(--ss)} .actrow.dt-vo2{border-left-color:var(--vo2)} @media(max-width:720px){.actrow{grid-template-columns:46px 1fr}.actrow .ar-meta,.actrow .rideviz{display:none}} /* Totals: weekly/monthly/yearly rollup tables (toggled by the seg control) */ .totalswrap{display:none} .totalswrap.on{display:block} .ttable{width:100%;border-collapse:collapse;font-size:var(--fs-sm)} .ttable th,.ttable td{text-align:right;padding:7px 10px;border-bottom:1px solid var(--border);white-space:nowrap} .ttable th:first-child,.ttable td:first-child{text-align:left} .ttable th{color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:11px} .ttable td{font-family:var(--mono);color:var(--text)} .ttable tbody tr:hover{background:var(--surface2)} .ttable tr.cur td{color:var(--accent);font-weight:600} /* sickness: a per-day tag + a small marker (no line series) */ .sicktoggle{display:flex;align-items:center;gap:6px;cursor:pointer;align-self:flex-end} .daycell .sickmark{position:absolute;top:6px;right:7px;font-size:12px;line-height:1;z-index:2} /* lap editor: toolbar + per-lap delete + table */ .lap-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px} .lap-toolbar .btn.ghost.on{border-color:var(--accent);color:var(--accent)} .laps-table{width:100%} .lapdel{background:none;border:0;color:var(--text3);cursor:pointer;font-size:13px;line-height:1;padding:2px 7px;border-radius:5px} .lapdel:hover{color:var(--vo2);background:var(--surface2)} .reccard .rm{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text2);margin:5px 0 9px} .why li{list-style:none;padding:5px 0 5px 18px;position:relative;color:var(--text);font-size:var(--fs-base)} .why li:before{content:"›";position:absolute;left:2px;color:var(--accent)} .why .band{color:var(--fresh)} .impact{display:flex;gap:20px;font-family:var(--mono);margin-top:6px} .impact .m{font-size:var(--fs-xs);color:var(--text2)} .impact .m b{display:block;color:var(--text);font-size:var(--fs-data);margin-top:2px} .alt{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)} .alt:last-child{border:none} .alt .an{font-weight:600} .alt .am{font-family:var(--mono);color:var(--text2)} .bucket{margin-top:8px;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:7px;font-size:var(--fs-sm);color:var(--text2)} /* ---------- STEPPED PROFILE + BREAKDOWN ---------- */ .stepgraph{display:flex;align-items:flex-end;gap:2px;height:150px;border-bottom:1px solid var(--border2);border-left:1px solid var(--border2);padding:0 2px;margin:10px 0} .stepgraph i{flex:var(--w,1);background:var(--ctl);opacity:.8;border-radius:2px 2px 0 0;position:relative;cursor:default} .stepgraph i.rec{opacity:.35} .stepgraph i.hard{background:var(--vo2);opacity:.85} .stepgraph i[data-tip]:hover{opacity:1;outline:1px solid var(--accent);outline-offset:-1px} .stepgraph i[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--border2);color:var(--text);font-family:var(--mono);font-size:var(--fs-xs);padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:8;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.5)} .stepgraph i[data-tip]:hover::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--border2);z-index:8;pointer-events:none} .breakdown{font-family:var(--mono);font-size:var(--fs-sm)} .breakdown div{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);color:var(--text2)} .breakdown b{color:var(--text)} .stepgraph-aligned{border-left:0;padding-left:2px} /* drop the axis border so bars start at x=2px, matching the W'bal plot */ .wbal-wrap{height:140px;position:relative;margin:4px 0 0} .wbal-cap{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text2);text-align:right;margin:3px 2px 2px} .wo-charts{margin:8px 0 18px} .wo-charts .stepgraph{height:110px} .wo-charts .wbal-wrap{height:110px} /* Learn mode — demo guided explainers (learn.js) */ .learn-toggle{position:fixed;right:16px;bottom:16px;z-index:50;display:inline-flex;align-items:center;gap:7px;background:var(--surface2);color:var(--text2);border:1px solid var(--border2);border-radius:999px;padding:8px 14px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)} .learn-toggle.on{background:var(--accent);border-color:var(--accent);color:#fff} .learn-toggle .learn-state{font-family:var(--mono);font-size:var(--fs-2xs);opacity:.85;text-transform:uppercase} .learn-target{position:relative} .learn-dot{position:absolute;top:-7px;right:-7px;z-index:6;width:16px;height:16px;padding:0;border-radius:50%;border:none;background:var(--accent);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;font-style:italic;line-height:16px;text-align:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4);animation:learnpulse 2.4s ease-in-out infinite} .learn-dot:hover{transform:scale(1.18)} @keyframes learnpulse{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.5)}50%{box-shadow:0 0 0 5px rgba(59,130,246,0)}} .learn-pop{position:absolute;z-index:60;background:var(--bg2);border:1px solid var(--accent);border-radius:10px;padding:14px 16px 10px;box-shadow:0 12px 40px rgba(0,0,0,.55)} .learn-pop h4{margin:0 0 6px;font-size:var(--fs-sm);color:var(--text);padding-right:18px} .learn-pop p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--text2)} .learn-pop b{color:var(--text)} .learn-pop i{color:var(--text2)} .learn-pop-x{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--text3);font-size:18px;line-height:1;cursor:pointer} .learn-pop-x:hover{color:var(--text)} .learn-pop-foot{margin-top:9px;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--text3);text-transform:uppercase;letter-spacing:.04em} /* Learn mode — guided tour */ .learn-tour-btn{position:fixed;right:16px;bottom:56px;z-index:50;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:8px 14px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)} .learn-tour-btn:hover{filter:brightness(1.08)} .learn-spot{outline:3px solid var(--accent)!important;outline-offset:4px;border-radius:6px;box-shadow:0 0 0 9999px rgba(0,0,0,.45);position:relative;z-index:40} .learn-tour{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:70;width:min(440px,calc(100vw - 32px));background:var(--bg2);border:1px solid var(--accent);border-radius:12px;padding:16px 18px;box-shadow:0 16px 50px rgba(0,0,0,.6)} .learn-tour-step{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px} .learn-tour h4{margin:0 0 6px;font-size:15px;color:var(--text)} .learn-tour p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--text2)} .learn-tour-nav{display:flex;align-items:center;gap:8px;margin-top:13px} .learn-tour-sp{flex:1} .learn-tour-nav button{background:var(--surface2);color:var(--text);border:1px solid var(--border2);border-radius:7px;padding:6px 12px;font-size:var(--fs-sm);font-weight:600;cursor:pointer} .learn-tour-nav .learn-tour-next{background:var(--accent);border-color:var(--accent);color:#fff} .learn-tour-nav .learn-tour-end{background:none;border:none;color:var(--text3);font-weight:500} /* ---------- RIDE ANALYSIS (completed history) ---------- */ .statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:14px 18px} .statcell{display:flex;flex-direction:column;gap:3px} .statcell .sl{font-size:var(--fs-xs);color:var(--text2);text-transform:uppercase;letter-spacing:.04em} .statcell b{font-family:var(--mono);font-size:var(--fs-lg);color:var(--text);font-weight:600} .zrow{display:grid;grid-template-columns:30px 1fr 96px;align-items:center;gap:10px;margin:7px 0;font-family:var(--mono);font-size:var(--fs-sm)} .zrow .zname{font-weight:700;color:var(--text2)} .zrow .zpct{color:var(--text2);text-align:right} .zbar2{height:13px;background:var(--bg2);border-radius:4px;overflow:hidden} .zbar2 i{display:block;height:100%;border-radius:4px;opacity:.9} .zbar2 i.dt-ez{background:var(--ez)} .zbar2 i.dt-end{background:var(--end)} .zbar2 i.dt-tmp{background:var(--tmp)} .zbar2 i.dt-ss{background:var(--ss)} .zbar2 i.dt-vo2{background:var(--vo2)} /* ---------- CHARTS ---------- */ .chartbox{position:relative;height:300px} .chartbox.sm{height:180px} .legend{display:flex;gap:16px;font-size:var(--fs-sm);color:var(--text2);margin-bottom:8px;flex-wrap:wrap} .legend i{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px} .legend .dash{height:0;border-top:2px dashed currentColor;width:18px} .profshape{font-size:var(--fs-sm);color:var(--text2);font-style:italic;margin-top:8px} .zone{display:grid;grid-template-columns:34px 1fr 64px;align-items:center;gap:8px;margin:6px 0;font-family:var(--mono);font-size:var(--fs-xs)} .zbar{position:relative;height:14px;background:var(--bg2);border-radius:3px;overflow:visible} .zfill{height:100%;background:var(--ctl);opacity:.7;border-radius:3px} .ztarget{position:absolute;top:-2px;height:18px;width:2px;background:var(--tsb)} .zunder{color:var(--warn)} /* ---------- GENERIC ---------- */ .kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)} .kv:last-child{border:none} .kv .k{color:var(--text2)} .kv .v{font-family:var(--mono);color:var(--text)} .meta{font-size:var(--fs-sm);color:var(--text2)} .hint{font-size:var(--fs-xs);color:var(--text3);margin-top:7px;line-height:var(--lh-snug)} .note-banner{background:#13202e;border:1px solid #244;border-radius:8px;padding:10px 14px;font-size:var(--fs-sm);color:var(--text2);margin-bottom:14px} .logok{font-size:var(--fs-sm);color:var(--ok)} .logerr{font-size:var(--fs-sm);color:var(--vo2);margin-bottom:10px} details.addwo>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px} details.addwo>summary::-webkit-details-marker{display:none} .addwo-t{font-weight:600;color:var(--text)} .wo-form{margin-top:14px} .wo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 16px} .wo-f{display:flex;flex-direction:column;gap:5px;font-size:var(--fs-sm);color:var(--text2)} .wo-f>span{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.03em} .wo-f .field{width:100%} .wo-f .field.num{width:100%;text-align:left} .wo-f.wo-wide{grid-column:1/-1} /* ---------- AVAILABILITY STEPPER (D05 ceiling, set anywhere) ---------- */ .avail-stepper{display:inline-flex;align-items:center;gap:5px} .avail-stepper .astep{width:20px;height:20px;line-height:17px;text-align:center;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);border-radius:5px;cursor:pointer;padding:0;font-size:var(--fs-base);font-weight:600} .avail-stepper .astep:hover{color:var(--text);border-color:var(--accent)} .avail-stepper .aval{font-size:var(--fs-xs);min-width:48px;text-align:center;color:var(--text2);font-family:var(--mono)} .availrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0} .availrow .dayname{font-size:var(--fs-base);color:var(--text2);min-width:96px} .daylink{display:block;text-decoration:none;color:inherit;cursor:pointer} .daycell .foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px} /* ---------- RIDE / WORKOUT SPARKLINE (power profile or target) ---------- */ .rideviz{display:block;width:100%;height:26px;margin-top:8px;color:var(--end)} .rideviz .area{fill:currentColor;opacity:.16} .rideviz .line{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.9;vector-effect:non-scaling-stroke} .rideviz.dt-ez{color:var(--ez)} .rideviz.dt-end{color:var(--end)} .rideviz.dt-tmp{color:var(--tmp)} .rideviz.dt-ss{color:var(--ss)} .rideviz.dt-vo2{color:var(--vo2)} .rideviz.dt-rest{display:none} .mcell .rideviz{height:20px;margin-top:4px} /* ---------- MONTH/WEEK JUMP POPOVER ---------- */ .monthjump{position:relative;display:inline-block} .monthjump>summary{cursor:pointer;list-style:none;color:var(--text);font-weight:600;font-size:var(--fs-md);padding:6px 10px;border-radius:7px;border:1px solid transparent} .monthjump>summary::-webkit-details-marker{display:none} .monthjump>summary:hover{background:var(--surface2);border-color:var(--border)} .monthjump[open]>summary{background:var(--surface2);border-color:var(--border)} .jumpbox{position:absolute;z-index:30;top:calc(100% + 4px);left:0;display:flex;gap:6px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.45)} .jumpbox select,.jumpbox input{background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 8px;font-size:var(--fs-sm)} .jumpbox input[type=number]{width:78px} /* ---------- WEEKLY VOLUME STRIP (calendar overview) ---------- */ .volstrip{display:flex;align-items:flex-end;gap:6px;height:96px} .volbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;text-decoration:none;color:inherit;min-width:0} .volcol{display:flex;flex-direction:column-reverse;width:100%;max-width:34px;height:64px;background:var(--bg2);border-radius:4px 4px 0 0;overflow:hidden} .volbar .vdone{display:block;width:100%;background:var(--ctl);opacity:.9} .volbar .vplan{display:block;width:100%;background:var(--ctl);opacity:.28} .volbar.cur .volcol{outline:1px solid var(--accent)} .volbar .vval{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--text2)} .volbar .vlbl{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--text3)} .volbar:hover .vdone{opacity:1} .volbar.cur .vlbl{color:var(--accent)} .field{background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 8px;font-size:var(--fs-sm)} .field:focus{outline:none;border-color:var(--accent)} /* ---------- INTERACTIVE RIDE STREAM CHART ---------- */ .seriestoggles{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px} .stoggle{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text2);cursor:pointer;user-select:none} .stoggle i{width:14px;height:3px;border-radius:2px} .streamwrap{position:relative} .streamwrap .chartbox{height:300px} #seg-overlay{position:absolute;top:0;bottom:0;background:rgba(59,130,246,.16);border-left:1px solid var(--accent);border-right:1px solid var(--accent);pointer-events:none;display:none;z-index:2} /* ---------- ROUTE MAP (client-side MapLibre GL vector map, D48) ---------- */ .routemap{position:relative;width:100%;height:320px;overflow:hidden;border:1px solid var(--border);border-radius:10px;background:#e8edf1} .routemap canvas{outline:none} /* the chart-synced hover marker (a MapLibre custom-element Marker) */ .ride-hovermark{width:14px;height:14px;border-radius:50%;background:#ff5a3c;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.55)} .routemap .maplibregl-ctrl-attrib{font-size:9px} .rtip{position:absolute;pointer-events:none;z-index:6;background:var(--tip-bg);border:1px solid var(--border);border-radius:8px;padding:7px 10px;min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:opacity .08s} .rtip .r{display:flex;justify-content:space-between;gap:20px;line-height:1.6;font-size:12px} .rtip .r span{color:var(--text2)} .rtip .r b{font-family:var(--mono);color:var(--text);font-weight:600;font-variant-numeric:tabular-nums} .mmmp-controls{display:flex;align-items:center;gap:14px;margin:6px 0 10px;flex-wrap:wrap} .stepper{display:inline-flex;align-items:center;border:1px solid var(--border2);border-radius:8px;overflow:hidden} .stepper button{background:transparent;border:none;color:var(--text);width:30px;height:28px;font-size:16px;line-height:1;cursor:pointer} .stepper button:hover:not(:disabled){background:var(--surface2)} .stepper button:disabled{color:var(--text3);cursor:default} .stepper .val{min-width:30px;text-align:center;font-family:var(--mono);font-weight:600;color:var(--text);border-left:1px solid var(--border2);border-right:1px solid var(--border2);padding:5px 0} .seglbl{color:var(--text2);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em} .screen.narrow{max-width:1200px;margin:0 auto} .cols{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-bottom:16px} .cols>.col{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px} .cols>.col.grow{flex:1.6 1 400px} .cols>.col.col-map{flex:0 1 460px} .cols>.col>.panel{margin-bottom:0} /* masonry card region — auto-balances columns so panels fill space, no orphan gaps */ .cardgrid{columns:2;column-gap:16px;margin-bottom:16px} .cardgrid>.panel{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 16px;width:100%} @media (max-width:860px){.cardgrid{columns:1}} .stoggle i.lapswatch{height:0;border-top:2px dashed var(--text2);border-radius:0} .threshrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--border)} .threshrow .tn{color:var(--text2);font-size:var(--fs-sm)} .field.num{width:90px;text-align:right;font-family:var(--mono)} .threshactions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap} .daynav{display:flex;align-items:center;gap:12px} .ico-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:18px;line-height:1;text-decoration:none;transition:all .12s} .ico-btn:hover{color:var(--text);border-color:var(--accent);background:var(--surface2)} .xaxis-toggle{font-size:var(--fs-xs)}