/* Shared light motion for the application and standalone previews. */
/* Keep navigation aligned when a longer panel introduces a scrollbar. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}
:root{--ta-motion-fast:140ms;--ta-motion:220ms;--ta-motion-ease:cubic-bezier(.2,.7,.2,1)}
.ta-button,.button,.ta-tab,.step,.gr-student,.nav-item,aside nav a,.side-item{transition:background-color var(--ta-motion-fast),border-color var(--ta-motion-fast),box-shadow var(--ta-motion-fast),transform var(--ta-motion-fast) var(--ta-motion-ease)}
.ta-input,.ta-select,.ta-textarea{transition:border-color var(--ta-motion-fast),box-shadow var(--ta-motion-fast)}
@media(hover:hover){
 .ta-button:not(:disabled):hover,.button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 3px 9px #25334a10}
 .ta-button--ghost:not(:disabled):hover{box-shadow:none}
 aside nav a:hover,.side-item:hover{background:var(--ta-inverse-hover)}
 .gr-student:hover{border-color:var(--ta-border)}
 .ap-item:hover,.lesson-card:hover,.course-card:hover,.teaching-course:hover{border-color:var(--ta-border-strong);box-shadow:0 5px 18px #25334a08}
}
.ta-button:not(:disabled):active,.button:not(:disabled):active{transform:translateY(1px);box-shadow:none}
.ta-button:disabled,.button:disabled{transform:none;box-shadow:none}
.ap-item,.lesson-card,.course-card,.teaching-course{transition:border-color var(--ta-motion),box-shadow var(--ta-motion)}
.ta-table tbody tr,.gb-table tbody tr{transition:background-color var(--ta-motion-fast)}
.ta-dialog[open]{animation:ta-polish-dialog var(--ta-motion) var(--ta-motion-ease) both}
.ta-dialog[open]::backdrop{animation:ta-polish-fade 180ms ease-out both}
.ta-toast:not([hidden]),.ta-alert[role=status]:not([hidden]),#gr-notice:not([hidden]),#gb-notice:not([hidden]){animation:ta-polish-fade 180ms ease-out both}
.ta-motion-enter,.ap-head,.gr-head,.gb-head,.heading,.pagehead{animation:ta-polish-enter var(--ta-motion) var(--ta-motion-ease) both}
.gr-detail>.ta-card,#edit-view:not([hidden]){animation:ta-polish-enter var(--ta-motion) var(--ta-motion-ease) both}
#view>section,#view>.student-area{animation:ta-polish-fade 180ms ease-out both}
.ap-item,.lesson-card,.course-card,.teaching-course{animation:ta-polish-enter var(--ta-motion) var(--ta-motion-ease) both}
.ap-item:nth-child(2),.lesson-card:nth-child(2),.course-card:nth-child(2),.teaching-course:nth-child(2){animation-delay:30ms}
.ap-item:nth-child(3),.lesson-card:nth-child(3),.course-card:nth-child(3),.teaching-course:nth-child(3){animation-delay:60ms}
.ta-motion-fade,.gb-table tbody,#student-rows{animation:ta-polish-fade 180ms ease-out both}
@keyframes ta-polish-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes ta-polish-dialog{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ta-polish-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ta-button:hover,.button:hover,.ta-button:active,.button:active,.step:active{transform:none!important}}