/* Shells: member app, overlays, toasts, tour, gym portal. */
/* =====================================================================
   SHELLS: the member app (phone tab bar / desktop sidebar), overlays,
   toasts, the tour, and the gym portal.
   ===================================================================== */

/* ---------- member app ---------- */
.app{position:relative;max-width:640px;min-height:100vh;min-height:100dvh;margin:0 auto;background:var(--bg)}
.scr{display:flex;flex-direction:column;gap:var(--s-4);padding:calc(var(--safe-t) + var(--s-4)) var(--gutter) calc(var(--s-6) + var(--safe-b));animation:xb-screen var(--t-3) var(--ease-out) backwards}
.app:has(>.nav:not(.sub)) .scr{padding-bottom:calc(var(--nav-h) + var(--safe-b) + var(--s-6))}
.app.has-mb .scr{padding-top:var(--s-4)}
.scr.pb-bar,.scr.pb-bar2{padding-bottom:0}
.scr>.lab{margin-top:var(--s-2)}
@keyframes xb-screen{from{opacity:0;transform:translateY(8px)}}
/* pages of a navigation stack: the top one is laid out as if the wrapper were not there; the ones under it
   stay mounted (state, scroll) but take no space and are not drawn */
.stk{display:contents}
.stk.off{display:block;position:absolute;top:0;left:0;width:100%;height:0;overflow:hidden;visibility:hidden;content-visibility:hidden;pointer-events:none}
/* rows of a list arrive in a short cascade (the first six, 20ms apart) when they first appear */
.list>*{animation:xb-row-in var(--t-3) var(--ease-out) backwards}
.list>:nth-child(2){animation-delay:20ms}.list>:nth-child(3){animation-delay:40ms}.list>:nth-child(4){animation-delay:60ms}.list>:nth-child(5){animation-delay:80ms}.list>:nth-child(n+6){animation-delay:100ms}
@keyframes xb-row-in{from{opacity:0;transform:translateY(4px)}}
.modebar{display:block;padding:var(--s-1) var(--gutter);background:var(--navy);color:var(--on-navy-2);font-size:var(--fs-1);font-weight:var(--fw-2);text-align:center;letter-spacing:var(--tr-l);text-transform:uppercase;padding-top:calc(var(--safe-t) + var(--s-1))}
[dir=rtl] .modebar{text-transform:none}
/* wordmark */
.xb-mark{display:flex;align-items:center;gap:var(--s-2);min-height:var(--tap)}
.xb-mark b,.brand{font-family:'Archivo',var(--font-d);font-variation-settings:'wdth' 62;font-stretch:62%;font-weight:var(--fw-3);font-size:var(--fs-5);letter-spacing:.06em;line-height:1;color:var(--ink);text-transform:uppercase}
.xb-mark i{width:10px;height:10px;border-radius:2px;background:var(--accent);transform:skewX(-14deg)}
/* header actions (notifications, gym pass) */
.bell{position:absolute;z-index:calc(var(--z-sticky) + 1);top:calc(var(--safe-t) + var(--s-4));inset-inline-end:var(--gutter);display:flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--r-2);background:var(--surface);color:var(--ink);transition:transform var(--t-1) var(--ease-out)}
.bell:active{transform:scale(.94)}
.app.has-mb .bell{top:calc(var(--safe-t) + var(--s-4) + 24px)}
.bell.qr-top{inset-inline-end:calc(var(--gutter) + var(--tap) + var(--s-2))}
.bell i{position:absolute;top:-4px;inset-inline-end:-4px;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:var(--fs-1);font-weight:var(--fw-2);font-style:normal;box-shadow:0 0 0 2px var(--bg)}
/* tab bar */
.nav{position:fixed;z-index:var(--z-nav);left:0;right:0;bottom:0;display:flex;max-width:640px;margin:0 auto;padding:var(--s-1) var(--s-1) calc(var(--s-1) + var(--safe-b));background:var(--surface);border-top:1px solid var(--line)}
.nav.sub{display:none}
.nav-brand{display:none}
.nav button{position:relative;flex:1 1 0;min-width:min-content;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:var(--s-1) 2px;border:0;border-radius:var(--r-2);background:none;color:var(--ink-3);font-size:var(--fs-1);font-weight:var(--fw-2);line-height:var(--lh-t);transition:color var(--t-2)}
.nav button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav button.on{color:var(--accent-ink)}
.nav button:active .nav-ic{transform:scale(.88)}
.nav-ic{position:relative;display:grid;place-items:center;width:28px;height:28px;transition:transform var(--t-1) var(--ease-out)}
.nav-ic svg{grid-area:1/1;transition:opacity var(--t-2) var(--ease-out),transform var(--t-2) var(--ease-out)}
.nav-ic .ic-f{opacity:0;transform:scale(.8)}
.nav button.on .nav-ic .ic-o{opacity:0}
.nav button.on .nav-ic .ic-f{opacity:1;transform:none}
.nav .dot{position:absolute;top:6px;inset-inline-end:calc(50% - 18px);width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
/* floating action button and fixed bottom bars sit above the tab bar and the keyboard */
.fab{position:fixed;z-index:var(--z-float);bottom:calc(var(--nav-h) + var(--safe-b) + var(--s-4) + var(--kb,0px));inset-inline-end:max(var(--gutter),calc(50% - 320px + var(--gutter)));display:flex;align-items:center;gap:var(--s-2);min-height:var(--h-ctl);padding:0 var(--s-5);border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-weight:var(--fw-2);box-shadow:var(--elev-1);transition:transform var(--t-1) var(--ease-out)}
.fab:active{transform:scale(.96)}
.bar-bottom{position:sticky;z-index:var(--z-sticky);bottom:var(--kb,0px);display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-2) calc(-1 * var(--gutter)) 0;padding:var(--s-3) var(--gutter) calc(var(--s-3) + var(--safe-b));background:var(--bg);border-top:1px solid var(--line)}
/* the coach's AI button on phones */
.ai-fab{position:fixed;z-index:var(--z-float);inset-inline-end:var(--s-5);bottom:var(--s-5);display:flex;align-items:center;gap:var(--s-2);min-height:var(--h-ctl);padding:0 var(--s-4) 0 var(--s-3);border:0;border-radius:var(--r-pill);background:var(--navy);color:var(--on-navy);font-size:var(--fs-2);font-weight:var(--fw-2);box-shadow:var(--elev-1);transition:transform var(--t-1) var(--ease-out)}
.ai-fab:active{transform:scale(.96)}
.ai-fab svg{color:var(--navy-accent)}
.ai-fab.mini{inset-inline-end:max(var(--gutter),calc(50% - 320px + var(--gutter)));bottom:calc(var(--nav-h) + var(--safe-b) + var(--s-4));min-height:var(--tap);padding:0 var(--s-3)}
.ai-fab.mini.raise{bottom:calc(var(--nav-h) + var(--safe-b) + var(--s-4) + 56px)}

/* tablet: the bars span the window, the page keeps a 640 px reading column in the middle */
@media (min-width:600px) and (max-width:899px){
  .app{max-width:none}
  .app>.nav{max-width:none;padding-inline:max(var(--s-1),calc((100% - 640px) / 2))}
  .app>.stk>.scr,.app>.stk>.tv-bar{max-width:640px;margin-inline:auto}
  .bell{inset-inline-end:calc((100% - 640px) / 2 + var(--gutter))}
  .bell.qr-top{inset-inline-end:calc((100% - 640px) / 2 + var(--gutter) + var(--tap) + var(--s-2))}
}
/* desktop: the tab bar becomes a sidebar, content gets real width */
@media (min-width:900px){
  .app{max-width:none}
  .app:has(>.nav){padding-inline-start:var(--side-w)}
  .app>.modebar{padding-top:var(--s-1)}
  .app>.nav,.app>.nav.sub{position:fixed;top:0;bottom:0;inset-inline-start:0;right:auto;display:flex;flex-direction:column;gap:2px;width:var(--side-w);max-width:none;height:100vh;height:100dvh;margin:0;padding:var(--s-5) var(--s-3);border-top:0;border-inline-end:1px solid var(--line);overflow-y:auto}
  [dir=rtl] .app>.nav,[dir=rtl] .app>.nav.sub{left:auto;right:0}
  .nav-brand{display:flex;padding:0 var(--s-3) var(--s-5)}
  .nav button{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:var(--s-3);min-height:var(--tap);padding:0 var(--s-3);font-size:var(--fs-2);color:var(--ink-2)}
  .nav button.on{background:var(--accent-soft);color:var(--accent-ink)}
  .nav-ic{width:24px;height:24px}
  .nav .dot{top:50%;margin-top:-4px;inset-inline-end:var(--s-3)}

  .app>.stk>.scr{width:100%;max-width:var(--read-max);margin:0 auto;padding:var(--s-6) var(--s-6) var(--s-7)}
  .app>.stk>.scr.wide{max-width:var(--page-max)}
  .app:has(>.nav:not(.sub)) .scr{padding-bottom:var(--s-7)}
  .scr>.xb-mark{display:none}
  /* the bell and QR line up with the end edge of the page content, not the window */
  .bell{top:var(--s-6);inset-inline-end:max(var(--s-6),calc((100% - var(--side-w) - var(--page-max)) / 2 + var(--s-6)))}
  .app.has-mb .bell{top:calc(var(--s-6) + 24px)}
  .bell.qr-top{inset-inline-end:calc(max(var(--s-6),calc((100% - var(--side-w) - var(--page-max)) / 2 + var(--s-6))) + var(--tap) + var(--s-2))}
  .fab,.ai-fab.mini{bottom:var(--s-5);inset-inline-end:var(--s-6)}
  .ai-fab.mini.raise{bottom:calc(var(--s-5) + 56px)}
  /* the rule above the bar spans the content column, not the gutters */
  .bar-bottom{margin-inline:calc(-1 * var(--s-6));padding-inline:var(--s-6);border-top:0;background:linear-gradient(var(--line),var(--line)) top center / calc(100% - 2 * var(--s-6)) 1px no-repeat,var(--bg)}
}
/* hover only where there is a mouse */
@media (hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled){background:var(--blue-600)}
  .btn.sec:hover:not(:disabled),.btn-sm:hover:not(:disabled):not(.go),.icon-btn:hover:not(:disabled){background:var(--fill-2)}
  .btn.light:hover:not(:disabled){background:var(--on-navy-2)}
  .btn.dashed:hover:not(:disabled){background:var(--accent-soft)}
  .btn-sm.go:hover:not(:disabled),.btn-pill:hover:not(:disabled){background:var(--blue-600)}
  .icon-btn.sm:hover:not(:disabled){background:var(--fill);color:var(--ink)}
  .link:hover{text-decoration:underline;text-underline-offset:3px}
  .info:hover:not(.on){color:var(--ink-2)}
  .chip:hover:not(.on):not(.static){background:var(--fill-2)}
  button.row:hover,.card.tap:hover,button.card:hover{background:var(--surface-2)}
  .card.dark.tap:hover,button.card.dark:hover{background:var(--navy-2)}
  .seg>button:hover:not(.on){color:var(--ink)}
  .utabs button:hover:not(.on){color:var(--ink-2)}
  .nav button:hover:not(.on){color:var(--ink)}
  .tbl tbody tr:hover td{background:var(--surface-2)}
  .back:hover{opacity:.75}
}
/* ---------- overlays: sheets (phone) and dialogs (desktop) ---------- */
.overlay{position:fixed;inset:0;z-index:var(--z-over);display:flex;align-items:flex-end;justify-content:center;background:var(--scrim);overscroll-behavior:contain;animation:xb-fade var(--t-3) var(--ease-out) both}
.overlay.center{align-items:center;padding:var(--s-4)}
.overlay.is-out{animation:xb-fade-out var(--t-x3) var(--ease-in) both;pointer-events:none}
.overlay+.overlay{z-index:calc(var(--z-over) + 2)}
@keyframes xb-fade{from{opacity:0}}
@keyframes xb-fade-out{to{opacity:0}}
.sheet,.modal{position:relative;display:flex;flex-direction:column;width:100%;max-width:640px;max-height:calc(100dvh - var(--safe-t) - var(--s-4));border:1px solid var(--edge);border-radius:var(--r-3) var(--r-3) 0 0;background:var(--surface);color:var(--ink);box-shadow:var(--elev-2);overflow:hidden;animation:xb-sheet-in var(--t-3) var(--ease-out) both;touch-action:pan-y}
.overlay.is-out .sheet,.overlay.is-out .modal{animation:xb-sheet-out var(--t-x3) var(--ease-in) both}
.sheet.dragging,.modal.dragging{animation:none;transition:none}
.sheet.settle,.modal.settle{transition:transform var(--t-2) var(--ease-out)}
@keyframes xb-sheet-in{from{transform:translateY(100%)}}
@keyframes xb-sheet-out{to{transform:translateY(100%)}}
.sheet-hd{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-2) var(--s-4) var(--s-3);background:var(--surface);touch-action:none;cursor:grab}
.handle{align-self:center;width:36px;height:5px;border-radius:var(--r-pill);background:var(--line-2)}
.sheet-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--tap)}
.sheet-h .h2{flex:1;min-width:0}
.sheet-x{flex-shrink:0}
.sheet-bd{display:flex;flex-direction:column;gap:var(--s-3);padding:0 var(--s-4) calc(var(--s-5) + var(--safe-b) + var(--kb,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0}
.modal-actions{position:sticky;bottom:calc(-1 * (var(--s-5) + var(--safe-b) + var(--kb,0px)));z-index:2;display:flex;gap:var(--s-2);margin:var(--s-2) calc(-1 * var(--s-4)) calc(-1 * (var(--s-5) + var(--safe-b) + var(--kb,0px)));padding:var(--s-3) var(--s-4) calc(var(--s-4) + var(--safe-b) + var(--kb,0px));background:var(--surface);border-top:1px solid var(--line)}
.modal-actions .btn{flex:1}
@media (min-width:768px){
  .overlay{align-items:center;padding:var(--s-5)}
  .sheet,.modal{max-width:560px;max-height:min(88dvh,880px);border-radius:var(--r-3);animation:xb-pop-in var(--t-3) var(--ease-out) both}
  .modal.wide{max-width:880px}
  .overlay .sheet:has(.arr-grid){max-width:760px}
  .overlay.is-out .sheet,.overlay.is-out .modal{animation:xb-pop-out var(--t-x3) var(--ease-in) both}
  .sheet-hd{padding-top:var(--s-4);cursor:default}
  .sheet-hd .handle{display:none}
  .sheet-bd{padding-bottom:var(--s-5)}
  .modal-actions{bottom:calc(-1 * var(--s-5));margin-bottom:calc(-1 * var(--s-5));padding-bottom:var(--s-4)}
}
@keyframes xb-pop-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes xb-pop-out{to{opacity:0;transform:translateY(8px) scale(.98)}}
html.xb-lock,html.xb-lock body{overflow:hidden}

/* ---------- toasts: above dialogs and the tab bar ---------- */
.toasts{position:fixed;z-index:var(--z-toast);left:0;right:0;bottom:calc(var(--nav-h) + var(--safe-b) + var(--s-3) + var(--kb,0px));display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:0 var(--gutter);pointer-events:none}
body:has(.app>.nav.sub) .toasts,body:has(.gym) .toasts,body:has(.overlay) .toasts{bottom:calc(var(--safe-b) + var(--s-5) + var(--kb,0px))}
@media (min-width:900px){.toasts{bottom:var(--s-5)}}
.toast{display:flex;align-items:center;gap:var(--s-2);max-width:440px;padding:var(--s-3) var(--s-4);border-radius:var(--r-2);background:var(--ink);color:var(--surface);font-size:var(--fs-2);font-weight:var(--fw-2);line-height:var(--lh-t);box-shadow:var(--elev-2);pointer-events:auto;animation:xb-toast-in var(--t-2) var(--ease-out) both}
.toast.out{animation:xb-toast-out var(--t-x2) var(--ease-in) both}
.toast.warn{background:var(--bad-fill);color:#FFFFFF}
.toast svg{flex-shrink:0;color:var(--blue-300)}
@keyframes xb-toast-in{from{opacity:0;transform:translateY(12px)}}
@keyframes xb-toast-out{to{opacity:0;transform:translateY(6px)}}

/* ---------- info popover ---------- */
.info{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;margin-inline-start:var(--s-1);padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-4);vertical-align:middle;transition:color var(--t-1)}
.info svg{display:block}
.info::after{content:'';position:absolute;left:50%;top:50%;width:var(--tap);height:var(--tap);transform:translate(-50%,-50%)}
.info.on{color:var(--accent-ink)}
.info-pop{position:fixed;z-index:var(--z-pop);max-width:280px;padding:var(--s-3);border-radius:var(--r-2);background:var(--ink);color:var(--surface);font-size:var(--fs-2);font-weight:var(--fw-1);line-height:var(--lh-b);letter-spacing:0;text-transform:none;text-align:start;box-shadow:var(--elev-2);animation:xb-toast-in var(--t-2) var(--ease-out) both}
.info-b{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-6px;border:0;border-radius:50%;background:none;color:var(--ink-3)}
.info-btn{width:28px;height:28px;border-radius:50%;border:0;background:var(--fill);color:var(--ink-3);font-weight:var(--fw-2);font-size:var(--fs-1)}

/* ---------- guided tour ---------- */
.tour{position:fixed;inset:0;z-index:var(--z-tour);pointer-events:none}
.tour-dim{position:fixed;inset:0;background:var(--scrim);pointer-events:auto;animation:xb-fade var(--t-2) var(--ease-out) both}
.tour-spot{position:fixed;border-radius:var(--r-2);box-shadow:0 0 0 9999px var(--scrim),0 0 0 3px var(--accent);transition:left var(--t-3) var(--ease-out),top var(--t-3) var(--ease-out),width var(--t-3) var(--ease-out),height var(--t-3) var(--ease-out);pointer-events:none}
.tour-card{position:fixed;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);border:1px solid var(--edge);border-radius:var(--r-3);background:var(--surface);color:var(--ink);box-shadow:var(--elev-2);pointer-events:auto;animation:xb-pop-in var(--t-2) var(--ease-out) both}
.tour-card.up{transform:translateY(-100%);animation:none}
.tour-t{font-size:var(--fs-3);font-weight:var(--fw-2)}
.tour-b{margin:0;font-size:var(--fs-2);color:var(--ink-2);line-height:var(--lh-b)}
.tour-dots{display:flex;gap:var(--s-1);flex-wrap:wrap}.tour-dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:transform var(--t-2) var(--ease-out),background-color var(--t-2)}.tour-dots i.done{background:var(--blue-300)}.tour-dots i.on{background:var(--accent);transform:scaleX(2);margin:0 3px}
.tour-act{display:flex;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-1)}
.tour-prompt{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-3);background:var(--surface);font-size:var(--fs-2)}
.tour-prompt svg{color:var(--accent-ink);flex-shrink:0}
.app .tour-prompt{position:fixed;z-index:var(--z-float);left:var(--gutter);right:var(--gutter);bottom:calc(var(--nav-h) + var(--safe-b) + var(--s-3));max-width:608px;margin:0 auto;box-shadow:var(--elev-2);border:1px solid var(--edge);animation:xb-toast-in var(--t-3) var(--ease-out) both}
.app:has(.tour-prompt) .fab{bottom:calc(var(--nav-h) + var(--safe-b) + 96px)}
.app:has(.tour-prompt) .scr{padding-bottom:calc(var(--nav-h) + var(--safe-b) + 120px)}
@media (min-width:900px){.app .tour-prompt{left:calc(var(--side-w) + var(--s-6));right:var(--s-6);bottom:var(--s-5);max-width:640px}}

/* ---------- gym portal: a professional desktop tool ---------- */
.gym{display:flex;min-height:100vh;min-height:100dvh;background:var(--bg)}
.gym aside{position:sticky;top:0;flex-shrink:0;display:flex;flex-direction:column;gap:var(--s-5);width:var(--side-w);height:100vh;height:100dvh;padding:var(--s-5) var(--s-3) var(--s-4);background:var(--surface);border-inline-end:1px solid var(--line);overflow-y:auto;scrollbar-width:thin}
.aside-head{display:flex;flex-direction:column;gap:2px;padding:0 var(--s-3)}
.aside-head .brand{font-size:var(--fs-4)}
.aside-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.gb-close{display:none}
.mute-l{font-size:var(--fs-2);color:var(--ink-3)}
.role-tag{font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3)}
.gym aside nav{display:flex;flex-direction:column;gap:var(--s-4)}
.nav-grp{display:flex;flex-direction:column;gap:2px}
.nav-t{padding:0 var(--s-3) var(--s-1)}
.gym aside nav button{position:relative;display:flex;align-items:center;gap:var(--s-3);min-height:36px;padding:0 var(--s-3);border:0;border-radius:var(--r-2);background:none;color:var(--ink-2);font-size:var(--fs-2);font-weight:var(--fw-2);text-align:start;transition:background-color var(--t-1),color var(--t-1)}
.gym aside nav button svg{color:var(--ink-3);width:18px;height:18px}
.gym aside nav button.on{background:var(--accent-soft);color:var(--accent-ink)}
.gym aside nav button.on svg{color:var(--accent-ink)}
.gym aside nav button .nl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-c{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--fill);color:var(--ink-2);font-size:var(--fs-1);font-weight:var(--fw-2);font-style:normal}
.gym aside nav button.on .nav-c{background:var(--accent);color:var(--on-accent)}
.aside-foot{display:flex;flex-direction:column;gap:var(--s-2);margin-top:auto;padding:var(--s-3) var(--s-1) 0;border-top:1px solid var(--line)}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.nav-edit{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--h-ctl-s);padding:0 var(--s-3);border:0;border-radius:var(--r-2);background:var(--fill);color:var(--ink-2);font-size:var(--fs-2);font-weight:var(--fw-2);white-space:nowrap}
.foot-row .nav-edit{flex:1}
.foot-row .nav-edit.tut{flex:0 0 auto;width:var(--h-ctl-s);padding:0}
.lang-sw{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r-2);background:var(--fill)}
.lang-sw button{min-height:32px;text-align:center;padding:0 var(--s-3);border:0;border-radius:10px;background:transparent;color:var(--ink-3);font-size:var(--fs-2);font-weight:var(--fw-2)}
.lang-sw button.on{background:var(--surface);color:var(--ink)}
.lang-sw button[lang=ar]{font-family:'IBM Plex Sans Arabic',var(--font)}
.clock-btn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);min-height:var(--tap);padding:var(--s-2) var(--s-3);border:0;border-radius:var(--r-2);background:var(--fill);color:var(--ink);font-size:var(--fs-2);font-weight:var(--fw-2);text-align:start}
.clock-btn small{margin-inline-start:auto;font-size:var(--fs-1);color:var(--ink-3)}
.clock-btn.on{background:var(--ok-soft);color:var(--ok)}
.asrole{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3)}
.asrole select{min-height:var(--h-ctl-s);padding:0 var(--s-3);border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);color:var(--ink);font-size:var(--fs-2);font-weight:var(--fw-2)}
.as-exit{min-height:var(--tap);padding:0 var(--s-3);border:0;border-radius:var(--r-2);background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-2);font-weight:var(--fw-2);text-align:start}
.who-g{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);padding:var(--s-1) var(--s-2);border:0;border-radius:var(--r-2);background:none;color:var(--ink);text-align:start}
.who-g span{display:flex;flex-direction:column;min-width:0}.who-g b{font-size:var(--fs-2);font-weight:var(--fw-2)}.who-g small{font-size:var(--fs-1);color:var(--ink-3)}
.gym main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-5);width:100%;max-width:1440px;margin-inline:auto;padding:var(--s-6) var(--s-6) var(--s-7);animation:xb-screen var(--t-3) var(--ease-out) backwards}
.gym .h1{font-family:var(--font);font-variation-settings:normal;font-stretch:100%;text-transform:none;font-size:var(--fs-5);font-weight:var(--fw-2);letter-spacing:var(--tr-t);line-height:var(--lh-t)}
.gym .h2{font-size:var(--fs-4)}
.gtop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--s-4)}
.gtop>div:first-child{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.gtop>div:first-child .mute{font-size:var(--fs-2)}
.crumb{font-size:var(--fs-2);color:var(--ink-3)}
.gback{margin-bottom:calc(-1 * var(--s-3))}
.gym .card,.gym .needs{--cp:var(--s-5);padding:var(--cp)}
.gym .card.tight{padding:var(--s-3) var(--s-4)}
/* main column with a 340px side column; the side column drops below when the main one would get narrower than 560px */
.gsplit{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:stretch} /* cards side by side end on one line */
.gsplit>*{flex:1 1 340px;min-width:0}
.gsplit>:first-child{flex:999 1 560px}
/* two equal cards side by side, stacked once either would be narrower than 300px */
.g2.wide{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:stretch}
.g2.wide>*{flex:1 1 300px;min-width:0}
.gym-bar,.gym-scrim{display:none}
.gb-menu{position:relative;background:transparent}
.gb-menu .dot{position:absolute;top:8px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
@media (hover:hover) and (pointer:fine){
  .gym aside nav button:hover:not(.on){background:var(--fill);color:var(--ink)}
  .nav-edit:hover,.clock-btn:hover,.who-g:hover{background:var(--fill-2)}
  .lang-sw button:hover:not(.on){color:var(--ink)}
}
/* phones and tablets: a top bar, and the menu in a drawer */
@media (max-width:899px){
  .gym{flex-direction:column}
  .gym-bar{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;gap:var(--s-3);min-height:calc(56px + var(--safe-t));padding:var(--safe-t) var(--gutter) 0;background:var(--surface);border-bottom:1px solid var(--line)}
  .gym-bar .brand{font-size:var(--fs-3);color:var(--ink-3)}
  .gb-close{display:inline-flex}
  .gym-bar .gb-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-3);font-weight:var(--fw-2);color:var(--ink-2)}
  .gym aside{position:fixed;z-index:var(--z-over);top:0;bottom:0;inset-inline-start:0;width:min(320px,86vw);height:100dvh;padding-top:calc(var(--safe-t) + var(--s-4));padding-bottom:calc(var(--safe-b) + var(--s-4));box-shadow:var(--elev-2),inset 0 0 0 1px var(--edge);transform:translateX(-104%);transition:transform var(--t-x3) var(--ease-in),visibility 0s linear var(--t-x3);visibility:hidden}
  [dir=rtl] .gym aside{transform:translateX(104%)}
  .gym.nav-open aside{transform:none;visibility:visible;transition:transform var(--t-3) var(--ease-out),visibility 0s}
  .gym-scrim{position:fixed;inset:0;z-index:calc(var(--z-over) - 1);display:block;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--t-x3) var(--ease-in)}
  .gym.nav-open .gym-scrim{opacity:1;pointer-events:auto;transition:opacity var(--t-3) var(--ease-out)}
  .gym aside nav button{min-height:var(--tap)}
  .gym main{padding:var(--s-4) var(--gutter) calc(var(--s-7) + var(--safe-b))}
  .gym .card,.gym .needs{--cp:var(--s-4)}
  .gym .h1{font-size:var(--fs-4)}
}
/* the sidebar footer: appearance, language and units on one row, then feedback */
.foot-row.prefs{flex-wrap:nowrap}
.foot-row.prefs>*{flex:1}
.foot-row.prefs .th-sw{display:flex}
.foot-row.prefs .th-sw button{flex:1;height:36px;width:auto}
.foot-row.prefs .lang-sw button{flex:1}
.fb-side{width:100%;justify-content:flex-start}
/* pages outside the app shell (sign in, onboarding, privacy, terms): one centred column on desktop */
@media (min-width:900px){
  .app:not(:has(>.nav))>.scr{width:100%;max-width:var(--read-max);margin-inline:auto;padding-inline:var(--s-6)}
  .app:not(:has(>.nav))>.scr.signin{max-width:560px}
}
/* a page with a main and a side column on wide screens (trainer and trainee pages); one column, in order, on phones and tablets */
.dsplit,.dcol{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
@media (min-width:1100px){.dsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:var(--s-5)}}
/* a page with a bottom action bar: toasts sit above the bar, never over its buttons */
body:has(.stk:not(.off) .bar-bottom) .toasts{bottom:calc(var(--nav-h) + var(--safe-b) + 88px + var(--kb,0px))}
@media (min-width:900px){body:has(.stk:not(.off) .bar-bottom) .toasts{bottom:96px}}