/* Responsive geometry has one shared owner, loaded after each panel's contents. */
.side-panel:not(.open), #list-panel:not(.open) { visibility: hidden; }
#detail-meta { padding: 12px 16px; }
#school-detail-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.school-contact-actions { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.school-contact-actions .cc-info-line { display:flex; align-items:center; gap:6px; }
.school-contact-actions .cc-contact-link-popup { min-width:0; }
#school-detail-body { overflow: visible; }
#detail-header { min-height: 62px; }
#detail-header > div:first-child { padding-top: 4px; }
.side-panel, #list-panel {
  padding-bottom: env(safe-area-inset-bottom);
  max-height: var(--visual-height, 100dvh);
  max-width: 100dvw;
}
.panel-header, #list-panel-header { padding-top: max(8px, env(safe-area-inset-top)); }
/* Side panels start below the search and filter bars (--top-chrome, panel-layout.ts), so both
   stay usable while a panel is open, as above a full-height sheet. */
body:not(.single-panel-layout) :is(.side-panel, #list-panel) {
  top: var(--top-chrome, 74px);
  height: calc(100% - var(--top-chrome, 74px));
  border-top: 1px solid var(--border);
}
body:not(.single-panel-layout) .side-panel { border-top-left-radius: var(--radius-lg); }
body:not(.single-panel-layout) #list-panel { border-top-right-radius: var(--radius-lg); }

/* ── Bottom sheet: every panel in the single-panel layout. sheet.ts sets --sheet-height (below
   the search and filter bars) and --sheet-offset (how far the current height sits below full). ── */
.sheet-handle { display: none; }
body.single-panel-layout :is(.side-panel, #list-panel) {
  top: auto;
  left: 0;
  right: 0;
  /* Rides above the on-screen keyboard, which shrinks the visual viewport. */
  bottom: max(0px, calc(100dvh - var(--visual-height, 100dvh) - var(--visual-top, 0px)));
  width: min(100%, 640px);
  margin-inline: auto;
  height: var(--sheet-height, 70dvh);
  max-height: none;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
body.single-panel-layout :is(.side-panel, #list-panel).open { transform: translateY(var(--sheet-offset, 0px)); }
/* The panel rule above carries #list-panel's weight, so this repeats it. */
body.single-panel-layout :is(.side-panel, #list-panel).sheet-dragging { transition: none; }
body.single-panel-layout .sheet-handle {
  display: block;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: 120px;
  height: 44px;
  transform: translateX(-50%);
  cursor: grab;
  touch-action: none;
}
.sheet-handle::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 36px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  opacity: .5;
}
body.single-panel-layout :is(.panel-header, #list-panel-header) { padding-top: 22px; }
/* One plain surface from the handle to the tabs, so the peek reads as a single card. */
/* Not isolated here (its decoration is hidden), so the actions can stack above the handle, which
   reaches the top of Save and Share on narrow phones. */
body.single-panel-layout #detail-header { background: var(--surface); border-bottom: none; isolation: auto; }
body.single-panel-layout #detail-header::before { display: none; }
body.single-panel-layout .detail-actions { top: 16px; z-index: 4; }
body.single-panel-layout #detail-peek { display: block; padding: 0 14px 12px; }
/* Above any sheet and the home indicator, like the map controls. */
.leaflet-container .leaflet-bottom { bottom: calc(var(--map-bottom, 0px) + env(safe-area-inset-bottom)); }
.map-space-limited :is(#layers-btn, #layers-panel, #locate-btn, .leaflet-control-attribution) { visibility: hidden; }
.scrim {
  top: var(--visual-top, 0px);
  bottom: auto;
  height: var(--visual-height, 100dvh);
}
.scrim .modal { max-height: calc(var(--visual-height, 100dvh) - 32px); }
.modal-foot { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.feedback-step { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
#p1-legend {
  transform: none;
  left: calc(var(--map-left, 0px) + 50px);
  right: calc(var(--map-right, 0px) + 12px);
  width: fit-content;
  max-width: calc(100dvw - var(--map-left, 0px) - var(--map-right, 0px) - 62px);
  flex-wrap: wrap;
}
.map-space-limited #p1-legend { visibility: hidden; }

/* Map controls above any open sheet and clear of the attribution, which wraps to two lines on
   narrow phones: the lease legend strip bottom-left, Layers over Locate bottom-right. The
   legend is collapsible and opens upward, and steps aside while a sheet is open (below). */
#lease-legend {
  position: fixed;
  z-index: 9;
  left: calc(var(--map-left, 0px) + 12px + env(safe-area-inset-left));
  bottom: calc(var(--map-bottom, 0px) + 44px + env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100dvw - var(--map-left, 0px) - var(--map-right, 0px) - 80px - env(safe-area-inset-left) - env(safe-area-inset-right));
  max-height: calc(100dvh - var(--map-bottom, 0px) - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.4;
}
#locate-btn, #layers-btn, #layers-panel { left: auto; right: calc(var(--map-right, 0px) + 12px + env(safe-area-inset-right)); }
#locate-btn { bottom: calc(var(--map-bottom, 0px) + 44px + env(safe-area-inset-bottom)); }
#layers-btn { bottom: calc(var(--map-bottom, 0px) + 96px + env(safe-area-inset-bottom)); }
#layers-panel { bottom: calc(var(--map-bottom, 0px) + 148px + env(safe-area-inset-bottom)); align-items: flex-end; }
:is(#lease-legend, #locate-btn, #layers-btn, #layers-panel) { transition: bottom var(--dur-med) var(--ease-out); }
#lease-legend summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
#lease-legend summary::-webkit-details-marker { display: none; }
#lease-legend summary:hover { background: var(--hover-tint); }
#lease-legend summary svg { flex-shrink: 0; margin-left: auto; }
#lease-legend details[open] summary svg { transform: rotate(180deg); }
/* The same block colours as one bar, short to long lease. */
.lease-legend-strip {
  width: 72px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg,
    var(--lease-under50) 0 20%, var(--lease-50s) 20% 40%, var(--lease-60s) 40% 60%,
    var(--lease-70s) 60% 80%, var(--lease-80plus) 80% 100%);
}
#lease-legend details[open] .lease-legend-strip { display: none; }
.lease-legend-content { padding: 0 12px 10px; }
#lease-legend p { margin: 2px 0 0; color: var(--text-dim); }
#lease-legend ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  list-style: none;
  margin: 8px 0;
  padding: 0;
}
#lease-legend li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.lease-legend-swatch { width: 13px; height: 13px; flex-shrink: 0; border-radius: 2px; background: currentColor; }
.lease-band-under50 { color: var(--lease-under50); }
.lease-band-50s { color: var(--lease-50s); }
.lease-band-60s { color: var(--lease-60s); }
.lease-band-70s { color: var(--lease-70s); }
.lease-band-80plus { color: var(--lease-80plus); }
.lease-band-unknown { color: var(--lease-unknown); }
.lease-legend-limited #lease-legend,
body.single-panel-layout.has-overlay-panel #lease-legend,
body:has(.leaflet-popup) #lease-legend { visibility: hidden; }

@media (max-width: 640px) {
  /* Clear of the status bar and Dynamic Island in the installed app. */
  .scrim .modal { max-height: calc(var(--visual-height, 92dvh) - env(safe-area-inset-top)); }
}
@media (max-height: 500px) and (min-width: 641px) {
  #detail-header { min-height: 54px; }
}