/* ShredRoster prototype: the shared motion system's CSS (pairs with /assets/motion.js).
   Loaded by every app page: the coach, athlete and gym demos, the picker, /login, /demo/pieces
   and the placeholders. Motion only: no colours, sizes, spacing or layout change here.

   Desktop hover, one calm feel everywhere: cards, tiles, rows and sidebar items lift 2 to 3px,
   the border glows softly in the current tone and the shadow deepens, over 250ms.
   Buttons press to 98%. Phone: an iOS press (a slight scale down and back) on everything tappable.
   Reduced motion (the system setting, or html.srm-rm from the Design pieces toggle): nothing
   moves; hover only changes the border. */
html.srm{--srm-e:cubic-bezier(.2,.8,.2,1);--srm-t:.25s}
html.srm .dv,html.srm .desk,html.srm .ph .scr{--srm-tone:var(--gold)}
html.srm .pv .scr{--srm-tone:var(--acc)}
/* the pages' own first-load entrances give way to the shared one */
html.srm .rise{animation:none}

/* ---------------- hover targets, one list for all three demos ---------------- */
html.srm :is(.mscroll .lg, .mscroll .lrow, .mscroll .task-row, .mscroll .tbl tbody tr, .mscroll .prow, .mscroll .ccard, .mscroll .pkday, .mscroll .qturn, .mscroll .divc,
  .side .nav a, .side .side-foot a, .pk-box, .pick .card){
  transition:transform var(--srm-t) var(--srm-e),box-shadow var(--srm-t) var(--srm-e),border-color var(--srm-t) var(--srm-e),background-color .18s ease,color .18s ease,opacity .25s ease}
/* the coach demo's sidebar item, the same on the athlete and gym sides: ink hover, gold active pill, icon nudge */
html.srm body .side :is(.nav a, .side-foot a) .ico{transition:transform var(--srm-t) var(--srm-e)}

/* the border warms to the tone on every hover, with or without motion */
@media (hover:hover){
  html.srm :is(.mscroll .lg, .mscroll .ccard, .mscroll .pkday, .mscroll .qturn, .mscroll .divc, .pk-box, .pick .card):hover{border-color:color-mix(in srgb,var(--srm-tone,#e8b73c) 55%,transparent)}
  html.srm.srm-rm :is(.mscroll .lrow, .mscroll .task-row, .mscroll .tbl tbody tr, .mscroll .prow, .side .nav a, .side .side-foot a):hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--srm-tone,#e8b73c) 38%,transparent)}
}
@media (hover:hover) and (prefers-reduced-motion:reduce){
  html.srm :is(.mscroll .lrow, .mscroll .task-row, .mscroll .tbl tbody tr, .mscroll .prow, .side .nav a, .side .side-foot a):hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--srm-tone,#e8b73c) 38%,transparent)}
}
/* reduced motion: no hover lifts anywhere, including the pages' own older lifts (the coach's tiles) */
@media (hover:hover) and (prefers-reduced-motion:reduce){
  html.srm :is(.mscroll .lg, .mscroll .ccard, .mscroll .pkday, .mscroll .qturn, .mscroll .divc, .mscroll .lrow, .mscroll .task-row, .mscroll .tbl tbody tr, .mscroll .prow, .side .nav a, .side .side-foot a, .pk-box, .pick .card):hover,
  html.srm body .side :is(.nav a, .side-foot a):hover .ico{transform:none}
}
@media (hover:hover){
  html.srm.srm-rm :is(.mscroll .lg, .mscroll .ccard, .mscroll .pkday, .mscroll .qturn, .mscroll .divc, .mscroll .lrow, .mscroll .task-row, .mscroll .tbl tbody tr, .mscroll .prow, .side .nav a, .side .side-foot a, .pk-box, .pick .card):hover,
  html.srm.srm-rm body .side :is(.nav a, .side-foot a):hover .ico{transform:none}
}
/* lift, glow and a deeper shadow, only when motion is allowed */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html.srm:not(.srm-rm) :is(.mscroll .lg, .mscroll .ccard, .mscroll .pkday, .mscroll .qturn, .mscroll .divc, .pk-box, .pick .card):hover{
    transform:translateY(-3px);
    box-shadow:0 22px 46px -16px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--srm-tone,#e8b73c) 32%,transparent),0 0 24px -6px color-mix(in srgb,var(--srm-tone,#e8b73c) 45%,transparent),inset 0 1px 0 var(--glow,rgba(255,255,255,.4))}
  html.srm:not(.srm-rm) :is(.mscroll .lrow, .mscroll .task-row, .mscroll .tbl tbody tr, .mscroll .prow):hover{
    transform:translateY(-2px);
    box-shadow:0 0 0 1px color-mix(in srgb,var(--srm-tone,#e8b73c) 38%,transparent),0 12px 26px -14px rgba(0,0,0,.4),0 0 18px -8px color-mix(in srgb,var(--srm-tone,#e8b73c) 50%,transparent)}
  html.srm:not(.srm-rm) body .side :is(.nav a, .side-foot a):hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--srm-tone,#e8b73c) 30%,transparent),0 10px 22px -12px rgba(0,0,0,.35)}
  html.srm:not(.srm-rm) body .side :is(.nav a, .side-foot a).on:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--srm-tone,#e8b73c) 60%,transparent),0 14px 30px -10px rgba(0,0,0,.36),0 0 22px -6px color-mix(in srgb,var(--srm-tone,#e8b73c) 55%,transparent)}
  html.srm:not(.srm-rm) body .side :is(.nav a, .side-foot a):hover .ico{transform:scale(1.08)}
}

/* ---------------- press ---------------- */
html.srm :is(.btn, .xbtn, .chip, .ibtn, .prof, .aibtn, .side-col, .opt, .seg button, .seg2 button, .mattach, .msendb, .okdone, .pbtn, .tgl, .pk-btn, .gymtag){
  transition:transform .12s var(--srm-e),background-color .18s ease,color .18s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease}
html.srm :is(.pv .scr, .ph .scr) :is(a, button, .row, .ptile, .cin, .tile, .mcell, .gi, .mi, .wd, .cmc, .act, .pc){transition:transform .16s var(--srm-e),background-color .18s ease,color .18s ease,opacity .2s ease}
@media (prefers-reduced-motion:no-preference){
  html.srm:not(.srm-rm) :is(.btn, .xbtn, .chip, .ibtn, .prof, .aibtn, .side-col, .opt, .seg button, .seg2 button, .mattach, .msendb, .okdone, .pbtn, .tgl, .pk-btn, .gymtag):active{transform:scale(.98)}
  /* phone: everything tappable presses in and springs back */
  html.srm:not(.srm-rm) :is(.pv .scr, .ph .scr) :is(a, button, .row, .ptile, .cin, .tile, .mcell, .gi, .mi, .wd, .cmc, .act, .pc):active{transform:scale(.97)}
}

/* =====================================================================================
   MOTION V2: edges and light (pairs with the v2 entrance in motion.js)
   One light source, top left. A box's edge is a hairline tinted with the tone, brighter at the top
   left like real glass catching light. On landing, a thin line of tone light sweeps once around the
   edge. On desktop hover the edge glows brightest where the cursor is and follows it; it fades back
   over 300ms. On the phone a tap lights the edge where it lands. One accent only: the tone.
   ===================================================================================== */
@property --srm-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --srm-s{syntax:'<number>';inherits:false;initial-value:0}
@property --srm-h{syntax:'<number>';inherits:false;initial-value:0}
html.srm{
  /* the hairline on dark cards: bright top left, tinted with the tone, quiet elsewhere */
  --srm-hl1:color-mix(in srgb,var(--srm-tone,#e8b73c) 52%,rgba(255,255,255,.55));
  --srm-hl2:color-mix(in srgb,var(--srm-tone,#e8b73c) 16%,transparent);
  --srm-hl3:color-mix(in srgb,var(--srm-tone,#e8b73c) 7%,transparent)}
/* on white cards (Daylight, Obsidian) the light reads darker, so the hairline is the tone itself, softer */
html.srm :is(.theme[data-ct="white"], .scr[data-ct="white"], .desk[data-ct="white"]){
  --srm-hl1:color-mix(in srgb,var(--srm-tone,#e8b73c) 62%,transparent);
  --srm-hl2:color-mix(in srgb,var(--srm-tone,#e8b73c) 20%,transparent);
  --srm-hl3:color-mix(in srgb,var(--srm-tone,#e8b73c) 9%,transparent)}
html.srm :is(.mscroll .lg, .pv .scr .c, .pv .scr .ptile, .pv .scr .hero, .pv .scr .cin, .pv .scr .meal, .pv .scr .plan, .pv .scr .s3, .pv .scr .ccard, .ph .scr .lg, .ph .scr .ptile, .ph .scr .pc, .pv .scr .grp, .ph .scr .grp){position:relative}
html.srm :is(.mscroll .lg, .pv .scr .c, .pv .scr .ptile, .pv .scr .hero, .pv .scr .cin, .pv .scr .meal, .pv .scr .plan, .pv .scr .s3, .pv .scr .ccard, .ph .scr .lg, .ph .scr .ptile, .ph .scr .pc, .pv .scr .grp, .ph .scr .grp)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:
    radial-gradient(170px circle at var(--mx,30%) var(--my,0%),color-mix(in srgb,var(--srm-tone,#e8b73c) calc(var(--srm-h) * 100%),transparent),transparent 70%),
    conic-gradient(from var(--srm-a),transparent 0deg 286deg,color-mix(in srgb,var(--srm-tone,#e8b73c) calc(var(--srm-s) * 100%),transparent) 338deg,color-mix(in srgb,#fff calc(var(--srm-s) * 65%),transparent) 352deg,transparent 360deg),
    linear-gradient(135deg,var(--srm-hl1) 0%,var(--srm-hl2) 34%,var(--srm-hl3) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:--srm-h .3s cubic-bezier(.2,.8,.2,1)}
/* desktop hover: the edge glows in the tone, brightest nearest the cursor */
@media (hover:hover){
  html.srm :is(.mscroll .lg, .pv .scr .c, .pv .scr .ptile, .pv .scr .hero, .pv .scr .cin, .pv .scr .meal, .pv .scr .plan, .pv .scr .s3, .pv .scr .ccard, .ph .scr .lg, .ph .scr .ptile, .ph .scr .pc, .pv .scr .grp, .ph .scr .grp):hover::after{--srm-h:1;transition-duration:.18s}
  /* the light near the cursor leads, so the even border tint underneath stays faint */
  html.srm :is(.mscroll .lg):hover{border-color:color-mix(in srgb,var(--srm-tone,#e8b73c) 20%,transparent)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html.srm:not(.srm-rm) :is(.mscroll .lg):hover{
    box-shadow:0 22px 46px -16px rgba(0,0,0,.38),0 0 22px -10px color-mix(in srgb,var(--srm-tone,#e8b73c) 32%,transparent),inset 0 1px 0 var(--glow,rgba(255,255,255,.4))}
}
/* the phone: a tap brightens the edge with the press */
html.srm :is(.pv .scr, .ph .scr) :is(.c, .ptile, .hero, .cin, .meal, .plan, .s3, .ccard, .lg, .pc, .grp):active::after{--srm-h:.9;transition-duration:.08s}
/* the count-up holds its width so nothing beside it moves */
html.srm .srm-num{font-variant-numeric:tabular-nums}
/* icons: on hover they nudge up 2px and brighten with the edge */
html.srm :is(.stat-ic, .ic, .cinic) svg{transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s ease,color .25s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html.srm:not(.srm-rm) :is(.mscroll .lg, .mscroll .lrow):hover :is(.stat-ic, .ic) svg{transform:translateY(-2px);filter:brightness(1.3)}
}

/* =====================================================================================
   STEP 9: nav icons each play their own move once, on desktop hover and on a phone press
   (motion.js adds .ia to the nav item for the length of the move). Off with reduced motion.
   Part names come from /assets/icons.js (class="i-...").
   ===================================================================================== */
html.srm svg :is(g, path, rect, circle, line, polyline)[class*="i-"]{transform-box:fill-box;transform-origin:center}
html.srm svg :is(.i-arm){transform-box:view-box;transform-origin:4px 21px}
html.srm svg :is(.i-gear, .i-pill){transform-box:view-box;transform-origin:12px 12px}
html.srm svg :is(.i-fork, .i-knife, .i-drop, .i-house){transform-origin:50% 100%}
html.srm svg .i-q1{--dx:-1.3px;--dy:-1.3px}
html.srm svg .i-q2{--dx:1.3px;--dy:-1.3px}
html.srm svg .i-q3{--dx:-1.3px;--dy:1.3px}
html.srm svg .i-q4{--dx:1.3px;--dy:1.3px}
@media (prefers-reduced-motion:no-preference){
  html.srm:not(.srm-rm) .ia{--ie:cubic-bezier(.2,.9,.25,1)}
  /* Dashboard: the four squares shift out and settle, in reading order */
  html.srm:not(.srm-rm) .ia :is(.i-q1, .i-q2, .i-q3, .i-q4){animation:iaShift .5s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-q2{animation-delay:.07s}
  html.srm:not(.srm-rm) .ia .i-q3{animation-delay:.14s}
  html.srm:not(.srm-rm) .ia .i-q4{animation-delay:.21s}
  /* Athletes: the front figure steps forward, the one behind follows */
  html.srm:not(.srm-rm) .ia .i-f1{animation:iaStep .6s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-f2{animation:iaJoin .6s var(--ie) .12s both}
  /* Check-ins: the shutter blinks */
  html.srm:not(.srm-rm) .ia .i-lens{animation:iaShutter .55s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-cam{animation:iaPress .55s var(--ie) both}
  /* Nutrition: fork and knife tilt apart */
  html.srm:not(.srm-rm) .ia .i-fork{animation:iaTiltL .7s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-knife{animation:iaTiltR .7s var(--ie) both}
  /* Training: the dumbbell lifts */
  html.srm:not(.srm-rm) .ia .i-db{animation:iaLift .7s var(--ie) both}
  /* Peak week: the line climbs to the peak, then the check pops */
  html.srm:not(.srm-rm) .ia .i-climb{animation:iaClimb .45s cubic-bezier(.4,0,.2,1) both}
  html.srm:not(.srm-rm) .ia .i-tick{animation:iaPop .4s var(--ie) .4s both}
  /* Posing: the biceps flexes */
  html.srm:not(.srm-rm) .ia .i-arm{animation:iaFlex .75s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-bulge{animation:iaBulge .75s var(--ie) both}
  /* Messages: typing dots run inside the bubble */
  html.srm:not(.srm-rm) .ia .i-dot{animation:iaType .62s ease-in-out both}
  html.srm:not(.srm-rm) .ia .i-d2{animation-delay:.1s}
  html.srm:not(.srm-rm) .ia .i-d3{animation-delay:.2s}
  /* Calendar: the page flips down */
  html.srm:not(.srm-rm) .ia .i-cal{animation:iaCal .7s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-page{animation:iaFlip .6s cubic-bezier(.5,0,.3,1) both}
  /* Billing: the dollar turns like a coin and lands bright */
  html.srm:not(.srm-rm) .ia .i-coin{animation:iaTurn .7s var(--ie) both}
  /* Forms: the lines write down the page */
  html.srm:not(.srm-rm) .ia .i-ln1{animation:iaWrite1 .36s cubic-bezier(.4,0,.2,1) both}
  html.srm:not(.srm-rm) .ia .i-ln2{animation:iaWrite2 .3s cubic-bezier(.4,0,.2,1) .26s both}
  /* Settings: the gear turns an eighth twice (its eight teeth land where they started) */
  html.srm:not(.srm-rm) .ia .i-gear{animation:iaSpin .8s var(--ie) both}
  /* AI: a quick sparkle */
  html.srm:not(.srm-rm) .ia .i-star{animation:iaSpark .6s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-star2{animation:iaTwinkle .55s var(--ie) .14s both}
  /* Home: the roof lifts and settles */
  html.srm:not(.srm-rm) .ia .i-roof{animation:iaRoof .6s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-house{animation:iaSquash .6s var(--ie) both}
  /* Cardio: the heart beats twice as the pulse line draws */
  html.srm:not(.srm-rm) .ia .i-heart{animation:iaBeat .75s ease-out both}
  html.srm:not(.srm-rm) .ia .i-pulse{animation:iaPulse .55s cubic-bezier(.4,0,.2,1) .05s both}
  /* Supplements: the capsule rolls */
  html.srm:not(.srm-rm) .ia .i-pill{animation:iaRoll .7s var(--ie) both}
  /* Blood work: the drop falls and lands */
  html.srm:not(.srm-rm) .ia .i-drop{animation:iaDrip .65s var(--ie) both}
  /* Athletes (one), Coaches: a nod */
  html.srm:not(.srm-rm) .ia .i-head{animation:iaNod .55s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-body{animation:iaSquash .55s var(--ie) both}
  /* Access requests, Team and roles: the check draws */
  html.srm:not(.srm-rm) .ia .i-ck{animation:iaCheck .42s cubic-bezier(.4,0,.2,1) .08s both}
  html.srm:not(.srm-rm) .ia .i-shield{animation:iaPulseS .6s var(--ie) both}
  /* Plan and seats: the card tilts, the stripe slides in */
  html.srm:not(.srm-rm) .ia .i-card{animation:iaTilt .65s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-stripe{animation:iaSlide .45s var(--ie) .12s both}
  /* More: the three dots hop */
  html.srm:not(.srm-rm) .ia :is(.i-m1, .i-m2, .i-m3){animation:iaHop .45s var(--ie) both}
  html.srm:not(.srm-rm) .ia .i-m2{animation-delay:.08s}
  html.srm:not(.srm-rm) .ia .i-m3{animation-delay:.16s}
}
@keyframes iaShift{35%{transform:translate(var(--dx),var(--dy)) scale(.8)}70%{transform:translate(calc(var(--dx) * -.2),calc(var(--dy) * -.2)) scale(1.05)}}
@keyframes iaStep{40%{transform:translate(-1.2px,-1px) scale(1.08)}}
@keyframes iaJoin{0%{opacity:.15;transform:translateX(3px)}60%{opacity:1;transform:translateX(-.5px)}}
@keyframes iaShutter{30%{transform:scale(.12)}58%{transform:scale(1.16)}}
@keyframes iaPress{30%{transform:translateY(.6px) scale(.96)}}
@keyframes iaTiltL{45%{transform:rotate(-15deg)}75%{transform:rotate(3deg)}}
@keyframes iaTiltR{45%{transform:rotate(15deg)}75%{transform:rotate(-3deg)}}
@keyframes iaLift{40%{transform:translateY(-3px) rotate(-8deg)}68%{transform:translateY(.6px) rotate(2deg)}}
@keyframes iaClimb{from{stroke-dasharray:9.4;stroke-dashoffset:9.4}to{stroke-dasharray:9.4;stroke-dashoffset:0}}
@keyframes iaPop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.3)}}
@keyframes iaFlex{45%{transform:rotate(-10deg) scale(1.06)}}
@keyframes iaBulge{45%{transform:scale(1.3)}}
@keyframes iaType{0%{opacity:0}15%{opacity:1;transform:none}40%{transform:translateY(-1.8px)}65%{opacity:1;transform:none}100%{opacity:0}}
@keyframes iaCal{30%{transform:translateY(-.8px)}60%{transform:translateY(.4px)}}
@keyframes iaFlip{0%{opacity:1;transform:none}75%{opacity:.9;transform:translateY(8.6px) scaleX(.82)}100%{opacity:0;transform:translateY(10.4px) scaleX(.7)}}
@keyframes iaTurn{35%{transform:scaleX(.1)}62%{transform:scaleX(1)}80%{transform:scale(1.12)}}
@keyframes iaWrite1{from{stroke-dasharray:6.8;stroke-dashoffset:6.8}to{stroke-dasharray:6.8;stroke-dashoffset:0}}
@keyframes iaWrite2{from{stroke-dasharray:4.6;stroke-dashoffset:4.6}to{stroke-dasharray:4.6;stroke-dashoffset:0}}
@keyframes iaSpin{from{transform:rotate(0)}to{transform:rotate(90deg)}}
@keyframes iaSpark{35%{transform:scale(.72) rotate(-18deg)}68%{transform:scale(1.14) rotate(6deg)}}
@keyframes iaTwinkle{0%{opacity:.2;transform:scale(.2)}55%{opacity:1;transform:scale(1.5) rotate(45deg)}}
@keyframes iaRoof{40%{transform:translateY(-2px)}70%{transform:translateY(.4px)}}
@keyframes iaSquash{40%{transform:scaleY(.94)}70%{transform:scaleY(1.02)}}
@keyframes iaBeat{15%{transform:scale(1.14)}30%{transform:scale(.98)}45%{transform:scale(1.1)}65%{transform:none}}
@keyframes iaPulse{from{stroke-dasharray:22.4;stroke-dashoffset:22.4}to{stroke-dasharray:22.4;stroke-dashoffset:0}}
@keyframes iaRoll{40%{transform:rotate(-30deg)}70%{transform:rotate(8deg)}}
@keyframes iaDrip{35%{transform:translateY(-2px) scale(.94,1.06)}62%{transform:translateY(.8px) scale(1.1,.9)}}
@keyframes iaNod{40%{transform:translateY(-1.5px)}70%{transform:translateY(.3px)}}
@keyframes iaCheck{from{stroke-dasharray:9;stroke-dashoffset:9}to{stroke-dasharray:9;stroke-dashoffset:0}}
@keyframes iaPulseS{40%{transform:scale(1.08)}}
@keyframes iaTilt{40%{transform:rotate(-8deg) translateY(-1px)}70%{transform:rotate(2deg)}}
@keyframes iaSlide{from{opacity:0;transform:translateX(-3px)}}
@keyframes iaHop{40%{transform:translateY(-2.2px)}}
/* =====================================================================================
   STEP 9: the sidebar's edge button (coach, athlete and gym desktop). A small round glass button
   on the sidebar's right edge, level with the logo, half in and half out. Its chevron points the way
   the sidebar will go; the width and the chevron turn together over 300ms.
   ===================================================================================== */
html.srm .desk > .side-col{position:absolute;z-index:32;top:30px;left:250px;width:28px;height:28px;padding:0;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);border:1px solid var(--edge);background:var(--card);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.45),inset 0 1px 0 var(--glow);cursor:pointer;
  transition:left .3s cubic-bezier(.16,1,.3,1),color .2s ease,border-color .25s ease,box-shadow .25s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
html.srm .desk > .side-col::after{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--srm-hl1),var(--srm-hl2) 40%,var(--srm-hl3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.srm .desk > .side-col .ico{width:14px;height:14px;stroke-width:2.1;transition:transform .3s cubic-bezier(.16,1,.3,1)}
html.srm .desk.collapsed > .side-col{left:70px}
html.srm .desk.collapsed > .side-col .ico{transform:rotate(180deg)}
@media (hover:hover){
  html.srm .desk > .side-col:hover{color:var(--ink);border-color:color-mix(in srgb,var(--srm-tone,#e8b73c) 45%,transparent);
    box-shadow:0 6px 16px -6px rgba(0,0,0,.45),0 0 14px -4px color-mix(in srgb,var(--srm-tone,#e8b73c) 55%,transparent),inset 0 1px 0 var(--glow)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html.srm:not(.srm-rm) .desk > .side-col:hover{transform:translateX(-2px)}
  html.srm:not(.srm-rm) .desk.collapsed > .side-col:hover{transform:translateX(2px)}
}
/* reduced motion: the sidebar simply changes width */
@media (prefers-reduced-motion:reduce){
  html.srm .desk, html.srm .desk > .side-col, html.srm .desk > .side-col .ico{transition:none}
}
html.srm.srm-rm .desk, html.srm.srm-rm .desk > .side-col, html.srm.srm-rm .desk > .side-col .ico{transition:none}
/* =====================================================================================
   STEP 9: round icon chips. The small icon boxes inside tiles and cards (stat tiles, list rows,
   notifications, the gym's lock and payment chips) are perfect circles, same size, same edge and the
   same draw-in. Design pieces can show them square for comparison (html[data-chip="square"], that page only).
   ===================================================================================== */
html.srm:not([data-chip="square"]) :is(.stat-ic, .lrow .ic, .pnl .ic, .cinD .ic, .row .ic, .nic, .lock-ic, #stage .mth, .vmini){border-radius:50%}
/* STEP 9: smoothness. Boxes below the fold wait, hidden, until they scroll into view (motion.js) */
@media (prefers-reduced-motion:no-preference){
  html.srm:not(.srm-rm) .srm-below{opacity:0}
}
/* STEP 10: rings fill from zero with the shared entrance (motion.js), never on a redraw, so the
   blueprint's own on-render ring animation is off */
html.srm .ring .arc{animation:none}
/* STEP 10: content under the top bar. Once a screen is scrolled, its content fades out over 18px just
   below the top bar, so nothing shows cut off behind the search bar, bell or Ask AI. At rest nothing
   changes. On the gym phone the bar floats over the scroll, so the fade starts at the bar's bottom edge. */
html.srm #main.srm-scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent var(--srm-ft,0px),#000 calc(var(--srm-ft,0px) + 18px));
  mask-image:linear-gradient(to bottom,transparent var(--srm-ft,0px),#000 calc(var(--srm-ft,0px) + 18px))}
html.srm .ph .scr #main{--srm-ft:106px}