/* Motion: crisp and calm — things arrive, they don't perform. Short (120–320ms), ease-out, and
   never in the way: nothing waits for an animation, and an element keeps no transform once it
   has arrived (a transform would make it the frame for the dialogs inside it). Anyone who asked
   their device for less motion gets none (app.css turns every animation and transition off).
   Then the guided tour's spotlight and card (help/Coach.js). */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-glide:cubic-bezier(.65,0,.35,1);--t-fast:120ms;--t:200ms;--t-slow:320ms}

@keyframes fade-in{from{opacity:0}}
@keyframes rise-in{from{opacity:0;transform:translateY(8px)}}
@keyframes sheet-in{from{transform:translateY(24px);opacity:0}}
@keyframes pop-in{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}}
@keyframes toast-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes toast-down{from{opacity:0;transform:translateY(-12px) scale(.98)}}

/* A screen, a tab, a page: it fades in — opacity only, since its dialogs live inside it. */
.screen-in{animation:fade-in var(--t) var(--ease-out)}
/* What fills it comes in one after another — the first few only, so a long list isn't kept waiting. */
:is(.tiles>.tile,.course,.list>li,.fs-list>li,.rc-row,tr[data-testid=trainee-row]){animation:rise-in var(--t-slow) var(--ease-out) backwards}
:is(.tiles>.tile,.list>li,.fs-list>li,.rc-row,tr[data-testid=trainee-row]):nth-child(2){animation-delay:30ms}
:is(.tiles>.tile,.list>li,.fs-list>li,.rc-row,tr[data-testid=trainee-row]):nth-child(3){animation-delay:60ms}
:is(.tiles>.tile,.list>li,.fs-list>li,.rc-row,tr[data-testid=trainee-row]):nth-child(4){animation-delay:90ms}
:is(.tiles>.tile,.list>li,.fs-list>li,.rc-row,tr[data-testid=trainee-row]):nth-child(5){animation-delay:120ms}
:is(.tiles>.tile,.list>li,.fs-list>li,.rc-row,tr[data-testid=trainee-row]):nth-child(n+6){animation-delay:150ms}

/* Dialogs rise over a fading scrim; a phone's full-screen sheet slides up. */
.modal-bg{animation:fade-in var(--t) var(--ease-out)}
.modal{animation:rise-in var(--t) var(--ease-out)}
@media (max-width:600px){.modal{animation:sheet-in var(--t-slow) var(--ease-out)}}
.toast{animation:toast-in var(--t) var(--ease-out)}
@media (max-width:900px){.toast{animation-name:toast-down}}
.update-bar,.banner,.coach-offer,.tour{animation:rise-in var(--t) var(--ease-out)}

/* Touch: buttons give under the finger; cards lift to the pointer. */
.btn,.chip,.rc-code,.tile,.course,.more-row,.nav{transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t),transform var(--t-fast) var(--ease-out)}
.btn:active:not(:disabled),.chip:active,.rc-code:active:not(:disabled),.more-row:active{transform:scale(.97)}
@media (hover:hover){
  .tile:hover,.course:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
}
.tile:active,.course:active{transform:translateY(0) scale(.99)}
.nav[aria-current=page]::before,.more-row[aria-current=page]::before{animation:pop-in var(--t) var(--ease-out)}
/* A roll-call mark: the new state's icon pops in, the colour follows. */
.rc-ic{animation:pop-in var(--t) var(--ease-out)}
.fs-list li.done .fs-n{animation:pop-in var(--t-slow) var(--ease-out)}
.tile b{font-variant-numeric:tabular-nums}

/* ---- The guided tour ---- */
.coach{position:fixed;inset:0;z-index:65;pointer-events:none}
/* The spotlight: everything else dims around it. It lets every tap through. */
.coach-spot{position:fixed;top:0;left:0;width:0;height:0;border-radius:var(--r);opacity:0;
  box-shadow:0 0 0 2px var(--accent),0 0 0 6px color-mix(in srgb,var(--accent) 28%,transparent),0 0 0 200vmax color-mix(in srgb,var(--scrim) 85%,transparent);
  transition:transform var(--t-slow) var(--ease-glide),width var(--t-slow) var(--ease-glide),height var(--t-slow) var(--ease-glide),opacity var(--t) var(--ease-out)}
.coach-spot.on{opacity:1;animation:spot-breathe 2.4s var(--ease-glide) infinite}
@keyframes spot-breathe{50%{box-shadow:0 0 0 2px var(--accent),0 0 0 10px color-mix(in srgb,var(--accent) 14%,transparent),0 0 0 200vmax color-mix(in srgb,var(--scrim) 85%,transparent)}}
.coach-card{pointer-events:auto;position:fixed;inset-inline:0;margin-inline:auto;width:min(380px,calc(100% - 32px));background:var(--surface-hi);color:var(--text);
  border:1px solid var(--line-strong);border-inline-start:3px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:12px 16px 14px;display:flex;flex-direction:column;gap:8px}
.coach-card.bottom{bottom:24px;animation:toast-in var(--t-slow) var(--ease-out)}
.coach-card.top{top:calc(16px + env(safe-area-inset-top,0px));animation:toast-down var(--t-slow) var(--ease-out)}
.in-app .coach-card.top{top:50px}
@media (max-width:900px){.coach-card.bottom{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.coach-card h2{font-size:17px}
.coach-card p{margin:0}
.coach-top{display:flex;align-items:center;gap:8px;margin-bottom:-4px}
.coach-top .hint{flex:1;font-weight:700}
.coach-x{min-width:44px;padding:0;border-color:transparent;background:transparent}
.coach-bar{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.coach-bar i{display:block;height:100%;background:var(--accent);transform-origin:right;transition:transform var(--t-slow) var(--ease-glide)}
.coach-do{display:flex;align-items:center;gap:6px;color:var(--accent);font-weight:700}
.coach-do .ms{font-size:18px}
.coach-end{align-items:flex-start}
.coach-check{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;animation:pop-in var(--t-slow) var(--ease-out) 120ms backwards}
.coach-check .ms{font-size:28px}
.coach-offer,.tour{margin-bottom:14px;border:1px solid var(--line-strong);border-inline-start:3px solid var(--accent);background:linear-gradient(135deg,var(--accent-bg),var(--surface) 60%)}
.coach-offer p{margin:0}
.coach-ico{width:36px;height:36px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:22px}