/* Mobile navigation: solid safe areas, a bottom sheet, and compact map controls. */
.mobile-menu-heading { display:none; }

@media (max-width:768px), (max-height:500px) and (max-width:1024px) {
  html, body { background:#0f172a !important; }
  body .header,
  body .header .weather-section,
  body .header .weather-content {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    box-shadow:none !important;
  }
  body .header { background:#0f172a !important; background-image:none !important; }
  body .header::before, body .header::after { content:none !important; display:none !important; }
  body .header .title, body .header .logo, body .header .weather-icon {
    text-shadow:none !important; filter:none !important; -webkit-filter:none !important; box-shadow:none !important;
  }
  body .header .weather-section { background:#1e293b !important; }

  body #sidebar.sidebar {
    position:fixed !important;
    top:auto !important;
    left:max(10px,var(--pt-safe-left)) !important;
    right:max(10px,var(--pt-safe-right)) !important;
    bottom:var(--pt-nav-space) !important;
    width:auto !important;
    height:auto !important;
    max-height:calc(var(--pt-viewport-height) - var(--pt-header-height) - var(--pt-nav-space) - 16px) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    padding:16px !important;
    margin:0 !important;
    border:1px solid var(--border-color) !important;
    border-radius:24px !important;
    background:#0f172a !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 12px 40px rgba(0,0,0,.28) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(calc(100% + var(--pt-nav-space))) !important;
    transition:transform .28s cubic-bezier(.22,1,.36,1), visibility 0s .28s !important;
    z-index:1003 !important;
  }
  body #sidebar.sidebar.show {
    transform:translateY(0) !important;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s !important;
  }
  body #backdrop {
    display:block !important;
    top:var(--pt-header-height) !important;
    background:rgba(2,6,23,.4) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility 0s .2s;
    z-index:1002 !important;
  }
  body #backdrop.show { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
  body #sidebar .mobile-menu-heading {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    order:0; flex:none; margin:0; padding:0;
  }
  .mobile-menu-heading h2 { margin:0; font-size:18px; line-height:1.3; letter-spacing:-.025em; color:var(--text-light); }
  #mobileMenuClose {
    display:grid; place-items:center; flex:none; width:44px; height:44px; min-height:44px;
    padding:0; border:1px solid var(--border-color); border-radius:50%; background:#1e293b; color:#cbd5e1;
  }
  #mobileMenuClose svg { width:18px; height:18px; }
  body #sidebar .sidebar-section, body #sidebar .search-section {
    flex:none !important; padding:0 !important; margin:0 !important; border:0 !important;
  }
  body #sidebar #search-container { order:1; }
  body #sidebar #action-buttons { order:2; display:block !important; }
  body #sidebar #addNewMarkerBtn { display:none !important; }
  body #sidebar #inspireBtn { margin:0 !important; min-height:44px !important; height:auto !important; padding:10px 12px !important; font-size:13px !important; box-shadow:none !important; }
  body #sidebar .mobile-map-filters { order:3; }
  body #sidebar .section-title { margin:0 0 9px !important; font-size:12px !important; font-weight:600; color:var(--text-medium); }
  body #sidebar .section-title svg { display:none; }
  body #sidebar .filter-buttons { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; margin:0 !important; }
  body #sidebar .filter-buttons .filter-btn {
    min-height:54px !important; height:auto !important; padding:10px !important; gap:6px !important;
    border-radius:12px !important; font-size:12px !important; box-shadow:none !important; white-space:normal !important;
  }
  body #sidebar .filter-buttons .filter-btn > span:first-child { gap:6px !important; min-width:0; text-align:left; }
  body #sidebar .filter-buttons .filter-btn svg { flex:none; width:16px !important; height:16px !important; min-width:16px !important; }
  body #sidebar .btn-count { padding:1px 5px !important; font-size:10px !important; min-width:22px; }
  body #sidebar .info-cards { order:4; flex:none; margin:0 !important; }
  body #sidebar .info-cards:has(#syncCard[style*="none"]) { display:none; }
  body #sidebar .sidebar-settings { order:5; flex:none; margin:0 !important; padding:10px 0 0 !important; }
  body #sidebar .sidebar-settings button { min-height:44px !important; height:auto !important; padding:8px 12px !important; font-size:12px !important; box-shadow:none !important; }
  body #sidebar .leaflet-control-geocoder { margin:0 !important; width:100% !important; border-radius:12px !important; box-shadow:none !important; }
  body #sidebar .leaflet-control-geocoder-form { min-width:0 !important; }
  body #sidebar .leaflet-control-geocoder-form input { height:46px !important; font-size:16px !important; }
  body #sidebar .leaflet-control-geocoder-alternatives { position:static !important; max-height:180px !important; overflow-y:auto !important; width:100% !important; }
  body #sidebar :is(button,input,a):focus-visible { outline:2px solid var(--color-brand); outline-offset:2px; }

  body .mobile-nav { background:#111827 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 4px 18px rgba(0,0,0,.18) !important; z-index:1004 !important; }
  body .mobile-nav #navBtnMenu[aria-expanded="true"] { color:var(--color-brand) !important; }
  body .header .userbox { display:none !important; }
}

@media (max-width:768px) and (orientation:portrait) {
  :root { --pt-header-height:calc(48px + var(--pt-safe-top)); --pt-nav-space:calc(72px + var(--pt-safe-bottom)); }
  body .header-left, body .header-right { height:48px !important; gap:8px !important; }
  body .header .logo { width:28px !important; height:28px !important; min-width:28px !important; }
  body .header .title { font-size:20px !important; }
  body .header .weather-section { min-width:0 !important; height:36px !important; min-height:36px !important; padding:3px 9px !important; border-radius:12px !important; }
  body .header .weather-content { gap:5px !important; }
  body .header .weather-icon { width:23px !important; height:23px !important; }
  body .header .weather-temp { font-size:12px !important; line-height:1.2 !important; }
  body .header .weather-location { max-width:104px !important; font-size:10px !important; line-height:1.2 !important; }
  body .mobile-nav { height:56px !important; min-height:56px !important; max-height:56px !important; border-radius:20px !important; }
  body .mobile-nav .nav-btn { height:48px !important; }
  body .mobile-nav .nav-profile-visual { width:28px !important; height:28px !important; }
  body .mobile-nav .nav-btn > svg { width:22px !important; height:22px !important; }
  body .mobile-nav .nav-btn.primary div { width:40px !important; height:40px !important; border-radius:13px !important; box-shadow:none !important; }
  body .mobile-nav .nav-btn.primary svg { width:24px !important; height:24px !important; }
  #mobilePlaceSurface .leaflet-popup-content-wrapper,
  #mobilePlaceSurface .saved-popup-card { background:#0f172a !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  #mobilePlaceSurface .saved-popup-top-bar {
    position:sticky !important; top:-12px !important; z-index:20 !important;
    background:#0f172a !important; padding-top:10px !important; margin-top:-10px !important;
  }
  #mobilePlaceSurface .saved-popup-close-btn { box-shadow:none !important; }
  #mobilePlaceSurface .saved-popup-title { font-size:17px !important; }
  #mobilePlaceSurface .saved-popup-media-col .carousel { --phone-photo-height:clamp(150px,23dvh,190px); }
  #mobilePlaceSurface .saved-popup-media-col .carousel-thumbs .t { border-width:1px !important; box-shadow:none !important; border-radius:7px !important; }
  #mobilePlaceSurface .saved-popup-minimap-col, #mobilePlaceSurface .saved-popup-minimap-canvas { height:112px !important; min-height:112px !important; max-height:112px !important; }
  #mobilePlaceSurface .saved-popup-actions-wrap:has(.saved-popup-memory-btn) { display:block !important; }
  #mobilePlaceSurface .saved-popup-memory-btn { margin-bottom:6px !important; }
  #mobilePlaceSurface .saved-popup-btn, #mobilePlaceSurface .saved-popup-memory-btn { box-shadow:none !important; }
  /* Only the primary map's credits move; mini-map controls retain their own geometry. */
  #map > .leaflet-control-container > .leaflet-bottom { bottom:calc(var(--pt-nav-space) + 5px) !important; }
  #map > .leaflet-control-container .leaflet-control-attribution { max-width:calc(100vw - 20px); white-space:normal; font-size:9px !important; line-height:1.25 !important; }
  #mobilePlaceSurface .leaflet-control-container .leaflet-bottom { bottom:0 !important; }
  #mobilePlaceSurface .leaflet-control-attribution { font-size:8px !important; }
}
@media (orientation:landscape) and (max-height:500px) and (max-width:1024px) {
  body #sidebar.sidebar { right:var(--pt-rail-space) !important; bottom:calc(var(--pt-safe-bottom) + 8px) !important; max-height:calc(var(--pt-viewport-height) - var(--pt-header-height) - var(--pt-safe-bottom) - 16px) !important; }
}
@media (prefers-reduced-motion:reduce) {
  body #sidebar.sidebar, body #backdrop { transition:none !important; }
}

/* Photo geometry must never resize the place card while browsing the carousel. */
.custom-modern-saved-popup .saved-popup-media-col .carousel-main {
  position: relative !important;
  overflow: hidden !important;
}
.custom-modern-saved-popup .saved-popup-media-col .carousel-main > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}
/* Default applies at every viewport height; mobile ID rules keep their compact sizing. */
  .custom-modern-saved-popup .saved-popup-card .saved-popup-media-col .carousel .carousel-main,
  .custom-modern-saved-popup .saved-popup-card.sparse.has-photo .saved-popup-media-col .carousel .carousel-main {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    flex: 0 0 240px !important;
  }

/* Portrait map chrome: float over the map and respect the iPhone safe areas. */
@media (max-width:768px) and (orientation:portrait) {
  :root {
    --pt-header-height:calc(var(--pt-safe-top) + 80px);
    --pt-nav-space:calc(var(--pt-safe-bottom) + 80px);
  }
  body .main-container {
    top:0 !important;
    height:var(--pt-viewport-height) !important;
  }
  body .header {
    position:fixed !important;
    top:calc(var(--pt-safe-top) + 12px) !important;
    left:max(16px,var(--pt-safe-left)) !important;
    right:max(16px,var(--pt-safe-right)) !important;
    width:auto !important;
    height:56px !important;
    min-height:56px !important;
    padding:0 12px !important;
    gap:10px !important;
    box-sizing:border-box !important;
    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:28px !important;
    background:rgba(17,28,37,.92) !important;
    box-shadow:0 4px 20px rgba(0,0,0,.2) !important;
    z-index:1001 !important;
  }
  body .header-left, body .header-right { height:54px !important; }
  body .header-left { flex:0 0 auto !important; gap:7px !important; }
  body .header-right { flex:1 1 0 !important; justify-content:flex-end !important; min-width:0 !important; }
  body .header .title { font-size:19px !important; }
  body .header .logo { width:27px !important; height:27px !important; min-width:27px !important; }
  body .header .weather-section {
    background:transparent !important;
    border:0 !important;
    border-left:1px solid rgba(255,255,255,.12) !important;
    border-radius:0 !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 0 0 10px !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  body .header .weather-content { min-width:0 !important; }
  body .header .weather-content > div { min-width:0 !important; }
  body .header .weather-temp { font-size:14px !important; }
  body .header .weather-location { max-width:110px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
  body .mobile-nav {
    bottom:calc(var(--pt-safe-bottom) + 8px) !important;
    left:max(16px,var(--pt-safe-left)) !important;
    right:max(16px,var(--pt-safe-right)) !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    border-radius:32px !important;
    background:rgba(17,28,37,.94) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    padding:4px 12px !important;
  }
  body .mobile-nav .nav-btn { height:54px !important; gap:3px !important; }
  body .mobile-nav .nav-btn span { font-size:11px !important; line-height:14px !important; }
  body .mobile-nav .nav-btn.primary div { width:44px !important; height:44px !important; border-radius:22px !important; }
  #mobilePlaceSurface .custom-modern-saved-popup { top:var(--pt-header-height) !important; }
  #map > .leaflet-control-container > .leaflet-top { top:var(--pt-header-height) !important; }
}
@media (max-width:360px) and (orientation:portrait) {
  body .header .title { font-size:17px !important; }
  body .header .weather-location { max-width:76px !important; }
}

/* The installed app must paint the map beneath both system safe areas. */
@media (max-width:768px), (max-height:500px) and (max-width:1024px) {
  html.pwa-mode, html.pwa-mode body { height:100lvh !important; max-height:none !important; }
  html.pwa-mode body .main-container {
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100lvh !important;
    max-height:none !important;
    overflow:hidden !important;
  }
  html.pwa-mode body .main-container .map-container,
  html.pwa-mode body .main-container #map {
    height:100% !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
  }
  html::before, html::after, body::before, body::after {
    content:none !important;
    display:none !important;
  }
  /* Remove glass filters from the map chrome and modal backdrops on mobile. */
  body *, body *::before, body *::after {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

@media (max-width:768px) and (orientation:portrait) {
  html body .header {
    top:calc(var(--pt-safe-top) + 20px) !important;
    background:#111c25 !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  html body .header *, html body .header::before, html body .header::after {
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  :root { --pt-header-height:calc(var(--pt-safe-top) + 88px); }
}

@media (max-width:768px) and (orientation:portrait) {
  html body .mobile-nav {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) !important;
    align-items:center !important;
    justify-items:center !important;
  }
  html body .mobile-nav .nav-btn { width:100% !important; margin:0 !important; transform:none !important; }
  html body .mobile-nav #navBtnAdd {
    width:48px !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 !important;
    gap:0 !important;
    align-self:center !important;
    justify-self:center !important;
  }
  html body .mobile-nav #navBtnAdd > div {
    width:44px !important;
    height:44px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
  }
  html body .mobile-nav #navBtnAdd svg { margin:0 !important; transform:none !important; display:block !important; }
}

/* Guidance sits below the floating header, outside the system status area. */
@media (max-width:768px), (max-height:500px) and (max-width:1024px) {
  html body #markerPositionNotice,
  html body #toastContainer,
  html body #toastContainer:popover-open {
    top:calc(var(--pt-header-height) + 8px) !important;
    bottom:auto !important;
    left:max(16px,var(--pt-safe-left)) !important;
    right:max(16px,var(--pt-safe-right)) !important;
    width:auto !important;
    max-width:none !important;
    transform:none !important;
    box-sizing:border-box !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
  }
  html body #markerPositionNotice { font-size:13px; line-height:1.4; }
}