/* mobile.css — keyframes + tap/scroll utilities + fcc brand defaults.
   Loaded only on viewports ≤500px by var/www/fcc-weather/index.html.
   Scoped to [data-mobile-app-root] so it cannot leak into the desktop layout.

   Brand defaults match BRANDS.fcc from /tmp/handoff-fcc-weather/src/mock-data.jsx.
   Tenant brand.css (Phase 3) overrides these by re-declaring on :root at higher
   cascade order, so weatherdog can ship yellow + blue without forking mobile.css. */

:root {
  --brand-bg:          #0c0d0f;
  --brand-panel:       #111214;
  --brand-panel-hi:    #16181c;
  --brand-text:        #f5f6f7;
  --brand-text-dim:    #9aa3b2;
  --brand-border:      #2a2a2a;
  --brand-line:        #1e1e1e;
  --brand-accent:      #c7d2fe;
  --brand-accent-deep: #818cf8;
}

/* Tap micro-animation: scale 0.96 + opacity flash for 120ms. */
@keyframes wx-tap-fire-kf {
  0%   { transform: scale(1);   opacity: 1; }
  40%  { transform: scale(.96); opacity: .85; }
  100% { transform: scale(1);   opacity: 1; }
}
[data-mobile-app-root] .wx-tap-fire {
  animation: wx-tap-fire-kf 120ms ease-out;
}

/* Pulse ring around the layout switcher pill (Phase 2). */
@keyframes wx-pulse {
  0%   { transform: scale(1);   opacity: .85; }
  100% { transform: scale(1.35); opacity: 0;   }
}

/* Refresh spinner (PullToRefresh "refreshing…" state). */
@keyframes wx-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hide scrollbars on horizontal strips (hourly, favorites, etc.) AND let
   vertical-pan gestures pass through to the page scroller. !important
   beats the high-specificity `*:not(...)` rule below that defaults
   everything else to pan-y. */
[data-mobile-app-root] .wx-hide-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x !important;
}
[data-mobile-app-root] .wx-hide-scroll::-webkit-scrollbar {
  display: none;
}

/* Leaflet maps: route single-finger pans to the page; enable map drag/zoom
   only when the user taps the "Tap to interact" overlay. This matches how
   Apple Maps and Google Maps embeds behave on mobile. */
[data-mobile-app-root] .m-map-wrap {
  position: relative;
  touch-action: pan-y !important;
}
[data-mobile-app-root] .m-map-wrap.is-interactive {
  touch-action: none !important;
}
[data-mobile-app-root] .m-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.32);
  color: #f5f6f7;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 16px;
  cursor: pointer;
  transition: opacity 0.2s;
}
[data-mobile-app-root] .m-map-overlay.is-hidden {
  pointer-events: none;
  opacity: 0;
}
[data-mobile-app-root] .m-map-overlay-pill {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Default tap cursor + tap-highlight suppression on the mobile root. */
[data-mobile-app-root] {
  -webkit-tap-highlight-color: transparent;
}
/* `touch-action: pan-y` lets vertical scrolling pass through interactive
   elements (.wx-tap is on metric chips, day rows, sheet items, buttons).
   Without this, iOS Safari may delay the scroll until it figures out the
   tap/long-press intent, producing the "sticky" feel reported by users.
   Horizontal-only scrollers override this back to pan-x above. */
[data-mobile-app-root] .wx-tap {
  cursor: pointer;
  touch-action: pan-y;
}
/* Same for the row class used by DayRow (it carries .wx-tap already, but
   the explicit selector helps for any direct .wx-row usage). */
[data-mobile-app-root] .wx-row {
  touch-action: pan-y;
}

/* Body lock — the `:has()` form below is the modern path, but bootstrap.jsx
   also sets these inline at mount time so older browsers without :has support
   still get a locked body. Both paths apply `overflow: hidden` + `position: fixed`
   so the desktop chrome underneath cannot win any touch events. */
html.m-mobile-active,
body.m-mobile-active,
body:has(#m-mobile-root) {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}

/* NUCLEAR scroll-routing fix: every interactive thing inside the mobile root
   yields to vertical pan unless explicitly opted-out below. iOS Safari +
   Android Chrome differ on what they assume when touch-action is `auto`,
   so we make the answer unambiguous. Form inputs are excluded so the on-
   screen keyboard works correctly. */
[data-mobile-app-root] *:not(input):not(textarea):not(select):not(button[type="submit"]) {
  touch-action: pan-y;
}
/* The PullToRefresh scroller is the canonical scroll surface. */
[data-mobile-app-root] > div > div[style*="overflow-y: auto"],
[data-mobile-app-root] > div > div[style*="overflowY: auto"] {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Status-bar safe area top padding for notched devices.
   Variant content uses paddingTop: 72 to clear the 58px blur band; this
   bumps it further on devices that report safe-area-inset-top. */
[data-mobile-app-root] {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}