/* TRAINING PROTOCOL 2.5 — responsive, low-motion visual feedback. */
:root{--motion-ease:cubic-bezier(.2,.75,.25,1);--motion-pop:cubic-bezier(.16,1,.3,1);}
/* Only the visible application section participates in the View Transitions snapshot.
   The navigation, account menu and floating dock remain stable. */
.app-view:not([hidden]){view-transition-name:training-page;}
@keyframes tp-page-out{to{opacity:0;transform:translate3d(0,-7px,0);filter:blur(1.5px);}}
@keyframes tp-page-in{from{opacity:0;transform:translate3d(0,17px,0);filter:blur(1.5px);}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0);}}
::view-transition-old(training-page){animation:190ms ease-in both tp-page-out;}
::view-transition-new(training-page){animation:400ms var(--motion-pop) both tp-page-in;}
/* Smooth, quiet confirmation. No continuous glow or particles. */
.check-task,.dm-slot,.counter-task{position:relative;isolation:isolate;}
.fx-task-confirmed{animation:tp-task-confirm 600ms var(--motion-pop) both;}
.fx-task-finished{animation:tp-task-finish 760ms var(--motion-pop) both;}
.fx-task-tick{animation:tp-task-tick 540ms var(--motion-pop) both;}
.fx-number-update{animation:tp-number-update 490ms var(--motion-pop) both;}
.fx-day-completed{animation:tp-day-completed 780ms var(--motion-pop) both;}
.fx-float{background:var(--tp-done);border:1px solid var(--tp-success);color:var(--tp-heading);border-radius:7px;
 padding:4px 9px;font-family:"Onest","Manrope",sans-serif;font-size:12px;font-weight:800;
 box-shadow:0 7px 18px color-mix(in srgb, var(--tp-shadow) 26.7%, transparent);animation:tp-float 800ms var(--motion-pop) both;white-space:nowrap;}
@keyframes tp-task-confirm{0%{background-color:var(--tp-surfaceAlt);transform:scale(.992);}54%{background-color:var(--tp-surfaceAlt);transform:scale(1.004);}100%{transform:scale(1);}}
@keyframes tp-task-finish{0%{box-shadow:inset 0 0 0 0 color-mix(in srgb, var(--tp-success) 0.0%, transparent);}46%{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tp-success) 66.7%, transparent),0 0 0 3px color-mix(in srgb, var(--tp-success) 8.2%, transparent);}100%{box-shadow:inset 0 0 0 0 color-mix(in srgb, var(--tp-success) 0.0%, transparent),0 0 0 0 color-mix(in srgb, var(--tp-success) 0.0%, transparent);}}
@keyframes tp-task-tick{0%{opacity:.3;transform:scale(.65);}48%{opacity:1;transform:scale(1.14);}100%{opacity:1;transform:scale(1);}}
@keyframes tp-number-update{0%{opacity:.35;transform:translateY(9px) scale(.92);}55%{opacity:1;transform:translateY(-2px) scale(1.07);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes tp-day-completed{0%{color:var(--white);transform:translateY(3px);}38%{color:var(--mint);transform:translateY(-2px);}100%{color:var(--white);transform:translateY(0);}}
@keyframes tp-float{0%{opacity:0;transform:translate(-50%,7px) scale(.92);}20%{opacity:1;transform:translate(-50%,-2px) scale(1);}72%{opacity:1;}100%{opacity:0;transform:translate(-50%,-44px) scale(.98);}}
/* Progress is animated through WAAPI after each render; fall back to CSS timing. */
#dayContent .thin-bar>div,.day-card .thin-bar>div,#xpPanel .thin-bar>div{transition:width 400ms var(--motion-ease);}
/* Clear click feedback without layout shift or strong flashes. */
.check-task,.square-btn,.dm-slot,.mobile-dock button{transition:background-color 200ms ease,border-color 200ms ease,transform 180ms var(--motion-ease);}
.square-btn:active:not(:disabled),.dm-slot:active:not(:disabled),.check-task:active:not(:disabled){transform:scale(.977);}

/* Consistent preferences on every browser. 'Auto' honors reduced-motion,
   while the explicit 'On' option deliberately overrides it. */
@media(prefers-reduced-motion:reduce){
 html:not(.tp-motion-force) *,html:not(.tp-motion-force) *::before,html:not(.tp-motion-force) *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important;
 }
 html:not(.tp-motion-force)::view-transition-old(training-page),
 html:not(.tp-motion-force)::view-transition-new(training-page){animation-duration:.01ms!important;}
 html:not(.tp-motion-force) .fx-float{display:none!important;}
}
html.tp-motion-off *,html.tp-motion-off *::before,html.tp-motion-off *::after{
 animation:none!important;transition:none!important;scroll-behavior:auto!important;
}
html.tp-motion-off::view-transition-old(training-page),html.tp-motion-off::view-transition-new(training-page){animation-duration:.01ms!important;}
html.tp-motion-off .fx-float{display:none!important;}

.tp-motion-choices{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0;}
.tp-motion-choices .btn[aria-pressed="true"]{background:var(--tp-accent,var(--red));border-color:var(--tp-accent,var(--red));color:var(--tp-accentText,var(--tp-buttonText));}
.tp-motion-status{margin:8px 0 13px!important;color:var(--tp-muted,var(--muted));font-size:12px;min-height:18px;}
.tp-motion-preview{border:1px solid var(--tp-border,var(--line));background:var(--tp-card,var(--panel2));padding:16px;border-radius:12px;display:grid;gap:14px;max-width:480px;}
.tp-motion-preview-row{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.tp-motion-preview-label{font-size:10px;letter-spacing:.08em;font-weight:750;color:var(--tp-muted,var(--muted));}
.tp-motion-preview-number{font-family:"Onest","Manrope",sans-serif;font-size:20px;font-variant-numeric:tabular-nums;color:var(--tp-heading,var(--white));}
.tp-motion-preview-track{height:7px;border-radius:99px;background:var(--tp-surfaceAlt,var(--tp-progressTrack));overflow:hidden;}
.tp-motion-preview-fill{display:block;width:30%;height:100%;border-radius:inherit;background:var(--tp-progress,var(--red));}
.tp-motion-preview .btn{justify-self:start;}
@media(max-width:420px){.tp-motion-preview{padding:12px;}.tp-motion-choices{gap:6px;}.tp-motion-choices .btn{padding:9px 10px;}}