/*
  CLINED motion system
  Transform and opacity are deliberately the primary animated properties.
  This layer comes last so it improves motion without changing components.
*/
:root{
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
  --motion-fast:160ms;
  --motion-hover:200ms;
  --motion-panel:340ms;
  --motion-page:420ms;
}

/* Progress fills are compositor-friendly: JavaScript updates a CSS variable,
   then CSS scales an already full-width element. */
:is(.xp-track,.hp-track,.progress,.bar,.enemy-track,.daily-streak-track) > i,
.motion-progress-fill{
  width:100%!important;
  transform:scaleX(var(--motion-progress,0));
  transform-origin:left center;
  transition:transform var(--motion-panel) var(--motion-ease);
  will-change:transform;
}

/* A shared tactile language for every existing interactive component. */
:where(button,.answer,.choice,.bank-choice,.menu-item,.study-tool,.exam-launch-card,
.feedback-card,.materi-button,.material-block-card,.dashboard-mini-btn,.floating-nav-item,
.account-security-btn,.account-action,.back,.back-link,.bookmark,.qnav-btn){
  transition:
    transform var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) ease,
    border-color var(--motion-hover) ease,
    background-color var(--motion-hover) ease,
    box-shadow var(--motion-hover) ease;
  -webkit-tap-highlight-color:transparent;
}

:where(button,.answer,.choice,.bank-choice,.menu-item,.study-tool,.exam-launch-card,
.feedback-card,.materi-button,.material-block-card,.dashboard-mini-btn,.floating-nav-item,
.account-security-btn,.account-action,.back,.back-link,.bookmark,.qnav-btn):not([disabled]):active,
.motion-pressed{
  transform:translateY(1px) scale(.985)!important;
  transition-duration:120ms!important;
}

@media (hover:hover) and (pointer:fine){
  :where(.card,.nested-card,.menu-card,.dashboard-card,.achievement-card,.account-auth-card,
  .exam-launch-card,.home-materials-link,.feedback-card,.material-block-card,.study-tool,
  .bank-choice,.answer,.choice):not([hidden]):hover{
    transform:translateY(-2px);
  }
  :where(button,.menu-item,.floating-nav-item,.account-security-btn,.account-action,.bookmark,
  .back,.back-link,.dashboard-mini-btn):not([disabled]):hover{
    transform:translateY(-1px);
  }
  :where(.card,.nested-card,.menu-card,.dashboard-card,.achievement-card,.account-auth-card):hover{
    box-shadow:0 18px 42px rgba(22,38,48,.10);
  }
}

/* Page changes keep one primary motion; direct children follow in a short,
   bounded sequence so the page does not feel flat or move all at once. */
.view.motion-page-enter > :not(script){
  animation:clined-page-reveal var(--motion-page) var(--motion-ease) both;
}
.view.motion-page-enter > :nth-child(2){animation-delay:35ms}
.view.motion-page-enter > :nth-child(3){animation-delay:70ms}
.view.motion-page-enter > :nth-child(4){animation-delay:105ms}
.view.motion-page-enter > :nth-child(5){animation-delay:140ms}
.view.motion-page-enter > :nth-child(n+6){animation-delay:165ms}

#achievementsPage.motion-page-enter .achievement-item,
#materialsPage.motion-page-enter .material-block-card,
#library.motion-page-enter .library-result,
#wrong.motion-page-enter .wrong-item{
  animation:clined-list-reveal 360ms var(--motion-ease) both;
}
#achievementsPage.motion-page-enter .achievement-item:nth-child(2),
#materialsPage.motion-page-enter .material-block-card:nth-child(2),
#library.motion-page-enter .library-result:nth-child(2),
#wrong.motion-page-enter .wrong-item:nth-child(2){animation-delay:35ms}
#achievementsPage.motion-page-enter .achievement-item:nth-child(3),
#materialsPage.motion-page-enter .material-block-card:nth-child(3),
#library.motion-page-enter .library-result:nth-child(3),
#wrong.motion-page-enter .wrong-item:nth-child(3){animation-delay:70ms}
#achievementsPage.motion-page-enter .achievement-item:nth-child(n+4),
#materialsPage.motion-page-enter .material-block-card:nth-child(n+4),
#library.motion-page-enter .library-result:nth-child(n+4),
#wrong.motion-page-enter .wrong-item:nth-child(n+4){animation-delay:105ms}

@keyframes clined-page-reveal{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes clined-list-reveal{
  from{opacity:0;transform:translate3d(0,7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Modal backdrops and cards are independent layers, eliminating the old
   hard pop while avoiding layout-changing properties. */
.account-modal:not([hidden]) .account-modal-backdrop,
#normalValuesModal:not([hidden]){
  animation:clined-backdrop-in 260ms ease both;
}
.account-modal:not([hidden]) .account-modal-card,
.account-modal:not([hidden]) .upi-image-zoom-card,
#normalValuesModal:not([hidden]) .normal-values-modal{
  animation:clined-modal-in 380ms var(--motion-ease) both;
  will-change:transform,opacity;
}
@keyframes clined-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes clined-modal-in{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* Replaces the former scale-to-28 splash exit with a restrained compositor
   transition; it feels faster and avoids a full-screen raster spike. */
.app-loading .splash-content.is-exiting .splash-logo{
  animation:clined-splash-exit 420ms var(--motion-ease-out) forwards!important;
}
.app-loading .splash-content.is-exiting .splash-brand{
  animation:clined-splash-brand-exit 200ms ease forwards!important;
}
@keyframes clined-splash-exit{
  from{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
  to{opacity:0;transform:translate3d(-50%,-50%,0) scale(1.08)}
}
@keyframes clined-splash-brand-exit{
  from{opacity:1;transform:translate3d(-50%,0,0)}
  to{opacity:0;transform:translate3d(-50%,-6px,0)}
}

/* Keep expensive visual treatments still while the user scrolls on mobile. */
@media (max-width:600px){
  body.is-scrolling :is(.card,.nested-card,.menu-card,.dashboard-card,.achievement-card,
  .account-auth-card,.floating-dashboard-nav){
    transition-duration:0ms!important;
  }
  body.is-scrolling .motion-page-enter > *,
  body.is-scrolling .motion-page-enter :is(.achievement-item,.material-block-card,.library-result,.wrong-item){
    animation-play-state:paused!important;
  }
}

/* Accessibility and lower-power devices get the same UI state with no motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  :is(.xp-track,.hp-track,.progress,.bar,.enemy-track,.daily-streak-track) > i,
  .motion-progress-fill{transform:scaleX(var(--motion-progress,0))!important}
}

/* Keep the login modal visible: it lives inside .app, so never hide its parent. */
body.auth-pending .app>:not(#accountAuthModal){visibility:hidden!important;pointer-events:none!important}
body.auth-pending #accountAuthModal:not([hidden]){visibility:visible!important;pointer-events:auto!important}
body.auth-pending{overflow:hidden}
@media (min-width:700px) and (prefers-reduced-motion:no-preference){
  .answer.correct{animation:clined-correct-reward .72s cubic-bezier(.16,1,.3,1)!important;box-shadow:0 0 0 1px rgba(52,199,89,.75),0 0 0 7px rgba(52,199,89,.14),0 18px 38px rgba(52,199,89,.20)}
  .answer.correct::after{content:"";position:absolute;inset:-32px;pointer-events:none;background:radial-gradient(circle,rgba(109,255,151,.46) 0,rgba(52,199,89,.18) 29%,transparent 68%);animation:clined-answer-glow .8s ease-out both}
  .clined-reward-particle{position:absolute;left:50%;top:50%;width:7px;height:12px;border-radius:2px;background:var(--particle-color,#34c759);pointer-events:none;transform:translate(-50%,-50%);animation:clined-reward-particle .78s cubic-bezier(.08,.72,.25,1) forwards;will-change:transform,opacity}
}
@keyframes clined-correct-reward{0%{transform:scale(1)}20%{transform:scale(1.025)}48%{transform:scale(.995)}100%{transform:scale(1)}}
@keyframes clined-answer-glow{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.26)}}
@keyframes clined-reward-particle{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1) rotate(var(--r))}}

/* Layout safety net. These rules resolve fixed navigation, modal and grid overlap
   without changing the established CLINED visual language. */
.app{width:min(100%,720px)!important;min-width:0!important;padding-bottom:max(116px,calc(96px + env(safe-area-inset-bottom)))!important}
.view,.view>*,.card,.nested-card,.exam-page-header,.materials-page-header,.account-header,.uab-duo-top{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
.account-modal{z-index:100000!important;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;box-sizing:border-box!important}
.account-modal-card,.upi-image-zoom-card,.normal-values-modal{width:min(100%,560px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important;overscroll-behavior:contain!important}
.account-modal-card form,.account-form,.account-data-tools,.upi-create-card form{min-width:0!important}
.account-modal-card input,.account-modal-card select,.account-modal-card textarea,.account-form input,.account-form select,.account-form textarea{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
.floating-dashboard-nav{bottom:max(12px,env(safe-area-inset-bottom))!important;z-index:5000!important}
.quiz-actions,.resume-actions,.flash-actions,.upi-edit-actions{flex-wrap:wrap!important;min-width:0!important}
.quiz-actions>* ,.resume-actions>* ,.flash-actions>* ,.upi-edit-actions>*{min-width:min(100%,150px)!important}
.uab-path-viewport,.uab-path,.upi-block-grid,.materials-grid,.library-controls,.dashboard-scope-panel{min-width:0!important;max-width:100%!important}
.uab-path-viewport{overflow-x:auto!important;overscroll-behavior-x:contain!important}
@media (min-width:701px){
  .app{max-width:1040px!important;padding-left:24px!important;padding-right:24px!important}
  .exam-launcher,.menu-grid,.study-tools-grid,.materials-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-stats,.stats{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .account-modal-card{width:min(100%,620px)!important}
}
@media (max-width:560px){
  .app{padding-left:12px!important;padding-right:12px!important}
  .exam-page-header,.materials-page-header,.account-header{align-items:flex-start!important;gap:10px!important}
  .quiz-actions,.resume-actions,.flash-actions,.upi-edit-actions{display:grid!important;grid-template-columns:1fr!important}
  .quiz-actions>* ,.resume-actions>* ,.flash-actions>* ,.upi-edit-actions>*{width:100%!important}
}