/* Route Manager — global polish. Tailwind CDN handles the rest. */

/* Universal border-box. Tailwind's Preflight already sets this on
   most elements, but the CDN version doesn't reach some shadow-DOM
   widgets / oEmbed content and padding-inflated widths are a known
   source of iOS Safari hscroll. Cheap belt-and-braces. */
*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

/* Mobile-specific hard bound on page width. `overflow-x: clip` is
   stricter than `hidden` — a child cannot opt into scrolling by
   declaring its own overflow-x, and there is no scroll position
   to rubber-band against. Safari 16+ supports clip; older Safari
   falls back gracefully to the existing `overflow-x: hidden` on
   html/body thanks to the cascade. */
@media (max-width: 767px) {
  #page-root {
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
    position: relative;
  }
  /* Belt-and-braces: no direct child of #page-root may be wider
     than the viewport. Opt out with .allow-overflow on the rare
     element that legitimately needs it (currently none do). */
  #page-root > *:not(.allow-overflow) {
    max-width: 100vw;
  }
}

/* iOS needs an explicit font-size >=16px on inputs to avoid zoom-on-focus. */
@media (max-width: 480px) {
  input, select, textarea { font-size: 16px; }
}

/* Touch targets: 44×44px minimum (applies when Tailwind min-h-[44px]
   isn't on the element). */
button, [role="button"], input[type="button"], input[type="submit"] {
  min-height: 44px;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Native text areas on iOS/Safari don't inherit rounded corners well. */
textarea { resize: vertical; }

/* Prevent horizontal overflow on narrow screens. `overscroll-behavior-x`
   stops rubber-band swipe-back; `overflow-x: hidden` clips any rogue
   child wider than the viewport (iOS Safari has assorted sub-pixel
   and dynamic-viewport quirks that can trigger hscroll even when the
   layout looks correct in Chromium). `max-width: 100vw` is belt and
   braces — no element can widen beyond the visual viewport. */
html, body {
  overscroll-behavior-x: none;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Long location names in cards / rows must never force hscroll.
   `truncate` (Tailwind) on a child handles short-medium strings;
   this catches any string so long a single unbroken run escapes
   the truncating container. */
.rm-wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }

/* iOS Safari safe-area support.
   viewport-fit=cover on <meta> tells Safari to render edge-to-edge
   under the notch / Dynamic Island — these rules then pad the
   header down below the status bar and the FAB above the home
   indicator. env() returns 0 on browsers without notches so this
   has no effect outside iOS Safari. */
header {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
#fab-generate-route {
  margin-bottom: env(safe-area-inset-bottom);
}

/* Flex items default to min-width: auto which prevents shrinking
   below content size — a long button label or badge then pushes
   siblings off the right edge and gets clipped by overflow-x:
   hidden. These rules force flex children to be shrinkable so
   truncate actually kicks in. Scoped to header so we don't flatten
   intentionally-fixed widths elsewhere. */
header .flex > * { min-width: 0; }

/* Leaflet popup typography polish. */
.leaflet-popup-content { margin: 10px 12px; }
.leaflet-popup-content-wrapper { border-radius: 10px; }

/* Make the map's attribution more legible on small screens. */
.leaflet-control-attribution { font-size: 10px; }

/* Touch-friendly Leaflet controls. The default 26-30px is below the
   44px HIG minimum — impossible for a driver to tap accurately. */
.leaflet-control-zoom a,
.leaflet-control-fullscreen a,
.leaflet-control-layers-toggle {
  min-width: 44px !important;
  min-height: 44px !important;
  line-height: 44px !important;
  font-size: 20px !important;
}