/* Capitol Compass — Bad Marine LLC house look. Same dark-cyan palette and type
   scale carried across every Bad Marine property (Driver's Report, Road Issue
   Reporter, the Crash Location Resolution tool) so they all read as one company.
   The cyan is a deliberate accent — nav active state, CTAs, the current-checkpoint
   marker — not a body-copy color. */
:root {
    --bg: #121212;
    --surface: #1e1e1e;
    --surface-2: #242424;
    --line: #2a2a2a;
    --text: #eef0f3;
    --header-h: 48px;
    --bottom-nav-h: 60px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --muted: #9aa0ac;
    --muted-2: #6b7078;
    --accent: #33c7f5;
    --accent-glow: #7fe3ff;
    --accent-dim: #2a8fae;
    --accent-ink: #04222c;
    --good: #2dd4a0;
    --warn: #f5b942;
    --danger: #e5484d;
    color-scheme: dark;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background:
        radial-gradient(1200px 600px at 50% -10%, #14171d 0%, var(--bg) 60%),
        var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
}

a { color: var(--accent-glow); }
a:hover { color: var(--accent); }

/* Themed focus ring (not the browser default white box) — also what Blazor's FocusOnNavigate
   (App.razor targets "h1") shows after every route change, so it needs to read as intentional
   against this dark theme rather than a jarring flash. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

h1:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.page {
    max-width: 44rem;
    margin: 0 auto;
}

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

/* --- Header: compact 48px sticky strip. Title/lede/disclaimer that used to live here now live in
   InfoPopover; the 5-item text nav is now the 4-item BottomNav. --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: var(--header-h);
    padding: 0 0.85rem;
    padding-top: var(--safe-top);
    height: calc(var(--header-h) + var(--safe-top));
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    text-decoration: none;
    color: var(--text);
}

.site-logo-mark {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
}

.site-logo-text {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-spacer {
    flex: 1 1 auto;
}

/* EN/ES toggle — same footprint as the sibling Bad Marine apps' header toggle */
.lang-toggle {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.lang-toggle button {
    background: transparent;
    color: var(--muted);
    border: 0;
    padding: 4px 9px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 32px;
}

.lang-toggle button.on {
    background: var(--accent);
    color: var(--accent-ink);
}

/* --- [?] info popover --- */
.info-wrap {
    position: relative;
    flex: none;
}

.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
}

.info-btn:hover, .info-btn[aria-expanded="true"] {
    color: var(--accent);
    border-color: var(--accent);
}

.info-overlay {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: transparent;
}

.info-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 26;
    width: 16.5rem;
    max-width: calc(100vw - 1.7rem);
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.info-panel p {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.info-disclaimer {
    color: var(--muted);
    font-size: 0.78rem !important;
}

.info-close {
    font-size: 0.82rem;
}

.feedback-email {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.8rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 0.4rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    font-size: 0.88rem;
}

.feedback-email:hover {
    background: var(--accent-glow);
}

/* --- Bottom nav: thumb-reach, fixed, 4 tabs --- */
.bottom-nav {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    height: var(--bottom-nav-h);
    padding-bottom: var(--safe-bottom);
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.bn-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 48px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
}

.bn-tab .bn-icon {
    width: 1.35rem;
    height: 1.35rem;
}

.bn-tab.active {
    color: var(--accent);
}

/* --- Main content area: fills the space between the fixed header and bottom nav --- */
.page-main {
    padding: 1rem 1rem calc(1rem + var(--safe-bottom));
    min-height: calc(100vh - var(--header-h) - var(--safe-top) - var(--bottom-nav-h) - var(--safe-bottom));
}

button.primary {
    background: var(--accent);
    color: var(--accent-ink);
    border: 0;
    padding: 0.55rem 1.1rem;
    border-radius: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
}

button.primary:hover {
    background: var(--accent-glow);
}

button.primary:disabled {
    background: var(--surface-2);
    color: var(--muted-2);
    cursor: not-allowed;
}

button.link-btn {
    background: none;
    border: 0;
    color: var(--accent-glow);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-align: left;
}

.error {
    color: var(--danger);
    font-weight: 600;
}

/* --- Global search bar (Home + Directory + Navigator's destination search) --- */
.search-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 0.85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
}

.search-bar:focus-within {
    border-color: var(--accent);
}

.search-icon {
    flex: none;
    color: var(--muted);
}

.search-bar input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    padding: 0.7rem 0;
}

.search-bar input[type="search"]:focus {
    outline: none;
}

/* Hide the browser's own search-cancel glyph — Directory supplies its own themed clear button, and
   without this the two render side by side. */
.search-bar input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-results {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    overflow: hidden;
}

.search-results li + li {
    border-top: 1px solid var(--line);
}

.search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.5rem 0.85rem;
    background: var(--surface);
    color: var(--text);
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.search-result:hover {
    background: var(--surface-2);
}

.search-result-floor {
    flex: none;
    color: var(--muted);
    font-size: 0.82rem;
}

.search-results .nav-empty {
    padding: 0.6rem 0.85rem;
    color: var(--muted);
}

/* --- Home: compact single-row list tiles instead of a card stack --- */
.tile-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.tile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 60px;
    padding: 0.6rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    text-decoration: none;
    color: var(--text);
}

.tile:hover {
    border-color: var(--accent);
}

.tile-icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent);
}

.tile-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tile-title {
    font-size: 1rem;
    font-weight: 700;
}

.tile-desc {
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-chevron {
    flex: none;
    color: var(--muted-2);
}

/* Machine-translation notice — slim strip under the header, ES only, until UNL review */
.mt-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0.85rem 1rem 0;
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--warn);
    border-radius: 0.4rem;
}

.mt-notice button {
    flex: none;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.mt-notice button:hover {
    color: var(--text);
}

/* --- Navigator: unified route builder --- */

/* Visually hidden but left in the DOM for screen readers (FocusOnNavigate + the header logo/nav
   already carry the visible page identity, so most pages don't need a second, visible title). */
.nav-label-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.route-builder {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nav-q {
    margin: 1.25rem 0 0.5rem;
}

/* From/To header — sticky just under the site header, replaces the old "Step 1/2" wizard. */
.route-card {
    position: sticky;
    top: calc(var(--header-h) + var(--safe-top));
    z-index: 15;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.75rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
}

.route-help {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: none;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    margin: -0.2rem -0.2rem 0 0;
}

.route-help:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.route-row {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.route-row-label {
    flex: none;
    /* Sized by content, not a fixed width — "FROM"/"TO" and Spanish's longer "DESDE"/"A" both need
       to fit without clipping. */
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.route-row-value {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.route-row-value.active {
    border-color: var(--accent);
    color: var(--accent-glow);
}

.route-swap {
    grid-column: 2;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--accent-glow);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
}

.route-swap:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Not :disabled — a disabled button swallows the tap with zero feedback, which just reads as
   broken. This still looks visibly "not ready yet," but stays clickable so Swap() can explain
   what's missing. */
.route-swap.muted {
    color: var(--muted);
}

/* Floating "start route" bar — appears the instant both ends are set, so there's no separate
   button to scroll down and find past a long results list. */
.route-cta {
    position: sticky;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 0.6rem);
    z-index: 15;
    display: flex;
    justify-content: center;
    padding: 0 0.1rem;
}

.route-cta .primary {
    width: 100%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* On-demand "get your bearings" overlay (was a mandatory first screen; now opt-in via the [i]
   button on the route card). */
.nav-help-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(8, 9, 11, 0.72);
}

.nav-help-panel {
    width: 100%;
    max-width: 26rem;
    max-height: 88vh;
    overflow-y: auto;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.nav-help-close {
    display: block;
    margin: 0 0 0.5rem auto;
}

/* --- Start-point picker (interactive floor plan) --- */
.spp {
    position: relative;
}

/* Floating pill overlay on top of the map instead of a row above it — retains map state/scroll
   position when switching floors. */
.spp-floors {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(2px);
}

.spp-floors button {
    background: transparent;
    color: var(--muted);
    border: 0;
    border-right: 1px solid var(--line);
    padding: 0.35rem 0.7rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.spp-floors button:last-child {
    border-right: 0;
}

.spp-floors button.on {
    background: var(--accent);
    color: var(--accent-ink);
}

.spp-hint {
    color: var(--muted);
    font-size: 0.9rem;
    /* .spp-floors is absolutely positioned (floats over the map), so it no longer holds its own
       row in flow — without this, this text would slide up underneath the floating pills instead
       of sitting below them. */
    margin: 2.4rem 0 0.5rem;
}

.spp-map {
    display: block;
    width: 100%;
    max-width: 30rem;
    /* Cap the height so the plan doesn't fill a whole phone screen on its own. */
    max-height: 46vh;
    height: auto;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
}

.spp-street { fill: #202329; }
.spp-street-line { stroke: #3a3f48; stroke-width: 0.5; stroke-dasharray: 3 3; }
.spp-street-name { fill: var(--muted-2); font-size: 4px; font-weight: 600; letter-spacing: 0.05em; }
.spp-mall { fill: var(--muted-2); font-size: 4px; }
.spp-compass { stroke: var(--muted); stroke-width: 1; }
.spp-compass-head { fill: var(--muted); }
.spp-compass-n { fill: var(--text); font-size: 6px; font-weight: 700; }

.spp-bldg { fill: var(--surface-2); stroke: var(--muted); stroke-width: 0.8; }
.spp-court { fill: var(--bg); }
.spp-rotunda { fill: var(--bg); stroke: var(--accent-dim); stroke-width: 1; }
.spp-entrance { fill: var(--accent); }
.spp-entrance-minor { fill: var(--muted-2); }

.spp-dot { cursor: pointer; }
.spp-dot circle { fill: var(--panel-2, #1c1f25); stroke: var(--accent); stroke-width: 1; }
.spp-dot text { fill: var(--text); font-size: 4.4px; font-weight: 700; pointer-events: none; }
.spp-dot:hover circle { fill: var(--accent-dim); }
.spp-dot.sel circle { fill: var(--accent); }
.spp-dot.sel text { fill: var(--accent-ink); }
.spp-dot-ring { fill: none; stroke: var(--accent); stroke-width: 0.7; stroke-dasharray: 2 1.5; }
.spp-dot:focus { outline: none; }
.spp-dot:focus circle { stroke: var(--accent-glow); stroke-width: 1.6; }

.spp-legend {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.3rem;
}

.spp-legend button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    text-align: left;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 0.35rem;
    padding: 0.4rem 0.55rem;
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    box-sizing: border-box;
}

.spp-legend button:hover { border-color: var(--accent); }
.spp-legend button.on { border-color: var(--accent); background: var(--surface-2); }

.spp-legend-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 0.78rem;
    font-weight: 700;
}

.spp-legend button.on .spp-legend-num { background: var(--accent-glow); }

.spp-legend-tag {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--accent-glow);
    text-transform: lowercase;
}

/* Site overview — the real aerial photo + schematic building, step one of the Navigator setup */
.sov-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    cursor: pointer;
}

.sov-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) brightness(0.85);
}

.sov-shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(8, 9, 11, 0) 40%, rgba(8, 9, 11, 0.55) 100%);
}

.sov-compass {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.sov-compass-arrow {
    width: 2px;
    height: 20px;
    background: var(--text);
    margin: 0 auto 2px;
    position: relative;
}

.sov-compass-arrow::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid var(--text);
}

/* Real photo covers 400m; the building's real 437ft/133m square footprint sits centered in it. */
.sov-bldg {
    position: absolute;
    left: 33.35%;
    top: 33.35%;
    width: 33.3%;
    height: 33.3%;
}

.sov-tap-hint {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    background: rgba(8, 9, 11, 0.82);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 0.5rem 0.9rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

.sov-credit {
    color: var(--muted-2);
    font-size: 0.72rem;
    margin: 0.4rem 0 0.8rem;
}

/* Names what the photo actually is — top-right, clear of the compass (top-left). */
.sov-label {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.25rem 0.55rem;
    background: rgba(8, 9, 11, 0.72);
    border: 1px solid var(--line);
    border-radius: 20px;
    color: var(--text);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sov-osm-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0.6rem 1rem;
    margin: 0 0 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--accent-glow);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
}

.sov-osm-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.nav-results {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    overflow: hidden;
}

.nav-results li + li {
    border-top: 1px solid var(--line);
}

.nav-results li button {
    display: block;
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    text-align: left;
    color: var(--text);
    background: var(--surface);
    border: 0;
    padding: 0.6rem 0.75rem;
    font: inherit;
    cursor: pointer;
}

.nav-results li button:hover {
    background: var(--surface-2);
}

.nav-results .nav-empty {
    padding: 0.6rem 0.75rem;
    color: var(--muted);
}

.nav-progress {
    color: var(--muted);
    font-size: 0.95rem;
}

.nav-instruction {
    font-size: 1.25rem;
    font-weight: 600;
    background: var(--surface-2);
    border-left: 4px solid var(--accent);
    padding: 0.9rem 1rem;
    border-radius: 0 0.4rem 0.4rem 0;
}

/* Persistent step counter — sticky right under the header, so it never scrolls out of view or gets
   buried inside the drawer/dense text below it. Used by both Navigator's route-run view and Tour. */
.breadcrumb-bar {
    position: sticky;
    top: calc(var(--header-h) + var(--safe-top));
    z-index: 15;
    margin: 0 -1rem;
    padding: 0.6rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
}

/* Floor-change callout — never a silent jump to the next floor's map. */
.transition-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--accent);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0.6rem 0;
}

.transition-icon {
    flex: none;
    font-size: 1.4rem;
    line-height: 1;
}

.transition-detail {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 400;
}

.nav-controls {
    display: flex;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.nav-controls button:not(.primary) {
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 0.55rem 1.1rem;
    border-radius: 0.4rem;
    font-size: 1rem;
    cursor: pointer;
    min-height: 48px;
}

.nav-controls button:not(.primary):hover {
    border-color: var(--accent);
}

.nav-controls button:disabled {
    color: var(--muted-2);
    cursor: not-allowed;
    opacity: 0.4;
}

/* --- Map viewport: the interactive canvas gets the bulk of the screen instead of a small inline
   diagram — used by Navigator's route-run view and Tour's per-stop view. --- */
.map-viewport {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map-floor-label {
    align-self: flex-start;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 0.4rem;
}

.floor-schematic {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
    max-height: 60vh;
    margin: 0 0 0.25rem;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    background: var(--surface);
}

/* Navigator's route-run view: the map (now zoomed to the active leg — see FloorSchematic) fills
   essentially the whole screen above the persistent turn-by-turn drawer, instead of sharing space
   with a separate turn-card. */
.map-viewport-fill {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
}

.map-viewport-fill .floor-schematic {
    max-height: 58vh;
}

/* --- Bottom sheet: collapsible detail panel under the map (checkpoints, tour stops, directions).
   Sticks to the bottom of the content flow, above the fixed BottomNav. No drag gesture — tap the
   handle to expand/collapse. --- */
.bottom-sheet {
    position: sticky;
    /* Sticks just above the fixed BottomNav, not behind it. */
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    z-index: 5;
    margin: 0.75rem -1rem 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 0.75rem 0.75rem 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
}

.bs-handle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 48px;
    padding: 0.85rem 1rem 0.55rem;
    background: none;
    border: 0;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.bs-grip {
    flex: none;
    width: 2rem;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    position: absolute;
    left: 50%;
    top: 0.4rem;
    transform: translateX(-50%);
}

/* Rich variant (SummaryClickable="false") — HeaderContent has real buttons in it, so only this
   dedicated top strip toggles the sheet; the summary area below it is a plain div. */
.bs-handle-rich {
    position: relative;
    padding-top: 1.1rem;
}

.bs-grip-btn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.bs-grip-btn .bs-grip {
    position: static;
    transform: none;
}

.bs-grip-btn .bs-chevron {
    width: 0.9rem;
    height: 0.9rem;
}

.bs-handle-rich .bs-summary {
    display: block;
    padding: 0 1rem 0.6rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.bs-summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-chevron {
    flex: none;
    color: var(--muted);
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}

.bottom-sheet.expanded .bs-chevron {
    transform: rotate(-90deg);
}

.bs-body {
    max-height: 45vh;
    overflow-y: auto;
    padding: 0 1rem 0.85rem;
}

.bs-body ol {
    margin: 0;
    padding-left: 1.2rem;
}

.bs-body li {
    margin: 0.35rem 0;
}

.bs-body li button.link-btn {
    color: var(--muted);
    text-decoration: none;
}

.bs-body li button.link-btn:hover {
    color: var(--text);
    text-decoration: underline;
}

.bs-body li.current button.link-btn {
    color: var(--text);
    font-weight: 700;
}

.fs-current-ring {
    animation: fs-pulse 1.6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes fs-pulse {
    0%, 100% { r: 4.6; opacity: 1; }
    50% { r: 6.2; opacity: 0.55; }
}

/* --- Tour --- */
.tour-note {
    max-width: 44rem;
    margin: 1rem 0;
    padding: 0.7rem 0.95rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 0 0.4rem 0.4rem 0;
}

/* Compact pre-start hero — replaces the old lede paragraph + plain stop-name list. */
.tour-hero {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 1rem 1.1rem;
    margin: 0.75rem 0;
}

.tour-hero-stats {
    margin: 0 0 0.35rem;
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 800;
}

.tour-hero-sub {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.tour-start-btn {
    display: block;
    width: 100%;
    margin: 0.75rem 0 0.4rem;
}

.tour-source {
    font-size: 0.85rem;
    color: var(--muted-2);
}

.tour-blurb {
    font-size: 1.05rem;
    line-height: 1.6;
}

.tour-look {
    background: var(--surface-2);
    border-left: 4px solid var(--accent);
    padding: 0.8rem 1rem;
    border-radius: 0 0.4rem 0.4rem 0;
    line-height: 1.55;
}

.tour-directions {
    margin: 0.75rem 0 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    padding: 0 0.9rem;
}

.tour-directions summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
}

.tour-directions ol {
    margin: 0 0 0.85rem;
    line-height: 1.6;
}

/* Always-visible stop strip — replaces the old "All N stops" expand-to-see BottomSheet, which
   covered the map while open. Sticky just above the bottom nav, same tier as Navigator's floating
   CTA bar. */
.tour-chip-strip {
    position: sticky;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    z-index: 15;
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem -1rem 0;
    padding: 0.6rem 1rem 0.8rem;
    overflow-x: auto;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
    /* A visible (if slim, themed) scrollbar — see .dir-chips: a desktop mouse has no swipe gesture,
       so a hidden scrollbar left no way to reach the cut-off chips. */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.tour-chip-strip::-webkit-scrollbar {
    height: 6px;
}

.tour-chip-strip::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
}

.tour-chip-strip::-webkit-scrollbar-track {
    background: transparent;
}

.tour-chip {
    flex: none;
    min-height: 40px;
    padding: 0 0.9rem;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.tour-chip.on {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}

/* --- FAQ --- */
/* The 🐛 feedback icon lives only here — the page someone visiting with a complaint would
   actually go to — instead of in the global header. */
.faq-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.faq-title-row h1 {
    margin: 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.75rem 0;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 0 0.95rem;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 52px;
    padding: 0.7rem 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    color: var(--accent);
}

.faq-chevron {
    flex: none;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.faq-item[open] .faq-chevron {
    transform: rotate(90deg);
}

.faq-body {
    margin: 0 0 0.9rem;
}

.faq-body ul {
    margin: 0 0 0.7rem;
    padding-left: 1.1rem;
    line-height: 1.55;
    color: var(--muted);
}

.faq-body li + li {
    margin-top: 0.3rem;
}

.faq-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 0.45rem;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
}

.faq-action:hover {
    background: var(--accent-glow);
}

.faq-link {
    display: inline-block;
    color: var(--accent-glow);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
}

.faq-link:hover {
    color: var(--accent);
}

.faq-foot {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--muted-2);
}

/* --- Directory --- */

/* Search bar + filter chips pinned together just under the (also sticky) site header. */
.dir-controls {
    position: sticky;
    top: calc(var(--header-h) + var(--safe-top));
    z-index: 15;
    background: var(--bg);
    padding: 0.75rem 0 0.6rem;
    margin: 0 0 0.25rem;
}

.search-clear {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
}

.search-clear:hover {
    color: var(--text);
}

.dir-chips {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-bottom: 0.35rem;
    overflow-x: auto;
    /* A visible (if slim, themed) scrollbar — on a touch screen this is swipeable regardless, but a
       desktop mouse has no swipe gesture, and a hidden scrollbar left no way to reach cut-off chips. */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.dir-chips::-webkit-scrollbar {
    height: 6px;
}

.dir-chips::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
}

.dir-chips::-webkit-scrollbar-track {
    background: transparent;
}

.dir-chip {
    flex: none;
    min-height: 40px;
    padding: 0 0.9rem;
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.dir-chip.on {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}

/* Collapsible floor group — collapsed by default so browsing doesn't mean scrolling past every
   floor's worth of entries just to reach the one you want. */
.dir-group + .dir-group {
    margin-top: 0.4rem;
}

.dir-group-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 48px;
    padding: 0 0.2rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.dir-group-chevron {
    color: var(--muted);
    transition: transform 0.15s ease;
}

.dir-group-chevron.expanded {
    transform: rotate(90deg);
}

.dir-group-count {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.dir-list {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dir-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 60px;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
}

.dir-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: 0.3rem 0.5rem;
    background: var(--surface-2);
    color: var(--accent);
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
}

.dir-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dir-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    /* Wrap to 2 lines instead of hard-truncating — a senator's name cut to "Sen. Victor R…" isn't
       useful, and the badge + two action buttons don't leave a full line's width on a phone. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dir-card-sub {
    font-size: 0.8rem;
    color: var(--muted);
}

.dir-card-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Compact icon button (not a text chip — "Sen. Victor Rountree" needs the width more than a
   spelled-out "Bio" label does) for the secondary action; the route button stays the filled
   primary action. */
.dir-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    background: var(--surface-2);
    color: var(--accent-glow);
    border: 1px solid var(--line);
    border-radius: 50%;
    text-decoration: none;
}

.dir-action-icon:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.dir-action-route {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 50%;
    text-decoration: none;
}

.dir-action-route:hover {
    background: var(--accent-glow);
}

.dir-more {
    display: block;
    width: 100%;
    min-height: 48px;
    text-align: center;
    color: var(--accent-glow);
}

/* "bio ↗" link on a senator row (Navigator) — official page on nebraskalegislature.gov */
.bio-link {
    display: inline-block;
    margin-left: 0.5rem;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-glow);
    text-decoration: none;
}

.bio-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

input[type="search"] {
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.4rem;
    padding: 0.5rem;
    font-size: 1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

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

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

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

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

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #2a2d34;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #33c7f5;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: var(--accent-glow);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}