/* ──────────────────────────────────────────────────────────────────────
   Public maps · narrow-viewport layers drawer
   ----------------------------------------------------------------------
   public.css ships no media queries at all: the layers rail is a fixed
   260px sitting *beside* the map at every width. Fine on a desktop,
   unusable on a phone — inside a dashboard's map panel the iframe is only
   ~370px wide, which left the map a 96px sliver behind a full-size rail.

   Below 700px the rail becomes an off-canvas drawer that slides over the
   map, driven by the existing #sidebar-toggle button (see
   public_map_drawer.js). The button becomes a small chevron tab riding the
   drawer's edge at the vertical middle of the map — Google's own controls
   own the corners (Map/Satellite at top-left, travel-orient at
   bottom-left, zoom at bottom-right), so the middle of the left edge is
   the one place a control can sit without covering them.

   Why 700px: an iframe is its own viewport, so this is measured against
   the *panel* width when embedded, not the phone's. A dashboard's map
   panel is ~370px on a phone and ~390-430px in the tablet two-column
   layout — all drawer — and ~800px on desktop, which keeps the rail.
   Visited standalone, the breakpoint tracks the real viewport.

   Opt-in per page: link this next to public.css, and load
   public_map_drawer.js after the markup. Currently used by the KDEP
   brownfields and KDEM emergency maps; the other bespoke public maps have
   the same rail and can adopt it the same way.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {

  .public-container {
    /* One source of truth for the drawer width: the panel's `width`, the
       off-canvas `translateX`, and the tab's offset all read it, so they
       can't drift apart. */
    --pm-drawer-w: min(300px, 86%);

    /* Clips the drawer while it sits off-canvas. Without this the
       translated panel widens the document and the map page picks up a
       horizontal scrollbar. */
    overflow: hidden;
  }

  /* ── The drawer ─────────────────────────────────────────────────── */

  /* Closed is the default here — the opposite of the desktop rail, where
     the panel is expanded until `.collapsed` is added. Doing it in CSS
     rather than with a script means the drawer can't render open and then
     slide shut on load. `.drawer-open` is added by the toggle. */
  .public-sidenav {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: var(--pm-drawer-w);
    transform: translateX(-100%);
    box-shadow: 6px 0 24px rgba(15, 23, 42, 0.18);
    /* Off-canvas content stays out of the tab order and the screen-reader
       tree; delayed so it doesn't blink away before the slide finishes. */
    visibility: hidden;
    transition:
      transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s 0.28s;
  }

  .public-sidenav.drawer-open {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s;
  }

  /* `.collapsed` is the desktop rail's state class and means nothing in
     this layout. Neutralised rather than ignored: its width:0 / padding:0
     would otherwise crush the drawer if a viewport crossed the breakpoint
     while the rail was collapsed. */
  .public-sidenav.collapsed {
    width: var(--pm-drawer-w);
    padding: 14px 14px 20px 14px;
  }

  /* The map now owns the full panel — the drawer floats above it. */
  .public-map { width: 100%; }

  /* ── The toggle: a chevron tab on the drawer's edge ─────────────── */

  #sidebar-toggle {
    position: absolute;
    /* Vertically centred, so it clears the map controls in every corner. */
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 25;
    /* Undo the flow-positioning the desktop rule uses to notch the button
       into the rail's edge. */
    align-self: auto;
    margin-left: 0;
    width: 28px;
    height: 56px;
    padding: 0;
    /* A tab hinged on its left side: square where it meets the drawer (or
       the map's edge when closed), rounded on the side that faces out. */
    border-radius: 0 10px 10px 0;
    border-left: none;
    font-size: 13px;
  }

  /* Open: the tab steps out to sit just beyond the drawer's right edge, so
     it always reads as the handle on the panel that's showing. */
  .public-sidenav.drawer-open + #sidebar-toggle {
    left: var(--pm-drawer-w);
  }

  /* ── Touch targets ──────────────────────────────────────────────── */
  /* The desktop rows are ~26px tall; ~44px is the comfortable minimum. */

  .public-layer-toggle {
    padding: 9px 4px;
    gap: 11px;
    font-size: 15px;
  }

  .public-layer-checkbox {
    width: 18px;
    height: 18px;
  }

  .public-sidebar-section-title {
    margin: 18px 0 10px;
    padding-top: 12px;
  }
}