/**
 * AvxMaps front-end — namespaced under .avx-maps, brand-tokened per install.
 * No Shadow DOM (the directory panel is the accessibility backbone and must
 * stay in the page DOM — product brief §11.1). Type inherits the site theme;
 * component tokens below only fill gaps.
 */

.avx-maps {
	/* site typography (loaded by the theme); graceful system fallbacks */
	--avx-font: "Inter", "Seravek", "Segoe UI", system-ui, -apple-system, sans-serif;
	--avx-font-head: "Manrope", "Inter", "Segoe UI", system-ui, sans-serif;
	/* brand tokens are overridden per-install via inline style from settings */
	--avx-brand: #a12a1d;
	--avx-on-brand: #ffffff;
	--avx-brand-deep: color-mix(in srgb, var(--avx-brand) 78%, #000);
	--avx-ink: #25150c;
	--avx-muted: #55504b;
	--avx-panel: #ffffff;
	--avx-ground: #f7f5f2;
	--avx-line: #e6e6e6;
	--avx-chip: #efede8;
	--avx-focus: #145a8c;
	--avx-shadow: 0 0 25px 1px rgba(0, 0, 0, 0.15);
	/* AZA parking-status scale (values mirror the Airport Tools plugin) */
	--avx-p-open: #808954;
	--avx-p-fill: #ffd100;
	--avx-p-full: #a12a1d;

	position: relative;
	color: var(--avx-ink);
	line-height: 1.5;
	font-family: var(--avx-font);
	/* when linked to via #avx-map, leave room for a sticky site header so the
	   level switcher isn't hidden under it. Default clears a ~150px header+alert
	   bar; set --avx-anchor-offset per-site if the header differs. */
	scroll-margin-top: var(--avx-anchor-offset, 156px);
}
.avx-maps *,
.avx-maps *::before,
.avx-maps *::after { box-sizing: border-box; }
.avx-maps [hidden] { display: none !important; }

/* theme-isolation baseline: broad theme rules (e.g. `button:not(...)`) must
   never restyle component controls — every control re-declares from here */
.avx-maps.avx-maps button {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	color: inherit;
	font: inherit;
	text-decoration: none;
}
/* theme hover/focus/active styles must not leak either: the theme paints its
   red button background on interaction states, which our base rules lose to —
   every state pins BOTH color and background here, then each control
   re-declares its intended state styling below (WCAG 1.4.3: never dark text
   on the theme's red) */
.avx-maps.avx-maps button:hover,
.avx-maps.avx-maps button:focus,
.avx-maps.avx-maps button:focus-visible,
.avx-maps.avx-maps button:active {
	color: inherit;
	background: none;
	text-decoration: none;
}
/* zoom controls (+ − Fit) */
.avx-maps.avx-maps .avx-controls button:hover,
.avx-maps.avx-maps .avx-controls button:focus,
.avx-maps.avx-maps .avx-controls button:focus-visible,
.avx-maps.avx-maps .avx-controls button:active {
	background: var(--avx-chip);
	color: var(--avx-ink);
}
/* filter chips: light bg + ink + underline while interacting */
.avx-maps.avx-maps .avx-chips button:hover,
.avx-maps.avx-maps .avx-chips button:focus,
.avx-maps.avx-maps .avx-chips button:focus-visible,
.avx-maps.avx-maps .avx-chips button:active {
	background: var(--avx-chip);
	color: var(--avx-ink);
	text-decoration: underline;
}
/* pressed chip: stays brand red with WHITE text in every state; underline is
   the interaction cue */
.avx-maps.avx-maps .avx-chips button[aria-pressed="true"],
.avx-maps.avx-maps .avx-chips button[aria-pressed="true"]:hover,
.avx-maps.avx-maps .avx-chips button[aria-pressed="true"]:focus,
.avx-maps.avx-maps .avx-chips button[aria-pressed="true"]:focus-visible,
.avx-maps.avx-maps .avx-chips button[aria-pressed="true"]:active {
	color: var(--avx-on-brand);
	background: var(--avx-brand);
	border-color: var(--avx-brand);
}
.avx-maps.avx-maps .avx-chips button[aria-pressed="true"]:hover,
.avx-maps.avx-maps .avx-chips button[aria-pressed="true"]:focus-visible {
	background: var(--avx-brand-deep);
	border-color: var(--avx-brand-deep);
	text-decoration: underline;
}
/* level segment mirrors the chips */
.avx-maps.avx-maps .avx-levels button:hover,
.avx-maps.avx-maps .avx-levels button:focus,
.avx-maps.avx-maps .avx-levels button:focus-visible,
.avx-maps.avx-maps .avx-levels button:active {
	background: var(--avx-chip);
	color: var(--avx-ink);
	text-decoration: underline;
}
.avx-maps.avx-maps .avx-levels button[aria-pressed="true"],
.avx-maps.avx-maps .avx-levels button[aria-pressed="true"]:hover,
.avx-maps.avx-maps .avx-levels button[aria-pressed="true"]:focus,
.avx-maps.avx-maps .avx-levels button[aria-pressed="true"]:focus-visible,
.avx-maps.avx-maps .avx-levels button[aria-pressed="true"]:active {
	color: var(--avx-on-brand);
	background: var(--avx-brand);
}
.avx-maps.avx-maps .avx-levels button[aria-pressed="true"]:hover,
.avx-maps.avx-maps .avx-levels button[aria-pressed="true"]:focus-visible {
	background: var(--avx-brand-deep);
	text-decoration: underline;
}
/* sheet action buttons */
.avx-maps.avx-maps .avx-actions button:hover,
.avx-maps.avx-maps .avx-actions button:focus,
.avx-maps.avx-maps .avx-actions button:focus-visible,
.avx-maps.avx-maps .avx-actions button:active {
	background: var(--avx-line);
	color: var(--avx-ink);
}
/* panel open/close + sheet close keep their light backgrounds in all states */
.avx-maps.avx-maps .avx-open-btn:hover,
.avx-maps.avx-maps .avx-open-btn:focus,
.avx-maps.avx-maps .avx-open-btn:focus-visible,
.avx-maps.avx-maps .avx-panel-close:hover,
.avx-maps.avx-maps .avx-panel-close:focus,
.avx-maps.avx-maps .avx-sheet-close:hover,
.avx-maps.avx-maps .avx-sheet-close:focus,
.avx-maps.avx-maps .avx-key-btn:hover,
.avx-maps.avx-maps .avx-key-btn:focus,
.avx-maps.avx-maps .avx-acc-head:hover,
.avx-maps.avx-maps .avx-acc-head:focus {
	background: var(--avx-chip);
	color: var(--avx-ink);
}
.avx-maps.avx-maps .avx-sheet-title {
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
}

.avx-maps button { cursor: pointer; font: inherit; }
.avx-maps :is(button,
.avx-maps input,
.avx-maps a,
.avx-maps [tabindex]):focus-visible {
	outline: 3px solid var(--avx-focus);
	outline-offset: 2px;
	border-radius: 6px;
}
.avx-maps .avx-sr-only {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- stage & viewport ---------- */
.avx-maps .avx-stage { position: relative; min-height: var(--avx-min-h, 560px); display: flex; }
.avx-maps .avx-viewport {
	position: relative; flex: 1; min-height: var(--avx-min-h, 560px);
	border: 1px solid var(--avx-line); border-radius: 14px; overflow: hidden;
	background-color: #fdfcfa;
	/* subtle dot grid: reads as a map canvas rather than empty page */
	background-image: radial-gradient(rgba(37, 21, 12, 0.06) 1px, transparent 1.5px);
	background-size: 22px 22px;
	/* pan-x pan-y (not none): a single finger scrolls the PAGE, so a thumb that
	   lands on the map is never trapped; two fingers move the map. Pinch-zoom is
	   excluded from this list, so the SVG level owns it. Desktop mouse-drag is
	   unaffected (touch-action governs touch only). */
	touch-action: pan-x pan-y; cursor: grab;
}
.avx-maps .avx-viewport:active { cursor: grabbing; }
/* cooperative-gesture nudge (SVG level; the geo level uses MapLibre's own) */
.avx-maps .avx-coop-hint {
	position: absolute; left: 50%; bottom: 16px; translate: -50% 0; z-index: 25;
	background: rgba(37, 21, 12, 0.86); color: #fff; font-size: 13px; font-weight: 600;
	padding: 8px 14px; border-radius: 999px; pointer-events: none;
	opacity: 0; transition: opacity 0.2s ease;
}
.avx-maps .avx-coop-hint.avx-show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .avx-maps .avx-coop-hint { transition: none; } }
.avx-maps .avx-loading { padding: 24px; color: var(--avx-muted); }
.avx-maps .avx-layer { position: absolute; inset: 0; transition: opacity 0.35s ease; }
.avx-maps .avx-layer.avx-fadeout { opacity: 0; pointer-events: none; }
.avx-maps .avx-layer svg { position: absolute; top: 0; left: 0; } /* viewBox-driven camera: crisp at every zoom */
/* base-map labels: the source uses Frutiger LT Std (licensed print face) —
   render in the site face until a Frutiger webfont license is wired in */
.avx-maps .avx-layer svg text { font-family: var(--avx-font); }
/* invisible hit targets over existing base-map artwork/labels; on hover/focus
   they outline the label/icon so the clickable spot announces itself */
.avx-maps .avx-hit :is(circle, rect) { fill: transparent; stroke: none; pointer-events: all; }
.avx-maps .avx-hit:hover :is(circle, rect),
.avx-maps .avx-hit:focus :is(circle, rect) {
	fill: rgba(20, 90, 140, 0.08);
	stroke: var(--avx-focus);
	stroke-width: 1.5;
}
/* icon affordance: a soft halo on hover/focus signals "clickable" without
   touching geometry (transform would fight the icons' own transforms) */
.avx-maps .avx-layer svg #Icons [data-avx-poi]:hover,
.avx-maps .avx-layer svg #Icons [data-avx-poi]:focus,
.avx-maps .avx-layer svg [id^="avx-gate"]:hover,
.avx-maps .avx-layer svg [id^="avx-gate"]:focus {
	filter: drop-shadow(0 0 3px rgba(20, 90, 140, 0.85));
}
.avx-maps .avx-layer svg [data-avx-poi] { cursor: pointer; }
.avx-maps .avx-layer svg [data-avx-poi].avx-dim { opacity: 0.22; }
.avx-maps .avx-layer svg [data-avx-poi]:focus { outline: none; }
.avx-maps .avx-geo-note {
	position: absolute; inset: 0; display: grid; place-items: center;
	padding: 24px; text-align: center; color: var(--avx-muted);
}

/* ---------- geo campus level (MapLibre canvas + HTML marker layer) ---------- */
/* the canvas is aria-hidden; everything interactive here is a real button */
.avx-maps .avx-layer-geo { background: #f4f1ec; }
.avx-maps .avx-layer-geo .maplibregl-canvas { outline: none; }
.avx-maps.avx-maps .avx-geo-poi {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--avx-panel); color: var(--avx-ink);
	border: 1px solid var(--avx-line); border-radius: 99px;
	padding: 6px 12px 6px 8px; font-size: 13px; font-weight: 700;
	font-family: var(--avx-font-head);
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22); /* ≥3:1 vs basemap (WCAG 1.4.11) via panel bg + border */
	cursor: pointer; white-space: nowrap; min-height: 34px;
}
/* expand the effective target to ~44px without growing the visual chip */
.avx-maps .avx-geo-poi::after { content: ""; position: absolute; inset: -6px; border-radius: 99px; }
/* CRITICAL: the theme-isolation button reset sets position:static, which beats
   MapLibre's .maplibregl-marker{position:absolute} — pills then anchor to flow
   layout and DRIFT off their coordinates while panning. Pin them explicitly.
   transition:none is equally critical: the theme's button transition (all .15s)
   would animate every per-frame transform, making pills swim behind the map. */
.avx-maps.avx-maps .avx-geo-poi,
.avx-maps.avx-maps .avx-geo-terminal-link {
	position: absolute; top: 0; left: 0; margin: 0; will-change: transform;
	transition: none;
}
/* metro zooms: lot pills collapse to their status dots (the names would
   overlap into soup at city scale); the Terminal pill stays — it IS the
   "here's the airport" marker */
.avx-maps .avx-layer-geo.avx-geo-far .avx-geo-poi { padding: 4px; gap: 0; }
.avx-maps .avx-layer-geo.avx-geo-far .avx-geo-poi .avx-geo-name { display: none; }
/* campus landmarks (FBO, golf, education) — subtle orientation labels, quieter
   than the brand pills, hidden entirely at metro scale to avoid clutter */
.avx-maps.avx-maps .avx-geo-landmark {
	background: rgba(255, 255, 255, 0.82); color: var(--avx-muted);
	border-color: rgba(37, 21, 12, 0.16); font-weight: 600; font-size: 11.5px;
	min-height: 26px; padding: 3px 10px 3px 7px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.avx-maps.avx-maps .avx-geo-landmark .avx-geo-dot {
	width: 9px; height: 9px; background: transparent;
	border: 2px solid var(--avx-muted); box-shadow: none;
}
.avx-maps.avx-maps .avx-geo-landmark:hover,
.avx-maps.avx-maps .avx-geo-landmark:focus,
.avx-maps.avx-maps .avx-geo-landmark:focus-visible,
.avx-maps.avx-maps .avx-geo-landmark:active {
	background: #fff; color: var(--avx-ink); text-decoration: underline;
}
.avx-maps .avx-layer-geo.avx-geo-far .avx-geo-landmark { display: none; }
.avx-maps.avx-maps .avx-geo-poi:hover,
.avx-maps.avx-maps .avx-geo-poi:focus,
.avx-maps.avx-maps .avx-geo-poi:focus-visible,
.avx-maps.avx-maps .avx-geo-poi:active {
	background: var(--avx-chip); color: var(--avx-ink); text-decoration: underline;
}
.avx-maps .avx-geo-poi .avx-geo-dot {
	width: 13px; height: 13px; border-radius: 50%; flex: none;
	/* ink, NOT brand red: an unstatused pin must never read as "full" (red) */
	background: var(--avx-ink); border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
/* live parking status colors the dot — always alongside the text label,
   never color alone (WCAG 1.4.1) */
.avx-maps .avx-geo-poi[data-status="open"] .avx-geo-dot { background: var(--avx-p-open); }
/* the yellow "filling" dot is 1.5:1 vs the white pill — a dark ring provides
   the 3:1 boundary (1.4.11); the label text still carries the status in words */
.avx-maps .avx-geo-poi[data-status="fill"] .avx-geo-dot {
	background: var(--avx-p-fill);
	box-shadow: 0 0 0 1.5px #8a6100;
}
.avx-maps .avx-geo-poi[data-status="full"] .avx-geo-dot,
.avx-maps .avx-geo-poi[data-status="closed"] .avx-geo-dot { background: var(--avx-p-full); }
.avx-maps .avx-geo-poi.avx-dim { opacity: 0.25; }
.avx-maps .avx-geo-poi.avx-sel {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--avx-focus), 0 2px 7px rgba(0, 0, 0, 0.22);
}
.avx-maps .avx-geo-poi.avx-pulse { animation: avx-geopulse 1.1s ease-out 2; }
@keyframes avx-geopulse {
	0% { scale: 1; } 45% { scale: 1.12; } 100% { scale: 1; }
}
.avx-maps.avx-maps .avx-geo-terminal-link {
	display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
	background: var(--avx-panel); color: var(--avx-ink);
	border: 1px solid var(--avx-line); border-radius: 10px;
	padding: 9px 16px; font-size: 13.5px; font-family: var(--avx-font-head);
	box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25); cursor: pointer; min-height: 44px;
}
.avx-maps .avx-geo-terminal-link u { color: var(--avx-focus); font-weight: 700; }
.avx-maps.avx-maps .avx-geo-terminal-link:hover,
.avx-maps.avx-maps .avx-geo-terminal-link:focus,
.avx-maps.avx-maps .avx-geo-terminal-link:focus-visible,
.avx-maps.avx-maps .avx-geo-terminal-link:active { background: var(--avx-chip); color: var(--avx-ink); }
/* the link is anchored ON the brand-red terminal polygon, where the blue focus
   ring alone is ~1.4:1 — a white casing keeps the indicator visible (2.4.7) */
.avx-maps.avx-maps .avx-geo-terminal-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 1px;
	box-shadow: 0 0 0 7px var(--avx-focus), 0 2px 9px rgba(0, 0, 0, 0.25);
}
.avx-maps .avx-geo-label {
	background: rgba(255, 255, 255, 0.88); color: var(--avx-ink);
	border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 600;
	pointer-events: none; white-space: nowrap;
}
/* road names render as MapLibre line-following symbols (self-hosted glyphs) */

/* ---------- terminal-level pills: pure TOOLTIPS anchored to SVG coords ----------
   The overlay pans/zooms with the viewBox camera (transforms set in applyT).
   Owner decision: the illustrated map's own icons and labels are the visual
   language at EVERY zoom — a POI's name pill appears solo on hover/focus and
   never intercepts the pointer (the artwork stays the click target). */
.avx-maps .avx-svg-pills { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.avx-maps.avx-maps .avx-svg-pill {
	pointer-events: none;
	font-size: 12px; min-height: 28px; padding: 3px 10px 3px 7px; gap: 5px;
}
.avx-maps .avx-svg-pill .avx-geo-dot { width: 10px; height: 10px; }
/* (doubled class: must outrank the .avx-geo-poi inline-flex base rule) */
.avx-maps.avx-maps .avx-svg-pill { display: none; }
.avx-maps.avx-maps .avx-svg-pill.avx-pill-hover { display: inline-flex; }
/* pill dots take the directory category tints — one color system everywhere */
.avx-maps .avx-svg-pill.avx-cat-dining .avx-geo-dot { background: #7a3600; }
.avx-maps .avx-svg-pill.avx-cat-shopping .avx-geo-dot { background: #2a3d7e; }
.avx-maps .avx-svg-pill.avx-cat-gates .avx-geo-dot { background: #8e2114; }
.avx-maps .avx-svg-pill.avx-cat-amenities .avx-geo-dot { background: #005d52; }
.avx-maps .avx-svg-pill.avx-cat-transportation .avx-geo-dot { background: #3e3e66; }
.avx-maps .avx-svg-pill.avx-cat-parking .avx-geo-dot { background: #495026; }
/* visible, non-removable data attribution on the map itself (ODbL) */
.avx-maps .avx-geo-attrib {
	position: absolute; right: 6px; bottom: 4px; z-index: 5;
	font-size: 11px; color: var(--avx-muted);
	background: rgba(255, 255, 255, 0.75); border-radius: 4px; padding: 1px 6px;
	pointer-events: none;
}
@media (max-width: 899px) {
	/* narrow screens: wrap within the right half so the chip never hides
	   under the bottom-left "Search & directory" button */
	.avx-maps .avx-geo-attrib { max-width: 48vw; text-align: right; line-height: 1.25; }
}
.avx-maps.avx-on-geo.avx-maps .avx-key-btn { bottom: 34px; }
.avx-maps.avx-on-geo .avx-key { bottom: 86px; }
/* GPS is a campus-level affordance only (useless indoors) */
.avx-maps.avx-maps .avx-controls .avx-gps { display: none; }
.avx-maps.avx-on-geo.avx-maps .avx-controls .avx-gps { display: inline-block; }
.avx-maps .avx-controls .avx-gps svg { width: 20px; height: 20px; vertical-align: -4px; }
.avx-maps .avx-gps-dot {
	width: 16px; height: 16px; border-radius: 50%;
	background: #1a73e8; border: 3px solid #fff;
	box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.35), 0 1px 5px rgba(0, 0, 0, 0.3);
}

/* focus/selection ring: white casing under a fixed deep-blue ring */
.avx-maps .avx-ring {
	fill: none; stroke: var(--avx-focus); stroke-width: 2.5;
	pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
.avx-maps .avx-ring-case { stroke: #fff; stroke-width: 5.5; }
.avx-maps .avx-ring.avx-show { opacity: 1; }
.avx-maps .avx-ring.avx-pulse { animation: avx-ringpulse 1.1s ease-out 2; }
@keyframes avx-ringpulse {
	0% { stroke-width: 2.5; } 45% { stroke-width: 7; } 100% { stroke-width: 2.5; }
}

/* map pins/pills drawn into the SVG */
.avx-maps .avx-pin rect { fill: var(--avx-brand); stroke: #fff; stroke-width: 1.2; }
.avx-maps .avx-pin text { fill: var(--avx-on-brand); font-weight: 700; }
.avx-maps .avx-pin.avx-st-open rect { fill: var(--avx-p-open); }
.avx-maps .avx-pin.avx-st-fill rect { fill: var(--avx-p-fill); }
.avx-maps .avx-pin.avx-st-fill text { fill: #25150c; }
.avx-maps .avx-pin.avx-st-full rect { fill: var(--avx-p-full); }
.avx-maps .avx-marker circle { fill: var(--avx-brand); stroke: #fff; stroke-width: 2; }
.avx-maps .avx-marker text { fill: var(--avx-on-brand); font-weight: 800; text-anchor: middle; }

/* floating controls */
.avx-maps .avx-controls {
	position: absolute; right: 10px; top: 10px; z-index: 10;
	display: flex; flex-direction: column; gap: 6px;
}
.avx-maps .avx-controls button {
	width: 44px; height: 44px; border-radius: 10px;
	border: 1px solid var(--avx-line); background: var(--avx-panel); color: var(--avx-ink);
	font-size: 19px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.avx-maps .avx-controls button:hover { background: var(--avx-chip); }
.avx-maps .avx-levels {
	position: absolute; left: 50%; translate: -50% 0; bottom: 12px; z-index: 10;
	display: flex; border: 1px solid var(--avx-line); border-radius: 8px; overflow: hidden;
	background: var(--avx-panel); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.avx-maps .avx-levels button {
	border: 0; background: transparent; color: var(--avx-muted);
	padding: 10px 16px; min-height: 44px; font-weight: 700; font-size: 14px;
}
.avx-maps .avx-levels button:not([aria-pressed="true"]):hover { background: var(--avx-chip); color: var(--avx-ink); }
.avx-maps .avx-levels button[aria-pressed="true"] { background: var(--avx-brand); color: var(--avx-on-brand); }
@media (max-width: 899px) {
	.avx-maps .avx-levels { bottom: auto; top: 12px; left: 12px; translate: 0 0; }
}

/* alert layer (map-scoped notices) */
.avx-maps .avx-alert {
	position: absolute; left: 12px; right: 64px; top: 12px; z-index: 12;
	background: #f7eed8; border: 1px solid #8a6100; border-left-width: 5px; border-radius: 10px;
	padding: 8px 12px; font-size: 13.5px; display: flex; gap: 10px; align-items: center;
	justify-content: space-between;
}
@media (max-width: 899px) { .avx-maps .avx-alert { top: 64px; } }
.avx-maps .avx-alert strong { color: #8a6100; }
.avx-maps .avx-alert button { border: 0; background: transparent; color: var(--avx-muted); font-size: 18px; padding: 13px; margin: -8px; }

/* ---------- directory panel ---------- */
.avx-maps .avx-panel {
	position: absolute; z-index: 20; background: var(--avx-panel);
	box-shadow: var(--avx-shadow); display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 900px) {
	/* DOCKED, not floating. The panel used to be absolutely positioned over the
	   viewport, so an open directory hid roughly a third of the floor plan and
	   every selection had to be dismissed to see the map again. As a column of
	   the flex stage it never covers the artwork, and the map fits itself into
	   whatever width is actually left (see setPanel/refit in the app). */
	.avx-maps .avx-stage { gap: 16px; }
	/* A DEFINITE height, not just a floor, and only once the app has booted.
	   Docking made the panel an ordinary flex item, so its content started
	   driving the container: expanding "Amenities & services" grew the stage from
	   680px to 3450px, took the map viewport with it, pushed the rest of the page
	   down and sent the detail popover (positioned against stage.clientHeight)
	   far below the fold. min-height cannot bound a child that is sizing its
	   parent — the column needs a height to scroll inside.
	   Gated on .avx-ready because before boot the panel IS the page's directory,
	   rendered full-length for crawlers and no-JS visitors, and clipping that to
	   680px would hide most of it. */
	.avx-maps.avx-ready .avx-stage { height: var(--avx-min-h, 560px); }
	.avx-maps .avx-panel {
		position: relative; order: -1; z-index: auto;
		left: auto; right: auto; top: auto; bottom: auto;
		flex: 0 0 clamp(300px, 26%, 380px);
		/* a flex item defaults to min-height:auto, which refuses to shrink below
		   its content — without this the panel wins over the stage's height and
		   the directory still has nothing to scroll within */
		min-height: 0;
		border-radius: 12px; border: 1px solid var(--avx-line); box-shadow: none;
	}
	.avx-maps.avx-maps .avx-open-btn { left: 12px; top: 12px; }
}

/* Optional edge-to-edge stage — block "Full width" alignment or the shortcode's
   full_width="1". 100vw INCLUDES the scrollbar, which is what makes naive
   breakouts scroll the page sideways; --avx-sbw is the measured scrollbar width
   published by the app, so the width lands exactly on the viewport. */
.avx-maps.avx-full {
	width: calc(100vw - var(--avx-sbw, 0px));
	max-width: calc(100vw - var(--avx-sbw, 0px));
	margin-left: calc(50% - (100vw - var(--avx-sbw, 0px)) / 2);
}
.avx-maps.avx-full .avx-stage,
.avx-maps.avx-full .avx-foot { padding-inline: clamp(12px, 2vw, 32px); }
.avx-maps.avx-full .avx-viewport { border-radius: 12px; }
@media (max-width: 899px) {
	.avx-maps .avx-panel { left: 8px; right: 8px; bottom: 8px; height: 70%; border-radius: 16px; border: 1px solid var(--avx-line); }
	.avx-maps.avx-maps .avx-open-btn { left: 12px; bottom: 14px; }
	/* The stage height is tuned for a desktop map sitting beside the directory;
	   the same number on a phone would push the rest of the page below the fold.
	   Cap it against the viewport, but never override a SMALLER configured value. */
	.avx-maps .avx-stage,
	.avx-maps .avx-viewport { min-height: min(var(--avx-min-h, 560px), 70vh); }
}
/* no-JS / pre-boot: panel renders as a static full directory below the map */
.avx-maps:not(.avx-ready) .avx-panel { position: static; width: auto; height: auto; box-shadow: none; border: 0; }
.avx-maps:not(.avx-ready) .avx-viewport { display: none; }
.avx-maps.avx-ready .avx-viewport { display: block; }

.avx-maps .avx-panel-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--avx-line); flex: none;
}
.avx-maps .avx-panel-title { font-weight: 800; font-size: 16px; }
.avx-maps.avx-maps .avx-panel-close {
	width: 44px; height: 44px; border: 1px solid var(--avx-line);
	background: var(--avx-chip); color: var(--avx-ink); border-radius: 8px; font-size: 16px;
}
.avx-maps.avx-maps .avx-panel-close:hover { background: var(--avx-line); }
.avx-maps.avx-maps .avx-open-btn {
	position: absolute; z-index: 15; display: inline-flex; align-items: center; gap: 8px;
	background: var(--avx-panel); border: 1px solid var(--avx-line); color: var(--avx-ink);
	border-radius: 10px; padding: 11px 18px; font-weight: 700; font-size: 14px; min-height: 44px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.avx-maps.avx-maps .avx-open-btn:hover { background: var(--avx-chip); }
.avx-maps.avx-maps .avx-open-btn svg { width: 17px; height: 17px; flex: none; }

.avx-maps .avx-search-wrap { padding: 14px 16px 4px; flex: none; position: relative; }
.avx-maps .avx-search-wrap .avx-mag {
	position: absolute; left: 28px; top: 50%; translate: 0 -50%;
	color: var(--avx-muted); pointer-events: none; display: flex; margin-top: 4px;
}
.avx-maps .avx-search-wrap .avx-mag svg { width: 19px; height: 19px; }
/* doubled class + !important: some themes force input padding/font-size with
   !important (e.g. the AZA theme on the standard page template), which slides
   the placeholder under the search icon and shrinks the text. These two must
   win; 16px also stops iOS zoom-on-focus. */
.avx-maps.avx-maps .avx-search {
	width: 100%; padding: 12px 12px 12px 42px !important; border-radius: 10px;
	border: 1px solid var(--avx-line); background: var(--avx-panel); color: var(--avx-ink);
	font-size: 16px !important; line-height: 1.4;
	/* the placeholder is the configured search hint; in the docked column it can
	   be longer than the box, and a hard clip mid-word ("…restrooms, p") reads as
	   a rendering fault. An ellipsis says "there is more" instead. */
	text-overflow: ellipsis;
}
.avx-maps.avx-maps .avx-search::placeholder { text-overflow: ellipsis; opacity: 0.72; }
.avx-maps .avx-results {
	position: absolute; z-index: 40; left: 16px; right: 16px; top: calc(100% + 2px);
	background: var(--avx-panel); border: 1px solid var(--avx-line); border-radius: 12px;
	box-shadow: var(--avx-shadow); max-height: 300px; overflow: auto;
	margin: 0; padding: 6px; list-style: none;
}
.avx-maps .avx-results li {
	padding: 10px; border-radius: 8px; display: flex;
	justify-content: space-between; gap: 10px; cursor: pointer;
}
.avx-maps .avx-results li .avx-sub { white-space: nowrap; }
.avx-maps .avx-results li:hover { background: var(--avx-chip); }
/* aria-activedescendant means the active option never takes DOM focus, so this
   IS its focus indicator and has to carry 3:1 against the menu (WCAG 1.4.11) —
   the pale tint alone was ~1.1:1. */
.avx-maps .avx-results li[aria-selected="true"] {
	background: var(--avx-chip);
	box-shadow: inset 0 0 0 2px var(--avx-focus);
}

.avx-maps .avx-chips { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; flex: none; scrollbar-width: thin; }
.avx-maps .avx-chips button {
	flex: none; border: 1px solid var(--avx-line); background: var(--avx-chip); color: var(--avx-ink);
	border-radius: 99px; padding: 7px 16px; font-size: 13.5px; font-weight: 600; min-height: 44px;
}
.avx-maps .avx-chips button:hover { border-color: var(--avx-muted); }
.avx-maps .avx-chips button[aria-pressed="true"] { background: var(--avx-brand); border-color: var(--avx-brand); color: var(--avx-on-brand); }

.avx-maps .avx-directory { padding: 4px 16px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.avx-maps .avx-acc { border-bottom: 1px solid var(--avx-line); }
.avx-maps.avx-maps .avx-acc-head {
	display: flex; align-items: center; gap: 10px; width: 100%;
	background: none; border: 0; padding: 14px 8px; font-weight: 800; font-size: 15px;
	color: var(--avx-ink); text-align: left; min-height: 48px;
}
.avx-maps.avx-maps .avx-acc-head:hover { background: var(--avx-chip); }
.avx-maps.avx-maps .avx-acc-head .avx-count { color: var(--avx-muted); font-weight: 400; font-size: 13px; margin-left: auto; }
.avx-maps.avx-maps .avx-acc-head .avx-chev { transition: rotate 0.15s; color: var(--avx-muted); flex: none; }
.avx-maps.avx-maps .avx-acc-head[aria-expanded="true"] .avx-chev { rotate: 90deg; }
.avx-maps .avx-acc-ic {
	display: inline-flex; width: 28px; height: 28px; border-radius: 7px;
	align-items: center; justify-content: center; flex: none;
}
.avx-maps .avx-acc-ic svg { width: 16px; height: 16px; fill: currentColor; }
.avx-maps .avx-acc-body { padding: 2px 4px 16px; }

/* category tints from the map icon palette — pale bg + dark text, all >=4.5:1 */
.avx-maps .avx-cat-dining { background: #fbe4d4; color: #7a3600; }
.avx-maps .avx-cat-shopping { background: #e3e9f7; color: #2a3d7e; }
.avx-maps .avx-cat-gates { background: #f8e4e1; color: #8e2114; }
.avx-maps .avx-cat-amenities { background: #dcefeb; color: #005d52; }
.avx-maps .avx-cat-transportation { background: #e9e9f1; color: #3e3e66; }
.avx-maps .avx-cat-parking { background: #ebedda; color: #495026; }

/* ---------- cards ---------- */
.avx-maps .avx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.avx-maps .avx-card {
	display: flex; flex-direction: column; background: var(--avx-chip);
	border: 1px solid var(--avx-line); border-radius: 8px; overflow: hidden;
}
.avx-maps .avx-card.avx-rich { background: var(--avx-panel); }
.avx-maps .avx-card:hover { border-color: var(--avx-muted); }
.avx-maps.avx-maps .avx-card-hit {
	display: flex; flex-direction: column; align-items: stretch; flex: 1; text-align: left;
	background: none; border: 0; padding: 0; color: inherit;
}
.avx-maps.avx-maps .avx-card-hit:hover .avx-t { text-decoration: underline; }
/* The card wrapper clips its children (rounded corners + the cover image), and
   that clipped the focus ring off the button INSIDE it: 4px of the 5px ring was
   cut away, so tabbing through filtered directory results showed no focus at
   all (WCAG 2.4.7 / 2.4.11). Ring the wrapper instead — it has room — and inset
   the button's own ring wherever :has() is unavailable. */
.avx-maps .avx-card:has(.avx-card-hit:focus-visible) {
	outline: 3px solid var(--avx-focus);
	outline-offset: 2px;
}
.avx-maps.avx-maps .avx-card .avx-card-hit:focus-visible { outline: none; }
@supports not selector(:has(*)) {
	.avx-maps.avx-maps .avx-card .avx-card-hit:focus-visible {
		outline: 3px solid var(--avx-focus);
		outline-offset: -3px;
		border-radius: 8px;
	}
}
.avx-maps .avx-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.avx-maps .avx-rich .avx-card-body { padding: 24px; gap: 12px; } /* site card spec */
.avx-maps .avx-t { font-weight: 800; font-size: 17px; line-height: 1.3; }
.avx-maps .avx-desc {
	color: var(--avx-ink); font-size: 14px; line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.avx-maps .avx-sub { font-size: 13.5px; color: var(--avx-muted); font-variant-numeric: tabular-nums; }
.avx-maps .avx-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.avx-maps .avx-card-img {
	position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9;
	background-color: var(--avx-chip);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.avx-maps .avx-img-glyph { font-size: 44px; font-weight: 800; color: var(--avx-muted); opacity: 0.4; }
.avx-maps .avx-loc-pill {
	position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px;
	background: var(--avx-brand); color: var(--avx-on-brand); font-size: 12.5px; font-weight: 600;
	border-radius: 5px; padding: 9px 12px; max-width: calc(100% - 24px);
}
.avx-maps .avx-loc-pill svg { flex: none; }
.avx-maps .avx-card-link {
	margin: 0 24px 20px; font-size: 14px; color: var(--avx-focus);
	text-decoration: underline; align-self: flex-start; padding: 4px 0;
}
.avx-maps .avx-card-link:hover { color: var(--avx-brand); }

.avx-maps .avx-badge {
	font-size: 11px; font-weight: 700; letter-spacing: 0.04em; border-radius: 6px;
	padding: 2.5px 8px; text-transform: uppercase; border: 1px solid transparent;
	white-space: nowrap; /* status pills never break mid-word ("ON / TIME") */
}
.avx-maps .avx-badge.avx-plain { background: transparent; color: var(--avx-muted); border-color: var(--avx-line); }
.avx-maps .avx-badge.avx-warn { background: #f7eed8; color: #8a6100; }
.avx-maps .avx-badge.avx-ok { background: #e4f2e8; color: #1b7a3d; }
.avx-maps .avx-badge.avx-crit { background: #f9e4e1; color: #b3261e; }
/* TEXT badge only: #808954 carries white text at 3.6:1 (axe fail) — the badge
   uses a deepened olive at 6.5:1; dots/bars keep the true status green (non-
   text, 1.4.11 needs only 3:1, passes) */
.avx-maps .avx-badge.avx-p-open { background: #5c6136; color: #fff; }
.avx-maps .avx-badge.avx-p-fill { background: var(--avx-p-fill); color: #25150c; }
.avx-maps .avx-badge.avx-p-full { background: var(--avx-p-full); color: #fff; }

/* ---------- detail sheet / popover ---------- */
.avx-maps .avx-sheet {
	position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
	background: var(--avx-panel); border-top: 1px solid var(--avx-line);
	border-radius: 18px 18px 0 0; box-shadow: var(--avx-shadow);
	max-height: 62vh; overflow-y: auto; color: var(--avx-ink);
	/* home-indicator iPhones: keep Share/actions out of the swipe zone */
	padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px));
}
.avx-maps .avx-sheet.avx-pop {
	position: absolute; left: auto; right: auto; bottom: auto; width: 340px;
	border-radius: 12px; border: 1px solid var(--avx-line); max-height: 60%; z-index: 30;
}
.avx-maps .avx-sheet-img {
	display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: 10px; margin: 8px 0 4px;
}
.avx-maps .avx-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.avx-maps .avx-sheet-title { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 800; }
.avx-maps .avx-sheet-title:focus { outline: none; }
.avx-maps.avx-maps .avx-sheet-close {
	border: 1px solid var(--avx-line); background: var(--avx-chip); color: var(--avx-ink);
	border-radius: 8px; width: 44px; height: 44px; font-size: 17px; flex: none;
}
.avx-maps.avx-maps .avx-sheet-close:hover { background: var(--avx-line); }
.avx-maps .avx-sec-label {
	font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--avx-muted); font-weight: 800; margin: 14px 0 2px;
}
.avx-maps .avx-sheet .avx-desc { display: block; -webkit-line-clamp: unset; margin: 6px 0; font-size: 14.5px; }
.avx-maps .avx-kv { margin: 8px 0; font-size: 14.5px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.avx-maps .avx-kv dt { color: var(--avx-muted); }
.avx-maps .avx-kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.avx-maps .avx-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.avx-maps .avx-actions button {
	border-radius: 6px; padding: 13px 22px; min-height: 48px; font-weight: 700; font-size: 15px;
	border: 1px solid var(--avx-line); background: var(--avx-chip); color: var(--avx-ink);
}
.avx-maps .avx-actions button:hover { background: var(--avx-line); border-color: var(--avx-muted); }
.avx-maps .avx-flights { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.avx-maps .avx-flights caption {
	text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--avx-muted); font-weight: 800; margin: 14px 0 4px; caption-side: top;
}
.avx-maps .avx-flights th {
	text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--avx-muted); border-bottom: 1px solid var(--avx-line); padding: 4px 8px 6px 0;
}
.avx-maps .avx-flights td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--avx-line); font-variant-numeric: tabular-nums; }
.avx-maps .avx-occ { height: 10px; border-radius: 6px; background: var(--avx-chip); overflow: hidden; margin: 6px 0 2px; }
.avx-maps .avx-occ > div { height: 100%; background: var(--avx-p-open); }
.avx-maps .avx-occ.avx-p-fill > div { background: var(--avx-p-fill); }
.avx-maps .avx-occ.avx-p-full > div { background: var(--avx-p-full); }
.avx-maps .avx-disclaimer { font-size: 12px; color: var(--avx-muted); margin-top: 10px; }
/* footer: OSM data credit (left) + subtle "powered by" (right) */
.avx-maps .avx-foot {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
	gap: 4px 16px; margin: 8px 4px;
}
.avx-maps .avx-attribution { font-size: 12px; color: var(--avx-muted); margin: 0; }
.avx-maps .avx-credit { font-size: 11.5px; color: var(--avx-muted); margin: 0; margin-left: auto; opacity: 0.85; }
.avx-maps .avx-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.avx-maps .avx-credit a:hover,
.avx-maps .avx-credit a:focus-visible { color: var(--avx-brand); }

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
	.avx-maps .avx-layer,
.avx-maps .avx-ring,
.avx-maps .avx-sheet,
.avx-maps.avx-maps .avx-acc-head .avx-chev { transition: none; }
	.avx-maps .avx-ring.avx-pulse,
	.avx-maps .avx-geo-poi.avx-pulse { animation: none; }
}
@media print {
	.avx-maps .avx-viewport,
.avx-maps .avx-controls,
.avx-maps .avx-levels,
.avx-maps.avx-maps .avx-open-btn,
.avx-maps .avx-sheet,
.avx-maps .avx-alert { display: none !important; }
	.avx-maps .avx-panel,
.avx-maps .avx-panel[hidden] {
		display: flex !important; position: static; width: 100%; height: auto; box-shadow: none; border: 0;
	}
	.avx-maps .avx-directory { overflow: visible; }
	.avx-maps .avx-acc-body[hidden] { display: block !important; }
	.avx-maps .avx-card { break-inside: avoid; border-color: #999; }
}

/* headings/controls use the site display face (declared last: wins its tier) */
.avx-maps .avx-t,
.avx-maps .avx-sheet-title,
.avx-maps .avx-panel-title,
.avx-maps.avx-maps .avx-acc-head,
.avx-maps .avx-levels button,
.avx-maps.avx-maps .avx-open-btn,
.avx-maps .avx-actions button { font-family: var(--avx-font-head); }

/* map key (legend) — content supplied per install via the avx_maps_legend filter */
.avx-maps.avx-maps .avx-key-btn {
	position: absolute; right: 10px; bottom: 12px; z-index: 10;
	background: var(--avx-panel); border: 1px solid var(--avx-line); color: var(--avx-ink);
	border-radius: 10px; padding: 10px 16px; min-height: 44px;
	font-family: var(--avx-font-head); font-weight: 700; font-size: 14px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.avx-maps.avx-maps .avx-key-btn:hover { background: var(--avx-chip); }
.avx-maps .avx-key {
	position: absolute; right: 10px; bottom: 64px; z-index: 11; width: 240px;
	background: var(--avx-panel); border: 1px solid var(--avx-line); border-radius: 12px;
	box-shadow: var(--avx-shadow); padding: 14px 16px;
}
.avx-maps .avx-key h3 {
	margin: 0 0 8px; font-family: var(--avx-font-head); font-size: 13px; font-weight: 800;
}
.avx-maps .avx-key ul { margin: 0; padding: 0; list-style: none; }
.avx-maps .avx-key li { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 3px 0; }
.avx-maps .avx-key .avx-swatch {
	width: 16px; height: 16px; border-radius: 4px; flex: none; border: 1px solid var(--avx-line);
}

/* ---------- full-screen map ---------- */
/* Two routes to one look: the Fullscreen API (:fullscreen) and, for browsers
   without element full screen (iPhone Safari), a fixed-position fallback
   (.avx-fs). The tripled class outranks .avx-full's breakout margins and the
   docked stage height without needing !important. */
.avx-maps.avx-maps.avx-fs,
.avx-maps.avx-maps:fullscreen {
	position: fixed; inset: 0; z-index: 100000; margin: 0; width: auto; max-width: none;
	display: flex; flex-direction: column; box-sizing: border-box; padding: 10px 12px 8px;
	background: var(--avx-ground); overflow: hidden;
}
.avx-maps.avx-maps.avx-fs .avx-stage,
.avx-maps.avx-maps:fullscreen .avx-stage { flex: 1 1 auto; height: auto; min-height: 0; padding-inline: 0; }
.avx-maps.avx-maps.avx-fs .avx-viewport,
.avx-maps.avx-maps:fullscreen .avx-viewport { min-height: 0; }
.avx-maps.avx-maps.avx-fs .avx-foot,
.avx-maps.avx-maps:fullscreen .avx-foot { padding-inline: 0; }
body.avx-fs-lock { overflow: hidden; }
.avx-maps.avx-maps .avx-controls [data-avx-fs] svg { width: 18px; height: 18px; display: block; margin: auto; }
.avx-maps.avx-maps .avx-controls [data-avx-fs][aria-pressed="true"] { background: var(--avx-brand); color: var(--avx-on-brand); }