/* The compact map and its panels share the normal page scroll. */
.map-drag-toggle[hidden] { display: none !important; }
@media (max-width: 820px), (max-width: 1000px) and (max-height: 560px) {
  body .map-screen .map-area,
  body.map-focused .map-screen .map-area {
    --map-compact-layout: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "search search"
      "view controls"
      "gesture gesture"
      "canvas canvas"
      "caption caption"
      "legend legend"
      "list list"
      "town town"
      "partners partners";
    column-gap: 8px;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 12px;
    overflow: visible;
    border-radius: 20px;
  }
  body .map-screen .map-area::before { border-radius: inherit; }
  body .map-screen .map-area > :is(.map-botanical, .map-sun) { display: none; }
  body .map-screen .map-area > :is(.map-toolbar, .map-view-links, .map-controls, .map-caption, .map-legend, .map-list, .commune-sheet, .map-partners-panel) {
    position: static;
    inset: auto;
    min-width: 0;
    max-width: 100%;
  }
  body .map-screen .map-area .map-toolbar {
    grid-area: search;
    width: 100%;
    gap: 8px;
    margin-bottom: 10px;
  }
  body .map-screen .map-area .search-box {
    width: 100%;
    min-height: 52px;
    padding-left: 12px;
  }
  body .map-screen .map-area .search-box input {
    min-width: 0;
    min-height: 50px;
    padding: 11px 8px;
    font-size: 16px;
  }
  body .map-screen .map-area .search-results {
    max-height: min(45svh, 320px);
    max-height: min(45dvh, 320px);
    overscroll-behavior-y: contain;
    scroll-padding-block: 8px;
  }
  body .map-screen .map-area .search-results button {
    min-height: 44px;
    overflow-wrap: anywhere;
  }
  body .map-screen .map-area .map-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    gap: 4px;
    border-radius: 16px;
  }
  body .map-screen .map-area .map-modes button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    gap: 6px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
  }
  body .map-screen .map-area .map-modes .map-label-long { display: inline; min-width: 0; }
  body .map-screen .map-area .map-modes .map-label-short { display: none; }
  body .map-screen .map-area .map-view-links {
    grid-area: view;
    align-self: start;
    justify-self: start;
    margin-bottom: 10px;
  }
  body .map-screen .map-area .map-view-links a {
    min-height: 44px;
    padding: 8px 10px;
    gap: 6px;
    font-size: 11px;
    line-height: 1.35;
  }
  body .map-screen .map-area .map-controls {
    grid-area: controls;
    display: flex;
    align-self: start;
    justify-self: end;
    gap: 5px;
    margin-bottom: 10px;
  }
  body .map-screen .map-area .map-drag-toggle {
    grid-area: gesture;
    min-height: 44px;
    width: 100%;
    margin: 0 0 8px;
    padding: 10px 14px;
    font-size: 12px;
    border-radius: 12px;
  }
  body .map-screen .map-area .map-drag-toggle[aria-pressed="true"] {
    color: #fff;
    background: var(--green, #153e35);
  }
  body .map-screen .map-area #map {
    grid-area: canvas;
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(280px, 44svh, 400px);
    min-height: 0;
    overflow: hidden;
    border: 1px solid #d2e6e9;
    border-radius: 15px;
    background: #edf8ff;
  }
  body.map-focused .map-screen .map-area #map { height: clamp(300px, 52svh, 520px); }
  body .map-screen .map-area .map-caption {
    grid-area: caption;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    margin: 5px 0;
    font-size: 11px;
    line-height: 1.45;
  }
  body .map-screen .map-area .map-caption > span { flex: 1 1 180px; max-width: none; }
  body .map-screen .map-area .map-caption a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 4px;
  }
  body .map-screen .map-area .map-legend.communal-map-legend {
    grid-area: legend;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 10px;
    gap: 7px 12px;
    justify-content: flex-start;
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.4;
  }
  body .map-screen .map-area .map-legend.communal-map-legend > b { font-size: 11px; }
  body .map-screen .map-area .map-list:not([hidden]) {
    grid-area: list;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    font-size: 12px;
    border-radius: 12px;
  }
  body .map-screen .map-area .commune-sheet,
  body .map-screen .map-area .map-partners-panel {
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 12px 0 0;
    padding: 16px;
    overflow: visible;
    overscroll-behavior: auto;
    border-radius: 18px;
    box-shadow: 0 5px 18px #153e3510;
    animation: none;
    scroll-margin-top: 12px;
  }
  body .map-screen .map-area .commune-sheet { grid-area: town; }
  body .map-screen .map-area .map-partners-panel { grid-area: partners; }
  body .map-screen .map-area .commune-sheet::before { display: none; }
  body .map-screen .map-area :is(.sheet-top, .map-partners-top) {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center;
    gap: 8px;
    margin: -16px -16px 12px;
    padding: 12px;
    border-bottom: 1px solid #e2ebdf;
    border-radius: 18px 18px 0 0;
    background: #fff;
  }
  body .map-screen .map-area :is(.sheet-top, .map-partners-top) > div { min-width: 0; }
  body .map-screen .map-area .sheet-top h2 { font-size: 24px; overflow-wrap: anywhere; }
  body .map-screen .map-area .sheet-top .icon-button,
  body .map-screen .map-area .map-partners-close { margin: 0; }
  body .map-screen .map-area .sheet-count { margin-top: 12px; }
  body .map-screen .map-area .sheet-numbers { margin: 12px 0; }
  body .map-screen .map-area .sheet-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .map-screen .map-area .sheet-actions .button { min-width: 0; min-height: 48px; padding: 10px 8px; gap: 5px; font-size: 12px; }
  body .map-screen .map-area .commune-sheet :is(a, button, summary) { overflow-wrap: anywhere; }
  body .map-screen .map-area .sheet-info summary { min-height: 44px; padding-block: 12px; }
  body .map-screen .map-area .sheet-info > a { min-height: 44px; padding-block: 12px; }
  body .map-screen .map-area .map-nearby-toggle { width: 100%; justify-content: center; font-size: 12px; }
  body .map-screen .map-area .map-partners-panel button { min-height: 44px; }
  body .map-screen .map-area .map-partners-origin { flex-wrap: wrap; }
  body .map-screen .map-area .map-partners-origin button { text-align: left; }
  body .map-screen .map-area .sponsor-filters { overflow: visible; flex-wrap: wrap; }
  body .map-screen .map-area .sponsor-filter { white-space: normal; }
}

@media (min-width: 600px) and (max-width: 820px), (min-width: 600px) and (max-width: 1000px) and (max-height: 560px) {
  body .map-screen .map-area .map-modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Short landscape screens retain page scrolling instead of a fixed full screen. */
@media (max-width: 1000px) and (max-height: 560px) {
  body .map-screen .map-area #map,
  body.map-focused .map-screen .map-area #map { height: 280px; }
  body .map-screen .map-area .search-results { max-height: min(45dvh, 220px); }
}