/* ============================================================================
   Narrow-viewport overrides.

   Loaded last on purpose: every rule here overrides one defined earlier, so
   source order is doing the work that specificity is not.
   ========================================================================== */

/* ---------------------------------------------------------- Responsive --- */

@media (max-width: 980px) {
  .test-body { grid-template-columns: minmax(0, 1fr); }
  .col-support { position: static; max-height: none; overflow: visible; }
  .test-bar { position: static; }
}

@media (max-width: 640px) {
  main { padding: var(--sp-4) var(--sp-4) var(--sp-7); }
  .panel { padding: var(--sp-4); }
  .panel-hero h1 { font-size: 1.55rem; }
  .test-bar-center { order: 3; width: 100%; }
  .scores { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
  .score-value { font-size: 1.65rem; }
  .test-nav { flex-wrap: wrap; }
  .nav-hint { order: 3; width: 100%; }
}

@media print {
  .app-header, .app-footer, .test-nav, .grid-panel, .results-actions, .filters { display: none; }
  .panel, .support-card, .question { box-shadow: none; border-color: #ccc; }
  body { background: #fff; }
}