/* DeloraMap component styles. Loaded from <head> by deploy/map_component.map_figure_assets(); Leaflet's
   own CSS is injected by delora-map.js. Tokens come from deploy/design/tokens.css. */
.dmap{margin:0}
.dmap-frame{position:relative;height:var(--dmap-h,380px);background:var(--mist,#EFEEEE);border:1px solid var(--line,#D8D5D3);overflow:hidden}
/* Poster and live map share one fixed box, so nothing moves when the map arrives (CLS 0). */
.dmap-poster,.dmap-view,.dmap-placeholder{position:absolute;inset:0;width:100%;height:100%}
.dmap-view{z-index:0;background:var(--mist,#EFEEEE)}
.dmap-poster{z-index:1;background:var(--mist,#EFEEEE);display:block}
.dmap-poster[hidden],.dmap-placeholder[hidden]{display:none}
/* a figure with no server-drawn outline (the suburb directory and finder, whose points arrive as data) */
.dmap-placeholder{z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:24px;
  text-align:center;font-size:var(--fs-3);line-height:var(--lh-body);color:var(--text-2,#4F4B49);background:var(--mist,#EFEEEE)}
.dmap .leaflet-container{font-family:var(--font,Arial,sans-serif);background:var(--mist,#EFEEEE)}
.dmap .leaflet-control-zoom,.dmap .leaflet-control-zoom a,.dmap .leaflet-bar{border-radius:0}
.dmap-view{isolation:isolate}   /* contains Leaflet's 400-1000 z-indexes so the gate and Done buttons can sit above them */
/* a 2px indeterminate bar while the library or data load; static for reduced motion */
.dmap[data-state=loading] .dmap-frame::after{content:"";position:absolute;z-index:3;top:0;left:0;height:2px;width:35%;
  background:var(--accent-fill,#D12B10);animation:dmap-load 1.4s ease-in-out infinite}
@keyframes dmap-load{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){.dmap[data-state=loading] .dmap-frame::after{animation:none;width:100%;opacity:.5}}
/* the first tab stop: skips the zoom buttons, chips and attribution links in one key press */
.dmap-skip{position:absolute;z-index:4;left:8px;top:8px;padding:10px 14px;background:var(--surface,#fff);color:var(--text,#201E1D);
  border:1px solid var(--line-strong,#7A7673);font-weight:700;font-size:var(--fs-2);transform:translateY(-200%)}
.dmap-skip:focus{transform:none;outline:2px solid var(--focus,#201E1D);outline-offset:2px}
.dmap-status{position:relative;margin:8px 0 0;min-height:1.5em;font-size:var(--fs-2);line-height:var(--lh-body);color:var(--text,#201E1D)}
.dmap-retry{display:inline-block;min-height:44px;margin:6px 0 0;padding:0 18px;border:1px solid var(--line-strong,#7A7673);
  background:var(--surface,#fff);color:var(--text,#201E1D);font:inherit;font-weight:700;cursor:pointer}
/* one focus ring for every control the component owns (Leaflet's own is 2px dotted and clipped by the frame) */
.dmap-view:focus-visible,.dmap-chip:focus-visible,.dmap-gate:focus-visible,.dmap-done:focus-visible,.dmap-credit:focus-visible,
.dmap-retry:focus-visible,.dmap .dmap-view .leaflet-bar a:focus-visible,.dmap-list summary:focus-visible{
  outline:3px solid var(--focus,#201E1D);outline-offset:2px}
.dmap-view:focus-visible{outline-offset:-3px}
/* one legend: swatch + label; layers that can be hidden become toggle chips */
.dmap-legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:12px 4px 0;padding:0;
  font-size:var(--fs-2);font-weight:var(--w-bold);color:var(--text,#201E1D)}
.dmap-legend li{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;box-sizing:border-box}
/* The server-rendered item already has the chip's height and side padding (44 px, 12 px + 1 px border), so
   upgrading it to a toggle chip moves nothing below it. */
.dmap-legend li.is-chip{padding:0}
/* room for the pressed tick, so upgrading a server-rendered item to a chip (and pressing it) moves nothing */
.dmap-legend li.is-toggle:not(.is-chip)::before{content:"";width:14px;flex:none}
.dmap-sw{display:inline-block;width:12px;height:12px;flex:none;box-sizing:border-box;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1px rgba(32,30,29,.35)}
.dmap-sw--line{width:18px;height:4px;border:0;box-shadow:none}
.dmap-sw--point{border-radius:50%}
.dmap-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 11px;border:2px solid var(--line-strong,#7A7673);box-sizing:border-box;
  background:var(--surface,#fff);color:var(--text,#201E1D);font:inherit;font-size:var(--fs-2);font-weight:var(--w-bold);cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
/* pressed = a tick and a 2px edge; not pressed = dashed 1px edge: neither relies on colour. Both add up to 13px of side space. */
.dmap-chip::before{content:"\2713";width:14px;flex:none;text-align:center;font-size:var(--fs-1);visibility:hidden}
.dmap-chip[aria-pressed=true]::before{visibility:visible}
.dmap-chip[aria-pressed=false]{background:transparent;color:var(--text-2,#4F4B49);border-style:dashed;border-width:1px;padding:0 12px}
.dmap-chip[aria-pressed=false] .dmap-sw{opacity:.35}

/* a layer that exists only in one state: the entry keeps its place (so the legend never changes height) but is invisible */
.dmap[data-state=poster] li[data-live-only],.dmap[data-state=loading] li[data-live-only],.dmap[data-state=map-unavailable] li[data-live-only],
.dmap[data-state=ready] li[data-poster-only],.dmap[data-state=basemap-unavailable] li[data-poster-only]{visibility:hidden}

/* ---- selection (slice 05.3): the card, the tap targets and the clustered dots */
.dmap-card{position:relative;margin:12px 4px 0;padding:12px 14px;border:1px solid var(--line-strong,#7A7673);background:var(--surface,#fff);
  color:var(--text,#201E1D);font-size:var(--fs-2);line-height:var(--lh-body)}
.dmap-card[hidden]{display:none}
.dmap-card-h{margin:0 64px 4px 0;font-size:var(--fs-3);line-height:var(--lh-snug)}
.dmap-card-l div{color:var(--text-2,#4F4B49)}
.dmap-card-m{margin:6px 0 0;padding-left:18px}
.dmap-card-m[hidden],.dmap-card-link[hidden]{display:none}
.dmap-card-link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:700;color:var(--accent-text,#B5230C);text-decoration:underline}
.dmap-card-m a{display:inline-block;min-height:24px;color:var(--accent-text,#B5230C)}
.dmap-card-x{position:absolute;top:0;right:0;width:64px;height:44px;border:0;border-left:1px solid var(--line,#D8D5D3);border-bottom:1px solid var(--line,#D8D5D3);
  background:var(--surface,#fff);color:var(--text,#201E1D);font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}
.dmap-card-x:focus-visible,.dmap-card-link:focus-visible,.dmap-card-m a:focus-visible{outline:3px solid var(--focus,#201E1D);outline-offset:2px}
.dmap .leaflet-interactive:focus-visible{outline:3px solid var(--focus,#201E1D);outline-offset:2px}
.dmap .leaflet-interactive[data-dmap-item]{cursor:pointer}
.dmap-note{display:block}
/* a clustered dot has a 44 px hit area around a 14 px dot; a cluster is a 36 px disc with its count */
.dmap-pin{background:none;border:0;display:flex;align-items:center;justify-content:center}
.dmap-dot{width:14px;height:14px;box-sizing:border-box;border-radius:50%;background:var(--accent-fill,#D12B10);border:2px solid #fff;box-shadow:0 0 0 1px rgba(32,30,29,.45)}
.dmap-cl{display:flex;align-items:center;justify-content:center;width:36px;height:36px;box-sizing:border-box;border-radius:50%;
  background:var(--text,#201E1D);color:#fff;border:3px solid #fff;box-shadow:0 0 0 1px rgba(32,30,29,.45);font:700 var(--fs-1) var(--font,Arial,sans-serif)}
.dmap-pin.is-selected .dmap-dot{width:20px;height:20px;background:var(--text,#201E1D)}
.dmap-pin:focus-visible{outline:3px solid var(--focus,#201E1D);outline-offset:-3px}
.dmap-count{margin:8px 4px 0;font-size:var(--fs-2);color:var(--text-2,#4F4B49);min-height:1.5em}

/* ---- 44 px controls (slice 05.2). Specificity beats Leaflet's `.leaflet-touch .leaflet-bar a`, which is injected after this sheet. */
.dmap .dmap-view .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:var(--fs-5)}

/* ---- touch: the gesture gate. A swipe that starts on the map scrolls the page; only the gate button unlocks panning. */
.dmap-gate,.dmap-done,.dmap-credit{font:var(--w-bold) var(--fs-3) var(--font,Arial,sans-serif);color:var(--text,#201E1D);cursor:pointer;
  background:var(--surface,#fff);border:1px solid var(--line-strong,#7A7673);box-sizing:border-box;margin:0;padding:0;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.dmap-gate{position:absolute;z-index:2;left:0;right:0;bottom:0;min-height:44px;border-width:1px 0 0}
.dmap-done{position:absolute;z-index:2;top:10px;right:10px;width:64px;height:44px}
.dmap-done[hidden]{display:none}
.dmap[data-active=true] .dmap-gate{display:none}
/* keep the credit button clear of the gate bar while the bar is showing */
.dmap[data-gesture=gate][data-active=false] .dmap-view .leaflet-bottom{bottom:44px}
.dmap-credit-box{position:relative}   /* Leaflet gives every control a 10px margin from the frame edge */
.dmap-credit{display:block;width:44px;height:44px;font-size:var(--fs-4);line-height:1}
.dmap-credit-bubble{position:absolute;right:0;bottom:50px;width:max-content;max-width:min(260px,calc(100vw - 80px));
  background:var(--surface,#fff);border:1px solid var(--line-strong,#7A7673);box-shadow:var(--shadow-pop,0 8px 24px rgb(32 30 29/.12));
  padding:0 12px;font-size:var(--fs-2);color:var(--text,#201E1D)}
.dmap-credit-bubble[hidden]{display:none}
.dmap-credit-row{min-height:44px;line-height:44px}
.dmap-credit-row a{display:inline-block;min-height:44px;line-height:44px;color:var(--accent-text,#B5230C);text-decoration:underline}
.dmap-gate-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- the list/table twin of the map: closed on load, server-rendered, readable with no JS */
.dmap-list{margin:12px 4px 0}
.dmap-list summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-size:var(--fs-2);font-weight:700;color:var(--text,#201E1D)}
.dmap-table{width:100%;border-collapse:collapse;font-size:var(--fs-2);line-height:var(--lh-body);color:var(--text,#201E1D)}
.dmap-table caption{text-align:left;padding:4px 0 8px;font-size:var(--fs-1);color:var(--text-3,#5E5A58)}
.dmap-table th,.dmap-table td{text-align:left;padding:8px 10px 8px 0;border-top:1px solid var(--line,#D8D5D3);vertical-align:top;overflow-wrap:anywhere}
.dmap-table thead th{border-top:0;font-size:var(--fs-1);font-weight:700;color:var(--text-3,#5E5A58)}
.dmap-table tbody th{font-weight:var(--w-bold)}
.dmap-list p{margin:0;padding:4px 0 12px;font-size:var(--fs-2)}

@media (prefers-reduced-motion:reduce){
  .dmap *,.dmap *::before,.dmap *::after{animation:none!important;transition:none!important}
}