@charset "utf-8";
/**
 * ClientViewPage.css
 * Page-specific styling for the public-facing tour viewer (index.php in a
 * self-hosted export). Shared hotspot/tooltip/info-panel rules that also
 * apply inside the editor live preview live in TourViewerShared.css instead
 * — this file is everything else: page chrome, sidebar, ADA mode, footer,
 * modals, and layout.
 * @export-strip-header
 *
 * ⚠ NEVER use <?php ... ?> comment tags in this file, or any .css file.
 * This is a plain, statically-served .css file — it is NOT routed through
 * the PHP interpreter (see _htaccess), so <?php ?> tags are sent to the
 * browser as literal, unparseable text rather than being stripped. A CSS
 * parser hitting one between two rules can't make sense of it and merges
 * it into the selector of whatever rule comes next, silently discarding
 * that entire rule with no console error. This exact bug previously broke
 * #ada-viewer's display:none rule (and two other rules) for a long time
 * before being traced back to this. Use a real slash-star-style CSS block
 * comment here instead — <?php ?> comments are only safe in .php files,
 * where the server actually strips them before the browser ever sees them.
 */

        *, *::before, *::after { box-sizing: border-box; }


        body {
            margin: 0; padding: 0;
            background: #111;
            font-family: 'Segoe UI', 'Outfit', Tahoma, Geneva, Verdana, sans-serif;
            color: #fff;
            overflow: hidden !important;
            height: 100vh; height: 100dvh;
        }

        /* ══════════════════════════════════════════════════════════════════
           STANDARD MODE (HUD)
        ══════════════════════════════════════════════════════════════════ */

        #standard-viewer {
            display: none;
            position: relative;
            width: 100vw;
            height: 100vh; height: 100dvh;
            
            --secondary-color: #888888;
            --sidebar-bg:      #444444;
            --sidebar-bg-raw:  #444444;
            --sidebar-bg-muted: #444444;
            --footer-btn-bg:    #444444;
            --footer-btn-text:  #ffffff;
            --sidebar-text:    #ffffff;
            --secondary-text:  #111111;
            --label-accent:    #ffffff;
            --ada-btn-text:    #ffffff;
            --glass: rgba(10, 15, 30, 0.96);
            --border-light: rgba(255, 255, 255, 0.15);
            --text-white: #ffffff;
            --text-muted: #ffffff;
            --text-ada:   #ffffff;
            --text-dim:   #ffffff;
            --focus-ring: 4px solid var(--secondary-color);
        }
        #standard-viewer.active { display: block; }

        #panorama {
            width: 100%;
            height: 100%;
            background: #000;
            position: absolute; top:0; left:0; z-index: 1; outline: none;
        }

        /* Pannellum's built-in compass (bottom-right) — already suppressed
           in ADA mode, this matches that same treatment for Standard mode. */
        #standard-viewer .pnlm-compass { display: none !important; }

        /* High-Contrast Focus
		   Neutral two-tone ring: white outer band, black inner band. One of the two
		   always contrasts with the element's fill, whatever the tour's branding. */
		#standard-viewer :focus-visible {
			outline: 3px solid #fff !important;
			outline-offset: -3px !important;
			box-shadow: inset 0 0 0 6px #000, 0 0 15px var(--secondary-color) !important;
		}
        
        /* Force ring on hotspots regardless of mouse/keyboard to fix JS focus */
        #standard-viewer .pnlm-hotspot:focus-visible, 
		#standard-viewer .flat-hs:focus-visible,
		#standard-viewer .pnlm-hotspot.active-focus, 
		#standard-viewer .flat-hs.active-focus {
            outline: 3px solid #fff !important;
            outline-offset: 3px !important;
            box-shadow: 0 0 0 3px #000, 0 0 15px var(--secondary-color) !important;
            z-index: 10 !important;
		}

        /* Same fix, same reason, extended to the sidebar tab button — this is
           exactly where autoFocusHUD() moves focus to after every scene load.
           Clicking a hotspot to trigger a scene change is a mouse interaction,
           and most browsers' :focus-visible heuristic remembers "the last
           input was a pointer" and suppresses the ring for the *subsequent*
           programmatic .focus() call that follows — even though that specific
           call has nothing to do with the click itself. Plain :focus sidesteps
           the heuristic entirely, so the ring reliably lands regardless of
           what triggered the scene change that preceded it. */
        #standard-viewer .tab-btn:focus {
            outline: 3px solid #fff !important;
            outline-offset: -3px !important;
            box-shadow: inset 0 0 0 6px #000, 0 0 15px var(--secondary-color) !important;
        }

        /* Map legend accessibility blocks — visible purple square + focus ring */
        #standard-viewer .map-legend-block {
            outline: none; /* reset; keyboard rule below handles it */
        }
        #standard-viewer .map-legend-block:focus,
        #standard-viewer .map-legend-block:focus-visible,
        #std-fs-map-markers .map-legend-block:focus,
        #std-fs-map-markers .map-legend-block:focus-visible {
            outline: 3px solid #fff !important;
            outline-offset: 3px !important;
            box-shadow: 0 0 0 3px #000, 0 0 15px var(--secondary-color, #888) !important;
            z-index: 10 !important;
        }

        /* Custom Scrollbars */
        #standard-viewer .main-content::-webkit-scrollbar,
        #standard-viewer .mob-scene-desc-content::-webkit-scrollbar { width: 10px; }
        #standard-viewer .main-content::-webkit-scrollbar-track,
        #standard-viewer .mob-scene-desc-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 8px; }
        #standard-viewer .main-content::-webkit-scrollbar-thumb,
        #standard-viewer .mob-scene-desc-content::-webkit-scrollbar-thumb { background: var(--secondary-color); border-radius: 8px; }
        #standard-viewer .main-content,
        #standard-viewer .mob-scene-desc-content { scrollbar-color: var(--secondary-color) rgba(255,255,255,0.05); scrollbar-width: auto; }

        /* Fixed Branding — now also a real link (see hud-client-logo-link
           wiring in the tour-load script), so pointer-events can no longer
           be none here: that was fine when this was purely decorative, but
           would now silently block mouse clicks from ever reaching it while
           keyboard access still worked, an inconsistent, broken experience
           for mouse users specifically. text-decoration/cursor reset the
           default anchor styling a browser would otherwise apply. */
        #standard-viewer .client-logo {
            position: fixed;
            top: 30px; left: 1.5rem; z-index: 1000;
            display: flex; flex-direction: column;
            filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
            font-family: 'Outfit', sans-serif;
            text-decoration: none; cursor: pointer;
        }
        #standard-viewer .client-logo img { max-width: 200px; max-height: 70px; object-fit: contain; object-position: left top; display: none; }
        #standard-viewer .client-logo .brand-name { font-weight: 900; letter-spacing: -2px; color: var(--secondary-color); line-height: 1; margin: 0; text-transform: uppercase; display: none; font-size: 1.5rem; }
        #standard-viewer .client-logo p { font-size: 0.7rem; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; margin-top: 5px; color: #fff; }

        /* Top Right Menu Button */
        #standard-viewer .main-menu-btn {
            position: fixed;
            top: 20px; right: 20px; z-index: 1100;
            background: var(--sidebar-bg-muted); color: var(--sidebar-bg-muted-text); border: 2px solid var(--secondary-color);
            padding: 0 20px; height: 50px; border-radius: 12px; font-weight: 800; cursor: pointer;
            text-transform: uppercase; font-size: 0.9rem; display: none;
            align-items: center; justify-content: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5); font-family: 'Outfit', sans-serif; transition: 0.2s;
        }
        #standard-viewer .main-menu-btn .mobile-icon { display: none; width: 24px; height: 24px; }

        /* ADA Mode Switcher (Standard Mode) */
        #btn-switch-ada {
            position: fixed; top: 20px; right: 480px; z-index: 1100;
            background: rgba(10, 15, 30, 0.96); 
            border: 2px solid var(--secondary-color); color: var(--ada-btn-text);
            height: 50px; padding: 0 20px; border-radius: 12px;
            font-family: 'Outfit', Tahoma, sans-serif; font-weight: 800; font-size: 0.9rem; text-transform: uppercase;
            display: none; align-items: center; gap: 8px; cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: background 0.2s, color 0.2s;
            text-decoration: none; backdrop-filter: blur(10px);
        }
        #btn-switch-ada:hover { background: var(--secondary-color); color: var(--secondary-text); }
        #btn-switch-ada svg path, #btn-switch-ada svg circle { stroke: currentColor; }
        #btn-switch-ada svg circle[fill] { fill: currentColor; stroke: none; }

        /* Fullscreen Toggle — Standard mode: sits left of the ADA switcher,
           same row, icon-only square button matching the HUD button style. */
        #btn-fullscreen-toggle {
            position: fixed; top: 20px; right: 658px; z-index: 1100;
            width: 50px; height: 50px;
            background: rgba(10, 15, 30, 0.96);
            border: 2px solid var(--secondary-color); color: var(--ada-btn-text);
            border-radius: 12px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            transition: background 0.2s, color 0.2s; backdrop-filter: blur(10px);
        }
        #btn-fullscreen-toggle:hover { background: var(--secondary-color); color: var(--secondary-text); }

        /* Mobile motion-toggle — matches the fullscreen button's visual
           style (that styling lives entirely on #btn-fullscreen-toggle's
           own ID rule, not the shared class, so this needs its own copy).
           Hidden by default; only shown on phone (see the phone media
           query below), where it replaces the fullscreen button in the
           same position. is-stopped (rotation currently off) gets a red
           border so the state is visible at a glance, not just via the
           swapped icon. */
        #btn-mobile-motion-toggle {
            display: none;
            position: fixed; top: 20px; right: 658px; z-index: 1100;
            width: 50px; height: 50px;
            background: rgba(10, 15, 30, 0.96);
            border: 2px solid var(--secondary-color); color: var(--ada-btn-text);
            border-radius: 12px; align-items: center; justify-content: center;
            cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            transition: background 0.2s, color 0.2s, border-color 0.2s; backdrop-filter: blur(10px);
        }
        #btn-mobile-motion-toggle.is-stopped { border-color: #dc3545; }
        #btn-mobile-motion-toggle:hover { background: var(--secondary-color); color: var(--secondary-text); }

        /* Sidebar HUD */
        #standard-viewer .sidebar {
            position: absolute;
            top: 20px; right: 20px; bottom: 20px;
            width: 440px;
            background: var(--sidebar-bg-raw);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 28px;
            z-index: 900;
            display: flex; flex-direction: column;
            box-shadow: -15px 0 35px rgba(0, 0, 0, 0.4);
            transition: opacity 0.3s, visibility 0.3s;
            font-family: 'Outfit', sans-serif;
        }

        #standard-viewer .sidebar-identity-row {
            padding: 1.1rem 1.5rem 0.75rem; 
            border-bottom: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.02);
            display: none;
        }
        #standard-viewer .identity-text h2 { font-size: 1.3rem; color: var(--sidebar-text); font-weight: 800; margin-bottom: 4px; line-height: 1; }
        #standard-viewer .identity-text p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.3; margin: 0; }

        /* Accessibility bar — Auto Scene Rotation toggle (on/checked by
           default) plus the relocated keyboard-shortcuts button. Negative
           margin cancels .pane's 1.5rem side padding to bleed the bar to
           the sidebar's true edges; the bar's own padding keeps its
           content aligned with everything else in the pane.

           Background uses --footer-btn-bg/--footer-btn-text (the same
           formula behind "Schedule Tour" and the keyboard-shortcut key
           boxes) rather than --secondary-color/--secondary-text — using
           the bar's own secondary color for both the fill AND the native
           checkbox focus ring meant the ring could disappear into it
           entirely when the two happened to be close. footer-btn-bg is
           deliberately derived to sit apart from the surrounding chrome
           (AAA-contrast against its own paired text), so the ring reads
           clearly against it regardless of what the tour's secondary
           color happens to be. The "Keyboard Instructions" pill still
           uses secondary-color/secondary-text — that pairing is exactly
           what it needs (a solid color pulled from the brand, contrasted
           correctly against whichever of black/white reads best on it),
           and it stands out precisely because it's a different color
           family from the bar underneath it, not despite it. */
        #standard-viewer #std-motion-toggle-row {
            display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
            margin: 0.75rem -1.5rem 0.75rem; padding: 0.65rem 1.5rem;
            background: var(--footer-btn-bg); color: var(--footer-btn-text);
        }
        #standard-viewer .motion-bar-icon { flex-shrink: 0; color: var(--footer-btn-text); }
        #standard-viewer #std-motion-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--footer-btn-text); cursor: pointer; }
        #standard-viewer #std-motion-toggle-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--footer-btn-text); cursor: pointer; flex-shrink: 0; }
        /* A real pop of the tour's actual secondary/accent color against
           the more muted footer-tone bar underneath it — background is
           --secondary-color directly, with --secondary-text (the same
           auto black/white contrast pick used everywhere else
           secondary-color needs readable text on top of it) for the
           label. flex-shrink:0 alone wasn't enough to stop the button
           from being squeezed narrower than its own label at tight
           sidebar widths — width/min-width: max-content forces it to
           always size to its actual content, and flex-wrap on the row
           (above) means if there's truly no room left on the line, the
           whole button drops to its own row instead of overflowing. */
        #standard-viewer .motion-bar-help-btn {
            margin-left: auto; flex-shrink: 0; white-space: nowrap; width: auto; min-width: max-content;
            display: flex; align-items: center; gap: 6px;
            background: var(--secondary-color); border: 1px solid var(--secondary-color); border-radius: 999px;
            color: var(--secondary-text); font-size: 0.68rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.3px;
            padding: 6px 14px; cursor: pointer; font-family: 'Outfit', sans-serif;
            transition: opacity 0.15s;
        }
        #standard-viewer .motion-bar-help-btn svg { flex-shrink: 0; }
        #standard-viewer .motion-bar-help-btn:hover {
            opacity: 0.82;
        }
       

        /* Navigation Tabs */
        #standard-viewer .tab-nav { display: flex; background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.1); border-radius: 28px 28px 0 0; }
        #standard-viewer .tab-btn { flex: 1; padding: 1.25rem 1rem; background: none; border: none; color: var(--tab-inactive-text, #fff); font-size: 0.85rem; font-weight: 800; text-transform: uppercase; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: 0.3s; font-family: 'Outfit', sans-serif; }
        #standard-viewer .tab-btn.active { background: var(--footer-btn-bg); color: var(--footer-btn-text); }
        /* Matches .tab-nav's own top corners exactly — :first-child/:last-child
           are DOM-position selectors, not visual ones, so these stay correct
           regardless of whether the Map tab (the DOM's middle child) happens
           to be display:none at the current breakpoint. Rounding the tab's
           own corners instead of clipping the whole row with overflow:hidden
           (tried and reverted) avoids that approach's side effect: any tab
           label taller than the row's own computed height was getting its
           text cut off rather than just its background corner. */
        #standard-viewer .tab-btn.active:first-child { border-radius: 28px 0 0 0; }
        #standard-viewer .tab-btn.active:last-child { border-radius: 0 28px 0 0; }
        #standard-viewer .tab-btn small { font-size: 0.55rem; color: var(--label-accent); font-weight: 600; }
        #standard-viewer .tab-btn.active small { color: var(--footer-btn-text); }
        /* The base .tab-btn:focus rule above casts a 15px glow box-shadow —
           subtle against the old thin-bottom-border active state, but a
           loud, detached-looking "halo" now that .active has a solid fill.
           autoFocusHUD() focuses this exact tab after every single scene
           load, so this isn't an edge case — keeping the crisp two-tone
           ring (white outline + black inner band) for a visible focus
           indicator, dropping just the glow. */
        #standard-viewer .tab-btn.active:focus {
            box-shadow: inset 0 0 0 6px #000 !important;
        }

        #standard-viewer .main-content { flex-grow: 1; overflow-y: auto; overflow-x: hidden; background: var(--sidebar-bg); }
        #standard-viewer .pane { padding: 1.5rem; display: none; }
        #standard-viewer .pane.active { display: block; }

        /* "Read a detailed description" link-button in the scene info block.
           Shrunk from full-width to sit side-by-side with the new "Jump to
           Hotspots" shortcut below — min-height stays at 44px (WCAG's
           recommended minimum touch target) even though the button reads
           visually smaller now. */
        #scene-info-actions {
            display: flex;
            align-items: stretch;
            gap: 8px;
            margin-top: 12px;
        }
        #btn-read-description {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            flex: 1;
            padding: 10px 14px;
            min-height: 44px;
            background: none;
            border: 2px solid var(--secondary-color);
            border-radius: 8px;
            color: var(--sidebar-text);
            font-family: 'Outfit', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
            line-height: 1.2;
        }
        #btn-read-description:hover,
        #btn-read-description:focus-visible {
            background: var(--secondary-color);
            color: var(--secondary-text);
            outline: none;
        }
        #btn-read-description svg { flex-shrink: 0; width: 14px; height: 14px; }
        /* Square-ish icon button — aria-label carries the meaning for screen
           readers; the animated tooltip below is the visual equivalent for
           sighted mouse/keyboard users, so it stays compact instead of
           competing for row width with "Read a detailed description" next
           to it. Height is intentionally NOT fixed here — align-items:stretch
           on the row (above) makes it match "Read a detailed description"'s
           actual rendered height exactly, whatever that happens to be,
           instead of two independently-guessed pixel values that could drift
           apart the moment either button's content changes.
           #standard-viewer prefix matters here: the shared .hotspot-jump base
           rule is scoped the same way (#standard-viewer .hotspot-jump), giving
           it higher specificity (1 ID + 1 class) than a bare ID selector alone
           would have — its padding:10px 18px was silently winning over this
           rule's padding:0, ballooning the button outward to fit the icon.
           #btn-scene-help no longer belongs in this rule — it moved out of
           scene-info-actions onto the accessibility bar and is now a text
           pill (.motion-bar-help-btn), not a 48px icon square, so forcing
           width:48px/padding:0 on it here was silently overriding that
           button's own padding no matter what was set there. */
        #standard-viewer #btn-jump-hotspots-scene {
            position: relative;
            flex: 0 0 48px;
            width: 48px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Custom animated tooltip — a plain title="" attribute can't be styled
           or animated, so this replaces it. Shown on :hover AND :focus-visible
           (not hover alone) so keyboard-only sighted users get the same visual
           cue a mouse user does, not just screen reader users via aria-label.
           aria-hidden since aria-label on the button already covers AT users;
           without it, this text would be announced a second time.
           Anchored to the button's RIGHT edge rather than centered: this button
           is the rightmost element in its row, right up against the sidebar's
           padded edge — a centered tooltip would poke past that edge and force
           a horizontal scrollbar on the sidebar (overflow-x:hidden above stops
           the scrollbar, but the tooltip would still get clipped mid-word).
           Anchoring right and growing leftward keeps it fully inside instead. */
        .hotspot-jump-tooltip {
            position: absolute;
            bottom: calc(100% + 10px);
            right: 0;
            transform: translateY(6px) scale(0.9);
            transform-origin: bottom right;
            background: rgba(0,0,0,0.9);
            color: #fff;
            font-family: 'Outfit', sans-serif;
            font-size: 12px;
            font-weight: 600;
            text-transform: none;
            letter-spacing: normal;
            white-space: nowrap;
            padding: 7px 12px;
            border-radius: 6px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.45);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 20;
            transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s;
        }
        .hotspot-jump-tooltip::before {
            content: '';
            position: absolute;
            top: 100%;
            right: 14px;
            border: 5px solid transparent;
            border-top-color: rgba(0,0,0,0.9);
        }
        #btn-jump-hotspots-scene:hover .hotspot-jump-tooltip,
        #btn-jump-hotspots-scene:focus-visible .hotspot-jump-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        /* Keyboard shortcuts help popup */
        /* Uses --brand-secondary, not --secondary-color — this popup sits
           outside #standard-viewer in the DOM (a sibling, not a descendant),
           and --secondary-color is scoped to #standard-viewer's own selector
           block, so it never resolves here — an unresolved variable
           invalidates the entire border declaration, not just the color,
           which is also why this had no visible border at all before.
           --brand-secondary is defined at :root (genuinely global) and kept
           in sync with this tour's actual secondary color by
           applyStandardBrandColors(), so this now correctly matches whatever
           color each individual tour is branded with, not one fixed color
           that would only happen to look right for this specific tour. */
        #scene-help-popup {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 40px);
            max-width: 420px;
            background: rgba(0,0,0,0.95);
            color: #fff;
            padding: 20px 44px 20px 20px;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.6);
            z-index: 2200;
            border: 2px solid var(--brand-secondary);
        }
        #scene-help-popup-text {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.6;
            font-family: 'Outfit', sans-serif;
        }
        #scene-help-popup-close {
            position: absolute;
            top: 6px;
            right: 10px;
            background: none;
            border: none;
            color: #fff;
            font-size: 1.8rem;
            line-height: 1;
            cursor: pointer;
            padding: 6px 10px;
        }
        /* Uses --brand-secondary — same reason as the popup container's rule
           above: this element sits outside #standard-viewer in the DOM, so
           --secondary-color never resolves here, but --brand-secondary
           (defined at :root) does, and stays in sync with this tour's actual
           branding rather than one color that would only suit this tour. */
        #scene-help-popup-close:hover {
            color: var(--brand-secondary);
        }
        /* Plain :focus, not :focus-visible — this button receives focus via
           the keydown-triggered focus trap above, and the whole sequence
           usually starts with a mouse click on the "?" button that opened
           the popup, so :focus-visible is likely suppressed here the same
           way it was for the popup container itself. Same fixed white/black
           two-tone ring as every other focus rule in this file — the popup
           background is near-black, so the white outline is the visible band
           here. */
        #scene-help-popup-close:focus {
            color: var(--brand-secondary);
            outline: 3px solid #fff !important;
            outline-offset: 3px !important;
            box-shadow: 0 0 0 3px #000 !important;
        }
        /* Uses --brand-secondary for the glow (not --secondary-color): this
           popup sits outside #standard-viewer in the DOM as a sibling, not a
           descendant, so --secondary-color, which is scoped to that element,
           never resolves here — and an unresolved variable invalidates the
           whole declaration it's used in, not just that one value.
           Plain :focus, not :focus-visible — same fix as the hotspot and tab-
           button rules elsewhere in this file. This popup opens via a mouse
           click on the "?" button, and most browsers suppress :focus-visible
           for a programmatic .focus() call that immediately follows a mouse
           interaction, even though that focus call has nothing to do with the
           click itself. The two-tone ring (3px black band hugging the popup,
           3px white outline just beyond it) sits outside the popup's own 2px
           border, so it stays a distinct ring instead of nearly overlapping
           that border. */
        #scene-help-popup:focus {
            outline: 3px solid #fff !important;
            outline-offset: 3px !important;
            box-shadow: 0 0 0 3px #000, 0 0 15px var(--brand-secondary) !important;
        }

        /* Accordion Style */
		#standard-viewer .sidebar-group-header { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--sidebar-text); margin: 1.5rem 0 0.5rem 0.5rem; }
        #standard-viewer .building-group { margin-bottom: 8px; border-radius: 12px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); overflow: hidden; }
        #standard-viewer .building-trigger { width: 100%; padding: 1rem 1.25rem; background: transparent; border: none; color: var(--sidebar-text); text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: 'Outfit', sans-serif;}
        #standard-viewer .building-trigger h3 { font-size: 0.95rem; font-weight: 700; margin: 0; }
        #standard-viewer .building-group.active .sub-view-tray { display: block; }
        #standard-viewer .building-group.active .building-trigger { background: var(--secondary-color); color: var(--secondary-text); }
        #standard-viewer .sub-view-tray { display: none; background: rgba(0,0,0,0.2); padding: 0.5rem 0 1rem; }
        #standard-viewer .view-link { width: 88%; margin: 0.4rem auto; padding: 0.75rem 1rem; display: block; background: var(--sidebar-bg-muted); border-radius: 8px; color: var(--sidebar-bg-muted-text); text-decoration: none; font-size: 0.85rem; cursor: pointer; border: 1px solid rgba(255,255,255,0.1); text-align: left; font-family: 'Outfit', sans-serif;}
        /* A "current" scene link — whether it's a sibling inside an open
           tray or a single-scene-group's own trigger — now matches the same
           solid secondary-color fill as an active accordion header, so
           "this is where you are" always looks the same regardless of
           which of the three link types it happens to be. */
        #standard-viewer .view-link.current { background: var(--secondary-color); color: var(--secondary-text); border-color: var(--secondary-color); font-weight: 700; }
      
        /* "You Are Here" badge — floats right in the active link. float:right
           is dropped for a flex item (a single-scene-group's .building-
           trigger.view-link), where it instead just becomes the second flex
           child and lands on the right via that button's existing
           justify-content:space-between — so one rule covers both the
           plain block .view-link case and the flex .building-trigger case. */
        #standard-viewer .yah-badge { float: right; width: 20px; height: 20px; object-fit: contain; margin-left: 8px; }
        /* A span.yah-badge is the 📍 text fallback (no custom icon
           configured) — width/height/object-fit above are img-only
           concerns, so a plain emoji character needs its own sizing
           instead of being squashed into a 20x20 box meant for an image. */
        #standard-viewer span.yah-badge { width: auto; height: auto; font-size: 1rem; line-height: 1; }
        /* Single-scene-group cards put .building-trigger AND .view-link on
           the same <button> (card look + scene-link click/current-state
           behavior at once). Both classes have equal specificity, so without
           this, whichever rule happened to appear later in the file would
           silently win and the button could end up looking like a tray
           pill instead of a card. These compound selectors pin the intended
           look regardless of source order: full building-trigger card by
           default, solid secondary-color fill when this scene is active —
           the same "selected" look a real multi-scene accordion gets.
           display/justify-content/align-items must be re-declared here too,
           not just the visual properties — .view-link's display:block came
           later in the file and was silently winning the tie over
           .building-trigger's display:flex, which collapsed the h3 to a
           full-width block line and pushed the floated .yah-badge onto its
           own line below instead of sitting beside it. */
        #standard-viewer .building-trigger.view-link { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; padding: 1rem 1.25rem; background: transparent; border: none; border-radius: 0; text-align: left; color: var(--sidebar-text); }
        #standard-viewer .building-group.active .building-trigger.view-link { background: var(--secondary-color); color: var(--secondary-text); }
		
		/* Sidebar hotspot focus list */
		#standard-viewer .hs-focus-list { list-style: none; margin: 0; padding: 0 0 0.5rem 0; }
		#standard-viewer .hs-focus-item { width: 84%; margin: 0.25rem auto; }
		#standard-viewer .hs-focus-btn {
			width: 100%; padding: 0.5rem 0.9rem; display: flex; align-items: center; gap: 8px;
			background: var(--hotspot-btn-bg); border: 1px solid rgba(255,255,255,0.15);
			border-radius: 6px; color: var(--sidebar-bg-text); font-size: 0.78rem; cursor: pointer;
			text-align: left; font-family: 'Outfit', sans-serif; transition: background 0.15s;
		}
		#standard-viewer .hs-focus-btn:hover,
		#standard-viewer .hs-focus-btn:focus,
		#standard-viewer .hs-focus-btn:focus-visible {
			background: var(--sidebar-bg);
			border-color: var(--secondary-color); color: var(--sidebar-bg-text); outline: none;
		}
		#standard-viewer .hs-focus-icon { font-size: 0.8rem; flex-shrink: 0; opacity: 0.7; }

        /* Director's Cut Narrative Styles */
        #standard-viewer .access-suite-welcome { display: flex; flex-direction: column; gap: 1.5rem; animation: fadeIn 0.6s ease-out; }
        #standard-viewer .suite-header { border-left: 3px solid var(--sidebar-bg-muted); padding-left: 1rem; margin-bottom: 0.5rem; }
        #standard-viewer .suite-header h2 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; color: var(--sidebar-text); margin: 0; }
        #standard-viewer .suite-header p { font-size: 0.85rem; color: var(--text-white); margin-top: 4px; font-weight: 300; }
        #standard-viewer .feature-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
        #standard-viewer .feature-card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-light); border-radius: 16px; padding: 1.25rem; display: flex; align-items: flex-start; gap: 15px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #standard-viewer .feature-card:hover { background: rgba(251, 191, 36, 0.05); border-color: rgba(251, 191, 36, 0.3); transform: translateX(5px); }
        #standard-viewer .feature-icon { width: 36px; height: 36px; background: var(--sidebar-bg-muted); border: 1px solid var(--sidebar-bg-muted); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 10px color-mix(in srgb, var(--sidebar-bg-muted) 50%, transparent); }
        #standard-viewer .feature-icon svg { width: 20px; height: 20px; fill: var(--sidebar-bg-muted-text); }
        #standard-viewer .feature-info h3 { font-size: 0.85rem; color: var(--sidebar-text); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 4px 0; }
        #standard-viewer .feature-info p { font-size: 0.75rem; line-height: 1.5; color: var(--text-ada); margin: 0; }
        #standard-viewer .status-pulse { display: inline-block; width: 8px; height: 8px; background: var(--sidebar-bg-muted); border-radius: 50%; margin-right: 8px; box-shadow: 0 0 8px var(--sidebar-bg-muted); animation: pulseGlow 2s infinite; }
        
        #standard-viewer .narrative-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
        /* .doc-icon now sits inside a .feature-icon chip (see narrative-header
           markup) — sizing and fill come from .feature-icon svg, matching the
           SPATIAL NARRATIVES / CLOCKWISE LOGIC / HAPTIC CONSOLE icons below it
           instead of a bare muted-blue icon with no background behind it. */
        #standard-viewer .narrative-text { display: block; line-height: 1.8; color: var(--text-ada); font-style: italic; font-size: 0.95rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-light); border-radius: 16px; padding: 1.25rem; }

        #standard-viewer .btn-narrative-ctrl { flex: 1; background: none; border: 1px solid var(--border-light); color: var(--text-ada); padding: 10px 8px; border-radius: 8px; font-size: 0.65rem; font-weight: 800; cursor: pointer; text-transform: uppercase; transition: 0.2s; font-family: 'Outfit', sans-serif; text-align: center; }
        #standard-viewer .btn-narrative-ctrl:hover { background: rgba(255,255,255,0.05); color: #fff; }

        /* Back to Tour — secondary color bg, auto contrast text */
        #standard-viewer #btn-back-suite {
            background: var(--secondary-color);
            border-color: var(--secondary-color);
            color: var(--secondary-text);
        }
        #standard-viewer #btn-back-suite:hover {
            filter: brightness(1.1);
        }

        /* Prev / Next — same treatment as Schedule Tour, for visual consistency */
        #standard-viewer #btn-narrative-prev,
        #standard-viewer #btn-narrative-next {
            background: var(--footer-btn-bg);
            border-color: var(--footer-btn-bg);
            color: var(--footer-btn-text);
        }
        #standard-viewer #btn-narrative-prev:hover,
        #standard-viewer #btn-narrative-next:hover {
            filter: brightness(1.1);
        }

        @keyframes pulseGlow { 0% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.4; transform: scale(1); } }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Footer Console */
        #standard-viewer .sidebar-footer { padding: 1.5rem; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.1); border-radius: 0 0 28px 28px; }
        #standard-viewer .action-suite { display: flex; gap: 8px; margin-bottom: 1.5rem; }
        #standard-viewer .btn-cta { flex: 1; padding: 0.85rem; border-radius: 8px; font-weight: 800; font-size: 0.7rem; text-transform: uppercase; text-decoration: none; text-align: center; transition: 0.2s; font-family: 'Outfit', sans-serif;}
        #standard-viewer .btn-apply { background: var(--secondary-color); color: var(--secondary-text); }
        #standard-viewer .btn-tour { background: var(--footer-btn-bg); color: var(--footer-btn-text); border: 1px solid rgba(255,255,255,0.1); }
        #standard-viewer .btn-cta:hover { transform: translateY(-2px); filter: brightness(1.1); }
        
        #standard-viewer .shortcut-dashboard { display: flex; justify-content: space-between; background: rgba(255,255,255,0.03); border: 1px solid var(--border-light); border-radius: 12px; padding: 0.75rem; margin-bottom: 1.5rem; }
        #standard-viewer .shortcut-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
        #standard-viewer .shortcut-item span { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; font-weight: 600; }
        #standard-viewer .shortcut-item b { font-size: 0.8rem; color: var(--footer-btn-text); background: var(--footer-btn-bg); padding: 5px 10px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); transition: 0.1s; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
        #standard-viewer .shortcut-item b.active-key { color: var(--secondary-text); background: var(--secondary-color); transform: scale(1.1); box-shadow: 0 0 10px var(--secondary-color); border-color: var(--secondary-color); }
        
        #standard-viewer .footer-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
        #standard-viewer .phone-block { display: flex; flex-direction: row; align-items: baseline; gap: 5px; }
        /* Stacks the Phone and Website rows vertically as their own unit —
           there isn't room to show both side by side without their values
           running into each other once both are set, and this also makes
           the pair a SINGLE flex item in .footer-row instead of two,
           freeing up width every other footer-row item was competing for.
           Naturally collapses to nothing if both rows are hidden (neither
           phone nor website is set) — no separate empty-state CSS needed. */
        #standard-viewer #hud-contact-stack { display: flex; flex-direction: column; gap: 3px; }
        /* .solo — applied by JS when only ONE of phone/website is actually
           set: reverts that single row to the original spacious,
           label-above-value, centered look (a lone compact inline row
           looked noticeably sparse). Only relevant while it's the sole
           occupant of #hud-contact-stack, so centering it doesn't fight
           the stack's own layout. */
        #standard-viewer .phone-block.solo { flex-direction: column; align-items: center; text-align: center; gap: 2px; }
        #standard-viewer .phone-label { font-size: 0.75rem; font-weight: 800; color: var(--label-accent); text-transform: uppercase; letter-spacing: 1px;}
        #standard-viewer .footer-phone { font-size: 0.85rem; font-weight: 800; color: var(--text-white); text-decoration: none; }
        #standard-viewer .hotspot-jump { background: var(--secondary-color); color: var(--secondary-text); border: none; padding: 10px 18px; border-radius: 8px; font-weight: 800; font-size: 0.7rem; cursor: pointer; text-transform: uppercase; transition: 0.2s; font-family: 'Outfit', sans-serif;}
        #standard-viewer .hotspot-jump:hover { transform: translateY(-2px); }
        #standard-viewer .copyright-row { font-size: 0.75rem; color: var(--text-ada); text-transform: uppercase; letter-spacing: 1px; line-height: 1.5; }

        /* Footer home button — genuinely inside #standard-viewer (unlike the
           Help/media popups, which attach to document.body as siblings), so
           the scoped --secondary-color variable resolves correctly here
           directly, no global fallback needed. */
        #standard-viewer #btn-footer-home:hover {
            background: rgba(255,255,255,0.1);
        }
        #standard-viewer #btn-footer-home:focus {
            outline: 3px solid #fff !important;
            outline-offset: 3px !important;
            box-shadow: 0 0 0 3px #000, 0 0 15px var(--secondary-color) !important;
        }

        /* ── Map Tab Pane ─────────────────────────────────────────────────── */
        #standard-viewer #tab-map-pane { padding: 1.25rem; }

        #std-map-container {
            position: relative;
            width: 100%;
            background: #111;
            line-height: 0;
            /* overflow:visible so YAH dot pulse ring isn't clipped at edges */
        }
        #std-map-img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 12px;
        }
        #std-map-markers {
            position: absolute;
            inset: 0;
            pointer-events: none; /* layer itself passes through; children override */
        }

        /* YAH dot reused from shared CSS but scoped */
        #std-map-yah-dot {
            position: absolute;
            width: 14px;
            height: 14px;
            background: #28a745;
            border: 2px solid #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px rgba(40,167,69,0.8);
            pointer-events: none;
            z-index: 10;
        }
        #std-map-yah-dot::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 2px solid #28a745;
            border-radius: 50%;
            animation: stdYahPulse 1.5s infinite;
            opacity: 0;
        }
        @keyframes stdYahPulse {
            0%   { transform: scale(0.5); opacity: 1; }
            100% { transform: scale(2.5); opacity: 0; }
        }
        /* Fullscreen-only YAH bounce — keeps the base translate intact */
        @keyframes fsYahIconBounce {
            0%, 100% { transform: translate(-50%, -100%) translateY(0);    }
            50%       { transform: translate(-50%, -100%) translateY(-9px); }
        }
        @keyframes fsYahDotBounce {
            0%, 100% { transform: translate(-50%, -50%) translateY(0);    }
            50%       { transform: translate(-50%, -50%) translateY(-9px); }
        }
        #std-map-yah-icon {
            position: absolute;
            width: 34px;
            height: 34px;
            object-fit: contain;
            transform: translate(-50%, -100%);
            pointer-events: none;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
            z-index: 10;
        }

        .std-map-nav-dot {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #00e676;
            border: 2px solid #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 8px rgba(0,230,118,0.9);
            pointer-events: auto;
            cursor: pointer;
            z-index: 5;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .std-map-nav-dot:hover { transform: translate(-50%,-50%) scale(1.4); box-shadow: 0 0 14px rgba(0,230,118,1); }
        /* Applied when a scene has its own custom marker icon
           (map_marker_icon_id) instead of the default plain dot — the img
           child provides the visual, so the dot's own background/border/
           glow need to get out of the way rather than showing behind it. */
        .std-map-nav-dot.has-custom-icon {
            background: none;
            border: none;
            box-shadow: none;
            border-radius: 0;
        }
        .std-map-nav-dot.has-custom-icon:hover { box-shadow: none; }
        .std-map-nav-dot .marker-icon-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;
        }
        .std-map-nav-dot .hs-live-tooltip {
            position: absolute;
            bottom: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.85);
            color: #fff;
            font-size: 11px;
            font-family: 'Outfit', sans-serif;
            white-space: nowrap;
            padding: 4px 8px;
            border-radius: 6px;
            pointer-events: none;
            display: none !important;
            line-height: 1.3;
        }
        .std-map-nav-dot:hover .hs-live-tooltip { display: block !important; }

        #std-map-btn-row {
            display: flex;
            gap: 8px;
            margin-top: 10px;
        }
        #std-map-fs-btn,
        #std-map-back-btn {
            flex: 1;
            padding: 10px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 10px;
            color: var(--text-muted);
            font-family: 'Outfit', sans-serif;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }
        #std-map-fs-btn:hover,
        #std-map-back-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

        #std-fs-map-container {
            position: relative;
            max-width: 100%;
            max-height: 100%;
            line-height: 0;
        }
        #std-fs-map-img {
            max-width: 100%;
            max-height: calc(100vh - 100px);
            max-height: calc(100dvh - 100px);
            object-fit: contain;
            display: block;
            border-radius: 8px;
        }
        #std-fs-map-markers {
            position: absolute;
            inset: 0;
        }
        /* Fullscreen nav dots */
        #std-fs-map-markers .std-map-nav-dot {
            width: 24px;
            height: 24px;
        }
        /* Fullscreen YAH icon */
        #std-fs-yah-icon {
            position: absolute;
            width: 44px;
            height: 44px;
            object-fit: contain;
            transform: translate(-50%, -100%);
            pointer-events: none;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
            z-index: 10;
            animation: fsYahIconBounce 1.4s ease-in-out infinite;
        }
        #std-fs-yah-dot {
            position: absolute;
            width: 22px;
            height: 22px;
            background: #28a745;
            border: 3px solid #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 14px rgba(40,167,69,0.9);
            pointer-events: none;
            z-index: 10;
            animation: fsYahDotBounce 1.4s ease-in-out infinite;
        }
        #std-fs-yah-dot::after {
            content: '';
            position: absolute;
            inset: -5px;
            border: 2px solid #28a745;
            border-radius: 50%;
            animation: stdYahPulse 1.5s infinite;
            opacity: 0;
        }

        /* Map Tab button — hidden by default (desktop); phone/tablet show it
           when the current scene actually has a map (see updateMapPane()
           in client_view.php, which sets/clears an inline display style).
           No !important here or on the phone/tablet media query rules below
           — inline styles need to be able to win either way. */
        #standard-viewer #tab-btn-map { display: none; }

        /* Mobile map button */
        #mob-map-btn {
            flex: 1; height: 44px;
            background: rgba(10, 15, 30, 0.85);
            border: 1px solid var(--secondary-color);
            border-radius: 10px;
            color: var(--map-ui-text, var(--secondary-color));
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            font-size: 0.75rem;
            text-transform: uppercase;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            backdrop-filter: blur(10px);
            transition: 0.1s;
        }
        #mob-map-btn:active { background: var(--secondary-color); color: var(--secondary-text); }

        /* Sticky mobile control bar & expandable description */
        #standard-viewer .mobile-bottom-bar {
            display: none; flex-direction: column; gap: 6px;
            position: fixed; bottom: 15px; left: 15px; right: 15px; z-index: 950;
        }
        
        #standard-viewer .mob-scene-info-wrap {
            display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 8px;
        }
        #standard-viewer .mob-scene-title-badge {
            background: rgba(10, 15, 30, 0.85); border: 1px solid var(--border-light); border-radius: 12px;
            color: var(--mob-scene-badge-text, var(--secondary-color)); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.85rem;
            padding: 10px 16px; text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            display: flex; align-items: center; justify-content: center; gap: 8px;
            max-width: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.5); cursor: default;
        }
        #standard-viewer .mob-scene-title-badge.has-desc { cursor: pointer; }
        #standard-viewer .mob-scene-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: 1px;}
        #standard-viewer .mob-scene-desc-content {
            background: rgba(10, 15, 30, 0.95); border: 1px solid var(--border-light); border-radius: 12px;
            color: var(--text-ada); font-family: 'Outfit', sans-serif; font-size: 0.85rem; line-height: 1.5;
            padding: 12px; margin-top: 6px; width: 100%; display: none; backdrop-filter: blur(10px);
            text-align: left; max-height: 30vh; overflow-y: auto;
        }
        #standard-viewer .mob-scene-desc-content.open { display: block; animation: fadeIn 0.2s ease-out; }

        #standard-viewer .mob-controls-row { display: flex; gap: 6px; justify-content: space-between; }
        #standard-viewer .mob-btn {
            flex: 1; height: 44px; min-width: 44px;
            background: var(--glass); border: 1px solid var(--border-light); border-radius: 10px;
            color: #fff; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.75rem; text-transform: uppercase;
            display: flex; align-items: center; justify-content: center;
            backdrop-filter: blur(10px); cursor: pointer; transition: 0.1s; outline: none;
        }
        #standard-viewer .mob-btn:active { background: var(--secondary-color); color: var(--secondary-text); border-color: var(--secondary-color); }
        #standard-viewer .mob-icon-btn { flex: 0 0 44px; font-size: 1.2rem; }

        /* ── High-contrast mobile action buttons ─────────────────────────────
           Solid opaque backgrounds so these are readable on bright/light scenes.
           !important needed to beat backdrop-filter + .mob-btn class specificity. */
        #standard-viewer #mob-tab-hs {
            background: var(--secondary-color) !important;
            color: var(--secondary-text) !important;
            border-color: var(--secondary-color) !important;
            backdrop-filter: none !important;
        }
        #standard-viewer #mob-tab-hs:active {
            filter: brightness(1.15);
        }
        #standard-viewer #mob-enter-hs {
            background: var(--sidebar-bg-muted) !important;
            color: var(--sidebar-bg-muted-text) !important;
            border-color: var(--sidebar-bg-muted) !important;
            backdrop-filter: none !important;
        }
        #standard-viewer #mob-map-btn {
            background: rgba(10, 15, 30, 0.92) !important;
            color: var(--map-ui-text, var(--secondary-color)) !important;
            border: 1px solid var(--secondary-color) !important;
            backdrop-filter: none !important;
        }

        /* ── Mobile Prev / Next / Desc buttons ─────────────────────────────── */
        #standard-viewer #mob-prev-scene,
        #standard-viewer #mob-next-scene {
            background: var(--secondary-color) !important;
            border-color: var(--secondary-color) !important;
            color: var(--secondary-text) !important;
            backdrop-filter: none !important;
        }
        #standard-viewer #mob-desc-scene {
            background: var(--secondary-color) !important;
            border-color: var(--secondary-color) !important;
            color: var(--secondary-text) !important;
            backdrop-filter: none !important;
        }

        /* ── Sidebar "Did you know?" info block (narrative pane) ────────── */
        #mob-info-box {
            display: none; /* hidden from bottom bar — rendered in sidebar instead */
        }
        #sidebar-info-box {
            display: none;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.1);
            border-left: 3px solid var(--sidebar-bg-muted);
            border-radius: 12px;
            overflow: hidden;
            margin-top: 1.5rem;
            font-family: 'Outfit', sans-serif;
            animation: fadeIn 0.2s ease-out;
        }
        #sidebar-info-box-toggle {
            width: 100%;
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            text-align: left;
            font-family: 'Outfit', sans-serif;
        }
        #sidebar-info-box-toggle:hover { background: rgba(255,255,255,0.04); }
        #sidebar-info-box-icon {
            height: 22px;
            width: 22px;
            object-fit: contain;
            flex-shrink: 0;
            display: none;
        }
        #sidebar-info-box-heading {
            flex: 1;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #ffffff;
            margin: 0;
        }
        #sidebar-info-box-chevron {
            font-size: 13px;
            color: rgba(255,255,255,0.4);
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        #sidebar-info-box-body {
            padding: 0 14px 12px;
        }
        #sidebar-info-box-text {
            font-size: 0.8rem;
            color: var(--text-ada);
            line-height: 1.5;
            margin: 0;
            font-family: 'Outfit', sans-serif;
        }
        /* Sidebar info box: phone only — tablet+ uses the floating #std-info-box */
        @media (min-width: 768px) {
            #sidebar-info-box { display: none !important; }
        }
        /* On phone the sidebar is the only place this appears, so default open */
        @media (max-width: 767px) {
            #sidebar-info-box-body { display: block !important; }
        }
        
        /* ── Desktop Mini-Map Widget (bottom-left) ────────────────────────── */


        #std-mini-map-widget {
            position: fixed;
            bottom: 20px; left: 20px;
            width: 250px;
            background: rgba(10, 15, 30, 0.92);
            border: 1px solid var(--secondary-color);
            border-radius: 10px;
            z-index: 900;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.6);
            display: none; /* shown by updateMapWidget() */
            font-family: 'Outfit', sans-serif;
            backdrop-filter: blur(10px);
        }
        #std-mini-map-header {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 8px 12px;
            background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
            border: 0;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            font: inherit;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }
        #std-mini-map-header:focus-visible {
            outline: 2px solid #fff;
            outline-offset: -2px;
        }
        #std-mini-map-title {
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--map-ui-text, var(--secondary-color));
            flex: 1;
        }
        /* Shared by both map headers and (via the same setMapTitleIcon())
           kept visually uniform with the sidebar's active-scene badge — a
           plain 📍 character needs no sizing, but a configured icon image
           does, since its natural pixel dimensions would otherwise dwarf
           this small uppercase label. */
        .map-title-icon { display: inline-flex; vertical-align: middle; margin-right: 6px; }
        .map-title-icon img { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; }
        .yah-mark { display: inline-block; flex-shrink: 0; vertical-align: middle; }
        .yah-mark--dot {
            width: 14px; height: 14px; border-radius: 50%;
            background: var(--yah-color, #28a745);
            border: 2px solid #fff;
            box-shadow: 0 0 6px var(--yah-color, #28a745);
        }
        .yah-mark--pin { width: 12px; height: 16px; color: var(--yah-color, #28a745); }
        .yah-mark--pin svg { width: 100%; height: 100%; display: block; }
        .std-mini-map-icon { color: #fff; font-size: 14px; }
        #std-mini-map-body {
            position: relative;
            width: 100%;
            height: 180px;
            background: #111;
        }
        #std-mini-map-img {
            width: 100%; height: 100%;
            object-fit: contain;
            display: block;
            cursor: pointer;
        }
        #std-mini-yah-dot {
            position: absolute;
            width: 12px; height: 12px;
            background: #28a745;
            border: 2px solid #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px rgba(40,167,69,0.8);
            pointer-events: none;
            z-index: 2;
        }
        #std-mini-yah-dot::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 2px solid #28a745;
            border-radius: 50%;
            animation: stdMiniYahPulse 1.5s infinite;
            opacity: 0;
        }
        @keyframes stdMiniYahPulse {
            0%   { transform: scale(0.5); opacity: 1; }
            100% { transform: scale(2.5); opacity: 0; }
        }
        /* Hide mini-map widget on phone — map is in the sidebar tab instead */
        @media (max-width: 767px) {
            #std-mini-map-widget { display: none !important; }
            #standard-viewer #tab-btn-map { display: flex; }
        }

        /* ── Fullscreen Map Modal ─────────────────────────────────────────── */
        #std-fs-map-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 2000;
            background: rgba(0,0,0,0.95);
            flex-direction: column;
            backdrop-filter: blur(10px);
        }
        #std-fs-map-modal.active { display: flex; }
        #std-fs-map-header {
            display: flex;
            align-items: center;
            padding: 14px 20px;
            background: rgba(10,15,30,0.98);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        #std-fs-map-header-label {
            margin: 0;
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--map-ui-text, var(--secondary-color));
            flex: 1;
        }
        #std-fs-map-close {
            background: none; border: none; color: #fff;
            font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 0; width: auto;
        }
        #std-fs-map-body {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            overflow: hidden;
        }
        #std-fs-map-container {
            position: relative;
            max-width: 100%;
            max-height: 100%;
            line-height: 0;
        }
        #std-fs-map-img {
            max-width: 100%;
            max-height: calc(100vh - 80px);
            max-height: calc(100dvh - 80px);
            object-fit: contain;
            display: block;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 10px 40px rgba(0,0,0,0.8);
        }
        #std-fs-map-markers {
            position: absolute;
            inset: 0;
        }
        /* Fullscreen nav dots — larger */
        #std-fs-map-markers .std-map-nav-dot {
            width: 24px; height: 24px;
        }
        /* Fullscreen YAH elements */
        #std-fs-yah-dot {
            position: absolute;
            width: 24px; height: 24px;
            background: #28a745;
            border: 3px solid #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 15px rgba(40,167,69,0.9);
            pointer-events: none;
            z-index: 10;
        }
        #std-fs-yah-dot::after {
            content: '';
            position: absolute;
            inset: -5px;
            border: 2px solid #28a745;
            border-radius: 50%;
            animation: stdMiniYahPulse 1.5s infinite;
            opacity: 0;
        }
        #std-fs-yah-icon {
            position: absolute;
            width: 44px; height: 44px;
            object-fit: contain;
            transform: translate(-50%, -100%);
            pointer-events: none;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
            z-index: 10;
        }

        /* ── TABLET LANDSCAPE (768–1399px) ──────────────────────────────────
           Sidebar hidden (hamburger access), bottom-center rotate/zoom controls,
           floating info box bottom-right, mini-map bottom-left stays visible.
        ═══════════════════════════════════════════════════════════════════════ */
        @media (min-width: 768px) and (max-width: 1399px) {
            /* Sidebar: hidden by default, slides in via hamburger */
            #standard-viewer .sidebar {
                top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px;
                border-radius: 0; opacity: 0; visibility: hidden; z-index: 1000;
            }
            #standard-viewer .sidebar.mobile-open { opacity: 1; visibility: visible; }
			/* Flatten tabs and footer to sit flush in drawer mode -- both
			   have their own independent border-radius declarations
			   (28px 28px 0 0 on .tab-nav, 0 0 28px 28px on
			   .sidebar-footer) that the .sidebar-level reset above never
			   touches, since they're separate elements with their own
			   rules, not something inherited from the parent. */
            #standard-viewer .tab-nav,
            #standard-viewer .tab-btn.active:first-child,
            #standard-viewer .tab-btn.active:last-child,
            #standard-viewer .sidebar-footer { border-radius: 0; }
			
            #standard-viewer .sidebar-identity-row { display: block; padding-top: 1.1rem; padding-right: 11rem; }
            #standard-viewer .shortcut-dashboard { display: none !important; }

            /* Show hamburger + ADA button */
            #standard-viewer .main-menu-btn {
                display: flex; right: 15px; top: 15px; width: 44px; height: 44px; padding: 0;
            }
            #standard-viewer .main-menu-btn .desktop-text { display: none; }
            #standard-viewer .main-menu-btn .mobile-icon  { display: block; }
            #btn-switch-ada {
                top: 15px; right: 67px; width: 44px; height: 44px;
                padding: 0; justify-content: center;
            }
            #btn-switch-ada .desktop-text { display: none; }
            #btn-fullscreen-toggle {
                top: 15px; right: 119px; width: 44px; height: 44px;
            }

            /* Bottom bar: centered compact container, all rows */
            #standard-viewer .mobile-bottom-bar {
                display: flex;
                left: 50%;
                right: auto;
                transform: translateX(-50%);
                width: auto;
                min-width: 320px;
                max-width: 480px;
                bottom: 15px;
            }
            /* Show all control rows on tablet */
            #standard-viewer .mob-scene-info-wrap { display: none !important; }
            #standard-viewer .mob-controls-row { display: flex !important; }
            #standard-viewer #mob-rotate-zoom-row { display: flex !important; gap: 8px; }


            /* Info box: bottom-right, clear of the three button rows (~150px) */
            #std-info-box { right: 20px; bottom: 165px; max-width: 260px; }

            /* Mini-map widget replaced by the sidebar Map tab on tablet too
               now (same as phone) — see updateMapPane() in client_view.php. */
            #std-mini-map-widget { display: none !important; }

            /* Shown when the current scene has a map, hidden otherwise —
               see updateMapPane(). No !important so JS can override either way. */
            #standard-viewer #tab-btn-map { display: flex; }
			
			
        }

		 

        /* ── DESKTOP (≥ 1400px) ─────────────────────────────────────────────
           Persistent sidebar. Threshold raised from 1200→1400 so div-embedded
           tours in the 1200–1399px range get the tablet hamburger layout
           instead of a forced 440px sidebar.
        ═══════════════════════════════════════════════════════════════════════ */

        /* ── PHONE (< 768px) ────────────────────────────────────────────────
           Full bottom-bar: all buttons, scene title badge, etc.
        ═══════════════════════════════════════════════════════════════════════ */
        @media (max-width: 767px) {
            #standard-viewer .main-menu-btn {
                display: flex; right: 15px; top: 15px; width: 44px; height: 44px; padding: 0;
            }
            #standard-viewer .main-menu-btn .desktop-text { display: none; }
            #standard-viewer .main-menu-btn .mobile-icon  { display: block; }
            #btn-switch-ada {
                top: 15px; right: 67px; width: 44px; height: 44px; padding: 0; justify-content: center;
            }
            #btn-switch-ada .desktop-text { display: none; }
            /* True fullscreen is awkward on a phone browser anyway (address
               bar chrome, orientation quirks) — this spot is replaced here
               with a direct Auto Scene Rotation stop/resume toggle instead,
               so a visitor doesn't have to open the slide-out hamburger
               menu just to reach the sidebar's own checkbox for it. */
            #btn-fullscreen-toggle { display: none; }
            #btn-mobile-motion-toggle {
                display: flex; top: 15px; right: 119px; width: 44px; height: 44px;
            }
            #standard-viewer .sidebar {
                top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px;
                border-radius: 0; opacity: 0; visibility: hidden; z-index: 1000;
            }
            #standard-viewer .sidebar.mobile-open { opacity: 1; visibility: visible; }
			/* Flatten tabs and footer to sit flush in drawer mode -- see
			   the tablet-range block's own comment on why .sidebar-footer
			   needs its own explicit reset here too. */
			#standard-viewer .tab-nav,
            #standard-viewer .tab-btn.active:first-child,
            #standard-viewer .tab-btn.active:last-child,
            #standard-viewer .sidebar-footer { border-radius: 0; }
			
            #standard-viewer .sidebar-identity-row { display: block; padding-top: 1.1rem; padding-right: 11rem; }
            #standard-viewer .client-logo { top: 20px; left: 1.5rem; }
            #standard-viewer .shortcut-dashboard { display: none !important; }
            #standard-viewer .mobile-bottom-bar { display: flex; }
            #std-loading { z-index: 1100; }
        }


        /* ══════════════════════════════════════════════════════════════════
           SHORT VIEWPORTS (landscape phones, very high browser zoom)
           400% zoom on a desktop window is only ~256 CSS px tall. The identity
           row, tab bar and footer can't shrink below their content, but the
           scrolling pane (.main-content) can, so it was being squeezed to 0px
           and the tab content disappeared. Below this height the whole sidebar
           scrolls as one region instead, so nothing is hidden or unreachable.
           Taller viewports are unaffected.
        ══════════════════════════════════════════════════════════════════ */
        @media (max-height: 560px) {
            #standard-viewer .sidebar { overflow-y: auto; overflow-x: hidden; }
            #standard-viewer .main-content { flex: 0 0 auto; }
            /* Keep the bottom control bar from running up under the fixed top
               buttons (15px top + 44px high + 10px gap + 15px bottom margin). */
            #standard-viewer .mobile-bottom-bar {
                max-height: calc(100vh - 85px);
                max-height: calc(100dvh - 85px);
                overflow-y: auto;
            }
        }

        /* ══════════════════════════════════════════════════════════════════
           VERY NARROW VIEWPORTS (≤ 260px)
           iPhone Safari at 200–300% page zoom is ~195–130 CSS px wide (WCAG's
           reflow target is 320px; this is below that, but should still work).
           Everything stays reachable: controls stack instead of sitting side
           by side, and the bottom bar scrolls in a column to the left of the
           stacked top buttons instead of running underneath them.
        ══════════════════════════════════════════════════════════════════ */
        @media (max-width: 260px) {
            /* Fixed top buttons: one column down the right edge */
            #btn-switch-ada           { top: 67px;  right: 15px; }
            #btn-mobile-motion-toggle { top: 119px; right: 15px; }
            /* min-height clears the stacked top buttons (15px + 3 x 44px + 2 x 8px gap) so they don't sit over the tabs */
            #standard-viewer .sidebar-identity-row { padding-left: 0.75rem; padding-right: 4.5rem; min-height: 10.5rem; }
            #standard-viewer .identity-text h2 { font-size: 1rem; overflow-wrap: anywhere; hyphens: auto; }

            /* Brand mark top-left must not run under that column */
            #standard-viewer .client-logo { left: 10px; max-width: calc(100% - 80px); }
            #standard-viewer .client-logo img { max-width: 100%; height: auto; }
            #standard-viewer .client-logo .brand-name { font-size: 1rem; letter-spacing: -1px; }
            #standard-viewer .client-logo p { letter-spacing: 1px; }

            /* Sidebar content */
            #standard-viewer .tab-nav { flex-direction: column; }
            #standard-viewer .tab-btn { padding: 0.75rem; }
            #standard-viewer .pane { padding: 1rem 0.75rem; }
            #standard-viewer #std-motion-toggle-row { margin: 0.75rem -0.75rem; padding: 0.65rem 0.75rem; }
            #standard-viewer .motion-bar-help-btn { white-space: normal; min-width: 0; max-width: 100%; margin-left: 0; text-align: left; border-radius: 14px; padding: 6px 10px; overflow-wrap: anywhere; }
            #scene-info-actions, #std-map-btn-row { flex-wrap: wrap; }
            #standard-viewer #narrative-content > div[style*="display: flex"] { flex-wrap: wrap; }
            #standard-viewer .btn-narrative-ctrl { flex: 1 1 100%; }
            #standard-viewer .feature-card { flex-direction: column; padding: 0.75rem; gap: 8px; }
            #standard-viewer .narrative-text { padding: 0.75rem; }

            /* Footer */
            #standard-viewer .sidebar-footer { padding: 1rem 0.75rem; }
            #standard-viewer .action-suite { flex-direction: column; margin-bottom: 1rem; }
            #standard-viewer .footer-row { flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
            #standard-viewer #btn-jump-hotspots { width: 100%; }

            /* Bottom control bar: a scrolling column left of the stacked buttons */
            #standard-viewer .mobile-bottom-bar {
                left: 10px; right: 69px; bottom: 10px;
                /* leave the top ~125px for the brand mark and tagline */
                max-height: calc(100vh - 135px);
                max-height: calc(100dvh - 135px);
                overflow-y: auto;
            }
            #standard-viewer .mob-controls-row { flex-wrap: wrap; }
            #standard-viewer .mob-btn,
            #mob-map-btn { flex: 1 1 44px; min-width: 44px; overflow-wrap: anywhere; }
            #standard-viewer .mob-btn { font-size: 0.6rem; padding: 0 2px; }
            #standard-viewer .mob-icon-btn { flex: 1 1 44px; font-size: 1.2rem; }
        }

                /* ── Floating Info Box (lower-right, expandable) ─────────────────── */
        #std-info-box {
            position: fixed;
            bottom: 20px; right: 480px; /* desktop: clear of 440px sidebar + gap */
            max-width: 300px;
            min-width: 180px;
            background: rgba(20, 20, 28, 0.82);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.12);
            border-left: 3px solid var(--secondary-color);
            border-radius: 14px;
            z-index: 950;
            display: none;
            font-family: 'Outfit', sans-serif;
            box-shadow: 0 8px 30px rgba(0,0,0,0.4);
            animation: fadeIn 0.3s ease-out;
            overflow: hidden;

        }
        /* Tablet: no sidebar, so anchor to right edge */
        @media (min-width: 768px) and (max-width: 1399px) {
            #std-info-box { right: 20px; bottom: 80px; max-width: 260px; }
        }
        /* Phone: hidden — sidebar-info-box is used instead */
        @media (max-width: 767px) {
            #std-info-box { display: none !important; }
        }
        #std-info-box-toggle {
            width: 100%;
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            text-align: left;
            font-family: 'Outfit', sans-serif;
        }
        #std-info-box-toggle:hover { background: rgba(255,255,255,0.04); }
        #std-info-box-icon {
            height: 28px;
            width: 28px;
            object-fit: contain;
            flex-shrink: 0;
            display: none;
        }
        #std-info-box-heading {
            flex: 1;
            font-size: 0.65rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #ffffff;
            margin: 0;
        }
        #std-info-box-chevron {
            font-size: 14px;
            color: rgba(255,255,255,0.5);
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        #std-info-box-body {
            padding: 0 14px 12px;
        }
        #std-info-box p {
            font-size: 0.82rem;
            color: var(--sidebar-text);
            line-height: 1.6;
            margin: 0;
        }

        /* ── Help Modal ──────────────────────────────────────────────────── */
        #mob-help-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 2100;
            background: rgba(0,0,0,0.72);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 100px; /* clear the bottom control bar */
        }
        #mob-help-modal.open { display: flex; animation: fadeIn 0.18s ease-out; }
        #mob-help-panel {
            background: var(--glass, rgba(10,15,30,0.96));
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 20px;
            width: calc(100% - 30px);
            max-width: 420px;
            padding: 20px 20px 16px;
            font-family: 'Outfit', sans-serif;
            position: relative;
        }
        #mob-help-close {
            position: absolute;
            top: 12px; right: 14px;
            background: none; border: none;
            color: rgba(255,255,255,0.5);
            font-size: 1.4rem; line-height: 1;
            cursor: pointer; padding: 0; width: auto;
        }
        #mob-help-close:hover { color: #fff; }
        #mob-help-panel h3 {
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--secondary-color);
            margin: 0 0 14px 0;
        }
        #mob-help-panel ul {
            list-style: none;
            padding: 0; margin: 0;
            display: flex; flex-direction: column; gap: 10px;
        }
        #mob-help-panel ul li {
            display: flex; align-items: flex-start; gap: 10px;
            font-size: 0.82rem; color: #fff; line-height: 1.45;
        }
        #mob-help-panel ul li .help-icon {
            flex-shrink: 0;
            width: 28px; height: 28px;
            background: rgba(255,255,255,0.08);

            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.95rem;
        }

        /* Loading spinner overlay */
        #std-loading {
            position: absolute; inset: 0; background: rgba(0,0,0,0.6);
            display: flex; align-items: center; justify-content: center;
            z-index: 150; font-size: 16px; color: #4da6ff;
            opacity: 0; pointer-events: none; transition: opacity 0.2s;
        }
        #std-loading.visible { opacity: 1; pointer-events: all; }

        /* ══════════════════════════════════════════════════════════════════
           ADA MODE
        ══════════════════════════════════════════════════════════════════ */
        :root {
            --brand-primary:         #444444;
            --brand-text-accent:     #444444;
            --brand-secondary:       #888888;
            --brand-bg-tint:         #3a3a3a;
            --brand-border:          #555555;
            --brand-num-bg:          #3a3a3a;
            --brand-on-primary:      #ffffff;
            --brand-num-text:        #cccccc;
            --brand-label-on-tint:   #cccccc;
            --brand-active-num-bg:   #888888;
            --brand-active-num-text: #ffffff;
            /* Genuinely global version of #standard-viewer's own --focus-ring
               (same "4px solid <secondary color>" formula) — for elements like
               #scene-help-popup that sit outside #standard-viewer in the DOM as
               a sibling rather than a descendant, and so can't reach a variable
               scoped to it. --brand-secondary is kept in sync with the current
               tour's actual secondary color by applyStandardBrandColors(). */
            --focus-ring: 4px solid var(--brand-secondary);
        }

        /* width: 100% instead of 100vw — vw includes the scrollbar's own
           width and can measure wider than the true visual viewport on
           mobile (address bar show/hide, subpixel rounding quirks across
           devices). Since body has overflow:hidden, any such excess width
           was permanently clipped with no way to scroll to it, showing up
           as content cut off on the right rather than just needing a
           scroll. #ada-viewer sits as a direct sibling of <main>, so 100%
           correctly matches body's own width without that discrepancy. */
        #ada-viewer { display: none; width: 100%; height: 100vh; height: 100dvh; flex-direction: row; }
        #ada-viewer.active { display: flex; }
        
        #ada-viewer-wrap { flex: 1; position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: #000; }
        #ada-panorama { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
        #ada-flat-viewer { display: none; width: 100%; height: 100%; position: absolute; inset: 0; background: #000; align-items: center; justify-content: center; }
        #ada-flat-viewer.flat-active { display: flex; }
        #ada-flat-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
        
        #ada-viewer .pnlm-controls-container, #ada-viewer .pnlm-about-msg, #ada-viewer .pnlm-load-box, #ada-viewer .pnlm-compass, #ada-viewer .pnlm-hotspot-base { display: none !important; }

        #ada-panorama .pnlm-render-container { pointer-events: none !important; }
        
        #ada-nav { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; z-index: 100; }
        .ada-nav-btn { background: rgba(0,0,0,0.75); border: 2px solid var(--brand-primary); color: var(--brand-text-accent); padding: 12px 28px; border-radius: 6px; font-size: 18px; font-weight: bold; cursor: pointer; transition: background 0.2s, color 0.2s; line-height: 1; display: flex; align-items: center; gap: 10px; }
        .ada-nav-btn:hover:not(:disabled) { background: var(--brand-secondary); color: var(--brand-active-num-text); }
        .ada-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; border-color: #555; color: #555; }
        .ada-nav-btn svg { flex-shrink: 0; }
        #ada-scene-counter { color: rgba(255,255,255,0.6); font-size: 14px; white-space: nowrap; }

        #ada-loading { position: absolute; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 200; font-size: 18px; color: var(--brand-text-accent); letter-spacing: 1px; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
        #ada-loading.visible { opacity: 1; pointer-events: all; }

        #ada-sidebar { width: 380px; flex-shrink: 0; height: 100vh; height: 100dvh; background: #1a1a1a; border-left: 1px solid #2a2a2a; display: flex; flex-direction: column; overflow: hidden; }

        /* Two-row header: a slim top stripe (mode label + actions) so the
           tour title below gets the full sidebar width to breathe instead
           of fighting the action buttons for space and ellipsis-truncating. */
        #ada-header { padding: 10px 20px 14px; background: #111; border-bottom: 1px solid #222; border-left: 4px solid var(--brand-primary); display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }

        #ada-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        #ada-header-subtitle { font-size: 11px; font-weight: 700; color: #888; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }

        #ada-header-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
        #ada-header-main svg { flex-shrink: 0; }
        #ada-page-title { font-size: 16px; font-weight: 700; color: var(--brand-text-accent); letter-spacing: 0.3px; line-height: 1.3; margin: 0; padding: 0; white-space: normal; overflow-wrap: break-word; }

        /* Groups the fullscreen toggle + "Standard Mode" link so the top
           stripe's space-between still only has two flex items (label /
           actions) instead of three fighting for the row. */
        #ada-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

        /* Fullscreen Toggle — ADA mode: lives inside the header next to the
           mode switcher (different placement than Standard's floating HUD
           button, since ADA's chrome is a docked bar, not floating buttons). */
        #btn-fullscreen-toggle-ada {
            display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; padding: 0;
            background: transparent; border: 1px solid var(--brand-primary);
            color: var(--brand-text-accent); border-radius: 6px; cursor: pointer;
            transition: background 0.2s, color 0.2s; flex-shrink: 0;
        }
        #btn-fullscreen-toggle-ada:hover { background: var(--brand-primary); color: #111; }

		/* "Standard Mode" Switch Button in ADA Header */
        #btn-switch-standard-ada {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            background: transparent;
            border: 1px solid var(--brand-primary);
            color: var(--brand-text-accent);
            font-family: 'Outfit', Tahoma, sans-serif;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            border-radius: 6px;
            transition: background 0.2s, color 0.2s;
            white-space: nowrap;
            flex-shrink: 0; 
        }

        #btn-switch-standard-ada:hover {
            background: var(--brand-primary);
            color: var(--brand-on-primary);
        }

        #ada-info-block { padding: 28px 24px 24px; background: var(--brand-bg-tint); border-bottom: 2px solid var(--brand-border); border-left: 4px solid var(--brand-primary); flex-shrink: 0; max-height: 55vh; overflow-y: auto; }
        #ada-info-block .ada-scene-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand-label-on-tint); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
        #ada-current-title { font-size: 22px; font-weight: 700; color: #fff; line-height: 1.3; margin: 0 0 14px; }
        #ada-current-desc  { font-size: 17px; line-height: 1.7; color: #ccc; margin: 0 0 8px; }
        #ada-current-title:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 4px; border-radius: 4px; }

        #ada-scene-list-wrap { flex: 1; overflow-y: auto; padding: 16px 12px; min-height: 0; }
        #ada-scene-list-wrap .ada-list-section-heading { font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; color: #aaa; margin: 0 0 12px 8px; padding: 0; }
        #ada-scene-list-wrap .ada-list-section-heading:focus-visible { outline: 2px solid var(--brand-text-accent); outline-offset: 2px; border-radius: 4px; }
        #ada-scene-list-wrap ul { list-style: none; padding: 0; margin: 0; }

        #ada-scene-list-wrap ul li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 6px; margin-bottom: 6px; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; }
        #ada-scene-list-wrap ul li:hover { background: #252525; }
        #ada-scene-list-wrap ul li.ada-list-active { background: var(--brand-bg-tint); border-color: var(--brand-primary); }
        .ada-list-num { font-size: 12px; font-weight: bold; color: var(--brand-num-text); background: var(--brand-num-bg); border-radius: 3px; padding: 3px 7px; flex-shrink: 0; min-width: 28px; text-align: center; }
        .ada-list-active .ada-list-num { background: var(--brand-active-num-bg); color: var(--brand-active-num-text); }
        .ada-list-title { font-size: 14px; color: #ccc; line-height: 1.4; }
        .ada-list-active .ada-list-title { color: #fff; font-weight: 600; }
        .ada-group-header { font-size: 13px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--brand-text-accent); font-weight: 700; padding: 14px 12px 6px; margin: 0; border-top: 1px solid #2a2a2a; }
        .ada-group-header:first-child { border-top: none; padding-top: 4px; }
        .ada-group-header:focus-visible { outline: 2px solid var(--brand-text-accent); outline-offset: -2px; border-radius: 4px; }
        #ada-scene-list-wrap::-webkit-scrollbar { width: 4px; }
        #ada-scene-list-wrap::-webkit-scrollbar-track { background: transparent; }
        #ada-scene-list-wrap::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

        #ada-error { display: none; position: fixed; inset: 0; background: #111; align-items: center; justify-content: center; flex-direction: column; gap: 16px; color: #ccc; font-size: 18px; text-align: center; padding: 40px; }
        #ada-error.visible { display: flex; }
        #ada-error strong { color: var(--brand-text-accent); font-size: 24px; }

        /* ADA Sticky Mobile Control Bar */
        .ada-mob-control-wrap {
            display: none; position: fixed; bottom: 20px; left: 15px; right: 15px; z-index: 950; gap: 8px;
        }
        .ada-mob-control-wrap button {
            flex: 1; height: 50px; background: rgba(17, 17, 17, 0.95); border: 2px solid var(--brand-primary);
            border-radius: 12px; color: var(--brand-text-accent); font-weight: 800; text-transform: uppercase;
            font-size: 0.8rem; letter-spacing: 0.5px;
            display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); cursor: pointer;
        }

        /* ADA Tablet CSS Override (768–1399px) */
        @media (min-width: 769px) and (max-width: 1399px) {
            #ada-viewer.active { display: flex; }
            #ada-viewer-wrap {
                height: 100vh; height: 100dvh;
                overflow: visible;
            }
            #ada-sidebar {
                width: 300px;
                flex-shrink: 0;
                height: 100vh; height: 100dvh;
                overflow-y: auto;
            }
            #ada-nav {
                bottom: 20px;
                gap: 10px;
                z-index: 200;
            }
            .ada-nav-btn {
                padding: 10px 20px;
                font-size: 16px;
            }
            #ada-current-title { font-size: 20px; }
            #ada-current-desc  { font-size: 15px; }
        }

        /* ADA Mobile CSS Override */
        @media (max-width: 768px) {
            #ada-viewer.active { display: block; overflow-y: auto; height: 100vh; height: 100dvh; } 
            #ada-viewer-wrap { 
                height: 55vw; 
                min-height: 240px; 
                position: relative; 
                width: 100%; 
                display: block; 
                z-index: 1; 
            }
            #ada-sidebar { width: 100%; height: auto; max-height: none; border-left: none; border-top: 1px solid #2a2a2a; overflow: visible; padding-bottom: 100px; }
            #ada-info-block { padding: 18px 16px 16px; }
            #ada-current-title { font-size: 18px; }
            #ada-current-desc  { font-size: 15px; }
            #ada-nav { bottom: 12px; gap: 10px; }
            .ada-nav-btn { padding: 10px 18px; font-size: 15px; }
            .ada-mob-control-wrap { display: flex; } 
        }

.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

        /* ── Flat-scene cover overrides ──────────────────────────────────────────
           Cover mode fills the viewer edge-to-edge using object-fit:cover.
           Only applied when #flat-viewer has the .cover-mode class — map scenes
           are flat but must NOT use cover so their dot positions stay accurate.
           #flat-hotspot-layer is a sibling of #flat-viewer so that the viewer's
           overflow:hidden clips the image bleed without ever clipping tooltips. */
        #flat-viewer.cover-mode {
            overflow: hidden !important;
        }
        #flat-viewer.cover-mode #flat-viewer-img {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            object-fit: cover !important;
            object-position: center center !important;
        }
        /* Hotspot layer: position/size set by positionCoverHotspotLayer() for
           cover scenes; reset to full-overlay (100%/0/0) for map scenes. */
        #flat-hotspot-layer {
            position: absolute !important;
            pointer-events: none !important;
            overflow: visible !important;
            z-index: 5 !important;
        }

/* Floating chrome of the Basic and Gallery themes (controls bar, thumbnail dock / rail, their arrows and tab): the
   background is always a very dark tint of Primary, so the text color comes from --dock-text, which is computed
   against that dark background, not from --sidebar-text (which follows Primary's own brightness). */
#gallery-controls-cluster, #basic-controls-cluster, #gallery-rail-tab, #basic-bottom-dock,
#gallery-scroll-up, #gallery-scroll-down, #basic-scroll-left, #basic-scroll-right {
    color: var(--dock-text, #fff) !important;
}

/* Full Screen button once it has joined the Basic / Gallery controls bar (desktop): same look as the bar's other buttons. */
#gallery-controls-cluster #btn-fullscreen-toggle,
#basic-controls-cluster #btn-fullscreen-toggle {
    position: static !important;
    width: auto; height: auto;
    padding: 6px 10px; gap: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    box-shadow: none;
    backdrop-filter: none;
    color: inherit;
    font-family: inherit; font-size: 12px; white-space: nowrap;
}
#gallery-controls-cluster #btn-fullscreen-toggle:hover,
#basic-controls-cluster #btn-fullscreen-toggle:hover { background: rgba(255,255,255,0.1); color: inherit; }
#gallery-controls-cluster #btn-fullscreen-toggle svg,
#basic-controls-cluster #btn-fullscreen-toggle svg { width: 16px; height: 16px; }


/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR STYLES -- the look of the slide-out / side panel (#mainSidebar).
   Chosen per tour in the editor (Tour Theme > Sidebar Style), stored as
   theme_settings.sidebar_style, applied by client_view.php as a class on
   #standard-viewer:  sbs-default | sbs-campus | sbs-business | sbs-glass | sbs-light

     sbs-default   Matches the thumbnail rail: dark brand-tinted glass, thin accent outline, small corners.
     sbs-campus    The original rounded brand-colour panel. No rules here on purpose -- it is the base styling above.
     sbs-business  Brand-colour panel with straight, modern lines and an accent bar.
     sbs-glass     Frosted, see-through, soft and rounded.
     sbs-light     Clean white panel with dark text.

   Every rule is scoped to .sidebar so the thumbnail rail / dock (which share class names like .view-link) are untouched.
   Corner radii are only set from 1400px up, where the classic theme shows a floating panel; below that the panel is a flush
   drawer (and the Basic / Gallery themes force theirs flat), so those existing rules keep winning.
   NEVER put PHP tags in this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark styles (default, glass): text colour comes from the dark dock tint, not from Primary ── */
#standard-viewer.sbs-default .sidebar,
#standard-viewer.sbs-glass .sidebar {
    --sidebar-text: var(--dock-text, #ffffff);
    --text-ada: var(--dock-text, #ffffff);
    --text-white: var(--dock-text, #ffffff);
    --text-dim: var(--dock-text, #ffffff);
    --text-muted: var(--dock-text, #ffffff);
    --tab-inactive-text: var(--dock-text, #ffffff);
    --label-accent: var(--dock-text, #ffffff);
    --dk-text: var(--dock-text, #ffffff);
}
#standard-viewer.sbs-default .sidebar .main-content,
#standard-viewer.sbs-glass .sidebar .main-content,
#standard-viewer.sbs-light .sidebar .main-content { background: transparent; }

/* ═════════════════ DEFAULT -- same family as the thumbnail rail ═════════════════ */
#standard-viewer.sbs-default .sidebar {
    background: rgb(var(--dock-bg-rgb, 10 15 30) / 92%);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--secondary-color);
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
#standard-viewer.sbs-default .sidebar .tab-nav { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.15); }
#standard-viewer.sbs-default .sidebar .tab-btn { border-bottom: 3px solid transparent; }
#standard-viewer.sbs-default .sidebar .tab-btn.active { background: transparent; color: var(--dk-text); border-bottom-color: var(--secondary-color); }
#standard-viewer.sbs-default .sidebar .tab-btn.active small { color: var(--dk-text); }
#standard-viewer.sbs-default .sidebar .building-group { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; }
#standard-viewer.sbs-default .sidebar .building-group.active .building-trigger,
#standard-viewer.sbs-default .sidebar .building-group.active .building-trigger.view-link {
    background: color-mix(in srgb, var(--secondary-color) 30%, transparent); color: var(--dk-text);
    box-shadow: inset 3px 0 0 var(--secondary-color);
}
#standard-viewer.sbs-default .sidebar .sub-view-tray { background: rgba(0,0,0,0.25); }
#standard-viewer.sbs-default .sidebar .view-link { background: rgba(255,255,255,0.07); color: var(--dk-text); border: 2px solid rgba(255,255,255,0.15); border-radius: 6px; }
#standard-viewer.sbs-default .sidebar .view-link:hover { border-color: rgba(255,255,255,0.35); }
#standard-viewer.sbs-default .sidebar .view-link.current { background: color-mix(in srgb, var(--secondary-color) 28%, transparent); color: var(--dk-text); border-color: var(--secondary-color); font-weight: 700; }
#standard-viewer.sbs-default .sidebar .building-trigger.view-link { background: transparent; border: none; border-radius: 0; color: var(--dk-text); }
#standard-viewer.sbs-default .sidebar .hs-focus-btn { background: rgba(255,255,255,0.06); color: var(--dk-text); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; }
#standard-viewer.sbs-default .sidebar .hs-focus-btn:hover,
#standard-viewer.sbs-default .sidebar .hs-focus-btn:focus,
#standard-viewer.sbs-default .sidebar .hs-focus-btn:focus-visible { background: color-mix(in srgb, var(--secondary-color) 25%, transparent); color: var(--dk-text); border-color: var(--secondary-color); }
#standard-viewer.sbs-default .sidebar #std-motion-toggle-row,
#standard-viewer.sbs-glass .sidebar #std-motion-toggle-row { background: rgba(255,255,255,0.06); color: var(--dk-text); }
#standard-viewer.sbs-default .sidebar .motion-bar-icon,
#standard-viewer.sbs-default .sidebar #std-motion-toggle-label,
#standard-viewer.sbs-glass .sidebar .motion-bar-icon,
#standard-viewer.sbs-glass .sidebar #std-motion-toggle-label { color: var(--dk-text); }
#standard-viewer.sbs-default .sidebar #std-motion-toggle-label input[type="checkbox"],
#standard-viewer.sbs-glass .sidebar #std-motion-toggle-label input[type="checkbox"] { accent-color: var(--secondary-color); }
#standard-viewer.sbs-default .sidebar .motion-bar-help-btn,
#standard-viewer.sbs-default .sidebar .btn-cta,
#standard-viewer.sbs-default .sidebar .hotspot-jump,
#standard-viewer.sbs-default .sidebar .shortcut-dashboard { border-radius: 6px; }
#standard-viewer.sbs-default .sidebar .btn-tour { border: 1px solid var(--secondary-color); }
#standard-viewer.sbs-default .sidebar .sidebar-footer { background: rgba(0,0,0,0.28); border-top: 1px solid rgba(255,255,255,0.15); }
#standard-viewer.sbs-default .sidebar .feature-card { border-radius: 8px; }
@media (min-width: 1400px) {
    #standard-viewer.sbs-default .sidebar { border-radius: 10px; }
    #standard-viewer.sbs-default .sidebar .tab-nav { border-radius: 10px 10px 0 0; }
    #standard-viewer.sbs-default .sidebar .tab-btn.active:first-child,
    #standard-viewer.sbs-default .sidebar .tab-btn.active:last-child { border-radius: 0; }
    #standard-viewer.sbs-default .sidebar .sidebar-footer { border-radius: 0 0 10px 10px; }
}

/* ═════════════════ BUSINESS -- brand panel, straight lines ═════════════════ */
#standard-viewer.sbs-business .sidebar {
    border: 1px solid rgba(255,255,255,0.18); border-top: 4px solid var(--secondary-color);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
#standard-viewer.sbs-business .sidebar .tab-nav { border-bottom: 1px solid rgba(255,255,255,0.18); }
#standard-viewer.sbs-business .sidebar .tab-btn { letter-spacing: 0.08em; border-bottom: 3px solid transparent; }
#standard-viewer.sbs-business .sidebar .tab-btn.active { border-bottom-color: var(--secondary-color); }
#standard-viewer.sbs-business .sidebar .building-group { border-radius: 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.28); }
#standard-viewer.sbs-business .sidebar .building-trigger h3 { text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.82rem; }
#standard-viewer.sbs-business .sidebar .sub-view-tray { background: rgba(0,0,0,0.18); }
#standard-viewer.sbs-business .sidebar .view-link { border-radius: 0; border: 1px solid rgba(255,255,255,0.22); border-left: 4px solid rgba(255,255,255,0.22); width: 92%; }
#standard-viewer.sbs-business .sidebar .view-link:hover { border-left-color: var(--secondary-color); }
#standard-viewer.sbs-business .sidebar .view-link.current { border-left-color: var(--secondary-text); }
#standard-viewer.sbs-business .sidebar .building-trigger.view-link { border: none; border-radius: 0; }
#standard-viewer.sbs-business .sidebar .hs-focus-btn,
#standard-viewer.sbs-business .sidebar .btn-cta,
#standard-viewer.sbs-business .sidebar .hotspot-jump,
#standard-viewer.sbs-business .sidebar .motion-bar-help-btn,
#standard-viewer.sbs-business .sidebar .shortcut-dashboard,
#standard-viewer.sbs-business .sidebar .shortcut-item b,
#standard-viewer.sbs-business .sidebar .feature-card,
#standard-viewer.sbs-business .sidebar .feature-icon { border-radius: 0; }
#standard-viewer.sbs-business .sidebar .sidebar-footer { border-top: 1px solid rgba(255,255,255,0.18); }
@media (min-width: 1400px) {
    #standard-viewer.sbs-business .sidebar { border-radius: 2px; }
    #standard-viewer.sbs-business .sidebar .tab-nav { border-radius: 0; }
    #standard-viewer.sbs-business .sidebar .tab-btn.active:first-child,
    #standard-viewer.sbs-business .sidebar .tab-btn.active:last-child { border-radius: 0; }
    #standard-viewer.sbs-business .sidebar .sidebar-footer { border-radius: 0; }
}

/* ═════════════════ GLASS -- frosted, soft ═════════════════ */
#standard-viewer.sbs-glass .sidebar {
    background: rgb(var(--dock-bg-rgb, 10 15 30) / 58%);
    -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.24);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
#standard-viewer.sbs-glass .sidebar .tab-nav { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.14); padding: 6px; gap: 4px; }
#standard-viewer.sbs-glass .sidebar .tab-btn { border-radius: 999px; padding-top: 0.9rem; padding-bottom: 0.9rem; }
#standard-viewer.sbs-glass .sidebar .tab-btn.active { background: rgba(255,255,255,0.18); color: var(--dk-text); border-radius: 999px; }
#standard-viewer.sbs-glass .sidebar .tab-btn.active small { color: var(--dk-text); }
#standard-viewer.sbs-glass .sidebar .building-group { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 16px; }
#standard-viewer.sbs-glass .sidebar .building-group.active .building-trigger,
#standard-viewer.sbs-glass .sidebar .building-group.active .building-trigger.view-link { background: color-mix(in srgb, var(--secondary-color) 38%, transparent); color: var(--dk-text); }
#standard-viewer.sbs-glass .sidebar .sub-view-tray { background: rgba(0,0,0,0.12); }
#standard-viewer.sbs-glass .sidebar .view-link { background: rgba(255,255,255,0.09); color: var(--dk-text); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; }
#standard-viewer.sbs-glass .sidebar .view-link:hover { background: rgba(255,255,255,0.16); }
#standard-viewer.sbs-glass .sidebar .view-link.current { background: color-mix(in srgb, var(--secondary-color) 42%, transparent); color: var(--dk-text); border-color: var(--secondary-color); font-weight: 700; }
#standard-viewer.sbs-glass .sidebar .building-trigger.view-link { background: transparent; border: none; border-radius: 0; color: var(--dk-text); }
#standard-viewer.sbs-glass .sidebar .hs-focus-btn { background: rgba(255,255,255,0.08); color: var(--dk-text); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; }
#standard-viewer.sbs-glass .sidebar .hs-focus-btn:hover,
#standard-viewer.sbs-glass .sidebar .hs-focus-btn:focus,
#standard-viewer.sbs-glass .sidebar .hs-focus-btn:focus-visible { background: color-mix(in srgb, var(--secondary-color) 35%, transparent); color: var(--dk-text); border-color: var(--secondary-color); }
#standard-viewer.sbs-glass .sidebar .btn-cta,
#standard-viewer.sbs-glass .sidebar .hotspot-jump { border-radius: 999px; }
#standard-viewer.sbs-glass .sidebar .btn-tour { border: 1px solid var(--secondary-color); }
#standard-viewer.sbs-glass .sidebar .shortcut-dashboard { border-radius: 16px; }
#standard-viewer.sbs-glass .sidebar .sidebar-footer { background: rgba(0,0,0,0.18); border-top: 1px solid rgba(255,255,255,0.14); }
@media (min-width: 1400px) {
    #standard-viewer.sbs-glass .sidebar { border-radius: 26px; }
    #standard-viewer.sbs-glass .sidebar .tab-nav { border-radius: 26px 26px 0 0; }
    #standard-viewer.sbs-glass .sidebar .sidebar-footer { border-radius: 0 0 26px 26px; }
}

/* ═════════════════ LIGHT -- white panel, dark text ═════════════════ */
#standard-viewer.sbs-light .sidebar {
    --sidebar-text: #1b2330; --text-ada: #3b4656; --text-white: #1b2330; --text-dim: #5a6678;
    --text-muted: #3b4656; --tab-inactive-text: #3b4656; --label-accent: #5a6678;
    background: rgba(244,246,249,0.72);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
#standard-viewer.sbs-light .sidebar .tab-nav { background: rgba(0,0,0,0.04); border-bottom: 1px solid rgba(0,0,0,0.1); }
#standard-viewer.sbs-light .sidebar .tab-btn { border-bottom: 3px solid transparent; }
#standard-viewer.sbs-light .sidebar .tab-btn.active { background: transparent; color: #1b2330; border-bottom-color: var(--secondary-color); }
#standard-viewer.sbs-light .sidebar .tab-btn.active small { color: #5a6678; }
#standard-viewer.sbs-light .sidebar #std-scene-info { border-bottom-color: rgba(0,0,0,0.12) !important; }
#standard-viewer.sbs-light .sidebar #std-scene-title { color: #1b2330 !important; }
#standard-viewer.sbs-light .sidebar .building-group { background: rgba(255,255,255,0.40); border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; }
#standard-viewer.sbs-light .sidebar .building-trigger { color: #1b2330; }
#standard-viewer.sbs-light .sidebar .sub-view-tray { background: rgba(0,0,0,0.04); }
#standard-viewer.sbs-light .sidebar .view-link { background: rgba(255,255,255,0.40); color: #1b2330; border: 1px solid rgba(0,0,0,0.14); border-radius: 8px; }
#standard-viewer.sbs-light .sidebar .view-link:hover { border-color: var(--secondary-color); }
#standard-viewer.sbs-light .sidebar .view-link.current { background: var(--secondary-color); color: var(--secondary-text); border-color: var(--secondary-color); font-weight: 700; }
#standard-viewer.sbs-light .sidebar .building-trigger.view-link { background: transparent; border: none; border-radius: 0; color: #1b2330; }
#standard-viewer.sbs-light .sidebar .building-group.active .building-trigger,
#standard-viewer.sbs-light .sidebar .building-group.active .building-trigger.view-link { background: var(--secondary-color); color: var(--secondary-text); }
#standard-viewer.sbs-light .sidebar .hs-focus-btn { background: rgba(0,0,0,0.04); color: #1b2330; border: 1px solid rgba(0,0,0,0.14); border-radius: 6px; }
#standard-viewer.sbs-light .sidebar .hs-focus-btn:hover,
#standard-viewer.sbs-light .sidebar .hs-focus-btn:focus,
#standard-viewer.sbs-light .sidebar .hs-focus-btn:focus-visible { background: rgba(255,255,255,0.40); color: #1b2330; border-color: var(--secondary-color); }
#standard-viewer.sbs-light .sidebar #std-motion-toggle-row { background: rgba(0,0,0,0.05); color: #1b2330; }
#standard-viewer.sbs-light .sidebar .motion-bar-icon,
#standard-viewer.sbs-light .sidebar #std-motion-toggle-label { color: #1b2330; }
#standard-viewer.sbs-light .sidebar #std-motion-toggle-label input[type="checkbox"] { accent-color: var(--secondary-color); }
#standard-viewer.sbs-light .sidebar .shortcut-dashboard { background: rgba(255,255,255,0.40); border-color: rgba(0,0,0,0.1); }
#standard-viewer.sbs-light .sidebar .feature-card { background: rgba(255,255,255,0.40); border-color: rgba(0,0,0,0.1); }
#standard-viewer.sbs-light .sidebar .feature-card:hover { background: rgba(255,255,255,0.40); border-color: var(--secondary-color); }
#standard-viewer.sbs-light .sidebar .btn-tour { border: 1px solid rgba(0,0,0,0.2); }
#standard-viewer.sbs-light .sidebar .sidebar-footer { background: rgba(0,0,0,0.04); border-top: 1px solid rgba(0,0,0,0.1); }
#standard-viewer.sbs-light .sidebar .copyright-row { color: #5a6678; }
@media (min-width: 1400px) {
    #standard-viewer.sbs-light .sidebar { border-radius: 16px; }
    #standard-viewer.sbs-light .sidebar .tab-nav { border-radius: 16px 16px 0 0; }
    #standard-viewer.sbs-light .sidebar .tab-btn.active:first-child,
    #standard-viewer.sbs-light .sidebar .tab-btn.active:last-child { border-radius: 0; }
    #standard-viewer.sbs-light .sidebar .sidebar-footer { border-radius: 0 0 16px 16px; }
}


/* ═════════════════ REAL ESTATE -- warm light panel, listing header, agent card ═════════════════
   Pairs with renderRealEstate() in client_view.php (listing header #re-listing, agent card #re-agent, room photos).
   Light and editorial: serif for the price / address / headings, small tracked caps for labels, hairline rules,
   the tour's accent colour used sparingly (status badge, current room, main button). */
#standard-viewer.sbs-realestate .sidebar {
    --sidebar-text: #1f2227; --text-ada: #3d434c; --text-white: #1f2227; --text-dim: #5b626d;
    --text-muted: #3d434c; --tab-inactive-text: #3d434c; --label-accent: #5b626d;
    --re-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --re-rule: rgba(31,34,39,0.13);
    background: rgba(247,244,238,0.74);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(31,34,39,0.1);
    box-shadow: 0 12px 44px rgba(0,0,0,0.3);
}
#standard-viewer.sbs-realestate .sidebar .main-content { background: transparent; }
#standard-viewer.sbs-realestate .sidebar .tab-nav { background: transparent; border-bottom: 1px solid var(--re-rule); }
#standard-viewer.sbs-realestate .sidebar .tab-btn { letter-spacing: 0.14em; font-size: 0.74rem; border-bottom: 3px solid transparent; }
#standard-viewer.sbs-realestate .sidebar .tab-btn.active { background: transparent; color: #1f2227; border-bottom-color: var(--secondary-color); }
#standard-viewer.sbs-realestate .sidebar .tab-btn small,
#standard-viewer.sbs-realestate .sidebar .tab-btn.active small { color: #5b626d; }
#standard-viewer.sbs-realestate .sidebar .identity-text h2,
#standard-viewer.sbs-realestate .sidebar #std-scene-title { font-family: var(--re-serif); font-weight: 600; color: #1f2227 !important; }
#standard-viewer.sbs-realestate .sidebar #std-scene-info { border-bottom-color: var(--re-rule) !important; }

/* Rooms: quiet rows with a small photo, separated by hairlines */
#standard-viewer.sbs-realestate .sidebar .building-group { background: transparent; border: none; border-bottom: 1px solid var(--re-rule); border-radius: 0; margin-bottom: 0; }
#standard-viewer.sbs-realestate .sidebar .building-trigger { color: #1f2227; }
#standard-viewer.sbs-realestate .sidebar .building-trigger h3 { font-family: var(--re-serif); font-size: 1.02rem; font-weight: 600; }
#standard-viewer.sbs-realestate .sidebar .building-group.active .building-trigger,
#standard-viewer.sbs-realestate .sidebar .building-group.active .building-trigger.view-link { background: color-mix(in srgb, var(--secondary-color) 14%, transparent); color: #1f2227; box-shadow: inset 3px 0 0 var(--secondary-color); }
#standard-viewer.sbs-realestate .sidebar .sub-view-tray { background: transparent; padding: 0.25rem 0 0.75rem; }
#standard-viewer.sbs-realestate .sidebar .view-link { display: flex; align-items: center; gap: 12px; width: 94%; margin: 0.15rem auto; padding: 0.5rem 0.6rem; background: transparent; color: #1f2227; border: 1px solid transparent; border-radius: 3px; }
#standard-viewer.sbs-realestate .sidebar .view-link:hover { background: rgba(31,34,39,0.05); }
#standard-viewer.sbs-realestate .sidebar .view-link.current { background: color-mix(in srgb, var(--secondary-color) 16%, transparent); color: #1f2227; border-color: var(--secondary-color); font-weight: 700; }
#standard-viewer.sbs-realestate .sidebar .building-trigger.view-link { width: 100%; margin: 0; padding: 0.7rem 1rem; border: none; border-radius: 0; background: transparent; color: #1f2227; }
#standard-viewer.sbs-realestate .sidebar .re-room-thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(31,34,39,0.12); }
#standard-viewer.sbs-realestate .sidebar .building-trigger.view-link h3 { flex: 1; }
#standard-viewer.sbs-realestate .sidebar .yah-badge { margin-left: auto; }
#standard-viewer.sbs-realestate .sidebar .hs-focus-btn { background: transparent; color: #1f2227; border: 1px solid var(--re-rule); border-radius: 3px; }
#standard-viewer.sbs-realestate .sidebar .hs-focus-btn:hover,
#standard-viewer.sbs-realestate .sidebar .hs-focus-btn:focus,
#standard-viewer.sbs-realestate .sidebar .hs-focus-btn:focus-visible { background: rgba(255,255,255,0.40); color: #1f2227; border-color: var(--secondary-color); }
#standard-viewer.sbs-realestate .sidebar #std-motion-toggle-row { background: rgba(31,34,39,0.05); color: #1f2227; }
#standard-viewer.sbs-realestate .sidebar .motion-bar-icon,
#standard-viewer.sbs-realestate .sidebar #std-motion-toggle-label { color: #1f2227; }
#standard-viewer.sbs-realestate .sidebar #std-motion-toggle-label input[type="checkbox"] { accent-color: var(--secondary-color); }
#standard-viewer.sbs-realestate .sidebar .motion-bar-help-btn,
#standard-viewer.sbs-realestate .sidebar .btn-cta,
#standard-viewer.sbs-realestate .sidebar .hotspot-jump,
#standard-viewer.sbs-realestate .sidebar .shortcut-dashboard,
#standard-viewer.sbs-realestate .sidebar .feature-card { border-radius: 3px; }
#standard-viewer.sbs-realestate .sidebar .btn-tour { background: transparent; color: #1f2227; border: 1px solid #1f2227; }
#standard-viewer.sbs-realestate .sidebar .shortcut-dashboard,
#standard-viewer.sbs-realestate .sidebar .feature-card { background: rgba(255,255,255,0.40); border-color: var(--re-rule); }
#standard-viewer.sbs-realestate .sidebar .sidebar-footer { background: rgba(31,34,39,0.04); border-top: 1px solid var(--re-rule); }
#standard-viewer.sbs-realestate .sidebar .copyright-row { color: #5b626d; }

/* Listing header (sits above the tabs) */
#standard-viewer.sbs-realestate .sidebar .re-listing { padding: 1.1rem 1.5rem 0.9rem; border-bottom: 1px solid var(--re-rule); background: rgba(255,255,255,0.40); flex-shrink: 0; max-height: 55%; overflow-y: auto; }
#standard-viewer.sbs-realestate .sidebar .re-status { display: inline-block; background: var(--secondary-color); color: var(--secondary-text); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px; margin-bottom: 0.55rem; }
#standard-viewer.sbs-realestate .sidebar .re-price { font-family: var(--re-serif); font-size: 2rem; font-weight: 600; line-height: 1.1; color: #1f2227; }
#standard-viewer.sbs-realestate .sidebar .re-address { font-family: var(--re-serif); font-size: 1.55rem; font-weight: 600; line-height: 1.15; color: #1f2227; margin-top: 0.1rem; }
#standard-viewer.sbs-realestate .sidebar .re-priceline { font-family: var(--re-serif); font-size: 1.15rem; font-weight: 600; color: #1f2227; }
#standard-viewer.sbs-realestate .sidebar .re-city { font-size: 0.86rem; color: #5b626d; letter-spacing: 0.04em; margin-top: 2px; }
#standard-viewer.sbs-realestate .sidebar .re-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.8rem 0 0; padding: 0.7rem 0 0; border-top: 1px solid var(--re-rule); font-size: 0.78rem; color: #3d434c; text-transform: uppercase; letter-spacing: 0.08em; }
#standard-viewer.sbs-realestate .sidebar .re-facts b { font-family: var(--re-serif); font-size: 1.1rem; color: #1f2227; letter-spacing: 0; margin-right: 2px; }
#standard-viewer.sbs-realestate .sidebar .re-more-toggle { margin-top: 0.8rem; background: none; border: none; padding: 0.3rem 0; color: #1f2227; font-family: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid var(--secondary-color); }
#standard-viewer.sbs-realestate .sidebar .re-more-toggle::after { content: " +"; }
#standard-viewer.sbs-realestate .sidebar .re-listing.open .re-more-toggle::after { content: " \2212"; }
#standard-viewer.sbs-realestate .sidebar .re-more-body { margin-top: 0.8rem; font-size: 0.86rem; line-height: 1.6; color: #3d434c; }
#standard-viewer.sbs-realestate .sidebar .re-more-body p { margin: 0 0 0.7rem; }
#standard-viewer.sbs-realestate .sidebar .re-features { margin: 0 0 0.8rem; padding-left: 1.1rem; }
#standard-viewer.sbs-realestate .sidebar .re-mls { font-size: 0.74rem; letter-spacing: 0.08em; color: #5b626d; text-transform: uppercase; }
#standard-viewer.sbs-realestate .sidebar .re-listing-link { color: #1f2227; font-weight: 700; font-size: 0.82rem; }

/* Agent card (sits above the footer buttons) */
#standard-viewer.sbs-realestate .sidebar .re-agent { display: flex; align-items: center; gap: 14px; padding: 0.85rem 1rem; margin-bottom: 1rem; background: rgba(255,255,255,0.40); border: 1px solid var(--re-rule); border-radius: 3px; }
#standard-viewer.sbs-realestate .sidebar .re-agent-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px var(--secondary-color); }
#standard-viewer.sbs-realestate .sidebar .re-agent-info { min-width: 0; font-size: 0.8rem; color: #3d434c; line-height: 1.45; }
#standard-viewer.sbs-realestate .sidebar .re-agent-name { font-family: var(--re-serif); font-size: 1.02rem; font-weight: 600; color: #1f2227; }
#standard-viewer.sbs-realestate .sidebar .re-agent-firm { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #5b626d; margin-bottom: 2px; }
#standard-viewer.sbs-realestate .sidebar .re-agent-link { display: block; color: #1f2227; text-decoration: none; overflow-wrap: anywhere; }
#standard-viewer.sbs-realestate .sidebar .re-agent-link:hover { text-decoration: underline; }
@media (min-width: 1400px) {
    #standard-viewer.sbs-realestate .sidebar { border-radius: 6px; }
    #standard-viewer.sbs-realestate .sidebar .tab-nav { border-radius: 0; }
    #standard-viewer.sbs-realestate .sidebar .tab-btn.active:first-child,
    #standard-viewer.sbs-realestate .sidebar .tab-btn.active:last-child { border-radius: 0; }
    #standard-viewer.sbs-realestate .sidebar .re-listing { border-radius: 6px 6px 0 0; }
    #standard-viewer.sbs-realestate .sidebar .sidebar-footer { border-radius: 0 0 6px 6px; }
}

/* Real Estate: keep the room list roomy. The header and agent card take space, so the footer is tightened and the keyboard
   shortcut grid (also reachable from the Instructions button) is left out of this style. */
#standard-viewer.sbs-realestate .sidebar .shortcut-dashboard { display: none !important; }
#standard-viewer.sbs-realestate .sidebar .sidebar-footer { padding: 0.9rem 1.25rem 0.8rem; }
#standard-viewer.sbs-realestate .sidebar .action-suite { margin-bottom: 0.7rem; }
#standard-viewer.sbs-realestate .sidebar .re-agent { margin-bottom: 0.7rem; padding: 0.65rem 0.85rem; }
#standard-viewer.sbs-realestate .sidebar .re-agent-photo { width: 48px; height: 48px; }
#standard-viewer.sbs-realestate .sidebar .footer-row { margin-bottom: 0.5rem; }
#standard-viewer.sbs-realestate .sidebar .re-listing { padding: 0.9rem 1.25rem 0.75rem; max-height: 42%; }
#standard-viewer.sbs-realestate .sidebar .re-price { font-size: 1.75rem; }
#standard-viewer.sbs-realestate .sidebar .re-facts { margin-top: 0.6rem; padding-top: 0.55rem; }
#standard-viewer.sbs-realestate .sidebar .main-content { min-height: 200px; }


/* ═════════════════ MLS / UNBRANDED VIEW (?mls=1 on the tour link) ═════════════════
   Property information only: no logos, no company or agent names, no phone / email / website, no action buttons, no
   copyright line. client_view.php adds class "mls-mode" to <html> for this view. The normal link is unaffected. */
html.mls-mode .client-logo,
html.mls-mode #hud-client-logo-link,
html.mls-mode #standard-viewer .action-suite,
html.mls-mode #standard-viewer #hud-btn1,
html.mls-mode #standard-viewer #hud-btn2,
html.mls-mode #basic-cta-stack,
html.mls-mode #gallery-cta-stack,
html.mls-mode #basic-btn1, html.mls-mode #basic-btn2,
html.mls-mode #gallery-btn1, html.mls-mode #gallery-btn2,
html.mls-mode #standard-viewer #hud-contact-stack,
html.mls-mode #standard-viewer #hud-phone-block,
html.mls-mode #standard-viewer #hud-website-block,
html.mls-mode #standard-viewer #sidebar-copyright,
html.mls-mode #standard-viewer #hud-footer-icon,
html.mls-mode #standard-viewer .re-agent,
html.mls-mode #standard-viewer .re-listing-link { display: none !important; }
html.mls-mode #standard-viewer #hud-footer-icon-default { display: block !important; }

/* No written scene descriptions anywhere in the tour -> no Scene Information tab (all sidebar styles); and no tab bar at all when Tour is the only tab left. */
#standard-viewer.re-no-ada .tab-btn[data-target="narrative"] { display: none !important; }
#standard-viewer.sbs-realestate .sidebar .tab-nav.re-tabs-single { display: none !important; }