/* One mobile layout owner. Layered !important rules replace old unlayered patches. */
@layer avalon-mobile {
  #mapTitleBadge { justify-content:center !important; }
  #mapTitleText { text-align:center !important; }
  .leaflet-flood-pane .leaflet-image-layer { transition:none !important; animation:none !important; }
  .timeline-day-arrow { display:none !important; }
  #nativeRoadNamesHint { display:none !important; }
  .basemap-includes-labels #roadNamesControl { display:none !important; }
  .basemap-includes-labels #nativeRoadNamesHint { display:block !important; margin:4px 0 0 !important; color:#b6c5d8 !important; font:13px/1.4 system-ui !important; }
  @media (max-width:900px), (max-height:560px) and (pointer:coarse) {
    html, body { width:100% !important; height:100% !important; min-width:0 !important; overflow:hidden !important; }
    #app, #mapWrap { position:fixed !important; inset:0 !important; width:100% !important; height:100dvh !important; min-width:0 !important; min-height:0 !important; margin:0 !important; transform:none !important; }
    #map { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; }
    #mapTitleBadge {
      position:fixed !important; top:calc(8px + env(safe-area-inset-top)) !important;
      left:calc(8px + env(safe-area-inset-left)) !important; right:calc(8px + env(safe-area-inset-right)) !important;
      bottom:auto !important; width:auto !important; max-width:none !important; min-height:44px !important; height:44px !important;
      transform:none !important; display:flex !important; align-items:center !important; justify-content:center !important;
      gap:10px !important; padding:6px 12px !important; border-radius:12px !important;
      background:#152132 !important; z-index:6100 !important; box-sizing:border-box !important;
    }
    #mapTitleBadge #mapTitleText { font-size:17px !important; line-height:1.2 !important; letter-spacing:0 !important; white-space:nowrap !important; min-width:0 !important; margin:0 auto !important; max-width:calc(100% - 72px) !important; }
    #mapTitleBadge #mapTitleLogo { position:absolute !important; left:12px !important; display:block !important; width:30px !important; height:30px !important; min-width:30px !important; max-width:30px !important; object-fit:contain !important; }
    #mapTitleBadge #mapTitlePartnerLogo { display:none !important; }
    #mobileControlsToggle, #legendDock {
      position:fixed !important; top:calc(60px + env(safe-area-inset-top)) !important; bottom:auto !important;
      height:44px !important; min-height:44px !important; max-height:44px !important; margin:0 !important;
      transform:none !important; padding:0 !important; border:1px solid #677a93 !important;
      border-radius:12px !important; background:#152132 !important; color:#fff !important;
      z-index:6200 !important; box-sizing:border-box !important; overflow:hidden !important;
      visibility:visible !important; opacity:1 !important; pointer-events:auto !important;
      transition:none !important; animation:none !important;
    }
    #mobileControlsToggle { left:104px !important; right:104px !important; width:auto !important; min-width:0 !important; max-width:none !important; display:flex !important; }
    #mobileControlsToggle > * { display:none !important; }
    #mobileControlsToggle::after { content:"Controls" !important; color:#fff !important; -webkit-text-fill-color:#fff !important; font:700 15px/44px system-ui !important; width:100% !important; height:44px !important; text-align:center !important; }
    .mobile-controls-open #mobileControlsToggle::after { content:"Close" !important; }
    #legendDock { left:calc(8px + env(safe-area-inset-left)) !important; right:auto !important; width:90px !important; min-width:90px !important; max-width:90px !important; display:block !important; }
    body:not(.mobile-legend-open) #legendDock > * { display:none !important; }
    body:not(.mobile-legend-open) #legendDock::after { content:"Map key" !important; display:block !important; font:700 14px/42px system-ui !important; color:#fff !important; text-align:center !important; }
    .mobile-legend-open #legendDock { top:calc(112px + env(safe-area-inset-top)) !important; left:8px !important; right:8px !important; width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; max-height:calc(100dvh - 294px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; overflow-y:auto !important; padding:14px !important; }
    .mobile-legend-open #legendDock::after { content:none !important; }
    .mobile-legend-open #legendDock .legend-header { display:flex !important; padding:0 !important; margin:0 0 10px !important; min-height:32px !important; }
    .mobile-legend-open #legendDock .legend-list { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px 12px !important; }
    .mobile-legend-open #legendDock .legend-row { display:grid !important; grid-template-columns:14px minmax(0,1fr) !important; gap:8px !important; min-height:22px !important; font:14px/1.3 system-ui !important; }
    .mobile-legend-open #legendDock .legend-label { font:14px/1.3 system-ui !important; white-space:normal !important; }
    .mobile-legend-open #legendDock .legend-swatch { width:14px !important; height:14px !important; }
    #shorelyLegendOriginPill, #shorelyRotateNotice, #shorelyMobileSliderKey, #shorelyMobileSliderHelpBtn, #shorelyMobileLegendHelpBtn { display:none !important; }
    .leaflet-top.leaflet-right { position:fixed !important; top:calc(60px + env(safe-area-inset-top)) !important; right:calc(8px + env(safe-area-inset-right)) !important; left:auto !important; z-index:6200 !important; }
    .leaflet-top.leaflet-right .leaflet-control-zoom { position:static !important; display:flex !important; width:88px !important; height:44px !important; margin:0 !important; transform:none !important; border-radius:12px !important; overflow:hidden !important; }
    .leaflet-control-zoom a { width:44px !important; min-width:44px !important; height:44px !important; line-height:44px !important; font-size:26px !important; box-sizing:border-box !important; }
    #timelineDock {
      position:fixed !important; left:calc(8px + env(safe-area-inset-left)) !important; right:calc(8px + env(safe-area-inset-right)) !important;
      bottom:calc(8px + env(safe-area-inset-bottom)) !important; top:auto !important; transform:none !important;
      width:auto !important; max-width:none !important; min-width:0 !important; height:160px !important; min-height:160px !important; max-height:160px !important;
      margin:0 !important; padding:8px !important; background:#152132 !important; border:1px solid #677a93 !important; border-radius:16px !important;
      box-sizing:border-box !important; overflow:hidden !important; z-index:6100 !important;
    }
    #timelineDock .timeline-top, #timelineDock .timeline-controls { display:contents !important; }
    #playBtn { position:absolute !important; left:8px !important; top:8px !important; right:auto !important; bottom:auto !important; width:44px !important; height:44px !important; min-width:44px !important; max-width:44px !important; min-height:44px !important; max-height:44px !important; margin:0 !important; transform:none !important; }
    #timelineBubble { position:absolute !important; left:62px !important; right:8px !important; top:8px !important; bottom:auto !important; width:auto !important; min-width:0 !important; max-width:none !important; height:44px !important; min-height:44px !important; margin:0 !important; transform:none !important; padding:0 !important; display:flex !important; justify-content:space-between !important; align-items:center !important; gap:8px !important; font:700 15px/1.2 system-ui !important; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; white-space:normal !important; overflow:hidden !important; }
    #timelineBubble *, #timelineBubble .timeline-bubble-stage { font-size:15px !important; line-height:1.2 !important; }
    #timelineBubble .timeline-bubble-current { min-width:0 !important; max-width:none !important; flex:1 1 auto !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
    #timelineBubble .timeline-bubble-stage { flex:0 0 auto !important; white-space:nowrap !important; }
    #timelineBubble::before, #timelineBubble::after { display:none !important; }
    #timelineMeta, #timelineFloodKey, #timelineStart, #timelineEnd { display:none !important; }
    .timeline-day-arrow { position:absolute !important; top:58px !important; width:72px !important; min-width:44px !important; height:44px !important; min-height:44px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; padding:4px !important; margin:0 !important; border:1px solid #677a93 !important; border-radius:8px !important; background:#23354c !important; color:#fff !important; font:700 24px/1 system-ui !important; cursor:pointer !important; touch-action:manipulation; }
    .timeline-day-arrow .neighbor-day { font:600 12px/1.2 system-ui !important; }
    .timeline-day-arrow:disabled { opacity:.45 !important; cursor:default !important; }
    .timeline-day-arrow:focus-visible { outline:2px solid #fff !important; outline-offset:2px !important; }
    #timelinePreviousDay { left:8px !important; }
    #timelineNextDay { right:8px !important; }
    #timelineDayTabs { position:absolute !important; left:86px !important; right:86px !important; top:58px !important; bottom:auto !important; width:auto !important; min-width:0 !important; max-width:none !important; height:44px !important; min-height:44px !important; max-height:44px !important; margin:0 !important; padding:0 !important; display:flex !important; gap:0 !important; overflow:hidden !important; border:0 !important; background:none !important; transform:none !important; }
    #timelineDayTabs .timeline-day { flex:1 1 100% !important; width:100% !important; min-width:0 !important; max-width:none !important; height:44px !important; min-height:44px !important; font:700 16px/1.2 system-ui !important; padding:6px !important; border-radius:8px !important; box-sizing:border-box !important; background:#23354c !important; border:2px solid #cfe8ff !important; color:#fff !important; clip-path:none !important; }
    #timelineDayTabs .timeline-day:not(.active) { display:none !important; }
    #timelineDock.top-tide-crest-only .timeline-day-arrow { display:none !important; }
    #timelineDock .timeline-trackRow { position:absolute !important; top:108px !important; left:8px !important; right:8px !important; bottom:auto !important; width:auto !important; max-width:none !important; min-width:0 !important; height:44px !important; min-height:44px !important; max-height:44px !important; margin:0 !important; padding:0 !important; display:block !important; }
    #hourSlider { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; height:44px !important; min-height:44px !important; margin:0 !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; touch-action:pan-y !important; position:relative !important; z-index:2 !important; }
    #hourSlider::-webkit-slider-runnable-track { height:6px !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
    #hourSlider::-moz-range-track, #hourSlider::-moz-range-progress { height:6px !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
    #hourSlider::-webkit-slider-thumb { width:28px !important; height:28px !important; margin-top:-11px !important; }
    #hourSlider::-moz-range-thumb { width:28px !important; height:28px !important; }
    #pjBlueSliderExactTrackLine { display:block !important; position:absolute !important; left:14px !important; right:14px !important; width:auto !important; top:19px !important; height:6px !important; background:var(--timeline-day-gradient, #718096) !important; border:0 !important; border-radius:3px !important; box-shadow:none !important; z-index:1 !important; pointer-events:none !important; }
    #leftPanel { display:none !important; }
    .mobile-controls-open #leftPanel {
      display:flex !important; position:fixed !important; flex-direction:column !important; left:8px !important; right:8px !important;
      top:calc(112px + env(safe-area-inset-top)) !important; bottom:calc(8px + env(safe-area-inset-bottom)) !important;
      width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; max-height:none !important;
      margin:0 !important; padding:12px !important; gap:12px !important; transform:none !important;
      overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
      border-radius:16px !important; background:#152132 !important; z-index:7000 !important; visibility:visible !important; opacity:1 !important;
    }
    .mobile-controls-open #leftPanel > #mobileControlsClose { position:sticky !important; top:0 !important; right:auto !important; left:auto !important; align-self:flex-end !important; display:block !important; width:44px !important; min-width:44px !important; max-width:44px !important; height:44px !important; min-height:44px !important; flex:0 0 44px !important; margin:0 !important; font-size:26px !important; background:#23354c !important; z-index:5 !important; }
    #leftPanel .panel-card, #leftPanel .rail-card, #mobileRailMount { height:auto !important; min-height:0 !important; max-height:none !important; flex-shrink:0 !important; overflow:visible !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
    #leftPanel .panel-card, #leftPanel .rail-card { padding:12px !important; margin:0 !important; }
    #mobileRailMount { display:flex !important; flex-direction:column !important; gap:12px !important; }
    #leftPanel h2, #leftPanel h3, #leftPanel .section-title { font-size:15px !important; line-height:1.35 !important; }
    #leftPanel button, #leftPanel input, #leftPanel select, .datum-modal button, .download-modal button { min-height:44px !important; font-size:16px !important; touch-action:manipulation; }
    #leftPanel .help-btn { min-width:44px !important; width:44px !important; height:44px !important; }
    #leftPanel .button-grid-2, #leftPanel .button-grid-3 { display:grid !important; gap:8px !important; }
    #leftPanel .button-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    #leftPanel .button-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
    #leftPanel button { color:#f5f8ff !important; }
    #leftPanel button.active { background:#1f5268 !important; border-color:#53c5d5 !important; color:#fff !important; }
    .mobile-controls-open #timelineDock, .mobile-controls-open #legendDock, .mobile-controls-open .leaflet-control-zoom { visibility:hidden !important; pointer-events:none !important; }
    .mobile-controls-open #legendDock { display:none !important; }
    #mobileDrawerBackdrop { position:fixed !important; inset:0 !important; background:rgba(0,0,0,.35) !important; z-index:6300 !important; }
    .mobile-controls-open #mobileDrawerBackdrop { display:block !important; }
    .mobile-controls-open #mobileControlsToggle { z-index:7100 !important; }
    #topBanner.alert { top:calc(112px + env(safe-area-inset-top)) !important; left:8px !important; right:8px !important; width:auto !important; min-width:0 !important; max-width:none !important; transform:none !important; border-radius:16px !important; padding:10px 12px !important; box-sizing:border-box !important; z-index:6400 !important; }
    #topBanner .banner-text { flex:1 1 auto !important; min-width:0 !important; }
    #topBanner .banner-title { white-space:normal !important; font-size:14px !important; }
    #topBanner .banner-meta { white-space:normal !important; font-size:12px !important; }
    #topBanner #bannerCount { display:none !important; }
    #topBanner #topBannerCloseBtn { width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; flex:0 0 44px !important; }
    .mobile-controls-open #topBanner { display:none !important; }
    .leaflet-bottom { bottom:calc(174px + env(safe-area-inset-bottom)) !important; }
    .leaflet-control-attribution { display:block !important; opacity:1 !important; transform:none !important; font-size:9px !important; max-width:90vw !important; }
    #toast { bottom:calc(180px + env(safe-area-inset-bottom)) !important; left:12px !important; right:12px !important; width:auto !important; max-width:none !important; transform:none !important; font-size:14px !important; }
    #toastCloseBtn { min-width:44px !important; min-height:44px !important; }
    .top-tides-modal, .datum-modal, .download-modal { z-index:12000 !important; }
    .top-tides-modal-card, .datum-modal-card, .download-modal-card { max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; overflow-y:auto !important; }
    .top-tides-modal-open #mapTitleBadge, .top-tides-modal-open #mobileControlsToggle, .top-tides-modal-open #legendDock { visibility:hidden !important; }
  }
  @media (max-height:560px) and (pointer:coarse) and (orientation:landscape) {
    #mapTitleBadge { right:344px !important; }
    #mapTitleBadge #mapTitleText { font-size:15px !important; }
    #legendDock { top:8px !important; right:240px !important; left:auto !important; }
    #mobileControlsToggle { top:8px !important; right:104px !important; left:auto !important; width:128px !important; }
    .leaflet-top.leaflet-right { top:8px !important; }
    #timelineDock { height:112px !important; min-height:112px !important; max-height:112px !important; }
    #timelineBubble { right:auto !important; width:180px !important; }
    #timelinePreviousDay { top:8px !important; left:254px !important; }
    #timelineNextDay { top:8px !important; }
    #timelineDayTabs { top:8px !important; left:332px !important; }
    #timelineDock .timeline-trackRow { top:60px !important; }
    .mobile-controls-open #leftPanel { top:60px !important; }
    .mobile-legend-open #legendDock { top:60px !important; left:8px !important; right:8px !important; max-height:calc(100dvh - 196px) !important; }
    #topBanner.alert { top:60px !important; }
    #toast { bottom:130px !important; }
    .leaflet-bottom { bottom:126px !important; }
  }
  @media (max-width:640px) and (max-height:560px) and (pointer:coarse) and (orientation:landscape) {
    #mapTitleBadge #mapTitleText { font-size:13px !important; white-space:normal !important; line-height:1.1 !important; }
  }
}

/* The borough mappers share Avalon's shell but also include the 3D view and
   older inline mobile layout patches. Keep the same touch layout for both. */
@layer avalon-mobile {
  @media (max-width:900px), (max-height:560px) and (pointer:coarse) {
    #mapWrap #map3d { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; }
    #mapTitleBadge #mapTitleText { font-size:clamp(12px, 3.4vw, 17px) !important; line-height:1.12 !important; white-space:normal !important; overflow-wrap:normal !important; text-overflow:clip !important; max-width:100% !important; }
    #mapTitleBadge #mapTitleLogo { display:none !important; }
    #mapTitleBadge #mapTitlePartnerLogo { display:none !important; }
    #mobileControlsToggle::after { display:block !important; visibility:visible !important; opacity:1 !important; }
    #legendDock { cursor:pointer !important; }
    #legendDock .depth-legend-labels { max-width:100% !important; }
    .mobile-legend-open #legendDock .legend-body,
    .mobile-legend-open #legendDock .legend-header,
    .mobile-legend-open #legendDock .legend-list { display:block !important; }
    .mobile-legend-open #legendDock .legend-header-text { display:block !important; }
    body.mobile-legend-open #legendDock::before { content:none !important; display:none !important; margin:0 !important; }
    .mobile-legend-open #legendDock .legend-list { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .mobile-legend-open #legendDock .legend-row { display:grid !important; }
    #timelineDock #timelineDayTabs { display:flex !important; }
    #timelineDock #timelineDayTabs .timeline-day:not(.active) { display:none !important; }
    #timelineDock #timelineDayTabs .timeline-day.active { display:flex !important; align-items:center !important; justify-content:center !important; }
    #timelineDock #timelineBubble { display:flex !important; }
    #timelineDock #hourSlider { height:44px !important; min-height:44px !important; max-height:44px !important; }
    #timelineDock #hourSlider::-webkit-slider-thumb { width:28px !important; height:28px !important; margin-top:-11px !important; }
    #timelineDock #hourSlider::-moz-range-thumb { width:28px !important; height:28px !important; }
    #timelineDock #pjBlueSliderExactTrackLine { display:block !important; visibility:visible !important; width:auto !important; min-width:0 !important; max-width:none !important; height:6px !important; min-height:6px !important; max-height:6px !important; }
    #leftPanel #mobileControlsClose { display:block !important; }
    #leftPanel > #timelineIntervalToggle { position:relative !important; inset:auto !important; transform:none !important; display:flex !important; align-items:center !important; gap:8px !important; flex:0 0 auto !important; width:100% !important; min-width:0 !important; max-width:100% !important; height:auto !important; min-height:56px !important; max-height:none !important; margin:0 !important; padding:8px !important; border:1px solid #677a93 !important; border-radius:12px !important; background:#23354c !important; box-sizing:border-box !important; }
    #leftPanel > #timelineIntervalToggle button { position:static !important; flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:none !important; height:44px !important; min-height:44px !important; margin:0 !important; transform:none !important; }
    #rightRail { display:none !important; }
    #mobileRailMount { display:flex !important; }
    #nwDefaultNavControl { position:fixed !important; right:8px !important; top:calc(112px + env(safe-area-inset-top)) !important; left:auto !important; bottom:auto !important; z-index:6100 !important; transform:none !important; max-height:calc(100dvh - 310px) !important; }
    body:has(#topBanner.alert) #nwDefaultNavControl { top:calc(184px + env(safe-area-inset-top)) !important; }
    body:has(#topBanner.alert).mobile-legend-open #legendDock { top:calc(184px + env(safe-area-inset-top)) !important; max-height:calc(100dvh - 368px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
    .mobile-controls-open #nwDefaultNavControl,
    .mobile-legend-open #nwDefaultNavControl { visibility:hidden !important; pointer-events:none !important; }
    #mapClickModeControl:not([hidden]) { position:fixed !important; left:8px !important; right:auto !important; top:auto !important; bottom:calc(176px + env(safe-area-inset-bottom)) !important; z-index:6100 !important; max-width:calc(100vw - 16px) !important; }
    .mobile-controls-open #mapClickModeControl { display:none !important; }
  }
  @media (max-height:560px) and (pointer:coarse) and (orientation:landscape) {
    #nwDefaultNavControl { top:60px !important; }
    #mapClickModeControl:not([hidden]) { bottom:128px !important; }
  }
}