/* Responsive layout safeguards: preserve the existing visual language and elements. */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }

.stage-navigation, .stages-nav, .progress-steps, .stage-steps {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

@media (max-width: 1100px) {
  .main-viewport, .setup-container, .clinical-report-container,
  .child-app-viewport, .waiting-grid, .therapy-layout,
  .generalization-grid-split { width: 100%; max-width: 100%; }

  .waiting-grid, .therapy-layout { grid-template-columns: minmax(0, 1fr); }
  .specialist-grid, .setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-check-panel { min-width: 0; }
  .teletherapy-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .main-viewport, .setup-container, .child-app-viewport,
  .clinical-report-container { padding-left: 12px; padding-right: 12px; }

  .setup-header-hero h1, .setup-header-hero h2,
  .welcome-hero-title, h1, h2 { font-size: clamp(1.25rem, 5vw, 2rem); line-height: 1.35; }
  .setup-grid, .specialist-grid, .report-grid,
  .baseline-action-bar, .hud-secondary-actions,
  .generalization-grid-split { grid-template-columns: 1fr !important; }

  .baseline-action-bar, .hud-secondary-actions { display: grid !important; gap: 10px; }
  .hud-secondary-actions > form { width: 100%; min-width: 0; }
  .device-toggles-bar { display: flex; flex-wrap: wrap; gap: 8px; }
  .device-toggles-bar .device-btn { flex: 1 1 145px; min-height: 44px; }
  .teletherapy-video-grid { grid-template-columns: 1fr; gap: 10px; }
  .teletherapy-video-box { min-height: 190px; }
  .teletherapy-call-panel { width: 100%; }

  .stage-step { flex: 0 0 auto; min-width: 105px; }
  .stage-navigation, .stages-nav, .progress-steps, .stage-steps { padding-bottom: 5px; }
  .card, .setup-card, .media-check-panel, .stage-activity-card { min-width: 0; }
  .word-visual-box, .activity-header-bar { overflow-wrap: anywhere; }
  table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 430px) {
  .main-viewport, .setup-container, .child-app-viewport,
  .clinical-report-container { padding-left: 8px; padding-right: 8px; }
  .btn-primary, .btn-secondary, .btn-hud-independent,
  .btn-hud-stumble, .btn-hud-tool { width: 100%; min-height: 46px; padding: 0.8rem 0.7rem !important; }
  .teletherapy-video-box { min-height: 155px; }
  .teletherapy-status-line { font-size: 0.9rem; overflow-wrap: anywhere; }
}

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

/* Project-specific responsive targets. These rules only change layout at narrow widths. */
.stage-progress-bar {
  display: flex;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

@media (max-width: 900px) {
  .form-grid-cards,
  .waiting-grid,
  .generalization-grid-split,
  .report-meta-grid,
  .cue-distribution-grid,
  .upload-dual-options-grid,
  .hw-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .setup-container { max-width: 100%; }
  .stage-activity-card, .media-check-panel, .setup-card { width: 100%; min-width: 0; }
  .drawing-tools-row-main, .hud-quick-actions-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 600px) {
  .stage-progress-bar { padding: 0.5rem 0.75rem; gap: 0.35rem; }
  .stage-progress-bar .stage-step { min-width: max-content; font-size: 0.74rem; padding: 0.45rem 0.65rem; }
  .stage-progress-bar .stage-divider { flex: 0 0 auto; }
  .main-viewport { padding: 0.75rem !important; }
  .setup-container { margin: 0.75rem auto; }
  .setup-header-hero { margin-bottom: 1rem; }
  .setup-header-hero p { font-size: 0.9rem; }
  .stage-activity-card { padding: 1rem !important; border-radius: 18px !important; }
  .stage-activity-card [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .stage-activity-card [style*="width: 50%"] { width: 100% !important; }
  .word-visual-box { min-height: 120px; }
  .word-svg-artwork { max-width: 100%; overflow: hidden; }
  .drawing-tools-row-main > *, .hud-quick-actions-grid > * { min-width: 0; width: 100%; }
  .media-check-panel { padding: 0.8rem; }
  .teletherapy-video-box { min-height: 170px; }
  input, select, textarea { min-width: 0; width: 100%; }
}

@media (max-width: 380px) {
  .stage-progress-bar .stage-step { font-size: 0.68rem; padding-inline: 0.5rem; }
  .teletherapy-video-box { min-height: 145px; }
  .setup-container, .main-viewport { padding-inline: 0.5rem !important; }
}