/* Phone and touch ergonomics shared by every Grape page. */
:root { --site-header-height: 91px; }
.dag-scroll { min-width: 0; }
.diagram-scroll-hint { display: none; }
@media (max-width: 1020px) {
  .header-actions { gap: 4px; flex-shrink: 0; }
  .header-inner { gap: 12px; }
  .search-button, .menu-toggle, .icon-button {
    width: 44px; min-width: 44px; height: 44px; padding: 0;
  }
  .search-button { display: grid; place-items: center; }
  .nav {
    top: var(--site-header-height);
    max-height: calc(100dvh - var(--site-header-height));
    overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    gap: 4px;
  }
  .nav a, .nav .explore-toggle, .mega-grid a { min-height: 44px; display: flex; align-items: center; }
  .mega-panel { top: var(--site-header-height); max-height: calc(100dvh - var(--site-header-height)); overscroll-behavior: contain; }
  .mega-grid { padding-bottom: env(safe-area-inset-bottom); }
  .subnav { top: var(--site-header-height); }
  .subnav .wrap { padding-block: 3px; scroll-padding-inline: 12px; }
  .subnav a { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
  .motion-control { width: 44px; height: 44px; bottom: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); }
  main summary { min-height: 44px; align-items: center; }
  .actions > a, main .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .pill-tab, .lab-views button, .infrastructure-controls button, .journey-controls button { min-height: 44px; }
  .infrastructure-controls button { font-size: 12px; padding-inline: 12px; }
  .footer-links a, .footer-bottom-links a, .footer-contact { min-height: 44px; display: flex; align-items: center; }
  .footer-socials a { width: 44px; height: 44px; }
  .footer-bottom { padding-bottom: 64px; }
  .contact-form :is(input,select,textarea), #resource-search, #search-input { font-size: 16px; }
  main :is(input[type="text"],input[type="search"],input[type="email"],textarea,select) { font-size: 16px; }
  .editorial-card, .research-feature > *, .footer-links > div, .mega-grid > section { min-width: 0; overflow-wrap: anywhere; }
  .range-input { min-height: 44px; }
  #search-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
  #search-results a { min-height: 44px; }
  :is(main, footer) :is(h1,h2,h3,p,a) { overflow-wrap: break-word; }
}
@media (max-width: 800px) {
  :root { --site-header-height: 76px; }
  .hero .visual-note { display: none; }
  .dag-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #c4adda #f7f3fb; }
  .dag-scroll .dag-diagram { min-width: 590px; }
  .diagram-scroll-hint { display: block; margin: 0; padding: 12px 20px; font-size: 12px; color: #766783; border-top: 1px solid #e7deee; }
  .dag-scroll:focus-visible { outline: 2px solid #9887ef; outline-offset: -3px; }
}
@media (max-width: 360px) {
  .header-inner { gap: 6px; }
  .header-actions { gap: 0; }
  .mega-grid { gap: 22px 16px; }
  .mega-grid a { font-size: 13px; overflow-wrap: anywhere; }
  .footer-links { gap: 24px 16px; }
  .contact-email { font-size: 27px; }
  .contact-email span { margin-left: 8px; }
  #search-dialog { padding: 18px; }
  .dialog-head { gap: 8px; }
  .dialog-head h2 { font-size: 28px; }
}
@media (max-height: 500px) and (max-width: 1020px) and (min-width: 520px) {
  :root { --site-header-height: 64px; }
  #header { height: var(--site-header-height); }
  .header-inner { height: 100%; }
  .brand-logo { max-height: 46px; width: auto; }
  html { scroll-padding-top: 124px; }
}
@media (hover: none) {
  .hero .visual-note { display: none; }
}