/*
 * The campus map (blocks/campus-map).
 *
 * A tile map: white buildings lifted off a dotted ground, rooms tinted with
 * their building's colour (--b, set per building), names that stay one size
 * on screen. Looking at one building fades the others back.
 *
 * The lobby players run Chrome 87: no :has(), no aspect-ratio, no dvh.
 */

.cong-campus {
	--campus-ground: #eef1f5;
	--campus-dot: #d5dbe4;
	--campus-ink: #0f172a;
	--campus-text: #1e293b;
	--campus-muted: #64748b;
	--campus-line: #d6dce5;
	--campus-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.12);

	position: relative;
	overflow: hidden;
	height: 70vh;
	min-height: 380px;
	background: var(--campus-ground);
	border-radius: 20px;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
	font-family: inherit;
	color: var(--campus-text);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.cong-campus--short { height: 46vh; min-height: 300px; }
/* In the middle of a page: a finger swiping up or down scrolls the page. */
.cong-campus--short:not(.is-expanded) { touch-action: pan-y; }
.cong-campus--full { height: calc(100vh - 160px); min-height: 520px; }
.cong-campus.is-kiosk { height: 100%; min-height: 0; border-radius: 22px; }

.cong-campus [hidden] { display: none !important; }

.cong-campus .cong-campus__stage,
.cong-campus .cong-campus__svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.cong-campus__stage { cursor: grab; outline: none; }
.cong-campus.is-dragging .cong-campus__stage { cursor: grabbing; }
.cong-campus__stage:focus-visible { box-shadow: inset 0 0 0 3px #2f6fb3; border-radius: 20px; }

/* The plan ------------------------------------------------------------ */

.cong-campus__dot { fill: var(--campus-dot); }

.cong-campus__building { transition: opacity 0.35s ease; }
.cong-campus__svg.has-focus .cong-campus__building:not(.is-lit) { opacity: 0.38; }

.cong-campus__outline {
	fill: #fff;
	stroke: var(--campus-line);
	stroke-width: 1.5px;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
}

.cong-campus__ghost {
	fill: #fff;
	fill-opacity: 0.55;
	stroke: var(--campus-line);
	stroke-width: 1.5px;
	stroke-dasharray: 6 5;
	vector-effect: non-scaling-stroke;
}

.cong-campus__room {
	fill: var(--b);
	fill-opacity: 0.2;
	stroke: #fff;
	stroke-width: 2.5px;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
	transition: fill-opacity 0.2s ease;
}

.cong-campus__room.is-space { fill-opacity: 0.08; }
.cong-campus__room.is-named { cursor: pointer; }
.cong-campus__building.is-lit .cong-campus__room.is-named { fill-opacity: 0.26; }

@media (hover: hover) {
	.cong-campus__room.is-named:hover { fill-opacity: 0.4; }
}

.cong-campus__room.is-chosen,
.cong-campus__building.is-lit .cong-campus__room.is-chosen,
.cong-campus__room.is-demo { fill-opacity: 1; }

/* Walkways: pale paths under the buildings, in map units so they widen with the zoom. */
.cong-campus__walk-edge,
.cong-campus__walk {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cong-campus__walk-edge { stroke: #d3dae4; stroke-width: 30; }
.cong-campus__walk { stroke: #fbfcfd; stroke-width: 24; }

/* Outdoors: grass, tarmac, water — not buildings. */
.cong-campus__water { fill: #c6def2; stroke: #a9cbe8; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.cong-campus__road { fill: none; stroke: #dde2e9; stroke-width: 46; stroke-linecap: round; stroke-linejoin: round; }

.cong-campus__building.is-outdoor .cong-campus__outline { cursor: pointer; stroke-width: 1.5px; }
.cong-campus__building.is-field .cong-campus__outline { fill: #d5eacb; stroke: #b3d6a4; }
.cong-campus__building.is-playground .cong-campus__outline { fill: #cfe8c8; stroke: #8fc283; stroke-dasharray: 8 6; stroke-width: 2px; }
.cong-campus__building.is-parking .cong-campus__outline { stroke: #d4dae2; stroke-width: 1.5px; }
.cong-campus__building.is-parking.is-lit .cong-campus__outline { stroke: #475569; stroke-width: 3px; stroke-dasharray: none; }
.cong-campus__building.is-field.is-lit .cong-campus__outline,
.cong-campus__building.is-playground.is-lit .cong-campus__outline { fill: var(--b); fill-opacity: 0.4; stroke: var(--b); stroke-dasharray: none; }

/* Names --------------------------------------------------------------- */

.cong-campus__room-name {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	fill: var(--campus-text);
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
}


.cong-campus__tag { cursor: pointer; transition: opacity 0.25s ease; }
.cong-campus__tag rect { fill: #fff; }
.cong-campus__tag circle { fill: var(--b); }

.cong-campus__tag text {
	font-size: 13px;
	font-weight: 700;
	fill: var(--campus-ink);
	dominant-baseline: central;
}

.cong-campus.is-close .cong-campus__tag,
.cong-campus__tag.is-crowded { opacity: 0; pointer-events: none; }
.cong-campus__svg.has-focus .cong-campus__tag { opacity: 0.45; }
.cong-campus.is-close .cong-campus__svg.has-focus .cong-campus__tag { opacity: 0; }

.cong-campus__door circle { fill: #fff; stroke: var(--campus-muted); stroke-width: 1.75px; }
.cong-campus:not(.is-near) .cong-campus__door { display: none; }

/* Pins ------------------------------------------------------------------ */

.cong-campus__pin { pointer-events: none; }
.cong-campus__pin path { fill: #e0452b; stroke: #fff; stroke-width: 2.5px; }
.cong-campus__pin circle { fill: #fff; }
.cong-campus__pin-body { animation: cong-campus-drop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; }

.cong-campus__here { pointer-events: none; }
.cong-campus__here-dot { fill: #2563eb; stroke: #fff; stroke-width: 3.5px; }
.cong-campus__here-ring { fill: #2563eb; fill-opacity: 0.2; animation: cong-campus-pulse 2.4s ease-out infinite; }
.cong-campus__here-tag rect { fill: #1d4ed8; }

.cong-campus__here-tag text {
	font-size: 13px;
	font-weight: 700;
	fill: #fff;
	text-anchor: middle;
	dominant-baseline: central;
}

@keyframes cong-campus-pulse {
	0% { transform: scale(0.5); opacity: 1; }
	100% { transform: scale(2.4); opacity: 0; }
}

@keyframes cong-campus-drop {
	0% { transform: translate(0, -18px); opacity: 0; }
	100% { transform: translate(0, 0); opacity: 1; }
}

/* Controls ------------------------------------------------------------- */

.cong-campus__zoom {
	position: absolute;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border-radius: 14px;
	box-shadow: var(--campus-shadow);
}

.cong-campus__zoom button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--campus-text);
	cursor: pointer;
}

.cong-campus__zoom button + button { border-top: 1px solid #edf0f4; }
.cong-campus__zoom button:hover { background: #f5f7fa; }
.cong-campus .cong-campus__zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cong-campus__compass {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--campus-shadow);
	pointer-events: none;
}

.cong-campus .cong-campus__compass svg { position: absolute; top: 3px; left: 3px; width: 40px; height: 40px; }
.cong-campus__needle-n { fill: #dc2626; }
.cong-campus__needle-s { fill: #cbd5e1; }

.cong-campus__compass span {
	position: absolute;
	top: -7px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 4px;
	border-radius: 6px;
	background: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 14px;
	color: var(--campus-ink);
}

.cong-campus__floors {
	position: absolute;
	left: 50%;
	bottom: 16px;
	display: flex;
	padding: 4px;
	transform: translateX(-50%);
	background: #fff;
	border-radius: 999px;
	box-shadow: var(--campus-shadow);
}

.cong-campus__floors button {
	min-height: 38px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--campus-muted);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.cong-campus__floors button::first-letter { text-transform: uppercase; }
.cong-campus__floors button[aria-pressed="true"] { background: var(--campus-ink); color: #fff; }

/* Reset: back to the whole campus, once there is somewhere to go back from. */
.cong-campus__reset {
	position: absolute;
	right: 74px;
	bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 18px 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--campus-ink);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	box-shadow: var(--campus-shadow);
	cursor: pointer;
	animation: cong-campus-rise 0.25s ease both;
}

.cong-campus__reset:hover { background: #1e293b; }
.cong-campus .cong-campus__reset svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Find a room ------------------------------------------------------------ */

.cong-campus__find {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	width: calc(100% - 94px);
	max-width: 380px;
}

.cong-campus__find-icon {
	position: absolute;
	top: 14px;
	left: 15px;
	fill: none;
	stroke: var(--campus-muted);
	stroke-width: 2.2;
	stroke-linecap: round;
	pointer-events: none;
}

.cong-campus .cong-campus__search {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px 0 44px;
	border: 0;
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--campus-shadow);
	color: var(--campus-ink);
	font: inherit;
	font-size: 16px;
	user-select: text;
	-webkit-user-select: text;
	-webkit-appearance: none;
	appearance: none;
}

.cong-campus .cong-campus__search:focus { outline: none; box-shadow: var(--campus-shadow), 0 0 0 2px #2f6fb3; }
.cong-campus .cong-campus__search::placeholder { color: var(--campus-muted); }

.cong-campus__results {
	margin: 8px 0 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border-radius: 14px;
	box-shadow: var(--campus-shadow);
}

.cong-campus__results button {
	display: grid;
	grid-template-columns: 10px 1fr;
	column-gap: 12px;
	align-items: center;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--campus-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cong-campus__results button:hover,
.cong-campus__results button:focus { background: #f2f5f9; outline: none; }
.cong-campus__result-dot { grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; }
.cong-campus__result-name { font-size: 15px; font-weight: 700; }
.cong-campus__result-where { font-size: 13px; color: var(--campus-muted); }
.cong-campus__result-where:empty { display: none; }
.cong-campus__none { padding: 10px 12px; font-size: 14px; color: var(--campus-muted); }

/* The card: what is lit ----------------------------------------------- */

.cong-campus__card {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
	max-width: 340px;
	padding: 14px 18px 14px 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--campus-shadow);
	animation: cong-campus-rise 0.3s ease both;
}

.cong-campus__card::before {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 0;
	width: 5px;
	border-radius: 0 4px 4px 0;
	background: var(--b, #2f6fb3);
}

.cong-campus__card-name { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--campus-ink); }
.cong-campus__card-where { margin: 3px 0 0; font-size: 14px; color: var(--campus-muted); }

.cong-campus__card-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--b, #2f6fb3);
	text-decoration: none;
}

.cong-campus__card-link:hover { text-decoration: underline; }

@keyframes cong-campus-rise {
	0% { transform: translateY(8px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

/* Phones: the card is a sheet across the bottom, the floors go up top. */
@media (max-width: 600px) {
	.cong-campus { border-radius: 16px; height: 62vh; }
	.cong-campus__card { left: 12px; right: 76px; bottom: 70px; max-width: none; }
	.cong-campus__reset { right: auto; left: 12px; bottom: 12px; }
	.cong-campus__zoom { right: 12px; bottom: 12px; }
	.cong-campus__find { top: 12px; left: 12px; width: calc(100% - 82px); }
	.cong-campus__compass { top: 12px; right: 12px; }
	.cong-campus__floors { top: 70px; bottom: auto; }
}

/* Flags from Church info: kids check-in and the like ------------------- */

.cong-campus__marker { cursor: pointer; }
.cong-campus__marker-stem { stroke: #b91c1c; stroke-width: 2.5px; }
.cong-campus__marker circle { fill: #b91c1c; stroke: #fff; stroke-width: 2px; }
.cong-campus__marker rect { fill: #b91c1c; filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.25)); }
.cong-campus__marker-flag { fill: #fff; }
.cong-campus__marker text { font-size: 14px; font-weight: 800; fill: #fff; dominant-baseline: central; }
.cong-campus__marker.is-folded text { display: none; }
.cong-campus__picker-rooms button.is-flag { background: #b91c1c; color: #fff; }
.cong-campus__picker-group.is-today { border-bottom: 0; padding-top: 18px; }

/* Restrooms, elevators, stairs ----------------------------------------- */

.cong-campus__amenity { pointer-events: none; }
.cong-campus__amenity circle { fill: #475569; stroke: #fff; stroke-width: 2px; }
.cong-campus__amenity path { fill: #fff; }
.cong-campus__amenity path.is-line { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cong-campus__amenity.is-restroom circle { fill: #0e7490; }
.cong-campus__amenity.is-elevator circle { fill: #2563eb; }
.cong-campus:not(.is-near) .cong-campus__amenity { display: none; }

/* Asked for the elevator: elevators show at every zoom, bigger, pulsing. */
.cong-campus.is-step-free .cong-campus__amenity.is-elevator { display: inline; }
.cong-campus.is-step-free .cong-campus__amenity.is-elevator circle { r: 14px; animation: cong-campus-lift 1.8s ease-in-out infinite; }
.cong-campus.is-step-free .cong-campus__amenity.is-stairs { opacity: 0.35; }

@keyframes cong-campus-lift {
	0%, 100% { stroke-width: 2px; }
	50% { stroke-width: 6px; stroke: rgba(37, 99, 235, 0.35); }
}

.cong-campus__stepfree {
	position: absolute;
	top: 16px;
	right: 72px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 16px 0 12px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--campus-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	box-shadow: var(--campus-shadow);
	cursor: pointer;
}

.cong-campus .cong-campus__stepfree svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cong-campus__stepfree[aria-pressed="true"] { background: #2563eb; color: #fff; }
.is-kiosk .cong-campus__stepfree { height: 58px; right: 84px; padding: 0 22px 0 16px; font-size: 1.1rem; }
.cong-campus__card-today { margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf0f4; }
.cong-campus__card-today p { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--campus-muted); }
.cong-campus__card-today ul { margin: 0; padding: 0; list-style: none; }
.cong-campus__card-today li { margin: 3px 0; font-size: 14px; font-weight: 600; color: var(--campus-ink); }
.cong-campus__card-today li span { display: inline-block; min-width: 64px; color: var(--b, #2f6fb3); font-weight: 800; }
.is-kiosk .cong-campus__card-today li { font-size: 1.05rem; }
.is-kiosk .cong-campus__card-today p { font-size: 0.85rem; }
.cong-campus__card-note { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: #1d4ed8; }
.is-kiosk .cong-campus__card-note { font-size: 1.05rem; }

@media (max-width: 600px) {
	.cong-campus__stepfree span { display: none; }
	.cong-campus__stepfree { top: 70px; right: 12px; width: 46px; padding: 0; justify-content: center; }
}

/* Bigger: the expand button --------------------------------------------- */

.cong-campus__expand .is-shrink { display: none; }
.cong-campus__expand.is-big .is-grow { display: none; }
.cong-campus__expand.is-big .is-shrink { display: inline; }

/* On a page: the whole browser window, until Escape or the button. */
.cong-campus.is-expanded {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 100vw;
	height: 100vh;
	border-radius: 0;
	animation: cong-campus-rise 0.3s ease both;
}

html.cong-campus-open,
html.cong-campus-open body { overflow: hidden; }

/* Find a room, by finger (the lobby screen) ------------------------------ */

.cong-campus__browse {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 58px;
	padding: 0 24px 0 18px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--campus-ink);
	font: inherit;
	font-size: 1.2rem;
	font-weight: 800;
	box-shadow: var(--campus-shadow);
	cursor: pointer;
}

.cong-campus .cong-campus__browse svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cong-campus.is-kiosk .cong-campus__card { top: 88px; }

.cong-campus__picker {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	width: min(560px, 100%);
	background: #fff;
	box-shadow: 12px 0 40px rgba(15, 23, 42, 0.18);
	animation: cong-campus-slide 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes cong-campus-slide {
	0% { transform: translateX(-30px); opacity: 0; }
	100% { transform: translateX(0); opacity: 1; }
}

.cong-campus__picker-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 20px 14px 26px;
	border-bottom: 1px solid #edf0f4;
}

.cong-campus__picker-head p { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--campus-ink); }

.cong-campus__picker-close {
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: #f1f4f8;
	color: var(--campus-ink);
	cursor: pointer;
}

.cong-campus .cong-campus__picker-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.cong-campus__picker-list {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 10px 26px 30px;
	touch-action: pan-y;
}

.cong-campus__picker-group { padding: 14px 0 8px; border-bottom: 1px solid #f1f4f8; }

.cong-campus__picker-building {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--campus-ink);
	font: inherit;
	font-size: 1.25rem;
	font-weight: 800;
	cursor: pointer;
}

.cong-campus__picker-building::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--b);
}

.cong-campus__picker-rooms { display: flex; flex-wrap: wrap; gap: 10px; }

.cong-campus__picker-rooms button {
	min-height: 54px;
	padding: 0 18px;
	border: 2px solid transparent;
	border-radius: 14px;
	background: #f2f5f9;
	color: var(--campus-ink);
	font: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	cursor: pointer;
}

.cong-campus__picker-rooms button:active { border-color: var(--b); background: #fff; }

/* The code to take it away ------------------------------------------------ */

.cong-campus__qr {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 480px;
	padding: 14px 24px 14px 14px;
	background: var(--campus-ink);
	border-radius: 20px;
	box-shadow: 0 12px 34px rgba(15, 23, 42, 0.4);
	animation: cong-campus-rise 0.35s ease both, cong-campus-call 2.6s ease-in-out 0.4s infinite;
}

@keyframes cong-campus-call {
	0%, 100% { box-shadow: 0 12px 34px rgba(15, 23, 42, 0.4), 0 0 0 0 rgba(37, 99, 235, 0.55); }
	50% { box-shadow: 0 12px 34px rgba(15, 23, 42, 0.4), 0 0 0 10px rgba(37, 99, 235, 0); }
}

.cong-campus__qr-code { flex: 0 0 auto; width: 160px; height: 160px; padding: 6px; background: #fff; border-radius: 12px; }
.cong-campus .cong-campus__qr-code svg { display: block; width: 148px; height: 148px; }
.cong-campus__qr-say { margin: 0; font-size: 1.05rem; line-height: 1.35; color: #cbd5e1; }
.cong-campus__qr-say strong { display: block; margin-bottom: 8px; font-size: 1.55rem; font-weight: 900; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }

/* With the code showing, the zoom and reset step up out of its way. */
.cong-campus__qr:not([hidden]) ~ .cong-campus__zoom,
.cong-campus__qr:not([hidden]) ~ .cong-campus__reset { bottom: 210px; }

.is-kiosk .cong-campus__tip { left: 24px; transform: none; animation-name: cong-campus-bob; }
.cong-campus__tip.is-phone::before { background: #2563eb; animation-name: cong-campus-live-blue; }

@keyframes cong-campus-live-blue {
	0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6); }
	100% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
}

/* The lobby screen ------------------------------------------------------- */

.is-kiosk .cong-campus__card { top: 16px; bottom: auto; padding: 18px 24px 18px 26px; max-width: 460px; }
.is-kiosk .cong-campus__card-name { font-size: 1.7rem; }
.is-kiosk .cong-campus__card-where { font-size: 1.1rem; }
.is-kiosk .cong-campus__floors { bottom: auto; top: 16px; }
.is-kiosk .cong-campus__zoom button { width: 58px; height: 58px; }
.is-kiosk .cong-campus__compass { top: 16px; bottom: auto; right: 16px; }
.is-kiosk .cong-campus__reset { right: 88px; height: 58px; padding: 0 24px 0 18px; font-size: 1.15rem; }
.is-kiosk .cong-campus .cong-campus__reset svg, .is-kiosk.cong-campus .cong-campus__reset svg { width: 24px; height: 24px; }

.cong-campus__hint {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 3;
	pointer-events: none;
	transition: transform 0.95s cubic-bezier(0.45, 0, 0.2, 1);
}

.cong-campus .cong-campus__hand {
	position: absolute;
	/* The fingertip, not the corner of the picture, lands on the room. */
	left: -30px;
	top: -8px;
	width: 88px;
	height: 110px;
	fill: #fff;
	stroke: var(--campus-ink);
	stroke-width: 2.5;
	filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.3));
	animation: cong-campus-bob 1.8s ease-in-out infinite;
}

.cong-campus__hint.is-tapping .cong-campus__hand { animation: cong-campus-tap 0.6s ease-in-out 2; }

.cong-campus__ripple {
	position: absolute;
	left: -32px;
	top: -32px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 4px solid #2563eb;
	opacity: 0;
}

.cong-campus__hint.is-tapping .cong-campus__ripple { animation: cong-campus-ripple 1.2s ease-out 1; }

.cong-campus__tip {
	position: absolute;
	left: 50%;
	bottom: 20px;
	margin: 0;
	padding: 14px 26px 14px 22px;
	transform: translateX(-50%);
	background: var(--campus-ink);
	color: #fff;
	border-radius: 999px;
	font-size: 1.45rem;
	font-weight: 800;
	white-space: nowrap;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
	animation: cong-campus-bob-tip 2.4s ease-in-out infinite;
	pointer-events: none;
}

.cong-campus__tip::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 12px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
	animation: cong-campus-live 1.6s ease-out infinite;
	vertical-align: 0.05em;
}

@keyframes cong-campus-bob {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(0, -8px); }
}

@keyframes cong-campus-bob-tip {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, -6px); }
}

@keyframes cong-campus-tap {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(0, 6px) scale(0.92); }
}

@keyframes cong-campus-ripple {
	0% { transform: scale(0.3); opacity: 0.9; }
	100% { transform: scale(2.4); opacity: 0; }
}

@keyframes cong-campus-live {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
	100% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.cong-campus *,
	.cong-campus__hint { animation: none !important; transition: none !important; }
}

.cong-campus__noscript { position: absolute; bottom: 16px; left: 16px; margin: 0; padding: 10px 14px; background: #fff; border-radius: 12px; }

/* ── A visitor's map: the flags as quiet as the building tags ──────────── */

.cong-campus--short.is-guide { height: 58vh; min-height: 380px; max-height: 620px; }
@media (max-width: 600px) { .cong-campus--short.is-guide { height: 100vw; min-height: 340px; } }

.cong-campus.is-guide .cong-campus__marker-stem,
.cong-campus.is-guide .cong-campus__marker circle { display: none; }
/* Moved off its spot to make room: a dot shows where it really is. */
.cong-campus.is-guide .cong-campus__marker.is-moved circle { display: inline; r: 4px; fill: var(--campus-ink); stroke-width: 1.5px; }
.cong-campus.is-guide .cong-campus__marker rect { fill: #fff; filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.18)); }
.cong-campus.is-guide .cong-campus__marker-flag { fill: var(--campus-ink); }
.cong-campus.is-guide .cong-campus__marker text { fill: var(--campus-text); font-weight: 700; font-size: 13.5px; }