/* ── TABLET ── */
@media (max-width: 900px) {
  :root { --header-h: 64px; }

  .header-inner { padding: 0 var(--sp-5); gap: var(--sp-3); }
  .logo-text { display: none; }

  .header-center .project-sub { display: none; }
  .header-center .project-name { font-size: 15px; }

  .global-pill-label { display: none; }
  .global-pill-track { width: 60px; }

  .overview { padding: var(--sp-8) var(--sp-5); }

  .scope-strip { grid-template-columns: 1fr; gap: var(--sp-3); }
  .scope-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: var(--sp-2) var(--sp-3); align-items: center; }
  .scope-card-top { grid-column: 1; grid-row: 1 / 3; align-items: flex-start; }
  .scope-track { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .scope-meta { grid-column: 2; grid-row: 2; }

  .hero h1 { font-size: 36px; }
  .hero-stats { gap: var(--sp-5); }
  .hero-stat-num { font-size: 26px; }

  .checklist-grid { grid-template-columns: repeat(2, 1fr); }

  .detail-sticky-inner { padding: var(--sp-4) var(--sp-5); }
  .detail-head-row { gap: var(--sp-4); }
  .detail-title { font-size: 20px; }
  .detail-progress-wrap { min-width: 160px; }
  .detail-content { padding: var(--sp-8) var(--sp-5); }
}

/* ── MOBILE ── */
@media (max-width: 600px) {
  :root { --header-h: 58px; }

  .header-inner { padding: 0 var(--sp-4); }
  .header-center { display: none; }
  .global-pill { padding: 6px 10px 6px 8px; gap: var(--sp-2); }
  .global-pill-track { width: 50px; }

  .overview { padding: var(--sp-6) var(--sp-4); }

  .hero { margin-bottom: var(--sp-8); }
  .hero h1 { font-size: 30px; }
  .hero p { font-size: 14px; }
  .hero-stats { gap: var(--sp-4); }
  .hero-stat-num { font-size: 24px; }
  .hero-stat-label { font-size: 11px; }

  .scope-strip { gap: var(--sp-3); }
  .scope-card { padding: var(--sp-4); }
  .scope-icon { width: 28px; height: 28px; font-size: 13px; }
  .scope-label { font-size: 10px; }
  .scope-name { font-size: 12px; }

  .checklist-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .cl-card { padding: var(--sp-4); }
  .cl-title { font-size: 13px; min-height: unset; }
  .cl-arrow { display: none; }

  .detail-sticky-inner { padding: var(--sp-3) var(--sp-4); }
  .back-btn { font-size: 12px; margin-bottom: var(--sp-3); }
  .detail-head-row { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .detail-title { font-size: 18px; }
  .detail-progress-wrap { width: 100%; min-width: unset; }
  .detail-eyebrow { font-size: 10px; }

  .detail-content { padding: var(--sp-6) var(--sp-4); }
  .phase-section { margin-bottom: var(--sp-8); }
  .phase-name { font-size: 10px; }
  .phase-mini-track { width: 40px; }

  .item-row { padding: 11px var(--sp-3); }
  .item-text { font-size: 13px; }
  .item-type { font-size: 9px; padding: 2px 6px; }
  .item-cb { width: 20px; height: 20px; min-width: 20px; }

  .legend { gap: var(--sp-3); }
  .legend-item { font-size: 11px; }

  .toast {
    bottom: var(--sp-4); right: var(--sp-4); left: var(--sp-4);
    max-width: unset;
  }
}

/* ── VERY SMALL ── */
@media (max-width: 360px) {
  .hero h1 { font-size: 26px; }
  .hero-stats { flex-direction: column; gap: var(--sp-3); }
}

/* ── TALL SCREENS / LANDSCAPE ── */
@media (min-width: 1400px) {
  .checklist-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── TOUCH DEVICE OPTIMIZATIONS ── */
@media (hover: none) {
  .cl-card:hover { transform: none; box-shadow: none; }
  .cl-card:active { transform: scale(0.98); }
  .cl-arrow { display: none; }
  .item-row:hover { background: var(--c-bg2); border-color: transparent; }
  .item-row:active { background: var(--c-bg3); }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bg-blob { animation: none; }
}

/* ── PRINT ── */
@media print {
  .header, .back-btn, .toast, .bg-blob { display: none; }
  body { background: white; color: black; }
  .item-row { border: 1px solid #ddd; margin-bottom: 4px; }
  .overview, .detail-content { padding: 16px; }
}