/* Alert.Vegas — tokens copied from Heliograph/css/style.css (keep in sync by hand) */
:root {
  --bg: #0a0e17; --panel: #111726; --panel-2: #171f31; --panel-3: #1e2840;
  --line: rgba(170,190,230,0.12); --line-2: rgba(170,190,230,0.24);
  --ink: #e9edf5; --ink-2: #a3aec6; --ink-3: #6b778f;
  --sun: #ff8a3d; --aurora: #5ce8a5; --geo: #b79cff; --radio: #ffd166; --wind: #5fb2ff;
  --ok: #0ca30c; --warn: #fab219; --serious: #ec835a; --crit: #d03b3b; --extreme: #b04fd6;
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  --radius: 12px; --top-h: 56px; --max-w: 1500px; --hero-h: 62vh;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* Screen-reader-only: kept in the a11y tree and readable by search crawlers, removed from view. */
.av-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--wind); text-decoration: none; } a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
.mono { font-family: var(--mono); }
.accent-sun { --accent: var(--sun); } .accent-aurora { --accent: var(--aurora); } .accent-geo { --accent: var(--geo); } .accent-radio { --accent: var(--radio); }
.accent-wind { --accent: var(--wind); } .accent-crit { --accent: var(--crit); } .accent-warn { --accent: var(--warn); } .accent-ink { --accent: var(--ink-2); }

/* topbar */
#av-top { position: sticky; top: 0; z-index: 50; height: var(--top-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 0 16px;
  background: rgba(17,23,38,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.av-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.av-brand-disc { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd9a8, #ff8a3d 55%, #b3361e); box-shadow: 0 0 14px rgba(255,138,61,0.5); }
.av-brand-name { font: 800 20px/1 var(--display); letter-spacing: -0.02em; } .av-brand-tag { color: var(--ink-3); font-size: 12px; }
.av-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; } .av-strip::-webkit-scrollbar { display: none; }
.av-chip { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel-2); font-size: 12px; color: var(--ink-2); }
.av-chip b { font: 600 13px var(--mono); color: var(--ink); } .av-chip.is-warn b { color: var(--warn); } .av-chip.is-crit b { color: var(--crit); }
#av-status { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); } #av-status.ok { background: var(--ok); } #av-status.warn { background: var(--warn); } #av-status.bad { background: var(--crit); }

/* hero */
#av-hero { position: relative; height: var(--hero-h); min-height: 380px; background: #070a12; isolation: isolate; }
#av-map, #av-sky { position: absolute; inset: 0; z-index: 0; } #av-sky { border: 0; width: 100%; height: 100%; background: #070a12; }
#av-sky[hidden] { display: none; }
.av-glass { position: absolute; z-index: 20; background: rgba(17,23,38,0.88); backdrop-filter: blur(8px); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px; }
.av-modes { top: 12px; left: 12px; display: flex; gap: 4px; }
.av-modes button, #av-layers button, #av-crime-window button, #av-food-panel button { background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 6px 10px; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.av-modes button[aria-pressed="true"], #av-crime-window button[aria-pressed="true"], #av-food-panel button[aria-pressed="true"] { background: var(--panel-3); color: var(--ink); border-color: var(--line-2); }
/* max-height + scroll (rather than a fixed height) keeps this panel from ever overlapping
   #av-legend below it, however tall the layer list + crime-window + food-panel additions
   below get, at any viewport height (--hero-h shrinks to 50vh on mobile). The subtracted
   136px = this panel's own 56px top offset + ~68px for #av-legend's height + a margin. */
#av-layers { top: 56px; left: 12px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100% - 136px); overflow-y: auto; overflow-x: hidden; }
/* Layer toggles are pure on/off controls, NOT a color key — every dot is the same neutral
   colour (hollow ring = off, filled = on). The #av-legend below is the single source of the
   real per-marker colours, so the two never contradict each other. */
#av-layers button[aria-pressed="true"] { color: var(--ink); }
#av-layers .sw { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: transparent; }
#av-layers button[aria-pressed="true"] .sw { background: var(--ink); border-color: var(--ink); }
.av-layer-btns { display: flex; flex-direction: column; gap: 2px; }
#av-crime-window { display: flex; gap: 2px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
#av-crime-window[hidden] { display: none; }
/* Food filter panel (Task 4): mirrors #av-crime-window but with three stacked rows (date
   range, grade chips, minimum demerits) instead of one — hidden unless the Food layer is on. */
#av-food-panel { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
#av-food-panel[hidden] { display: none; }
.av-food-row { display: flex; gap: 2px; }
.av-search { top: 12px; right: 12px; } .av-search input { background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); border-radius: 7px; padding: 7px 10px; width: 220px; font: inherit; }
/* The legend grew to ~18 entries as layers were added. On desktop it wraps into a couple of rows
   with room to spare; on mobile's 50vh hero that block met the controls panel coming down from the
   top and buried the map. So it collapses to a tap-to-open "Legend" chip on phones. It's a plain
   flex-wrap <div> with a JS-toggled `.is-open` class — deliberately NOT <details>: a closed
   <details> refuses to size to its content (author CSS revealing the children can't fix it), so it
   collapses to ~0 width on desktop. The div sizes correctly at every width (it's the original,
   proven shape); on phones #av-legend-toggle shows and the spans hide until `.is-open`. */
#av-legend { bottom: 12px; left: 12px; font-size: 11px; color: var(--ink-2); padding: 6px 10px; max-width: calc(100% - 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#av-legend > span { display: inline-flex; align-items: center; gap: 5px; }
#av-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
#av-legend-toggle { display: none; align-items: center; gap: 6px; padding: 0; background: transparent; border: 0; cursor: pointer; font: 600 12px var(--mono); color: var(--ink); }
#av-legend-toggle::after { content: "\25B8"; font-size: 10px; color: var(--ink-2); transition: transform .15s; }
#av-legend.is-open #av-legend-toggle::after { transform: rotate(90deg); }

/* ---- map marker glyphs (Task 2): distinct color+shape per source, reused as-is for both
   the actual Leaflet divIcon on the map and the #av-legend swatches below, so the legend
   can never drift out of sync with what's really drawn. */
.av-mk-wrap { background: transparent; border: 0; }
.av-mk-cam { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--wind); box-shadow: 0 0 6px rgba(95,178,255,.7); font-size: 10px; line-height: 1; }
.av-mk-lvmpd { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--radio); box-shadow: 0 0 6px rgba(255,209,102,.6); }
.av-mk-ndot { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--sun); font-size: 15px; line-height: 1; filter: drop-shadow(0 0 4px rgba(255,138,61,.7)); }
.av-mk-ndot.is-approx { opacity: .75; outline: 1.5px dashed var(--sun); outline-offset: 3px; border-radius: 50%; }
.av-mk-outage { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--geo); opacity: .5; border: 1px solid var(--geo); }
.av-mk-construction { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 13px; line-height: 1; filter: drop-shadow(0 0 4px rgba(255,138,61,.7)); }
.av-mk-closure { display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--crit); font-weight: 700; font-size: 13px; line-height: 1; filter: drop-shadow(0 0 4px rgba(208,59,59,.7)); }
.av-mk-sign { display: inline-block; width: 12px; height: 9px; border-radius: 2px; background: var(--aurora); border: 1px solid rgba(0,0,0,.35); }
.av-dms-msg { font-family: var(--mono); white-space: pre-wrap; margin: 4px 0 0; font-size: 11px; }
/* Waze crowdsourced reports (Task 4): a rotated-square "diamond" in --serious, deliberately NOT
   sharing a shape or color with any official NDOT glyph above (cam circle/wind, LVMPD dot/radio,
   511 triangle/closure X/sun/crit, sign rect/aurora) — the source is crowdsourced, not NDOT, so
   it must read as visually distinct at a glance. Hollow = incident, filled = closure. */
.av-mk-waze { display: inline-block; box-sizing: border-box; width: 11px; height: 11px; transform: rotate(45deg); border: 2px solid var(--serious); background: transparent; filter: drop-shadow(0 0 4px rgba(236,131,90,.6)); }
.av-mk-waze.is-closure { background: var(--serious); }
.av-waze-note { color: var(--ink-3); font-size: 11px; }
/* Wildfire hotspot (NASA FIRMS): a 🔥 glyph with a hot red-orange glow — distinct from the
   crime/food dots it shares the Safety mode with. Same glyph pattern as av-mk-construction. */
.av-mk-fire { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 13px; line-height: 1; filter: drop-shadow(0 0 5px rgba(255,79,36,.95)); }
.av-fire-note { color: var(--ink-3); font-size: 11px; }
/* WFIGS named fire: legend swatch approximating the acreage circle, plus the on-map name label
   (a permanent Leaflet tooltip — .leaflet-tooltip.<class> beats Leaflet's own tooltip defaults). */
.av-mk-wfire { display: inline-block; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); border: 2px solid var(--crit); opacity: .9; }
.leaflet-tooltip.av-wfire-label { background: rgba(17,23,38,.85); color: var(--ink); border: 1px solid var(--crit); border-radius: 4px; padding: 1px 5px; font: 600 10px var(--mono); box-shadow: none; white-space: nowrap; }
.leaflet-tooltip.av-wfire-label::before { display: none; }

/* ---- sidebar-click focus pulse (Task 3): a temporary ring dropped at the target marker's
   coordinate, independent of whether that marker itself is DOM (divIcon) or canvas
   (circleMarker) — see pulse() in av-map.js. JS already skips creating this element under
   prefers-reduced-motion (still opens the popup); the media guard here is defense in depth
   for the same reason the ticker/wx-play animations guard it below. */
.av-pulse-ring { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--radio); box-sizing: border-box; animation: av-pulse 1.5s ease-out; }
@keyframes av-pulse { from { transform: scale(0.3); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .av-pulse-ring { animation: none; opacity: 0; } }
.av-cam-msg { font-size: 12px; color: var(--ink-3); padding: 4px; }
.leaflet-container { font-family: var(--body); background: #070a12; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--ink); }
.av-shooting { color: var(--crit); font-weight: 600; }
.av-hint { top: 12px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--ink-2); padding: 6px 12px; border-radius: 20px; pointer-events: none; }

/* featured */
#av-featured { max-width: var(--max-w); margin: 20px auto 0; padding: 0 16px; position: relative; }
.av-feat { display: grid; grid-template-columns: 55% 1fr; gap: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.av-feat[hidden] { display: none; }
.av-feat-fig { margin: 0; position: relative; } .av-feat-fig img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }
.av-feat-fig figcaption { position: absolute; left: 10px; bottom: 8px; font: 11px var(--mono); color: var(--ink-2); background: rgba(10,14,23,0.7); padding: 2px 7px; border-radius: 6px; }
.av-feat-body { padding: 18px 20px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.av-beat-tag { font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); }
.av-feat-title { margin: 0; font: 700 26px/1.15 var(--display); letter-spacing: -0.02em; } .av-feat-excerpt { margin: 0; color: var(--ink-2); font-size: 15px; }
.av-feat-more summary { cursor: pointer; color: var(--wind); } .av-feat-more p { color: var(--ink-2); }
.av-feat-sources { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--ink-3); margin-top: auto; } .av-feat-sources a { padding: 2px 8px; border: 1px solid var(--line); border-radius: 20px; }
.av-feat-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px; } .av-feat-nav button { width: 10px; height: 10px; padding: 17px; box-sizing: content-box; border-radius: 50%; border: 0; background: var(--ink-3); background-clip: content-box; }
.av-feat-nav button[aria-current="true"] { background: var(--sun); } .av-feat-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(17,23,38,0.9); color: var(--ink); }
.av-feat-arrow.prev { left: 4px; } .av-feat-arrow.next { right: 4px; }

/* grid */
.av-grid { max-width: var(--max-w); margin: 24px auto; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.av-rail { position: sticky; top: calc(var(--top-h) + 12px); display: flex; flex-direction: column; gap: 12px; }
.av-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.av-card h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); display: flex; justify-content: space-between; }
.av-live-cam h3 { align-items: center; }
.av-card h3 .sub { text-transform: none; letter-spacing: 0; color: var(--ink-3); font-weight: 400; }
.av-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .av-stat div { background: var(--panel-2); border-radius: 8px; padding: 8px; }
.av-stat small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); } .av-stat b { font: 700 20px var(--display); }
.av-big { font: 700 34px/1 var(--display); letter-spacing: -0.02em; } .av-big small { font: 12px var(--mono); color: var(--ink-3); margin-left: 6px; }
.av-alerts { list-style: none; margin: 0; padding: 0; } .av-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; padding: 7px 0; border-top: 1px solid var(--line); cursor: pointer; }
.av-alert-where { grid-column: 2; color: var(--ink-3); font-size: 12px; } .av-empty { color: var(--ink-3); }
.av-tag { font: 10px var(--mono); padding: 1px 7px; border-radius: 20px; border: 1px solid var(--line-2); color: var(--ink-2); align-self: start; }
.tag-lvmpd { color: var(--wind); border-color: var(--wind); } .tag-nve { color: var(--geo); border-color: var(--geo); } .tag-ndot { color: var(--radio); border-color: var(--radio); }
.av-time { color: var(--ink-3); font: 11px var(--mono); margin-left: 8px; }
.av-delta { font: 600 12px var(--mono); margin-left: 6px; } .av-delta.up { color: var(--crit); } .av-delta.down { color: var(--aurora); } .av-delta.flat { color: var(--ink-3); }
.av-crime-row { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--line); }
.av-crime-foot { color: var(--ink-3); font-size: 11px; margin: 8px 0 2px; } .av-crime-link { font-size: 12px; }
#wx-embed { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
#wx-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; display: block; }
.wx-facade { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #000; cursor: pointer; padding: 0; }
.wx-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-live { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 4px; font: 700 11px var(--mono); letter-spacing: 0.04em; color: #fff; background: rgba(208,59,59,0.9); padding: 2px 8px; border-radius: 20px; }
.wx-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(10,14,23,0.55); border: 1px solid rgba(255,255,255,0.5); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, background 0.15s ease; }
.wx-facade:hover .wx-play, .wx-facade:focus-visible .wx-play { background: rgba(10,14,23,0.75); transform: translate(-50%,-50%) scale(1.08); }
.wx-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 6px; font: 12px var(--body); color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); }
.wx-facade:focus-visible { outline: 2px solid var(--wind); outline-offset: 2px; }
.wx-facade.is-off { cursor: default; filter: grayscale(1) brightness(0.6); }
.wx-facade.is-off .wx-play, .wx-facade.is-off .wx-live { display: none; }
@media (prefers-reduced-motion: reduce) { .wx-play { transition: none; } }
.av-band { font: 600 12px var(--mono); padding: 2px 8px; border-radius: 6px; background: var(--panel-3); } .band-good { color: var(--ok); } .band-moderate { color: var(--warn); } .band-bad { color: var(--crit); }
#card-cam video { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; } #card-cam .av-cam-name { margin: 6px 0; font-weight: 600; }

/* news column */
.av-news h2 { font: 700 18px var(--display); margin: 0 0 6px; } .av-news .av-updated { color: var(--ink-3); font: 11px var(--mono); margin-bottom: 12px; }
.av-beat-nav { position: sticky; top: calc(var(--top-h) + 8px); z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; background: var(--bg); padding: 8px 0; margin-bottom: 6px; }
.av-beat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel-2); color: var(--ink-2); font-size: 12px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.av-beat-pill:hover { text-decoration: none; border-color: var(--line-2); color: var(--ink); }
.av-beat-pill-n { color: var(--ink-3); font: 11px var(--mono); }
.av-beat-pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.av-beat-pill.is-active .av-beat-pill-n { color: rgba(10,14,23,0.65); }
.av-beat { margin-bottom: 22px; } .av-beat-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.av-beat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } .av-beat-count { color: var(--ink-3); font: 11px var(--mono); }
.av-entry { padding: 9px 0 9px 12px; border-left: 2px solid var(--line); margin-bottom: 2px; } .av-entry-group { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(255,255,255,0.025), transparent); }
.av-headline { margin: 0; font: 600 15px/1.3 var(--body); } .av-entry-group .av-headline { font-family: var(--display); font-size: 17px; } .av-headline a { color: var(--ink); }
.av-pill { font: 10px var(--mono); color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; padding: 1px 7px; vertical-align: 2px; margin-left: 4px; }
.av-srcs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; } .av-src a { font-size: 13px; }
.av-meta { color: var(--ink-3); font-size: 12px; margin-top: 3px; } .av-more { background: transparent; border: 1px dashed var(--line-2); border-radius: 8px; color: var(--ink-2); padding: 6px 12px; font-size: 12px; margin-top: 4px; }
.av-entry-extra[hidden] { display: none; }

/* footer */
.av-footer { border-top: 1px solid var(--line); background: var(--panel); margin-top: 24px; }
.av-ticker { overflow: hidden; white-space: nowrap; padding: 8px 0; font: 12px var(--mono); color: var(--radio); }
.av-ticker span { display: inline-block; padding-left: 100%; animation: av-marquee 80s linear infinite; } @keyframes av-marquee { to { transform: translateX(-100%); } }
.av-credits { max-width: var(--max-w); margin: 0 auto; padding: 12px 16px 24px; color: var(--ink-3); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .av-ticker span { animation: none; padding-left: 0; } .av-beat-pill { transition: none; } }
@media (max-width: 1100px) {
  .av-brand-tag { display: none; }
}
@media (max-width: 900px) {
  :root { --hero-h: 50vh; } #av-top { grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 10px; } .av-brand-tag { display: none; } .av-brand-name { font-size: 17px; }
  .av-grid { grid-template-columns: 1fr; } .av-rail { display: contents; } #card-cam { order: -1; } .av-feat { grid-template-columns: 1fr; } .av-feat-body { padding: 0 16px 16px; }
  .av-layer-btns { flex-direction: row; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
  .av-layer-btns.av-scroll-fade { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .av-layer-btns::-webkit-scrollbar { display: none; } .av-layer-btns button { flex: 0 0 auto; white-space: nowrap; }
  /* The filter stack (layer toggles + crime window + food panel) was setting its own width from its
     widest row, overflowing the viewport (the 17px sideways page-scroll) and eating the top half of
     the 50vh hero. Cap it to the viewport, and shrink the controls so more map shows through. */
  #av-layers { max-width: calc(100% - 24px); }
  #av-layers button, #av-crime-window button, #av-food-panel button, .av-modes button { padding: 4px 8px; font-size: 11px; gap: 5px; }
  #av-food-panel { gap: 2px; }
  /* Collapsed by default: just a small "Legend" chip bottom-left, clear of the map. Tap it and the
     spans reveal and wrap in rows; the box is anchored at bottom:12px so it grows UPWARD, and is
     height-capped with scroll so a future longer key can never blanket the hero again. */
  #av-legend { max-width: calc(100% - 24px); max-height: 45vh; overflow-y: auto; }
  #av-legend-toggle { display: flex; order: -1; }
  #av-legend:not(.is-open) > span { display: none; }
  .av-search input { width: 100px; }
  /* The mode bar (Transport/Safety/Weather/Food) sits top-left, the cam search top-right. Cap the
     bar so it can never grow into the search on a narrow phone — it scrolls horizontally instead.
     ~390px+ fits all four chips with no scroll; only the very narrowest phones nudge into a scroll. */
  .av-modes { max-width: calc(100% - 140px); overflow-x: auto; scrollbar-width: none; }
  .av-modes::-webkit-scrollbar { display: none; }
  .av-hint { display: none; } /* "Click a camera" hint has no collision-free spot in the cramped top row now that search sits at top:12px again; tap affordance covers mobile fine without it */
}
@media (max-width: 520px) {
  .av-feat-nav button { padding: 13px; }
}