/* Motion and interaction feedback layer.
   These rules define focus treatment, hover/press feedback, overlay fades, and
   reduced-motion behavior for the browser UI. */
/* Focus system */
:where(
  button,
  a,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

:where(.btn, .icon-btn, .chip-btn, .sidebar-section-tab, .quiz-option, .source-row, .saved-item, .student-library__item, .library-course-row, .toc-item, .reference-chip, .pipeline-tracker__step) {
  transition:
    transform var(--dur-2) var(--ease-standard),
    box-shadow var(--dur-2) var(--ease-standard),
    border-color var(--dur-2) var(--ease-standard),
    background-color var(--dur-2) var(--ease-standard),
    color var(--dur-2) var(--ease-standard),
    opacity var(--dur-2) var(--ease-standard);
}

:where(.btn, .icon-btn, .chip-btn):active {
  transform: translateY(1px);
}

:where(.sidebar-section-tab, .student-library__item, .saved-item, .source-row, .library-course-row, .quiz-option, .toc-item, .pipeline-tracker__step):hover {
  box-shadow: var(--shadow-inset), var(--shadow-sm);
}

:where(.student-library__item, .saved-item, .source-row, .library-course-row, .quiz-option, .toc-item, .pipeline-tracker__step):active {
  transform: translateY(0);
}

/* drawers + overlays */
.sources-overlay,
.quiz-overlay,
.tools-overlay,
.library-modal-overlay {
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-standard);
}

body.sources-open .sources-overlay,
body.quiz-open .quiz-overlay,
body.tools-open .tools-overlay,
body.library-modal-open .library-modal-overlay {
  opacity: 1;
}

.sources-drawer,
.quiz-modal,
.library-modal,
.student-sidebar {
  transition:
    transform var(--dur-3) var(--ease-standard),
    opacity var(--dur-3) var(--ease-standard),
    visibility var(--dur-3) var(--ease-standard);
  will-change: transform;
}

.quiz-progress__fill {
  transition: width var(--dur-3) var(--ease-standard);
}

.sources-drawer {
  transform: translateX(18px);
}

.sources-drawer.is-open {
  transform: translateX(0);
}

body[data-route="student"] .student-workspace-grid > .sources-drawer,
body[data-route="student"] .student-workspace-grid > .sources-drawer.is-open {
  transform: none;
}

.quiz-modal {
  transform: translateY(12px) scale(0.99);
}

body.quiz-open .quiz-modal {
  transform: translateY(0) scale(1);
}

/* buttons and chips */
.btn:hover,
.chip-btn:hover,
.icon-btn:hover {
  box-shadow: var(--shadow-inset), var(--shadow-sm);
}

.btn:disabled,
.icon-btn:disabled,
.chip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 1024px) {
  body[data-route="student"] .student-workspace-grid > .sources-drawer {
    transform: translateX(104%);
  }

  body[data-route="student"] .student-workspace-grid > .sources-drawer.is-open,
  body[data-route="student"].sources-open .student-workspace-grid > .sources-drawer {
    transform: translateX(0);
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  /* Transforms also encode drawer visibility; disable their animation while
     keeping the open and closed positions intact. */
}