@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade {
    animation-duration: 0.75s;
    animation-delay: 0.5s;
    animation-name: fadeIn;
    animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
    animation-fill-mode: backwards;
}

.centered-element {
    display: block;
    margin: 0 auto;
}

.centering-container {
    align-items: center;
    display: flex;
    width: 100%;
    height: 100vh;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ============================================================
   Kiosk Mode Styles
   ============================================================ */

/* Full viewport, no scrolling, no pinch-to-zoom */
.kiosk {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    touch-action: none;
}

/* Branded building header — split layout (Innerface spec #272/#273):
   left side is full dark color with hospital identity; right side is a
   discrete signage PANEL at the PDF's native 268:69 aspect ratio (≈3.88:1).
   Confining the panel preserves the exact bezier curve slope through the
   badge — stretching it to full kiosk width compresses the slope. */
.kiosk-header {
    height: 110px;
    min-height: 110px;
    max-height: 110px;
    position: relative;
    overflow: hidden;
    z-index: 10;
    display: flex;
    align-items: stretch;
}

/* Light-shade strip extension — runs from the left edge of the page to
   the signage panel, filling the bottom band that continues the bezier's
   horizontal tangent. Bezier left endpoint sits at y=25.27 viewBox units
   of 69 = 36.62% from top, so the strip top sits at 36.62% of the header
   height and extends to the bottom. */
.kiosk-header-strip-extension {
    position: absolute;
    left: 0;
    bottom: 0;
    right: calc(110px * 268 / 69); /* stop where the panel begins */
    top: calc(110px * 25.27 / 69); /* match the bezier's left-endpoint y */
    z-index: 0;
    pointer-events: none;
}

/* Left side — hospital identity vertically centered on the full banner
   height. The strip extension passes behind the text; text sits above
   both the dark band and the light strip, white reads cleanly on either. */
.kiosk-header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding-left: 24px;
    z-index: 1;
}

.kiosk-header-hospital {
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
}

.kiosk-header-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1;
}

/* Right side — the signage panel. Width = header_height × 268/69 ≈ 427px,
   so the bezier and content render at exactly the PDF swatch's proportions. */
.kiosk-header-panel {
    position: relative;
    flex: 0 0 auto;
    width: calc(110px * 268 / 69);
    height: 100%;
}

/* Signage SVG — fills the panel exactly. ViewBox matches the PDF swatch's
   panel coordinates (268pt × 69pt). preserveAspectRatio="none" is safe
   because the panel container has the same 3.88:1 aspect ratio. All three
   elements (swoop, badge, letter) live inside this SVG and scale as one
   unit — no independent CSS positioning can drift from the PDF geometry. */
.kiosk-header-signage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Footer band — sits in the 80%-shade area at the bottom of the panel.
   Matches the "You Are in the MOB X" footer on the Innerface signs. */
.kiosk-header-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 0 12px;
}

.kiosk-header-footer-text {
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.kiosk-header-footer-text strong {
    font-weight: 800;
}

/* Building letter badge (#229, #272): transparent fill so the banner shows
   through, white perimeter, white letter — matches the physical signage
   plaque in the Innerface brand spec (square corners, no drop shadow).
   Kyle 5/19: "there probably is not a drop shadow on the painted ones".

   Geometry derived from the PDF SWATCH (left-column design) per KC's
   reference (artifact hca-brand-spec):
   - PDF swatch panel: 268 × 69 pt. Badge: 37.7 × 37.7 pt positioned at
     panel-relative (209.86, 6.34). Bezier passes through the badge at
     84.2% from badge top — i.e., only the bottom ~16% of the badge
     interior crosses into the 80%-shade band.
   - Bezier control points (panel-relative): M(268,44.91) C(181.5,27.86)
     (93.8,23.39) (0,25.27). At badge x-center (228.71), y ≈ 38.07.
     Crossing fraction: (38.07 − 6.34) / 37.7 = 84.2%.
   - Scale to 110 px header: factor 110/69 = 1.594.
     Badge: 37.7 × 1.594 ≈ 60 px.
     Curve y at badge x (right edge of viewport, stretched): ≈ 68 px.
     Badge top: 68 − 60 × 0.842 ≈ 18 px so the curve crosses the badge
     at the same 84% from-top point as the PDF. */
.kiosk-header-badge {
    position: absolute;
    top: 18px;
    right: 24px;
    width: 60px;
    height: 60px;
    z-index: 2;
    background: transparent;
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
}

.kiosk-header-building-label {
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    white-space: nowrap;
}


/* Main content fills remaining viewport below header */
.kiosk .kiosk-content {
    position: absolute;
    top: 110px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    padding: 0;
}

/* Placeholder screen for loading state */
.kiosk-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

/* Touch-friendly sizing for kiosk interactive elements */
.kiosk .mud-button {
    min-height: 56px;
    min-width: 56px;
    font-size: 1.25rem;
    border-radius: 8px;
}

.kiosk .mud-button-root {
    padding: 12px 24px;
}

.kiosk .mud-input,
.kiosk .mud-input-control {
    font-size: 1.375rem;
}

.kiosk .mud-input-control .mud-input-root {
    min-height: 56px;
    font-size: 1.375rem;
}

/* Large touch targets for list items */
.kiosk .mud-list-item {
    min-height: 64px;
    padding: 12px 16px;
    font-size: 1.25rem;
}

/* Icon sizing for kiosk visibility */
.kiosk .mud-icon-root {
    font-size: 1.65rem;
}

/* Ensure high contrast text rendering */
.kiosk {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Disable text selection on kiosk (touchscreen terminals) */
.kiosk {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbars that may appear within components */
.kiosk *::-webkit-scrollbar {
    display: none;
}

.kiosk * {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ============================================================
   Kiosk Search Layout
   ============================================================ */

/* Full-height flex layout: search bar, results, keyboard */
.kiosk-search-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    /* Smooth fade-in from splash → directory transition (KC 5/20:
       "the directory kind of pops in"). Longer than the generic
       kiosk-fade-in and uses ease-out so the directory eases into
       place instead of snapping. */
    animation: kiosk-directory-enter 0.5s ease-out;
}

@keyframes kiosk-directory-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Search Bar ─────────────────────────────────────────── */
.kiosk-search-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kiosk-search-bar .kiosk-search-input .mud-input-outlined-border {
    animation: search-pulse 4s ease-in-out infinite;
}

@keyframes search-pulse {
    0%, 100% { border-color: rgba(255, 255, 255, 0.23); }
    50% { border-color: rgba(38, 198, 218, 0.6); }
}

.kiosk-search-bar .kiosk-search-input {
    flex: 1;
}

/* The search field gets a fill so it reads as a real text input instead of
   a transparent outline, which had too little contrast against the dock on
   the wall kiosks (Yvonne 6/8, #359: "make it white… like a text input
   box"). Dark mode gets a subtle lift; light mode goes solid white (below
   with the other .kiosk-light overrides). */
.kiosk-search-bar .kiosk-search-input .mud-input-outlined {
    background: rgba(255, 255, 255, 0.10);
}

.kiosk-search-bar .kiosk-search-input .mud-input-root {
    min-height: 64px;
    font-size: 1.65rem;
}


.kiosk-search-bar .kiosk-search-clear {
    min-width: 56px;
    min-height: 56px;
}

/* "Cancel" dismiss-keyboard button (replaces the bare keyboard-hide glyph). */
.kiosk-search-bar .kiosk-search-cancel {
    min-height: 56px;
    padding: 0 22px;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* ── Bottom search dock (KC 6/3) ────────────────────────────
   The search bar lives at the bottom of the directory. The keyboard is
   hidden until the field is tapped, then slides up beneath this dock so
   the bar stays pinned to the top of the keyboard. */
.kiosk-search-dock {
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* Resting row: the search pill fills the left; the fixed Restrooms button
       (right 192, 100px) and feedback-QR (right 12, 168px) sit on the right.
       Reserve right padding so the pill ends just left of the Restrooms
       button; small left inset for the pill's pulse/glow. */
    padding-left: 16px;
    padding-right: 308px;
}

/* Keyboard open → the dock is raised above the keyboard, so the search input
   spans full width. The Restrooms + QR cards stay visible (bottom-right); the
   keyboard+numpad group reserves a right gutter for them (see below). */
.kiosk-search-dock-open {
    padding-left: 16px;
    padding-right: 16px;
}

.kiosk-search-input-wrap {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.kiosk-search-input-wrap * {
    cursor: pointer;
}

.kiosk-search-dock .kiosk-search-input {
    width: 100%;
}

/* Resting "Touch To Search" pill — big blue CTA that pulses once every
   1.5s to invite a tap (KC 6/3). Tapping it opens the keyboard. */
.kiosk-search-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    min-height: 76px;
    padding: 0 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2D9CDB 0%, #1565C0 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(33, 122, 205, 0.4);
    animation: kiosk-cta-pulse 1.5s ease-in-out infinite;
}

.kiosk-search-cta-icon {
    font-size: 2.2rem !important;
}

/* Glow pulse (no transform) — reads as a pulse without changing size, so it
   never bleeds past the clipped edge and stays tap-reliable. */
@keyframes kiosk-cta-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(33, 122, 205, 0.30); filter: brightness(1); }
    50%      { box-shadow: 0 8px 36px rgba(45, 156, 219, 0.85); filter: brightness(1.09); }
}

/* ── Results Area ───────────────────────────────────────── */
.kiosk-results {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    touch-action: pan-y;
}

.kiosk-route-steps {
    touch-action: pan-y;
}

.kiosk-results-header {
    padding: 8px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kiosk-results-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
}

/* ── Result Rows ────────────────────────────────────────── */
.kiosk-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.kiosk-result-row:active {
    background: color-mix(in srgb, var(--building-light, #26C6DA) 35%, transparent);
    transform: scale(0.985);
}

.kiosk-result-selected {
    background: color-mix(in srgb, var(--building-dark, #26C6DA) 18%, transparent);
    border-left: 4px solid var(--building-dark, #26C6DA);
}

.kiosk-result-practice-row {
    background: rgba(255, 255, 255, 0.04);
}

.kiosk-result-left {
    flex: 1;
    min-width: 0;
    padding-right: 16px;
}

.kiosk-result-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}

.kiosk-result-specialty {
    margin-top: 2px;
}

.kiosk-result-practice {
    white-space: nowrap;
}

.kiosk-result-location {
    margin-top: 2px;
}

/* ── On-Screen Keyboard ────────────────────────────────── */
.kiosk-keyboard-container {
    flex-shrink: 0;
    /* QWERTY + numpad sit side by side as one centered group. The right
       padding reserves the bottom-right cards' column (Restrooms 100px @
       right:192 + feedback-QR 168px @ right:12 ≈ 300px) so the group centers
       in the space to their LEFT and never collides with them (Kyle 6/3). */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 28px;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 320px 12px 12px;
}

.kiosk-keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 760px;
    margin: 0;
}

.kiosk-keyboard-row {
    display: flex;
    justify-content: center;
    gap: 5px;
}

/* Individual key */
.kiosk-key.mud-button {
    min-height: 60px;
    min-width: 60px;
    flex: 1;
    max-width: 80px;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 8px;
    padding: 8px 4px;
}

/* Bottom row special keys */
.kiosk-keyboard-bottom {
    gap: 8px;
}

.kiosk-key-space.mud-button {
    flex: 4;
    max-width: 400px;
}

.kiosk-key-clear.mud-button {
    flex: 1.5;
    max-width: 140px;
    font-size: 1.1rem;
}

.kiosk-key-backspace.mud-button {
    flex: 1.5;
    max-width: 140px;
    font-size: 1.1rem;
}

/* ============================================================
   Isometric floor-stack (#339) — shared by the POC page and the
   kiosk elevator/stairs transition overlay.
   ============================================================ */
.iso-stack-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.iso-stack-svg {
    width: 100%;
    height: 100%;
    /* Approved iso squash + a gentle static skew so the rectangular plates
       read as 3D plates with visible walls. In-plane 2D affine only — no
       CSS-3D, no rotation/spin (Kyle 5/26). */
    transform: scale(1.04, 0.62) skewX(-20deg);
    transform-origin: 50% 50%;
}
.iso-floor { transition: opacity 0.12s linear; }

/* Kiosk elevator/stairs transition: the iso stack covers the flat map area
   (the step bubble + QR stay on top via their own higher z-index). */
.kiosk-iso-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: radial-gradient(ellipse at 50% 40%, #EAF2FA 0%, #D6E6F4 70%, #C7DCEF 100%);
    /* Crossfade the iso in over the live 2D map (which the camera left framed on
       the elevator) so entering the rise dissolves rather than cutting (#339). */
    animation: kiosk-fade-in 0.6s ease-out;
}
.kiosk-iso-overlay .iso-stack-stage { height: 100%; }

/* ============================================================
   Kiosk 3D Map View
   ============================================================ */

.kiosk-map-toggle.mud-button {
    min-width: 130px;
    min-height: 56px;
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.kiosk-map-area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: kiosk-fade-in 0.15s ease;
}

.kiosk-banner {
    flex-shrink: 0;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.kiosk-map-container {
    width: 100%;
    height: 100%;
}

.kiosk-map-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Back to directory button */
.kiosk-back-btn.mud-button {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    min-height: 48px;
    font-size: 1.1rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 10px;
}

/* Map-first route screen (#282 redesign): full-width map, a mobile-handoff
   QR card top-right (where the step panel was), and the current step as a
   friendly bubble at bottom-center. */
.kiosk-route-qr {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    padding: 14px 14px 10px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.kiosk-route-qr-img {
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

.kiosk-route-qr-caption {
    margin-top: 8px;
    font-weight: 600;
    color: #37474F;
    font-size: 0.95rem;
    line-height: 1.2;
}

.kiosk-step-bubble {
    position: fixed;          /* pin to viewport bottom, not the (taller) map item */
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 72%;
    padding: 18px 30px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    color: #263238;
    border-radius: 9999px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    animation: kiosk-fade-in 0.2s ease;
}

.kiosk-step-bubble-icon {
    flex-shrink: 0;
    color: #EA9F23;
}

.kiosk-step-bubble-text {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
}

.kiosk-step-bubble-sub {
    font-size: 1rem;
    color: #607D8B;
    margin-top: 2px;
}

/* Route navigation — right-side step panel */
.kiosk-route-panel {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.kiosk-route-panel .mud-selected-item {
    border-left: 4px solid var(--mud-palette-primary);
    background: rgba(38, 198, 218, 0.12);
}

.kiosk-route-panel .kiosk-step-inactive {
    opacity: 0.4;
    transition: opacity 0.2s;
    border-left: 4px solid transparent;
}

.kiosk-route-panel .kiosk-step-inactive:hover {
    opacity: 0.7;
}

/* Navigate icon on directory rows */
.kiosk-result-navigate {
    margin-left: 12px;
    font-size: 1.65rem;
}

.kiosk-result-right {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Floor navigation overlay */
.kiosk-floor-nav {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 8px;
    backdrop-filter: blur(8px);
}

.kiosk-floor-btn.mud-button {
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
}

.kiosk-floor-label {
    min-width: 80px;
    text-align: center;
    padding: 4px 8px;
}

/* ============================================================
   Floor Plan Editor
   ============================================================ */

.floor-plan-canvas-container {
    max-height: calc(100vh - 260px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.floor-plan-svg {
    display: block;
}

.floor-plan-svg polyline {
    vector-effect: non-scaling-stroke;
}

.floor-plan-svg circle {
    vector-effect: non-scaling-stroke;
}

.floor-sidebar-item:hover .floor-reorder-buttons {
    opacity: 1 !important;
}

/* Feedback popup */
@keyframes kiosk-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.kiosk-feedback-popup {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 50;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Splash / idle screen */
.kiosk-splash {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #D6E6F4;
    cursor: pointer;
    position: relative;
}

.kiosk-splash-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem 0.5rem;
    z-index: 1;
    background: linear-gradient(to bottom, #f0f0f0 30%, transparent 100%);
}

.kiosk-splash-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 4.5rem;
    font-weight: 800;
    color: #1a2332;
    text-align: center;
    letter-spacing: 0.15em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 8px 40px rgba(0, 0, 0, 0.2);
}

.kiosk-splash-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem 2.5rem;
    z-index: 1;
    pointer-events: none;
}

.kiosk-splash-cta {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    font-weight: 800;
    /* Matches the FIND YOUR WAY title color (KC 5/20). */
    color: #1a2332;
}

.kiosk-splash-restroom {
    position: fixed;
    bottom: 12px;
    /* Right side, immediately left of the feedback-QR (168px wide @ right:12). */
    right: 192px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.kiosk-splash-restroom .mud-icon-root {
    font-size: 2.5rem;
}

.kiosk-splash-restroom:active {
    background: rgba(0, 0, 0, 0.7);
}

/* Restroom gender picker page */
.kiosk-restroom-picker {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.kiosk-restroom-picker-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kiosk-restroom-picker-buttons {
    display: flex;
    gap: 48px;
}

.kiosk-restroom-picker-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 240px;
    height: 280px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.kiosk-restroom-picker-btn:active {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

.kiosk-restroom-icon {
    width: 96px;
    height: 96px;
    font-size: 96px !important;
}

/* Directory restroom button */
.kiosk-directory-restroom {
    position: fixed;
    bottom: 12px;
    /* Right side: [search pill] … [Restrooms] [feedback-QR] (Kyle 6/3). */
    right: 192px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.kiosk-directory-restroom .mud-icon-root {
    font-size: 2.5rem;
}

.kiosk-directory-restroom:active {
    background: rgba(255, 255, 255, 0.18);
}

/* 10-key numpad on the right side of the keyboard container. Phone-style
   3x4 grid (1-9, blank, 0, blank) so visitors can search by suite number
   without using the QWERTY (Teresa 5/19). */
.kiosk-numpad {
    /* In-flow beside the QWERTY (part of the centered keyboard group). */
    display: grid;
    grid-template-columns: repeat(3, 60px);
    grid-auto-rows: 60px;
    gap: 5px;
    flex-shrink: 0;
}

.kiosk-numpad-key.mud-button {
    min-height: 60px;
    min-width: 60px;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 0;
}

.kiosk-numpad-spacer {
    /* Empty grid cell — keeps "0" centered in the bottom row */
}

/* QR-handoff popup — full-screen takeover offering phone-scan or kiosk path */
.kiosk-qr-handoff {
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 28, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: kiosk-fade-in 0.18s ease;
}

.kiosk-qr-handoff-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: rgba(20, 28, 42, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 48px 56px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
    max-width: 90%;
}

.kiosk-qr-handoff-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 48px 0 0;
    min-width: 320px;
}

.kiosk-qr-handoff-qr {
    background: white;
    padding: 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kiosk-qr-handoff-caption {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.2px;
}

.kiosk-qr-handoff-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 0;
}

.kiosk-qr-handoff-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 56px;
    min-width: 340px;
}

.kiosk-qr-handoff-right .mud-button {
    min-height: 72px;
    font-size: 1.2rem;
    border-radius: 12px;
}

/* Feature-flag toast — brief on-screen confirmation when a flag is toggled */
.kiosk-flag-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
    background: rgba(20, 28, 42, 0.95);
    color: #FFD54F;
    border: 1px solid rgba(255, 213, 79, 0.4);
    border-radius: 10px;
    padding: 10px 18px;
    font-family: monospace;
    font-size: 0.95rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: kiosk-fade-in 0.18s ease;
}

/* Feedback QR widget — outer-left slot beside the Restrooms button */
.kiosk-feedback-qr {
    position: fixed;
    bottom: 12px;
    /* Bottom-RIGHT now (Kyle 6/3) so it stops covering provider names on the
       left of the directory list. Fixed width keeps the Restrooms button's
       offset deterministic. Shown on both splash and directory. */
    right: 12px;
    width: 168px;
    z-index: 9999;
    background: rgba(30, 40, 55, 0.92);
    backdrop-filter: blur(12px);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(38, 198, 218, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.kiosk-feedback-qr-title {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
}

.kiosk-feedback-qr-cta {
    color: rgba(38, 198, 218, 0.8);
    text-align: center;
    margin-top: 2px;
}

/* ============================================================
   Kiosk Light Theme (toggled via Shift+L; bound to
   SessionStateService.KioskLightMode, applied via the
   .kiosk-light class on the MudLayout root).
   Each rule overrides a dark-mode surface; keep them grouped
   here so the dark theme above stays untouched.
   ============================================================ */

.kiosk.kiosk-light {
    color: #1F2330;
}

/* Search bar */
.kiosk-light .kiosk-search-bar {
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.kiosk-light .kiosk-search-bar .mud-input-outlined-border {
    border-color: rgba(0, 0, 0, 0.28) !important;
}
/* #359: solid white field in light mode — see the dark-mode rule up top. */
.kiosk-light .kiosk-search-bar .kiosk-search-input .mud-input-outlined {
    background: #FFFFFF;
}

/* Results list — rows, headers, divider */
.kiosk-light .kiosk-results {
    background: #FFFFFF;
}
.kiosk-light .kiosk-results-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.kiosk-light .kiosk-result-row {
    color: #1F2330;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.kiosk-light .kiosk-result-practice-row {
    background: rgba(0, 0, 0, 0.025);
}
.kiosk-light .kiosk-result-row .mud-typography-body2,
.kiosk-light .kiosk-result-row .kiosk-result-location,
.kiosk-light .kiosk-result-row .kiosk-result-specialty {
    color: rgba(0, 0, 0, 0.6);
}

/* Keyboard area */
.kiosk-light .kiosk-keyboard-container {
    background: rgba(0, 0, 0, 0.04);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.kiosk-light .kiosk-key.mud-button {
    background: #FFFFFF;
    color: #1F2330;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.kiosk-light .kiosk-key.mud-button:active {
    background: rgba(0, 0, 0, 0.05);
}

/* Back-to-Directory pill */
.kiosk-light .kiosk-back-btn.mud-button {
    background: rgba(255, 255, 255, 0.92);
    color: #1F2330;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Restrooms button (splash + directory variants share base layout) */
.kiosk-light .kiosk-splash-restroom,
.kiosk-light .kiosk-directory-restroom {
    background: rgba(255, 255, 255, 0.92);
    color: #1F2330;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Route panel — title, step list, footer */
.kiosk-light .kiosk-route-panel {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    color: #1F2330;
}
.kiosk-light .kiosk-route-panel .mud-typography,
.kiosk-light .kiosk-route-panel .mud-list-item {
    color: #1F2330;
}
.kiosk-light .kiosk-route-panel .kiosk-step-inactive {
    color: rgba(0, 0, 0, 0.4);
}

/* QR-handoff popup overlay */
.kiosk-light .kiosk-qr-handoff {
    background: rgba(244, 245, 247, 0.94);
}
.kiosk-light .kiosk-qr-handoff-card {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.kiosk-light .kiosk-qr-handoff-caption {
    color: #1F2330;
}
.kiosk-light .kiosk-qr-handoff-divider {
    background: rgba(0, 0, 0, 0.12);
}
.kiosk-light .kiosk-qr-handoff-right .mud-typography {
    color: #1F2330;
}

/* Feedback QR pill */
.kiosk-light .kiosk-feedback-qr {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.kiosk-light .kiosk-feedback-qr-title {
    color: #1F2330;
}
.kiosk-light .kiosk-feedback-qr-cta {
    color: var(--building-dark, #1976D2);
}

/* Splash background — cool blue / deep navy that matches both the
   campus map letterbox color and the navigation canvas background,
   so the kiosk reads as one consistent surface across all screens
   (KC 5/20: "extend it to the navigation maps too"). */
.kiosk-light .kiosk-splash {
    background: #D6E6F4;
}
.kiosk:not(.kiosk-light) .kiosk-splash {
    background: #0F1B2E;
    color: #FFFFFF;
}
.kiosk:not(.kiosk-light) .kiosk-splash-title,
.kiosk:not(.kiosk-light) .kiosk-splash-cta {
    color: #FFFFFF;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Campus Map (ground-floor splash) — Carto basemap with our own
   building polygons overlaid and a YOU-ARE-HERE highlight.
   ============================================================ */

.kiosk-campus {
    flex: 1;
    min-height: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kiosk-campus-svg {
    width: 100%;
    height: 100%;
    max-height: 100%;
    user-select: none;
}

/* Zoom layer between the (overflow-clipped) campus container and the SVG.
   The exit zoom animates here so the SVG keeps its isometric squash intact
   (option 2, Kyle 6/3). Fills the container; the SVG fills it in turn. */
.kiosk-campus-zoom {
    width: 100%;
    height: 100%;
}

/* Idle mode (splash): the campus is shown stationary in its natural
   orientation. Earlier iterations rotated the whole canvas with a CSS
   perspective tilt; that was distracting (Kyle 5/26) and conflicted with
   the alignment-effect principle for you-are-here maps. Motion is now
   carried by the current-building strobe (kiosk-campus-here-pulse) and
   the YOU ARE HERE callout bob (kiosk-campus-here-bob). */
.kiosk-campus-idle .kiosk-campus-svg {
    /* Light blue surround in case the SVG ever doesn't fill the splash
       (e.g. extreme aspect ratios). */
    background-color: #D6E6F4;
    /* Isometric view (CBRE 6/2): a 2D vertical squash fakes the tilt while
       keeping everything in-plane — so buildings can be extruded with real
       walls (drawn in the SVG) to read as 3D massing, and the YOU ARE HERE
       callout can counter-scale to stay upright. No CSS 3D, so no spinning-
       disorientation issue Kyle flagged. */
    transform: scale(1.06, 0.6);
    transform-origin: 50% 44%;
    transition: transform 0.6s ease;
}

/* Drop shadow on the map — applied to the inner shadow group (image +
   frame + polygons) so the SVG <text> labels stay outside the filter
   and render crisply (drop-shadow rasterizes its content; doing it on
   a parent group blurred the labels — KC 5/20). */
.kiosk-campus-idle .kiosk-campus-shadow {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
}

/* The floating building badges sit OUTSIDE the shadow-filter group (so they
   stay crisp), so give them their own drop shadow — straight down, matching
   the isometric ground shadow's angle — so the lifted plaques read as
   floating (CBRE 6/3). */
.kiosk-campus-badge-img {
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.4));
}

/* "Touch to Begin" exit transition (KC 5/20): zoom toward the current
   building's actual on-screen position and fade out. The kiosk-hotkeys
   helper (kioskCampusBeginExit) writes the building's screen-relative
   position into --focus-x / --focus-y so the zoom origin is the
   highlighted polygon. */
.kiosk-campus-exiting .kiosk-campus-zoom {
    transform-origin: var(--focus-x, 50%) var(--focus-y, 50%);
    animation: kiosk-campus-exit 700ms ease-in forwards;
}
.kiosk-campus-exiting .kiosk-splash-header,
.kiosk-campus-exiting .kiosk-splash-footer {
    animation: kiosk-campus-fadeout 350ms ease-in forwards;
}
.kiosk-splash:has(.kiosk-campus-exiting) .kiosk-splash-header,
.kiosk-splash:has(.kiosk-campus-exiting) .kiosk-splash-footer {
    animation: kiosk-campus-fadeout 350ms ease-in forwards;
}

@keyframes kiosk-campus-exit {
    0%   { transform: scale(1);   opacity: 1; }
    70%  { transform: scale(2.4); opacity: 0.65; }
    100% { transform: scale(3.6); opacity: 0; }
}

@keyframes kiosk-campus-fadeout {
    to { opacity: 0; }
}

/* Splash header + footer banners — KC 5/20: make these transparent
   AND absolute-positioned so the campus map can render full-bleed
   underneath them. Without absolute positioning they'd still take up
   vertical space in the splash's flex column and clip the rotating
   map's corners at that internal boundary. */
.kiosk-splash-header,
.kiosk-splash-footer {
    background: transparent !important;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}
.kiosk-splash-header { top: 0; }
.kiosk-splash-footer { bottom: 0; }
.kiosk-splash > .kiosk-campus,
.kiosk-splash > .kiosk-map-container {
    flex: 1 1 100%;
}

/* Campus zones — the stylized "ground" the buildings sit on. Traced by
   the admin in the campus-map editor; each type has a fixed map-like
   fill. Drawn beneath the building polygons. */
.kiosk-campus-zone {
    stroke-width: 2;
    stroke-linejoin: round;
}
.kiosk-campus-zone-greenspace { fill: #C6DCA8; stroke: #A9C487; }
/* Parking + road both read as dark "asphalt" so pavement is unmistakable
   at a glance and clearly distinct from buildings/walkable destinations
   (CBRE 6/2). Road is a touch lighter than parking so the two surfaces
   differentiate where they meet (CBRE 6/3). Desaturated dark gray with a
   slightly lighter edge stroke. */
.kiosk-campus-zone-parking    { fill: #3A3A3D; stroke: #4A4A4E; }
.kiosk-campus-zone-road       { fill: #616169; stroke: #70707A; }
.kiosk-campus-zone-walkway    { fill: #E8DCC0; stroke: #CFBF99; }

/* Campus paths — roads + sky bridges traced as open polylines (KC 5/25).
   Stroked, never filled. Round caps/joins so intersections and branches
   read as a continuous ribbon. Stroke-widths are in basemap pixel
   units; tuned for ~1200px-wide reference images. */
.kiosk-campus-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kiosk-campus-path-road      { stroke: #616169; stroke-width: 14; }
.kiosk-campus-path-skybridge { stroke: #C9B589; stroke-width: 12; }

/* Procedural parking-stall striping + parked cars (CBRE 6/3), generated
   per lot in CampusMapView. Stall lines are a soft light gray on the
   asphalt — present but not harsh. Cars carry a faint dark edge for
   definition and are filled with desaturated tones so they don't pull
   focus. */
.kiosk-campus-stall line,
.kiosk-campus-stall path { stroke: #9AA0A6; stroke-width: 0.7; stroke-opacity: 0.5; fill: none; }
.kiosk-campus-car { stroke: #26262A; stroke-width: 0.3; stroke-opacity: 0.55; }

/* Hospital marker — universal "H on blue" sign treatment (KC 5/25).
   Polygon fill is a light blue (building's PrimaryColor); on top sits
   a darker-blue square tile with the white H inside, mirroring the
   MOB letter-badge style: sharp corners, no stroke. */
.kiosk-campus-hospital-tile {
    fill: #003DA5;
    stroke: none;
}
.kiosk-campus-label-hospital {
    fill: #FFFFFF;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 32px;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Building letter badge (CBRE 6/2): solid tile in the building's brand
   color with a white border + white letter, replacing the old "MOB C"
   text. Mirrors the hospital sign treatment for the rest of campus. */
.kiosk-campus-letter-tile {
    stroke: #FFFFFF;
    stroke-width: 2;
}
.kiosk-campus-label-letter {
    fill: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 28px;
    text-anchor: middle;
    dominant-baseline: central;
}

.kiosk-campus-zone-label {
    fill: #5A6270;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: rgba(255,255,255,0.9);
    stroke-width: 3;
    stroke-linejoin: round;
}
.kiosk:not(.kiosk-light) .kiosk-campus-zone-label {
    fill: #C8CEDA;
    stroke: rgba(0,0,0,0.7);
}

/* Distance-landmark labels floating past the campus edge for orientation
   (Yvonne 3/30) — muted, uppercase, tracked-out so they read as "off in the
   distance, this way" rather than competing with the building badges. */
.kiosk-campus-landmark {
    fill: #8A98A6;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 600;
    font-size: 36px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-anchor: middle;
    dominant-baseline: middle;
    opacity: 0.25;
}

/* Building entrance markers on the campus overview (#324): an upright,
   billboarded green badge with a white border and a white entrance
   pictogram (style chosen in Settings). Green is the universal entrance
   color; it reads on grass, asphalt, or a building roof. */
.kiosk-campus-entrance-badge {
    fill: #2E7D32;
    stroke: #FFFFFF;
    stroke-width: 2.5;
}

/* Orange frame around the basemap — picks up the building palette's
   dark color (CBRE gold #EA9F23 for MOB C) so the frame matches the
   kiosk-header swoop on the same page (KC 5/20 experiment). */
.kiosk-campus-frame {
    fill: none;
    stroke: var(--building-dark, #EA9F23);
    stroke-width: 5;
    pointer-events: none;
}

.kiosk-campus-building {
    fill: var(--building-dark, #1976D2);
    fill-opacity: 1;
    stroke: var(--building-dark, #1976D2);
    stroke-width: 2;
    stroke-opacity: 1;
    transition: fill-opacity 0.3s ease;
}

.kiosk-campus-here {
    fill: var(--building-dark, #1976D2);
    fill-opacity: 1;
    stroke-width: 3;
    stroke-opacity: 1;
    animation: kiosk-campus-here-pulse 2.4s ease-in-out infinite;
}

@keyframes kiosk-campus-here-pulse {
    0%, 100% { fill-opacity: 1; }
    50%      { fill-opacity: 0.82; }
}

/* YOU ARE HERE callout bob — the whole dialog (body + tail + label)
   floats up and down a few units so the eye catches it without
   anything rotating or skewing (Kyle 5/26). Period matches the
   building strobe so the two animations feel coordinated. Pure
   translate — the tail's point shape is preserved. */
.kiosk-campus-here-bob {
    transform-box: fill-box;
    transform-origin: center;
    animation: kiosk-campus-here-bob 2.4s ease-in-out infinite;
}

@keyframes kiosk-campus-here-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.kiosk-campus-label {
    fill: #1F2330;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: rgba(255,255,255,0.92);
    stroke-width: 4;
    stroke-linejoin: round;
}

/* Basemap image opacity on the kiosk splash (KC 5/25). 50% lets the
   colored polygons and the YOU ARE HERE dialog read as the primary
   foreground while the campus context shows through more subtly. */
.kiosk-campus-basemap {
    opacity: 0.5;
}

/* "You are here" callout dialog (KC 5/25). Angular red dialog box
   with a downward-pointing tail "originating from" the current
   building. The dialog body uses a wayfinding/emergency red so it
   pops against any building color. */
.kiosk-campus-here-dialog {
    fill: #DC2626;
    stroke: #7F1D1D;
    stroke-width: 2;
    stroke-linejoin: miter;  /* sharp corners — angular, not rounded */
}
.kiosk-campus-here-label {
    fill: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.12em;
    text-anchor: middle;
    dominant-baseline: central;
    paint-order: stroke;
    stroke: rgba(0,0,0,0.30);
    stroke-width: 1;
    stroke-linejoin: round;
}

/* Dark-theme overrides for the campus building labels (the kiosk
   renders the drawn shapes on a deep-navy SVG background in dark mode;
   labels need contrast). The here-dialog stays red in either theme. */
.kiosk:not(.kiosk-light) .kiosk-campus-label {
    fill: #FFFFFF;
    stroke: rgba(0,0,0,0.75);
}