/* Phone layouts share the desktop content and playback controls. */
.mobile-swipe-hint, .diagram-mobile-tools { display: none; }
.teaser-fallback { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.diagram-explorer > img { display: block; max-width: 100%; height: auto; }

@media (max-width: 680px), (max-width: 1000px) and (max-height: 500px) {
  .site-header { position: static; }
  .site-header nav { min-height: 52px; padding-top: max(2px, env(safe-area-inset-top)); padding-bottom: 2px; }
  .nav-links { display: none; }
  .site-header .container, .page-layout {
    width: auto;
    margin-left: max(16px, env(safe-area-inset-left));
    margin-right: max(16px, env(safe-area-inset-right));
  }
  html { scroll-padding-top: calc(64px + env(safe-area-inset-top)); }
  .contents-sidebar { top: env(safe-area-inset-top, 0px); }
  .page-contents > summary { padding-block: 10px; }
}

@media (max-width: 1199px) {
  .page-contents nav {
    max-height: calc(var(--contents-menu-height, calc(100dvh - var(--header-height) - 60px)) - env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
}

@media (max-width: 900px) {
  .diagram-stage { min-width: var(--diagram-min-width); }
  .diagram-mobile-tools { display: block; min-width: 0; }
  .diagram-mobile-tools label { display: block; font-weight: 600; margin-bottom: 6px; }
  .diagram-detail-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .diagram-detail-controls select { width: 100%; min-width: 0; font-size: 16px; }
  .diagram-detail-controls button { min-width: 60px; font-size: 16px; }
  .diagram-split { gap: 16px; }
  #rope-explorer .diagram-mobile-tools { margin-bottom: 16px; }
}

@media (max-width: 1000px) {
  .comparison-dialog {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overscroll-behavior: contain;
  }
  .comparison-dialog .player-controls { top: env(safe-area-inset-top, 0px); }
}

@media (max-width: 680px) {
  :root { --hero-size: clamp(28px, 7.6vw, 34px); }
  .hero { padding-top: 20px; }
  .hero-actions { gap: 0 18px; margin-block: 12px 18px; }
  .hero-actions a { display: inline-flex; align-items: center; min-height: 44px; }
  .section { padding-block: 28px; }
  .method-part { margin-top: 24px; }
  .formulation-part { margin-top: 0; }

  .timing-tabs, .issue-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 3px;
    scrollbar-width: thin;
    padding: 3px 3px 9px;
    margin-inline: -3px;
  }
  .timing-tabs button, .dex-gallery .timing-tabs button, .issue-tabs button {
    flex: 0 0 auto;
    max-width: min(240px, 78vw);
    min-height: 44px;
    padding: 8px 12px;
    line-height: 1.3;
    scroll-snap-align: start;
  }
  #timing-issue-copy { min-height: 0; }
  .mobile-swipe-hint {
    display: block;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 14px;
    text-align: right;
  }

  .pair.mobile-comparison,
  .pair.mobile-comparison.multi:has(> figure:nth-child(5)),
  .simulation-section .pair.mobile-comparison.multi:has(> figure:nth-child(5)) {
    grid-template-columns: none;
    grid-template-rows: auto auto auto;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 24px);
    align-items: stretch;
    gap: 0 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 3px;
    scrollbar-width: thin;
    padding: 3px 3px 10px;
    margin-inline: -3px;
  }
  .pair.mobile-comparison > figure,
  .pair.mobile-comparison.multi:has(> figure:nth-child(5)) > figure,
  .pair.mobile-comparison.multi:has(> figure:nth-child(5)) > figure:nth-child(-n+2) {
    grid-column: auto;
    grid-row: 1 / span 3;
    scroll-snap-align: start;
  }
  .mobile-comparison:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .mobile-comparison figcaption { min-height: 0; }
  .mobile-comparison .trial-controls { align-self: end; }
  .comparison-dialog .mobile-comparison video { max-height: none; }

  /* Keep cycling and seeking within two rows instead of three. */
  .player-controls:has(.player-cycle) > .player-cycle {
    grid-row: 1;
    grid-column: 3;
    margin: 0;
    padding-inline: 4px;
    min-width: 0;
  }
  .player-controls:has(.player-cycle) .player-timeline {
    display: flex;
    grid-row: 2;
    grid-column: 1 / -1;
    gap: 10px;
    margin-inline: 0;
  }
  .player-controls:has(.player-cycle) .player-timeline output { padding-right: 0; }
  .scene-controls select { flex: 1 1 0; min-width: 0; max-width: 100%; font-size: 16px; }
  .dex-toolbar .scene-controls { width: 100%; }
  .dex-methods { width: 100%; flex-wrap: nowrap; }
  .dex-methods button { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: 16px; }
}