/* Desktop layout (900 px and wider). Phone layout below 900 px is untouched: every rule here sits inside the media query.
   Colours, glass cards and tokens come from theme-dark.css; no new colours. Built from DESIGN_HANDOFF.md "Web layout". */
.pghead{display:none}
.rcl,.rct,.ptable{display:none}
#rtl{display:none}
.cst{display:none}
.pmseg{display:none}
@media (min-width:900px){
/* ---- frame: sidebar 232 px, no header / bottom bar / avatar, main 1180 px ---- */
#app>.hdr,.hav,.syncchip,#nav,#pfab{display:none!important}
#side{width:232px;padding:0 0 14px;background:rgba(13,19,25,.85);border-right:1px solid var(--line)}
#side .sb-logo{padding:20px 20px 14px;font-family:"Barlow Condensed",Barlow,sans-serif;font-style:italic;font-weight:800;letter-spacing:.4px;gap:10px}
.sb-nav{display:flex;flex-direction:column;gap:4px;padding:8px 12px}
#side .sb-nav button{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;margin:0;border-radius:12px;font-style:normal;text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;color:var(--ink)}
#side .sb-nav button:hover{background:var(--s2)}
#side .sb-nav button.on{background:var(--pill,#f4c300);color:var(--on-pill,#0d1319)}
#side .sb-nav .ic{flex:none}
#side .sb-nav .nbadge{margin-left:auto}
#side .sb-help{margin:0 12px 6px;padding:10px 14px;border-radius:12px;font-style:normal;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--muted)}
#side .sb-help:hover{background:var(--s2);color:var(--ink)}
#side .sb-acct{display:flex;align-items:center;gap:10px;margin:0 12px 4px;padding:10px 12px;border-radius:14px;font-style:normal;text-transform:none;letter-spacing:0;background:rgba(21,29,38,.72);border:1px solid rgba(230,237,243,.10);color:var(--ink)}
#side .sb-acct:hover,#side .sb-acct.on{border-color:var(--pill,#f4c300);background:var(--s2)}
#side .sb-acct .sbt{display:flex;flex-direction:column;min-width:0;gap:2px}
#side .sb-acct b{font-size:14px;font-style:normal;text-transform:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbsync{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.sbsync i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}.sbsync.bad i{background:var(--red)}.sbsync.off i{background:var(--rest,#6b7785)}
#side .sb-ver{padding:6px 24px 0}
main{margin-left:232px;padding:0 32px 48px}
main>section>.page,main>section>.hero,main>section>.tabs,main>section .hero .card{max-width:1180px;margin-left:auto;margin-right:auto}
main>section>.page,main>section>.hero{padding-left:0;padding-right:0}
main>section>.tabs{width:100%}
#toast{left:calc(50% + 116px)}
/* ---- page header ---- */
.pghead{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;padding:28px 0 18px}
.pghead h1{margin:0;font-family:"Barlow Condensed",Barlow,system-ui,sans-serif;font-style:italic;font-weight:800;font-size:40px;line-height:1;text-transform:uppercase;letter-spacing:.3px}
.pghead .pga{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pghead .btn{white-space:nowrap}

/* ---- 1. Home: 12-column grid; .page and #hgrid dissolve so every card is a grid item ---- */
#t-home:not([hidden]){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;max-width:1180px;margin:0 auto;align-items:stretch}
#t-home>.pghead{grid-column:1/-1;width:100%;padding-bottom:2px}
#t-home>.hero,#t-home>.page,#t-home #hgrid{display:contents}
#t-home .hero .card,#t-home .page>.card,#t-home #hgrid>*{margin:0!important;max-width:none}
#t-home .htoday{order:1;grid-column:span 8;min-width:0;gap:14px}
#t-home .hero .cmsg{order:2;grid-column:span 4;min-width:0;display:flex;flex-direction:column;gap:10px}
#t-home .hring{order:3;grid-column:span 4}
#t-home .hrace{order:4;grid-column:span 4}
#t-home .hform{order:5;grid-column:span 4}
#t-home #hweek{order:6;grid-column:1/-1}
#t-home #healthcard{order:7;grid-column:1/-1}
#t-home #hcoach{order:8;grid-column:1/-1}
#t-home .page>.card:not(#hweek){order:9;grid-column:1/-1}
#t-home .htoday .hrow .badge{width:60px!important;height:60px!important}
#t-home .htoday .hrow b{font-size:32px;line-height:1.05;font-family:"Barlow Condensed",Barlow,sans-serif;font-style:italic;text-transform:uppercase}
#t-home .htoday .hrow span.sub{font-size:14px}
.stepl{display:flex;gap:3px;margin-top:-8px}.stepl span{min-width:4px;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#t-home .hform svg{height:104px}
#t-home .hrace .big{font-size:64px}
#t-home .hring svg{width:104px;height:104px}
#t-home .cmsg .quote{font-size:18px;line-height:1.35;margin:0}
.cqr{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.cqr button{all:unset;cursor:pointer;box-sizing:border-box;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--s2);color:var(--ink);font-size:13px;font-weight:700}
.cqr button:hover{border-color:var(--pill,#f4c300)}.cqr button:focus-visible{outline:2px solid var(--link)}
/* this week: 7 day columns */
#hweek .chead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
#hweek .chead .link{font-weight:700}
.wk7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.wd{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:118px;padding:10px 10px 10px 12px;border-radius:14px;background:var(--s2);border:1px solid var(--line);border-left:4px solid var(--c,var(--line))}
.wd:hover{border-color:var(--c,var(--link))}.wd:focus-visible{outline:2px solid var(--link)}
.wd .dn{font-size:11px;font-weight:800;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;display:flex;justify-content:space-between}
.wd .dd{font-family:"Barlow Condensed",Barlow,sans-serif;font-weight:800;font-size:22px;line-height:1}
.wd .it{font-size:12.5px;line-height:1.25;overflow:hidden}.wd .it b{display:block;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.wd .it span{color:var(--muted)}
.wd.done .dn::after{content:"✓";color:var(--green);font-size:14px}
.wd.plan{background:color-mix(in srgb,var(--c) 8%,var(--s2))}
.wd.rest{background:transparent;border:1px dashed var(--line);border-left:1px dashed var(--line)}
.wd.today{outline:2px solid var(--pill,#f4c300);outline-offset:-1px}
}
@media (min-width:900px) and (max-width:1199px){
#t-home .htoday{grid-column:span 12}#t-home .hero .cmsg{grid-column:span 12}#t-home .hring,#t-home .hrace,#t-home .hform{grid-column:span 4}
.wk7{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:900px){
}
@media (min-width:900px){
/* ---- 2. Plan ---- */
#ptabs{display:none!important}
#t-plan>.page{max-width:1180px;padding:0}
#t-plan .pghead .pseg{min-width:360px}
#t-acts .pghead .pseg{min-width:340px}
.pghead .pseg{display:inline-flex;background:var(--s2);border-radius:12px;padding:3px;gap:2px}.pghead .pseg button{flex:1;border:0;background:none;color:var(--muted);border-radius:10px;min-height:38px;font:inherit;font-weight:600;cursor:pointer}.pghead .pseg button.on{background:var(--link);color:#fff}#t-acts .pghead .pseg button{padding:0 14px;white-space:nowrap}
#t-plan .pghead .pseg button{padding:0 16px;white-space:nowrap}
#p-plan:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
#p-plan>*{margin:0!important;min-width:0}
#p-plan>#patpband{grid-row:1}
#patpband{padding:14px 18px 4px;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)}
#patpband:empty{display:none}
#patpband .band{height:14px}
.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)}
}
@media (min-width:900px){
/* ---- 3. Races ---- */
#t-races>.page{max-width:1180px;padding:0}
#t-races>.page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
#t-races>.page>*{margin:0!important;min-width:0}
#rcards{grid-column:1/-1;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:14px;overflow:visible;padding:0;margin:0!important;scroll-snap-type:none}
#rcards .rc{flex:none;max-width:none;width:auto;min-width:0}
#rcards .rc.hero{grid-column:1;grid-row:1/3;padding:24px 26px;gap:6px;background:linear-gradient(135deg,var(--red),color-mix(in srgb,var(--red) 55%,#000));display:grid;grid-template-columns:auto 1fr;grid-template-areas:"logo tag" "num num" "name name" "sub sub" "goal goal" "tiles tiles" "edit edit";align-content:start}
#rcards .rc.hero .rcl{display:block;grid-area:logo}
#rcards .rc.hero .tag{grid-area:tag;align-self:center}
#rcards .rc.hero .num{grid-area:num;font-size:92px;line-height:.95}
#rcards .rc.hero>b{grid-area:name;font-size:24px}
#rcards .rc.hero .rct{display:flex;grid-area:tiles;gap:10px;margin-top:10px}
#rcards .rc.hero .rct span{flex:1;background:rgba(0,0,0,.22);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
#rcards .rc.hero .rct b{font-family:"Barlow Condensed",Barlow,sans-serif;font-size:28px;line-height:1}.rct small{font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.5px}
#rcards .rc.hero .goalt,#rcards .rc.hero .num~.sub,#rcards .rc.hero .goalt+.sub{grid-column:1/-1}
#rcards .rc.hero .edit{grid-area:edit}
#rcards .rc:not(.hero){padding:14px 16px;position:relative}
#rcards .rc:not(.hero) .rcl{display:block;position:absolute;right:12px;top:12px}
#rcards .rc:not(.hero) .num{font-size:34px}#rcards .rc:not(.hero) .num small{font-size:13px}
#rcards .rc:nth-child(n+6){display:none}
.rlogo.xl{width:84px;height:84px;border-radius:20px}
.rc .rlogo.badge-fb{background:none}
#rtl{display:block;grid-column:1/-1;padding:18px 22px 10px}
#rtl[hidden]{display:none}
#rtl .chead{display:flex;align-items:baseline;justify-content:space-between}
.tlwrap{position:relative;height:150px;margin:6px 10px 0}
.tlband{position:absolute;left:0;right:0;top:68px;height:14px}
.tltoday{position:absolute;left:0;top:60px;width:4px;height:30px;border-radius:2px;background:var(--yellow);transform:translateX(-50%)}
.tlm{position:absolute;top:0;bottom:0;width:0}
.tld{position:absolute;left:0;top:67px;transform:translate(-50%,0);width:14px;height:14px;border-radius:50%;background:var(--grey,#8a95a1);border:2px solid var(--bg);z-index:2}
.tlm.A .tld{width:22px;height:22px;top:63px;background:var(--red)}.tlm.B .tld{width:16px;height:16px;top:66px;background:var(--blue)}.tlm.T .tld{background:var(--orange)}
.tll{position:absolute;left:0;transform:translateX(calc(-50% + var(--sh,0%)));display:flex;flex-direction:column;align-items:center;text-align:center;width:150px;line-height:1.2}
.tll b{font-size:12.5px;white-space:normal}.tll small{font-size:11px;color:var(--muted)}
.tlm.up .tll{bottom:94px}.tlm.dn .tll{top:92px}
/* pacing + calculator side by side; season list below */
#t-races>.page>#rpace{grid-column:1}#t-races>.page>#rcalc{grid-column:2}
#t-races>.page>.card:not(#rpace):not(#rcalc):not(#rtl){grid-column:1/-1}
#rpace .splits{display:none}
#rpace .ptable{display:table;width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.ptable th{text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
.ptable td{padding:9px 8px;border-bottom:1px solid var(--line)}.ptable td:last-child,.ptable th:last-child{text-align:right;font-weight:700}
.ptable tr.fin td{color:var(--yellow);font-weight:800;border-bottom:0}
}
@media (min-width:900px) and (max-width:1199px){
#rcards{grid-template-columns:1fr 1fr}#rcards .rc.hero{grid-column:1/-1;grid-row:auto}#t-races>.page>#rpace,#t-races>.page>#rcalc{grid-column:1/-1}
}
@media (min-width:900px){
/* ---- 4. Analytics ---- */
#t-acts>.page{max-width:1180px;padding:0;margin-top:0}
#atabs{display:none}
#t-acts .pmseg{display:inline-flex}
#a-fit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
#a-fit>*{min-width:0;margin:0!important}
#a-fit>#pmcard{display:contents}
#pmcard>.card:not(#pmupd):not(#pmedit){display:contents;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
#pmcard>.card:not(#pmupd):not(#pmedit)>.chead:first-child,#pmcard>.card:not(#pmupd):not(#pmedit)>.note,#pmcard #pmt{display:none}
#pmcard .mtiles{grid-column:1/-1;order:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
#a-fit>.card:has(#fit){grid-column:1/-1;order:2}
#fit{width:100%;height:220px;display:block}
#a-fit{align-items:stretch}#pmupd select,#pmupd input{width:100%;box-sizing:border-box}#pmcard .pmz>.chead{margin-top:0!important}#pmcard .pmth>h3{margin-top:0!important}
#pmupd .cgrid{grid-template-columns:1fr!important}
#pmcard .pmz{order:3;padding:16px}#pmcard .pmth{order:3;padding:16px}#pmupd{order:3}
#pmedit{order:4;grid-column:1/-1}
#sprintcard{order:5;grid-column:1/-1}
#a-fit>.calwrap{order:6;grid-column:1/-1}
#a-fit>.card:has(#curve){order:7;grid-column:1/-1}
#a-list:not([hidden]){display:block}
}
@media (min-width:900px) and (max-width:1199px){
#a-fit{grid-template-columns:repeat(2,minmax(0,1fr))}#pmupd{grid-column:1/-1}
}
@media (min-width:900px){
/* ---- 5. Coach ---- */
#t-coach>.page{max-width:1180px;padding:0;display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,3fr) minmax(260px,1fr);gap:16px;align-items:start}
#t-coach>.page>*{min-width:0;margin:0!important}
.coachtop{grid-column:1;grid-row:1/4;display:block}
#coaches.cavrow{display:flex;flex-direction:column;gap:8px;overflow:visible;padding:0}
#coaches .cavb{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"av nm" "av st";column-gap:12px;align-items:center;text-align:left;padding:10px 12px;border-radius:16px;background:rgba(21,29,38,.72);border:1px solid rgba(230,237,243,.10);width:100%;height:auto;color:var(--ink)}
#coaches .cavb .cav{grid-area:av;width:44px;height:44px}
#coaches .cavb small{grid-area:nm;font-size:14px;font-weight:700;align-self:end;white-space:normal;text-align:left}
#coaches .cavb .cst{grid-area:st;display:block;font-style:normal;font-size:12px;color:var(--muted);align-self:start}
#coaches .cavb.on{border:2px solid var(--yellow);background:color-mix(in srgb,var(--yellow) 12%,transparent);padding:9px 11px}
#cset{display:none}
#cpanel,#cpanel[hidden]{display:block!important;grid-column:3;grid-row:3}
#cpanel>label.note{display:block;margin-bottom:2px}
#aboutcoach{grid-column:2;grid-row:1}
.cfc{grid-column:2;grid-row:2/5;display:flex;flex-direction:column;height:calc(100vh - 210px);min-height:480px;padding:0;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);overflow:hidden}
.cfc #cfeed{flex:0 0 auto;margin:0;padding:16px 16px 0}
.cfc #chat{flex:1 1 auto;overflow-y:auto;padding:12px 16px}
.cfc .ccomposer{position:static;margin:0;padding:12px 16px 14px;border-top:1px solid var(--line);background:none;flex:0 0 auto}
#cctx{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;gap:12px}
#cctx .card{padding:16px}
#cctx .ctw{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.rdy{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.rdy:last-of-type{border-bottom:0}.rdy span{color:var(--muted);font-size:13px}
}
@media (min-width:900px) and (max-width:1199px){
#t-coach>.page{grid-template-columns:minmax(210px,1fr) minmax(0,3fr)}
#cctx{grid-column:1/-1;grid-row:auto;flex-direction:row}#cctx>.card{flex:1}
#cpanel,#cpanel[hidden]{grid-column:1/-1;grid-row:auto}
}

#pmupd .cgrid>label{min-width:0}#pmupd select,#pmupd input{max-width:100%;box-sizing:border-box}

/* very wide monitors (27"+ / 4K): let the 1180px page column grow a little instead of floating in empty space */
@media (min-width:1600px){
main>section>.page,main>section>.hero,main>section>.tabs,main>section .hero .card,.pghead,#t-home:not([hidden]),#t-plan>.page,#t-races>.page{max-width:1400px}
}