/* ==========================================================================
   NeuroMaps — Phone layout & touch-target fixes  (nh-phone-fixes.css)
   Loads AFTER the app bundle and the nh-kit. Everything here is gated to the
   app's own mobile breakpoint (max-width:899px == the bundle's `De = width<900`)
   so the desktop layout is untouched.

   These are cascade-level overrides of React inline styles. Author !important
   beats inline styles, so they hold across re-renders; if a future build changes
   the underlying values, the selectors simply stop matching and the app falls
   back to its own styling (fails safe, never breaks).
   ========================================================================== */

/* --- 1. Accessibility button (#nh-fab) clears the bottom tab bar ----------
   The nh-kit floating button is fixed at bottom:18px and sat directly on top of
   the "Me" tab (65px tall bottom bar) — taps on Me hit the button. Lift both the
   button and its panel above the bar. Two-ID specificity (#nh-root #nh-fab) beats
   the kit's single-ID rule; !important is belt-and-braces. */
@media (max-width: 899px) {
  #nh-root #nh-fab {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #nh-root #nh-panel {
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 168px) !important;
  }
}

/* --- 2. Map size on the Navigate screen (safety net) ----------------------
   The 42vh -> 30vh change now lives in the app bundle itself (the planning
   form was crammed into a ~250px scroll window behind a 42vh map). These rules
   are kept as a dormant safety net: they only match if an unpatched 42vh build
   is ever redeployed, restoring the fix automatically. The turn-by-turn "go"
   screen uses 60vh and is intentionally left alone. */
@media (max-width: 899px) {
  #root div[style*="height: 42vh"] { height: 30vh !important; }
  #root div[style*="inset: 42vh"]  { top: 30vh !important; }
}

/* --- 2b. Typography floor (phone only) ------------------------------------
   Helper copy rendered at 11.5px/12.5px inline is below a comfortable reading
   floor for this audience. Bump the two smallest steps by ~1px. Attribute
   selectors match React's serialized inline styles exactly; if a future build
   changes the values these simply stop matching. */
@media (max-width: 899px) {
  #root [style*="font-size: 11.5px"] { font-size: 12.5px !important; }
  #root [style*="font-size: 12.5px"] { font-size: 13.5px !important; }
}

/* --- 3. Bigger touch targets (phone only) --------------------------------
   Modal/overlay close buttons (incl. the SOS "✕") render at 32px; the Leaflet
   zoom controls at 38px. Bring both up to the 44px minimum recommended for
   touch. Targeted by stable hooks (aria-label / leaflet class), not geometry. */
@media (max-width: 899px) {
  button[aria-label="Close"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* #root raises specificity above the bundle's own `.leaflet-control-zoom a`
     !important rule (which is injected later in document order at 38px). */
  #root .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
  }
}

/* --- 4. Focus visibility for the injected-semantics controls -------------
   The Skip / Safety-notice pseudo-links get role+tabindex from the JS file;
   give them a clear keyboard focus ring (they had none as bare <p>/<div>). */
[data-nhpf-key]:focus-visible {
  outline: 3px solid #7FB5A8;
  outline-offset: 3px;
  border-radius: 4px;
}