/* Phone layouts and comfortable touch targets. */
@media (max-width: 639px) {
  body { overflow-wrap: anywhere; }
  .browser-frame .flex-1 { min-width: 0; }
  .browser-frame > div:first-child { flex-wrap: wrap; gap: 6px; }
  #simulator select { width: 100%; max-width: 100%; min-width: 0; font-size: 16px; }
  #simulator .flex > div { min-width: 0; }
  #featured-reel > div:first-child, #simulator > div:first-child,
  #reel-explanation-box > div:first-child { flex-wrap: wrap; gap: 10px; }
  #featured-reel button, .project-filter-btn, #simulator button,
  header button, header a { min-height: 44px; }
  header a[href$=".pdf"] { flex-basis: 100%; gap: 12px; }
  header a[href$=".pdf"] > span:last-child { flex-shrink: 0; white-space: nowrap; }
  header a[href$=".pdf"] svg { flex-shrink: 0; }
  #lightbox-modal { padding: 10px; }
  #lightbox-modal > div { max-height: 92dvh; }
  #lightbox-modal > div > div:first-child { gap: 10px; padding: 12px; }
  #lightbox-modal > div > div:first-child > div { min-width: 0; }
  #lightbox-modal button { width: 44px; height: 44px; flex-shrink: 0; }
  #lightbox-modal img { max-height: 52dvh; }
  #lightbox-modal > div > div:last-child { overflow-y: auto; flex-shrink: 0; max-height: 24dvh; }
  #toast-container { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}