@media (max-width: 900px) {
  main {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  #filters {
    position: relative;
    flex: 1 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
    padding: 1rem 1.25rem;
    gap: 1.25rem;
  }

  #map {
    height: 65vh;
    min-height: 360px;
  }
}

@media (max-width: 600px) {
  body {
    min-height: 100vh; /* Better for iframes */
  }

  header {
    padding: 0.65rem 0.75rem 0.5rem;
    gap: 0.35rem;
  }

  header h1 {
    font-size: clamp(0.95rem, 4.5vw, 1.2rem);
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  /* Two compact, aligned control rows. The first keeps the title and primary
     actions together; the second keeps both mode switches together. */
  .header-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.35rem 0.5rem;
  }

  .header-actions {
    display: contents;
  }

  header h1 {
    grid-row: 1;
    grid-column: 1;
  }

  .filters-toggle {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }

  .theme-toggle {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    padding: 0.45rem 0.6rem;
  }

  /* Icon-only theme button; the label stays for assistive tech. */
  .theme-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .view-mode-toggle {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
  }

  .view-mode-toggle__option span {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
  }

  .view-mode-toggle--presentation {
    grid-row: 2;
    grid-column: 2 / 4;
    justify-self: end;
  }

  .header-subtitle {
    display: none;
  }

  .header-about {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .header-about p {
    margin-top: 0.35rem;
  }

  #filters {
    padding: 0.75rem 1rem 1.25rem;
    gap: 1rem;
  }  .filter-group:not([data-filter-title]) {
    gap: 0.35rem;
  }

  .filter-group[data-filter-title] .filter-group__body {
    gap: 0.35rem;
  }

  .filter-group[data-filter-title] .filter-group__toggle {
    padding: 0.65rem 0.75rem;
  }

  .filter-group select,
  .filter-group fieldset {
    font-size: 0.9rem;
  }

  #map {
    height: clamp(320px, 55vh, 480px);
  }
}

/* Keep the title row compact through common phone widths. The Filters label
   stays available to assistive tech. */
@media (max-width: 420px) {
  .filters-toggle {
    padding: 0.45rem 0.6rem;
    /* Icon-only below 360px: keep the tap area 44px wide, not just tall. */
    min-width: 2.75rem;
    justify-content: center;
  }

  .filters-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Specific optimizations when running in iframe */
body.in-iframe {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

body.in-iframe header {
  padding: 0.6rem 1rem 0.4rem;
}

body.in-iframe .site-credit {
  padding: 0.4rem 0.6rem;
}

body.in-iframe #filters {
  max-height: calc(100vh - 120px); /* Account for header and footer */
}

/* In the column layout (<=1024px) main is the single internal scroll region
   (see the max-width:1024px block above); the filters panel must flow at its
   natural height rather than becoming a second nested scroller. This override
   is placed AFTER the generic rule so it wins at equal specificity — the two
   selectors are identical, so source order decides. Above 1024px the generic
   calc() still applies, keeping the desktop iframe sidebar scrollable. */
@media (max-width: 1024px) {
  body.in-iframe #filters {
    max-height: none;
  }
}

/* Optimize for iframe embedding on larger screens */
@media (min-width: 1200px) {
  body {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }
  
  header {
    padding: 0.75rem 1.25rem 0.5rem; /* Even more compact on large screens */
  }
  
  header h1 {
    font-size: 1.35rem;
  }
  
  header p {
    font-size: 0.85rem;
    line-height: 1.3;
  }
  
  #filters {
    flex: 0 0 clamp(260px, 28vw, 420px); /* Narrower on large screens */
    padding: 0.75rem;
    gap: 0.6rem;
  }  .filter-group:not([data-filter-title]) {
    padding: 0.5rem 0.6rem;
    gap: 0.3rem;
  }

  .filter-group[data-filter-title] .filter-group__body {
    padding: 0.5rem 0.6rem 0.7rem;
    gap: 0.45rem;
  }

  .filter-group[data-filter-title] .filter-group__toggle {
    padding: 0.6rem 0.7rem;
  }
  
  .filter-group select[multiple] {
    min-height: 4.5rem;
    max-height: 7rem;
  }
}

/* Container query support for better scaling */
@container (min-width: 1400px) {
  #filters {
    grid-template-columns: 1fr;
  }
}

/* Ensure content fits without scrolling in common iframe sizes */
@media (min-height: 600px) and (max-height: 800px) {
  body {
    font-size: 0.95rem; /* Slightly smaller base font */
  }
}

@media (max-width: 900px) {
  .filters-toggle {
    display: inline-flex;
  }

  .filters-close {
    display: none;
  }

  body.filters-open .filters-close {
    display: inline-flex;
  }

  body.filters-open {
    overflow: hidden;
  }

  body.filters-open .filters-backdrop {
    display: block;
  }

  body:not(.filters-open) #filters {
    display: none;
  }

  body.filters-open #filters {
    display: grid;
    position: fixed;
    inset: 0;
    padding: calc(1.35rem + env(safe-area-inset-top, 0)) 1.35rem 2.5rem;
    background: var(--surface);
    border: none;
    box-shadow: none;
    max-width: none;
    overflow-y: auto;
    gap: 1.35rem;
    /* Above the backdrop, and above every Leaflet pane/control (max 1000) so
       the zoom control can never render over — or receive clicks through —
       the open dialog. */
    z-index: 1200;
    grid-template-columns: 1fr;
  }

  /* Sticky action footer: Reset stays reachable while scrolling the drawer. */
  body.filters-open .filter-group--actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 0 -1.35rem;
    padding: 0.75rem 1.35rem calc(0.75rem + env(safe-area-inset-bottom, 0));
    background: var(--surface);
    border-top: 1px solid var(--border-color);
  }

  body.filters-open .filter-group--full {
    grid-column: 1;
  }

  body.filters-open .filters-panel-header {
    display: flex;
    position: sticky;
    top: 0;
    margin: -1.35rem -1.35rem 1.25rem;
    padding: calc(1.15rem + env(safe-area-inset-top, 0)) 1.35rem 0.9rem;
    background: linear-gradient(180deg, var(--surface) 0%, rgba(255, 255, 255, 0.92) 75%, rgba(255, 255, 255, 0));
    border-bottom: 1px solid var(--border-color);
    z-index: 1;
  }

  body.filters-open .filters-panel-header h2 {
    font-size: 1.2rem;
  }

  #map {
    flex: 1 0 auto;
    height: clamp(380px, 70vh, 720px);
    min-height: 320px;
  }
}