/* ═══════════ v2.22 · FOUR-PANEL TODAY — desktop (Arrick, 2026-08-16) ═══════════
   The phone's four slides as four regions on one screen. The slide markup is
   shared verbatim; these rules re-house it at panel scale (the phone's slide CSS
   lives inside the 720px media block and never applies here). */
.hsd-meta{position:absolute;top:24px;left:28px;right:28px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:3}
.hsd-meta .hs-wx-2,.hsd-meta button{pointer-events:auto}
.hsd-clock{font-family:var(--courier);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hsd-wx{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-family:var(--courier);font-size:10.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);text-align:right}
.hsd-wx .hs-wx-rule{display:none}
.hsd-wx .hs-wx-1{display:flex;align-items:center;gap:6px;color:var(--ink)}
.hsd-wx .hs-wx-1 svg{width:15px;height:15px}
.hsd-wx .hs-wx-rule{width:1px;height:12px;background:var(--line)}
.hsd-wx .hs-wx-2{font-size:9.5px;color:var(--muted)}
.hsd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"ov ov" "tr fu" "rec rec";gap:16px}
.hsd .hs-overview{grid-area:ov}
.hsd .hs-train{grid-area:tr}
.hsd .hs-fuel{grid-area:fu}
.hsd .hs-monitor{grid-area:rec}
@media(max-width:900px){.hsd{grid-template-columns:1fr;grid-template-areas:"ov" "tr" "fu" "rec"}}
.hsd .hs-slide{position:relative;display:flex;flex-direction:column;padding:26px 28px 24px;border-radius:var(--radius);box-shadow:var(--lift);overflow:hidden;color:var(--hs-ink)}
.hsd .hs-sp{flex:0 0 auto;height:clamp(5px,calc(var(--sp) * .3),22px)}
.hsd .hs-overview{--hs-ink:var(--ink);--hs-mut:#5E5950;--hs-rule:#5E5950;--hs-hair:var(--line);background:var(--paper);border:1px solid var(--line);padding-top:56px;min-height:0}
.hsd .hs-train{--hs-ink:#fff;--hs-mut:rgba(255,255,255,.85);--hs-rule:rgba(255,255,255,.6);--hs-hair:rgba(255,255,255,.55);background:linear-gradient(135deg,#F31833 0%,#5400DB 100%)}
.hsd .hs-fuel{--hs-ink:var(--ink);--hs-mut:#5E5950;--hs-rule:#5400DB;--hs-hair:#5400DB;background:#fff;border:1px solid var(--line)}
.hsd .hs-monitor{--hs-ink:#fff;--hs-mut:#D9D6D0;--hs-rule:#E3DED6;--hs-hair:rgba(255,255,255,.9);background:#0A0A0A}
.hsd .hs-hi{font-weight:900;font-size:19px;letter-spacing:-.02em;line-height:1.1}
.hsd .hs-cd-grad{display:block;font-weight:900;font-size:62px;line-height:.8;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;padding-bottom:.04em}
.hsd .hs-cd-113{background-image:linear-gradient(180deg,#F31833,#B30E76)}
.hsd .hs-cd-days{background-image:linear-gradient(180deg,#930A98,#5400DB)}
.hsd .hs-cd-mid{font-family:var(--courier);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1;display:flex;gap:20px;margin:7px 0 8px}
.hsd .hs-cd-mid b{color:var(--accent);font-weight:700}
.hsd .hs-cd-until{font-family:var(--courier);font-size:11.5px;font-weight:700;text-transform:uppercase;line-height:1;margin-top:10px;padding-left:2px}
.hsd .hs-race{border-top:1.3px solid var(--line);border-bottom:1.3px solid var(--line);padding:14px 0 13px}
.hsd .hs-race-h{display:flex;align-items:baseline;justify-content:space-between}
.hsd .hs-race-name{font-weight:900;font-size:13px;letter-spacing:-.01em;color:var(--accent)}
.hsd .hs-race-up{font-family:var(--courier);font-size:9px;font-weight:500;color:#5E5950;letter-spacing:.02em;padding:0}
.hsd .hs-race-meta{display:flex;justify-content:space-between;font-family:var(--courier);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:11px}
.hsd .hs-track{display:flex;gap:2.5px;margin-top:8px;position:relative}
.hsd .hs-track i{display:block;height:3.2px;background:var(--line);flex:1}
.hsd .hs-track .fill{position:absolute;left:0;top:0;height:3.2px;background:var(--ink)}
.hsd .hs-track .dot{position:absolute;top:1.6px;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-sizing:border-box}
.hsd .hs-phases{display:flex;gap:2.5px;margin-top:8px}
.hsd .hs-phases span{font-family:var(--courier);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#5E5950}
.hsd .hs-phases span.on{color:var(--ink)}
.hsd .hs-go{font-family:var(--courier);font-size:11.5px;font-weight:700;text-transform:uppercase}
.hsd .hs-norace{margin-top:22px}
.hsd .hs-norace .eh{font-weight:900;font-size:19px}
.hsd .hs-norace p{font-size:13.5px;color:var(--muted);margin:10px 0 14px;line-height:1.55}
.hsd .hs-head{display:flex;align-items:flex-end;justify-content:space-between}
.hsd .hs-h1{font-weight:900;font-size:30px;letter-spacing:-.02em;line-height:.9;color:var(--hs-ink)}
.hsd .hs-today{font-family:var(--courier);font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--hs-ink);padding-bottom:2px}
.hsd .hs-head-rule{height:1.5px;background:var(--hs-hair);margin-top:11px}
.hsd .hs-quote{font-family:var(--courier);font-size:12.5px;font-weight:500;line-height:1.5;text-transform:uppercase;color:var(--hs-ink)}
.hsd .hs-quote-by{font-family:var(--courier);font-size:10px;font-weight:500;text-transform:uppercase;margin-top:8px;color:var(--hs-ink)}
.hsd .hs-quote-rule{height:1.3px;background:var(--hs-hair)}
.hsd .hs-sess{margin-top:4px;min-height:0}
.hsd .hs-row{display:flex;align-items:baseline;padding:15px 0 0;line-height:1;font-family:var(--courier);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--hs-ink)}
.hsd .hs-row .n{flex:0 0 26px}
.hsd .hs-row .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
.hsd .hs-row .act{font-family:var(--courier);font-size:11px;font-weight:700;color:var(--hs-ink);padding:0;text-transform:uppercase}
.hsd .hs-row-rule{height:.8px;background:var(--hs-hair);margin-top:11px}
.hsd .hs-add{display:block;font-family:var(--courier);font-size:11px;font-weight:700;text-transform:uppercase;color:var(--hs-ink);margin-top:14px;text-align:left;padding:0}
.hsd .hs-bars{padding-bottom:4px;min-height:0}
.hsd .hs-bar-row{margin-bottom:15px}
.hsd .hs-bar-row .l{display:flex;justify-content:space-between;align-items:baseline;line-height:1.1;font-family:var(--courier);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.hsd .hs-bar-row .l span:last-child{text-transform:none}
.hsd .hs-bar{height:3.2px;background:#E3DED6;margin-top:8px}
.hsd .hs-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .8s var(--ease)}
.hsd .hs-bar.hydro i{background:#0093E7}
.hsd .hs-bar.supp i{background:#5400DB}
.hsd .hs-bar.hit i{background:var(--volt)}
.hsd .hs-left{margin-top:5px;font-family:var(--courier);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hsd .hs-left.over{color:var(--accent)}
.hsd .hs-left.hit{color:var(--ink)}
.hsd .hs-copy{font-family:var(--courier);font-size:13px;font-weight:500;line-height:1.55;text-transform:uppercase;color:var(--hs-ink)}
.hsd .hs-copy p{margin:0 0 14px}
.hsd .hs-mon-stats{margin-top:4px;min-height:0}
.hsd .hs-mon-stats .wh-badge{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.hsd .hs-monitor .wh-prime{margin-top:8px}
.hsd .hs-monitor .wh-ring svg circle:first-of-type{stroke:rgba(255,255,255,.22)}
.hsd .hs-monitor .wh-ring text{fill:#fff}
.hsd .hs-monitor .wh-ring tspan[fill]{fill:rgba(255,255,255,.6)}
.hsd .hs-monitor .wh-l{color:#fff}
.hsd .hs-monitor .wh-sub{color:#D9D6D0}
.hsd .hs-monitor .wh-tile{background:transparent;border:1px solid rgba(255,255,255,.28)}
.hsd .hs-monitor .wh-k{color:#D9D6D0}
.hsd .hs-monitor .wh-v{color:#fff}
.hsd .hs-monitor .wh-v small{color:#D9D6D0}
.hsd .hs-monitor .wh-s{color:#D9D6D0}
.hsd .hs-overview .hs-cta{max-width:560px;width:100%}
.hsd .hs-train,.hsd .hs-fuel{min-height:300px}
.hsd .hs-cta{display:flex;gap:10px;margin-top:auto;padding:16px 0 0}
.hsd .hs-btn{flex:1;height:42px;display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid currentColor;background:transparent;font-family:var(--courier);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--r-action);white-space:nowrap;cursor:pointer}
.hsd .hs-btn:hover{background:rgba(0,0,0,.05)}
.hsd .hs-train .hs-btn:hover,.hsd .hs-monitor .hs-btn:hover{background:rgba(255,255,255,.1)}
.hsd .hs-btn.t-red{color:var(--accent)}.hsd .hs-btn.t-purple{color:#5400DB}.hsd .hs-btn.t-black{color:#0A0A0A}.hsd .hs-btn.t-white{color:#fff}
.hsd .hs-btn.off{opacity:.45}
.hsd .resume-bar{margin:0 0 14px}

/* ═══════════ v2.22 · THE PLANNER — desktop shell (stage 1) ═══════════ */
.pld{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1120px){.pld{grid-template-columns:220px minmax(0,1fr)}}
.pld-rail{display:flex;flex-direction:column;gap:12px;position:sticky;top:76px}
.pld-create{display:block;width:100%;height:44px;background:var(--ink);color:var(--paper);font-weight:900;font-size:13px;letter-spacing:-.01em;border-radius:var(--r-action);box-shadow:var(--lift);cursor:pointer}
.pld-create.alt{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none}
.pld-create.fuelbg{background:#5400DB}
.pld-rail .pld-modeseg{width:100%}
.pld-rail .pld-modeseg button{flex:1}
.pld-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--lift);padding:14px 14px 12px}
.pmm-h{font-weight:900;font-size:12.5px;letter-spacing:-.01em;margin-bottom:8px}
.pmm-g{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.pmm-d{font-family:var(--courier);font-size:8.5px;font-weight:500;color:var(--muted);text-align:center;padding:2px 0}
.pmm-c{position:relative;font-family:var(--courier);font-size:9.5px;color:var(--ink);text-align:center;padding:4px 0 7px;border-radius:0;cursor:pointer}
.pmm-c:hover{background:var(--wash)}
.pmm-c.out{color:var(--platinum)}
.pmm-c.tdy{background:var(--ink);color:var(--paper)}
.pmm-c.sel:not(.tdy){box-shadow:inset 0 0 0 1px var(--ink)}
.pmm-c i{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:3px;height:3px;background:var(--accent)}
.pmm-c.tdy i{background:var(--volt)}
.pld-go{display:block;font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 2px 2px;cursor:pointer;text-align:left}
.pld-go:hover{color:var(--ink)}
.pld-bar{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--lift);padding:10px 14px;margin-bottom:12px;flex-wrap:wrap}
.pld-label{font-weight:900;font-size:16px;letter-spacing:-.02em}
.pld-bar .seg2{margin-left:auto}
.pld-wk{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--lift);overflow:hidden}
.pld-heads{display:grid;grid-template-columns:46px repeat(var(--pldcols,7),minmax(0,1fr));border-bottom:1px solid var(--line)}
.pldh{padding:8px 8px 7px;border-left:1px solid var(--line)}
.pldh-r{display:flex;align-items:baseline;gap:6px}
.pldh .dn{font-family:var(--courier);font-size:9px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pldh .dd{font-weight:900;font-size:15px;letter-spacing:-.02em}
.pldh.tdy{background:var(--ink)}
.pldh.tdy .dn{color:var(--platinum)}.pldh.tdy .dd,.pldh.tdy .pldh-add{color:var(--paper)}
.pldh.tdy .pldh-m{color:var(--platinum)}
.pldh-add{margin-left:auto;font-size:14px;line-height:1;color:var(--muted);padding:0 2px;cursor:pointer;opacity:0}
.pldh:hover .pldh-add{opacity:1}
.pldh-m{font-family:var(--courier);font-size:8.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pld-scroll{display:grid;grid-template-columns:46px repeat(var(--pldcols,7),minmax(0,1fr));height:calc(100vh - 248px);min-height:480px;overflow-y:auto;position:relative}
.pld-gut{position:relative;height:calc(24 * 48px + 30px)}
.pld-gut span{position:absolute;right:6px;transform:translateY(37px);font-family:var(--courier);font-size:8.5px;color:var(--muted)}
.pld-cols{grid-column:2/-1;display:grid;grid-template-columns:repeat(var(--pldcols,7),minmax(0,1fr))}
.pld-col{border-left:1px solid var(--line);position:relative;min-width:0}
.pld-col.tdy{background:var(--canvas)}
.pld-band{height:30px;border-bottom:1px solid var(--line);padding:4px 4px 0;display:flex;gap:4px;overflow:hidden;background:var(--canvas)}
.pld-bd{font-family:var(--courier);font-size:8.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;background:var(--wash);border-left:2px solid var(--ink);padding:3px 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pld-rest{font-family:var(--courier);font-size:8.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--platinum);padding:4px 2px}
/* v3.15 · PLANNER PHYSICS — 48px hours, and the quarter-hour rules that make a 15-minute
   snap readable: the hour line leads, the half-hour whispers, the quarters barely show */
.pld-day{position:relative;height:calc(24 * 48px);background:
  repeating-linear-gradient(to bottom,var(--line) 0,var(--line) 1px,transparent 1px,transparent 48px),
  repeating-linear-gradient(to bottom,transparent 0,transparent 24px,var(--wash) 24px,var(--wash) 25px,transparent 25px,transparent 48px)}
.pld-it{position:absolute;left:3px;right:14%;text-align:left;background:var(--paper);border:1px solid var(--line);border-left:2px solid var(--ink);padding:4px 6px;overflow:hidden;cursor:pointer;box-shadow:var(--lift);border-radius:0;z-index:2;user-select:none;-webkit-user-select:none}
.pld-day .pld-it,.plf-card,.pld-bd{touch-action:none}   /* the grid's cards are for lifting; the phone's agenda rows scroll */
.pld-it b{display:block;font-weight:900;font-size:10.5px;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.pld-it em{font-style:normal;display:block;font-family:var(--courier);font-size:8.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pld-it.k-strength,.pld-it.k-hyb{border-left-color:var(--accent)}
.pld-it.k-mobility{border-left-color:var(--r2)}
.pld-it.done b{color:var(--muted)}
.pld-it.done{border-left-color:var(--volt-ink)}
.pld-it.sel{border-color:var(--ink);border-left-width:2px;z-index:4}
/* v3.9.3 — an unplanned LOGGED workout is read-back, not a plan entry: the done
   treatment plus a dashed frame says "record", and it opens the log editor */
.pld-it.pld-log{background:var(--wash);border-style:dashed;border-left-style:solid;border-left-color:var(--volt-ink)}
.pld-bd.pld-log{border-left-color:var(--volt-ink);color:var(--muted)}
.pld-ml{left:auto;right:3px;width:38%;min-width:74px;height:30px;background:var(--canvas);border-left-color:#5400DB;z-index:3}
.pld-ml b{font-weight:400;font-family:var(--courier);font-size:9px;text-transform:none}
.pld-ml em{margin-top:1px;font-size:8px}
.pld-now{position:absolute;left:0;right:0;height:0;border-top:1.5px solid var(--accent);z-index:5;pointer-events:none}
.pld-now:before{content:'';position:absolute;left:-1px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pld-eb{font-family:var(--courier);font-size:9px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-text, #C42638);margin-bottom:8px}
.pld-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:12px}
.pld-row span{font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pld-row b{font-family:var(--courier);font-size:11px;font-weight:500;color:var(--ink);text-align:right;overflow-wrap:anywhere;line-height:1.4}
.pld-btns{display:flex;gap:6px;margin-top:14px}
.pld-b2{flex:1;padding:10px 6px;background:transparent;color:var(--ink);border:1px solid var(--ink);font-weight:900;font-size:11.5px;border-radius:var(--r-action);cursor:pointer}

/* v2.22p3 — the Block banner above the calendar wears the Home race-card grammar */
/* detail rail sections */
.pld-fine{font-family:var(--courier);font-size:9px;color:var(--muted);line-height:1.6;margin-top:6px}
.pld-b2.danger{border-color:var(--line);color:var(--accent-text)}
/* v2.22p4 — the rail editor's controls */
.pld-row.edit{align-items:center;gap:8px}
.pld-fact{font-family:var(--courier);font-size:11px;font-weight:500;color:var(--ink);text-align:right;overflow-wrap:anywhere;line-height:1.4}
#qaTime{border:1px solid var(--line);padding:7px 8px;font-family:var(--courier);font-size:12px;border-radius:0;background:var(--canvas);color:var(--ink)}
.menu-fine{font-family:var(--courier);font-size:9px;letter-spacing:.04em;color:var(--muted);line-height:1.7;padding:8px 14px 2px;border-top:1px solid var(--line);max-width:240px;text-transform:uppercase}

/* v2.22p5 — create popup (GCal's quick-create card, our clothes) */
.pop-h{display:flex;align-items:center;justify-content:space-between}
.pop-x{font-size:18px;color:var(--muted);padding:0 4px;cursor:pointer}
/* the hover peek */
#pldPeek{position:fixed;z-index:205;width:min(320px,calc(100vw - 20px));background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--lift-sheet);padding:12px 16px 14px}
.peek-a{display:flex;justify-content:flex-end;gap:2px;margin:-2px -6px 6px 0}
.peek-ic{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;cursor:pointer;border-radius:50%}
.peek-ic:hover{background:var(--wash);color:var(--ink)}
.peek-b1{margin-right:auto;padding:6px 14px;background:var(--ink);color:var(--paper);font-weight:900;font-size:11px;border-radius:var(--r-action);cursor:pointer}
/* v3.0.0 — the secondary action ("Open session →"): same shape as the primary, outlined
   rather than filled, so Start still reads as the one thing the card wants you to do. */
.peek-b2{padding:6px 12px;background:transparent;border:1px solid var(--line);color:var(--ink);font-family:var(--courier);font-size:9.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--r-action);cursor:pointer;white-space:nowrap}
.peek-b2:hover{border-color:var(--ink);background:var(--wash)}
.peek-b1+.peek-b2{margin-left:0}
.peek-a>.peek-b2:first-child{margin-right:auto}
.peek-t{font-weight:900;font-size:15.5px;letter-spacing:-.02em;margin-bottom:5px}
.peek-l{font-family:var(--courier);font-size:10.5px;color:var(--muted);line-height:1.7}
/* v3.15 · the physics — lift, ghost, placeholder, grip. The band and the Fueling buckets
   still say "here" while a card is over them; the grid columns don't need to: the lifted
   card itself is sitting where it will land. */
.pld-band.drop,.plf-bk.drop{background:rgba(96,213,1,.08);outline:1px dashed var(--volt-ink);outline-offset:-1px}
.pld-it{cursor:grab}
.pld-it:active{cursor:grabbing}
.pld-it.pld-log,.pld-it.pld-log:active{cursor:pointer}   /* v3.9.3 — a logged card doesn't drag */
.pld-it.pld-ghost{opacity:.32;box-shadow:none}
.pld-lift{position:fixed;left:auto;right:auto;margin:0;z-index:200;pointer-events:none;box-shadow:0 12px 32px rgba(40,32,26,.18),0 2px 6px rgba(40,32,26,.08);transform:scale(1.02);transition:none;cursor:grabbing}
.pld-lift .pld-grip{display:none}
body.pld-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
body.pld-dragging .pld-it:not(.pld-lift):hover{box-shadow:var(--lift)}
.pld-it.pld-resizing{z-index:6;cursor:ns-resize}
.pld-grip{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.pld-grip:after{content:'';position:absolute;left:50%;bottom:2px;width:16px;height:2px;margin-left:-8px;border-radius:1px;background:var(--line);opacity:0;transition:opacity .12s}
.pld-it:hover .pld-grip:after{opacity:1}
/* the placeholder: what a click will make, drawn before the click */
.pld-ph{position:absolute;left:3px;right:14%;padding:4px 6px;background:var(--wash);border:1px dashed var(--muted);border-left:2px solid var(--muted);pointer-events:none;z-index:1;overflow:hidden;text-align:left}
.pld-ph b{display:block;font-weight:900;font-size:10.5px;letter-spacing:-.01em;line-height:1.15;color:var(--muted);white-space:nowrap}
.pld-ph em{font-style:normal;display:block;font-family:var(--courier);font-size:8.5px;color:var(--muted);margin-top:2px;white-space:nowrap}
.pld-ph.drawing,.pld-ph.set{background:var(--paper);border-style:solid;border-color:var(--ink);border-left-width:2px;box-shadow:var(--lift);z-index:3}
.pld-ph.drawing b,.pld-ph.set b{color:var(--ink)}

/* v2.22p6.2 — the planner's top section holds still; only the calendar moves */
.pld-fix{position:sticky;top:60px;z-index:55;background:var(--canvas);padding:2px 0 2px;margin-bottom:12px}
.pld-fix .pld-bar{margin-bottom:12px}
.pld-fix .plf-calc{margin-bottom:0}
.pld-rail{top:calc(60px + 8px)}
/* v2.22p6 — the mode toggle: the page's primary control; the mode is FELT */
.pld-modeseg{display:flex;border:1.5px solid var(--ink);border-radius:0}
.pld-modeseg button{padding:9px 15px;font-family:var(--courier);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);cursor:pointer;border-radius:0}
.pld-modeseg button.on{background:var(--ink);color:var(--paper)}
.pld-modeseg.fuel{border-color:#5400DB}
.pld-modeseg.fuel button.on{background:#5400DB}
.pld.fuelmode .pld-bar{box-shadow:inset 0 2px 0 #5400DB,var(--lift)}
/* the ambient calculator */
.plf-calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 2px 0 #5400DB,var(--lift);padding:12px 18px 14px;margin-bottom:12px;display:flex;flex-direction:column;gap:12px}
.plf-ch{flex:0 0 auto;min-width:220px}
.plf-cline{display:block;font-size:13.5px;font-weight:900;letter-spacing:-.01em;margin-top:4px}
.plf-cbars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 22px}
.plf-crow{display:flex;flex-direction:column;gap:4px}
.plf-crow .l{font-family:var(--courier);font-size:9px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plf-crow .v{font-family:var(--courier);font-size:10.5px;color:var(--ink);overflow-wrap:anywhere}
.plf-crow .v i{font-style:normal;color:var(--muted)}
.plf-bar{height:3.2px;background:#E3DED6}
.plf-bar i{display:block;height:100%;background:var(--accent);transition:width .6s var(--ease)}
.plf-bar.hit i{background:var(--volt)}
/* the elastic canvas */
/* v3.0.3 — `clip`, not `hidden`: both clip the rounded corner identically, but `hidden`
   makes this a scroll container, which would trap the sticky day headers inside a box
   that itself scrolls away. `clip` leaves them sticking to the viewport. */
.plf-wk{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--lift);overflow:clip}
.plf-cols{display:grid;grid-template-columns:repeat(var(--pldcols,7),minmax(0,1fr));min-height:calc(100vh - 380px)}
.plf-col{border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0;overflow:clip}   /* v3.15 (audit P-3) — a column's sticky head can never paint outside its column */
.plf-col:first-child{border-left:0}
.plf-col.tdy{background:var(--canvas)}
/* v3.0.3 — the day header holds its column while the canvas scrolls (the refinement
   noted at preview 6.2). It sticks BELOW the planner's own sticky top section, whose
   height varies with the calculator, so the offset is measured at render into
   --plfstick rather than guessed. An opaque background is part of the mechanism: a
   transparent sticky header would let the cards scroll through it. */
.plf-head{padding:8px 10px 7px;border-bottom:1px solid var(--line);
  position:sticky;top:var(--plfstick,120px);z-index:6;background:var(--paper)}
.plf-col.tdy .plf-head{background:var(--canvas)}
.plf-head.tdy{background:var(--ink)}
.plf-head.tdy .dn{color:var(--platinum)}.plf-head.tdy .dd,.plf-head.tdy .pldh-add{color:var(--paper)}
.plf-head.tdy .plf-strip{color:var(--platinum)}
.plf-strip{font-family:var(--courier);font-size:8.5px;letter-spacing:.02em;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.plf-body{flex:1;display:flex;flex-direction:column}
.plf-bk{padding:6px 8px 8px;border-bottom:1px solid var(--line);min-height:64px}
.plf-bk:last-child{border-bottom:0;flex:1}
.plf-bh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.plf-bh span{font-family:var(--courier);font-size:8.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.plf-bh b{font-family:var(--courier);font-size:9px;font-weight:500;color:var(--muted)}
.plf-card{position:static!important;display:block;width:100%;margin-bottom:5px;border-left-color:#5400DB!important;height:auto!important}
.plf-card.pld-lift{position:fixed!important;width:auto;margin:0;height:auto!important}   /* v3.15 — a lifted meal leaves the flow like any lifted card */
.plf-add{display:none;font-family:var(--courier);font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;padding:5px 0;background:var(--wash);border-radius:2px}
.plf-bk:hover .plf-add{display:block}
body.pld-dragging .plf-bk:not(.plf-empty) .plf-add{display:none}   /* v3.15 — nothing grows under a lifted card; the bucket's outline says "here" */
.plf-empty .plf-add{display:block;padding:18px 8px}   /* v3.15 (audit P-4) — an empty week day says its one thing without a hover */
.plf-bk.drop{background:rgba(96,213,1,.08);outline:1px dashed var(--volt-ink);outline-offset:-1px}
/* training-mode header meter */
.pldh-bar{height:3px;background:#E3DED6;margin-top:5px}
.pldh-bar i{display:block;height:100%;background:var(--accent)}
.pldh-bar.hit i{background:var(--volt)}
.pldh.tdy .pldh-bar{background:rgba(255,255,255,.25)}
/* the target breakdown popover (the engine's socket) */
#pldTgt{position:fixed;z-index:208;width:min(300px,calc(100vw - 20px));background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--lift-sheet);padding:14px 16px 14px;border-top:2px solid #5400DB}

/* v3.16 — the Week Close card on the desktop hero */
.hsd .hs-wcb{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;margin:0 0 18px;background:var(--ink);color:#fff;padding:0 16px;height:44px;text-align:left}
.hsd .hs-wcb-eb{font-family:var(--courier);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--volt);white-space:nowrap}
.hsd .hs-wcb-h{flex:1;min-width:0;font-weight:900;font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsd .hs-wcb-arr{font-family:var(--courier);font-size:14px;font-weight:700}