/* ============================================================
   platform.css — Platform-adaptive design tokens
   ============================================================
   Android (Material Design 3): html.is-android
   iOS (Apple HIG / Liquid Glass):  @supports (-webkit-touch-callout: none)
   Desktop (pointer/hover):  @media (hover: hover) and (pointer: fine)

   Load order: after common.css and map.css so overrides cascade correctly.
   ============================================================ */

/* ============================================================
   ANDROID — Material Design 3 / Material You
   ============================================================
   M3 shape scale: XS=4dp · S=8dp · M=12dp · L=16dp · XL=28dp · Full≈50%
   Filled button: Full shape (20dp radius), Medium weight (500), ls 0.025em
   ============================================================ */

/* M3 corner radii via CSS overrides */

/* Filled & outlined buttons → M3 Full shape (pill) */
html.is-android .btn {
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 0.025em;
}
html.is-android .btn-sm {
  border-radius: 20px;
}

/* Icon buttons → M3 Icon Button = circular */
html.is-android .btn-icon {
  border-radius: 50%;
}

/* Panel close button → circular icon button */
html.is-android .panel-close {
  border-radius: 50%;
}

/* Stats card → M3 Medium shape (12dp) */
html.is-android .stats-bar {
  border-radius: 12px;
  /* M3 elevation 2: lighter shadow */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
}
@media (max-width: 768px) {
  /* M3 Large (16dp) for floating card on mobile */
  html.is-android .stats-bar {
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.08);
  }
}

/* M3 Chips → Small shape (8dp) */
html.is-android .stat-chip {
  border-radius: 8px;
  font-weight: 500;
  padding: 0 12px;
  gap: 4px;
}

/* M3 FAB → standard FAB has 16dp (Large) not 50% */
html.is-android .fab {
  border-radius: 16px;
  /* M3 elevation 3 */
  box-shadow:
    0 1px 3px rgba(0,0,0,0.16),
    0 4px 8px rgba(0,0,0,0.12),
    0 1px 18px rgba(0,0,0,0.08);
}

/* M3 Bottom sheet → 16dp top corners (Large shape) */
@media (max-width: 768px) {
  html.is-android .panel {
    border-radius: 16px 16px 0 0;
  }
  html.is-android .modal-card {
    border-radius: 16px 16px 0 0;
  }
  html.is-android .pwa-sheet {
    border-radius: 16px 16px 0 0;
  }
  html.is-android .share-sheet {
    border-radius: 16px 16px 0 0;
  }
  /* M3 drag handle: 32px wide, 4dp, low-contrast */
  html.is-android .panel-header::before {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,0.12);
  }
  html.is-android[data-theme="dark"] .panel-header::before {
    background: rgba(255,255,255,0.14);
  }

  /* Header: balanced vertical padding so content is vertically centered.
     On Android with viewport-fit=cover, --sat is the status bar height.
     padding-top = 14px + SAT (covers behind status bar); padding-bottom = 14px.
     Visually: 14px visible above content, 14px below — balanced. */
  html.is-android .header {
    padding-top: max(14px, calc(14px + var(--sat)));
    padding-bottom: 14px;
  }
  /* Adjust map height and mobile-menu position for the 2px taller base padding
     (14px vs 12px on each side → +4px total → 57px+4=61px) */
  html.is-android #map {
    height: calc(100dvh - 61px - var(--sat));
  }
  html.is-android .mobile-menu {
    top: calc(61px + var(--sat));
  }
}

/* M3 text fields: Outlined variant → Extra Small shape (4dp) */
html.is-android .form-group input,
html.is-android .form-group select,
html.is-android .form-group textarea {
  border-radius: 4px;
}

/* M3 layer picker card: Medium (12dp) */
html.is-android .layer-picker {
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.08);
  border-color: transparent;
}
html.is-android .layer-picker-panel {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
}

/* M3 popups */
html.is-android .leaflet-popup-content-wrapper {
  border-radius: 12px !important;
}

/* M3 mode switcher: keeps brand accent indicator, updates container to flat M3 Surface */
html.is-android .mode-switcher {
  border-radius: 4px;
  background: var(--bg);
  border-color: var(--border);
}
html.is-android .mode-btn {
  border-radius: 2px;
  font-weight: 500;
  letter-spacing: 0.025em;
}
html.is-android .mode-indicator {
  border-radius: 2px;
}

/* M3 segmented control (report type pill) */
html.is-android .report-type-pill {
  border-radius: 4px;
}
html.is-android .type-btn {
  border-radius: 2px;
  font-weight: 500;
}

/* M3 share sheet buttons: Small shape (8dp) */
html.is-android .share-btn {
  border-radius: 8px;
}

/* M3 tonal surface in dark mode: primary color tinted overlay on elevated surfaces */
html.is-android[data-theme="dark"] .stats-bar {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
html.is-android[data-theme="dark"] .layer-picker {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

/* M3 Ripple: CSS-only radial ripple on interactive elements.
   NOTE: .fab is position:fixed — only add overflow:hidden (not position:relative)
   so it stays fixed to the viewport. btn/chip/ctrl are static/relative — safe. */
html.is-android .btn,
html.is-android .stat-chip,
html.is-android .stats-ctrl-btn {
  position: relative;
  overflow: hidden;
}
html.is-android .fab {
  overflow: hidden;
}
html.is-android .btn::after,
html.is-android .fab::after,
html.is-android .stat-chip::after,
html.is-android .stats-ctrl-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.28) 0%, transparent 65%);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1), opacity 0.5s cubic-bezier(0.2, 0, 0, 1);
  pointer-events: none;
  border-radius: inherit;
}
/* On primary/colored buttons use a darker ripple for contrast */
html.is-android .btn-primary::after,
html.is-android .fab::after {
  background: radial-gradient(circle at center, rgba(0,0,0,0.12) 0%, transparent 65%);
}
html.is-android .btn:active::after,
html.is-android .fab:active::after,
html.is-android .stat-chip:active::after,
html.is-android .stats-ctrl-btn:active::after {
  transform: scale(2.5);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

/* M3 map controls: Medium shape (12dp), Material-toned surface */
html.is-android .leaflet-bar {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.08) !important;
  border: none !important;
}
html.is-android .leaflet-bar a {
  background: var(--surface) !important;
  border-color: transparent !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 18px !important;
}
html.is-android .leaflet-bottom.leaflet-left .leaflet-control-zoom .leaflet-control-zoom-in {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
html.is-android .leaflet-bottom.leaflet-left .leaflet-control-zoom .leaflet-control-zoom-out {
  border-radius: 0 !important;
}
html.is-android .geo-control {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.08) !important;
}
html.is-android .geo-control a {
  background: var(--surface) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
}
html.is-android[data-theme="dark"] .leaflet-bar a {
  background: var(--surface) !important;
}
html.is-android[data-theme="dark"] .geo-control a {
  background: var(--surface) !important;
}

/* ============================================================
   iOS — Apple Human Interface Guidelines (iOS 17/18)
   Liquid Glass language: vibrancy, blur, rounded shapes
   Additions to what map.css already provides
   ============================================================ */

@supports (-webkit-touch-callout: none) {

  /* Header: vibrancy on mobile (floats above map content) */
  @media (max-width: 768px) {
    .header {
      background: rgba(245,243,240, 0.88);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom-color: rgba(0,0,0,0.06);
    }
    [data-theme="dark"] .header {
      background: rgba(26,26,30, 0.88);
      border-bottom-color: rgba(255,255,255,0.06);
    }
  }

  /* Map controls: vibrancy + softer radii */
  .leaflet-bar {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14) !important;
    border: none !important;
    background: transparent !important;
  }
  .leaflet-bar a {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-color: rgba(0,0,0,0.05) !important;
  }
  [data-theme="dark"] .leaflet-bar a {
    background: rgba(44,44,46,0.88) !important;
    border-color: rgba(255,255,255,0.07) !important;
  }
  /* Zoom buttons: rounder corners to match iOS sheet radii */
  .leaflet-bottom.leaflet-left .leaflet-control-zoom .leaflet-control-zoom-in {
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }
  .leaflet-bottom.leaflet-left .leaflet-control-zoom .leaflet-control-zoom-out {
    border-radius: 0 0 12px 12px !important;
  }
  [data-theme="dark"] .leaflet-bottom.leaflet-left .leaflet-control-zoom .leaflet-control-zoom-in {
    border-bottom-color: rgba(255,255,255,0.06) !important;
  }

  /* Geo button: vibrancy */
  .geo-control {
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14) !important;
  }
  .geo-control a {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-radius: 0 !important;
  }
  [data-theme="dark"] .geo-control a {
    background: rgba(44,44,46,0.88) !important;
  }

  /* Layer picker toggle: vibrancy + softer */
  .layer-picker {
    border-radius: 16px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  }
  [data-theme="dark"] .layer-picker {
    background: rgba(44,44,46,0.88);
    border-color: rgba(255,255,255,0.07);
  }
  /* Continuous corner curvature: inner elements match the outer 16px container.
     Formula: inner_radius = outer_radius − inset (toggle padding ≈ 2px → 14px; img inside toggle ≈ 4px → 8px). */
  .layer-picker-toggle { border-radius: 14px; }
  .layer-thumb-preview { border-radius: 8px; }
  /* iOS WebKit: overflow:hidden does not clip absolutely-positioned children unless
     a GPU compositing layer is forced. translateZ(0) is the canonical fix. */
  .layer-thumb-wrap {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* iOS Segmented Control style for mode switcher:
     Gray trough background; accent indicator slides (tinted iOS variant). */
  .mode-switcher {
    background: rgba(120,120,128,0.16);
    border-color: transparent;
    border-radius: 10px;
    padding: 2px;
  }
  [data-theme="dark"] .mode-switcher {
    background: rgba(120,120,128,0.28);
  }
  /* Indicator keeps accent/blue; add a subtle shadow so it reads as raised */
  .mode-indicator {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  }
  .mode-btn {
    font-weight: 600;
  }

  /* Stats ctrl buttons: pill tap zone (already 50% in map.css, reinforcing) */
  .stats-ctrl-btn {
    border-radius: 50%;
  }

  /* Chips: pill-like (rounder than map.css default 14px) */
  .stat-chip {
    border-radius: 20px;
  }

  /* Sheet & panel spring animation (slight iOS bounce) */
  @media (max-width: 768px) {
    .panel {
      transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pwa-sheet {
      transition-timing-function: cubic-bezier(0.34, 1.36, 0.64, 1);
    }
    .share-sheet {
      transition-timing-function: cubic-bezier(0.34, 1.36, 0.64, 1);
    }
  }

  /* Notification invite: extra vibrancy (already in map.css, bump blur) */
  .notif-invite {
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
  }

  /* Modal card: vibrancy on desktop too (iPad) */
  @media (min-width: 769px) {
    .modal-card {
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
    }
    [data-theme="dark"] .modal-card {
      background: rgba(37,37,41,0.94);
    }
  }
}

/* ============================================================
   DESKTOP — Mouse/hover-capable devices
   ============================================================
   Uses pointer: fine to target mouse (not finger) input.
   Adds lift, transitions, and cursor improvements.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

  /* Extend base transitions to include transform for smooth hover-out */
  .btn {
    transition: all 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  .share-btn {
    transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  }
  .stat-chip {
    transition: border-color 0.12s, background 0.12s, color 0.12s, transform 0.12s;
  }
  .poi-action {
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  }

  /* Button hover lift + shadow boost */
  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  }
  .btn:active {
    transform: translateY(0);
    box-shadow: none;
  }
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212,81,59,0.28);
  }
  .btn-ghost:hover {
    transform: translateY(-1px);
  }

  /* Layer picker lift on hover */
  .layer-picker:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    transition: box-shadow 0.2s;
  }

  /* Share buttons: micro-lift */
  .share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.09);
  }

  /* Nav links: underline slide-in */
  .desktop-nav a {
    position: relative;
  }
  .desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.2s ease;
    border-radius: 1px;
  }
  .desktop-nav a:hover::after {
    width: 100%;
  }
  .desktop-nav a:hover {
    color: var(--text);
  }

  /* Stat chips: pointer cursor + slight tint on hover */
  .stat-chip {
    cursor: pointer;
  }

  /* Layer picker toggle: pointer cursor */
  .layer-picker-toggle {
    cursor: pointer;
  }

  /* Leaflet controls: pointer cursor */
  .leaflet-control-zoom a,
  .geo-control a {
    cursor: pointer;
  }

  /* Stats ctrl buttons: explicit hover feedback (reinforces var ring) */
  .stats-ctrl-btn:hover {
    background: var(--bg);
    color: var(--text);
  }

  /* Panel close: lift */
  .panel-close:hover {
    background: var(--bg);
  }

  /* POI action rows: lift */
  .poi-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  }

  /* Mode switcher: enhanced hover */
  .mode-btn:hover {
    color: var(--text);
  }

  /* Stat chips: subtle scale on hover for desktop */
  .stat-chip:hover {
    transform: translateY(-1px);
    transition: border-color 0.12s, background 0.12s, color 0.12s, transform 0.12s;
  }
}