/* responsive.css — breakpoints and small-screen guards */
@media (min-width: 640px) {
  #view { padding: 20px 20px calc(var(--nav-h) + 28px); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .mode-grid { grid-template-columns: repeat(2, 1fr); }
  .set-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-hero, .dash-section.full { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  #app { flex-direction: row; }
  #sidebar {
    display: block;
    flex: 0 0 264px;
    width: 264px;
  }
  #bottomnav { display: none; }
  #view {
    padding: 28px 32px 40px;
    max-width: 1020px;
  }
  .exam-topbar { margin: -28px -32px 20px; padding: 12px 32px; }
  .set-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 360px guard: nothing may force horizontal overflow */
@media (max-width: 400px) {
  #view { padding-left: 10px; padding-right: 10px; }
  .card { padding: 12px; }
  .stat-grid { gap: 8px; }
  .stat { padding: 10px 6px; }
  .stat-num { font-size: 1.25rem; }
  .btn { padding: 10px 12px; }
  .exam-topbar { margin-left: -10px; margin-right: -10px; padding: 8px 10px; }
  .palette { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
  .bottomnav-inner .nav-link { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}