/* ==========================================================================
   responsive.css — адаптив (desktop-first). Отдельный, самый приоритетный
   слой каскада — брейкпоинты должны перебивать компоненты/страницы/утилиты
   независимо от порядка объявления правил внутри них.
   ========================================================================== */
@layer responsive {

@media (max-width: 1100px) {
  /* Трёхколоночные сетки схлопываются в одну колонку. */
  .student-layout,
  .session-layout { grid-template-columns: 1fr; }
  .task-sidebar { position: static; }
  .hints-panel { position: static; max-height: none; }
}

@media (max-width: 760px) {
  /* Админка подсказок — в одну колонку. */
  .hint-editor-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Хедер: позволяем переноситься. */
  .app-header {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: var(--space-2);
    gap: var(--space-2);
  }
  .app-header .header-spacer { flex-basis: 100%; height: 0; }
  .container { padding-inline: var(--space-3); }
  /* Тест-кейсы: подписи полей поверх значений. */
  .test-io { grid-template-columns: 1fr; }
  .test-io dt { padding-top: var(--space-2); }
  .brand { font-size: var(--fs-sm); }
  .brand-mark { width: var(--icon-sq-sm); height: var(--icon-sq-sm); font-size: var(--fs-code-sm); }
}

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

}