/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  header { padding: 0 20px; height: var(--site-header-h-mobile); }
  .site-title { font-size: 18px; }

  .header-about-link { padding: 5px 10px; }

  .social-link { width: 26px; height: 26px; }
  .social-link svg { width: 13px; height: 13px; }

  .intro { padding: 10px 52px 10px 20px; gap: 6px; flex-wrap: wrap; }
  .intro-dot { display: none; }
  .intro-corner-note { display: none; }

  .rc-videos { gap: 8px; }
  .rc-video-btn { width: 26px; height: 26px; }
  .rc-video-btn svg { width: 12px; height: 12px; }

  .guide-panel { width: 280px; }

  /* Touch targets bumped toward the 44px accessible minimum. Only applied
     where the control has room to grow without crowding a neighbor —
     .social-link/.rc-video-btn are packed 2-8px apart in a row and are left
     alone on purpose, since enlarging them risks mis-taps on the wrong icon. */
  .guide-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .detail-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 72vh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .detail-panel.open { transform: translateY(0); }
  .detail-inner { padding: 20px; }
  .video-btn-name { display: none; }

  /* Prev/next is a swipe gesture on mobile (see .detail-next-pull below),
     not side buttons — there's no room for them next to a full-width panel. */
  .detail-nav-btn { display: none; }

  /* Clears the bottom site-nav tab bar, which stays visible (fixed, higher
     z-index) over the full-screen recipe panel on mobile — see the
     "Full-area panel" comment in cocina.css. No extra env(safe-area-inset-
     bottom) added here: .site-nav already pads itself by that inset
     (header.css), so --site-nav-h (measured off its offsetHeight) already
     includes it — adding it again pushed this bar above the tab bar with a
     visible gap instead of sitting flush against it. */
  .detail-next-pull {
    bottom: var(--site-nav-h, 56px);
  }

  /* Title stays readable on its own line(s) instead of crowding the
     share/map-link icon buttons at the 34px desktop size. */
  .detail-title-row { align-items: flex-start; }
  .detail-title { font-size: 22px; line-height: 1.25; }

  .detail-text-btn-label { display: none; }
  .detail-text-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }
  .detail-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  /* Filter toggle pinned to the real screen bottom, clearing the site-nav
     by its actual measured height (--site-nav-h, set in app.js) rather than
     relying on the graph-wrapper's flex box or env(safe-area-inset-bottom) —
     both are unreliable in some Android "installed as app" shortcut wrappers,
     where the nav ends up overlapping content instead of reserving space. */
  .filter-area {
    position: fixed;
    bottom: calc(var(--site-nav-h, 56px) + 14px);
    left: 12px;
  }

  /* Filter panel → fixed full-width bottom sheet, stops above the real
     bottom bar (site-nav on public pages, the editor's footer toolbar on
     editor.html) using the same measured --site-nav-h as .filter-area above.
     calc() includes the OS gesture-bar inset so it doesn't end up tucked
     behind it in standalone/installed mode. */
  .filter-panel {
    position: fixed;
    bottom: calc(var(--site-nav-h, 56px) + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    transform: translateY(110%);
    z-index: 25;
  }

  .filter-panel.open {
    transform: translateY(0);
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
  }

  .filter-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  .zoom-controls { top: 12px; right: 12px; }
  .zoom-btn { width: 38px; height: 38px; }
  .filter-panel-close {
    width: 38px;
    height: 38px;
    justify-content: center;
  }

  /* Same fixed-position dodge as .filter-area above — clears the site-nav
     by its measured height instead of trusting the wrapper's own sizing. */
  .graph-legend {
    position: fixed;
    bottom: calc(var(--site-nav-h, 56px) + 14px);
    right: 12px;
    padding: 7px 10px;
  }
  .legend-row { font-size: 11px; }

  footer { padding: 12px 20px; flex-wrap: wrap; }
  .footer-left { display: none; }
  .footer-right { width: 100%; }
  .editor-toolbar { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

  /* Cookie banner — stack: text on its own line, then the two buttons side by side */
  .cookie-banner-content { flex-wrap: wrap; row-gap: 10px; }
  .cookie-banner-content > svg { display: none; }
  .cookie-text { flex: 1 1 100%; }
  .cookie-actions { flex: 1 1 100%; margin-left: 0; justify-content: flex-end; }
}

@media (max-width: 480px) {
  header { padding: 0 16px; height: var(--site-header-h-mobile); gap: 8px; }
  .site-logo { width: 24px; height: 24px; }
  .site-title { font-size: 17px; }

  .social-link { width: 24px; height: 24px; }
  .social-link svg { width: 12px; height: 12px; }

  .intro { padding: 9px 48px 9px 16px; }
  .intro-text { font-size: 13px; }
  .help-btn { right: 12px; padding: 6px 8px; }
  .help-label { display: none; }

  .guide-overlay { padding: 12px; align-items: flex-end; justify-content: stretch; }
  .guide-panel { width: 100%; border-radius: 14px 14px 0 0; padding: 20px 18px; }

  .filter-area { bottom: calc(var(--site-nav-h, 52px) + 12px); left: 10px; }
  .search-bar-row { top: 10px; left: 10px; }
  .search-bar { width: 170px; }
  .zoom-controls { top: 10px; right: 10px; }

  footer { padding: 10px 16px; justify-content: flex-end; }
}