/* Playground. */
/* =====================================================================
   PLAYGROUND: run the whole floor from one screen
   ===================================================================== */
:root{--plg-bar:73px}
/* phones: room at the end for the tab bar and the finish bar, so the last card and Add exercise never sit under them,
   and a focused field scrolls clear of both */
@media (max-width:899px){
  .scr.plg,.app:has(>.nav:not(.sub)) .scr.plg{padding-bottom:calc(var(--nav-h) + var(--safe-b) + var(--s-6))}
  .scr.plg:has(.plg-bar-b),.app:has(>.nav:not(.sub)) .scr.plg:has(.plg-bar-b){padding-bottom:calc(var(--nav-h) + var(--safe-b) + var(--plg-bar) + var(--s-4))}
  html:has(.stk:not(.off) .plg-bar-b){scroll-padding-bottom:calc(var(--nav-h) + var(--safe-b) + var(--plg-bar) + var(--s-2))}
  body:has(.stk:not(.off) .plg-bar-b) .toasts{bottom:calc(var(--nav-h) + var(--safe-b) + var(--plg-bar) + var(--s-3) + var(--kb,0px))}
}
.scr.plg>.top{padding-inline-end:0;align-items:flex-end}
.scr.plg>.top>.row-actions{flex-wrap:nowrap;flex-shrink:0}
.scr.plg>.top .h1{font-size:var(--fs-5)}
/* the floor HUD */
.card.plg-hud{width:100%;gap:var(--s-3);padding:var(--s-3) var(--s-4);border:0;text-align:start;cursor:pointer;transition:transform var(--t-1) var(--ease-out)}
.card.plg-hud:active{transform:scale(.99)}
.plg-hud-r{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.plg-hud-n{font-size:var(--fs-2);color:var(--on-navy-2)}
.plg-hud-n 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);color:var(--on-navy);font-variant-numeric:tabular-nums}
.plg-hbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-1)}
.plg-hbar i{display:block;height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);overflow:hidden}
.plg-hbar i b{display:block;width:100%;height:100%;border-radius:inherit;background:var(--navy-accent);transform-origin:left center;transform:scaleX(var(--p,0));transition:transform var(--t-3) var(--ease-out)}
[dir=rtl] .plg-hbar i b{transform-origin:right center}
.plg-hud-f{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-1) var(--s-3);font-size:var(--fs-1);color:var(--on-navy-2)}
.plg-hud-f span{display:inline-flex;align-items:center;gap:var(--s-1)}
.plg-hud-f svg{color:var(--navy-accent)}
/* who is on the floor: avatar + progress ring */
.plg-chips{display:flex;gap:var(--s-3);margin-inline:calc(-1 * var(--gutter));padding:var(--s-1) var(--gutter) var(--s-2);overflow-x:auto;-webkit-overflow-scrolling:touch}
.plg-chips::-webkit-scrollbar{display:none}
.plg-chip{flex:none;display:flex;flex-direction:column;align-items:center;gap:var(--s-1);min-width:60px;padding:2px;border:0;background:none;color:var(--ink-3);font-size:var(--fs-1);font-weight:var(--fw-2);transition:color var(--t-1)}
.plg-chip.on{color:var(--ink)}
.plg-ring{border-radius:50%;transition:transform var(--t-1) var(--ease-out),box-shadow var(--t-2)}
.plg-ring .trk{stroke:var(--fill-2)}
.plg-ring .val{stroke:var(--accent)}
.plg-chip:active .plg-ring{transform:scale(.94)}
.plg-chip.on .plg-ring{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.plg-chip.done .plg-ring .val{stroke:var(--ok-fill)}
.plg-ck{position:absolute;z-index:2;inset-inline-end:-3px;bottom:-2px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ok-fill);color:#FFFFFF;box-shadow:0 0 0 2px var(--bg);font-style:normal}
.plg-cn{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the focused client */
.plg-card{display:flex;flex-direction:column;gap:var(--s-3);animation:xb-screen var(--t-2) var(--ease-out) backwards}
.card.plg-head{gap:var(--s-3);padding:var(--s-4)}
.plg-nm{display:block;font-size:var(--fs-4);font-weight:var(--fw-2);letter-spacing:var(--tr-t);line-height:var(--lh-t)}
.plg-mid{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.plg-mid .plg-prog{flex:1 1 160px;min-width:0}
.plg-prog{display:flex;flex-direction:column;gap:var(--s-2)}
.plg-pt{display:flex;align-items:baseline;gap:var(--s-1)}
.plg-pt 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}
.plg-pt .mute{margin-inline-end:auto}
.plg-vol{display:inline-flex;align-items:center;gap:var(--s-1);margin-inline-start:var(--s-3);font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.plg-vol.rec{color:var(--accent-ink)}
.plg-hr{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.plg-plan,.plg-hn{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--h-ctl-s);max-width:100%;padding:0 var(--s-3);border:0;border-radius:var(--r-pill);background:var(--fill);color:var(--ink-2);font-size:var(--fs-2);font-weight:var(--fw-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color var(--t-1),transform var(--t-1) var(--ease-out)}
.plg-plan:active,.plg-hn:active{transform:scale(.97)}
.plg-hn{background:var(--warn-soft);color:var(--warn)}
.plg-hn.on{box-shadow:inset 0 0 0 1.5px var(--warn-fill)}
.plg-rest{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-3);border-radius:var(--r-2);background:var(--accent-soft)}
.plg-rt{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-2);color:var(--accent-ink)}
.plg-rt 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);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.plg-rest .btn-sm{background:var(--surface)}
.card.plg-empty{gap:var(--s-3)}
/* exercises */
.card.plg-ex{gap:0;padding:0;overflow:hidden;transition:box-shadow var(--t-2)}
.card.plg-ex.open{box-shadow:inset 0 0 0 1.5px var(--accent-line)}
.plg-exh{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:60px;padding:var(--s-2) var(--s-4);border:0;background:none;color:var(--ink);text-align:start}
.plg-exn{display:block;font-size:var(--fs-3);font-weight:var(--fw-2)}
.plg-ex.all .plg-exn{color:var(--ink-3)}
.plg-ex.all .lg-cnt{background:var(--ok-soft);color:var(--ok)}
.plg-sets{display:flex;flex-direction:column;gap:var(--s-2);padding:0 var(--s-3) var(--s-3);animation:xb-fade var(--t-2) var(--ease-out)}
.plg-cols,.plg-set{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) var(--tap);gap:var(--s-2);align-items:center}
.plg-cols.one,.plg-set.one{grid-template-columns:28px minmax(0,1fr) var(--tap)}
.plg-cols{font-size:var(--fs-1);font-weight:var(--fw-2);letter-spacing:var(--tr-l);text-transform:uppercase;text-align:center;color:var(--ink-3)}
[dir=rtl] .plg-cols{text-transform:none}
.plg-n{display:grid;place-items:center;font-size:var(--fs-2);font-weight:var(--fw-2);color:var(--ink-3);font-variant-numeric:tabular-nums}
.plg-set.pr .plg-n{color:var(--accent-ink)}
.plg-set .plg-st{display:flex;align-items:center;min-width:0;height:var(--tap);border-radius:var(--r-2);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden;direction:ltr;transition:background-color var(--t-2),box-shadow var(--t-2)}
.plg-set .plg-st button{flex:none;display:grid;place-items:center;width:36px;height:100%;padding:0;border:0;background:transparent;color:var(--ink-2);font-size:var(--fs-4);font-weight:var(--fw-1);line-height:1;transition:background-color var(--t-1)}
.plg-u{display:none;flex:none;font-size:var(--fs-1);font-weight:var(--fw-2);color:var(--ink-3);text-transform:uppercase}
[dir=rtl] .plg-u{text-transform:none}
.plg-set .plg-st button:active{background:var(--fill)}
.plg-set .plg-st input{flex:1;width:100%;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--ink);font-size:var(--fs-3);font-weight:var(--fw-2);text-align:center;font-variant-numeric:tabular-nums}
.plg-set .plg-st:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.plg-set.done .plg-st{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.plg-set.pr .plg-st{box-shadow:inset 0 0 0 2px var(--accent)}
.plg-set .tick{width:var(--tap);height:var(--tap)}
.plg-exf{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding-top:2px}
.plg-exf .link{min-height:var(--tap)}
/* touch: 44px targets. On phones the set row tightens so the weight still fits between − and +;
   on the narrowest phones each set takes two lines, weight above reps, with one tall tick */
@media (pointer:coarse){
  .plg-plan,.plg-hn{min-height:var(--tap)}
  .plg-set .plg-st button{width:var(--tap)}
}
@media (pointer:coarse) and (max-width:479px){
  .plg-sets{padding-inline:var(--s-2)}
  .plg-cols,.plg-set{grid-template-columns:16px minmax(0,1fr) minmax(0,1fr) var(--tap);gap:var(--s-1)}
  .plg-cols.one,.plg-set.one{grid-template-columns:16px minmax(0,1fr) var(--tap)}
}
@media (pointer:coarse) and (max-width:374px){
  .plg-sets{gap:var(--s-3)}
  .plg-cols{display:none}
  .plg-set,.plg-set.one{grid-template-columns:16px minmax(0,1fr) var(--tap);grid-template-areas:"n a t" "n b t";row-gap:var(--s-1)}
  .plg-set.one{grid-template-areas:"n b t"}
  .plg-set>.plg-n{grid-area:n}.plg-set>.plg-st{grid-area:a}.plg-set>.plg-st.b{grid-area:b}.plg-set>.tick{grid-area:t;height:100%}
  .plg-u{display:block;padding-inline-start:var(--s-1)}
}
/* finish bar: thumb reach, above the tab bar and the keyboard */
.plg-bar-b{position:fixed;z-index:var(--z-float);inset-inline:0;bottom:calc(var(--nav-h) + var(--safe-b) + var(--kb,0px));display:flex;align-items:center;gap:var(--s-2);max-width:640px;margin-inline:auto;padding:var(--s-3) var(--gutter);background:var(--bg);border-top:1px solid var(--line)}
.plg-bar-b .icon-btn{flex:none;width:var(--h-ctl);height:var(--h-ctl);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2)}
.plg-bar-b .icon-btn:disabled{opacity:.35}
[dir=rtl] .plg-bar-b .icon-btn svg{transform:scaleX(-1)}
.plg-fin{flex:1;min-width:0}
/* empty floor */
.card.plg-start{gap:var(--s-3);width:100%;padding:var(--s-5)}
.plg-here .row-a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plg-start .plg-here{margin-block:var(--s-1)}
.plg-start .plg-here .row{gap:var(--s-3)}
.plg-start>.link{align-self:center}
.plg-start .btn{width:100%}
@media (min-width:900px){.plg-start .btn{width:auto;align-self:flex-start}}
.plg-clr{align-self:center}
/* done card */
.card.plg-done{gap:var(--s-3)}
.plg-done .ok{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ok-fill);color:#FFFFFF}
.plg-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.plg-two .btn{padding-inline:var(--s-3)}
@media (max-width:479px){.plg-two{grid-template-columns:1fr}}
@media (min-width:900px){.plg-two{grid-template-columns:repeat(2,minmax(0,240px))}}
/* add sheet and floor board */
.plg-addl{max-height:44vh;overflow:auto;overscroll-behavior:contain}
.plg-addr{cursor:pointer}
.plg-addr.dis{opacity:.55}
.plg-addr .tick{flex:none;width:28px;height:28px}
.plg-pl .row{min-height:64px}
.plg-pr.on .row-a{color:var(--accent-ink)}
.plg-none{display:block;padding:var(--s-4)}
.plg-bt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.plg-bt>div{display:flex;flex-direction:column;gap:2px;padding:0 var(--s-3)}
.plg-bt>div:first-child{padding-inline-start:0}
.plg-bt>div+div{border-inline-start:1px solid var(--line)}
.plg-bt 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.05;font-variant-numeric:tabular-nums}
.plg-bt span{font-size:var(--fs-2);color:var(--ink-3)}
.plg-br .row-t{gap:var(--s-2)}
.plg-bn{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.plg-bn b{font-size:var(--fs-3)}
.plg-rc{display:inline-flex;align-items:center;gap:2px;color:var(--accent-ink);font-size:var(--fs-1);font-weight:var(--fw-2)}
.plg-medal{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--fill);color:var(--ink-2);font-size:var(--fs-1);font-weight:var(--fw-2);font-variant-numeric:tabular-nums}
.plg-medal.m1{background:var(--accent);color:var(--on-accent)}
.plg-medal.m2,.plg-medal.m3{background:var(--accent-soft);color:var(--accent-ink)}
/* desktop: the floor on the left, the focused client on the right */
@media (min-width:1100px){
  .app>.stk>.scr.plg{max-width:var(--page-max);display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start;column-gap:var(--s-6);padding-bottom:var(--s-7)}
  .scr.plg>*{grid-column:1/-1}
  .scr.plg>.plg-hud{grid-column:1;grid-row:2}
  .scr.plg>.plg-chips{grid-column:1;grid-row:3;flex-direction:column;align-items:stretch;gap:var(--s-1);margin:0;padding:0;overflow:visible}
  .scr.plg>.plg-card{grid-column:2;grid-row:2/span 30}
  .scr.plg>.plg-clr{grid-column:1;grid-row:4;justify-self:start}
  .scr.plg .plg-chip{flex-direction:row;justify-content:flex-start;gap:var(--s-3);min-height:60px;padding:var(--s-1) var(--s-3);border-radius:var(--r-2);font-size:var(--fs-2);text-align:start}
  .scr.plg .plg-chip.on{background:var(--surface)}
  .scr.plg .plg-chip .plg-cn{max-width:none}
  .scr.plg .plg-chip.on .plg-ring{box-shadow:none}
}
@media (min-width:900px){.plg-bar-b{position:sticky;bottom:0;max-width:none;margin:0 calc(-1 * var(--s-1));padding-inline:var(--s-1);border-top:0}}
/* trainees tab: the list first, the day and the flags beside it on desktop */
.tr-th .th-main,.tr-th .th-side{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.tl-m i.tl-ms{color:var(--accent-ink);font-weight:var(--fw-2)}
.th-main>.more-row{align-self:center}
@media (min-width:1100px){
  .app>.stk>.scr.tr-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.tr-th.wide>*{grid-column:1/-1}
  .scr.tr-th.wide>.th-main{grid-column:1}
  .scr.tr-th.wide>.th-side{grid-column:2;position:sticky;top:var(--s-6)}
}
/* desktop: the steppers keep a compact width, the minus and plus stay next to the number */
@media (min-width:900px){
  .plg-cols,.plg-set{grid-template-columns:28px repeat(2,minmax(0,200px)) var(--tap)}
  .plg-cols.one,.plg-set.one{grid-template-columns:28px minmax(0,200px) var(--tap)}
  .plg-set>.tick{justify-self:start}
}
/* phones: the floor summary shrinks to one line and the trainee header tightens, so the first set row shows above the finish bar */
@media (max-width:479px){
  .card.plg-hud{gap:var(--s-2);padding:var(--s-2) var(--s-3)}
  .plg-hud-f{display:none}
  .plg-chips{padding-block:0 var(--s-1)}
  .card.plg-head{gap:var(--s-2);padding:var(--s-3)}
  .plg-mid .plg-prog{flex-basis:120px}
}
/* phones and tablets: "Checked in today" comes right after the title, above the day's sessions, so its Add buttons are in reach */
@media (max-width:1099px){
  .scr.tr-th:not(.plg)>.th-main,.scr.tr-th:not(.plg)>.th-side{display:contents}
  .scr.tr-th:not(.plg)>*,.scr.tr-th:not(.plg)>:is(.th-main,.th-side)>*{order:2}
  .scr.tr-th:not(.plg)>.th-top{order:0}
  .scr.tr-th:not(.plg) .tt-ci{order:1}
}
.tt-ci:empty{display:none}
/* desktop: when the side column has nothing to show (no check-ins yet), the trainees take the full width */
@media (min-width:1100px){.app>.stk>.scr.tr-th.wide:has(>.th-side:not(:has(>:not(.tt-ci:empty)))){grid-template-columns:minmax(0,1fr)}}