@media (max-width: 600px) {
  .card-word { font-size: 28px; }
  .srs-buttons { grid-template-columns: repeat(2, 1fr); }
  .stat-card { min-width: 90px; }

  /* M6.4 Stage 10 (UX Review) — Quick Actions (Student Home): 3-column grid reads fine on a tablet/
     desktop but cramps three labeled buttons into unreadable slivers on a phone; stack instead.
     Larger padding on ALL buttons in this narrower context = larger touch targets (WCAG-style ~44px
     minimum), not just a visual density change. */
  .quick-actions-grid { grid-template-columns: 1fr; }
  .quick-action-primary, .quick-actions-grid .btn { padding: 14px; font-size: 1em; }

  /* Clinical Navigator breadcrumb (already flex-wrap in the screen's own inline style) — the "→"
     separators between long Card labels wrap awkwardly at phone width; shrinking to match body text
     size keeps a full breadcrumb trail (Disease → Symptom → Drug → Protocol → Clinical Case) from
     forcing horizontal scroll on a narrow viewport. */
  .breadcrumb-trail { font-size: 0.8em; }
}