/* Apple layer. Loading screen and loaders work on every device; the Apple look (html.apple) only on iPhone, iPad and Mac. */

/* ---------- opening screen: the three sports, tap an icon ---------- */
#cs{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:var(--bg,#0d1319);color:var(--ink,#e6edf3);transition:opacity .5s ease,transform .5s ease;
  padding:env(safe-area-inset-top) 24px env(safe-area-inset-bottom)}
#cs.out{opacity:0;transform:scale(1.05);pointer-events:none}
#cs .cs-logo{width:76px;height:76px;animation:cs-in .7s cubic-bezier(.2,.9,.3,1.2) both}
#cs .cs-name{font:700 15px/1 -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;letter-spacing:.34em;margin-right:-.34em;opacity:.9;animation:cs-in .7s .1s both}
#cs .cs-row{display:flex;gap:16px;margin-top:6px}
#cs .cs-i{width:64px;height:64px;border-radius:20px;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;
  -webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.3,1.6,.5,1);animation:cs-in .6s backwards}      /* backwards, not both: a finished animation must not keep holding the transform, or the press effect would not show */
#cs .cs-i:nth-child(1){background:#0085ca;animation-delay:.2s}
#cs .cs-i:nth-child(2){background:#009f3d;animation-delay:.3s}
#cs .cs-i:nth-child(3){background:#e4002b;animation-delay:.4s}
#cs .cs-i svg{width:34px;height:34px;overflow:visible}
#cs .cs-i:active{transform:scale(.88)}
#cs .cs-i.pop{animation:cs-pop .55s cubic-bezier(.3,1.5,.5,1)}
#cs .cs-i .mv{transform-box:fill-box;transform-origin:center;animation:cs-idle 2.4s ease-in-out infinite}
#cs .cs-i:nth-child(2) .mv{animation-name:cs-spin;animation-duration:2.8s;animation-timing-function:linear}
#cs .cs-i:nth-child(3) .mv{animation-name:cs-run;animation-duration:1s;animation-timing-function:ease-in-out}
#cs .cs-i .rl1,#cs .cs-i .rl2,#cs .cs-i .ra1,#cs .cs-i .ra2{transform-box:view-box;animation:cs-swing .5s ease-in-out infinite alternate}
#cs .cs-i .rl1{transform-origin:10.6px 14px}
#cs .cs-i .rl2{transform-origin:10.6px 14px;animation-direction:alternate-reverse}
#cs .cs-i .ra1{transform-origin:12.8px 9.4px;animation-direction:alternate-reverse}
#cs .cs-i .ra2{transform-origin:12.8px 9.4px}
@keyframes cs-swing{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
#cs .cs-bar{width:140px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink,#e6edf3) 14%,transparent);overflow:hidden;margin-top:6px}
#cs .cs-bar::before{content:"";display:block;height:100%;width:40%;border-radius:2px;background:linear-gradient(90deg,#0085ca,#009f3d,#e4002b);animation:cs-bar 1.3s ease-in-out infinite}
@keyframes cs-in{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes cs-pop{0%{transform:scale(1)}35%{transform:scale(1.22) rotate(-5deg)}70%{transform:scale(.95) rotate(3deg)}100%{transform:scale(1)}}
@keyframes cs-idle{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@keyframes cs-spin{to{transform:rotate(360deg)}}
@keyframes cs-run{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes cs-bar{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}

/* ---------- small loader, used wherever the app says Loading… ---------- */
.clw{display:inline-flex;align-items:center;gap:10px}
.cl{display:inline-flex;gap:4px;align-items:flex-end;height:16px}
.cl i{width:5px;border-radius:3px;height:6px;animation:cl-b 1s ease-in-out infinite}
.cl i:nth-child(1){background:#0085ca}
.cl i:nth-child(2){background:#009f3d;animation-delay:.15s}
.cl i:nth-child(3){background:#e4002b;animation-delay:.3s}
@keyframes cl-b{0%,100%{height:6px;opacity:.6}50%{height:16px;opacity:1}}

/* ---------- Apple look: only on Apple devices ---------- */
html.apple{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html.apple body,html.apple button,html.apple input,html.apple select,html.apple textarea{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif}
html.apple .h{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",system-ui,sans-serif;font-weight:700;letter-spacing:-.022em}
html.apple h1.h.big,html.apple .ahero h1{letter-spacing:-.03em;font-weight:800}
html.apple .card{border-radius:20px;border-color:color-mix(in srgb,var(--line,#2a3542) 55%,transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.12)}
html.apple .btn,html.apple .ib,html.apple .slot{border-radius:14px}
html.apple .btn{font-weight:600;transition:transform .15s ease,filter .15s ease}
html.apple .btn:active,html.apple .ib:active,html.apple .day:active,html.apple .coachbtn:active{transform:scale(.97);filter:brightness(.95)}
html.apple .f input,html.apple .f select,html.apple .inp,html.apple .pw input,html.apple textarea{border-radius:12px}
@media (pointer:coarse){html.apple input,html.apple select,html.apple textarea{font-size:max(16px,1em)}}      /* iPhone and iPad zoom into smaller text; a Mac does not need it */
html.apple .tabs{border-radius:14px;background:color-mix(in srgb,var(--surface,#151d26) 70%,transparent);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
html.apple .tabs button{transition:color .2s ease,border-color .2s ease}
html.apple .chip,html.apple .ra{border-radius:12px}
html.apple .tile{border-radius:16px}

/* bars: frosted glass like iOS */
html.apple #nav{background:color-mix(in srgb,var(--surface,#151d26) 74%,transparent);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-top:.5px solid color-mix(in srgb,var(--line,#2a3542) 80%,transparent);padding-bottom:max(env(safe-area-inset-bottom),6px)}
html.apple #nav button{transition:transform .2s cubic-bezier(.3,1.5,.5,1),color .2s ease}
html.apple #nav button:active{transform:scale(.9)}
html.apple #nav button[aria-current]{font-weight:600}
html.apple #nav button[aria-current] .ic{animation:ap-tab .4s cubic-bezier(.3,1.6,.5,1)}
html.apple .hdr{-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px)}
html.apple #side{-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);background:color-mix(in srgb,var(--surface,#151d26) 80%,transparent)}
html.apple #side .sb-nav button{border-radius:10px;transition:background .15s ease}

/* sheets and dialogs: big radius, soft entrance */
html.apple dialog{border-radius:24px;border-color:transparent;box-shadow:0 20px 60px rgba(0,0,0,.4)}
html.apple dialog:not(.sheet){animation:ap-sheet .35s cubic-bezier(.2,.9,.3,1)}      /* centered dialogs fade and settle; a bottom .sheet slides up from its own height (ux.css) */
html.apple dialog::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.apple #toast{border-radius:16px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html.apple main>section:not([hidden]){animation:ap-page .35s ease backwards}
@keyframes ap-tab{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes ap-sheet{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ap-page{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  #cs *,#cs,.cl i,html.apple main>section:not([hidden]),html.apple #nav button[aria-current] .ic{animation:none!important;transition:none!important}
  html.apple dialog:not(.sheet){animation:ap-fade .2s ease}      /* gentler, not none: no movement, the fade stays */
}
@keyframes ap-fade{from{opacity:0}}