/* FEMA flood zones: Layers panel row and the map legend (drag to move, x to close).
   The legend sits under the parcel (z 4) and Layers (z 5) panels when they open.
   Map colors live in js/app/features/flood-zones.js (FLOOD_ZONES_STYLE). */
.flood-zones-layer-swatch { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(15, 23, 42, 0.12); }
.flood-zones-legend { position: fixed; left: calc(var(--left-rail-width, 72px) + 10px); bottom: 40px; z-index: 3; width: min(240px, calc(100vw - var(--left-rail-width, 72px) - 36px)); display: grid; gap: 0.4rem; padding: 0.62rem 0.72rem; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14); color: var(--text, #0f172a); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.flood-zones-legend[hidden], .flood-zones-legend-note[hidden] { display: none; }
.flood-zones-legend.is-dragging { cursor: grabbing; }
.flood-zones-legend-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.flood-zones-legend-title { font-size: 0.78rem; font-weight: 800; }
.flood-zones-legend-close { display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; margin: -0.3rem -0.4rem -0.3rem 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted, #475569); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.flood-zones-legend-close:hover { background: rgba(15, 23, 42, 0.08); color: var(--text, #0f172a); }
.flood-zones-legend-close:focus-visible { outline: 2px solid var(--accent, #16a34a); outline-offset: 1px; }
.flood-zones-legend-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 0.5rem; font-size: 0.74rem; line-height: 1.25; color: var(--text-muted, #475569); }
.flood-zones-legend-swatch { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(200, 200, 200, 0.9); }
.flood-zones-legend-note { margin: 0; font-size: 0.68rem; line-height: 1.3; color: var(--text-muted, #64748b); }
@media (max-width: 768px), (max-height: 520px) and (pointer: coarse) {
  /* Sits above the county context bar (tab bar + 54px, 64px tall). */
  html.landai-mobile-shell-v2 .flood-zones-legend { left: max(var(--mobile-v2-edge, 12px), var(--mobile-v2-safe-left, 0px)); right: auto; bottom: calc(var(--mobile-v2-tabbar-height, 72px) + 128px); z-index: 24; width: min(220px, calc(100vw - 96px)); gap: 0.3rem; padding: 0.5rem 0.62rem; border-radius: 12px; }
  html.landai-mobile-shell-v2 .flood-zones-legend-close { width: 28px; height: 28px; margin: -0.4rem -0.45rem -0.4rem 0; }
  html.landai-mobile-shell-v2 body.mobile-v2-surface-active:not(.mobile-v2-background-interactive) .flood-zones-legend,
  html.landai-mobile-shell-v2 body.mobile-v2-keyboard-open .flood-zones-legend { visibility: hidden; }
}