/**
 * Con Maps chrome.
 *
 * --fm-map-accent is defined once here so the dealers map can adopt the same
 * variable when its engine is ported, instead of both files carrying their
 * own hardcoded green.
 */
.fm-maps {
	--fm-map-accent: #007836;
	--fm-map-line: #231f20;
	--fm-map-surface: #ffffff;
	--fm-map-muted: #5a5a5a;
	--fm-map-banner: #0d375a;
	margin: 0 0 2rem;
}

.fm-map-venue {
	margin: 2rem 0 0.5rem;
}

.fm-map-floor {
	margin: 0 0 2.5rem;
	scroll-margin-top: 64px;
}

/* Wide pages spend the extra width on a second column rather than a taller
   map, which would otherwise read as endless scrolling. */
@media (min-width: 1100px) {
	.fm-map-floor {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(260px, 22rem);
		grid-template-areas: "title title" "map side";
		align-items: start;
		gap: 0 1.5rem;
	}
	.fm-map-title { grid-area: title; }
	.fm-map-shell { grid-area: map; }
	.fm-map-side {
		grid-area: side;
		max-height: 70vh;
		min-width: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 0.25rem 0.25rem 0;
	}
	.fm-map-card { margin: 0 0 0.75rem; }
	.fm-map-list-title { margin-top: 0; }
	.fm-map-list { margin-top: 0; }
}

.fm-map-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	margin: 0 0 0.75rem;
	padding: 0.75rem 1.25rem;
	border-radius: 4px;
	background: var(--fm-map-banner);
	color: #fff;
	font-size: 1.3rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.fm-map-title::after {
	width: 32px;
	height: 40px;
	background: url("../../fm/logo-pointer-white.png") center / contain no-repeat;
	content: "";
	flex: 0 0 auto;
}

/* --- map surface --------------------------------------------------------- */

.fm-map-shell {
	position: relative;
	border: 1px solid rgba(35, 31, 32, 0.15);
	border-radius: 6px;
	background: var(--fm-map-surface);
}

/* Mobile needs a real enlargement path; a pointer-and-wide desktop does not
   need 53px of always-on chrome above every floor when Fit is truthful. */
.fm-map-controls {
	display: flex;
	gap: 0.25rem;
	padding: 0.5rem;
	border-bottom: 1px solid rgba(35, 31, 32, 0.1);
}

@media (min-width: 1100px) and (pointer: fine) {
	.fm-map-controls {
		opacity: 0;
		transition: opacity 120ms ease;
	}
	.fm-map-shell:hover .fm-map-controls,
	.fm-map-shell:focus-within .fm-map-controls {
		opacity: 1;
	}
}

.fm-map-zoom {
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	border: 1px solid rgba(35, 31, 32, 0.25);
	border-radius: 4px;
	background: #fff;
	color: var(--fm-map-line);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.fm-map-zoom:disabled {
	opacity: 0.4;
	cursor: default;
}

.fm-map-zoom:focus-visible {
	outline: 3px solid var(--fm-map-accent);
	outline-offset: 2px;
}

.fm-map-viewport {
	position: relative;
	overflow: visible;
	touch-action: pan-x pan-y;
}

/* Capped ONLY while zoomed. Applied unconditionally it clipped the map in its
   own default fit view: 247px of floor 2 lost at 1440x900, 339px at 1280x768. */
.fm-map-viewport.is-zoomed {
	overflow: auto;
	max-height: 70vh;
}

.fm-map-viewport.is-panning {
	cursor: grabbing;
}

/* Width, not transform: the scroll extent has to grow with the zoom or the far
   edge cannot be reached. */
.fm-map-canvas {
	position: relative;
	width: 100%;
}

.fm-map-canvas svg {
	display: block;
	width: 100%;
	height: auto;
}

/* --- areas ---------------------------------------------------------------- */

.fm-map-area {
	cursor: pointer;
}

/* A stroke outline rather than a box: a white box outline over floor plan
   artwork reads as a rendering glitch. */
.fm-map-area:hover {
	stroke: var(--fm-map-accent);
	stroke-width: 3px;
	paint-order: stroke;
	vector-effect: non-scaling-stroke;
}

.fm-map-area.is-selected {
	stroke: var(--fm-map-accent);
	stroke-width: 5px;
	paint-order: stroke;
	vector-effect: non-scaling-stroke;
}

/* Emphasis belongs to the shape, never its label: a stroke on a group that
   contains its own <text> paints a halo straight through the words. */
.fm-map-area:hover text,
.fm-map-area:hover tspan,
.fm-map-area.is-selected text,
.fm-map-area.is-selected tspan,
.fm-map-area:focus-visible text,
.fm-map-area:focus-visible tspan {
	stroke: none;
	paint-order: normal;
	filter: none;
}

.fm-map-area:focus {
	outline: none;
}

.fm-map-area:focus-visible {
	stroke: var(--fm-map-accent);
	stroke-width: 4px;
	stroke-dasharray: 6 4;
	paint-order: stroke;
	vector-effect: non-scaling-stroke;
}

.fm-map-bubble {
	position: absolute;
	padding: 0.3rem 0.55rem;
	border-radius: 4px;
	background: var(--fm-map-line);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	pointer-events: none;
	z-index: 2;
}

/* --- card ----------------------------------------------------------------- */

.fm-map-card:focus-visible {
	outline: 3px solid var(--fm-map-accent);
	outline-offset: 2px;
}

.fm-map-card {
	position: relative;
	margin: 0.75rem 0 0;
	padding: 0.9rem 2.5rem 0.9rem 1rem;
	border: 1px solid rgba(35, 31, 32, 0.18);
	border-left: 4px solid var(--fm-map-accent);
	border-radius: 4px;
	background: var(--fm-map-surface);
}

.fm-map-card-close {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.fm-map-card-name {
	margin: 0;
}

.fm-map-card-detail {
	margin: 0.2rem 0 0;
	color: var(--fm-map-muted);
}

.fm-map-card-rooms {
	display: grid;
	gap: 0;
	margin-top: 0.6rem;
	border-top: 1px solid rgba(35, 31, 32, 0.14);
}

.fm-map-card-schedule,
.fm-map-card-hours,
.fm-map-card-info {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(35, 31, 32, 0.1);
	color: var(--fm-map-accent);
	text-decoration: none;
	font-weight: 600;
}

.fm-map-card-icon {
	width: 1.5rem;
	margin-right: 0.35rem;
	text-align: center;
}

.fm-map-card-schedule:hover,
.fm-map-card-schedule:focus-visible,
.fm-map-card-hours:hover,
.fm-map-card-hours:focus-visible,
.fm-map-card-info:hover,
.fm-map-card-info:focus-visible {
	text-decoration: underline;
	color: var(--fm-map-accent);
}

/* --- generated location list ---------------------------------------------- */

.fm-map-list-title {
	margin: 1.25rem 0 0.15rem;
	font-size: 1rem;
}

.fm-map-list-help {
	margin: 0 0 0.5rem;
	color: var(--fm-map-muted);
	font-size: 0.9rem;
}

.fm-map-list-button.is-selected {
	border-left-color: var(--fm-map-banner);
	background: rgba(13, 55, 90, 0.08);
}

.fm-map-list {
	display: block;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.fm-map-list-button {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.1rem 0.5rem;
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 0.7rem;
	border: 0;
	border-bottom: 1px solid rgba(35, 31, 32, 0.12);
	border-left: 4px solid var(--fm-map-accent);
	border-radius: 0;
	background: #fff;
	text-align: left;
	cursor: pointer;
}

.fm-map-list-button:hover {
	background: rgba(0, 120, 54, 0.06);
}

/* Not on the map: still a location, just nothing to click. Muted rather than
   warned about - a room the artwork does not draw is not an error. */
.fm-map-list-button.is-unmapped {
	border-left-color: rgba(35, 31, 32, 0.25);
	background: rgba(35, 31, 32, 0.02);
	cursor: default;
}

.fm-map-list-schedule,
.fm-map-list-hours,
.fm-map-list-info {
	align-self: flex-start;
	margin-top: 0.3rem;
	font-size: 0.85rem;
	color: var(--fm-map-accent);
}

.fm-map-list-note {
	color: var(--fm-map-muted);
	font-size: 0.8rem;
	font-style: italic;
}

.fm-map-list-button:focus-visible {
	outline: 3px solid var(--fm-map-accent);
	outline-offset: 2px;
}

.fm-map-list-name {
	flex: 1 1 auto;
	font-weight: 600;
}

.fm-map-list-detail {
	flex: 1 0 100%;
	padding-left: 0;
	color: var(--fm-map-muted);
	font-size: 0.9rem;
}

.fm-map-list-badge {
	flex: 0 0 auto;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: var(--fm-map-banner);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
}

.fm-map-placeholder {
	margin: 0 0 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.fm-map-canvas,
	.fm-map-area {
		transition: none !important;
	}
}

/* Kiosk single-floor layout: large click-only floor switcher, one floor
   visible at a time. Titles hide visually; the buttons carry the names. */
.fm-map-floor-switch {
	display: flex;
	gap: 12px;
	margin: 0 0 14px;
}

.fm-map-floor-button {
	flex: 1;
	min-height: 56px;
	padding: 10px 18px;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--fm-map-accent);
	background: var(--fm-map-surface);
	border: 2px solid var(--fm-map-accent);
	border-radius: 10px;
	cursor: pointer;
}

.fm-map-floor-button.is-active {
	color: var(--fm-map-surface);
	background: var(--fm-map-accent);
}

.fm-map-floor-button:focus-visible {
	outline: 3px solid var(--fm-map-line);
	outline-offset: 2px;
}

.fm-maps--single .fm-map-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.fm-maps--single .fm-map-floor-slot[hidden] {
	display: none;
}

@media (min-width: 1100px) {
	body.kiosk-schedule .fm-map-floor {
		grid-template-columns: minmax(0, 1fr) minmax(420px, 33.5rem);
	}
}

body.kiosk-schedule:has(.os-tabs__item--active a[data-os-tab="map"]) h1 {
	margin-bottom: 0.25rem;
}

body.kiosk-schedule:has(.os-tabs__item--active a[data-os-tab="map"]) footer {
	display: none;
}

body.kiosk-schedule .fm-map-card-hours,
body.kiosk-schedule .fm-map-card-info {
	display: none;
}

body.kiosk-schedule .fm-map-floor-button,
body.kiosk-schedule .fm-map-zoom {
	min-height: 56px;
}

body.kiosk-schedule .fm-map-card-close {
	width: 48px;
	height: 48px;
}