/* Responsive layout — desktop (≥1024) keeps the mock design as-is.
   Mobile (<1024) flips app-body to column, drawer below map. */

/* Hamburger visible only on mobile */
@media (max-width: 1023.98px) {
  .hamburger-toggle { display: inline-flex; }

  /* Scope dropdown stays visible at desktop position; keep label from overflowing */
  #scope-label { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Right side of header simplifies — lang/theme move into hamburger.
     The header-right block keeps a small slot in case we add anything later. */
  .app-header .header-right .lang-toggle:not(.lang-toggle--panel),
  .app-header .header-right .theme-toggle:not(.theme-toggle--panel) {
    display: none;
  }

  /* Drawer should touch the bottom edge of the viewport — drop the .app's
     bottom padding on mobile so the drawer extends all the way down. */
  .app { padding-bottom: 0; }

  /* App-body becomes column-reverse on mobile so canvas (DOM-last) is on TOP
     and sidebar (DOM-first) is on the BOTTOM as a drawer. */
  .app-body {
    flex-direction: column-reverse;
    gap: 8px;
  }

  /* Canvas drives the height split. Mobile only animates one property
     (flex-basis on .canvas) so transitions are smooth — the sidebar takes
     whatever's left via flex: 1 1 0. Flipping flex-grow between states is
     not transitionable, hence why every state below tweaks ONLY the canvas. */
  .canvas {
    flex: 0 0 50vh;
    flex-basis: 50dvh;
    min-height: 0;
    transition: flex-basis var(--duration) var(--easing);
  }

  /* Sidebar (drawer) fills the remaining space; bottom edge flush w/ viewport. */
  .sidebar {
    flex: 1 1 0;
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    min-height: 0;
  }

  /* Deep-dive mode: map shrinks to ~35 vh, drawer expands. */
  body[data-mode="deep-dive"] .canvas { flex-basis: 35vh; flex-basis: 35dvh; }

  /* The desktop-only sidebar expand rule (flex-basis: 640px) shouldn't apply. */
  .app-body.mode-deep-dive .sidebar {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }

  /* Hide the desktop collapse-to-rail mechanic on mobile (use drawer-collapse instead) */
  .sidebar-toggle, .sidebar-rail { display: none; }
  .sidebar.is-collapsed { flex-basis: 0; width: 100%; }
  .sidebar.is-collapsed .sidebar-inner { display: flex; }

  /* Drawer collapse arrow: shown only in city mode on mobile */
  body[data-mode="city"] .drawer-collapse { display: inline-flex; }

  /* Collapsed drawer: canvas takes almost everything; sidebar shrinks to filter-bar height */
  body[data-drawer-collapsed="true"] .canvas { flex-basis: calc(100% - 56px); }
  body[data-drawer-collapsed="true"] .sidebar .tile-list { display: none; }

  /* Home / About screens — narrower padding + square bottom (flush with viewport edge) */
  .home-screen, .about-screen {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .home-screen { padding: 24px 16px; }
  .home-title { font-size: 22px; }

  /* Mobile home rows: tighter padding */
  .home-city-row { padding: 16px 4px; }

  /* Header layout: compact on mobile */
  .app-header { padding: 0 4px; gap: 8px; }
  .header-left { gap: 8px; }
  .brand { font-size: 14px; }

  /* Filter section: blue-dots on the right edge of each row, already grid-aligned by .filter-row's flex */
  .filter-bar { min-height: 28px; }

  /* Map popup may overflow viewport edges — keep within safe area */
  .map-popup-card { max-width: 80vw; }

  /* Deep-dive panel content tightens on small screens */
  .deep-dive-content {
    padding: 8px 16px 48px 16px;
    max-width: 100%;
  }

  .dd-header { padding-right: 0; max-width: 100%; }
  .dd-header-hero-num { font-size: 48px; }
  .dd-header-name { font-size: 20px; }
}

/* Very narrow phones (<400px) — drop one more level of padding */
@media (max-width: 399.98px) {
  .app { padding: 8px 8px 0 8px; gap: 8px; }
  .home-screen { padding: 16px 10px; }
  .home-city-row {
    column-gap: 6px;
    padding: 14px 4px;
  }
  .filter-toggle { padding: 4px 10px; font-size: 11px; }
  /* Realign the hamburger collapse arrow with the smaller .app padding */
  .hamburger-collapse {
    margin-top: calc(8px + (var(--header-h) - 36px) / 2);
  }
}

/* Desktop / tablet ≥ 1024 — hide the hamburger panel + backdrop in case
   they got left visible during a viewport resize. */
@media (min-width: 1024px) {
  .hamburger-toggle { display: none; }
  .hamburger-panel, .hamburger-backdrop { display: none !important; }
  body.hamburger-open { /* no-op */ }
}