/* SeasonRoute — mobile layout. EVERY rule here is inside the ≤768px media
   query, so the desktop experience (defined in style.css) is untouched. This
   layer adds a bottom tab bar, a driving-focused single-column home,
   bottom-sheet panels, and finger-sized controls. */

@media (max-width: 768px) {

  /* ---------- App shell / scrolling ---------- */
  /* The dashboard is the scroll container; leave room for the fixed tab bar
     (+ the iOS home indicator). */
  body { overflow: hidden; }
  #view-dashboard {
    padding: 12px 14px 0;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  /* ---------- Compact header ---------- */
  .toolbar {
    position: sticky; top: 0;
    gap: 8px; padding: 8px 12px; flex-wrap: nowrap;
  }
  .toolbar-brand { gap: 8px; }
  .brand-roundel { width: 34px; height: 34px; font-size: 1.05rem; }
  .brand-tagline { display: none; }
  .brand-text { font-size: 0.95rem; }
  /* Primary nav + secondary controls move to the bottom bar / Settings. */
  .main-nav, .units-select, #layers-btn, #settings-btn { display: none; }
  .toolbar-search { order: 0; flex: 1 1 auto; max-width: none; margin: 0; }
  .toolbar-actions { gap: 6px; margin-left: 0; }

  /* ---------- Bottom tab bar ---------- */
  .mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    display: flex; justify-content: space-around; align-items: stretch;
    background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);
  }
  .mtab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: none; background: none; cursor: pointer; color: var(--muted);
    padding: 8px 2px 6px; min-height: 52px; font-family: var(--font);
  }
  .mtab-icon { font-size: 1.25rem; line-height: 1; }
  .mtab-label { font-size: 0.66rem; font-weight: 700; }
  .mtab.active { color: var(--accent); }

  /* Floating Layers button — only on the Map tab. */
  #mobile-layers-fab {
    position: fixed; right: 14px; z-index: 1400;
    bottom: calc(64px + env(safe-area-inset-bottom));
    display: none; border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    border-radius: 999px; padding: 10px 16px; font-weight: 700;
    box-shadow: var(--shadow); cursor: pointer;
  }
  body[data-view="map"] #mobile-layers-fab { display: block; }

  /* Views already leave room via #view-dashboard padding; give map/radar the
     same clearance so the tab bar never covers content. */
  #view-radar { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  /* ---------- Driving-focused single-column home ---------- */
  /* Flatten the nested grids so every card joins one vertical flow, then
     order them by driving relevance. .dash-grid-more stays a real block so it
     can be folded as a unit. */
  .dash-page { display: flex; flex-direction: column; gap: 14px; }
  .dash-grid-top, .dash-grid-widgets, .dash-top-col { display: contents; }
  .dash-grid-top, .dash-grid-widgets { gap: 0; }

  .mode-hero        { order: 1; }
  #daily-summary    { order: 2; }
  #card-overview    { order: 3; }  /* drive verdict first */
  #card-current     { order: 4; }
  #card-alerts      { order: 5; }
  .dash-card-map    { order: 6; }  /* Plan Route bar + open-map */
  [data-section="hourly"]        { order: 7; }
  #card-quick       { order: 8; }
  [data-section="hazardSummary"] { order: 9; }
  [data-section="impact"]        { order: 10; }
  [data-section="routes"]        { order: 11; }
  [data-section="cameras"]       { order: 12; }
  [data-section="tips"]          { order: 13; }
  #ai-briefing      { order: 14; }
  .mobile-more-toggle { order: 15; }
  .dash-grid-more   { order: 16; display: block; }
  .site-footer      { order: 17; }

  .dash-grid-more { grid-template-columns: 1fr; display: grid; gap: 14px; }

  /* "More details" divider + fold */
  .mobile-more-toggle {
    display: block; width: 100%; margin-top: 4px;
    background: var(--surface-alt); color: var(--accent); font-weight: 800;
    border: 1px dashed var(--border); border-radius: 12px; padding: 12px;
    font-family: var(--font); cursor: pointer;
  }
  body.mobile-collapsed .dash-grid-more { display: none; }

  /* Map dock card: hide the docked-map slot + legend, keep the Plan Route bar
     and show the "open full map" button (desktop-hidden). */
  #map-dock-slot, .map-legend-row { display: none; }
  .mobile-open-map { display: block; margin-top: 4px; }
  .plan-route-bar { flex-wrap: wrap; }
  .plan-route-bar input { flex: 1 1 100%; }

  /* Footer: neutralise the desktop negative side-margins for the 14px page pad. */
  .site-footer { margin: 20px -14px 0; padding: 20px 16px calc(20px + 64px + env(safe-area-inset-bottom)); }

  /* ---------- Bottom-sheet side panels ---------- */
  /* fixed (not absolute) so bottom:0 anchors to the viewport, not the tall
     scrolling shell. Backdrop matches. */
  .panel-backdrop { position: fixed; }
  .side-panel {
    position: fixed;
    width: 100%; max-width: none; left: 0; right: 0; top: auto; bottom: 0;
    height: 88vh; border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.28);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .side-panel.open { transform: translateY(0); }
  .panel-header { position: sticky; top: 0; background: var(--surface); }
  .panel-close { width: 40px; height: 40px; font-size: 1.2rem; }

  /* ---------- Touch targets ---------- */
  .mode-hero { max-width: none; }
  .mode-hero .mode-btn { padding: 12px 12px; }
  .quick-actions { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .quick-action { padding: 14px 6px; min-height: 66px; }
  .quick-action-icon { font-size: 1.5rem; }
  .btn { padding: 11px 16px; }
  .icon-btn { padding: 9px 12px; }

  /* ---------- Radar controls ---------- */
  .radar-controls { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .radar-controls-row { gap: 8px; }
  .radar-controls select { flex: 1 1 44%; padding: 10px 8px; font-size: 0.9rem; }
  .radar-controls .btn { min-width: 48px; min-height: 44px; }
  #radar-timeline { flex: 1 1 100%; height: 28px; }
  .radar-frame-label { flex: 1 1 100%; }

  /* ---------- Navigation owns the screen ---------- */
  body.nav-active .mobile-tabbar { display: none; }
  body.nav-active #mobile-layers-fab { display: none; }
  .nav-hud {
    left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
    top: auto; width: auto;
  }
  #nav-hud-mute, #nav-hud-bigtext { width: 40px; height: 40px; }

  /* Leaflet controls clear of the tab bar on the Map tab. */
  body[data-view="map"] .leaflet-bottom { margin-bottom: calc(60px + env(safe-area-inset-bottom)); }

  /* Trip Preview overlay leaves room for its sticky action row above the bar. */
  .route-preview-body { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* Desktop safety: the injected mobile-only controls never show above 768px. */
@media (min-width: 769px) {
  .mobile-tabbar, #mobile-layers-fab, .mobile-open-map, .mobile-more-toggle { display: none !important; }
}