/* Trainee screens. */
/* =====================================================================
   TRAINEE: home, workout logging, summary, goals, analytics, me
   ===================================================================== */

/* ---------- home: today first ---------- */
.th-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--tap);padding-inline-end:calc(var(--tap) * 2 + var(--s-3))}
.th-date{font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-3);margin-top:calc(-1 * var(--s-2))}
.th-msg{margin:0;font-size:var(--fs-3);line-height:var(--lh-t);color:var(--ink-2)}
.th-msg .hero-line,.hero-line,.msg-line{font:inherit;color:inherit;text-transform:none;letter-spacing:0}
.today-hero{gap:var(--s-4);padding:var(--s-5) var(--s-4) var(--s-4)}
.th-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3)}
.th-top>div{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.th-title{margin:0;font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-6);line-height:var(--lh-d);letter-spacing:var(--tr-d);color:var(--on-navy);overflow-wrap:anywhere}
[dir=rtl] .th-title{text-transform:none;font-size:var(--fs-5)}
.th-sub{font-size:var(--fs-2);color:var(--on-navy-2)}
.th-lifts{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.th-lifts li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);min-height:48px;border-top:1px solid var(--navy-line)}
.th-lifts .lt-ic{width:32px;height:32px;background:none!important;color:var(--on-navy-2)!important}
.th-lifts span{font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--on-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-lifts b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1;color:var(--on-navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.th-lifts small{display:block;font-size:var(--fs-1);color:var(--on-navy-3);font-weight:var(--fw-1)}

.th-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2)}
.th-cta .btn.ghost-l{width:auto;padding:0 var(--s-4)}
/* short phones (SE size): a tighter hero so Start workout sits above the tab bar without scrolling */
@media (max-height:700px) and (max-width:767px){.today-hero{gap:var(--s-3)}.th-title{font-size:var(--fs-5)}.th-lifts li{min-height:40px}}
.h2-foot{display:flex;justify-content:space-between;gap:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--navy-line);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--on-navy-2)}
.h2-foot span{display:inline-flex;align-items:center;gap:var(--s-1)}
.h2-foot svg{color:var(--navy-accent)}
/* weekly goal ring */
.wring{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);flex-shrink:0}
.wring .xb-ring>b{display:grid;place-items:center;font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1;color:var(--on-navy);font-variant-numeric:tabular-nums}
.wring .xb-ring b small{font-family:var(--font);font-variation-settings:normal;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--on-navy-3)}
.wring-l{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--on-navy-3);white-space:nowrap}
/* today list: next session, check-in, readiness */

.next-d{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;border-radius:var(--r-2);background:var(--accent-soft);color:var(--accent-ink);line-height:1}
.next-d b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-weight:var(--fw-3);font-size:var(--fs-4);font-variant-numeric:tabular-nums}
.next-d span{margin-top:2px;font-size:var(--fs-1);font-weight:var(--fw-2);text-transform:uppercase}
.next-c .lab{margin:0}
.card.today-c{gap:0;padding:var(--s-2) var(--s-4)}
.card.today-c>.lab{margin:var(--s-2) 0}
.card.today-c>.card{padding:var(--s-3) 0;border-radius:0;background:transparent;border-top:1px solid var(--line)}
.card.today-c>.card.tap:active{transform:none;background:transparent}

.rd-line{display:flex;flex-direction:row;align-items:center;gap:var(--s-3)}
.rd-ic,.act-ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:40px;color:var(--ink-2)}
.act-ic.sm{width:32px;height:32px}
.readiness{display:flex;flex-direction:column;gap:var(--s-2)}
.readiness{container-type:inline-size}
.rd-row{display:grid;grid-template-columns:80px minmax(0,1fr) 76px;grid-template-areas:'l d v';align-items:center;gap:var(--s-2);font-size:var(--fs-2)}
.rd-row>.stat-l{grid-area:l}.rd-row>.rd-dots{grid-area:d}.rd-row>.rd-lab{grid-area:v}
@container (max-width:420px){.rd-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'l v' 'd d';row-gap:var(--s-1)}.rd-row>.rd-lab{text-align:end}}
.rd-dots{display:flex;gap:var(--s-1)}
.rd-dot{flex:1;min-width:0;text-align:center;height:var(--tap);border:0;border-radius:var(--r-2);background:var(--fill);color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2);transition:background-color var(--t-1),color var(--t-1),transform var(--t-1) var(--ease-out)}
.rd-dot:active{transform:scale(.94)}
.rd-dot.on{background:var(--accent);color:var(--on-accent)}
.rd-lab{text-align:end;font-size:var(--fs-1);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rate5{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-2);align-items:center}
:has(>.rate5){container-type:inline-size}
@container (max-width:360px){.rate5{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}}
.ring-s{display:inline-grid;place-items:center;flex-shrink:0}

.k4 b{display:block;font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1.1;white-space:nowrap}
.g4.plain.k4,.g3.plain{gap:var(--s-3)}
.g3.plain>div,.g4.plain>div,.g2.plain>div{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-1);min-width:0} /* values line up when a label wraps */
.g3.plain b,.g2.plain b{display:block;font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1.1;font-variant-numeric:tabular-nums}
.near-l{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:var(--s-2)}
.near-l .near{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:var(--s-2);align-items:center;min-height:36px}
.near-l .lt-ic{width:24px;height:24px}
.near{display:grid;grid-template-columns:1fr auto;column-gap:var(--s-2);padding:var(--s-1) 0}
.near small{grid-column:1/3}
.more-b{display:flex;align-items:center;justify-content:flex-start;padding-inline:var(--s-4);gap:var(--s-2);min-height:var(--h-ctl);border:0;border-radius:var(--r-3);background:var(--surface);color:var(--ink-2);font-size:var(--fs-2);font-weight:var(--fw-2);transition:background-color var(--t-1)}
.more-b i{padding:var(--s-1) var(--s-2);border-radius:var(--r-1);background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-1);font-weight:var(--fw-2);font-style:normal}
.more-b svg{transform:rotate(90deg);transition:transform var(--t-2) var(--ease-out)}
.more-b[aria-expanded="true"] svg{transform:rotate(-90deg)}
.more-s{animation:xb-screen var(--t-2) var(--ease-out) backwards}
.wk7 .top{align-items:center}
.end-c{gap:var(--s-2)}
.end-c:has(>.end-x){padding-inline-end:56px}
.end-x{position:absolute;top:var(--s-2);inset-inline-end:var(--s-2)}
.end-r{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);padding:var(--s-2) 0;border-top:1px solid var(--line)}
.end-r>.grow{flex:1 1 180px}
.end-r>.row-actions{margin-inline-start:auto}
/* body strip: three numbers, one row */
.bstrip{gap:var(--s-3)}
.bstrip .top{align-items:center}
.bs-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.bs-t{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.bs-t+.bs-t{padding-inline-start:var(--s-3);border-inline-start:1px solid var(--line)}
.bs-t b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
.bs-d{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3)}
.bs-d.good{color:var(--ok)}.bs-d.bad{color:var(--warn)}
.bstrip-e .ic,.ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:40px;border-radius:0;background:none;color:var(--ink-2)}
/* worth sharing: a quiet invitation, not a banner */
.shs{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-3);background:var(--surface);color:var(--ink)}
.shs-glow{display:none}
.shs-top{display:flex;justify-content:space-between;align-items:center}
.shs-k{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:var(--tr-l);text-transform:uppercase;color:var(--ink-3)}
.shs-k i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.shs-x{display:grid;place-items:center;width:32px;height:32px;margin:-4px;border:0;border-radius:var(--r-2);background:none;color:var(--ink-3)}
.shs-m{display:flex;align-items:flex-end;gap:var(--s-4);min-width:0}
.shs-n{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-6);line-height:1;white-space:nowrap;color:var(--ink)}
.shs-n small{font-family:var(--font);font-variation-settings:normal;font-size:var(--fs-3);font-weight:var(--fw-2);color:var(--ink-3);margin-inline-start:var(--s-1)}
.shs-t{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;padding-bottom:var(--s-1)}
.shs-t span{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:var(--tr-l);text-transform:uppercase;color:var(--accent-ink)}
.shs-t strong{font-size:var(--fs-3);font-weight:var(--fw-2);line-height:var(--lh-t)}
.shs-b{display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);border:0;border-radius:var(--r-2);background:var(--fill);color:var(--ink);font-size:var(--fs-2);font-weight:var(--fw-2);transition:transform var(--t-1) var(--ease-out),background-color var(--t-1)}
.shs-b:active{transform:scale(.98)}
[dir=rtl] .shs-k,[dir=rtl] .shs-t span{text-transform:none}

/* ---------- workout logging (signature) ---------- */
.log-scr{gap:var(--s-3);padding-top:0}
.lg-hd{position:sticky;top:0;z-index:var(--z-sticky);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-2);margin:0 calc(-1 * var(--gutter));padding:calc(var(--safe-t) + var(--s-2)) var(--gutter) var(--s-2);background:var(--bg)}
.lg-hd .lg-bar{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0;background:var(--line)}
.lg-ttl{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.lg-name{display:inline-flex;align-items:center;gap:var(--s-2);max-width:100%;padding:0;border:0;background:none;color:var(--ink);font-size:var(--fs-3);font-weight:var(--fw-2);text-align:start}
.lg-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-name svg{color:var(--ink-3);flex:none}
.lg-name-in{width:100%;min-height:36px;padding:0 var(--s-2);border:1px solid var(--accent);border-radius:var(--r-1);background:var(--surface);color:var(--ink);font-size:var(--fs-3);font-weight:var(--fw-2)}
.lg-sub{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--fs-1);color:var(--ink-3);font-variant-numeric:tabular-nums}
.lg-fin{flex:none}
.lg-stats{display:flex;align-items:baseline;gap:var(--s-4);flex-wrap:wrap}
.lg-stats b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-5);line-height:1;font-variant-numeric:tabular-nums}
.lg-stats span{font-size:var(--fs-2);color:var(--ink-3)}
.lg-stats .lg-kpi{margin-inline-start:auto;display:flex;gap:var(--s-3);font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2)}
.lg-kpi span{display:inline-flex;align-items:center;gap:var(--s-1);color:inherit}
.lg-pr{color:var(--accent-ink)!important}
.lg-adj{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.lg-adj-t{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3);letter-spacing:var(--tr-l);text-transform:uppercase;margin-inline-end:var(--s-1)}
[dir=rtl] .lg-adj-t{text-transform:none}
.lg-adj-b{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--h-ctl-s);padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:var(--fill);color:var(--ink);font-size:var(--fs-2);font-weight:var(--fw-2);transition:background-color var(--t-1),transform var(--t-1) var(--ease-out)}
.lg-adj-b:active{transform:scale(.96)}
.lg-adj-b.on{background:var(--accent);color:var(--on-accent)}
.lg-adj-b.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3)}
.lg-note{display:flex;align-items:center;gap:var(--s-2);width:100%;min-height:var(--tap);padding:var(--s-2) var(--s-3);border:0;border-radius:var(--r-2);background:var(--warn-soft);color:var(--warn);font-size:var(--fs-2);font-weight:var(--fw-2);text-align:start}
.lg-note .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-note>svg:last-child{transition:transform var(--t-2) var(--ease-out)}
.lg-note.open>svg:last-child{transform:rotate(90deg)}
.lg-rd{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.lg-empty{gap:var(--s-3)}
.lg-ex{gap:var(--s-3);padding:var(--s-4) var(--s-3) var(--s-3)}
.lg-ex-h{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-1)}
.lg-ex-h .grow{gap:var(--s-1)}
.lg-ex-n{max-width:100%;padding:0;border:0;background:none;color:var(--ink);font-size:var(--fs-3);font-weight:var(--fw-2);text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-ex-h .sm{line-height:var(--lh-t)}
.lg-cnt{flex-shrink:0;padding:var(--s-1) var(--s-2);border-radius:var(--r-1);background:var(--fill);color:var(--ink-2);font-size:var(--fs-1);font-weight:var(--fw-2);font-variant-numeric:tabular-nums;transition:background-color var(--t-2),color var(--t-2)}
.lg-ex.all .lg-cnt{background:var(--accent);color:var(--on-accent)}
.lg-ex.all .lg-ex-n{color:var(--ink-2)}
.lg-warn{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--warn)}
.lg-up{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--accent-ink)}
.lg-q{display:flex;gap:var(--s-2);flex-wrap:wrap;padding:0 var(--s-1)}
.lg-qb{display:inline-flex;align-items:center;gap:var(--s-1);min-height:32px;padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:var(--fill);color:var(--ink-2);font-size:var(--fs-1);font-weight:var(--fw-2);font-variant-numeric:tabular-nums;transition:transform var(--t-1) var(--ease-out),background-color var(--t-1)}
.lg-qb:active{transform:scale(.95);background:var(--fill-2)}
.lg-sets{display:flex;flex-direction:column;gap:var(--s-1)}
.lg-sh,.lg-set{display:grid;grid-template-columns:28px 64px minmax(0,1fr) minmax(0,1fr) var(--tap);gap:var(--s-2);align-items:center}
.lg-sets.one .lg-sh,.lg-sets.one .lg-set{grid-template-columns:28px 64px minmax(0,1fr) var(--tap)}
.lg-sh{padding:0 var(--s-1);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3)}
.lg-sh span{text-align:center;white-space:nowrap}
[dir=rtl] .lg-sh{text-transform:none}
.lg-set{position:relative;isolation:isolate;padding:var(--s-1);border-radius:var(--r-2)}
.lg-set::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--accent-soft);opacity:0;transition:opacity var(--t-2) var(--ease-out)}
.lg-set.cur::before{opacity:.55}
.lg-set.done::before{opacity:1}
.lg-set.cur{box-shadow:inset 0 0 0 1px var(--accent-line)}
.lg-n{display:flex;align-items:center;justify-content:center;height:var(--tap);color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2);font-variant-numeric:tabular-nums}
.lg-set.pr .lg-n{color:var(--accent-ink)}
.lg-last{min-height:var(--tap);padding:0;border:0;border-radius:var(--r-1);background:none;color:var(--ink-2);font-size:var(--fs-1);text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-last:disabled{opacity:.5;cursor:default}
.lg-set input{width:100%;min-width:0;height:var(--tap);padding:0 var(--s-1);border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);color:var(--ink);font-size:var(--fs-4);font-weight:var(--fw-2);text-align:center;font-variant-numeric:tabular-nums;transition:border-color var(--t-1),background-color var(--t-2)}
.lg-set input:focus{border-color:var(--accent);outline:2px solid var(--accent-soft);outline-offset:0}
.lg-set.done input{border-color:transparent;background:transparent}
/* the tick: fill from the centre, the check pops in, the row tints */
.tick{position:relative;isolation:isolate;display:grid;place-items:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--r-2);background:var(--fill);color:var(--ink-3);overflow:hidden;transition:transform var(--t-1) var(--ease-out),color var(--t-1)}
.tick::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--accent);opacity:0;transform:scale(.2);transition:transform var(--t-x2) var(--ease-in),opacity var(--t-x2) var(--ease-in)}
.tick.on{color:var(--on-accent)}
.tick.on::before{opacity:1;transform:none;transition:transform var(--t-2) var(--ease-out),opacity var(--t-1) var(--ease-out)}
.tick.on svg{animation:xb-tick 320ms var(--ease-out) both}
.tick:active{transform:scale(.9)}
.tick.round{border-radius:50%}
@keyframes xb-tick{0%{transform:scale(.5);opacity:0}55%{transform:scale(1.08);opacity:1}100%{transform:none}}
.lg-ex-f{display:flex;align-items:center;gap:var(--s-4);padding:0 var(--s-1)}
.lg-ex-f .link{font-size:var(--fs-2)}
.lg-rpe,.rpe{display:inline-flex;align-items:center;gap:var(--s-2);margin-inline-start:auto;font-size:var(--fs-1);color:var(--ink-3);white-space:nowrap}
.rpe select{min-height:36px;padding:0 var(--s-2);border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--surface);color:var(--ink);font-size:var(--fs-2);font-weight:var(--fw-2)}
.lg-end{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-2) 0 calc(96px + var(--safe-b))}
.lg-end .btn{width:100%}
@media (max-width:389px){.lg-sh,.lg-set{grid-template-columns:24px 52px minmax(0,1fr) minmax(0,1fr) var(--tap);gap:var(--s-1)}.lg-sets.one .lg-sh,.lg-sets.one .lg-set{grid-template-columns:24px 52px minmax(0,1fr) var(--tap)}.lg-set input{font-size:var(--fs-3)}}
/* rest: a ring that empties as the rest runs out */
.rest{position:fixed;z-index:var(--z-float);left:var(--gutter);right:var(--gutter);bottom:calc(var(--safe-b) + var(--s-4) + var(--kb,0px));max-width:480px;margin:0 auto;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2);border-radius:var(--r-pill);background:var(--navy);color:var(--on-navy);box-shadow:var(--elev-2),inset 0 0 0 1px var(--edge);animation:xb-toast-in var(--t-3) var(--ease-out) both}
.rest.done{background:var(--accent);color:var(--on-accent)}
.rest-ring{position:relative;display:grid;place-items:center;flex-shrink:0;width:48px;height:48px}
.rest-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.rest-ring .trk{stroke:rgba(255,255,255,.14)}
.rest-ring .val{stroke:var(--navy-accent);stroke-linecap:round;animation:xb-rest linear forwards}
.rest.done .rest-ring .val{stroke:#FFFFFF;animation:none;stroke-dashoffset:0}
@keyframes xb-rest{to{stroke-dashoffset:var(--c)}}
.rest-ring svg+*{position:relative}
.rest-ring .rest-ic{color:var(--on-navy)}
.rest-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:var(--lh-t)}
.rest-t b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-weight:var(--fw-3);font-size:var(--fs-5);line-height:1;font-variant-numeric:tabular-nums}
.rest-t small{font-size:var(--fs-1);color:var(--on-navy-2)}
.rest.done .rest-t small{color:var(--on-accent)}
.rest .row-actions{gap:var(--s-1);flex-wrap:nowrap}
.rest button{min-height:var(--tap);padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:inherit;font-size:var(--fs-2);font-weight:var(--fw-2);transition:background-color var(--t-1),transform var(--t-1) var(--ease-out)}
.rest button:active{transform:scale(.95)}
@media (min-width:900px){.rest{left:calc(var(--side-w) + var(--s-6));right:var(--s-6)}}
/* new record: brief, bold, blue, one tap to close; it never blocks the next set */
.rec-m{position:fixed;z-index:var(--z-pop);top:calc(var(--safe-t) + 120px);left:var(--gutter);right:var(--gutter);max-width:480px;margin:0 auto;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:var(--s-3);padding:var(--s-4);border:0;border-radius:var(--r-3);background:var(--accent);color:var(--on-accent);text-align:start;box-shadow:var(--elev-2);animation:xb-rec-in 420ms var(--ease-out) both;cursor:pointer}
.rec-m.out{animation:xb-rec-out var(--t-x2) var(--ease-in) both}
.rec-ic{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16)}
.rec-ic::before{content:'';position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.5);opacity:0;animation:xb-rec-ring 900ms var(--ease-out) 120ms both}
.rec-ic svg{animation:xb-tick 520ms var(--ease-out) 80ms both}
.rec-k{display:block;font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:var(--tr-l);text-transform:uppercase;opacity:.85}
.rec-m b{display:block;font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-5);line-height:1;overflow-wrap:anywhere}
.rec-m small{display:block;margin-top:var(--s-1);font-size:var(--fs-2);opacity:.9}
[dir=rtl] .rec-k,[dir=rtl] .rec-m b{text-transform:none}
@keyframes xb-rec-in{from{opacity:0;transform:translateY(-16px) scale(.96)}}
@keyframes xb-rec-out{to{opacity:0;transform:translateY(-8px) scale(.98)}}
@keyframes xb-rec-ring{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.35)}}
@media (min-width:900px){.rec-m{left:calc(var(--side-w) + var(--s-6));right:var(--s-6);top:120px}} /* below the log header and its Finish button */

/* ---------- session saved: stats count up ---------- */
.saved{display:flex;gap:var(--s-3);align-items:center;padding-top:var(--s-2)}
.saved .ok,.ok-dot,.plg-done .ok{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent);animation:xb-tick 420ms var(--ease-out) both}
.ok-dot{width:28px;height:28px}
.sum-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.sum-k>div{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.sum-k>div+div{padding-inline-start:var(--s-3);border-inline-start:1px solid var(--line)}
.sum-k b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-5);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.sum-k span{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3)}
.sum-k small{font-size:var(--fs-1);font-weight:var(--fw-2)}
.sum-k b.acc{color:var(--accent-ink)}
.ring-s>b{font-size:var(--fs-1);font-weight:var(--fw-2);font-variant-numeric:tabular-nums}
@media (max-width:420px){.sum-k{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-4)}.sum-k>div:nth-child(3){padding-inline-start:0;border-inline-start:0}}

/* ---------- goals ---------- */
.gcar{display:flex;flex-direction:column;gap:var(--s-2)}
.gcar-t{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);scroll-padding:0 var(--gutter)}
.gcar-t>*{flex:0 0 100%;scroll-snap-align:start}
.gcar-t.multi>*{flex-basis:calc(100% - 24px)}
.gcar-d{display:flex;justify-content:center;margin:calc(-1 * var(--s-2)) 0 -18px}
.gcar-d button{position:relative;width:var(--tap);height:var(--tap);border:0;padding:0;background:none}
/* wide screens: each goal card spans the column like the cards below (swipe or dots for the next) */
@media (min-width:900px){.gcar-t{margin:0;padding:0}.gcar-t.multi>*{flex-basis:100%}}
.gcar-d button::before{content:'';position:absolute;top:50%;inset-inline-start:calc(50% - 4px);width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--line-2);transition:background-color var(--t-2),transform var(--t-2) var(--ease-out)}
.gcar-d button:first-child:not(:only-child)::before{inset-inline-start:auto;inset-inline-end:4px}
.gcar-d button:last-child:not(:only-child)::before{inset-inline-start:4px}
.gcar-d button.on::before{background:var(--accent);transform:scale(1.25)}
.gslide{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);border:0;border-radius:var(--r-3);background:var(--surface);color:var(--ink);text-align:start;min-width:0}
button.gslide{cursor:pointer;transition:transform var(--t-1) var(--ease-out)}
button.gslide:active{transform:scale(.985)}
.gslide.g2.flat{cursor:default}

.g2-t{font-size:var(--fs-3);font-weight:var(--fw-2);line-height:var(--lh-t);color:var(--ink)}

.gmini{gap:var(--s-2)}

.gl-only{gap:var(--s-2);text-align:start}
.gchart{width:100%}
.g2-top,.gf2-h{display:flex;align-items:center;gap:var(--s-4)}
.g2-ring{display:inline-grid;place-items:center;flex-shrink:0}
.g2-ring b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-weight:var(--fw-3);font-size:var(--fs-4);color:var(--ink);flex-direction:row;align-items:baseline;justify-content:center}
.g2-ring b small{font-family:var(--font);font-variation-settings:normal;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3)}
.g2-h{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;flex:1}
.g2-sub{font-size:var(--fs-2);color:var(--ink-3)}
.g2-rows{display:flex;flex-direction:column;gap:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.g2-r{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:var(--s-3)}
.g2-l{font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2)}
.g2-v{font-size:var(--fs-2);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.g2-v i{font-style:normal;margin:0 var(--s-1)}.g2-v b{color:var(--ink);font-weight:var(--fw-2)}
.g2-tip{display:flex;gap:var(--s-2);align-items:flex-start;padding:var(--s-3);border-radius:var(--r-2);background:var(--surface-2);color:var(--ink-2);font-size:var(--fs-2);line-height:var(--lh-b);text-align:start}
.g2-tip svg{flex-shrink:0;margin-top:2px;color:var(--warn)}.g2-tip.good svg{color:var(--ok)}
.g2-empty{font-size:var(--fs-2);color:var(--ink-3)}
.g2-re{display:flex;align-items:center;gap:var(--s-2);padding:0 var(--s-1);font-size:var(--fs-2);color:var(--ink-2)}.g2-re b{color:var(--ink);font-weight:var(--fw-2)}.g2-re:empty{display:none}
.g2-fine{padding:0 var(--s-1);font-size:var(--fs-1);color:var(--ink-3);line-height:var(--lh-b)}
.g2-meta{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.g2-left{font-size:var(--fs-2);color:var(--ink-3)}
.g2-meta .g2-st:has(+.g2-left)::after{content:'·';margin-inline-start:var(--s-2);color:var(--ink-4)}
.gf2{display:flex;flex-direction:column;gap:var(--s-4)}
.gf2-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.gf2-k>div{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.gf2-k>div+div{padding-inline-start:var(--s-3);border-inline-start:1px solid var(--line)}
.gf2-k span{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3);text-transform:uppercase;letter-spacing:var(--tr-l)}
.gf2-k b{font-size:var(--fs-3);font-weight:var(--fw-2);font-variant-numeric:tabular-nums;line-height:var(--lh-t)}
.gf2-k b small{font-size:var(--fs-1);color:var(--ink-3);font-weight:var(--fw-2);margin-inline-start:2px}
.gf2-say{display:flex;flex-direction:column;gap:var(--s-1)}.gf2-say p{margin:0;font-size:var(--fs-2);line-height:var(--lh-b)}
.gf2-diff{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-2);color:var(--ink-3)}.gf2-diff b{color:var(--ink);font-weight:var(--fw-2)}
.gf2-db{display:inline-flex;gap:var(--s-1)}.gf2-db i{width:14px;height:6px;border-radius:2px;background:var(--fill)}.gf2-db i.on{background:var(--accent)}.gf2-db.l3 i.on,.gf2-db.l4 i.on{background:var(--warn-fill)}
.gro-rows{display:flex;flex-direction:column}
.gro-r{display:grid;grid-template-columns:64px auto 1fr;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--line)}
.gro-r:first-child{border-top:0;padding-top:var(--s-1)}
.gro-r b{font-size:var(--fs-3);font-weight:var(--fw-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.gro-s{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1);text-align:end}.gro-s small{font-size:var(--fs-1);color:var(--ink-3)}
.gf-mini .lab{margin:0}

/* ---------- workouts list and milestones ---------- */
.ms-c{gap:var(--s-4)}
.ms-h{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3)}
.ms-h .ms-v{font-size:var(--fs-6);color:var(--on-navy)}
.ms-h .ms-v small{color:var(--on-navy-3)}
.ms-row{display:flex;gap:var(--s-2);overflow-x:auto;margin:0 calc(-1 * var(--s-4));padding:var(--s-1) var(--s-4);scrollbar-width:none}
.ms-row::-webkit-scrollbar{display:none}
.wk-c .g3{padding-bottom:var(--s-2)}
.ms{flex:none;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);width:104px;min-height:128px;padding:var(--s-3) var(--s-2);border-radius:var(--r-2);background:rgba(255,255,255,.05);color:var(--on-navy-2);text-align:center}
.ms.on{background:rgba(143,176,255,.14);color:var(--on-navy)}
.ms-i{display:grid;place-items:center;width:32px;height:32px;color:var(--on-navy-3)}
.ms.on .ms-i{color:var(--navy-accent)}
.ms-n{font-size:var(--fs-2);font-weight:var(--fw-2);line-height:var(--lh-t);overflow-wrap:anywhere;color:inherit}
.ms-s{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--on-navy-3)}.ms.on .ms-s{color:var(--navy-accent)}
.ms-p{width:76%;margin-top:auto;height:4px;background:rgba(255,255,255,.12)}.ms-p>i{background:var(--navy-accent)}
.ms-nx{text-align:end;color:var(--on-navy-2)}.ms-nx b{color:var(--on-navy)}
.ms-c .link{color:var(--navy-accent)}

/* ---------- analytics ---------- */
.per{position:sticky;top:0;z-index:var(--z-sticky);display:flex;flex-direction:column;gap:var(--s-2);margin:0 calc(-1 * var(--gutter));padding:var(--s-2) var(--gutter);background:var(--bg)}
.per-row{display:flex;gap:var(--s-1);overflow-x:auto;padding:var(--s-1);border-radius:var(--r-2);background:var(--fill)}
.per-row button{flex:1 0 auto;min-height:36px;padding:0 var(--s-2);border:0;border-radius:10px;background:transparent;color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2);white-space:nowrap;font-variant-numeric:tabular-nums;transition:background-color var(--t-2),color var(--t-2)}
.per-row button.on{background:var(--surface);color:var(--ink)}
.per-sum{font-size:var(--fs-1);color:var(--ink-3)}
.per-cust{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.per-cust label{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-2) var(--s-3);border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3)}
.per-cust input{min-height:24px;padding:0;border:0;background:transparent;color:var(--ink);font-size:var(--fs-3);font-weight:var(--fw-2)}
.ana-tabs{display:flex;gap:var(--s-1);padding:var(--s-1);border-radius:var(--r-2);background:var(--fill)}
.ana-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2);transition:background-color var(--t-2),color var(--t-2)}
.ana-tabs button.on{background:var(--surface);color:var(--ink)}
.ana-tabs .bt-pro,.bt-pro{display:inline-flex;align-items:center;padding:2px var(--s-2);border-radius:var(--r-1);background:var(--accent);color:var(--on-accent);font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:.04em;line-height:var(--lh-t)}
.ana-lock{display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start}
.ana-lock ul{margin:0;padding-inline-start:var(--s-5);color:var(--ink-2);font-size:var(--fs-2);line-height:var(--lh-b)}
.regs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-1);padding:var(--s-1);border-radius:var(--r-2);background:var(--fill)}
.regs button{min-height:36px;border:0;border-radius:10px;background:transparent;color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2);transition:background-color var(--t-2),color var(--t-2)}
.regs button.on{background:var(--surface);color:var(--ink)}
.tk-h{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.tk-back{display:inline-flex;align-items:center;gap:var(--s-1);min-height:32px;padding:0 var(--s-3) 0 var(--s-2);border:0;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-1);font-weight:var(--fw-2)}
.tk-s b{font-variant-numeric:tabular-nums}
.as-c{gap:var(--s-2)}
.card>strong.as-v,.as-v{font-family:var(--font);font-size:var(--fs-4);font-weight:var(--fw-2);line-height:var(--lh-t);letter-spacing:var(--tr-t);text-transform:none}
.as-v.good{color:var(--ok)}.as-v.warn{color:var(--warn)}
[dir=rtl] .as-v{text-transform:none}
.as-l{display:flex;flex-direction:column;margin-top:var(--s-1);border-top:1px solid var(--line)}
.as-r{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);border-bottom:1px solid var(--line);font-size:var(--fs-2);font-variant-numeric:tabular-nums}
.as-r:last-child{border-bottom:0}
.as-r .lt-ic{width:28px;height:28px}
.as-chart .huge{color:var(--on-navy)}
.exl .exr{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;min-height:64px}
.exl .exr.on{background:var(--accent-soft)}
.exr-v{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.exr-v b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1}
.exr-v small{font-size:var(--fs-1);font-weight:var(--fw-2)}
.exr-v small.good{color:var(--ok)}.exr-v small.bad{color:var(--warn)}
.exr .spark{display:none}
.bm-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.bm{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1);min-width:0;padding:var(--s-3);border:0;border-radius:var(--r-2);background:var(--surface);color:var(--ink);text-align:start;transition:box-shadow var(--t-1),transform var(--t-1) var(--ease-out)}
button.bm:active{transform:scale(.97)}
.bm b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
.bm b small{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3);margin-inline-start:2px;font-family:var(--font);font-variation-settings:normal}
.bm-c{min-height:16px;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3);font-variant-numeric:tabular-nums}.bm-c.good{color:var(--ok)}.bm-c.bad{color:var(--warn)}
.bm.on{box-shadow:inset 0 0 0 2px var(--accent)}
.kgrid .kpi{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3);border-radius:var(--r-2);background:var(--surface)}
.cres-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;overflow:hidden;border-radius:var(--r-2);background:var(--line)}
.cres-i{position:relative;display:flex;flex-direction:column;gap:var(--s-1);min-width:0;padding:var(--s-3);background:var(--surface)}
.cres-i b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-weight:var(--fw-3);font-size:var(--fs-5);line-height:1;font-variant-numeric:tabular-nums}
.cres-i b.good{color:var(--ok)}
.cres-i small{font-size:var(--fs-1);line-height:var(--lh-t)}

/* exercise and lift tiles */
/* exercise pictograms are plain line drawings, no tinted square behind them */
.lt-ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:var(--r-2);background:none;color:var(--ink-2)}
.lt-ic svg{width:70%;height:70%}
.row .lt-ic{width:40px;height:40px}
.exg{display:block}
.pr-strip{display:flex;gap:var(--s-2);overflow-x:auto;padding-bottom:var(--s-1)}
/* wide screens: record cards in equal columns, no sideways scroll */
@media (min-width:900px){.pr-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));overflow:visible}.pr-c{width:auto;min-width:0}}
.pr-c{flex-shrink:0;display:flex;flex-direction:column;gap:var(--s-1);align-items:flex-start;width:148px;min-width:148px;padding:var(--s-3);border:0;border-radius:var(--r-2);background:var(--surface);color:var(--ink);text-align:start}
.pr-c svg{color:var(--accent-ink)}
.pr-c span{font-size:var(--fs-1);color:var(--ink-3)}
.pr-c b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1.1}
.pr-c small{font-size:var(--fs-1);color:var(--ink-3)}
.act-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.act-o{min-height:var(--tap);padding:var(--s-1) var(--s-2);border:0;border-radius:var(--r-2);background:var(--fill);color:var(--ink-2);font-size:var(--fs-2);font-weight:var(--fw-2);line-height:var(--lh-t);transition:background-color var(--t-1),color var(--t-1),transform var(--t-1) var(--ease-out)}
.act-o:active{transform:scale(.97)}
.act-o.on{background:var(--accent);color:var(--on-accent)}
.act-line{display:flex;flex-direction:row;align-items:center;gap:var(--s-3)}
.sh{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:var(--s-2);align-items:center;padding:var(--s-3) var(--s-4);border-radius:var(--r-3);background:var(--surface);font-size:var(--fs-2);font-variant-numeric:tabular-nums}
.sh em{font-style:normal;font-size:var(--fs-1);font-weight:var(--fw-2);margin-inline-start:var(--s-1)}.sh em.good{color:var(--ok)}.sh em.bad{color:var(--warn)}
.cmp-t{display:grid;grid-template-columns:1.4fr 1fr 1fr .9fr;gap:var(--s-2);align-items:center;font-variant-numeric:tabular-nums}
.cmp-t b{font-size:var(--fs-2)}
.cmp-t .delta{padding:0;font-size:var(--fs-2)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.ba figure{margin:0;display:flex;flex-direction:column;gap:var(--s-1)}
.ba img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-2);background:var(--fill)}
.ba figcaption{font-size:var(--fs-1);color:var(--ink-3);font-weight:var(--fw-2)}
.week{display:flex;gap:var(--s-1)}
.week button{flex:1;min-width:0;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);border:0;border-radius:var(--r-2);background:var(--surface);color:var(--ink);transition:background-color var(--t-1),transform var(--t-1) var(--ease-out)}
.week button:active{transform:scale(.96)}
.week button span{font-size:var(--fs-1);color:var(--ink-3)}
.week button b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1}
.week button small{font-size:var(--fs-1);color:var(--ink-3)}
.week button.on{background:var(--accent);color:var(--on-accent)}
.week button.on span,.week button.on small{color:var(--on-accent)}

/* ---------- me, profile, reminders, health apps ---------- */
.avp{display:flex;flex-direction:column;gap:var(--s-2)}
.avp-cur{display:flex;align-items:center;gap:var(--s-4)}
.avp-up{position:relative;overflow:hidden;display:inline-flex;align-items:center;cursor:pointer}
.avp-emo{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s-2)}
.avp-e{display:grid;place-items:center;height:var(--tap);border:0;border-radius:var(--r-2);background:var(--fill);color:var(--ink-2);transition:background-color var(--t-1),color var(--t-1),transform var(--t-1) var(--ease-out)}
.avp-e:active{transform:scale(.94)}
.avp-e.on{background:var(--accent);color:var(--on-accent)}
@media (max-width:380px){.avp-emo{grid-template-columns:repeat(6,minmax(0,1fr))}}
.hs-ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:var(--r-2);background:var(--fill);color:var(--ink-2);font-size:var(--fs-1);font-weight:var(--fw-2)}
.hs-use{margin:var(--s-1) 0 0;padding-inline-start:var(--s-5);display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--fs-2);color:var(--ink-2)}
.rem-prev{gap:var(--s-2)}
.rem-n{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3);border-radius:var(--r-2);background:var(--surface-2)}
.rem-n .grow{font-size:var(--fs-2);line-height:var(--lh-b)}
.rem-n b{font-size:var(--fs-1);letter-spacing:var(--tr-l)}
.rem-i{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:var(--r-1);background:var(--navy);color:var(--on-navy);font-family:var(--font-d);font-variation-settings:'wdth' 62;font-weight:var(--fw-3);font-size:var(--fs-2)}
.anon{background:var(--accent-soft)}
.anon .sm{display:block;margin-top:var(--s-1);color:var(--ink-2)}
.anon-ic{display:inline-grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--accent-ink)}
.fm-note{display:flex;flex-direction:column;gap:var(--s-1)}
.my-rt .huge small{font-size:var(--fs-3)}
.ph-share{margin-top:var(--s-1)}.ph-c{display:block;padding:var(--s-3) var(--s-4) 0}

/* ---------- onboarding and self targets ---------- */
.onb{gap:var(--s-4)}
.onb-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
.onb-n{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:var(--tr-l);text-transform:uppercase;color:var(--ink-3)}
.mode-o{display:flex;align-items:center;gap:var(--s-4);width:100%;padding:var(--s-4);border:0;border-radius:var(--r-3);background:var(--surface);color:var(--ink);text-align:start;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--t-1),background-color var(--t-1)}
.mode-o .grow{gap:var(--s-1)}.mode-o b{font-size:var(--fs-3);font-weight:var(--fw-2)}.mode-o small{font-size:var(--fs-2);color:var(--ink-3)}
.mode-o.on{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.mode-ic{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:var(--r-2);background:var(--fill);color:var(--ink-2)}
.mode-o.on .mode-ic{background:var(--accent);color:var(--on-accent)}
.mode-r{flex-shrink:0;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-2);transition:box-shadow var(--t-1)}
.on>.mode-r{box-shadow:inset 0 0 0 7px var(--accent)}
/* one list of rows with hairlines, not a card per row */
.tchk{display:flex;flex-direction:column;border-radius:var(--r-2);background:var(--surface);padding-inline:var(--s-3)}
.tchk-r{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding:var(--s-2) 0}
.tchk-r+.tchk-r{border-top:1px solid var(--line)}
.tchk-r .checkline{font-weight:var(--fw-2);align-items:center;color:var(--ink)}
.dayline{display:flex;flex-direction:column;gap:var(--s-2);padding-top:var(--s-1)}
.dl-track{position:relative;height:32px;border-radius:var(--r-2);background:var(--fill)}
.dl-work{position:absolute;top:4px;bottom:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--r-1);background:repeating-linear-gradient(135deg,var(--fill-2) 0 6px,transparent 6px 11px)}
.dl-work span,.dl-train span{font-size:var(--fs-1);font-weight:var(--fw-2);white-space:nowrap}
.dl-work span{color:var(--ink-2)}
.dl-train{position:absolute;top:2px;bottom:2px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--r-1);background:var(--accent)}
.dl-train span{color:var(--on-accent)}
.dl-m{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--surface)}
.dl-m.meal{background:var(--warn-fill)}
.dl-ticks{position:relative;height:16px}.dl-ticks span{position:absolute;transform:translateX(-50%);font-size:var(--fs-1);color:var(--ink-3);white-space:nowrap}
.dayline.compact .dl-track{height:24px}
.dl-leg{font-size:var(--fs-1)}
[dir=rtl] .dayline{direction:ltr}
.st-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
.st-o{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);padding:var(--s-4) var(--s-2);border:0;border-radius:var(--r-2);background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:background-color var(--t-1),box-shadow var(--t-1)}
.st-o b{font-size:var(--fs-2)}.st-o small{font-size:var(--fs-1);color:var(--ink-3)}
.st-o svg{color:var(--accent-ink)}
.st-o.on{background:var(--accent);color:var(--on-accent);box-shadow:none}.st-o.on svg,.st-o.on small{color:var(--on-accent)}
.st-card{gap:var(--s-3)}
.st-amt{display:flex;flex-direction:column;gap:var(--s-2)}
.st-in{display:flex;align-items:center;gap:var(--s-2)}
.st-in input{width:96px;height:56px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);text-align:center;font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-size:var(--fs-5);font-weight:var(--fw-3);font-variant-numeric:tabular-nums}
.st-in .icon-btn.sm{width:var(--tap);height:var(--tap);background:var(--fill);color:var(--ink);font-size:var(--fs-4);font-weight:var(--fw-2)}
.st-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);padding:var(--s-3);border-radius:var(--r-2);background:var(--surface-2)}
.st-out>div{display:flex;flex-direction:column;gap:var(--s-1)}.st-out b{font-size:var(--fs-3)}
.lv.l1{color:var(--ok)}.lv.l2{color:var(--accent-ink)}.lv.l3{color:var(--warn)}.lv.l4{color:var(--bad)}
.st-list{gap:var(--s-3)}
.st-rows{display:flex;flex-direction:column}
.st-r{display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:var(--s-2) var(--s-1);border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-align:start}
.st-r:first-child{border-top:0}
.st-r .grow{gap:var(--s-1)}.st-r b{font-size:var(--fs-2);font-weight:var(--fw-2)}.st-r small{font-size:var(--fs-1);color:var(--ink-3)}
.st-r:disabled{cursor:default}
.sp-dot{display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-2);color:#FFFFFF}
.st-r.st-done .sp-dot{background:var(--ok-fill);box-shadow:none}
.st-r.st-done b{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}

/* ---------- gym check-in and pass ---------- */
.sci .top{align-items:center}.sci .lab{margin:0}
.sci-r{display:flex;align-items:center;gap:var(--s-3)}
.qr-b{width:40px;height:40px}
.qr-cam{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-3);background:#000000}
.qr-cam video{display:block;width:100%;height:100%;object-fit:cover}
.qr-frame{position:absolute;inset:18%;border:2px solid rgba(255,255,255,.9);border-radius:var(--r-3);box-shadow:0 0 0 999px rgba(0,0,0,.4)}
.qr-hint{position:absolute;left:0;right:0;bottom:var(--s-3);text-align:center;color:#FFFFFF;font-size:var(--fs-2);font-weight:var(--fw-2)}
.qr-img{display:block;flex-shrink:0;border-radius:var(--r-2);background:#FFFFFF;image-rendering:pixelated}
.qr-img.ph{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line-2);color:var(--ink-3)}
.qr-code>.btn-sm{flex:0 0 auto}
.deskqr{display:flex;gap:var(--s-4);align-items:flex-start;padding-top:var(--s-3);border-top:1px solid var(--line)}
.qr-full{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);width:100%;max-width:420px;padding:var(--s-6);border-radius:var(--r-3);background:#FFFFFF;color:#0E1424;text-align:center}
.qr-full .brand{font-size:var(--fs-4);color:#0E1424}.qr-full .mute{color:#5C6577}
@media print{body *{visibility:hidden!important}.qr-full,.qr-full *{visibility:visible!important}.qr-full{position:fixed;inset:0;margin:auto;box-shadow:none}.no-print{display:none!important}}
.pass{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-4);border-radius:var(--r-3)}
.pass .grow{gap:var(--s-1)}.pass strong{font-size:var(--fs-4);font-weight:var(--fw-2)}
.pass .qr-img{padding:var(--s-1);border-radius:var(--r-2)}
.pass .good{color:#6EE7B7}

/* trainee home: one column on phones in reading order; on wide screens the day on the left, goals and body beside it */
.tn-th .th-main,.tn-th .th-side{display:contents}
.tn-th .th-main>:is(.more-b,.more-s){order:1}
@media (min-width:1100px){
  .app>.stk>.scr.tn-th.wide{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:var(--s-6);row-gap:var(--s-4);align-items:start}
  .scr.tn-th.wide>*{grid-column:1/-1}
  .tn-th .th-main,.tn-th .th-side{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
  .scr.tn-th.wide>.th-main{grid-column:1}
  .scr.tn-th.wide>.th-side{grid-column:2;position:sticky;top:var(--s-6)}
  .tn-th .th-main>:is(.more-b,.more-s){order:0}
  .tn-th .th-side .gcar-t{margin:0;padding:0;scroll-padding:0}
}

/* =====================================================================
   TRAINEE (continued): seasons, training buddy, coaching hints,
   InBody scanning, the AI assistant, small editors
   ===================================================================== */

/* ---------- home hero: weekly ring beside the next workout ---------- */

.h2-row{display:flex;align-items:center;gap:var(--s-4)}
.h2-row .grow{gap:var(--s-2)}

/* ---------- logging: plan progress, rest bar ---------- */

/* ---------- next set suggestions ---------- */
.ai-nx,.nx{display:flex;flex-direction:column;gap:var(--s-3)}
.ai-nr{display:flex;flex-direction:column;gap:var(--s-1);padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.ai-nr:last-child{padding-bottom:0;border-bottom:0}
.ai-nr-h{display:flex;align-items:center;gap:var(--s-2)}
.ai-nr-h>.grow{flex:1 1 auto;min-width:84px}
.ai-nr-h .lt-ic{width:28px;height:28px}
.ai-try{min-width:0;font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1.1;text-align:end;font-variant-numeric:tabular-nums}
.ai-why-l{padding-inline-start:36px;font-size:var(--fs-2);line-height:var(--lh-t);color:var(--ink-3)}
.ai-why-t{font-size:var(--fs-3);font-weight:var(--fw-2)}
.cite{margin:0;font-size:var(--fs-1);line-height:var(--lh-b);color:var(--ink-3)}
.nx-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto;column-gap:var(--s-3);align-items:center;padding:var(--s-2) 0;border-top:1px solid var(--line)}
.nx-r small{grid-column:1/4}

/* ---------- seasons (gym challenges) ---------- */
.ssn-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-2);background:var(--accent-soft);color:var(--accent-ink)}
.ssn-big{display:block;margin:var(--s-2) 0 var(--s-1);font-size:var(--fs-6);color:var(--on-navy)}
.ssn-big small{color:var(--on-navy-3)}
.ssn-ring{--p:0%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--accent) var(--p),var(--fill) 0)}
.ssn-ring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.ssn-ring>*{position:relative}
.ssn-ring b{font-size:var(--fs-3);font-weight:var(--fw-2);line-height:1;font-variant-numeric:tabular-nums}
.ssn-ring small{font-size:var(--fs-1);line-height:1.1;color:var(--ink-3)}
.card.dark .ssn-ring{background:conic-gradient(var(--navy-accent) var(--p),rgba(255,255,255,.14) 0)}
.card.dark .ssn-ring::before{background:var(--navy)}
.ssn-ring.big{width:84px;height:84px}
.ssn-ring.big::before{inset:7px}
.ssn-ring.big b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-5);color:var(--on-navy)}
.card.ssn-hero{gap:var(--s-3)}
.ssn-two{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.ssn-r{gap:var(--s-3)}
.ssn-r.me{background:var(--accent-soft)}
.ssn-pts{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-4);font-variant-numeric:tabular-nums}
.ssn-gap{padding:2px 0;border-top:1px solid var(--line);color:var(--ink-4);font-size:var(--fs-1);letter-spacing:.3em;text-align:center}
.ssn-wk{display:flex;gap:var(--s-1);padding-bottom:var(--s-5)}
.ssn-wk i{position:relative;display:block;flex:1;min-width:0;height:64px;border-radius:var(--r-1);background:rgba(255,255,255,.1)}
.ssn-wk i b{position:absolute;inset-inline:0;bottom:0;display:block;border-radius:var(--r-1);background:var(--chart-2)}
.ssn-wk i.ok b{background:var(--navy-accent)}
.ssn-wk i.cur{box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.ssn-wk i em{position:absolute;top:100%;inset-inline:0;margin-top:var(--s-1);color:var(--on-navy-3);font-size:var(--fs-1);font-style:normal;text-align:center}
.ssn-leave,.bd-end{align-self:center;min-height:var(--tap)}

/* ---------- training buddy ---------- */
.bd-av{display:inline-flex;flex:none}
.bd-av .avatar+.avatar{margin-inline-start:-6px;box-shadow:0 0 0 2px var(--surface)}
.card.dark .bd-av .avatar+.avatar,.bd-hero .bd-av .avatar+.avatar{box-shadow:0 0 0 3px var(--navy)}
.bd-top{display:flex;align-items:center;gap:var(--s-3);width:100%;padding:0;border:0;background:none;color:inherit;text-align:start}
.bd-top .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.bd-st{display:flex;flex-direction:column;align-items:center;flex:none;min-width:60px;padding:var(--s-1) var(--s-2);border-radius:var(--r-2);background:var(--accent-soft);color:var(--accent-ink)}
.bd-st b{font-family:var(--font-d);font-variation-settings:'wdth' var(--d-wdth);font-stretch:72%;font-weight:var(--fw-3);font-size:var(--fs-4);line-height:1.1;font-variant-numeric:tabular-nums}
.bd-st small{font-size:var(--fs-1);font-weight:var(--fw-2);text-align:center}
.card.bd-hero{gap:var(--s-3)}
.bd-hero-r{display:flex;align-items:center;gap:var(--s-4)}
.bd-tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);padding-top:var(--s-3);border-top:1px solid var(--navy-line)}
.bd-tiles>div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 var(--s-3)}
.bd-tiles>div:first-child{padding-inline-start:0}
.bd-tiles>div+div{border-inline-start:1px solid var(--navy-line)}
.bd-tiles b{font-size:var(--fs-3);font-weight:var(--fw-2);line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}
.bd-tiles .stat-l{color:var(--on-navy-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-cap{color:var(--on-navy-3)}
.bd-end{color:var(--bad)}

/* ---------- public progress page ---------- */
.pub-h{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6) var(--gutter) var(--s-5);background:var(--navy);color:var(--on-navy)}
.pill{padding:2px var(--s-3);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--navy-line);color:var(--on-navy-2);font-size:var(--fs-2)}

/* ---------- InBody: scanning, review, tips ---------- */
/* the scan page follows the theme; only the camera well is dark, like a viewfinder */
.darkscr{min-height:100vh;min-height:100dvh}
.viewfinder{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:560px;min-height:min(52vh,420px);align-self:center;border-radius:var(--r-3);background:var(--navy-2);overflow:hidden;cursor:pointer}
.viewfinder img{max-width:100%;max-height:60vh;object-fit:contain}
.vf-hint{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);color:var(--on-navy-2);text-align:center}
.viewfinder i{position:absolute;width:32px;height:32px;border:3px solid var(--navy-accent)}
.viewfinder .c1{left:var(--s-4);top:var(--s-4);border-right:0;border-bottom:0;border-radius:var(--r-2) 0 0 0}
.viewfinder .c2{right:var(--s-4);top:var(--s-4);border-left:0;border-bottom:0;border-radius:0 var(--r-2) 0 0}
.viewfinder .c3{left:var(--s-4);bottom:var(--s-4);border-right:0;border-top:0;border-radius:0 0 0 var(--r-2)}
.viewfinder .c4{right:var(--s-4);bottom:var(--s-4);border-left:0;border-top:0;border-radius:0 0 var(--r-2) 0}
.tips{margin:0;color:var(--ink-3);font-size:var(--fs-2);text-align:center}
.seg-grid{display:grid;grid-template-columns:minmax(0,1fr) 88px 88px;align-items:center;gap:var(--s-2)}
.thumb{width:64px;height:86px;border-radius:var(--r-1);object-fit:cover}
.ai-note{display:flex;align-items:flex-start;gap:var(--s-2)}
.ai-note svg{flex-shrink:0;margin-top:2px;color:var(--ink-3)}
.ai-note.good svg{color:var(--ok)}.ai-note.bad svg{color:var(--bad)}
.ai-tips summary{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--accent-ink);font-size:var(--fs-2);font-weight:var(--fw-2)}
.ai-tips ul{margin:0;padding-inline-start:var(--s-5);font-size:var(--fs-2);color:var(--ink-2)}
/* face / fingerprint unlock */
.bio-card{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);width:100%;max-width:320px;padding:var(--s-6) var(--s-5);border-radius:var(--r-3);background:var(--surface);text-align:center;box-shadow:var(--elev-2),inset 0 0 0 1px var(--edge)}
.bio-ic{display:grid;place-items:center;width:80px;height:80px;border-radius:var(--r-3);background:var(--accent-soft);color:var(--accent-ink)}
.bio-ic.ok{background:var(--ok-fill);color:#FFFFFF;animation:xb-pop-in var(--t-2) var(--ease-out)}

/* ---------- small editors and lists ---------- */
.hpin{gap:var(--s-2);box-shadow:inset 3px 0 0 var(--ok-fill)}
.hpin.warn{box-shadow:inset 3px 0 0 var(--warn-fill)}
[dir=rtl] .hpin{box-shadow:inset -3px 0 0 var(--ok-fill)}[dir=rtl] .hpin.warn{box-shadow:inset -3px 0 0 var(--warn-fill)}
.hpin-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);margin-top:2px;padding-top:var(--s-2);border-top:1px solid var(--line)}
.led{display:flex;align-items:flex-start;gap:var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--line)}
.led-c>.led:first-child{padding-top:0;border-top:0}
.led-f{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) repeat(var(--k,0),72px);gap:var(--s-2)}
.led-f .field{--f-pb:var(--s-1);min-width:0;min-height:48px}
.led-f>.field:first-child{grid-column:1/-1}
.led-add{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--tap)}
.led-f .field input{font-size:var(--fs-2)}
.num-set{display:inline-flex;align-items:center;gap:var(--s-2)}
.num-set .amt-in{width:80px;min-width:0}
.mdx p{margin:0 0 var(--s-2)}
.mdx p:last-child{margin:0}
.mdx ul,.mdx ol{margin:var(--s-1) 0 var(--s-2);padding-inline-start:var(--s-5)}
.mdx li{margin:2px 0}
.sig{gap:var(--s-3)}
.sig-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
.sig-row span{display:flex;flex-direction:column}
.gchk{display:flex;flex-direction:column;gap:2px;padding:var(--s-2) var(--s-3);border-radius:var(--r-2);background:var(--surface-2);box-shadow:inset 3px 0 0 var(--line-2)}
.gchk.l0,.gchk.l1{box-shadow:inset 3px 0 0 var(--ok-fill)}
.gchk.l2,.gchk.l3{box-shadow:inset 3px 0 0 var(--warn-fill)}
.gchk.l4{box-shadow:inset 3px 0 0 var(--bad-fill)}
[dir=rtl] .gchk{box-shadow:inset -3px 0 0 var(--line-2)}[dir=rtl] .gchk.l0,[dir=rtl] .gchk.l1{box-shadow:inset -3px 0 0 var(--ok-fill)}[dir=rtl] .gchk.l2,[dir=rtl] .gchk.l3{box-shadow:inset -3px 0 0 var(--warn-fill)}[dir=rtl] .gchk.l4{box-shadow:inset -3px 0 0 var(--bad-fill)}
.st-rate button{font-variant-numeric:tabular-nums}
.rt-coach{flex-direction:row;align-items:center;gap:var(--s-3)}
.rt-coach small{display:block;margin-top:2px;line-height:var(--lh-t)}
.or-n{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink-3);font-size:var(--fs-1);font-weight:var(--fw-2);font-variant-numeric:tabular-nums;transition:background-color var(--t-2) var(--ease-out),box-shadow var(--t-2)}
.or-n.ok{background:var(--accent);box-shadow:none;color:var(--on-accent)}
.eqlist{display:flex;flex-direction:column;gap:2px;max-height:46vh;padding:var(--s-1);border-radius:var(--r-2);background:var(--surface-2);overflow:auto;overscroll-behavior:contain}
.ai-pro{gap:var(--s-2)}
.sm-pro{font-size:var(--fs-1)}
.ai-list{display:flex;flex-direction:column;gap:var(--s-1);margin:0;padding-inline-start:var(--s-5)}
.ai-draft .ic{color:var(--accent-ink)}
.ai-sum{margin-top:calc(-1 * var(--s-1))}

/* ---------- the AI assistant: a sheet on phones, a side panel on desktop ---------- */
.ai-panel{position:fixed;z-index:var(--z-over);inset:auto 0 0 0;display:flex;flex-direction:column;height:min(88vh,calc(100dvh - var(--safe-t) - 24px));max-width:640px;margin:0 auto;border-radius:var(--r-3) var(--r-3) 0 0;background:var(--surface);box-shadow:var(--elev-2),inset 0 0 0 1px var(--edge);overflow:hidden;animation:xb-sheet-in var(--t-3) var(--ease-out) both}
.ai-panel.is-out{animation:xb-sheet-out var(--t-x3) var(--ease-in) both}
.ai-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);border-bottom:1px solid var(--line)}
.ai-t{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-2);align-items:center}
.ai-t svg{grid-row:span 2;color:var(--accent-ink)}
.ai-t b{font-size:var(--fs-3);font-weight:var(--fw-2)}
.ai-t small{font-size:var(--fs-1);color:var(--ink-3)}
.ai-body{flex:1;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);overflow:auto;overscroll-behavior:contain}
.ai-hello{display:flex;flex-direction:column;gap:var(--s-2)}
.ai-sug{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);margin-top:var(--s-1)}
.ai-sug .chip{height:auto;min-height:var(--h-ctl-s);padding:var(--s-2) var(--s-3);line-height:var(--lh-t);text-align:start;white-space:normal}
.ai-m{max-width:92%;font-size:var(--fs-2);line-height:var(--lh-b);animation:xb-fade var(--t-2) var(--ease-out)}
.ai-m.user{align-self:flex-end;padding:var(--s-2) var(--s-3);border-radius:var(--r-3) var(--r-3) var(--r-1) var(--r-3);background:var(--accent);color:var(--on-accent);white-space:pre-wrap}
.ai-m.assistant{align-self:flex-start;padding:var(--s-2) var(--s-3);border-radius:var(--r-3) var(--r-3) var(--r-3) var(--r-1);background:var(--fill)}
[dir=rtl] .ai-m.user{border-radius:var(--r-3) var(--r-3) var(--r-3) var(--r-1)}[dir=rtl] .ai-m.assistant{border-radius:var(--r-3) var(--r-3) var(--r-1) var(--r-3)}
.ai-think{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--ink-3);font-size:var(--fs-2)}
.ai-think i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:xb-think 1s var(--ease-out) infinite}
.ai-think i:nth-child(2){animation-delay:.15s}.ai-think i:nth-child(3){animation-delay:.3s}
@keyframes xb-think{0%,100%{opacity:.3}50%{opacity:1}}
.ai-act{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3);border-radius:var(--r-2);background:var(--accent-soft);font-size:var(--fs-2)}
.ai-act .lab{margin:0;color:var(--accent-ink)}
.ai-in{display:flex;align-items:flex-end;gap:var(--s-2);padding:var(--s-3) var(--s-3) calc(var(--s-3) + var(--safe-b));border-top:1px solid var(--line)}
.ai-in textarea{flex:1;max-height:140px;padding:var(--s-2) var(--s-3);border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);font-size:var(--fs-3);resize:none}
.ai-in textarea:focus{border-color:var(--accent);outline:2px solid var(--accent-soft);outline-offset:0}
.ai-g{gap:var(--s-3)}
.ai-script{display:flex;flex-direction:column;gap:var(--s-2);margin:0;padding-inline-start:var(--s-5);font-size:var(--fs-2)}

@media (min-width:900px){
  .ai-panel{inset:var(--s-4) var(--s-4) var(--s-4) auto;width:420px;height:auto;max-width:none;margin:0;border-radius:var(--r-3);animation-name:xb-panel-in}
  [dir=rtl] .ai-panel{inset:var(--s-4) auto var(--s-4) var(--s-4)}
  .ai-panel.is-out{animation-name:xb-panel-out}
  .ai-in{padding-bottom:var(--s-3)}
}
@keyframes xb-panel-in{from{opacity:0;transform:translateX(24px)}}
@keyframes xb-panel-out{to{opacity:0;transform:translateX(24px)}}
/* check lists and signature states */
.ck-list{gap:var(--s-2)}
.ck-list>span{display:flex;align-items:flex-start;gap:var(--s-2);font-size:var(--fs-3);line-height:var(--lh-t)}
.ck-list svg{flex:none;margin-top:1px;color:var(--accent-ink)}
.sig-st{display:inline-flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3)}
.sig-st>span{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--ink-3)}
.sig-st>span.ok{color:var(--ok)}
.ck-in{display:inline-flex;align-items:center;gap:var(--s-1)}
/* the goal ring: progress drawn around the percentage */
.g2-ring{--rc:var(--accent);border-radius:50%;background:radial-gradient(closest-side,var(--surface) 80%,transparent 81% 100%),conic-gradient(var(--rc) calc(var(--p) * 1%),var(--fill) 0)}
.g2-ring.warn{--rc:var(--warn-fill)}.g2-ring.bad{--rc:var(--bad-fill)}.g2-ring.ok{--rc:var(--ok-fill)}

.lg-warn.soft{color:var(--ink-3);font-weight:var(--fw-1)}

/* row icons sit plain beside the text (no tinted squares) */
/* Basic analytics on a wide screen: the chart beside the three answers */
@media (min-width:1100px){.scr.wide .ana-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:var(--s-4)}.scr.wide .ana-g>.as-chart{grid-row:span 3}}
.my-rt .rt-hd{display:inline-flex;align-items:baseline;gap:var(--s-3)}
.more-b>svg{margin-inline-start:auto}
.cmp-t>:not(:first-child){text-align:end;justify-self:end}
/* desktop log: the sticky header on the same edges as the cards (the set table fills the card) */
@media (min-width:900px){.lg-hd{margin-inline:0;padding-inline:0}}
/* the period switch wraps to two rows on a narrow phone instead of cutting its last option */
@media (max-width:419px){.per-row{flex-wrap:wrap;overflow:visible}.per-row button{flex:1 0 22%}}
.cmp-t>.sm{text-align:start;justify-self:start} /* labels at the start, numbers at the end */
/* milestones as a list: icon, name, earned or how far */
.ms-list{display:flex;flex-direction:column}
.ms-li{display:flex;align-items:center;gap:var(--s-3);min-height:40px;padding-block:var(--s-2);border-top:1px solid var(--navy-line);color:var(--on-navy-2);font-size:var(--fs-2)}
.ms-li:first-child{border-top:0}
.ms-li.on{color:var(--on-navy)}.ms-li.on svg{color:var(--navy-accent)}
.ms-li .sm{font-variant-numeric:tabular-nums}
[dir=rtl] .ssn-wk{direction:ltr} /* weeks run left to right, like every time axis */
/* the profile list editor on a phone: the first two fields on their own lines, short year fields side by side */
@media (max-width:479px){.led-f{grid-template-columns:repeat(2,minmax(0,1fr))}.led-f>.field:not(.w3){grid-column:1/-1}}