:root {
  --paper:#E9EBE3; --card:#F3F4EE; --raise:#FBFBF8;
  --ink:#18212A; --ink2:#37424C; --mut:#59636D; --faint:#8C949A;
  --line:#CBCFC2; --line2:#DEE1D8;
  --run:#A63A4A; --bike:#2E6F63; --swim:#35618F; --lift:#525C64;
  --warn:#A9761F; --flag:#7E1F2C; --flag-ink:#F3F4EE;
  --ghost:rgba(24,33,42,.05); --ghost2:rgba(24,33,42,.025);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#151A1E; --card:#1C2227; --raise:#232A30;
    --ink:#E4E7E0; --ink2:#C7CDC6; --mut:#98A29A; --faint:#6F7A78;
    --line:#333B40; --line2:#262D32;
    --run:#D97F86; --bike:#63AFA0; --swim:#7BA5D4; --lift:#9AA6AE;
    --warn:#D2A155; --flag:#B7404F; --flag-ink:#F6E9EA;
    --ghost:rgba(228,231,224,.055); --ghost2:rgba(228,231,224,.022);
  }
}
:root[data-theme="dark"] {
  --paper:#151A1E; --card:#1C2227; --raise:#232A30;
  --ink:#E4E7E0; --ink2:#C7CDC6; --mut:#98A29A; --faint:#6F7A78;
  --line:#333B40; --line2:#262D32;
  --run:#D97F86; --bike:#63AFA0; --swim:#7BA5D4; --lift:#9AA6AE;
  --warn:#D2A155; --flag:#B7404F; --flag-ink:#F6E9EA;
  --ghost:rgba(228,231,224,.055); --ghost2:rgba(228,231,224,.022);
}

*{box-sizing:border-box}
/* The `hidden` attribute is only display:none in the UA stylesheet, so any
   author `display` (.sheet is display:flex) silently beats it and leaves the
   element on screen. Everything toggled with el.hidden depends on this. */
[hidden]{display:none!important}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Newsreader,Georgia,'Times New Roman',serif;
  font-size:17px; line-height:1.6; -webkit-text-size-adjust:100%;
}
.cond,h1,h2,h3,th,button,input,select,textarea,.data,.eyebrow,.chip,.tag,.num{
  font-family:'Barlow Condensed','Arial Narrow',Haettenschweiler,sans-serif;
}
h1,h2,h3{font-weight:600; line-height:1.08; margin:0; letter-spacing:.004em; text-wrap:balance}
.num,.data,table{font-variant-numeric:tabular-nums}
a{color:var(--run); text-decoration-thickness:1px; text-underline-offset:2px}
:focus-visible{outline:2px solid var(--swim); outline-offset:2px}

.shell{max-width:1040px; margin:0 auto; padding:0 20px 96px}

/* masthead ------------------------------------------------------------- */
.masthead{
  display:flex; gap:28px; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; padding:34px 0 20px;
}
.eyebrow{
  font-size:12.5px; font-weight:500; text-transform:uppercase; letter-spacing:.14em;
  color:var(--mut); margin:0 0 6px;
}
h1{font-size:clamp(32px,6vw,50px)}
.goal{margin:10px 0 0; max-width:46ch; color:var(--ink2); font-size:16.5px; line-height:1.5}
.mh-right{display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:250px}
.phasechip{
  font-size:15px; color:var(--ink); border:1px solid var(--line);
  background:var(--card); padding:4px 11px; display:inline-flex; gap:9px; align-items:center;
}
.phasechip b{font-weight:600}
.phasechip s{text-decoration:none; color:var(--mut)}
.weekmeter{width:100%}
.wm-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.wm-big{font-size:31px; font-weight:600; line-height:1}
.wm-big small{font-size:17px; color:var(--mut); font-weight:500}
.wm-lab{font-size:12.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--mut)}
.wm-track{height:5px; background:var(--ghost); margin-top:8px; position:relative; overflow:hidden}
.wm-fill{height:100%; background:var(--run); width:0}
.wm-tick{position:absolute; top:-3px; bottom:-3px; width:1px; background:var(--mut)}
.syncline{font-size:14px; color:var(--mut)}
.syncline b{color:var(--ink); font-weight:500}
.syncline.stale b{color:var(--warn)}

/* nav ------------------------------------------------------------------ */
.jump{
  position:sticky; top:0; z-index:30; display:flex; gap:2px; flex-wrap:wrap;
  background:var(--paper); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); margin-bottom:34px;
}
.jump a{
  font-family:'Barlow Condensed',sans-serif; font-size:14px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--mut); text-decoration:none; padding:9px 13px 8px;
}
.jump a:hover{color:var(--ink); background:var(--ghost2)}

section{margin:0 0 52px; scroll-margin-top:52px}
.shead{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  border-bottom:1.5px solid var(--ink); padding-bottom:7px; margin-bottom:20px;
}
.shead h2{font-size:25px}
.shead .note{font-size:14px; color:var(--mut); margin-left:auto; font-family:'Barlow Condensed',sans-serif}

/* today ---------------------------------------------------------------- */
.today{background:var(--card); border:1px solid var(--line); border-top:3px solid var(--ink)}
.today-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  flex-wrap:wrap; padding:16px 20px 13px; border-bottom:1px solid var(--line2);
}
.today-date{font-size:22px; font-weight:600}
.today-date span{color:var(--mut); font-weight:500; font-size:16px; margin-left:9px}
.today-tag{font-size:13px; text-transform:uppercase; letter-spacing:.11em; color:var(--mut)}
.slots{display:flex; flex-direction:column}
.slot{display:grid; grid-template-columns:4px 1fr auto; gap:0 16px; border-bottom:1px solid var(--line2)}
.slot:last-child{border-bottom:0}
.slot-rule{background:var(--line)}
.slot.run .slot-rule{background:var(--run)}
.slot.bike .slot-rule{background:var(--bike)}
.slot.swim .slot-rule{background:var(--swim)}
.slot.lift .slot-rule,.slot.strength .slot-rule,.slot.mobility .slot-rule{background:var(--lift)}
.slot-main{padding:14px 0 14px 4px; min-width:0}
.slot-title{font-family:'Barlow Condensed',sans-serif; font-size:19px; font-weight:600}
.slot-sport{font-size:12.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--mut); margin-bottom:3px}
.slot-detail{font-size:16px; color:var(--ink2); margin:5px 0 0; max-width:62ch; line-height:1.5}
.slot-actual{
  display:flex; gap:6px 18px; flex-wrap:wrap; margin-top:9px;
  font-family:'Barlow Condensed',sans-serif; font-size:16px; color:var(--ink);
  padding-top:9px; border-top:1px dotted var(--line);
}
.slot-actual i{color:var(--mut); font-style:normal; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.1em; margin-right:5px}
.slot-side{padding:14px 20px 14px 0; display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.rest{padding:20px; color:var(--mut); font-style:italic}

/* chips / buttons ------------------------------------------------------ */
.chip{
  font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; padding:3px 8px;
  border:1px solid var(--line); color:var(--mut); white-space:nowrap; background:transparent;
}
.chip.done{border-color:var(--ink); color:var(--ink)}
.chip.miss{border-color:var(--warn); color:var(--warn)}
.chip.pain{background:var(--flag); border-color:var(--flag); color:var(--flag-ink)}
.chip.deload{border-style:dashed}
.chip.opt{font-style:italic; letter-spacing:.06em; text-transform:none; font-size:13.5px}
button{
  font-size:15px; letter-spacing:.03em; padding:7px 14px; cursor:pointer;
  background:var(--raise); color:var(--ink); border:1px solid var(--line);
}
button:hover:not(:disabled){border-color:var(--ink)}
button:disabled{opacity:.45; cursor:default}
button.solid{background:var(--ink); color:var(--paper); border-color:var(--ink)}
button.solid:hover:not(:disabled){background:var(--ink2)}
button.link{background:none; border:0; padding:2px 0; color:var(--run); text-decoration:underline;
  text-underline-offset:3px; font-size:15px}
.btnrow{display:flex; gap:9px; flex-wrap:wrap; align-items:center}

/* week table ----------------------------------------------------------- */
.wk{border-top:1px solid var(--line)}
.day{
  display:grid; grid-template-columns:74px 1fr 210px 70px; gap:14px;
  align-items:center; padding:11px 8px 11px 12px; border-bottom:1px solid var(--line2);
  position:relative; background:transparent;
}
.day.is-today{background:var(--ghost)}
.day.is-today::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ink)}
.day.past{color:var(--ink2)}
.day-name{font-family:'Barlow Condensed',sans-serif; font-size:16px}
.day-name b{display:block; font-size:17px; font-weight:600; color:var(--ink)}
.day-name span{color:var(--mut); font-size:14px}
.day-plan{display:flex; gap:7px 12px; flex-wrap:wrap; font-family:'Barlow Condensed',sans-serif; font-size:16.5px}
.pl{display:inline-flex; gap:6px; align-items:baseline; white-space:nowrap}
.pl s{text-decoration:none; width:7px; height:7px; display:inline-block; flex:none; transform:translateY(-1px)}
.pl.run s{background:var(--run)} .pl.bike s{background:var(--bike)}
.pl.swim s{background:var(--swim)} .pl.lift s,.pl.strength s,.pl.mobility s{background:var(--lift)}
.pl em{color:var(--mut); font-style:normal}
.day-act{font-family:'Barlow Condensed',sans-serif; font-size:16px; color:var(--ink); display:flex;
  gap:4px 14px; flex-wrap:wrap}
.day-act .dash{color:var(--faint)}
.day-fb{display:flex; justify-content:flex-end}
.fbdot{width:11px; height:11px; border:1px solid var(--mut); display:inline-block}
.fbdot.has{background:var(--ink); border-color:var(--ink)}
.fbdot.pain{background:var(--flag); border-color:var(--flag)}

/* chart ---------------------------------------------------------------- */
.chartwrap{overflow-x:auto}
.chartwrap svg{width:100%; min-width:640px; height:auto; display:block; overflow:visible}
.legend{display:flex; gap:8px 22px; flex-wrap:wrap; font-family:'Barlow Condensed',sans-serif;
  font-size:14.5px; color:var(--mut); margin:12px 0 0}
.legend span{display:inline-flex; gap:7px; align-items:center}
.legend i{width:11px; height:11px; display:inline-block}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:0;
  border-top:1px solid var(--line); margin-top:26px}
.stat{padding:14px 16px 15px; border-right:1px solid var(--line2)}
.stat:last-child{border-right:0}
.stat b{display:block; font-family:'Barlow Condensed',sans-serif; font-size:27px; font-weight:600; line-height:1}
.stat i{font-style:normal; font-size:15px; color:var(--mut); font-family:'Barlow Condensed',sans-serif}
.stat span{display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--mut); margin-top:6px; font-family:'Barlow Condensed',sans-serif}

/* coach ---------------------------------------------------------------- */
.coach{background:var(--card); border-left:3px solid var(--run); padding:20px 24px 22px}
.verdict{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.verdict b{font-family:'Barlow Condensed',sans-serif; font-size:23px; font-weight:600}
.verdict .chip{align-self:center}
.coachtext{max-width:66ch; margin:0}
.coachtext p{margin:0 0 12px}
.coachtext p:first-child{font-size:18.5px; line-height:1.55}
.coachtext em{font-style:italic; color:var(--ink2)}
.adj{margin:16px 0 0; padding:0; list-style:none; max-width:66ch}
.adj li{display:flex; gap:11px; padding:7px 0; border-top:1px dotted var(--line); font-size:16px}
.adj li:before{content:""; width:6px; height:6px; background:var(--run); flex:none; margin-top:9px}
.flagbox{margin-top:16px; border:1px solid var(--flag); padding:12px 15px; max-width:66ch}
.flagbox b{font-family:'Barlow Condensed',sans-serif; font-size:13px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--flag); display:block; margin-bottom:5px}
.flagbox ul{margin:0; padding-left:18px} .flagbox li{margin:3px 0; font-size:16px}
.digest{margin-top:26px}
.digest label{display:block; font-family:'Barlow Condensed',sans-serif; font-size:13px;
  text-transform:uppercase; letter-spacing:.12em; color:var(--mut); margin-bottom:7px}
textarea,input[type=text],input[type=number],input[type=date],select{
  width:100%; background:var(--raise); color:var(--ink); border:1px solid var(--line);
  padding:9px 11px; font-size:16px; line-height:1.5;
}
textarea{font-family:Newsreader,Georgia,serif; resize:vertical; min-height:112px}
.thinking{font-family:'Barlow Condensed',sans-serif; color:var(--mut); font-size:15.5px}
.thinking.err{color:var(--flag)}
.stream{white-space:pre-wrap; font-size:15px; color:var(--mut); max-height:150px; overflow:auto;
  border-left:2px solid var(--line); padding-left:12px; margin-top:12px}

/* log ------------------------------------------------------------------ */
.tablewrap{overflow-x:auto; border-top:1px solid var(--line)}
table{border-collapse:collapse; width:100%; min-width:660px; font-size:16px}
th{font-family:'Barlow Condensed',sans-serif; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.11em; color:var(--mut); text-align:left; font-weight:500;
  padding:9px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
td{font-family:'Barlow Condensed',sans-serif; padding:9px 10px; border-bottom:1px solid var(--line2);
  white-space:nowrap; vertical-align:middle}
td.name{font-family:Newsreader,Georgia,serif; white-space:normal; min-width:180px; font-size:16px}
tbody tr:hover{background:var(--ghost2)}
th.r,td.r{text-align:right}
.sport{display:inline-flex; gap:7px; align-items:center}
.sport s{text-decoration:none; width:8px; height:8px; display:inline-block}
.sport.run s{background:var(--run)} .sport.bike s{background:var(--bike)}
.sport.swim s{background:var(--swim)} .sport.lift s,.sport.strength s,.sport.mobility s{background:var(--lift)}
.sport.walk s,.sport.hike s,.sport.cross s,.sport.other s{background:var(--faint)}

/* plan ----------------------------------------------------------------- */
.phases{display:grid; gap:0; border-top:1px solid var(--line)}
.ph{display:grid; grid-template-columns:38px 1fr; gap:16px; padding:16px 8px 18px;
  border-bottom:1px solid var(--line2)}
.ph-n{font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:600; color:var(--run); line-height:.95}
.ph h3{font-size:21px}
.ph-meta{font-family:'Barlow Condensed',sans-serif; font-size:15px; color:var(--mut); margin:3px 0 8px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.ph-meta s{text-decoration:none; width:13px; height:1px; background:var(--line); display:inline-block}
.ph p{margin:0; max-width:64ch; font-size:16.5px}
.ph.now{background:var(--ghost)}
details{border-top:1px solid var(--line2); padding:10px 0}
summary{font-family:'Barlow Condensed',sans-serif; font-size:16px; cursor:pointer; color:var(--mut)}
summary:hover{color:var(--ink)}

/* setup ---------------------------------------------------------------- */
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px}
.field{margin-bottom:14px}
.field label{display:block; font-family:'Barlow Condensed',sans-serif; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--mut); margin-bottom:5px}
.help{font-size:15.5px; color:var(--mut); max-width:60ch; margin:0 0 14px}
.help code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px;
  background:var(--ghost); padding:1px 5px}
.steps{margin:0 0 16px; padding-left:20px; max-width:60ch; font-size:16px}
.steps li{margin-bottom:7px}
.filerow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
input[type=file]{font-family:'Barlow Condensed',sans-serif; font-size:15px; color:var(--mut);
  background:none; border:0; padding:0; width:auto}

/* sheet (modal) -------------------------------------------------------- */
.sheet{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end;
  justify-content:center; background:rgba(10,14,17,.5); padding:0}
.sheet-in{background:var(--paper); border-top:3px solid var(--ink); width:100%;
  max-width:640px; max-height:92vh; overflow:auto; padding:22px 24px 28px}
@media (min-width:640px){ .sheet{align-items:center; padding:24px}
  .sheet-in{border:1px solid var(--line); border-top:3px solid var(--ink)} }
.sheet-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px}
.sheet-head h3{font-size:23px}
.sheet-head p{margin:4px 0 0; font-size:15px; color:var(--mut); font-family:'Barlow Condensed',sans-serif}
.scale{display:flex; gap:5px; flex-wrap:wrap}
.scale button{flex:1 1 auto; min-width:38px; padding:8px 4px; font-size:16px; text-align:center}
.scale button[aria-pressed=true]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.scalenote{font-size:14px; color:var(--mut); font-family:'Barlow Condensed',sans-serif; margin-top:5px}
.splits{font-family:'Barlow Condensed',sans-serif; font-size:15.5px; margin-top:6px}
.splits div{display:grid; grid-template-columns:44px 1fr 68px 58px 58px; gap:8px;
  padding:4px 0; border-bottom:1px dotted var(--line)}
.splits .hd{color:var(--mut); font-size:12.5px; text-transform:uppercase; letter-spacing:.1em}
.bar{background:var(--run); height:8px; align-self:center; opacity:.75}
.lifts{width:100%; margin-top:8px}
.lifts input{padding:6px 8px; font-size:15px}
.lifts td{border:0; padding:3px 4px 3px 0; white-space:normal}
.empty{color:var(--mut); font-style:italic; padding:18px 0}
@media (max-width:720px){
  body{font-size:16px}
  .day{grid-template-columns:60px 1fr; gap:6px 10px}
  .day-act{grid-column:2; font-size:15px}
  .day-fb{grid-column:2; justify-content:flex-start}
  .slot{grid-template-columns:4px 1fr}
  .slot-side{grid-column:2; padding:0 20px 14px 4px; align-items:flex-start}
  .stat{border-right:0; border-bottom:1px solid var(--line2)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---- server app additions ------------------------------------------------ */
.gate{max-width:520px; margin:0 auto; padding:64px 0 40px; text-align:left}
.gate h1{font-size:clamp(34px,7vw,54px); margin-bottom:14px}
.gate p{color:var(--ink2); margin:0 0 22px; max-width:52ch}
.gate .btnrow{margin-top:26px}
.gate .glogo{display:inline-flex; align-items:center; gap:10px}
.gate .sig{margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif; font-size:14.5px; color:var(--mut)}
.who{display:flex; align-items:center; gap:9px; font-family:'Barlow Condensed',sans-serif; font-size:15px}
.who img{width:26px; height:26px; border-radius:50%; display:block}
.who button{padding:3px 9px; font-size:13.5px}

.conn{border:1px solid var(--line); background:var(--card); padding:16px 18px; margin-bottom:16px}
.conn h3{font-size:18px; margin-bottom:4px; display:flex; align-items:center; gap:10px}
.conn p{margin:0 0 12px; font-size:15.5px; color:var(--mut); max-width:52ch}
.conn .btnrow{margin-top:4px}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:none;
  background:var(--faint)}
.dot.on{background:var(--bike)}
.dot.off{background:var(--warn)}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 14px;
  font-family:'Barlow Condensed',sans-serif; font-size:15px; margin:0 0 12px}
.kv dt{color:var(--mut)}
.kv dd{margin:0; color:var(--ink)}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); font-family:'Barlow Condensed',sans-serif;
  font-size:15.5px; padding:10px 18px; z-index:80; max-width:calc(100vw - 32px)}
.toast.err{background:var(--flag); color:var(--flag-ink)}
.working{display:inline-flex; align-items:center; gap:9px}
.working:after{content:""; width:11px; height:11px; border:2px solid var(--mut);
  border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.working:after{animation-duration:2.4s}}
.elapsed{font-variant-numeric:tabular-nums}


/* ---- day navigation in the Today panel ---------------------------------- */
.daynav{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.daynav button{
  min-width:34px; padding:1px 10px 4px; font-size:20px; line-height:1.15;
  color:var(--mut);
}
.daynav button:hover:not(:disabled){color:var(--ink); border-color:var(--ink)}
.daynav .today-reset{min-width:0; font-size:14px; padding:5px 11px; line-height:1.3}

/* ---- prescribed and completed lifts ------------------------------------- */
.rx{
  width:100%; margin:10px 0 0; border-collapse:collapse;
  font-family:'Barlow Condensed',sans-serif; font-size:15.5px;
}
.rx td{
  padding:4px 10px 4px 0; border:0; border-top:1px dotted var(--line);
  vertical-align:baseline; white-space:normal;
}
.rx tr:first-child td{border-top:1px solid var(--line)}
.rx-ex{font-weight:500; color:var(--ink)}
.rx-vol{white-space:nowrap; color:var(--ink); font-variant-numeric:tabular-nums; width:82px}
.rx-load{white-space:nowrap; color:var(--ink); font-variant-numeric:tabular-nums; width:76px}
.rx-note{color:var(--mut); font-family:Newsreader,Georgia,serif; font-size:15px; line-height:1.4}
.rx.done .rx-ex,.rx.done .rx-vol,.rx.done .rx-load{color:var(--lift)}
.rx.done .rx-load{font-weight:500}
.rx-hint{
  display:block; margin-top:3px; font-family:'Barlow Condensed',sans-serif;
  font-size:13.5px; color:var(--mut);
}
.day[data-goday]{cursor:pointer}
.day[data-goday]:hover{background:var(--ghost2)}
.day[data-goday].is-today:hover{background:var(--ghost)}
.day[data-goday]:focus-visible{outline:2px solid var(--swim); outline-offset:-2px}

.thinking code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  background:var(--ghost); padding:1px 5px;
}


/* ==========================================================================
   Site chrome — multi-page structure, same paper and ink
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:40; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1120px; margin:0 auto; padding:0 24px;
  display:flex; align-items:stretch; gap:28px; min-height:60px;
}
.wordmark{
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  text-decoration:none; color:var(--ink); padding:8px 0; flex:none;
}
.wm-eyebrow{
  font-family:'Barlow Condensed',sans-serif; font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.18em; color:var(--mut);
}
.wm-name{
  font-family:'Barlow Condensed',sans-serif; font-size:23px; font-weight:600;
  line-height:1; letter-spacing:.005em;
}
.topbar nav{display:flex; align-items:stretch; gap:0; flex:1; flex-wrap:wrap}
.topbar nav a{
  display:flex; align-items:center; padding:0 15px;
  font-family:'Barlow Condensed',sans-serif; font-size:14.5px; text-transform:uppercase;
  letter-spacing:.11em; color:var(--mut); text-decoration:none;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a.on{color:var(--ink); border-bottom-color:var(--run)}
.topbar-right{display:flex; align-items:center; gap:16px; flex:none}
.syncbar{
  font-family:'Barlow Condensed',sans-serif; font-size:14px; color:var(--mut);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.syncbar.stale{color:var(--warn)}
.syncbar a{color:inherit}
.syncbar button.link{font-size:14px; color:inherit}

.view{max-width:1120px; margin:0 auto; padding:34px 24px 90px; min-height:60vh}

.foot{border-top:1px solid var(--line); margin-top:40px}
.foot-in{
  max-width:1120px; margin:0 auto; padding:20px 24px 40px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif; font-size:14px; color:var(--mut);
}
.foot-links{display:flex; gap:18px}
.foot a{color:var(--mut)}

/* page headers ------------------------------------------------------------ */
.phead-main{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  flex-wrap:wrap; border-bottom:1.5px solid var(--ink); padding-bottom:14px; margin-bottom:26px;
}
.phead-main h1{font-size:clamp(28px,4.6vw,40px)}
.phead-note{
  margin:8px 0 0; max-width:62ch; color:var(--ink2); font-size:16.5px; line-height:1.5;
}
.phead-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.kbdhint{font-family:'Barlow Condensed',sans-serif; font-size:13px; color:var(--faint)}
.sub-h{font-size:22px; margin:38px 0 14px}

.card{background:var(--card); border:1px solid var(--line)}
.card.today{border-top:3px solid var(--ink)}
.emptystate{
  border:1px dashed var(--line); padding:34px 26px; text-align:center; color:var(--mut);
  background:var(--ghost2);
}
.emptystate p{margin:0; font-size:17px}
.mut{color:var(--mut)}

/* scores ------------------------------------------------------------------ */
.scores{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0;
  border:1px solid var(--line); background:var(--card); margin-bottom:24px;
}
.scores.wide{margin-bottom:30px}
.scores.loading{
  display:block; padding:14px 18px; background:var(--ghost2); border-style:dashed;
}
.meter{padding:16px 18px 17px; border-right:1px solid var(--line2)}
.meter:last-of-type{border-right:0}
.meter-top{display:flex; align-items:baseline; gap:10px}
.meter-top b{
  font-family:'Barlow Condensed',sans-serif; font-size:34px; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums;
}
.meter-top span{
  font-family:'Barlow Condensed',sans-serif; font-size:13px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--mut);
}
.meter-track{height:4px; background:var(--ghost); margin-top:10px; overflow:hidden}
.meter-fill{height:100%; width:0}
.meter-cap{
  margin:8px 0 0; font-family:'Barlow Condensed',sans-serif; font-size:13.5px;
  color:var(--mut); line-height:1.35;
}
.scores-note{
  grid-column:1/-1; margin:0; padding:10px 18px; border-top:1px solid var(--line2);
  font-family:'Barlow Condensed',sans-serif; font-size:13px; color:var(--faint);
}

/* volume tiles ------------------------------------------------------------ */
.voltiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line); background:var(--card); margin-bottom:22px;
}
.voltile{padding:14px 16px 15px; border-right:1px solid var(--line2)}
.voltile:last-child{border-right:0}
.vt-top{display:flex; align-items:baseline; gap:7px; font-family:'Barlow Condensed',sans-serif}
.vt-top b{font-size:24px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums}
.vt-top span{font-size:15px; color:var(--mut)}
.vt-track{height:4px; background:var(--ghost); margin-top:9px; overflow:hidden}
.vt-fill{height:100%; width:0}
.vt-label{
  display:block; margin-top:7px; font-family:'Barlow Condensed',sans-serif; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--mut);
}

/* chart blocks ------------------------------------------------------------ */
.chartblock{margin:0 0 40px}
.cb-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:16px;
}
.cb-head h2{font-size:21px}
.cb-note{font-family:'Barlow Condensed',sans-serif; font-size:14px; color:var(--mut)}
.tabs{display:flex; gap:0; flex-wrap:wrap}
.tabs.spread{margin-bottom:16px; border-bottom:1px solid var(--line)}
.tab{
  background:none; border:0; border-bottom:2px solid transparent; padding:6px 13px;
  font-family:'Barlow Condensed',sans-serif; font-size:14px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--mut); cursor:pointer;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink); border-bottom-color:var(--run)}

.kvtable{min-width:0}
.kvtable td{font-size:15px; padding:5px 10px 5px 0; border-bottom:1px dotted var(--line)}
.scorecard{border-top:1px solid var(--line2); padding:12px 0}
.scorecard summary{
  cursor:pointer; font-family:'Barlow Condensed',sans-serif; display:flex; gap:12px;
  align-items:baseline; color:var(--ink);
}
.scorecard summary b{font-size:24px; font-weight:600; font-variant-numeric:tabular-nums}
.scorecard summary span{font-size:14px; color:var(--mut)}
.spark{width:100%; max-width:150px; height:34px; display:block}

/* strength program -------------------------------------------------------- */
.stats.tight{margin:0 0 20px}
.coverage{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 26px}
.cov{
  font-family:'Barlow Condensed',sans-serif; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.1em; padding:3px 9px; border:1px solid var(--line); color:var(--mut);
}
.cov.on{border-color:var(--bike); color:var(--bike)}
.cov.missing{border-color:var(--warn); color:var(--warn)}
.progsession{margin:0 0 32px; border-top:2px solid var(--ink)}
.ps-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:14px 0 12px;
}
.ps-id{
  font-family:'Barlow Condensed',sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:.14em; color:var(--run); text-transform:uppercase;
}
.ps-head h3{font-size:22px; margin-top:2px}
.ps-head p{margin:4px 0 0; font-size:16px; color:var(--mut)}
.ps-count{
  font-family:'Barlow Condensed',sans-serif; font-size:13px; color:var(--faint);
  white-space:nowrap;
}
table.movements{min-width:640px}
table.movements td{vertical-align:top; padding:11px 12px 11px 0}
.m-name b{font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:600}
.m-meta{
  display:block; margin-top:3px; font-family:'Barlow Condensed',sans-serif;
  font-size:12.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--mut);
}
.m-meta .chip{margin-left:4px; padding:1px 6px; font-size:11px}
.m-cue{
  display:block; margin-top:5px; font-family:Newsreader,Georgia,serif; font-size:15px;
  color:var(--mut); line-height:1.4; max-width:44ch;
}
.m-rx,.m-load{white-space:nowrap; font-variant-numeric:tabular-nums; font-size:16.5px}
.m-load{font-weight:500}
.m-last{white-space:nowrap; font-size:15px; color:var(--ink2)}
.m-last span{display:block; color:var(--mut); font-size:14px}
.m-trend{width:170px}
.m-trend span{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:13.5px;
  color:var(--lift); font-variant-numeric:tabular-nums;
}
.chip.core{border-color:var(--line); color:var(--faint)}
.chip.trial{border-color:var(--swim); color:var(--swim); border-style:dashed}
.trial,.off{
  font-family:'Barlow Condensed',sans-serif; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.09em; padding:1px 5px; border:1px solid var(--swim); color:var(--swim);
}
.off{border-color:var(--warn); color:var(--warn)}
.offprog{padding:18px 20px 20px; margin:0 0 30px}
.offprog h3{font-size:19px; margin-bottom:6px}
.retired{padding:18px 20px; margin:0 0 26px}
.retired h3{font-size:18px; margin-bottom:8px}
.retired ul{margin:0; padding-left:20px; font-size:16px}
.retired li{margin:4px 0}
.changelog{border-top:1px solid var(--line); padding:12px 0}
.changelog summary{
  font-family:'Barlow Condensed',sans-serif; font-size:15px; color:var(--mut); cursor:pointer;
}
.changelog ol{margin:12px 0 0; padding-left:20px; font-size:15.5px}
.changelog li{margin:6px 0}
.changelog li span{
  font-family:'Barlow Condensed',sans-serif; color:var(--faint); margin-right:6px;
  font-variant-numeric:tabular-nums;
}

/* the set grid ------------------------------------------------------------ */
.lx{border-top:1px solid var(--line); padding:14px 0 16px}
.lx-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.lx-head h4{
  font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:600; margin:0;
}
.lx-rx{
  margin:3px 0 0; font-family:'Barlow Condensed',sans-serif; font-size:14px; color:var(--mut);
}
.lx-rx .up{color:var(--bike)}
.lx-cue{display:block; font-family:Newsreader,Georgia,serif; font-size:14.5px; margin-top:3px}
button.icon{
  background:none; border:0; color:var(--faint); font-size:20px; line-height:1;
  padding:2px 6px; cursor:pointer;
}
button.icon:hover{color:var(--flag)}
table.setgrid{width:100%; min-width:0; margin-top:9px; background:none}
table.setgrid th{
  padding:0 6px 4px 0; font-size:11.5px; letter-spacing:.1em; border-bottom:1px solid var(--line);
}
table.setgrid td{padding:3px 6px 3px 0; border:0; white-space:nowrap}
table.setgrid .sn{
  width:28px; color:var(--faint); font-family:'Barlow Condensed',sans-serif;
  font-variant-numeric:tabular-nums; text-align:left;
}
table.setgrid .sx{width:30px}
table.setgrid input{
  width:100%; min-width:52px; padding:5px 7px; font-size:16px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.lx-foot{display:flex; align-items:center; gap:9px; margin-top:10px; flex-wrap:wrap}
.lx-foot button{padding:4px 10px; font-size:14px}
.lx-sum{
  font-family:'Barlow Condensed',sans-serif; font-size:13.5px; color:var(--mut);
  margin-left:auto; font-variant-numeric:tabular-nums;
}
.lx.addex{border-top:2px solid var(--ink); padding-top:16px}
.lx.addex label{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--mut); margin-bottom:6px;
}
.lx-fb{
  display:grid; grid-template-columns:1fr 1fr; gap:0 14px; border-top:2px solid var(--ink);
  padding-top:16px; margin-top:6px;
}

/* guardrails -------------------------------------------------------------- */
.guard{
  border:1px solid var(--warn); background:var(--ghost2); padding:14px 18px; margin:22px 0 0;
  max-width:74ch;
}
.guard.blocking{border-color:var(--flag)}
.guard b{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.12em; color:var(--warn); margin-bottom:8px;
}
.guard.blocking b{color:var(--flag)}
.guard ul{margin:0; padding:0; list-style:none}
.guard li{
  display:flex; gap:10px; align-items:baseline; padding:5px 0; font-size:16px;
  border-top:1px dotted var(--line);
}
.guard li:first-child{border-top:0}
.gsev{
  font-family:'Barlow Condensed',sans-serif; font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; padding:1px 6px; border:1px solid var(--warn); color:var(--warn);
  flex:none; margin-top:2px;
}
.gsev.block{border-color:var(--flag); color:var(--flag)}

/* misc -------------------------------------------------------------------- */
.check{
  display:flex; gap:9px; align-items:center; font-size:16px; margin:6px 0 12px;
  cursor:pointer;
}
.check.inline{display:inline-flex; margin:0 12px 8px 0; font-size:15.5px}
.check input{width:auto}
.daypick{display:flex; flex-wrap:wrap; margin-top:2px}
.wk-label{
  font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:600;
  padding:0 4px; font-variant-numeric:tabular-nums;
}
tr.isnow td{background:var(--ghost)}
.digest-old{border-top:1px solid var(--line2); padding:10px 0}
.digest-old summary{
  font-family:'Barlow Condensed',sans-serif; font-size:16px; color:var(--mut); cursor:pointer;
}
.digest-old blockquote{
  margin:12px 0 0; padding-left:16px; border-left:2px solid var(--line);
  font-size:16.5px; color:var(--ink2);
}
section.digest{margin-top:30px}
section.digest label{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:13px;
  text-transform:uppercase; letter-spacing:.12em; color:var(--mut); margin-bottom:7px;
}

@media (max-width:900px){
  .topbar-in{flex-wrap:wrap; gap:0 18px; padding:0 16px}
  .topbar nav{order:3; width:100%; border-top:1px solid var(--line2)}
  .topbar nav a,.topbar .menu-btn{padding:9px 12px}
  .topbar-right{margin-left:auto}
  .view{padding:26px 16px 70px}
  .foot-in{padding:18px 16px 32px}
  .lx-fb{grid-template-columns:1fr}
  .meter{border-right:0; border-bottom:1px solid var(--line2)}
  .voltile{border-right:0; border-bottom:1px solid var(--line2)}
}


/* ---- editing a planned week --------------------------------------------- */
.day.editing{align-items:start}
.day.editing .day-plan{grid-column:2 / -1}
.editrows{display:flex; flex-direction:column; gap:4px; width:100%}
.editrow{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:3px 0; border-bottom:1px dotted var(--line);
}
.editrow:last-child{border-bottom:0}
.editrow .pl{flex:1; min-width:140px}
.editrow button.link{font-size:13.5px}
.editrow.add{padding-top:6px}
.mutlink{color:var(--mut)!important}
button.danger{border-color:var(--flag); color:var(--flag)}
button.danger:hover:not(:disabled){background:var(--flag); color:var(--flag-ink)}

.movegrid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.movegrid button{
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px;
  font-size:15px; line-height:1.2;
}
.movegrid button span{font-size:11.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.08em}
.movegrid button:disabled{opacity:.35}
.swaplist{display:flex; flex-direction:column; gap:5px}
.swapbtn{text-align:left; font-size:15px; padding:7px 11px}

/* ---- editing the program ------------------------------------------------ */
.m-act{white-space:nowrap; width:120px; text-align:right}
.m-act button.link{font-size:13.5px; margin-left:10px}
.ps-foot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:8px 0 0; font-family:'Barlow Condensed',sans-serif; font-size:14px;
}
.scale [data-val="core"],.scale [data-val="trial"]{flex:1 1 auto; min-width:0; font-size:14.5px}

@media (max-width:720px){
  .movegrid{grid-template-columns:repeat(4,1fr)}
  .m-act{width:auto}
}

/* ---- the body map -------------------------------------------------------- */
.painmap{margin:4px 0 18px}
.bodymap{border:1px solid var(--line); background:var(--card); padding:14px 16px 16px}
/* Both figures stack over the readout; a zoomed one sits beside it. */
.bm-body{display:block}
.bodymap[data-stage="view"] .bm-body,
.bodymap[data-stage="zone"] .bm-body{display:flex; gap:20px; align-items:flex-start}
.bodymap[data-stage="view"] .bm-stage,
.bodymap[data-stage="zone"] .bm-stage{flex:0 0 236px}
.bodymap[data-stage="view"] .bm-readout,
.bodymap[data-stage="zone"] .bm-readout{
  flex:1 1 250px; min-width:0; margin-top:0; border-top:0; padding-top:0;
}
.bm-views{display:flex; gap:10px; justify-content:center; align-items:flex-start}
.bm-views.one{justify-content:flex-start}

/* Each figure lives in its own box, so left and right can be labelled on it. */
.bm-frame{
  position:relative; flex:0 1 190px; max-width:190px; text-align:center;
  border:1px solid var(--line); background:var(--raise); padding:20px 10px 7px;
}
.bm-frame.open{
  display:block; width:100%; font:inherit; color:inherit; cursor:zoom-in;
  transition:border-color .12s ease;
}
.bm-frame.open:hover,.bm-frame.open:focus-visible{border-color:var(--ink)}
.bm-frame.pick .bm-svg{cursor:crosshair}
.bm-views.one .bm-frame{flex:1 1 auto; max-width:236px}
/* From the athlete's point of view: the front figure faces you, so it is flipped. */
.bm-side{
  position:absolute; top:5px; font-family:'Barlow Condensed',sans-serif; font-size:11px;
  letter-spacing:.14em; color:var(--faint); border:1px solid var(--line2);
  padding:0 5px; line-height:1.6;
}
.bm-side.l{left:6px}
.bm-side.r{right:6px}
.bm-svg{width:100%; height:auto; display:block; touch-action:manipulation}
.bm-viewlabel{
  display:block; margin-top:4px; font-family:'Barlow Condensed',sans-serif;
  font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--mut);
}
.bm-crumbs{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:11px;
  font-family:'Barlow Condensed',sans-serif; font-size:13px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--mut);
}
.bm-crumbs i{font-style:normal; color:var(--faint)}
.bm-crumbs span{color:var(--ink)}
.bm-crumbs .link{font:inherit; letter-spacing:inherit; text-transform:inherit}
.bodymap[data-stage="both"] .bm-crumbs{display:none}

/* The silhouette is artwork, so it is drawn as one flat shape. */
.bm-path{fill:var(--ghost); stroke:var(--line); stroke-width:.6; transition:fill .12s ease}
.bm-frame.pick:hover .bm-path,.bm-frame.open:hover .bm-path{fill:var(--ghost2)}
/*
 * The highlight is the same artwork drawn again through a clip of the named
 * area, so it lights up the shape of the body and not a rectangle over it.
 */
.bm-lit{pointer-events:none; opacity:.45}
.bm-lit .bm-path{fill:var(--flag); stroke:var(--flag); stroke-width:.6}
.bm-litbox{
  fill:none; stroke:var(--flag); stroke-width:1.5; stroke-dasharray:5 3.5;
  stroke-linejoin:round; opacity:.7; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .bm-path,.bm-frame.open{transition:none}
}

.bm-pin circle{fill:none; stroke:var(--flag); stroke-width:2.5}
.bm-pin .bm-pin-dot{fill:var(--flag); stroke:none}
.bm-heat{
  fill:var(--flag); opacity:calc(.18 + var(--pain) * .34); stroke:none;
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] .bm-heat,
:root:not([data-theme="light"]) .bm-heat{mix-blend-mode:screen}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .bm-heat{mix-blend-mode:multiply}
}

.bm-readout{margin-top:12px; border-top:1px solid var(--line2); padding-top:12px}
.bm-where{
  margin:0 0 6px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif; font-size:17px;
}
.bm-where b{font-weight:600}
.bm-hint{margin:0 0 10px; font-size:15px; color:var(--mut); line-height:1.45; max-width:56ch}
.bm-structures{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.bm-chip{
  font-family:'Barlow Condensed',sans-serif; font-size:14px; padding:4px 10px;
  border:1px solid var(--line); background:var(--raise); color:var(--ink2); cursor:pointer;
  border-left-width:3px;
}
.bm-chip:hover{border-color:var(--ink)}
.bm-chip.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
/* A left rule keys the chip to what kind of tissue it is. */
.bm-chip.k-muscle{border-left-color:var(--run)}
.bm-chip.k-tendon{border-left-color:var(--warn)}
.bm-chip.k-bone{border-left-color:var(--lift)}
.bm-chip.k-joint{border-left-color:var(--swim)}
.bm-chip.k-nerve{border-left-color:var(--bike)}
.bm-chip.k-other{border-left-color:var(--faint)}
.bm-free{margin-bottom:0}

.bodymap.heat{padding:18px}
.bodymap.heat .bm-frame{flex-basis:230px; max-width:230px}
.plainlist{list-style:none; margin:0; padding:0; font-size:16px}
.plainlist li{padding:5px 0; border-bottom:1px dotted var(--line)}
.plainlist li span{
  font-family:'Barlow Condensed',sans-serif; color:var(--faint); margin-right:8px;
  font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  .bm-frame{flex-basis:46%}
  .bodymap[data-stage="view"] .bm-body,
  .bodymap[data-stage="zone"] .bm-body{display:block}
  .bodymap[data-stage="view"] .bm-readout,
  .bodymap[data-stage="zone"] .bm-readout{margin-top:12px}
  .bm-views.one{justify-content:center}
}

/* ---- the coach's read on a goal ----------------------------------------- */
.assessment .as-head{
  margin:2px 0 10px; font-family:'Barlow Condensed',sans-serif; font-size:21px;
  line-height:1.25; color:var(--ink); max-width:60ch;
}
.as-limiter{
  margin:0 0 16px; padding:9px 13px; border-left:3px solid var(--flag);
  background:var(--ghost); font-size:16px; color:var(--ink2); max-width:70ch;
}
.as-limiter i{
  font-style:normal; font-family:'Barlow Condensed',sans-serif; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--mut); margin-right:9px;
}
.drivers{display:flex; gap:26px; flex-wrap:wrap; margin-bottom:18px}
.drv{flex:1 1 280px; min-width:0}
.drv h4{
  margin:0 0 8px; font-family:'Barlow Condensed',sans-serif; font-size:13px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--mut); font-weight:500;
}
.drv ul{list-style:none; margin:0; padding:0}
.drv li{
  padding:7px 0 7px 13px; border-bottom:1px dotted var(--line); font-size:15.5px;
  line-height:1.45; border-left:2px solid transparent;
}
.drv.up li{border-left-color:var(--bike)}
.drv.down li{border-left-color:var(--flag)}
.drv li b{font-weight:600; font-family:'Barlow Condensed',sans-serif; font-size:16.5px}
/* Weight as dots: three means this one factor is deciding the answer. */
.drv li s{text-decoration:none; color:var(--faint); font-size:9px; margin-left:7px; letter-spacing:1px}
.drv li span{display:block; color:var(--ink2); margin-top:2px}
.as-reason{margin:0 0 16px; max-width:70ch; line-height:1.55; color:var(--ink2)}
.as-moves{gap:22px; margin-bottom:16px}
.as-moves i{
  display:block; font-style:normal; font-family:'Barlow Condensed',sans-serif; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--mut); margin-bottom:3px;
}
.as-moves p{margin:0; font-size:15.5px; line-height:1.5; color:var(--ink2)}
.scores-note.lead{color:var(--ink); font-size:16px; margin-bottom:4px; max-width:64ch}
@media (max-width:560px){
  .drivers{gap:14px}
}

/* ---- the coach byline: every model-written block wears it, nothing else does */
.coach-by{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:11px;
  font-family:'Barlow Condensed',sans-serif; font-size:13px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--mut);
}
.coach-by i{width:8px; height:8px; border-radius:50%; background:var(--run); flex:none}
.coach-by b{color:var(--ink); font-weight:600}
.coach-by .chip{margin-left:2px}
.coach.assessment .as-head{margin-top:2px}
.needs{margin-left:10px; font-size:14.5px}
.scores-more{
  display:inline-block; margin-top:6px; font-family:'Barlow Condensed',sans-serif; font-size:13px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--mut);
}
.coach-line{display:inline-flex; align-items:baseline; gap:9px}
.coach-line i{width:7px; height:7px; border-radius:50%; background:var(--run); flex:none; transform:translateY(-1px)}

/* ==========================================================================
   Chaos Coaching chrome: wordmark, menus, sync, profile
   ========================================================================== */
.wm-name em{font-style:normal; font-weight:400; color:var(--mut); margin-left:6px}

/* A menu in the bar: one label, a list beneath, lit when a child page is open. */
.menu{position:relative; display:flex; align-items:stretch}
.menu-btn{
  display:flex; align-items:center; gap:7px; padding:0 15px; background:none; border:0;
  border-bottom:2px solid transparent; font-family:'Barlow Condensed',sans-serif;
  font-size:14.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--mut);
  cursor:pointer; white-space:nowrap;
}
.menu-btn:hover{color:var(--ink); border-color:transparent}
.menu.on>.menu-btn{color:var(--ink); border-bottom-color:var(--run)}
.menu-btn s{text-decoration:none; color:var(--run); letter-spacing:.08em}
.menu-btn s::before{content:"·"; margin-right:7px; color:var(--faint)}
.menu-btn i{
  width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.7;
}
.menu-btn[aria-expanded="true"] i{transform:translateY(1px) rotate(225deg)}
.menu-list{
  position:absolute; top:100%; left:0; min-width:180px; z-index:50;
  background:var(--raise); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.08);
  padding:6px 0; display:flex; flex-direction:column;
}
.menu-list.right{left:auto; right:0}
.topbar .menu-list a,.topbar .menu-list .menu-item{
  display:block; padding:9px 16px; font-family:'Barlow Condensed',sans-serif; font-size:15.5px;
  letter-spacing:.04em; color:var(--ink2); text-decoration:none; text-transform:none;
  background:none; border:0; border-bottom:0; text-align:left; cursor:pointer; white-space:nowrap;
}
.topbar .menu-list a:hover,.topbar .menu-list .menu-item:hover{background:var(--ghost); color:var(--ink)}
.topbar .menu-list a.on{color:var(--run)}
.menu-list .menu-item{border-top:1px solid var(--line2); margin-top:4px; padding-top:11px}

/* The sync control: one bordered chip, verb above, the date it reaches beneath. */
.sync{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:6px 12px 5px;
  border:1px solid var(--line); background:var(--raise); text-decoration:none; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; line-height:1.1; min-width:74px;
}
.sync b{font-size:13.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.sync span{font-size:12px; color:var(--mut); letter-spacing:.03em}
.sync.stale{border-color:var(--warn)}
.sync.stale span,.sync.stale b{color:var(--warn)}
.sync:hover{border-color:var(--ink)}

/* The profile button: avatar or initial, name, and the account menu under it. */
.who-btn{gap:9px; padding:0 4px 0 10px; text-transform:none; letter-spacing:.02em; font-size:15px}
.who-btn img{width:26px; height:26px; border-radius:50%; display:block}
.who-btn b{
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
}
.who{display:flex; align-items:stretch}
.topbar-right{gap:12px}

/* ---- training: the week down the side, the day in front --------------- */
.training{display:grid; grid-template-columns:minmax(280px,340px) 1fr; gap:22px; align-items:start; margin-top:18px}
.rail .day{
  grid-template-columns:58px 1fr 22px; grid-template-areas:"name plan fb" "name act fb";
  gap:4px 8px; padding:10px 8px 10px 12px; align-items:start;
}
.rail .day-name{grid-area:name}
.rail .day-plan{grid-area:plan}
.rail .day-act{grid-area:act; font-size:13.5px; color:var(--mut); gap:4px 9px}
.rail .day-act .sport s{width:6px; height:6px}
.rail .day-act:empty{display:none}
.rail .day-fb{grid-area:fb; justify-content:flex-end; align-self:center}
.rail .day-name b{font-size:15.5px}
.rail .day-name span{font-size:12.5px}
.rail .day-plan{font-size:14.5px; gap:4px 9px}
.rail .day-plan .pl s{width:6px; height:6px}
.rail .day.is-sel{background:var(--card); box-shadow:inset 0 0 0 1px var(--ink)}
.rail .day.is-sel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--run)}
.rail .day.is-today .day-name b{color:var(--run)}
.rail .editrows{font-size:14px}
.pane .today{margin:0}
.pane .daynav{padding:14px 18px 12px; border-bottom:1px solid var(--line2)}
.pane .day-actions{padding:12px 18px 14px; border-top:1px solid var(--line2)}
@media (max-width:900px){
  .training{grid-template-columns:1fr}
}

/* ---- profile: just the circle; the rule beneath says it opens ------------ */
.who-btn{padding:0 6px}
.who-btn:hover{border-bottom-color:var(--run)}
.menu.on>.who-btn{border-bottom-color:var(--run)}

/* ---- the sheet head's tools, and a sheet opened to read ------------------ */
.sheet-tools{display:flex; gap:8px; flex:none}
.sheet-in.locked .btnrow:has(#fbSave),
.sheet-in.locked .btnrow:has(#lxSave),
.sheet-in.locked .addex,
.sheet-in.locked [data-add-set],
.sheet-in.locked [data-del-set],
.sheet-in.locked .bm-free{display:none}
.sheet-in.locked .bodymap{pointer-events:none}
.sheet-in.locked .scale button:disabled{opacity:.35}
.sheet-in.locked .scale button:disabled[aria-pressed="true"]{opacity:1}
.sheet-in.locked textarea:disabled,.sheet-in.locked input:disabled{
  background:transparent; border-color:var(--line2); color:var(--ink); opacity:1;
}
.log .row{cursor:pointer}
.log .row:hover td{background:var(--ghost2)}
.log .row:focus-visible{outline:2px solid var(--swim); outline-offset:-2px}

/* ---- waiting on the coach ----------------------------------------------- */
.workpanel{
  display:flex; align-items:center; gap:14px; padding:12px 16px; margin-top:14px;
  border:1px solid var(--line); background:var(--card); border-left:3px solid var(--run);
  font-family:'Barlow Condensed',sans-serif;
}
.workpanel .pulse{
  width:10px; height:10px; border-radius:50%; background:var(--run); flex:none;
  animation:cc-pulse 1.4s ease-in-out infinite;
}
@keyframes cc-pulse{0%,100%{transform:scale(.7); opacity:.45}50%{transform:scale(1.15); opacity:1}}
.wp-text{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1}
.wp-text b{font-size:16px; font-weight:600; color:var(--ink)}
.wp-text span{font-size:14.5px; color:var(--mut)}
.workpanel .elapsed{font-size:14px; color:var(--faint); font-variant-numeric:tabular-nums}
.workpanel .link{font-size:14px}
.thinking.floating{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:55;
  width:min(560px, calc(100% - 32px));
}
.thinking.floating .workpanel{margin:0; box-shadow:0 10px 30px rgba(0,0,0,.12)}
.thinking.floating.err{
  background:var(--card); border:1px solid var(--flag); padding:12px 16px;
  font-family:'Barlow Condensed',sans-serif;
}
@media (prefers-reduced-motion:reduce){.workpanel .pulse{animation:none; opacity:1}}

/* ---- plan: segmented tabs you cannot miss, the digest at the side --------- */
.seg{
  display:inline-flex; border:1px solid var(--ink); margin:2px 0 22px;
  font-family:'Barlow Condensed',sans-serif;
}
.seg button{
  border:0; background:transparent; padding:8px 22px; font-size:15px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mut); cursor:pointer;
}
.seg button+button{border-left:1px solid var(--ink)}
.seg button.on{background:var(--ink); color:var(--paper)}
.seg button:hover:not(.on){color:var(--ink); border-color:var(--ink)}

.ask{
  position:fixed; right:0; top:82px; bottom:auto; z-index:45; width:min(420px, calc(100% - 24px));
  background:var(--raise); border:1px solid var(--line); border-right:0; border-top:3px solid var(--run);
  padding:16px 18px 18px; box-shadow:-8px 12px 30px rgba(0,0,0,.1);
}
.ask-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:2px}
.ask-head b{font-family:'Barlow Condensed',sans-serif; font-size:19px; font-weight:600}
.ask textarea{width:100%; min-height:150px; margin:8px 0 12px}
.ask .btnrow{flex-wrap:wrap}
.x{
  background:none; border:0; padding:2px 6px; font-size:22px; line-height:1; color:var(--mut);
  cursor:pointer;
}
.x:hover{color:var(--ink); border:0}
.ask-tab{
  position:fixed; right:0; top:120px; z-index:45; writing-mode:vertical-rl; transform:rotate(180deg);
  padding:12px 8px; border:1px solid var(--line); border-top:0; background:var(--raise);
  border-left:3px solid var(--run); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink2);
}
.ask-tab:hover{color:var(--ink)}
.quiet-actions{
  display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:8px;
  font-family:'Barlow Condensed',sans-serif; font-size:14px;
}
.mutlink{color:var(--mut)!important}

/* ---- previous weeks: two voices, each foldable --------------------------- */
.xw{border-top:1px solid var(--line2); padding:4px 0}
.xw>summary{
  display:flex; align-items:center; gap:12px; padding:9px 0; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; font-size:16px; list-style:none;
}
.xw>summary::-webkit-details-marker{display:none}
.xw>summary::before{content:"\25B8"; color:var(--faint); font-size:12px; width:12px}
.xw[open]>summary::before{content:"\25BE"}
.xw>summary b{font-weight:600}
.xw-you,.xw-coach{margin:2px 0 12px 22px}
.xw-you>summary,.xw-coach>summary{
  cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--mut); padding:4px 0;
}
.xw-you blockquote{
  margin:6px 0 0; padding:10px 16px; border-left:3px solid var(--line); color:var(--ink2);
  font-size:16px; line-height:1.55; white-space:pre-wrap;
}
.xw-coach .coach{margin-top:6px}

/* ---- training: the coach's summary that folds to its focus line ---------- */
.coach.strip{position:relative; margin:18px 0 0; padding-right:44px}
.coach.strip .coachtext p:first-child{font-size:17.5px}
.coach.strip .x{position:absolute; top:12px; right:12px}
.coach-more{
  display:inline-block; margin-top:4px; font-family:'Barlow Condensed',sans-serif; font-size:13px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--mut);
}
.adj-fold{margin-top:8px}
.adj-fold>summary{
  cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.11em; color:var(--mut); list-style:none;
}
.adj-fold>summary::-webkit-details-marker{display:none}
.adj-fold>summary::before{content:"\25B8  "; color:var(--faint)}
.adj-fold[open]>summary::before{content:"\25BE  "}
.adj-fold .adj{margin-top:6px}
.coach-fold{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:18px 0 0;
  padding:10px 14px; border-left:3px solid var(--run); background:var(--card); font-size:16.5px;
}
.coach-fold .link{font-size:14px}

/* ---- the door ------------------------------------------------------------ */
.gate{max-width:560px; margin:0 auto; padding:80px 0 60px}
.gate-brand{
  margin:0 0 22px; font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:600;
  letter-spacing:.005em;
}
.gate-brand em{font-style:normal; font-weight:400; color:var(--mut); margin-left:6px}
.gate h1{font-size:clamp(30px,5vw,44px); margin-bottom:14px}
.gate-lead{font-size:18px; line-height:1.55; color:var(--ink2); margin:0 0 28px; max-width:46ch}
.gate-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.gate-actions button{font-size:16px; padding:10px 18px}
.gate .sig{margin-top:18px; font-family:'Barlow Condensed',sans-serif; font-size:14.5px; color:var(--mut)}

/* ---- the plan card in settings ------------------------------------------ */
.conn.plan h3{display:flex; align-items:center; gap:10px}
.conn.plan h3 .mut{font-size:14px; font-weight:400; font-family:'Barlow Condensed',sans-serif}
.meter-line{margin-top:10px}
.meter-line .wm-track{margin-top:0}
.meter-line span{
  display:block; margin-top:6px; font-family:'Barlow Condensed',sans-serif; font-size:13.5px;
  color:var(--mut);
}

/* ---- getting started: three steps, ticked off as they happen ------------ */
.start{
  margin:0 0 22px; padding:18px 22px 16px; background:var(--card);
  border:1px solid var(--line); border-top:3px solid var(--ink);
}
.start h2{font-size:20px; margin-bottom:10px}
.start ol{list-style:none; margin:0; padding:0}
.start li{display:flex; align-items:baseline; gap:14px; padding:8px 0; border-top:1px dotted var(--line); font-size:16.5px}
.start li b{
  width:24px; height:24px; border-radius:50%; border:1.5px solid var(--ink); flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif;
  font-size:13.5px; transform:translateY(5px);
}
.start li.done{color:var(--mut)}
.start li.done b{background:var(--ink); color:var(--paper)}
.start li a{color:var(--ink)}

/* ==========================================================================
   The public site: front, how it works, plans, about, privacy, the door.
   Same paper and ink; a little more air.
   ========================================================================== */
button.big{font-size:17px; padding:10px 20px}
.ribbon{background:var(--ink); color:var(--paper)}
.ribbon-in{
  max-width:1120px; margin:0 auto; padding:9px 24px; display:flex; gap:18px;
  justify-content:space-between; align-items:center; flex-wrap:wrap;
  font-family:'Barlow Condensed',sans-serif; font-size:15px; letter-spacing:.02em;
}
.ribbon-in b{font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-right:6px}
.ribbon-in a{color:var(--paper); white-space:nowrap}

.view.site{padding-top:0}
.site .eyebrow{margin-bottom:10px}
.site .lead{font-size:20px; line-height:1.5; color:var(--ink2); max-width:56ch; margin:0 0 26px}

/* the front ------------------------------------------------------------- */
.hero{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:48px;
  align-items:center; padding:64px 0 56px; border-bottom:1px solid var(--line);
}
.hero h1{font-size:clamp(40px,6.4vw,66px); margin-bottom:18px; max-width:14ch}
.hero-cta{gap:14px; margin-top:6px}
.hero-demo{font-family:'Barlow Condensed',sans-serif; font-size:15.5px; letter-spacing:.03em; color:var(--mut)}
.live{
  background:var(--card); border:1px solid var(--line); border-top:3px solid var(--run);
  padding:22px 24px 20px; align-self:start;
}
.live-empty{min-height:200px}
.live .eyebrow{margin-bottom:14px}
.live-meter{margin-bottom:18px}
.live-quote{margin:0 0 16px; padding:0}
.live-quote p{margin:0 0 8px; font-size:16.5px; line-height:1.55; color:var(--ink2)}
.live-quote footer{font-family:'Barlow Condensed',sans-serif; font-size:13.5px; color:var(--mut); letter-spacing:.04em}
.live-goal{margin:0 0 10px; font-size:15.5px; color:var(--mut)}
.live-goal b{color:var(--ink); font-weight:500}
.live-foot{margin:0; font-family:'Barlow Condensed',sans-serif; font-size:14px; color:var(--mut)}

.band{padding:52px 0; border-bottom:1px solid var(--line)}
.band h2{font-size:clamp(26px,3.6vw,36px); margin:0 0 12px; max-width:22ch}
.band p{max-width:60ch; color:var(--ink2)}
.band-split{display:grid; grid-template-columns:1fr 1fr; gap:48px}
.band-cta{text-align:center; border-bottom:0; padding-bottom:20px}
.band-cta h2, .band-cta p{margin-left:auto; margin-right:auto}
.band-cta .btnrow{justify-content:center; margin-top:22px}

.steps{
  list-style:none; margin:0; padding:0; display:grid; gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); counter-reset:step;
}
.step{border-top:1.5px solid var(--ink); padding-top:14px}
.step-n{font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:.14em; color:var(--mut)}
.step h3{font-size:22px; margin:6px 0 8px}
.step p{font-size:16px; line-height:1.5; margin:0 0 10px; color:var(--ink2)}
.step a, .feat a{font-family:'Barlow Condensed',sans-serif; font-size:14.5px; letter-spacing:.04em; text-decoration:none}
.step a:hover, .feat a:hover{text-decoration:underline}

.feats{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.feat{background:var(--card); border:1px solid var(--line); padding:22px 24px 20px}
.feat h3{font-size:23px; margin:0 0 8px}
.feat p{font-size:16px; line-height:1.5; margin:0 0 12px; color:var(--ink2)}

.tiers{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:28px 0 36px}
.tier{background:var(--card); border:1px solid var(--line); padding:22px 24px}
.tier .eyebrow{margin-bottom:4px}
.tier-price{font-family:'Barlow Condensed',sans-serif; font-size:40px; font-weight:600; line-height:1; margin:0 0 10px}
.tier-price small{font-size:16px; font-weight:500; color:var(--mut)}
.tier-blurb{font-size:16px; color:var(--ink2); margin:0 0 14px; min-height:2.6em}
.tier ul{margin:0; padding-left:18px; font-size:15.5px; line-height:1.55; color:var(--ink2)}

/* long-form pages ---------------------------------------------------------- */
.prose{max-width:68ch; padding:48px 0 20px}
.prose h1{font-size:clamp(34px,5vw,50px); margin-bottom:22px}
.prose h2{font-size:24px; margin:38px 0 10px}
.prose p, .prose li{font-size:17.5px; line-height:1.6; color:var(--ink2)}
.prose p{margin:0 0 16px}
.prose ul{padding-left:22px; margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose .tiers{max-width:none}

/* the door: styled with the rest of the app above; only the link colour here */
.gate .sig a{color:var(--mut)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:32px; padding:40px 0 40px}
  .band-split{grid-template-columns:1fr; gap:36px}
  .band{padding:40px 0}
  .ribbon-in{font-size:14px}
}

/* what you train ------------------------------------------------------------ */
.profile .cb-head .mut{font-family:'Barlow Condensed',sans-serif; font-size:14px}
.sportpick{display:flex; flex-wrap:wrap; gap:6px 16px; padding:4px 0}
.opts{display:flex; flex-direction:column; gap:6px}
.opt{
  display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:baseline;
  padding:9px 12px; border:1px solid var(--line); background:var(--raise); cursor:pointer;
}
.opt.on{border-color:var(--ink)}
.opt input{margin:0; grid-row:span 2; align-self:center}
.opt b{font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:16px}
.opt span{grid-column:2; font-size:14.5px; color:var(--mut); line-height:1.4}

/* the door, in dev mode: the test athletes ------------------------------------ */
.personas{margin-top:28px; padding-top:18px; border-top:1px solid var(--line)}
.personas .eyebrow{margin-bottom:10px}
.personas .mut{font-family:'Barlow Condensed',sans-serif; font-size:14.5px}
.personas code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px}
.persona{
  display:inline-grid; text-align:left; gap:1px; margin:0 8px 8px 0; padding:8px 14px;
  background:var(--card);
}
.persona b{font-weight:600; font-size:15.5px}
.persona span{font-family:'Barlow Condensed',sans-serif; font-size:12.5px; color:var(--mut); letter-spacing:.06em}

/* dev view ------------------------------------------------------------------ */
.admin-tiles{margin-bottom:12px}
.admin-tiles .stat em{display:block; font-style:normal; font-family:'Barlow Condensed',sans-serif; font-size:13px; color:var(--mut); margin-top:3px}
.admin-accounts td{white-space:nowrap}
.admin-accounts td.name{white-space:normal; min-width:160px}
.admin-accounts tr.row{cursor:pointer}
.admin-accounts tr.row:hover td{background:var(--ghost)}
td .bar{display:flex; align-items:center; gap:8px; background:none; height:auto; opacity:1}
td .bar i{display:block; height:8px; min-width:2px; opacity:.8}
td .bar span{font-family:'Barlow Condensed',sans-serif; font-size:14px}
tr.bad td{color:var(--flag)}
.flagtext{color:var(--flag)}

/* the walkthrough ------------------------------------------------------------ */
.wsteps{
  list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px;
  font-family:'Barlow Condensed',sans-serif; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint);
}
.wsteps li{display:flex; align-items:center; gap:7px}
.wsteps b{
  width:20px; height:20px; border-radius:50%; border:1px solid var(--line); display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:600;
}
.wsteps .done{color:var(--mut)} .wsteps .done b{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.wsteps .now{color:var(--ink)} .wsteps .now b{border-color:var(--ink)}
.wstep{max-width:72ch}
.wstep .lead{font-size:18.5px; line-height:1.5; color:var(--ink2); margin:0 0 20px}
.wnav{margin-top:26px; gap:12px}
.terms{
  max-height:46vh; overflow:auto; padding:18px 22px; border:1px solid var(--line); background:var(--card); margin-bottom:18px;
}
.terms h3{font-size:19px; margin:14px 0 4px} .terms h3:first-child{margin-top:0}
.terms p{margin:0 0 8px; font-size:16px; line-height:1.55; color:var(--ink2)}
.check.big{display:flex; gap:10px; align-items:flex-start; font-size:16.5px; line-height:1.45; margin:10px 0}
.check.big input{margin-top:5px}

/* the tour --------------------------------------------------------------- */
.tour-shade{position:fixed; inset:0; z-index:200; pointer-events:auto}
.tour-hole{
  position:fixed; z-index:201; border-radius:6px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(24,33,42,.62); outline:2px solid var(--run);
  transition:left .18s, top .18s, width .18s, height .18s;
}
.tour-card{
  position:fixed; z-index:202; width:min(340px, calc(100vw - 32px)); background:var(--raise); color:var(--ink);
  border:1px solid var(--line); padding:16px 18px 14px; box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.tour-card h3{font-size:21px; margin:2px 0 6px}
.tour-card p{margin:0 0 12px; font-size:15.5px; line-height:1.5; color:var(--ink2)}
.tour-card .btnrow{gap:8px}

/* mobility -------------------------------------------------------------------- */
.flow{padding:18px 22px; margin-bottom:14px}
.flow-head{display:flex; justify-content:space-between; gap:18px; align-items:flex-start; flex-wrap:wrap}
.flow-head h3{font-size:22px; margin-bottom:2px}
.flow-head .mut{margin:0; font-family:'Barlow Condensed',sans-serif; font-size:14px}
.flow-focus{margin:6px 0 0; font-size:15.5px; color:var(--ink2)}
.poses{list-style:none; margin:12px 0 0; padding:0; counter-reset:pose}
.poses li{
  display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px dotted var(--line2);
  font-size:15.5px;
}
.poses li::before{counter-increment:pose; content:counter(pose); font-family:'Barlow Condensed',sans-serif; color:var(--faint); width:18px; font-size:13px}
.poses li b{font-weight:500; flex:1}
.poses li span{font-family:'Barlow Condensed',sans-serif; color:var(--mut); font-size:14px}
.poses li em{font-style:normal; font-family:'Barlow Condensed',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); width:52px; text-align:right}
.poses.editable li input{width:64px; padding:3px 6px}
.poses.editable li .link{font-size:14px; padding:0 3px}
.flow-edit{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.poselist{list-style:none; margin:0; padding:0}
.poselist li{padding:4px 0; border-top:1px dotted var(--line2)}
.slot-poses{margin:6px 0 0; font-size:14.5px; color:var(--mut); line-height:1.5}
.sport.mobility s{background:var(--lift)}
.library li p{margin:2px 0 0; font-size:14.5px}
.library li.have{opacity:.55}