/* Gymveo · Wave 1 · member app screens. Page-specific layout only; colours and components come from tokens.css / components.css. */

/* ---- helpers (from the approved mockup, docs/design/mockup/members.html) ---- */
.mb-g8{gap:8px}.mb-g12{gap:12px}.mb-g14{gap:14px}.mb-g16{gap:16px}
.mb-push{margin-top:auto}
.mb-center{align-items:center;text-align:center}
.mb-row{display:flex;gap:10px;align-items:center}
.mb-row>.btn,.mb-row>form{flex:1}
.mb-row>form .btn{width:100%}
.mb-stack{display:grid;gap:4px}
.mb-foot{flex:none;padding:12px 22px calc(24px + env(safe-area-inset-bottom,0px));display:grid;gap:8px}
.mb-sec{margin-top:8px}
.m-body>.tag,.m-body>.stamp{align-self:flex-start}
.m-body>form{margin:0}
.powered{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);justify-content:center;margin:0}
.mb-credit{text-align:center}

/* ---- header / title bar ---- */
.m-head{min-height:56px}
.m-gym{min-width:0;flex:0 1 auto;color:var(--text);text-decoration:none}
.m-gym>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-gym .logo{flex:none}
.m-head .pill,.m-head .bell{min-height:44px;flex:none}
.m-head .pill{height:44px}
.m-head .bell{width:44px;height:44px;color:var(--text)}
.m-head .bell i{top:0;inset-inline-end:0}
.m-title .back{width:44px;height:44px;color:var(--text);text-decoration:none;background:none;cursor:pointer;padding:0}
.m-title .mb-tt{min-width:0;flex:1}
.m-title .mb-h{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[dir="rtl"] .m-title .mb-h{letter-spacing:0}
.m-title .end{align-items:center}

/* segmented controls made of links (language) */
.seg a{height:38px;padding:0 14px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
.seg a.on{background:var(--raised);color:var(--text);box-shadow:0 1px 2px rgba(11,21,48,.12)}
.mb-lang{margin-inline-start:auto;flex:none}
.mb-lang a{padding:0 12px;font-size:13px}
.mb-seg{display:flex;background:var(--panel);width:100%}
.mb-seg a{flex:1;height:44px}

/* hairline rows that are links or buttons */
.rows>.r.mb-link{color:inherit;text-decoration:none;cursor:pointer;min-height:44px}
button.r.mb-link{width:100%;font:inherit;background:none;border:0;border-bottom:1px solid var(--line);text-align:start;color:var(--text)}
.rows>.r>form{margin:0}
.rows>.r .mb-ico{display:flex;align-items:center;gap:10px}
.rows>.r .mb-ico svg{width:18px;height:18px;color:var(--muted);flex:none}
.rows>.r>svg.ic{color:var(--muted)}
.mb-ex>.r{padding:10px 0}
.mb-ex>.r>span:first-of-type{font-size:15.5px;line-height:1.3}
.mb-ex>.r .s{line-height:1.35}
.mb-done,.mb-done .v{color:var(--muted)}
.rows .stamp.sm{padding:2px 10px;border-width:2.5px;animation:none}
.rows .stamp.sm b{font-size:13px}

/* ---- login ---- */
.mb-form{display:grid;gap:16px;margin:0}
.mb-code{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.mb-code span{height:56px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);background:var(--panel);display:grid;place-items:center;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-hi)}
.mb-code span.on{border-color:var(--action);box-shadow:0 0 0 3px rgba(47,80,255,.25)}
.mb-code span.on:empty::after{content:"";width:2px;height:26px;background:var(--text-hi)}
.mb-code input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;cursor:text;z-index:1}
.mb-code input:disabled~span{opacity:.45}
.mb-code:focus-within span:not(.on){border-color:var(--line-2)}

/* ---- bottom sheets (<dialog class="gv mb-sheet">) ---- */
dialog.gv.mb-sheet{margin:auto auto 0;width:100%;max-width:560px;max-height:92dvh;overflow:visible}
dialog.gv.mb-sheet>.sheet{position:static;max-height:92dvh;overflow:auto;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
dialog.gv.mb-sheet[open]>.sheet{animation:mb-up .2s ease-out}
@keyframes mb-up{from{transform:translateY(28px);opacity:.6}}
.sheet>.stamp{align-self:center}
.sheet>form{margin:0}
.sheet.mb-center{align-items:center}
.sheet .mb-full{align-self:stretch}
.mb-badge{width:60px;height:60px;border-radius:18px;background:var(--raised);display:grid;place-items:center;color:var(--text-hi)}
.mb-badge svg{width:28px;height:28px}

/* numbered steps / cues */
.mb-cues{margin:0;padding:0;list-style:none;counter-reset:c;display:grid;gap:10px}
.mb-cues li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.4;color:var(--text-2)}
.mb-cues li::before{counter-increment:c;content:counter(c);width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--text)}
.mb-cues li b{color:var(--text-hi)}
.mb-inl{display:inline-flex;vertical-align:-4px;width:20px;height:20px;color:var(--accent-2)}

/* ---- program ---- */
.mb-days{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mb-days .chip{justify-content:center;padding:0 6px;height:44px;text-decoration:none;white-space:nowrap}
.mb-days .chip svg{width:14px;height:14px}
.mb-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.mb-chips::-webkit-scrollbar{display:none}
.mb-chips .chip{height:44px;text-decoration:none;white-space:nowrap;flex:none}

/* ---- exercise ---- */
.mb-gif{margin:0;border-radius:var(--r-md);background:var(--paper);overflow:hidden;display:grid;place-items:center}
.mb-gif img{display:block;width:100%;max-height:280px;object-fit:contain}
.mb-gif.sm img{max-height:180px}
.mb-media{border-radius:var(--r-md);background:var(--raised);display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;flex:none;border:1px solid var(--line);gap:12px}
.mb-media .big{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.05;color:var(--text-hi);overflow-wrap:anywhere}
.mb-media.h150{min-height:150px}.mb-media.h190{min-height:190px}
[dir="rtl"] .mb-media .big{letter-spacing:0;line-height:1.3}
.mb-tags{display:flex;flex-wrap:wrap;gap:6px}
.mb-pn{height:auto;min-height:56px;padding:8px 14px;flex-direction:column;align-items:flex-start;gap:2px;white-space:normal;text-align:start;flex:1;min-width:0}
.mb-pn.end{align-items:flex-end;text-align:end}
.mb-pn small{font-size:12px;font-weight:500;color:var(--muted)}
.mb-pn-gap{flex:1}
.mb-unit{font-size:30px;letter-spacing:-.02em;color:var(--accent-2);font-weight:500}
.t-num-l .mb-unit{font-size:22px}

/* charts (inline SVG, drawn to scale) */
.floor .chart{width:100%;height:auto;display:block;overflow:visible}
.floor .chart .grid line{stroke:var(--line);stroke-width:1}
.floor .chart text{fill:var(--muted);font:500 11px Outfit,"Readex Pro",sans-serif}
.floor .chart .line{fill:none;stroke:var(--accent-2);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.floor .chart .area{fill:var(--accent-2);opacity:.1}
.floor .chart .pt{fill:var(--accent-2)}
.floor .chart .pt:last-of-type{fill:var(--live)}

/* ---- progress ---- */
.mb-adh{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mb-adh .wk{display:grid;gap:5px}
.mb-adh .cells{display:flex;gap:4px}
.mb-adh .cells i{flex:1;height:28px;border-radius:6px;background:var(--accent-2);display:grid;place-items:center;color:var(--page);min-width:0}
.mb-adh .cells i svg{width:13px;height:13px}
.mb-adh .cells i.miss{background:transparent;border:1.5px dashed var(--line-2)}
.mb-adh small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mb-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.mb-facts small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
[dir="rtl"] .mb-facts small{letter-spacing:0;text-transform:none;font-size:13px}
.mb-facts b{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-hi)}
[dir="rtl"] .mb-facts b{display:block;text-align:start}
.mb-pr{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--text-2)}
.mb-pr svg{color:var(--accent-2)}
.mb-pr b{color:var(--text-hi)}

/* ---- pass ---- */
.mb-qr{background:var(--paper);padding:10px;border-radius:16px;align-self:center;line-height:0}
.mb-qr img{display:block;width:min(232px,62vw);height:auto;aspect-ratio:1}
.mb-refresh{width:min(252px,70vw)}
.mb-refresh .meter{width:100%;margin-top:4px}
.mb-refresh .meter i{width:100%}
.mb-refresh .meter i.run{animation:mb-drain 30s linear forwards}
@keyframes mb-drain{from{width:100%}to{width:0}}
.mb-id{display:flex;align-items:center;gap:14px;text-align:start}
.mb-id .t-h2{color:var(--text-hi)}
.mb-id img.av{object-fit:cover}
.mb-logo{overflow:hidden;border-radius:18px;background:none}
.mb-logo>svg,.mb-logo>img{width:100%;height:100%}

/* ---- notifications ---- */
.mb-notes{border-top:1px solid var(--line)}
.mb-note{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;color:inherit;text-decoration:none}
.mb-note .dot{align-self:center;grid-row:1}
.mb-note b{font-size:15.5px;color:var(--text-hi)}
.mb-note.read b{font-weight:500;color:var(--text)}
.mb-note time{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mb-note p{grid-column:2/-1;font-size:13.5px;color:var(--muted);line-height:1.4}
.mb-push-box{display:grid;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}

/* ---- session: the focus view ---- */
body.chrome-focus>main{min-height:100dvh}
.fx{flex:1;display:flex;flex-direction:column;min-height:0}
.fx-head{position:sticky;top:0;z-index:9;background:var(--page);padding-top:8px}
.fx-name{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:none;border:0;color:inherit;font:inherit;text-align:start;cursor:pointer;border-radius:8px}
.fx-name>svg.ic{color:var(--muted);width:18px;height:18px;flex:none}
.fx-name .mb-tt{min-width:0}
.fx-name .mb-h{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-name small{display:block;font-size:12.5px;color:var(--muted)}
.fx-session{flex:1;display:flex;flex-direction:column}
.fx-ex{flex:1;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));grid-template-rows:minmax(300px,1fr) auto;align-content:start;gap:10px 8px;padding:14px 14px 18px}
.fx-ex>.fx-tap,.fx-ex>.fx-adj,.fx-ex>.fx-note{grid-column:1/-1}
.fx-tap{border:1.5px dashed var(--line-2);border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;position:relative;padding:20px 12px 52px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.fx-tap:active{background:var(--panel)}
.fx-tap.fx-static .t-say{max-width:24em}
.fx-big{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap}
.fx-v1{font-size:clamp(64px,26vw,104px)}
.fx-v2:empty,.fx-last:empty{display:none}
.fx-last{font-size:15px;color:var(--accent-2)}
.fx-tap .meter{width:70%;height:6px;border-radius:3px;margin-top:4px}
.fx-tap .meter i{transition:width .25s linear}
.fx-hint{position:absolute;bottom:16px;left:12px;right:12px;font-size:13px;color:var(--muted);display:flex;justify-content:center;gap:6px;align-items:center}
.fx-hint svg.ic{width:18px;height:18px}
.fx-tap.fx-over{border-style:solid;border-color:var(--line)}
.fx-adj{display:flex;gap:10px;flex-wrap:wrap}
.fx-adj[hidden]{display:none}
.fx-step{direction:ltr;padding:0 4px;font-size:15px;min-width:140px}
.fx-step button{width:44px;height:44px;border-radius:10px;border:0;background:transparent;color:var(--text-2);display:grid;place-items:center;cursor:pointer;flex:none}
.fx-step button:active{background:var(--raised)}
.fx-step button svg{width:18px;height:18px}
.fx-step b{font-size:20px;white-space:nowrap}
.fx-undo{flex-basis:100%}
/* the set strip: .set-row elements are the chips (inputs and button.done stay in the DOM for workout.js) */
.fx-ex>.set-row{position:relative;height:44px;border-radius:10px;border:1px solid var(--line-2);display:flex;align-items:stretch;min-width:0}
.fx-ex>.set-row .fx-chip{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:3px;padding:0 4px;background:none;border:0;border-radius:inherit;color:var(--muted);font:500 12.5px/1 inherit;font-family:inherit;white-space:nowrap;overflow:hidden;cursor:pointer;font-variant-numeric:tabular-nums}
.fx-ex>.set-row .fx-chip svg{width:12px;height:12px;flex:none}
.fx-ex>.set-row input,.fx-ex>.set-row button.done{position:absolute;width:1px;height:1px;padding:0;margin:-1px;opacity:0;overflow:hidden;clip:rect(0,0,0,0);border:0;pointer-events:none}
.fx-ex>.set-row.on{background:var(--panel);border-color:transparent}
.fx-ex>.set-row.on .fx-chip{color:var(--text)}
.fx-ex>.set-row.on .fx-chip svg{color:var(--ok)}
.fx-ex>.set-row.fx-cur{border-color:var(--live);border-width:1.5px}
.fx-ex>.set-row.fx-cur .fx-chip{color:var(--text-hi);font-weight:600}
.fx-ex>.set-row.fx-queued{background:var(--panel);border-style:dashed}
.fx-ex>.set-row.saving{opacity:.6}
.fx-ex>.set-row.error:not(.fx-queued){grid-column:1/-1;height:auto;flex-direction:column;border-color:var(--bad)}
.fx-ex>.set-row.error:not(.fx-queued) .fx-chip{height:40px;flex:none}
.set-feedback{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--bad);padding:0 10px 10px;text-align:start}
.set-feedback span{flex-basis:100%}
.set-feedback button{height:36px;padding:0 12px;border-radius:8px;border:1.5px solid var(--line-2);background:transparent;color:var(--text);font:600 13.5px inherit;font-family:inherit;cursor:pointer}
.fx-queued .set-feedback{display:none}
.fx-draft{padding:0 22px 12px;min-height:0}
.fx-draft:empty{display:none}
/* rest: covers the tap zone, leaves the set strip visible */
.fx-rest{position:fixed;left:0;right:0;top:calc(64px + env(safe-area-inset-top,0px));bottom:calc(66px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;z-index:8;background:var(--page);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 22px;text-align:center}
.fx-rest .mb-ringbox{display:flex;flex-direction:column;align-items:center;padding:6px 0 76px}
.fx-rest .ring{width:min(240px,34dvh);height:min(240px,34dvh)}
.fx-rest .ring .mark{width:64px;height:64px;display:grid;place-items:center;overflow:hidden;border-radius:16px}
.fx-rest .ring .mark>*{width:100%;height:100%}
.fx-rest .mb-row{width:100%;max-width:420px;margin-top:10px}
.mb-ring-bg{fill:none;stroke:var(--line);stroke-width:8}
.mb-ring-fg{fill:none;stroke:var(--live);stroke-width:8;stroke-linecap:round;transition:stroke-dasharray 1s linear}
.fx-jn{display:flex;align-items:center;gap:8px}
.r.fx-now .fx-jn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live);flex:none}
.r.fx-now .fx-jn{font-weight:600;color:var(--text-hi)}

/* small screens */
@media (max-width:359px){
  .m-head .pill span{display:none}
  .m-head .pill{width:44px;padding:0;justify-content:center}
  .fx-step{min-width:0;flex:1 1 100%}
  .mb-code{gap:5px}
}
@media (min-width:700px){
  .fx-rest{top:calc(64px + env(safe-area-inset-top,0px))}
}
.fx-help{display:grid;gap:14px}
.rows:not(:has(.r)){display:none}