/* ============================================================
   Responsive layer — container queries, touch targets, viewport
   adaptations. Loaded last so component rules win over the
   viewport-based layer in styles.css.
   ============================================================ */

/* ---------- component-level containment ---------- */
.mae-instrument {
  container-type: inline-size;
  container-name: instrument;
}
.pai-panel {
  container-type: inline-size;
  container-name: pai;
}

/* The instrument collapses on its own width, not the viewport's. */
@container instrument (max-width: 860px) {
  .mae-grid { grid-template-columns: minmax(0, 1fr); }
  .mae-left {
    border-right: 0;
    border-bottom: 1px solid var(--hairline-soft);
  }
}
@container instrument (max-width: 520px) {
  .stage-row { grid-template-columns: 28px 30px minmax(0, 1fr); }
  .stage-state { grid-column: 3; justify-self: start; }
  .instrument-label { font-size: 0.62rem; }
  .instrument-bar { padding: 10px 14px; }
}

@container pai (max-width: 560px) {
  .pai-row { flex-direction: column; }
  .pai-row .btn { justify-content: center; }
  .process-row { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; }
  .pai-found-head { gap: 10px; }
}

/* ---------- touch targets (coarse pointers) ---------- */
@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .btn-sm { min-height: 44px; }
  .skip-link { min-height: 44px; display: inline-flex; align-items: center; }
  .wordmark { min-height: 44px; }
  .footer-col a,
  .roadmap-note a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .pai-quick button,
  .marquee-item {
    min-height: 44px;
    padding-inline: 18px;
  }
  .stage-row { padding-block: 16px; }
  .console-body { height: 300px; }
}

/* ---------- viewport adaptations ---------- */
/* Tall phones: give the copy block extra clearance from the bottom fade. */
@media (max-aspect-ratio: 3/4) {
  .hero-content { padding-bottom: 16vh; }
}

@media (max-width: 720px) {
  /* keep hero copy clear of the fixed nav on short screens */
  .hero-content { padding-top: calc(var(--nav-h) + 10px); }
  .nav .btn-sm { padding-inline: 14px; }
}

@media (max-width: 420px) {
  .hero-title { letter-spacing: -0.03em; }
  .hero-pill { font-size: 11px; padding: 8px 14px; }
  .hero-chips li { font-size: 0.66rem; padding: 7px 11px; }
  .orb-row { gap: 14px; }
  .footer-bottom { gap: 16px; }
}

/* ---------- print ---------- */
@media print {
  .grain-overlay, .scroll-progress, .hero-canvas, .hero-sticky, .scroll-hint { display: none; }
  .hero { height: auto; }
}