/* Editorial design system — dark, restrained, one accent, lots of air.
   Shared across the web UI; page-specific bits live in the templates. */
:root{
  --bg:#090b0f; --surface:#151a23; --surface-2:#1a2029; --line:#232a36; --line-2:#313a49;
  --ink:#eef1f5; --muted:#909aa8; --faint:#616b7a;
  --accent:#7aa2f7;
  --easy:#9ece6a; --recovery:#73daca; --long:#7dcfff; --tempo:#e0af68;
  --intervals:#f7768e; --race:#bb9af7; --rest:#6b7490;
  --maxw:46rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
button:disabled,input[type=submit]:disabled{opacity:.55;cursor:default}
body{
  margin:0; color:var(--ink); line-height:1.5;
  /* A token with no break opportunity — an email in a heading, a pasted URL in chat —
     otherwise runs past the screen edge and takes the whole page into horizontal scroll
     with it. `break-word` only breaks when the word genuinely doesn't fit, so normal
     wrapping is unchanged. */
  overflow-wrap:break-word;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-feature-settings:"cv05","ss03"; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; padding:2.5rem 1.5rem 6rem;
  /* aurora glow behind the page — subtle depth, not flat */
  background:
    radial-gradient(58rem 30rem at 82% -8%, rgba(122,162,247,.13), transparent 60%),
    radial-gradient(48rem 26rem at -6% 4%, rgba(187,154,247,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
.wrap{max-width:var(--maxw);margin:0 auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* Shared "glass" treatment for every card: layered surface, inset top highlight, soft
   depth shadow, and an accent glow on hover — the thing that reads as a premium app. */
.row,.act,.daycard,.rep,.stat,.bigstat,.listcard,.chart,.note,.center,.authcard,.loadbox{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -14px rgba(0,0,0,.75);
}
.row:hover,.act:hover,.daycard:hover,.rep:hover,.stat:hover,.listcard:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
             0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent),
             0 14px 34px -16px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ---- page head ---- */
.crumb{font-size:.82rem;color:var(--muted);margin-bottom:1.7rem}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
         color:var(--faint);margin:0 0 .55rem}
.title{font-size:clamp(2rem,5.5vw,2.7rem);font-weight:700;letter-spacing:-.038em;
       line-height:1.04;margin:0;
       background:linear-gradient(96deg,#ffffff,#aec4ff 135%);
       -webkit-background-clip:text;background-clip:text;color:transparent}
.meta{margin:1rem 0 0;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.meta b{color:var(--ink);font-weight:600}
.meta .sep{color:var(--faint);margin:0 .5rem}
.summary{max-width:38rem;margin:1.7rem 0 0;padding-left:1.05rem;
         border-left:2px solid var(--line-2);color:#aab2be;font-size:.95rem;line-height:1.62}
.ok{margin:0 0 1.3rem;padding:.7rem 1rem;border-radius:10px;font-size:.9rem;color:var(--easy);
    background:rgba(158,206,106,.07);border:1px solid rgba(158,206,106,.2)}

/* ---- week section ---- */
/* ST-22: every week is a <details>; a past one renders shut, so its header is the
   clickable summary. Marker suppressed in favour of the same .chev the other
   accordions use (strength exercises, the status menu). */
.week{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
      margin:2.5rem 0 1rem;padding-bottom:.65rem;border-bottom:1px solid var(--line-2)}
.week .wn{font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#c8d0db}
.week .wr{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
summary.week{cursor:pointer;list-style:none}
summary.week::-webkit-details-marker{display:none}
summary.week:hover .wn{color:var(--ink)}
summary.week .chev{font-size:.7rem;color:var(--muted);transition:transform .15s}
.wk[open]>summary.week .chev{transform:rotate(180deg)}
/* A collapsed week keeps its own bottom margin — without rows after it the header
   would otherwise sit flush against the next week's header. */
.wk:not([open])>summary.week{margin-bottom:0}

/* ---- workout card ---- */
.row{display:grid;grid-template-columns:4.6rem 1fr auto;gap:1.1rem;align-items:start;
     background:var(--surface);border:1px solid var(--line-2);border-radius:14px;
     padding:1.05rem 1.2rem;margin:.7rem 0;box-shadow:0 1px 3px rgba(0,0,0,.35);
     transition:border-color .12s,background .12s}
.row:hover{border-color:#3f4959;background:var(--surface-2)}
.row .when{font-variant-numeric:tabular-nums;line-height:1.25;padding-top:.05rem;min-width:0}
.row .dd{font-weight:600;font-size:.92rem;color:var(--ink)}
.row .dw{font-size:.76rem;color:var(--faint);margin-top:.12rem}
.row .main{min-width:0}
.wx-chip{font-size:.68rem;color:var(--faint);margin-top:.35rem;
         display:flex;flex-wrap:wrap;gap:.2rem .35rem}
.wx-chip.wx-conflict{color:var(--intervals);font-weight:600}
/* The badge row can carry type + "сьогодні" + a status + a "розбір →" link — more than
   fits one phone line, so it wraps instead of pushing the card past the screen edge. */
.kind{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin-bottom:.45rem;
      min-width:0}
.dot{width:.55rem;height:.55rem;border-radius:50%;flex:none}
.klabel{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b6bfca}
.badge-today{font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.st{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.st.done,.st-done{color:var(--easy)} .st.skip,.st-skipped{color:var(--muted)}
.st-partial{color:#f0a500} .st-missed{color:var(--intervals)}
.match-dist{font-size:.68rem;color:var(--muted);font-weight:500}
.match-link{text-decoration:none;border-bottom:1px dotted var(--muted)}
.match-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.sync-badge{font-size:.68rem;font-weight:600}
.sync-badge.on{color:var(--easy)} .sync-badge.pending{color:var(--muted)}
.compliance{font-size:.72rem;font-weight:600;color:var(--muted);margin-left:auto}
.desc{color:#cbd2dc;font-size:.92rem;line-height:1.55}
.dist{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:1rem;
      color:var(--ink);white-space:nowrap}
.dist small{display:block;font-weight:600;font-size:.68rem;color:var(--faint);letter-spacing:.04em;margin-top:.1rem}
.dist .est{font-size:.82rem;font-weight:600;color:var(--muted);margin-top:.4rem}
.dist .est small{color:var(--faint)}

/* structured steps — one per line, role-labelled (a real workout breakdown) */
.steps{margin-top:.8rem;display:flex;flex-direction:column;gap:.36rem;
       border-left:2px solid var(--line-2);padding-left:.95rem}
.steps{min-width:0}
.step{display:flex;flex-wrap:wrap;gap:.7rem;align-items:baseline;font-size:.82rem;line-height:1.3;
      min-width:0}
.step .lbl{flex:none;min-width:5.4rem;color:var(--muted);font-weight:500}
.step .val{min-width:0;color:#dbe0e8;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.step .val .pace{color:var(--muted)}
.step.rep{align-items:flex-start}
.step.rep .lbl{color:var(--ink);font-weight:700}
.step .sub{margin-top:.3rem;min-width:0;flex:1;display:flex;flex-direction:column;gap:.3rem;
           border-left:2px solid var(--line-2);padding-left:.75rem}
/* Phone: the fixed 5.4rem label column plus a long "@ 4:50–5:10/км" value made a step's
   min-content width wider than the screen, and a repeat group stacked two of those fixed
   columns — the nested rows spilled out of the card (and pushed the page into horizontal
   scroll). Drop the fixed column here and let the repeat body take a full line. */
@media(max-width:36rem){
  .steps{padding-left:.7rem}
  .step{gap:.15rem .5rem}
  .step .lbl{min-width:0}
  .step .sub{flex-basis:100%;padding-left:.6rem}
}

/* strength exercises accordion */
.strength-acc{margin-top:.7rem}
.strength-acc>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  gap:.35rem;font-size:.8rem;font-weight:600;color:var(--muted);user-select:none}
.strength-acc>summary::-webkit-details-marker{display:none}
.strength-acc>summary .chev{font-size:.7rem;transition:transform .15s}
.strength-acc[open]>summary .chev{transform:rotate(180deg)}
.strength-acc[open]>summary{margin-bottom:.5rem;color:var(--ink)}
.sblock{border-left:2px solid var(--line-2);padding-left:.95rem;margin-bottom:.55rem}
/* ST-21: manual plan/actual status menu on a past session */
.wmenu{margin:.35rem 0}
.wmenu>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  gap:.3rem;font-size:.75rem;font-weight:600;color:var(--muted);user-select:none}
.wmenu>summary::-webkit-details-marker{display:none}
.wmenu>summary .chev{font-size:.65rem;transition:transform .15s}
.wmenu[open]>summary .chev{transform:rotate(180deg)}
.wmenu-body{display:flex;flex-wrap:wrap;gap:.4rem;margin:.45rem 0 .2rem}
.wmenu-body button{padding:.28rem .6rem;border:1px solid var(--line-2);border-radius:8px;
  background:transparent;color:var(--ink);font-size:.75rem;cursor:pointer}
.wmenu-body button:hover{border-color:var(--accent,#7aa2f7)}
.wmenu-link{display:flex;gap:.3rem;align-items:center}
.wmenu-link select{max-width:13rem;font-size:.72rem;padding:.22rem;border-radius:8px;
  border:1px solid var(--line-2);background:var(--bg-2,#1a1b26);color:var(--ink)}
.sblock:last-child{margin-bottom:0}
.sbhead{font-size:.74rem;font-weight:600;color:var(--faint);letter-spacing:.02em;margin-bottom:.28rem}
.sex{display:flex;justify-content:space-between;gap:.7rem;font-size:.82rem;line-height:1.4;padding:.06rem 0}
.sex .sxname{color:#dbe0e8}
.sex .sxval{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}

/* Garmin-style strength cards — shared by the activity view and the plan accordion.
   A block ("N підходів") holds exercise cards (blue accent bar) and an optional rest card
   (grey), mirroring how Connect renders a structured strength workout. */
.wblock{margin:.5rem 0 .9rem}
.wblock:last-child{margin-bottom:0}
.wbhead{font-size:.82rem;font-weight:700;color:var(--ink);margin:.1rem 0 .5rem}
.wcard{position:relative;background:var(--surface);border:1px solid var(--line-2);
  border-radius:11px;padding:.62rem .85rem .62rem 1rem;margin:.42rem 0;overflow:hidden}
.wcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#5b8def}
.wcard.rest::before{background:#6b7490}
.wcard .wlabel{font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.wcard .wname{font-size:1rem;font-weight:600;color:var(--ink);margin-top:.12rem;line-height:1.3}
.wcard .wsub{font-size:.83rem;color:var(--muted);margin-top:.2rem;font-variant-numeric:tabular-nums}
.wcard.rest{padding:.5rem .85rem .5rem 1rem}
.wcard.rest .wname{font-size:.92rem;font-weight:500;margin-top:0}

/* today / status */
.row.today{border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(122,162,247,.3),0 10px 28px -14px rgba(122,162,247,.55)}
.row.today .dd{color:var(--accent)}
.row.done{opacity:.62}
.row.partial{opacity:.75}
.row.missed{opacity:.5;border-color:rgba(255,90,90,.25)}
.row.skipped{opacity:.5}
.row.skipped .desc,.row.missed .desc{text-decoration:line-through}

/* ---- db browser (index counts) ---- */
.stats{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.5rem}
.stat{min-width:9rem;padding:1.1rem 1.35rem;border:1px solid var(--line-2);border-radius:14px;
      background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.35);
      transition:border-color .12s,background .12s}
.stat:hover{border-color:var(--accent);background:var(--surface-2)}
.stat .sname{color:var(--muted);font-size:.82rem}
.stat .snum{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;margin-top:.25rem;color:var(--ink)}

/* ---- activities (card view) ---- */
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.tabs a{padding:.3rem .72rem;border:1px solid var(--line-2);border-radius:9px;color:var(--muted);font-size:.85rem}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.active{background:var(--surface-2);border-color:var(--accent);color:var(--ink)}
.acts{display:flex;flex-direction:column;gap:.7rem;margin-top:1.4rem}
.act{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
     background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:.9rem 1.1rem;
     box-shadow:0 1px 3px rgba(0,0,0,.35);transition:border-color .12s,background .12s}
.act:hover{border-color:var(--accent);background:var(--surface-2)}
.act .ic{width:2.7rem;height:2.7rem;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;
  background:#0e1219;background:color-mix(in srgb,var(--accent) 15%,#0e1219);
  border:1px solid #2a3140;border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.ic-wrap{position:relative;width:3.5rem;height:3.5rem;flex:none;display:grid;place-items:center}
.ic-wrap .icring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ic-wrap .ic{width:2.5rem;height:2.5rem;border-radius:13px;font-size:1.2rem}
.act .info{min-width:0}
.act .atype{font-weight:600;font-size:.96rem;color:var(--ink)}
.act .adate{color:var(--faint);font-size:.8rem;margin-top:.12rem}
.act .stats{display:flex;flex-wrap:wrap;gap:.4rem .95rem;margin-top:.5rem;font-variant-numeric:tabular-nums}
.act .m{font-size:.85rem;color:#cbd2dc}
.act .m b{color:var(--ink);font-weight:600}
.act .m span{color:var(--faint);font-size:.72rem;margin-left:.12rem}
.act .badge-an{font-size:.72rem}
.act .spark{width:160px;flex:none}
.act .spark svg{display:block;width:100%;height:36px}
@media(max-width:36rem){.act .spark{display:none}}
.pager{display:flex;gap:1.1rem;align-items:center;margin-top:1.4rem;color:var(--muted);font-size:.85rem;
       font-variant-numeric:tabular-nums}
.empty{margin-top:2rem;color:var(--muted)}

/* ---- activity detail (hero + big stats + charts) ---- */
.back{color:var(--muted);font-size:.85rem}
.ahead{display:flex;align-items:center;gap:1rem;margin-top:1.3rem}
.ahead .ic{width:3.2rem;height:3.2rem;border-radius:16px;display:grid;place-items:center;font-size:1.7rem;
  background:#0e1219;background:color-mix(in srgb,var(--accent) 15%,#0e1219);
  border:1px solid #2a3140;border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.ahead .atitle{font-size:1.5rem;font-weight:650;letter-spacing:-.02em}
.ahead .adate{color:var(--muted);font-size:.88rem;margin-top:.15rem}
.bigstats{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0}
.bigstat{flex:1 1 6.5rem;min-width:5.5rem;padding:.85rem 1rem;border:1px solid var(--line-2);
         border-radius:13px;background:var(--surface)}
.bigstat .v{font-size:1.55rem;font-weight:750;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ink)}
.bigstat .k{color:var(--muted);font-size:.72rem;margin-top:.25rem;text-transform:uppercase;letter-spacing:.06em}
.abody{white-space:pre-wrap;line-height:1.6;color:#cbd2dc;font-size:.92rem}

/* ---- charts (activity / detail) ---- */
.charts{display:flex;flex-wrap:wrap;gap:1rem;margin:1.6rem 0}
.chart{flex:1 1 22rem;border:1px solid var(--line-2);border-radius:14px;padding:.85rem 1rem;background:var(--surface)}
.chead{font-size:.9rem;margin-bottom:.5rem;color:#cbd2dc}
.chead .meta{color:var(--muted)}
.chart svg{display:block;width:100%;height:auto}
.xaxis{display:flex;justify-content:space-between}
.cwrap{position:relative}
.guide{position:absolute;top:0;bottom:0;width:1px;display:none;pointer-events:none}
.tip{position:absolute;top:.2rem;transform:translateX(-50%);display:none;pointer-events:none;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:7px;padding:.12rem .5rem;
  font-size:.78rem;white-space:nowrap}

/* ---- prose / content pages ---- */
.prose h1{font-size:clamp(1.7rem,4.5vw,2.15rem);font-weight:650;letter-spacing:-.03em;margin:0 0 .4rem}
.prose h2{font-size:1.15rem;font-weight:650;letter-spacing:-.02em;margin:2.5rem 0 .6rem;color:var(--ink)}
.prose p{margin:.75rem 0;color:#c2c9d3;line-height:1.64}
.prose ul,.prose ol{padding-left:1.25rem;margin:.6rem 0}
.prose li{margin:.42rem 0;color:#c2c9d3;line-height:1.55}
.prose b{color:var(--ink)}
.muted{color:var(--muted)}
code{background:var(--surface);border:1px solid var(--line-2);border-radius:6px;padding:.12rem .42rem;
     font-size:.88em;font-family:"SF Mono",ui-monospace,Menlo,monospace;color:#cfd5de}

/* ---- forms ---- */
.form{max-width:32rem}
.form label,.authcard label{display:block;color:var(--muted);font-size:.8rem;font-weight:500;
  letter-spacing:.01em;margin:1.3rem 0 .4rem}
input[type=email],input[type=password],input[type=text],input[type=number],
input[type=date],select,textarea{
  width:100%;padding:.62rem .8rem;border-radius:9px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink);font:inherit;font-size:.95rem;transition:border-color .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
.days{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.4rem}
.day{display:inline-flex;align-items:center;gap:.35rem;margin:0;padding:.4rem .68rem;
     border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink);
     font-size:.9rem;cursor:pointer;width:auto}
.day input{width:auto}
.strength-days{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem;max-width:22rem}
.strength-row{display:flex;align-items:center;gap:.7rem}
.strength-row{flex-wrap:wrap}
.strength-row .sd-label{width:2.2rem;color:var(--faint);font-size:.86rem;font-weight:500}
.strength-row select{flex:1;margin:0}
.strength-row .sd-desc{flex-basis:100%;margin:.35rem 0 0 2.9rem;width:auto}
.strength-row .sd-preview{flex-basis:100%;align-self:flex-start;width:auto;
  margin:.3rem 0 0 2.9rem;font-size:.78rem;padding:.32rem .8rem;border-radius:8px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink);cursor:pointer}
.strength-row .sd-preview:hover{border-color:var(--accent)}
.strength-row .sd-preview:disabled{opacity:.6;cursor:default}
.strength-row .sd-pv{flex-basis:100%;margin:.3rem 0 0 2.9rem;empty-cells:hide}
.sd-pv-name{font-weight:600;font-size:.85rem;margin-bottom:.35rem}
.sd-pv-err{color:#c0563a;font-size:.82rem}
.modeltoggle{display:flex;gap:.6rem;margin-top:.5rem;max-width:22rem}
.modeltoggle .mt{flex:1;display:flex;align-items:center;gap:.5rem;margin:0;padding:.6rem .7rem;
  border:1px solid var(--border);border-radius:10px;cursor:pointer;background:var(--surface)}
.modeltoggle .mt:has(input:checked){border-color:var(--accent);background:var(--surface-2)}
.modeltoggle .mt span{display:flex;flex-direction:column;line-height:1.2}
.modeltoggle .mt small{color:var(--faint);font-size:.72rem;font-weight:400}
.btn:disabled{opacity:.55;cursor:default}
.spin.sm{width:1.1rem;height:1.1rem;border-width:2px;margin:0}
.loadbox{max-width:32rem;margin:1.5rem 0;padding:1.1rem 1.3rem;border-radius:14px;
         border:1px solid var(--line-2);background:var(--surface)}
.loadbox .row{display:flex;align-items:center;gap:.8rem}
.loadbox .sub{color:var(--faint);font-size:.82rem;margin-top:.55rem}
.hint{color:var(--faint);font-size:.78rem;margin-top:.35rem;line-height:1.5}
.check{display:flex;align-items:center;gap:.6rem;margin-top:1.35rem;color:var(--ink);font-weight:500;font-size:.9rem}
.check input{width:auto}
.btn{margin-top:1.7rem;padding:.64rem 1.4rem;border:0;border-radius:10px;
     background:linear-gradient(180deg,#8fb0ff,#6d92f2);color:#0a1020;font:inherit;font-weight:650;
     font-size:.95rem;cursor:pointer;transition:filter .12s,box-shadow .12s,transform .06s;
     box-shadow:0 8px 20px -8px rgba(122,162,247,.55)}
.btn:hover{filter:brightness(1.06);box-shadow:0 10px 26px -8px rgba(122,162,247,.7)}
.btn:active{transform:translateY(1px)}
/* ST-15: a quiet secondary action (resync buttons) — no gradient, no shadow */
.btn-ghost{padding:.5rem 1.05rem;border:1px solid var(--line-2);border-radius:10px;
     background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:.85rem;
     cursor:pointer;transition:filter .12s,border-color .12s}
.btn-ghost:hover{filter:brightness(1.1);border-color:var(--accent,#7aa2f7)}
.btn-ghost:active{transform:translateY(1px)}
.btn-ghost:disabled{opacity:.55;cursor:default}
/* Аналізи (health checkups): one lab-value row (name/value/unit/ref-range) per line */
.result-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr auto;gap:.5rem;margin:.4rem 0}
.result-row input{margin:0}
.result-row .result-del{padding:.4rem .6rem}
@media (max-width:640px){.result-row{grid-template-columns:1fr 1fr;grid-template-areas:"n n" "v u" "r d"}
  .result-row input[name=result_name]{grid-area:n}
  .result-row input[name=result_value]{grid-area:v}
  .result-row input[name=result_unit]{grid-area:u}
  .result-row input[name=result_ref]{grid-area:r}
  .result-row .result-del{grid-area:d;justify-self:start}}
.checkup-results{width:100%;border-collapse:collapse;margin:.6rem 0 1.2rem}
.checkup-results th{text-align:left;color:var(--faint);font-size:.72rem;text-transform:uppercase;
     letter-spacing:.05em;font-weight:600;padding:.3rem .6rem;border-bottom:1px solid var(--line-2)}
.checkup-results td{padding:.45rem .6rem;border-bottom:1px solid var(--line-2);font-size:.9rem}
.checkup-results tr.oor-minor{background:color-mix(in srgb, var(--tempo) 8%, transparent)}
.checkup-results tr.oor-major{background:color-mix(in srgb, var(--intervals) 8%, transparent)}
.checkup-results td.oor-minor{color:var(--tempo);font-weight:650}
.checkup-results td.oor-major{color:var(--intervals);font-weight:650}
.checkup-results .oor-flag{font-size:.8rem}
.saved{color:var(--easy);margin:1rem 0;font-size:.9rem}
.err{color:#f7768e;font-size:.85rem}

/* ---- auth (login / register) ---- */
body.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.authcard{width:min(21rem,100%);padding:2rem 1.9rem;border:1px solid var(--line-2);border-radius:16px;
  background:var(--surface);box-shadow:0 24px 70px -35px rgba(0,0,0,.85)}
.authcard .brand{font-size:1.4rem;font-weight:650;letter-spacing:-.025em;margin:0 0 .35rem}
.authcard .sub{color:var(--muted);font-size:.84rem;margin:0 0 1.1rem;line-height:1.5}
.authcard label:first-of-type{margin-top:.4rem}
.authcard .btn{width:100%}
.authcard .alt{color:var(--muted);font-size:.85rem;margin-top:1.4rem;text-align:center}
.authcard .info{color:var(--easy);font-size:.85rem;margin-top:1rem}
.authcard .err{margin-top:1rem}
.sec{font-size:1.15rem;font-weight:650;letter-spacing:-.02em;margin:2.9rem 0 0}
.divide{border:0;border-top:1px solid var(--line);margin:2.6rem 0 0;max-width:32rem}
.note{max-width:32rem;margin:1.2rem 0 0;padding:1.05rem 1.25rem;border-radius:14px;
      border:1px solid var(--line);background:var(--surface);font-size:.9rem;line-height:1.55;color:#aab2be}
.note b{color:var(--ink)}
.note ol{margin:.5rem 0 0;padding-left:1.2rem}
.note li{margin:.3rem 0}

/* rings draw in from empty on load — the signature Whoop micro-interaction */
@keyframes ringdraw{from{stroke-dashoffset:var(--from)}to{stroke-dashoffset:var(--to)}}
.ring-anim{animation:ringdraw 1.1s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){.ring-anim{animation:none}}

/* ---- recovery ring (Whoop-style hero) ---- */
.hero-rec{display:flex;align-items:center;gap:1.8rem;flex-wrap:wrap;margin:1.7rem 0 .6rem;
  padding:1.5rem 1.7rem;border-radius:22px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 46px -22px rgba(0,0,0,.85)}
.ringbox{position:relative;width:10.5rem;height:10.5rem;flex:none}
.ringbox svg{width:100%;height:100%;transform:rotate(-90deg)}
.ringc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ringv{font-size:2.8rem;font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.ringv small{font-size:1.1rem;font-weight:700;margin-left:.06rem}
.ringl{font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:.45rem}
.hero-side{display:flex;flex-direction:column;gap:.55rem;min-width:9rem}
.hero-side .hs{display:flex;align-items:baseline;gap:.5rem}
.hero-side .hv{font-size:1.35rem;font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink)}
.hero-side .hk{color:var(--muted);font-size:.82rem}
.hero-date{color:var(--faint);font-size:.8rem;margin-bottom:.2rem;text-transform:capitalize}

/* ---- multi-ring hero (EP-17, Bevel-style: Strain/Recovery/Sleep in one row) ---- */
.hero-rings{margin:1.7rem 0 .6rem;padding:1.5rem 1.7rem;border-radius:22px;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 20px 46px -22px rgba(0,0,0,.85)}
.hero-rings-date{color:var(--faint);font-size:.8rem;margin-bottom:1.1rem;text-transform:capitalize}
.ringrow{display:flex;justify-content:space-between;gap:.5rem}
.ringcol{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:0;flex:1 1 0}
.ringbox-sm{position:relative;width:4.6rem;height:4.6rem;flex:none}
.ringbox-sm svg{width:100%;height:100%;transform:rotate(-90deg)}
.ringc-sm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ringv-sm{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ringv-sm small{font-size:.6rem;font-weight:700;margin-left:.03rem}
.ringl-sm{font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);text-align:center}

/* ---- compact stat-grid (EP-17: replaces the .hs sidebar list on /dashboard) ---- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));
  gap:.7rem;margin:1rem 0 .6rem}
.stile{padding:.85rem 1rem;border:1px solid var(--line-2);border-radius:14px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 24px -14px rgba(0,0,0,.75)}
.stile .sv{font-size:1.5rem;font-weight:750;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.stile .sl{color:var(--muted);font-size:.78rem;margin-top:.2rem}
.stile .ssub{color:var(--faint);font-size:.72rem;margin-top:.15rem}

/* ---- activity filters ---- */
/* The bar is collapsed by default (its sport pills alone run two phone screens); the
   summary is a pill that names the active filters and highlights when any are on. */
.fwrap{margin:1.2rem 0 1rem}
.fsum{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;font-weight:600;padding:.3rem .75rem;border-radius:20px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--muted);user-select:none}
.fsum::-webkit-details-marker{display:none}
.fsum:hover{border-color:var(--accent);color:var(--ink)}
.fsum.on{border-color:var(--accent);color:var(--ink)}
.fsum .chev{font-size:.7rem;transition:transform .15s}
.fwrap[open]>.fsum .chev{transform:rotate(180deg)}
.fbar{display:flex;flex-direction:column;gap:.6rem;margin:.7rem 0 1rem}
.fgroup{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.fpill{font-size:.8rem;padding:.28rem .7rem;border-radius:20px;border:1px solid var(--line-2);
  color:var(--muted);background:var(--surface);white-space:nowrap;transition:border-color .1s,background .1s,color .1s}
.fpill:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}
.fpill.active{background:var(--accent);border-color:var(--accent);color:#0d0f14;font-weight:600}
.fpill .fcnt{font-size:.72rem;opacity:.7;margin-left:.2rem}
.fsort{font-size:.8rem;padding:.28rem .55rem;border-radius:10px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--muted);cursor:pointer;outline:none;
  width:auto;max-width:14rem}
.fsort:focus{border-color:var(--accent)}
.dp-label{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:.3rem}
.dp-input{font-size:.78rem;padding:.25rem .45rem;border-radius:8px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);outline:none;cursor:pointer;
  color-scheme:dark}
.dp-input:focus{border-color:var(--accent)}
.dp-sep{color:var(--faint);font-size:.8rem}
.dp-clear{padding:.25rem .55rem;font-size:.8rem}

/* ---- metric chips (daily / reuse) ---- */
.mrow{display:flex;flex-wrap:wrap;gap:.35rem .95rem;margin-top:.5rem;font-variant-numeric:tabular-nums}
.mchip{font-size:.84rem;color:#cbd2dc}
.mchip b{color:var(--ink);font-weight:600}
.mchip .u{color:var(--faint);font-size:.72rem;margin-left:.12rem}

.auto-acts{font-size:.78rem;color:var(--muted);margin-top:.4rem}
.auto-acts-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.auto-act-pill{font-size:.82rem;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:20px;padding:.2rem .65rem;white-space:nowrap}

/* ---- daily recovery cards ---- */
.daycard{display:block;padding:.9rem 1.1rem;margin:.6rem 0;border:1px solid var(--line-2);border-radius:14px;
  background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:border-color .12s,background .12s}
.daycard:hover{border-color:var(--accent);background:var(--surface-2);text-decoration:none}
.dcard-grid{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center}
.miniring{position:relative;width:3.5rem;height:3.5rem;flex:none}
.miniring svg{width:100%;height:100%;transform:rotate(-90deg)}
.miniring .mv{position:absolute;inset:0;display:grid;place-items:center;font-size:.94rem;
  font-weight:750;font-variant-numeric:tabular-nums}
.daycard .dh{display:flex;align-items:center;gap:.6rem}
.daycard .dt{font-weight:600;color:var(--ink)}
.hrvpill{font-size:.71rem;font-weight:700;padding:.12rem .55rem;border-radius:999px;color:#0b0d11}

/* ---- report history ---- */
.rep{display:flex;gap:.9rem;align-items:baseline;padding:.9rem 1.1rem;margin:.55rem 0;
  border:1px solid var(--line-2);border-radius:14px;background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:border-color .12s,background .12s}
.rep:hover{border-color:var(--accent);background:var(--surface-2);text-decoration:none}
.rep .kpill{flex:none;font-size:.71rem;font-weight:700;padding:.15rem .58rem;border-radius:999px;color:#0b0d11}
.rep .rbody{min-width:0;flex:1}
.rep .rwhen{color:var(--faint);font-size:.78rem}
.rep .rprev{color:#c2cad7;font-size:.88rem;margin-top:.25rem;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rep .rcost{flex:none;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.readbody{white-space:pre-wrap;line-height:1.65;color:#d5dbe4;font-size:.95rem;margin-top:1.1rem}
.qbox{margin-top:1.2rem;padding:.85rem 1.1rem;border-left:2px solid var(--accent);color:#cbd2dc;
  background:var(--surface);border-radius:0 10px 10px 0;font-size:.92rem;line-height:1.55}

/* ---- spinner (plan generating) ---- */
.center{max-width:32rem;margin:3.5rem auto;text-align:center;padding:2.2rem 1.6rem;
  border:1px solid var(--line-2);border-radius:16px;background:var(--surface)}
.center h1{font-size:1.3rem;font-weight:650;letter-spacing:-.02em;margin:.9rem 0 .4rem}
.center p{color:var(--muted);line-height:1.55;font-size:.92rem}
.spin{width:2.3rem;height:2.3rem;margin:0 auto;border:3px solid var(--line-2);
  border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- list cards (plan archive) ---- */
.listcard{display:block;padding:.95rem 1.15rem;margin:.6rem 0;border:1px solid var(--line-2);
  border-radius:14px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:border-color .12s,background .12s}
.listcard:hover{border-color:var(--accent);background:var(--surface-2);text-decoration:none}
.listcard .lg{font-weight:600;color:var(--ink)}
.listcard .lm{color:var(--muted);font-size:.85rem;margin-top:.25rem;font-variant-numeric:tabular-nums}

/* ---- data table (users) ---- */
.dtable{border-collapse:collapse;width:100%;margin:1.4rem 0;font-size:.9rem}
.dtable th,.dtable td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
.dtable th{color:var(--muted);font-weight:600;font-size:.8rem;letter-spacing:.02em}
.dtable tr:hover td{background:var(--surface)}
.dtable .pending td{background:rgba(224,175,104,.06)}
.pill{font-size:.76rem;font-weight:600;padding:.12rem .55rem;border-radius:999px}
.pill.ok{color:var(--easy);background:rgba(158,206,106,.12)}
.pill.wait{color:var(--tempo);background:rgba(224,175,104,.14)}
.pill.off{color:var(--muted);background:var(--surface-2)}
.abtn{padding:.28rem .72rem;border:0;border-radius:7px;cursor:pointer;font:inherit;font-size:.82rem;font-weight:600}
.abtn.approve{background:rgba(158,206,106,.15);color:var(--easy)}
.abtn.toggle{background:var(--surface-2);color:var(--accent);margin-left:.3rem}
.abtn.del{background:rgba(247,118,142,.12);color:var(--intervals);margin-left:.3rem}
.dtable td form{display:inline}

/* ---- footer / actions ---- */
.foot{margin-top:2.6rem;color:var(--faint);font-size:.85rem;line-height:1.6}
.foot b{color:var(--muted);font-weight:600}
.arch{margin-top:1.1rem;padding:.5rem 1.05rem;border:1px solid var(--line-2);border-radius:9px;
      background:transparent;color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;
      transition:border-color .12s,color .12s,background .12s}
.arch:hover{border-color:#3a2a2c;color:#e0817a;background:rgba(224,129,122,.05)}
form.inline{display:inline}
/* a small number input that needs its unit spelled out next to it (a title= tooltip is
   invisible on a phone, which is where /plan is read) */
.numf{display:inline-flex;align-items:center;gap:.35rem;margin:0 .6rem .35rem 0}
.numf label{color:var(--faint);font-size:.8rem;white-space:nowrap}