/* SILENTPATTERN — responsive corrections.
 *
 * The delivered design overflows horizontally in the header at every width
 * below 1024px: the logo, the desktop link row and the three right-hand
 * controls together exceed the viewport, so the page scrolls sideways and the
 * Access button is cut off. Measured at 390px the document was 438px wide, and
 * at 834px it was 927px.
 *
 * Nothing here changes the desktop appearance. Every rule is inside a
 * max-width media query, so at 1024px and above the design renders exactly as
 * delivered. !important is required because Tailwind's CDN build injects its
 * utilities at runtime, after this sheet.
 */

/* ---- Tablet and below: use the mobile menu instead of the full link row.
        The links were set to appear at md (768px) but do not fit until 1024. */
@media (max-width: 1023.98px) {
  nav > .hidden.md\:flex { display: none !important; }
  nav #mobile-menu-btn   { display: flex !important; }
}

/* ---- Small screens: tighten the header so the Access button fits. */
@media (max-width: 639.98px) {
  nav.px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  nav #access-btn {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-size: 0.875rem !important;
  }
  nav .space-x-3 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0.5rem !important;
  }
  nav .text-xl { font-size: 1.0625rem !important; }
}

@media (max-width: 380px) {
  /* The Lab Navigator glyph duplicates what the mobile menu already offers. */
  nav #lab-nav-btn { display: none !important; }
}

/* ---- A final guard: nothing may cause sideways scrolling on any page. */
html, body { max-width: 100%; }
@media (max-width: 1023.98px) {
  body { overflow-x: hidden; }
}

/* ---- Touch targets. Several controls render below the 24px minimum on
        phones; this lifts them without altering their visual size on
        desktop. */
@media (max-width: 639.98px) and (pointer: coarse) {
  nav a, nav button,
  footer a,
  #mobile-menu a, #mobile-menu button { min-height: 44px; }
  #mobile-menu a { display: flex; align-items: center; }
}

/* ---- Respect a visitor's motion preference across the whole design. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}