@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ===== Base Reset ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #fafaf9;
    --bg-secondary: #f5f2ed;
    --bg-panel: #ffffff;
    --bg-elevated: #f8f6f1;
    --bg-dark: #09090b;
    --bg-dark-card: #141820;
    --bg-dark-subtle: #1a2430;
    --border: #e5e0d8;
    --border-subtle: #ece8e0;
    --border-dark: rgba(255,255,255,0.08);
    --text-primary: #1a1a1a;
    --text-secondary: #5c5549;
    --text-muted: #998f82;
    --text-on-dark: #e8e4de;
    --text-dim: rgba(232,228,222,0.5);
    /* Brand accent = brass. Emerald has been demoted from a UI colour to
       a data-only signal — it survives in --score-high and in JS map
       config (HIGH_OPP) where it actually means "high opportunity",
       and nowhere else. UI controls, focus rings, links, and CTAs are
       brass so the editorial / cartographic-instrument voice carries
       through every surface. */
    --accent: #d4a44a;
    --accent-hover: #b88a32;
    --accent-deep: #8a6618;
    --accent-light: #f4e8c8;
    --accent-dim: rgba(212,164,74,0.08);
    --accent-2: #d4a44a;
    --score-high: #2d7a5f;
    --score-mid: #c49936;
    --score-low: #c4553a;
    --score-high-bg: rgba(45,122,95,0.08);
    --score-mid-bg: rgba(196,153,54,0.08);
    --score-low-bg: rgba(196,85,58,0.08);
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-mono: 'IBM Plex Sans Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
    --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
    --motion-ease-out: cubic-bezier(0.16,1,0.3,1);
    --motion-ease-settle: cubic-bezier(0.22,1,0.36,1);
    --motion-ease-shift: cubic-bezier(0.33,1,0.68,1);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ===== Scroll Reveal ===== */
.reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.9s var(--motion-ease-out),
                transform 0.9s var(--motion-ease-out);
}
.reveal.visible {
    opacity: 1;
    transform: none;
}

/* ================================================================
   LANDING PAGE
   ================================================================ */

/* -- Nav -- */
.landing-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    height: 64px;
    background: transparent;
    transition: background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
}
.landing-nav.scrolled {
    background: rgba(250,250,249,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 var(--border);
}

.nav-brand-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-brand {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-on-dark);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: color 0.3s;
}
.landing-nav.scrolled .nav-brand { color: var(--text-primary); }

.nav-coord {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: rgba(232,228,222,0.3);
    letter-spacing: 0.05em;
}
.landing-nav.scrolled .nav-coord { color: var(--text-muted); }

.nav-cta {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(232,228,222,0.55);
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.01em;
}
.nav-cta:hover { color: var(--text-on-dark); }
.landing-nav.scrolled .nav-cta { color: var(--text-secondary); }
.landing-nav.scrolled .nav-cta:hover { color: var(--accent); }

.landing-nav .nav-cta {
    padding-bottom: 0.08rem;
    border-bottom: 1px solid transparent;
}

.landing-nav .nav-cta:hover {
    border-color: currentColor;
}

/* -- Hero -- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    padding: 0 3rem 8vh;
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-inner {
    max-width: 780px;
    position: relative;
    z-index: 2;
}

.hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255,255,255,0.03) 14%,
            transparent 29%,
            transparent 63%,
            rgba(255,255,255,0.025) 78%,
            transparent 100%);
}

.hero-atmosphere::before {
    content: '';
    position: absolute;
    inset: -18% -10% -12% -10%;
    background:
        radial-gradient(circle at 18% 34%, rgba(212,164,74,0.18) 0%, rgba(212,164,74,0) 28%),
        radial-gradient(circle at 72% 28%, rgba(45,122,95,0.22) 0%, rgba(45,122,95,0) 34%),
        radial-gradient(circle at 56% 74%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 24%);
    opacity: 0.92;
    animation: heroGlowDrift 16s var(--motion-ease-shift) infinite alternate;
}

.hero-atmosphere::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 132px 132px, 132px 132px;
    opacity: 0.18;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.78), rgba(0,0,0,0.34) 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.78), rgba(0,0,0,0.34) 62%, transparent 100%);
    animation: heroGridDrift 18s linear infinite;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-on-dark);
    margin-bottom: 2.5rem;
}

/* Hero staggered load animation */
.hero .hero-title,
.hero .hero-search,
.hero .hero-provenance {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s var(--motion-ease-out),
                transform 0.85s var(--motion-ease-settle);
    will-change: transform, opacity;
}

.hero .hero-search {
    transform: translateY(32px) scale(0.985);
    transform-origin: left center;
}

.hero .hero-provenance {
    transform: translateY(24px);
}
.hero.hero-loaded .hero-title {
    opacity: 1;
    transform: none;
    transition-delay: 0.12s;
}
.hero.hero-loaded .hero-search {
    opacity: 1;
    transform: none;
    transition-delay: 0.34s;
}
.hero.hero-loaded .hero-provenance {
    opacity: 1;
    transform: none;
    transition-delay: 0.56s;
}

.hero-search {
    display: flex;
    max-width: 520px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.hero-search:focus-within {
    border-color: rgba(45,122,95,0.4);
    box-shadow: 0 0 0 3px rgba(45,122,95,0.08);
}

.hero-search input {
    flex: 1;
    padding: 0.8rem 1rem;
    background: none;
    border: none;
    color: var(--text-on-dark);
    font-family: var(--font);
    font-size: 0.92rem;
    outline: none;
}
.hero-search input::placeholder { color: rgba(232,228,222,0.25); }

.hero-search button {
    padding: 0.8rem 1.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.hero-search button:hover { background: var(--accent-hover); }

.hero-provenance {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(232,228,222,0.2);
    letter-spacing: 0.06em;
}

/* -- Provenance bar (static trust strip) -- */
.provenance-bar {
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 1.2rem 3rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
    gap: 0;
}

.provenance-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 2rem;
    border-right: 1px solid var(--border-subtle);
}
.provenance-item:last-child {
    border-right: none;
}

.provenance-name {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.provenance-desc {
    font-size: 0.58rem;
    color: var(--text-muted);
    opacity: 0.65;
    letter-spacing: 0.01em;
}

/* -- Overline (shared) -- */
.overline {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-2);
    margin-bottom: 0.75rem;
}

/* -- London section (spatial analysis) -- */
.london-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 7rem 3rem;
}

.london-section.reveal,
.evidence-section.reveal,
.journey-section.reveal,
.cta-inner.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

.london-text > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--motion-ease-out),
                transform 0.8s var(--motion-ease-settle);
    will-change: transform, opacity;
}

.london-section.visible .london-text .overline {
    opacity: 1;
    transform: none;
    transition-delay: 0.06s;
}

.london-section.visible .london-text h2 {
    opacity: 1;
    transform: none;
    transition-delay: 0.14s;
}

.london-section.visible .london-text p {
    opacity: 1;
    transform: none;
    transition-delay: 0.24s;
}

.london-section.visible .dimension-list {
    opacity: 1;
    transform: none;
    transition-delay: 0.34s;
}

.london-text h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.london-text p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.dimension-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.dimension-list li {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    padding-left: 1.2rem;
    position: relative;
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.7s var(--motion-ease-out),
                transform 0.7s var(--motion-ease-settle);
    will-change: transform, opacity;
}

.london-section.visible .dimension-list li {
    opacity: 1;
    transform: none;
}

.london-section.visible .dimension-list li:nth-child(1) { transition-delay: 0.42s; }
.london-section.visible .dimension-list li:nth-child(2) { transition-delay: 0.48s; }
.london-section.visible .dimension-list li:nth-child(3) { transition-delay: 0.54s; }
.london-section.visible .dimension-list li:nth-child(4) { transition-delay: 0.60s; }
.london-section.visible .dimension-list li:nth-child(5) { transition-delay: 0.66s; }

.hex-grid {
    width: 100%;
    min-height: 320px;
    background:
        radial-gradient(circle at 22% 24%, rgba(45,122,95,0.08), transparent 28%),
        radial-gradient(circle at 78% 72%, rgba(212,164,74,0.10), transparent 26%),
        var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(42px) scale(0.96);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
    transition: opacity 0.9s var(--motion-ease-out),
                transform 0.95s var(--motion-ease-settle),
                box-shadow 0.95s var(--motion-ease-settle);
}

.hex-grid::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(26,26,26,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,26,26,0.035) 1px, transparent 1px);
    background-size: 56px 56px, 56px 56px;
    opacity: 0.35;
    pointer-events: none;
}

.hex-grid::after {
    content: '';
    position: absolute;
    top: -22%;
    bottom: -22%;
    left: -42%;
    width: 34%;
    background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 48%, rgba(255,255,255,0) 100%);
    opacity: 0;
    pointer-events: none;
}

.london-section.visible .hex-grid {
    opacity: 1;
    transform: none;
    transition-delay: 0.28s;
    box-shadow: 0 22px 36px rgba(26,26,26,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
}

.hex-grid.hex-built::after {
    animation: hexGridSweep 1.1s var(--motion-ease-settle) 1 both;
}

.hex-cell {
    position: absolute;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(0.76);
    transform-origin: center center;
    filter: saturate(0.88) blur(0.35px);
    transition: opacity 0.48s var(--motion-ease-out),
                transform 0.72s var(--motion-ease-settle),
                filter 0.72s var(--motion-ease-settle),
                box-shadow 0.72s var(--motion-ease-settle);
    transition-delay: var(--hex-delay, 0ms);
    will-change: transform, opacity;
}

.hex-cell.hex-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1) blur(0);
    box-shadow: 0 0 20px rgba(255,255,255,0.08);
}

.dimension-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-2);
}

/* -- Evidence section (competitor mapping) -- */
.evidence-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 6rem 3rem;
    text-align: center;
}

.evidence-section > h2,
.evidence-section .product-frame,
.evidence-section .evidence-caption {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s var(--motion-ease-out),
                transform 0.85s var(--motion-ease-settle);
    will-change: transform, opacity;
}

.evidence-section.visible > h2 {
    opacity: 1;
    transform: none;
    transition-delay: 0.06s;
}

.evidence-section.visible .product-frame {
    opacity: 1;
    transform: none;
    transition-delay: 0.18s;
}

.evidence-section.visible .evidence-caption {
    opacity: 1;
    transform: none;
    transition-delay: 0.82s;
}

.evidence-section h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 2.5rem;
    color: var(--text-primary);
}

.product-frame {
    margin-bottom: 2rem;
    transform-origin: center top;
}

.frame-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background:
        radial-gradient(circle at 26% 28%, rgba(45,122,95,0.15), transparent 24%),
        radial-gradient(circle at 72% 66%, rgba(212,164,74,0.12), transparent 24%),
        var(--bg-dark);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-dark);
    overflow: hidden;
    transform: translateY(18px) scale(0.97);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform 1s var(--motion-ease-settle),
                box-shadow 1s var(--motion-ease-settle);
}

.frame-viewport::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 58px 58px, 58px 58px;
    opacity: 0.16;
    pointer-events: none;
}

.frame-viewport::after {
    content: '';
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -38%;
    width: 30%;
    background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 52%, rgba(255,255,255,0) 100%);
    opacity: 0;
    pointer-events: none;
}

.evidence-section.visible .frame-viewport {
    transform: none;
    box-shadow: 0 24px 50px rgba(9,9,11,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
}

.evidence-section.visible .frame-viewport::after {
    animation: viewportSweep 1.35s var(--motion-ease-shift) 0.7s 1 both;
}

/* Decorative hex outlines inside the frame */
.frame-hex {
    position: absolute;
    width: 80px;
    height: 92px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
    opacity: 0.58;
    transform: translateY(18px) scale(0.94);
    transition: opacity 0.85s var(--motion-ease-out),
                transform 0.85s var(--motion-ease-settle);
}
.frame-hex--1 { top: 15%; left: 20%; width: 100px; height: 115px; }
.frame-hex--2 { top: 30%; left: 50%; width: 80px; height: 92px; }
.frame-hex--3 { top: 10%; right: 15%; width: 90px; height: 104px; }

.evidence-section.visible .frame-hex {
    opacity: 1;
    transform: none;
}

.evidence-section.visible .frame-hex--1 { transition-delay: 0.34s; }
.evidence-section.visible .frame-hex--2 { transition-delay: 0.42s; }
.evidence-section.visible .frame-hex--3 { transition-delay: 0.50s; }

/* Dots representing competitor locations */
.frame-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.6;
    will-change: transform, box-shadow;
}
.frame-dot--1 { top: 25%; left: 25%; }
.frame-dot--2 { top: 30%; left: 28%; width: 6px; height: 6px; opacity: 0.4; }
.frame-dot--3 { top: 35%; left: 55%; width: 10px; height: 10px; opacity: 0.7; }
.frame-dot--4 { top: 38%; left: 58%; width: 6px; height: 6px; opacity: 0.45; }
.frame-dot--5 { top: 20%; right: 20%; width: 7px; height: 7px; opacity: 0.5; }
.frame-dot--gap {
    top: 60%;
    left: 42%;
    width: 28px;
    height: 28px;
    background: none;
    border: 2px dashed rgba(212,164,74,0.35);
    opacity: 1;
}

.evidence-section.visible .frame-dot--1 {
    animation: frameDotPulse 1.45s ease-in-out 0.95s 2;
}

.evidence-section.visible .frame-dot--2 {
    animation: frameDotPulse 1.45s ease-in-out 1.08s 2;
}

.evidence-section.visible .frame-dot--3 {
    animation: frameDotPulse 1.5s ease-in-out 1.18s 2;
}

.evidence-section.visible .frame-dot--4 {
    animation: frameDotPulse 1.4s ease-in-out 1.30s 2;
}

.evidence-section.visible .frame-dot--5 {
    animation: frameDotPulse 1.45s ease-in-out 1.42s 2;
}

.evidence-section.visible .frame-dot--gap {
    animation: gapBreathe 1.75s ease-in-out 1.18s 2;
}

.frame-annotations {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    padding: 1rem 0 0;
}

.frame-annotation {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s var(--motion-ease-out),
                transform 0.65s var(--motion-ease-settle);
}

.evidence-section.visible .frame-annotation {
    opacity: 1;
    transform: none;
}

.evidence-section.visible .frame-annotation:nth-child(1) { transition-delay: 0.72s; }
.evidence-section.visible .frame-annotation:nth-child(2) { transition-delay: 0.84s; }
.evidence-section.visible .frame-annotation:nth-child(3) { transition-delay: 0.96s; }

.frame-annotation i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.frame-annotation[data-type="cluster"] i {
    background: var(--accent);
    opacity: 0.7;
}

.frame-annotation[data-type="gap"] i {
    background: none;
    border: 1.5px dashed var(--accent-2);
}

.frame-annotation[data-type="opportunity"] i {
    background: var(--accent-2);
}

.evidence-caption {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* -- Statement dark -- */
.statement-dark {
    background: var(--bg-dark);
    padding: 9rem 3rem;
}

.statement-dark p {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.3;
    color: var(--text-on-dark);
    max-width: 800px;
}

/* -- Journey filmstrip -- */
.journey-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 7rem 3rem;
}

.journey-section h2 {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--motion-ease-out),
                transform 0.8s var(--motion-ease-settle);
}

.journey-section.visible h2 {
    opacity: 1;
    transform: none;
    transition-delay: 0.06s;
}

.journey-section h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 3.5rem;
    color: var(--text-primary);
}

.journey-flow {
    display: flex;
    align-items: center;
    gap: 0;
}

.journey-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.75s var(--motion-ease-out),
                transform 0.75s var(--motion-ease-settle);
    will-change: transform, opacity;
}

.journey-section.visible .journey-stage {
    opacity: 1;
    transform: none;
}

.journey-section.visible .journey-stage:nth-child(1) { transition-delay: 0.18s; }
.journey-section.visible .journey-stage:nth-child(3) { transition-delay: 0.30s; }
.journey-section.visible .journey-stage:nth-child(5) { transition-delay: 0.42s; }
.journey-section.visible .journey-stage:nth-child(7) { transition-delay: 0.54s; }

.journey-label {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.journey-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.journey-connector {
    width: 48px;
    height: 1px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 0.5rem;
    position: relative;
    top: -0.3rem;
    opacity: 0.2;
    transform: scaleX(0.35);
    transform-origin: left center;
    transition: opacity 0.65s var(--motion-ease-out),
                transform 0.65s var(--motion-ease-settle);
}

.journey-section.visible .journey-connector {
    opacity: 1;
    transform: none;
}

.journey-section.visible .journey-connector:nth-child(2) { transition-delay: 0.25s; }
.journey-section.visible .journey-connector:nth-child(4) { transition-delay: 0.37s; }
.journey-section.visible .journey-connector:nth-child(6) { transition-delay: 0.49s; }

/* -- CTA -- */
.cta-section {
    background: var(--bg-dark);
    padding: 8rem 3rem;
    text-align: center;
}

.cta-inner > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--motion-ease-out),
                transform 0.8s var(--motion-ease-settle);
    will-change: transform, opacity;
}

.cta-inner .cta-search {
    transform: translateY(32px) scale(0.985);
}

.cta-inner.visible > * {
    opacity: 1;
    transform: none;
}

.cta-inner.visible h2 { transition-delay: 0.06s; }
.cta-inner.visible .cta-search { transition-delay: 0.22s; }
.cta-inner.visible .cta-provenance { transition-delay: 0.38s; }

.cta-inner h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--text-on-dark);
    letter-spacing: -0.025em;
    margin-bottom: 2rem;
}

.cta-search {
    max-width: 520px;
    margin: 0 auto 1.5rem;
}

.cta-provenance {
    text-align: center;
}

@keyframes heroGlowDrift {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(1);
        opacity: 0.82;
    }
    50% {
        opacity: 0.98;
    }
    100% {
        transform: translate3d(4%, 3%, 0) scale(1.08);
        opacity: 0.88;
    }
}

@keyframes heroGridDrift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-36px, 26px, 0);
    }
}

@keyframes hexGridSweep {
    0% {
        transform: translate3d(-160%, 0, 0) skewX(-18deg);
        opacity: 0;
    }
    22% {
        opacity: 0.16;
    }
    55% {
        opacity: 0.34;
    }
    100% {
        transform: translate3d(260%, 0, 0) skewX(-18deg);
        opacity: 0;
    }
}

@keyframes viewportSweep {
    0% {
        transform: translate3d(-185%, 0, 0) skewX(-20deg);
        opacity: 0;
    }
    24% {
        opacity: 0.12;
    }
    58% {
        opacity: 0.32;
    }
    100% {
        transform: translate3d(280%, 0, 0) skewX(-20deg);
        opacity: 0;
    }
}

@keyframes frameDotPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(45,122,95,0);
    }
    50% {
        transform: scale(1.22);
        box-shadow: 0 0 0 12px rgba(45,122,95,0);
    }
}

@keyframes gapBreathe {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(212,164,74,0);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 16px rgba(212,164,74,0);
    }
}

/* -- Footer -- */
.landing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem 3rem;
    border-top: 1px solid var(--border);
}
.footer-brand span {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}
.footer-brand p {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
.footer-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.footer-links a {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--accent); }

.footer-coord {
    font-family: var(--font-mono);
    font-size: 0.61rem;
    color: var(--text-muted);
    opacity: 0.5;
    letter-spacing: 0.05em;
}

/* -- Logo mark (used in app.html sidebar) -- */
.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 8px;
    transform: rotate(45deg);
}
.logo-mark span {
    transform: rotate(-45deg);
    display: block;
}

/* -- Selection -- */
::selection {
    background: var(--accent-light);
    color: var(--text-primary);
}

/* -- Hidden helper -- */
[hidden] {
    display: none !important;
}

.hidden {
    display: none !important;
}

/* Client workspace shell */
.client-workspace-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.client-workspace-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.client-workspace-kicker {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.client-workspace-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.05;
    color: var(--ink);
}

.client-workspace-head p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.client-workspace-features {
    display: grid;
    gap: 0.45rem;
}

.client-workspace-feature {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: baseline;
    padding: 0.55rem 0;
    border-top: 1px solid var(--border-subtle);
}

.client-workspace-feature span {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--accent);
}

.client-workspace-feature strong {
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--ink);
}

.client-workspace-return {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
}

.client-map-badge {
    position: absolute;
    top: 1rem;
    left: 50%;
    z-index: 12;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    max-width: min(80vw, 620px);
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(20, 17, 10, 0.14);
    background: rgba(250, 250, 249, 0.9);
    box-shadow: 0 12px 34px rgba(20, 17, 10, 0.12);
    color: var(--ink);
    pointer-events: none;
}

.client-map-badge span.venturis-tooltip-kicker {
    display: block;
    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(184, 134, 46, 0.32);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #b8862e;
}

.venturis-tooltip__header--branch {
    border-bottom: 1px solid rgba(28, 22, 17, 0.15);
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
}

.venturis-tooltip__header--branch .venturis-tooltip__title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1c1611;
}


.venturis-tooltip__header--branch .venturis-tooltip__title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1c1611;
}

.client-map-badge span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

.client-map-badge strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 0.86rem;
}

body.client-mode .map-mode-primary {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}


/* ===================================================================
   BUTTONS — Cartographic instrument plates.

   The system reads as controls on a survey instrument, not SaaS pills:
   sharp corners, hairline borders, mono caps, surveyor corner ticks
   on the primary CTA. Three tiers from loud to quiet:

     .btn-primary    — solid brass plate, corner ticks, the loudest
     .btn-secondary  — outlined brass plate, transparent fill
     .btn-ghost      — outlined neutral plate, brass on hover

   No translateY-and-drop-shadow lift. Hover instead inverts the
   surface or thickens the corner ticks. The four tick marks are
   the Venturis signature — used here and on the hero, nowhere else.
   =================================================================== */
.btn-primary,
.btn-secondary,
.btn-ghost {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.78rem 1.5rem;
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-deep);
    cursor: pointer;
    white-space: nowrap;
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}

/* Surveyor corner ticks — only on .btn-primary, the brand signature */
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--accent-deep), var(--accent-deep)) top    left  / 7px 1px no-repeat,
        linear-gradient(var(--accent-deep), var(--accent-deep)) top    left  / 1px 7px no-repeat,
        linear-gradient(var(--accent-deep), var(--accent-deep)) bottom right / 7px 1px no-repeat,
        linear-gradient(var(--accent-deep), var(--accent-deep)) bottom right / 1px 7px no-repeat;
    transition: background-size 0.3s cubic-bezier(0.4,0,0.2,1);
}

.btn-primary {
    background: var(--accent);
    color: #1f1608;
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #f4e8c8;
}
.btn-primary:hover::before {
    background:
        linear-gradient(#f4e8c8, #f4e8c8) top    left  / 11px 1px no-repeat,
        linear-gradient(#f4e8c8, #f4e8c8) top    left  / 1px 11px no-repeat,
        linear-gradient(#f4e8c8, #f4e8c8) bottom right / 11px 1px no-repeat,
        linear-gradient(#f4e8c8, #f4e8c8) bottom right / 1px 11px no-repeat;
}

.btn-secondary {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent-deep);
}

.btn-secondary:hover {
    background: var(--accent);
    color: #1f1608;
}

.btn-ghost {
    border-color: var(--border);
    color: var(--text-secondary);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent-deep);
    background: var(--accent-dim);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.btn-secondary.compact,
.btn-ghost.compact {
    padding: 0.5rem 0.8rem;
    font-size: 0.68rem;
}

.btn-control {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    background: rgba(255, 252, 246, 0.86);
    color: rgba(28, 22, 17, 0.55);
    border: none;
    border-left: 1px solid rgba(28, 22, 17, 0.12);
    border-radius: 0;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background var(--transition), color var(--transition);
    line-height: 1;
}

.btn-control:first-child {
    border-left: none;
}

.btn-control:hover {
    background: rgba(255, 248, 232, 1);
    color: #1c1611;
}

.btn-control.active {
    background: #1c1611;
    color: #f1e8d6;
}

.btn-control.active .btn-control-num {
    color: #b8862e;
}

.btn-control-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(28, 22, 17, 0.4);
    letter-spacing: 0.04em;
    transition: color var(--transition);
}

.btn-control-label {
    letter-spacing: 0.18em;
}

.btn-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    transition: color var(--transition);
}

.btn-close:hover {
    color: var(--text-primary);
}

/* ===================================================================
   APP LAYOUT (map page)
   =================================================================== */

/* ===================================================================
   MAP WORKSPACE — INSTITUTIONAL SURFACE

   The map and evidence are the visual subject. Docked rails use rules and
   spacing for hierarchy; elevation is reserved for genuine overlays.
   =================================================================== */
body .decision-rail-chrome {
    border: 0;
    border-bottom: 1px solid var(--border, #e5e0d8);
    border-radius: 0;
    box-shadow: none;
}

body .decision-rail .panel-section {
    padding: 0.8rem 0.15rem 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--border, #e5e0d8);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body .decision-rail .panel-section:last-of-type {
    border-bottom: 0;
}

body .decision-rail .queue-card,
body .decision-rail .area-item {
    border: 0;
    border-bottom: 1px solid var(--border, #e5e0d8);
    border-radius: 0;
    background: transparent;
}

body .decision-rail .queue-card:hover,
body .decision-rail .area-item:hover {
    transform: none;
    border-color: var(--accent, #d4a44a);
    box-shadow: inset 2px 0 0 var(--accent, #d4a44a);
}

body .rail-collapse-button,
body .rail-expand-button,
body .decision-rail .scoped-results-mode,
body .decision-rail .scoped-results-expand,
body .decision-rail .queue-card-meta span,
body .decision-rail .queue-card-badge,
body .decision-rail .queue-card-score,
body .decision-rail .area-score,
body .decision-rail .queue-card-button,
body .decision-rail .queue-card-pin,
body .decision-rail .area-compare-btn,
body .decision-rail .site-evaluation-input {
    border-radius: 2px;
}

body .decision-rail .queue-card-step,
body .decision-signal-code,
body .decision-rail .compare-ledger-item {
    border-radius: 0;
}

body .map-mode-primary,
body .map-mode-advanced {
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 252, 246, 0.97);
}

body .map-mode-btn,
body .map-mode-advanced .map-mode-btn,
body .map-analysis-balance .analysis-balance-btn,
body .map-terrain-basis--inline .terrain-basis-btn,
body .map-street-read-sub--inline .street-read-sub-btn {
    border-radius: 0;
}

/* Compare is one analytical ledger, not a stack of promotional cards. */
body .compare-shell,
body .compare-overview,
body .compare-empty,
body .compare-card,
body .compare-stat,
body .compare-note,
body .compare-leader,
body .compare-dimension-card {
    border-radius: 0;
    background-image: none;
    box-shadow: none;
}

body .compare-card,
body .compare-stat,
body .compare-note,
body .compare-leader,
body .compare-dimension-card {
    border-width: 0 0 1px;
}

body .compare-signal,
body .compare-signal-pill,
body .compare-score,
body .compare-rank {
    border-radius: 2px;
}

/* Branch details retain the warm dossier identity but lose template glass. */
body .branch-profile-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body .branch-profile-dialog {
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(25, 23, 17, 0.18);
}

body .branch-profile-header,
body .branch-profile-overview,
body .branch-profile-fact,
body .branch-profile-card,
body .branch-profile-signal {
    border-radius: 0;
    background-image: none;
    box-shadow: none;
}

body .branch-profile-fact,
body .branch-profile-card,
body .branch-profile-signal {
    border-width: 0 0 1px;
}

body .branch-profile-kicker {
    border-radius: 2px;
}

.app-layout {
    position: relative;
    display: grid;
    grid-template-columns: 340px 1fr 380px;
    height: 100vh;
    overflow: hidden;
    transition: grid-template-columns 0.24s var(--motion-ease-shift);
}

.app-layout:has(.panel-right.hidden) {
    grid-template-columns: 340px 1fr;
}

.app-layout.left-panel-collapsed {
    grid-template-columns: 0 1fr 380px;
}

.app-layout.left-panel-collapsed:has(.panel-right.hidden) {
    grid-template-columns: 0 1fr;
}

.app-layout .panel-right.hidden {
    display: none;
}

/* -- Post-scan Arrival Overlay -- */
/* ===================================================================
   POST-SCAN DOSSIER (Venturis brand — editorial print sheet)
   =================================================================== */
.post-scan-arrival {
    --paper: var(--bg-primary, #fafaf9);
    --paper-warm: var(--bg-elevated, #f5f2ed);
    --ink: var(--text-primary, #1a1a1a);
    --ink-soft: var(--text-secondary, #5c5549);
    --ink-fade: var(--text-muted, #998f82);
    --rule: var(--border, #e5e0d8);
    --rule-soft: var(--border-subtle, #ece8e0);
    --gold: var(--accent, #d4a44a);
    --gold-soft: var(--accent-hover, #b88a32);

    position: absolute;
    inset: 0;
    z-index: 40;
    overflow-y: auto;
    background: radial-gradient(circle at 12% 8%, rgba(212,164,74,0.06) 0%, transparent 40%), linear-gradient(180deg, #faf8f2 0%, #fafaf9 34%, #f3efe7 100%);
    color: var(--ink);
    font-feature-settings: 'kern', 'ss01';
}

.post-scan-arrival::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(212,164,74,0.02) 0%, transparent 38%),
        radial-gradient(circle at 92% 96%, rgba(28,22,17,0.015) 0%, transparent 42%);
    pointer-events: none;
    z-index: 0;
}

.arrival-shell {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    min-height: 100%;
    margin: 0 auto;
    padding: 1.5rem 2rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---- MASTHEAD ---- */
.arrival-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border, #e5e0d8);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
    margin-bottom: 0.25rem;
}

.arrival-masthead-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.arrival-masthead-mark {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: var(--gold);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.arrival-masthead-tag {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-left: 1.2rem;
    border-left: 1px solid var(--rule);
    line-height: 1;
}

.arrival-telemetry-badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-soft);
    background: var(--accent-dim);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(212,164,74,0.15);
}

/* ---- MAIN + STAGES ---- */
.arrival-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ---- UNIFIED DASHBOARD GRID ---- */
.arrival-dashboard-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .arrival-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- DASHBOARD CARD WITH SPLIT HEADER ---- */
.arrival-card {
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border, #e5e0d8);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,0.06));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}

.arrival-card-header {
    background: var(--bg-elevated, #f8f6f1);
    border-bottom: 1px solid var(--border, #e5e0d8);
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.arrival-card-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.arrival-stage {
    display: flex;
    flex-direction: column;
    gap: 1.50rem;
    animation: arrival-stage-enter 320ms cubic-bezier(0.22,1,0.36,1);
}

.arrival-stage[hidden] {
    display: none !important;
}

/* ---- SECTION MARK ---- */
.arrival-section-mark {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.arrival-section-mark-glyph {
    color: var(--gold);
    letter-spacing: 0.1em;
    font-size: 0.72rem;
}

.arrival-section-mark-name {
    color: var(--ink);
}

.arrival-section-mark-status {
    margin-left: auto;
    color: var(--gold-soft);
    letter-spacing: 0.12em;
    font-weight: 600;
}

/* ---- STAGE TITLE ---- */
.arrival-stage-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ink);
    text-wrap: balance;
    margin-top: 0.1rem;
}

/* ---- STAGE LEDE ---- */
.arrival-stage-lede {
    max-width: 60ch;
    padding-left: 1.1rem;
    border-left: 2px solid var(--gold);
    margin-top: 0.2rem;
}

.arrival-stage-lede p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--ink-soft);
    letter-spacing: -0.005em;
}

/* ---- LEDGER (signals) ---- */
.arrival-ledger {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule);
    margin-top: 0.5rem;
}

.arrival-ledger-item {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, max-content) 1fr auto;
    align-items: baseline;
    column-gap: 0;
    row-gap: 0;
    padding: 0.95rem 0 0.9rem;
    border-bottom: 1px solid var(--rule-soft);
}

.arrival-ledger-item:last-child {
    border-bottom: 1px solid var(--rule);
}

.arrival-ledger-num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.04em;
}

.arrival-ledger-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    padding-right: 0.75rem;
    white-space: nowrap;
}

.arrival-ledger-leader {
    align-self: end;
    border-bottom: 1px dotted var(--rule-soft);
    height: 0.55em;
    margin: 0 0.75rem 0.32em;
    min-width: 1.2rem;
}

.arrival-ledger-value {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: right;
}

.arrival-ledger-note {
    grid-column: 2 / -1;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-top: 0.45rem;
    max-width: 62ch;
}

/* ---- SHORTLIST TABLE ---- */
.arrival-shortlist-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    overflow: hidden;
    margin-top: 0.25rem;
}

.arrival-table-header {
    display: grid;
    grid-template-columns: 2.5rem 1fr 4.2rem 4.5rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-fade);
}

.arrival-table-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr 4.2rem 4.5rem;
    padding: 0.75rem 0.85rem;
    align-items: center;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 0.8rem;
}

.arrival-table-row:last-child {
    border-bottom: none;
}

.arrival-table-rank {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--gold);
}

.arrival-table-label {
    font-weight: 600;
    color: var(--ink);
}

.arrival-table-score {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--ink);
}

.arrival-table-signal {
    font-size: 0.72rem;
    color: var(--ink-soft);
}

/* ---- PATH CARD ---- */
.arrival-path-card {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg-panel);
    padding: 1.25rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

.arrival-path-card:hover {
    border-color: var(--gold);
    background: rgba(212, 164, 74, 0.01);
    transform: translateY(-1px);
}

.arrival-path-card.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), var(--shadow-sm);
    background: rgba(212, 164, 74, 0.02);
}

.arrival-path-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.arrival-path-title-stack {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.arrival-path-kicker {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.arrival-path-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}

.arrival-path-indicator {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background-color 0.2s;
    flex-shrink: 0;
}

.arrival-path-indicator::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    transform: scale(0);
    transition: transform 0.2s;
}

.arrival-path-card.active .arrival-path-indicator {
    border-color: var(--gold);
}

.arrival-path-card.active .arrival-path-indicator::after {
    transform: scale(1);
}

.arrival-path-desc {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* ---- ACCORDION CONTENT ---- */
.arrival-path-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-top: 1px dashed transparent;
    padding-top: 0;
}

.arrival-path-card.active .arrival-path-content {
    max-height: 800px;
    opacity: 1;
    pointer-events: auto;
    border-top-color: var(--rule-soft);
    padding-top: 1rem;
    margin-top: 0.25rem;
}

/* ---- FORM ---- */
.arrival-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.arrival-form-fields {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rule-soft);
}

.arrival-field {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 0;
    padding: 0.9rem 0 0.85rem;
    border-bottom: 1px solid var(--rule-soft);
    cursor: text;
}

.arrival-field:last-of-type {
    border-bottom: none;
}

.arrival-field-num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold);
    align-self: start;
    padding-top: 0.05rem;
    letter-spacing: 0.04em;
}

.arrival-field-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.arrival-field-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}

.arrival-field-control {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink-fade);
    border-radius: 0;
    padding: 0.45rem 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    outline: none;
    transition: border-color var(--transition);
    appearance: none;
    -webkit-appearance: none;
}

.arrival-field-control:focus {
    border-bottom-color: var(--gold);
}

.arrival-field-control::placeholder {
    color: var(--ink-fade);
    font-family: var(--font);
    font-style: italic;
}

select.arrival-field-control {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink) 50%),
        linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 16px) 0.95rem, calc(100% - 11px) 0.95rem;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
    cursor: pointer;
}

.arrival-field-control-textarea {
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
    resize: vertical;
    min-height: 4.5rem;
    padding: 0.45rem 0;
}

/* ---- STAGE FOOT ---- */
.arrival-stage-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    padding-top: 0.5rem;
}

/* ---- CTA + LINK ---- */
.arrival-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.5rem;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition);
    line-height: 1;
}

.arrival-cta:hover {
    background: var(--gold);
    color: #fff;
    transform: translateY(-1px);
}

.arrival-cta-glyph {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    transition: transform var(--transition);
    transform: translateY(-1px);
}

.arrival-cta:hover .arrival-cta-glyph {
    transform: translate(3px, -1px);
}

.arrival-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ink);
    padding: 0 0 0.22rem;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    border-radius: 0;
    letter-spacing: -0.005em;
}

.arrival-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

@keyframes arrival-stage-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -- Panels -- */
.panel {
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 1.1rem 1rem;
}

.panel::-webkit-scrollbar {
    width: 5px;
}

.panel::-webkit-scrollbar-track {
    background: transparent;
}

.panel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.panel-right {
    border-right: none;
    border-left: 1px solid var(--border);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.panel-heading-stack {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.panel-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-2);
}

/* Lead Candidate kicker — the Engine's commitment to its top recommendation.
   A brass under-bar + a tighter weight signals the moment the user is on
   the system's lead pick rather than browsing siblings. */
.panel-kicker.panel-kicker-lead {
    color: #b8862e;
    letter-spacing: 0.22em;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(184, 134, 46, 0.55);
    display: inline-block;
}

.compare-overview-actions {
    margin-top: 0.85rem;
    display: flex;
    justify-content: flex-end;
}

.panel-header-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.panel-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.panel-mode-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition);
}

.panel-mode-btn.active {
    background: var(--bg-panel);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.detail-badge-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.detail-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
}

.detail-actions .btn-secondary,
.detail-actions .btn-ghost {
    min-width: 152px;
}

.panel-empty-copy {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.logo-small {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.logo-small .logo-mark {
    width: 22px;
    height: 22px;
    font-size: 0.68rem;
    border-radius: 4px;
}

.logo-small .logo-mark span {
    font-size: 0.65rem;
}

.panel-section {
    margin-bottom: 1.35rem;
}

.panel-section-scoped {
    margin-bottom: 1.6rem;
}

.panel-section h4 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(28, 22, 17, 0.68);
    margin-bottom: 0.7rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(28, 22, 17, 0.16);
}

.label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(28, 22, 17, 0.68);
    margin-bottom: 0.55rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(28, 22, 17, 0.16);
}

/* -- Search Input (App) -- */
#search-input {
    width: 100%;
    padding: 0.65rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(28, 22, 17, 0.42);
    border-radius: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 500;
    outline: none;
    transition: border-color var(--transition);
    letter-spacing: -0.005em;
}

#search-input::placeholder {
    color: rgba(28, 22, 17, 0.38);
    font-style: italic;
    font-family: var(--font);
    font-weight: 400;
}

#search-input:focus {
    border-bottom-color: #b8862e;
}

.suggestions {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-top: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}

.suggestions.hidden {
    display: none;
}

.search-feedback {
    margin-top: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.search-feedback.warning {
    border-color: rgba(196, 153, 54, 0.35);
    color: var(--score-mid);
    background: var(--score-mid-bg);
}

.search-feedback.error {
    border-color: rgba(196, 85, 58, 0.35);
    color: var(--score-low);
    background: var(--score-low-bg);
}

.search-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.search-feedback-text {
    flex: 1 1 auto;
}

.search-feedback-retry {
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
}

.search-feedback-retry:hover {
    background: rgba(255, 255, 255, 0.06);
}

.suggestion-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text-secondary);
    transition: background var(--transition), color var(--transition);
}

.suggestion-item:hover {
    background: var(--accent-dim);
    color: var(--text-primary);
}

/* -- Filters -- */
.filter-group {
    margin-bottom: 0.4rem;
}

.filter-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition);
}

.filter-group label:hover {
    color: var(--text-primary);
}

.filter-group input[type="checkbox"] {
    accent-color: var(--accent);
}

/* -- Scoped Results Arrival -- */
.scoped-results-module {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    padding: 1rem;
    border: 1px solid rgba(212, 164, 74, 0.24);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,246,241,0.98) 100%),
        linear-gradient(135deg, rgba(45,122,95,0.04) 0%, rgba(212,164,74,0.08) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 12px 28px rgba(26,26,26,0.05);
    overflow: hidden;
}

.scoped-results-module::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 68%, rgba(212,164,74,0.35) 100%);
}

.scoped-results-module::after {
    content: '';
    position: absolute;
    top: -18%;
    right: -10%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,164,74,0.14) 0%, rgba(212,164,74,0) 68%);
    pointer-events: none;
}

.scoped-results-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.scoped-results-kicker {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.scoped-results-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(45,122,95,0.08);
    border: 1px solid rgba(45,122,95,0.18);
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.scoped-results-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.scoped-results-title {
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.scoped-results-detail {
    max-width: 28ch;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.scoped-results-summary {
    position: relative;
    z-index: 1;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(229,224,216,0.9);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    line-height: 1.6;
}

.scoped-results-warnings {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.8rem 0.85rem;
    border-radius: 14px;
    border: 1px dashed rgba(196, 153, 54, 0.34);
    background: linear-gradient(180deg, rgba(196,153,54,0.06) 0%, rgba(255,255,255,0.72) 100%);
}

.scoped-results-warning-placeholder,
.scoped-results-warning {
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.scoped-results-warning {
    position: relative;
    padding-left: 1rem;
}

.scoped-results-warning::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.52rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-2);
}

.scoped-results-expand {
    position: relative;
    z-index: 1;
    width: 100%;
    justify-content: space-between;
    padding-inline: 0.95rem;
    border-color: rgba(26,26,26,0.08);
    background: rgba(255,255,255,0.78);
    color: var(--text-primary);
}

.scoped-results-expand:hover {
    border-color: rgba(45,122,95,0.24);
    background: rgba(45,122,95,0.05);
}

.scoped-results-expand::after {
    content: '->';
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-muted);
}

.scoped-results-module[data-scoped-results-state="inactive"] {
    border-color: var(--border);
}

.scoped-results-module[data-scoped-results-state="inactive"] .scoped-results-mode {
    background: rgba(153,143,130,0.08);
    border-color: rgba(153,143,130,0.18);
    color: var(--text-secondary);
}

.scoped-results-module[data-scoped-results-state="warning"] .scoped-results-mode {
    background: rgba(196,153,54,0.1);
    border-color: rgba(196,153,54,0.24);
    color: var(--score-mid);
}

.mobile-scoped-results {
    display: none;
}

/* -- Jump-to-best CTA card (left panel) -- */
.jump-hint {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 1.4rem;
    padding: 1rem 1.05rem 0.95rem;
    background: #1c1611;
    color: #f1e8d6;
    border-left: 3px solid #b8862e;
    box-shadow: 0 16px 30px rgba(28, 22, 17, 0.18);
}

.jump-hint.hidden {
    display: none;
}

.jump-hint-rank {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(241, 232, 214, 0.62);
}

.jump-hint-place {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: #f1e8d6;
}

.jump-hint-meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(241, 232, 214, 0.85);
    margin-top: 0.15rem;
}

.jump-hint-pct {
    color: #b8862e;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.jump-hint-meta-divider {
    width: 4px;
    height: 4px;
    background: rgba(241, 232, 214, 0.4);
}

.jump-hint-competitors {
    color: rgba(241, 232, 214, 0.78);
    letter-spacing: 0.14em;
}

.jump-hint-button {
    align-self: flex-start;
    margin-top: 0.7rem;
    padding: 0.55rem 0.9rem;
    background: #b8862e;
    color: #1c1611;
    border: none;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    transition: background var(--transition), color var(--transition), transform var(--transition);
    line-height: 1;
}

.jump-hint-button:hover {
    background: #f1e8d6;
    color: #1c1611;
    transform: translateY(-1px);
}

.jump-hint-arrow {
    font-family: var(--font-display);
    font-size: 0.9rem;
    transition: transform var(--transition);
}

.jump-hint-button:hover .jump-hint-arrow {
    transform: translateX(3px);
}

/* -- Map legend (bottom-left of map) -- */
.map-legend {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    padding: 0.7rem 0.85rem;
    background: rgba(241, 232, 214, 0.96);
    border: 1px solid rgba(28, 22, 17, 0.16);
    box-shadow: 0 12px 24px rgba(28, 22, 17, 0.12);
    pointer-events: none;
}

.map-legend-title {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(28, 22, 17, 0.6);
    padding-bottom: 0.4rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid rgba(28, 22, 17, 0.16);
}

.map-legend-heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-bottom: 0.4rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid rgba(28, 22, 17, 0.16);
}

.map-legend-heading .map-legend-title {
    padding: 0;
    margin: 0;
    border: 0;
}

.map-legend-context {
    max-width: 22ch;
    color: rgba(28, 22, 17, 0.66);
    font-family: var(--font);
    font-size: 0.68rem;
    line-height: 1.35;
}

.map-legend-list {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.map-legend-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.map-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 1px solid rgba(28, 22, 17, 0.2);
    box-shadow: none;
}

.map-legend-swatch[data-tier="high"] { background: rgba(45, 122, 95, 0.78); }
.map-legend-swatch[data-tier="mid"]  { background: rgba(196, 153, 54, 0.78); }
.map-legend-swatch[data-tier="low"]  { background: rgba(196, 85, 58, 0.62); }
/* VOI™ tier swatches (legend uses tier ids: i / ii / iii / iv). */
.map-legend-swatch[data-tier="i"]   { background: rgba(45, 122, 95, 0.85); }
.map-legend-swatch[data-tier="ii"]  { background: rgba(196, 153, 54, 0.82); }
.map-legend-swatch[data-tier="iii"] { background: rgba(196, 85, 58, 0.65); }
.map-legend-swatch[data-tier="iv"]  { background: rgba(120, 135, 145, 0.75); }

.map-legend-glyph {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #b8862e;
    width: 1.6em;
    text-align: center;
    flex-shrink: 0;
}

.map-legend-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(28, 22, 17, 0.78);
}

/* Lift the legend so the Engine status strip can occupy the bottom edge. */
.map-legend {
    bottom: 2.85rem;
}

/* -- Top Areas List -- */
.top-areas-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(28, 22, 17, 0.16);
}

.area-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(28, 22, 17, 0.08);
    background: transparent;
    border-left: none;
    border-radius: 0;
    cursor: pointer;
    transition: background var(--transition);
}

.area-rank {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #b8862e;
    align-self: center;
}

.area-item:hover {
    background: rgba(255, 248, 232, 0.5);
    transform: none;
}

.area-item.is-compared {
    background: rgba(184, 134, 46, 0.06);
    border-left: none;
    box-shadow: inset 3px 0 0 0 #b8862e;
    padding-left: 0.45rem;
}

.area-item.is-compared:hover {
    background: rgba(184, 134, 46, 0.1);
}

.area-main {
    min-width: 0;
}

.area-subline {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin-top: 0.12rem;
}

.area-tail {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.area-compare-btn {
    border: 1px solid rgba(28, 22, 17, 0.2);
    background: transparent;
    color: rgba(28, 22, 17, 0.6);
    border-radius: 0;
    padding: 0.32rem 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1;
}

.area-compare-btn:hover {
    border-color: #b8862e;
    color: #1c1611;
}

.area-compare-btn.active {
    background: #1c1611;
    border-color: #1c1611;
    color: #f1e8d6;
}

.area-score {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: #1c1611;
}

.area-score-high { color: var(--score-high); }
.area-score-mid  { color: var(--score-mid); }
.area-score-low  { color: var(--score-low); }

.area-label {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #1c1611;
}

.area-subline {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(28, 22, 17, 0.55);
    margin-top: 0.18rem;
}

.area-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* -- Map -- */
.map-container {
    position: relative;
    background: #e7e3da;
    --map-safe-top: max(0.75rem, env(safe-area-inset-top));
    --map-safe-right: max(0.75rem, env(safe-area-inset-right));
    --map-safe-bottom: max(0.75rem, env(safe-area-inset-bottom));
    --map-safe-left: max(0.75rem, env(safe-area-inset-left));
    --map-status-height: 2.25rem;
    --map-mobile-scope-height: 0rem;
}

.map {
    width: 100%;
    height: 100%;
    background: #e7e3da;
}

.map .maplibregl-canvas-container,
.map .maplibregl-canvas {
    background: #e7e3da;
}

/* A single, high-contrast keyboard treatment across map chrome. The selector
   intentionally includes native MapLibre controls and the details summary. */
:where(
    .map-container button,
    .map-container summary,
    .panel button,
    .panel input,
    .panel a,
    .branch-detail-overlay button,
    .branch-detail-overlay a
):focus-visible {
    outline: 3px solid #176049;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(255, 252, 246, 0.96);
}

.panel-sheet-handle {
    display: none;
}

/* ── Map mode chrome (3-tier UX) ─────────────────────────────────────── */
.map-mode-chrome {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    max-width: min(100% - 2rem, 22rem);
}

.map-mode-primary {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
    background: rgba(241, 232, 214, 0.96);
    border: 1px solid rgba(28, 22, 17, 0.16);
    box-shadow: 0 14px 30px rgba(28, 22, 17, 0.12);
    backdrop-filter: saturate(140%);
    overflow: hidden;
}

.map-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 252, 246, 0.86);
    color: rgba(28, 22, 17, 0.62);
    border: none;
    border-left: 1px solid rgba(28, 22, 17, 0.12);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    transition: background var(--transition), color var(--transition), opacity var(--transition);
}

.map-mode-primary .map-mode-btn:first-child {
    border-left: none;
}

.map-mode-btn:hover:not(:disabled) {
    background: rgba(255, 248, 232, 1);
    color: #1c1611;
}

.map-mode-btn.active {
    background: #1c1611;
    color: #f1e8d6;
}

.map-mode-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.map-mode-advanced {
    background: rgba(241, 232, 214, 0.96);
    border: 1px solid rgba(28, 22, 17, 0.16);
    box-shadow: 0 10px 24px rgba(28, 22, 17, 0.1);
    backdrop-filter: saturate(140%);
    min-width: 11rem;
}

.map-mode-advanced-summary {
    list-style: none;
    cursor: pointer;
    padding: 0.45rem 0.75rem;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(28, 22, 17, 0.62);
    user-select: none;
}

.map-mode-advanced-summary::-webkit-details-marker {
    display: none;
}

.map-mode-advanced-summary::after {
    content: '+';
    float: right;
    margin-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: rgba(28, 22, 17, 0.45);
}

.map-mode-advanced[open] .map-mode-advanced-summary::after {
    content: '−';
}

.map-mode-advanced-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0 0.65rem 0.65rem;
    border-top: 1px solid rgba(28, 22, 17, 0.1);
}

.map-mode-advanced-row,
.map-analysis-balance,
.map-terrain-basis--inline,
.map-street-read-sub--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.map-mode-advanced-label {
    flex: 0 0 100%;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(28, 22, 17, 0.45);
    margin-bottom: 0.1rem;
}

.map-mode-advanced .map-mode-btn {
    border: 1px solid rgba(28, 22, 17, 0.12);
    border-radius: 2px;
    padding: 0.38rem 0.62rem;
    font-size: 0.7rem;
    background: rgba(255, 252, 246, 0.9);
}

.map-analysis-balance .analysis-balance-btn,
.map-terrain-basis--inline .terrain-basis-btn,
.map-street-read-sub--inline .street-read-sub-btn {
    border: 1px solid rgba(28, 22, 17, 0.12);
    border-radius: 2px;
    padding: 0.38rem 0.62rem;
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    background: rgba(255, 252, 246, 0.9);
    color: rgba(28, 22, 17, 0.62);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.map-analysis-balance .analysis-balance-btn:hover,
.map-terrain-basis--inline .terrain-basis-btn:hover,
.map-street-read-sub--inline .street-read-sub-btn:hover {
    color: #1c1611;
    border-color: rgba(184, 134, 46, 0.45);
}

.map-analysis-balance .analysis-balance-btn.active,
.map-terrain-basis--inline .terrain-basis-btn.active,
.map-street-read-sub--inline .street-read-sub-btn.active {
    background: #1c1611;
    color: #f1e8d6;
    border-color: #1c1611;
}

.map-street-read-sub--inline.hidden {
    display: none;
}

@media (max-width: 1024px) {
    .map-mode-chrome {
        top: auto;
        bottom: 4.2rem;
        right: 0.5rem;
        max-width: calc(100% - 1rem);
    }
}

.map-zoom-hint {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    padding: 0.5rem 0.85rem;
    background: rgba(241, 232, 214, 0.96);
    border: 1px solid rgba(28, 22, 17, 0.16);
    color: rgba(28, 22, 17, 0.78);
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 30px rgba(28, 22, 17, 0.1);
    pointer-events: none;
    line-height: 1.35;
    max-width: min(18rem, calc(100% - 12rem));
}

.map-zoom-hint:empty {
    display: none;
}

.map-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    min-width: 180px;
    max-width: 240px;
    padding: 0.85rem 1rem;
    background: #f1e8d6;
    color: #1c1611;
    border: 1px solid rgba(28, 22, 17, 0.18);
    box-shadow: 0 18px 40px rgba(28, 22, 17, 0.18);
    pointer-events: none;
    transition: opacity 120ms ease;
    opacity: 1;
}

.map-tooltip.is-hidden {
    opacity: 0;
}

.map-tooltip.is-updating {
    opacity: 0.72;
}

.map-tooltip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
}

.map-tooltip-row-head {
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(28, 22, 17, 0.16);
}

.map-tooltip-tier {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #b8862e;
}

.map-tooltip-tier-glyph {
    display: inline-block;
    min-width: 1.4em;
    padding: 0.05em 0.35em;
    background: rgba(184, 134, 46, 0.16);
    border: 1px solid rgba(184, 134, 46, 0.6);
    color: #b8862e;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.map-tooltip-tier-name {
    color: rgba(28, 22, 17, 0.7);
}

/* Tier-driven accent. Older [data-tier="moderate"] / [data-tier="low"] kept
   below for any legacy templates; new code uses i / ii / iii / iv. */
.map-tooltip-tier[data-tier="moderate"] { color: #c49936; }
.map-tooltip-tier[data-tier="low"]      { color: #c4553a; }
.map-tooltip-tier[data-tier="i"]        { color: #2d7a5f; }
.map-tooltip-tier[data-tier="i"] .map-tooltip-tier-glyph {
    background: rgba(45, 122, 95, 0.14);
    border-color: rgba(45, 122, 95, 0.55);
    color: #2d7a5f;
}
.map-tooltip-tier[data-tier="ii"] .map-tooltip-tier-glyph {
    background: rgba(184, 134, 46, 0.18);
    border-color: rgba(184, 134, 46, 0.65);
}
.map-tooltip-tier[data-tier="iii"]      { color: #c4553a; }
.map-tooltip-tier[data-tier="iii"] .map-tooltip-tier-glyph {
    background: rgba(196, 85, 58, 0.12);
    border-color: rgba(196, 85, 58, 0.45);
    color: #c4553a;
}
.map-tooltip-tier[data-tier="iv"]       { color: #788791; }
.map-tooltip-tier[data-tier="iv"] .map-tooltip-tier-glyph {
    background: rgba(120, 135, 145, 0.14);
    border-color: rgba(120, 135, 145, 0.65);
    color: #788791;
}

.map-tooltip-score-mark {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(28, 22, 17, 0.45);
    align-self: center;
    padding-right: 0.15rem;
}

.map-tooltip-percentile {
    margin-top: 0.05rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(184, 134, 46, 0.95);
}

.map-tooltip-coverage {
    margin-top: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(28, 22, 17, 0.5);
    padding-top: 0.3rem;
    border-top: 1px dashed rgba(28, 22, 17, 0.16);
}

.map-tooltip-coverage[data-coverage="high"]   { color: #2d7a5f; }
.map-tooltip-coverage[data-coverage="medium"] { color: #b8862e; }
.map-tooltip-coverage[data-coverage="low"]    { color: #c4553a; }

.map-tooltip-borough {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(28, 22, 17, 0.5);
}

.map-tooltip-score {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.map-tooltip-score-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #1c1611;
}

.map-tooltip-score-pct {
    font-family: var(--font-display);
    font-size: 1rem;
    color: rgba(28, 22, 17, 0.55);
    letter-spacing: -0.02em;
}

.map-tooltip-score-label {
    margin-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(28, 22, 17, 0.5);
}

.map-tooltip-meta {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(28, 22, 17, 0.7);
}

.map-tooltip-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1c1611;
}

.map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 227, 218, 0.34);
    backdrop-filter: blur(1.5px);
    z-index: 9;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 220ms var(--motion-ease-out), visibility 0s linear 0s;
}

.map-loading.hidden {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms var(--motion-ease-out), visibility 0s linear 220ms;
}

.map-loading-frame {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.95rem 1.4rem;
    background: rgba(241, 232, 214, 0.96);
    border: 1px solid rgba(28, 22, 17, 0.18);
    box-shadow: 0 18px 36px rgba(28, 22, 17, 0.14);
    position: relative;
}

.map-loading-frame::before,
.map-loading-frame::after {
    content: '';
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    height: 1px;
    background: rgba(184, 134, 46, 0.7);
}

.map-loading-frame::before { top: 0.2rem; }
.map-loading-frame::after  { bottom: 0.2rem; }

.map-loading-mark {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #b8862e;
}

.map-loading-text {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(28, 22, 17, 0.86);
}

/* ─── Venturis Engine status strip ──────────────────────────────────────
   Always-on telemetry rail at the bottom edge of the map. Mirrors the
   institutional "status bar" pattern of Bloomberg / Reuters terminals:
   one line, fixed-width metrics, brand mark on the left, viewport
   statistics flowing rightward. Pointer-events disabled — purely
   informational, never steals interaction from the map below. */
.map-engine-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.42rem 1rem 0.42rem 1rem;
    background: rgba(20, 16, 12, 0.92);
    border-top: 1px solid rgba(212, 164, 74, 0.45);
    color: rgba(241, 232, 214, 0.85);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
}

.map-engine-strip .engine-mark {
    color: #d4a44a;
    font-weight: 700;
    letter-spacing: 0.32em;
    flex-shrink: 0;
}

.map-engine-strip .engine-sep {
    color: rgba(241, 232, 214, 0.28);
    flex-shrink: 0;
}

.map-engine-strip .engine-cell {
    flex-shrink: 0;
    color: rgba(241, 232, 214, 0.78);
}

.map-engine-strip .engine-field {
    display: inline-flex;
    align-items: baseline;
    gap: 0.38rem;
    min-width: 0;
    flex-shrink: 0;
}

.map-engine-strip .engine-cell-label {
    color: rgba(241, 232, 214, 0.48);
    font-size: 0.56rem;
    letter-spacing: 0.12em;
}

.map-engine-strip .engine-cell-scope {
    color: #f1e8d6;
    letter-spacing: 0.14em;
    text-transform: none;
}

.map-engine-strip .engine-cell-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: rgba(241, 232, 214, 0.6);
}

.map-engine-strip .engine-stat-value {
    color: #f1e8d6;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.map-engine-strip .engine-zoom-pct {
    flex-shrink: 0;
    min-width: 2.8rem;
    text-align: right;
    color: #f1e8d6;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    letter-spacing: 0.08em;
}

/* Push the maplibre nav controls + spinner clear of the strip. */
.maplibregl-ctrl-bottom-right { bottom: 2.4rem !important; }
.map-loading-spinner { bottom: 2.85rem; }

.map-loading-spinner {
    position: absolute;
    bottom: 120px;
    right: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: map-spinner-rotate 0.75s linear infinite;
    z-index: 9;
    pointer-events: none;
}

@keyframes map-spinner-rotate {
    to { transform: rotate(360deg); }
}

/* ── Map Brand Loader ─────────────────────────────────────────────── */
.map-loading-spinner-brand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    z-index: 99;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.map-brand-loader-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.map-brand-loader-bg {
    fill: #120c08; /* Luxurious Obsidian Espresso (Canonical brand deep ink) */
    stroke: var(--accent); /* Rich solid brass instrument border */
    stroke-width: 1.2px;
    transition: var(--transition);
}

/* The wireframe of the V container (Drafting pen style) */
.map-brand-loader-wireframe {
    fill: none;
    stroke: rgba(241, 232, 214, 0.08);
    stroke-width: 1.2px;
    transition: var(--transition);
}

/* Liquid Wave Fill Group */
.map-brand-loader-liquid-container {
    clip-path: url(#map-brand-loader-clip);
}

/* Wave rising motion inside V */
.map-brand-loader-wave-group {
    transform: translateY(54px); /* Starts below V baseline */
    animation: mapBrandLoaderWaveRise 4.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
    transition: var(--transition);
}

.map-brand-loader-wave-front {
    fill: var(--accent); /* #d4a44a */
    opacity: 1; /* Opaque solid gold to prevent background bleed-through */
    animation: mapBrandLoaderWaveSlideFront 2s linear infinite;
}

.map-brand-loader-wave-back {
    fill: #a0782d; /* Solid darker brass for layered depth without transparency */
    opacity: 1; /* Opaque solid gold to prevent background bleed-through */
    animation: mapBrandLoaderWaveSlideBack 2.4s linear infinite;
}

/* The single-pixel drafting outline tracer spark */
.map-brand-loader-spark {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: mapBrandLoaderSparkDraw 4.2s ease-in-out infinite;
}

/* Synchronized drawing tracers (Perfect perimeter matching & elegant loop) */
@keyframes mapBrandLoaderSparkDraw {
    0% {
        stroke-dashoffset: 180;
        opacity: 0;
    }
    8% {
        stroke-dashoffset: 180;
        opacity: 1;
    }
    48%, 68% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    88% {
        stroke-dashoffset: -180;
        opacity: 0; /* Smooth tracer exit */
    }
    100% {
        stroke-dashoffset: -180;
        opacity: 0;
    }
}

/* Endless sliding of liquid paths */
@keyframes mapBrandLoaderWaveSlideFront {
    0% { transform: translateX(0); }
    100% { transform: translateX(-64px); }
}

@keyframes mapBrandLoaderWaveSlideBack {
    0% { transform: translateX(0); }
    100% { transform: translateX(64px); }
}

/* Rising & Draining heights (Bespoke mechanical cylinder loop - No organic fade inside V) */
@keyframes mapBrandLoaderWaveRise {
    0%, 8% {
        transform: translateY(56px); /* Fully empty and hidden below V baseline */
    }
    48%, 68% {
        transform: translateY(8px); /* Fully filled to a solid, symmetric level surface */
    }
    88%, 100% {
        transform: translateY(56px); /* Clean hydraulic drainage back to reservoir */
    }
}

/* -- Detail Panel : VOI™ tier badge ------------------------------------
   The headline number on a cell brief. Layout:
      [ I ]   VOI       Prime
              73
   The Roman tier glyph is the institutional anchor; "VOI 73" is the
   proprietary score expression; the tier name on the right answers
   "what does this mean?" in plain English. */
.opportunity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.95rem;
    background: #1c1611;
    color: #f1e8d6;
    font-family: var(--font-display);
    line-height: 1;
    border: none;
    border-radius: 0;
    border-left: 3px solid #b8862e;
}

.opportunity-badge-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.35rem 0.55rem;
    background: rgba(212, 164, 74, 0.14);
    border: 1px solid rgba(212, 164, 74, 0.55);
    color: #d4a44a;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.opportunity-badge-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    line-height: 1;
}

.opportunity-badge-mark {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(241, 232, 214, 0.5);
}

.opportunity-badge-value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #f1e8d6;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.opportunity-badge-tier {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(241, 232, 214, 0.6);
    padding-left: 0.85rem;
    border-left: 1px solid rgba(241, 232, 214, 0.18);
    align-self: stretch;
    display: flex;
    align-items: center;
}

.opportunity-badge.tier-i   { border-left-color: var(--score-high); }
.opportunity-badge.tier-i .opportunity-badge-glyph {
    background: rgba(45, 122, 95, 0.16);
    border-color: rgba(45, 122, 95, 0.65);
    color: #5fb094;
}
.opportunity-badge.tier-ii  { border-left-color: var(--score-mid); }
.opportunity-badge.tier-iii {
    border-left-color: var(--score-mid);
    border-left-style: dashed;
}
.opportunity-badge.tier-iv  { border-left-color: var(--score-low); }
.opportunity-badge.tier-iv .opportunity-badge-glyph {
    background: rgba(196, 85, 58, 0.14);
    border-color: rgba(196, 85, 58, 0.55);
    color: #d97a5e;
}

/* Legacy classes kept for any path still emitting them. */
.opportunity-badge.high { border-left-color: var(--score-high); }
.opportunity-badge.mid { border-left-color: var(--score-mid); }
.opportunity-badge.low { border-left-color: var(--score-low); }

/* -- Score Ledger (right panel) -- */
.score-bars {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #1c1611;
}

.panel-ledger-item {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, max-content) 1fr auto;
    align-items: baseline;
    column-gap: 0;
    padding: 0.95rem 0 0.85rem;
    border-bottom: 1px solid rgba(28, 22, 17, 0.1);
}

.panel-ledger-item:last-child {
    border-bottom: 1px solid #1c1611;
}

.panel-ledger-num {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    color: #b8862e;
    letter-spacing: 0.04em;
}

.panel-ledger-label {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #1c1611;
    padding-right: 0.65rem;
    white-space: nowrap;
}

.panel-ledger-leader {
    align-self: end;
    border-bottom: 1px dotted rgba(28, 22, 17, 0.36);
    height: 0.5em;
    margin: 0 0.65rem 0.3em;
    min-width: 1rem;
}

.panel-ledger-value {
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #1c1611;
    text-align: right;
}

.panel-ledger-note {
    grid-column: 2 / -1;
    font-size: 0.78rem;
    line-height: 1.55;
    color: rgba(28, 22, 17, 0.66);
    margin-top: 0.4rem;
    max-width: 50ch;
}

/* legacy fallback when score-bars still gets old rows */
.score-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* -- Explanation -- */
.explanation-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.explanation-list li {
    display: grid;
    grid-template-columns: 6.8rem minmax(0, 1fr);
    gap: 0.65rem;
    font-size: 0.83rem;
    color: rgba(28, 22, 17, 0.74);
    padding-left: 0;
    position: relative;
    line-height: 1.55;
}

.map-engine-strip .engine-field-zoom {
    margin-left: auto;
}

/* App.js creates this transient chip during viewport refreshes. Keeping the
   complete visual contract in CSS means status changes never cause layout
   shifts or require one-off inline colours. */
.map-update-status {
    position: absolute;
    top: var(--map-safe-top);
    left: 50%;
    z-index: 18;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: min(28rem, calc(100% - 2rem));
    min-height: 36px;
    padding: 0.48rem 0.7rem;
    transform: translateX(-50%);
    border: 1px solid rgba(28, 22, 17, 0.2);
    background: rgba(249, 247, 242, 0.97);
    color: #1c1611;
    box-shadow: 0 8px 22px rgba(28, 22, 17, 0.16);
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.3;
}

.map-update-status::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 0.5rem;
    border-radius: 50%;
    background: #567184;
}

.map-update-status.is-info::before { background: #567184; }
.map-update-status.is-ready::before { background: #2d7a5f; }
.map-update-status.is-warning::before { background: #a77724; }
.map-update-status.is-error::before { background: #b9543b; }

.map-update-status.is-ready { border-color: rgba(45, 122, 95, 0.4); }
.map-update-status.is-warning { border-color: rgba(167, 119, 36, 0.45); }
.map-update-status.is-error { border-color: rgba(185, 84, 59, 0.48); }

.map-update-status-action {
    min-height: 30px;
    padding: 0.25rem 0.5rem;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.7rem;
    cursor: pointer;
}

.map-container[data-map-stage="loading"] .map-mode-chrome,
.map-container[data-map-stage="loading"] .map-legend {
    opacity: 0.58;
    pointer-events: none;
}

.map-container[data-map-stage="ready"] .map-mode-chrome,
.map-container[data-map-stage="ready"] .map-legend,
body[data-map-stage="ready"] .map-mode-chrome,
body[data-map-stage="ready"] .map-legend {
    opacity: 1;
}

.map-container[data-map-stage="refreshing"] .map-update-status,
body[data-map-stage="refreshing"] .map-update-status {
    border-color: rgba(86, 113, 132, 0.42);
}

.map-container[data-map-stage="loading"] .map-update-status::before,
.map-container[data-map-stage="refreshing"] .map-update-status::before,
body[data-map-stage="loading"] .map-update-status::before,
body[data-map-stage="refreshing"] .map-update-status::before {
    animation: map-status-pulse 1.2s ease-in-out infinite;
}

.map-container[data-map-stage="error"] .map-update-status {
    border-color: rgba(185, 84, 59, 0.58);
}

.reason-label {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(28, 22, 17, 0.52);
    padding-top: 0.08rem;
}

.reason-copy {
    color: rgba(28, 22, 17, 0.78);
}

@media (max-width: 520px) {
    .explanation-list li {
        grid-template-columns: 1fr;
        gap: 0.12rem;
    }
}

.verdict-text {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 500;
    color: #1c1611;
    line-height: 1.5;
    padding: 0.75rem 0 0.75rem 1.1rem;
    border-left: 2px solid #b8862e;
    letter-spacing: -0.005em;
}

.weight-profile-text {
    margin: 0.35rem 0 0 1.1rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink-fade, #6b645c);
}

/* -- Competitor List -- */
.competitor-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.competitor-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(28, 22, 17, 0.16);
}

.competitor-group-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(28, 22, 17, 0.55);
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(28, 22, 17, 0.12);
}

.competitor-item {
    padding: 0.6rem 0;
    border-bottom: 1px dashed rgba(28, 22, 17, 0.1);
    background: transparent;
    border-left: none;
}

.competitor-item:last-child {
    border-bottom: none;
}

.competitor-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
}

.competitor-name {
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: #1c1611;
    letter-spacing: -0.005em;
}

.competitor-distance {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(28, 22, 17, 0.55);
}

.competitor-meta {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: rgba(28, 22, 17, 0.6);
    line-height: 1.5;
}

/* legacy fallback */
.competitor-item .name { font-weight: 600; color: #1c1611; }
.competitor-item .address { color: rgba(28, 22, 17, 0.6); font-size: 0.72rem; margin-top: 0.1rem; }

/* -- Borough List -- */
.borough-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(28, 22, 17, 0.16);
}

.borough-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(28, 22, 17, 0.1);
    background: transparent;
    border-radius: 0;
    font-size: 0.84rem;
}

.borough-name {
    font-family: var(--font-display);
    color: #1c1611;
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: -0.005em;
}

.borough-score {
    color: rgba(28, 22, 17, 0.6);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

/* -- Compare Ledger + Folio -- */
.compare-ledger-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,246,241,0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), var(--shadow-sm);
}

.compare-ledger-shell.has-items {
    border-color: rgba(212, 164, 74, 0.24);
}

.compare-ledger-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
}

.compare-ledger-count {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.compare-ledger-helper {
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.compare-ledger-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.compare-empty-ledger {
    padding: 0.85rem;
    border-radius: 14px;
    background: var(--bg-elevated);
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.compare-ledger-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: stretch;
}

.compare-ledger-focus,
.compare-ledger-remove,
.compare-card-remove,
.compare-card-focus {
    cursor: pointer;
}

.compare-ledger-focus {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    border: 1px solid rgba(212, 164, 74, 0.16);
    background: rgba(255,255,255,0.78);
    border-radius: 14px;
    padding: 0.65rem 0.7rem;
    text-align: left;
    transition: all var(--transition);
}

.compare-ledger-focus:hover {
    border-color: rgba(212, 164, 74, 0.34);
    background: rgba(255,255,255,0.96);
}

.compare-ledger-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-2-dim);
    color: #7e5718;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    flex-shrink: 0;
}

.compare-ledger-copy {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
}

.compare-ledger-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.compare-ledger-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.compare-ledger-remove,
.compare-card-remove {
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-secondary);
    border-radius: 12px;
    padding: 0.55rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all var(--transition);
}

.compare-ledger-remove:hover,
.compare-card-remove:hover {
    border-color: rgba(196, 85, 58, 0.26);
    color: var(--score-low);
    background: var(--score-low-bg);
}

.compare-empty-state {
    padding: 1.3rem 1.1rem 1.1rem;
    border: 1px dashed rgba(212, 164, 74, 0.28);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(248,246,241,0.98) 100%);
}

.compare-empty-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 0.9rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-2) 0%, #bd8e3b 100%);
    color: #fff;
    font-weight: 700;
    transform: rotate(45deg);
}

.compare-empty-mark span {
    transform: rotate(-45deg);
}

.compare-empty-state h4 {
    font-family: var(--font-display);
    font-size: 1.02rem;
    margin-bottom: 0.32rem;
}

.compare-empty-state p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.compare-overview-card {
    padding: 1rem;
    border-radius: 22px;
    background: linear-gradient(150deg, #fffdfa 0%, #f3ede4 100%);
    border: 1px solid rgba(212, 164, 74, 0.22);
    box-shadow: var(--shadow-md);
}

.compare-overview-kicker {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8e6927;
    margin-bottom: 0.65rem;
}

.compare-overview-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr 0.7fr;
    gap: 0.7rem;
    align-items: stretch;
}

.compare-overview-primary h4 {
    font-family: var(--font-display);
    font-size: 1.14rem;
    line-height: 1.2;
}

.compare-overview-primary p {
    margin-top: 0.22rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.compare-overview-stat,
.compare-note-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.8rem 0.85rem;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(212, 164, 74, 0.16);
}

.compare-stat-label,
.compare-note-label,
.compare-leader-label,
.compare-metric-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.compare-stat-value {
    font-family: var(--font-mono);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text-primary);
}

.compare-overview-notes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    margin-top: 0.75rem;
}

.compare-note-card strong {
    font-size: 0.82rem;
    color: var(--text-primary);
}

.compare-leaders {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
}

.compare-leader-card {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.8rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: all var(--transition);
}

.compare-leader-card:hover {
    border-color: rgba(212, 164, 74, 0.26);
    transform: translateY(-1px);
}

.compare-leader-card strong {
    font-size: 0.84rem;
    color: var(--text-primary);
}

.compare-leader-score {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--accent);
}

.compare-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.compare-card {
    padding: 0.95rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,246,241,0.98) 100%);
    box-shadow: var(--shadow-sm);
}

.compare-card-topline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.7rem;
    align-items: start;
}

.compare-card-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 700;
}

.compare-card-heading h5 {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.2;
}

.compare-card-heading p {
    margin-top: 0.14rem;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.compare-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
}

.compare-card-score {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.compare-card-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.compare-signal {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.compare-signal.strong {
    background: var(--score-high-bg);
    color: var(--score-high);
}

.compare-signal.weak {
    background: var(--score-low-bg);
    color: var(--score-low);
}

.compare-score-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.compare-metric {
    padding: 0.7rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.78);
}

.compare-metric-bar {
    height: 6px;
    margin-top: 0.45rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border);
}

.compare-metric-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.compare-metric-high .compare-metric-bar span {
    background: var(--score-high);
}

.compare-metric-mid .compare-metric-bar span {
    background: var(--score-mid);
}

.compare-metric-low .compare-metric-bar span {
    background: var(--score-low);
}

.compare-metric-value {
    display: block;
    margin-top: 0.38rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.compare-card-copy {
    margin-top: 0.8rem;
}

.compare-reason-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.compare-reason-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.compare-reason-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.48rem;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--accent-2);
    transform: rotate(45deg);
}

.compare-card-focus {
    margin-top: 0.85rem;
    width: 100%;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-primary);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all var(--transition);
}

.compare-card-focus:hover {
    background: var(--accent-dim);
    border-color: rgba(45, 122, 95, 0.26);
}

/* -- Selection -- */
::selection {
    background: var(--accent-light);
    color: var(--text-primary);
}

/* -- Hidden helper -- */
.hidden {
    display: none !important;
}

/* ================================================================
   QUESTIONNAIRE PAGE
   ================================================================ */
.questionnaire-page {
    background: var(--bg-dark);
    color: var(--text-on-dark);
    min-height: 100vh;
    overflow: hidden;
}

/* Progress bar */
.q-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,0.06);
    z-index: 100;
}
.q-progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
    border-radius: 0 2px 2px 0;
}

/* Nav */
.q-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2.5rem;
    z-index: 90;
}
.q-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-on-dark);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.q-skip {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition);
}
.q-skip:hover {
    border-color: rgba(255,255,255,0.25);
    color: var(--text-on-dark);
}

/* Steps container */
.q-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.q-step {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
                transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.q-step.active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.q-step.leaving {
    opacity: 0;
    transform: translateY(-30px);
    pointer-events: none;
}

.q-step-inner {
    max-width: 600px;
    padding: 2rem;
    text-align: center;
}
.q-step-wide {
    max-width: 800px;
}

.q-step-num {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.12em;
    margin-bottom: 1.5rem;
}

.q-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-on-dark);
    margin-bottom: 1.2rem;
}

.q-category {
    color: var(--accent);
    text-transform: lowercase;
}

.q-subtext {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 440px;
    margin: 0 auto 2.5rem;
}

.q-brand-input {
    display: grid;
    gap: 0.55rem;
    width: min(100%, 420px);
    margin: -1rem auto 1.65rem;
    text-align: left;
}

.q-brand-input span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.q-brand-input input {
    width: 100%;
    border: 1px solid rgba(250, 250, 249, 0.18);
    border-radius: 0.8rem;
    background: rgba(250, 250, 249, 0.07);
    color: var(--text-on-dark);
    padding: 0.95rem 1rem;
    font: inherit;
    outline: none;
}

.q-brand-input input:focus {
    border-color: rgba(250, 250, 249, 0.48);
    background: rgba(250, 250, 249, 0.1);
}

/* Next button */
.q-btn-next,
.q-btn-launch {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 2rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.q-btn-next:hover,
.q-btn-launch:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}
.q-btn-next:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}
.q-btn-arrow {
    display: inline-block;
    transition: transform 0.2s;
}
.q-btn-next:hover .q-btn-arrow,
.q-btn-launch:hover .q-btn-arrow {
    transform: translateX(3px);
}

/* Launch button — larger */
.q-btn-launch {
    padding: 1.05rem 2.5rem;
    font-size: 1.05rem;
    background: var(--accent);
    box-shadow: 0 0 40px rgba(45,122,95,0.25);
}
.q-btn-launch:hover {
    box-shadow: 0 0 60px rgba(45,122,95,0.35);
}

/* Launch icon */
.q-launch-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(45,122,95,0.12);
    color: var(--accent);
    margin-bottom: 1.5rem;
    animation: q-pulse 2.5s ease-in-out infinite;
}
@keyframes q-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* Choice buttons */
.q-choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 480px;
    margin: 0 auto;
}
.q-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 2rem 1.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    color: var(--text-on-dark);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.q-choice:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}
.q-choice.selected {
    background: rgba(45,122,95,0.12);
    border-color: var(--accent);
}
.q-choice-icon {
    opacity: 0.6;
    transition: opacity 0.2s;
}
.q-choice:hover .q-choice-icon,
.q-choice.selected .q-choice-icon {
    opacity: 1;
}
.q-choice-label {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Borough grid */
.q-borough-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    max-height: 50vh;
    overflow-y: auto;
}
.q-borough-chip {
    padding: 0.55rem 1.05rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    color: var(--text-dim);
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    white-space: nowrap;
}
.q-borough-chip:hover {
    border-color: rgba(255,255,255,0.22);
    color: var(--text-on-dark);
    background: rgba(255,255,255,0.07);
}
.q-borough-chip.selected {
    background: rgba(45,122,95,0.18);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}
.q-btn-borough-go {
    margin-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .reveal,
    .hero .hero-title,
    .hero .hero-search,
    .hero .hero-provenance,
    .london-text > *,
    .dimension-list li,
    .hex-grid,
    .hex-cell,
    .evidence-section > h2,
    .evidence-section .product-frame,
    .frame-viewport,
    .frame-hex,
    .frame-annotation,
    .evidence-section .evidence-caption,
    .journey-section h2,
    .journey-stage,
    .journey-connector,
    .cta-inner > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .hero-atmosphere::before,
    .hero-atmosphere::after,
    .hex-grid::after,
    .frame-viewport::after,
    .evidence-section.visible .frame-dot--1,
    .evidence-section.visible .frame-dot--2,
    .evidence-section.visible .frame-dot--3,
    .evidence-section.visible .frame-dot--4,
    .evidence-section.visible .frame-dot--5,
    .evidence-section.visible .frame-dot--gap {
        animation: none !important;
    }

    .hex-grid::after,
    .frame-viewport::after {
        display: none;
    }

    .hero-atmosphere {
        opacity: 0.55;
    }
}

/* ===================================================================
   DECISION RAIL — warm, human, uses site design tokens
   =================================================================== */
.decision-rail {
    --rail-ink: #19120d;
    --rail-muted: rgba(25, 18, 13, 0.52);
    --rail-rule: rgba(25, 18, 13, 0.12);
    --rail-brass: #a77724;
    --rail-green: #2d7a5f;
    --rail-red: #b9543b;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem;
    background: var(--bg-elevated, #f8f6f1);
    border-right: 1px solid var(--border, #e5e0d8);
    color: var(--rail-ink);
    overflow-y: auto;
}

.app-layout.left-panel-collapsed .decision-rail {
    opacity: 0;
    padding: 0;
    border-right: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ── Header bar ──────────────────────────────────────────────── */
.decision-rail-chrome {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.65rem 0.8rem;
    background: var(--bg-panel, #ffffff);
    border: 1px solid var(--border, #e5e0d8);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
}

.decision-rail-titleblock {
    min-width: 0;
}

.decision-rail-kicker,
.decision-label,
.decision-section-head span,
.decision-command-scope,
.decision-evidence-footer span:first-child {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.decision-rail-kicker {
    color: var(--rail-brass);
}

.decision-rail-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--rail-ink);
}

/* ── Collapse / Expand buttons ───────────────────────────────── */
.rail-collapse-button,
.rail-expand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0 0.45rem;
    border: 1px solid var(--border, #e5e0d8);
    border-radius: 999px;
    background: var(--bg-elevated, #f8f6f1);
    color: var(--rail-ink);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.rail-collapse-button:hover,
.rail-expand-button:hover {
    background: var(--accent-dim, rgba(212,164,74,0.08));
    border-color: var(--accent, #d4a44a);
    transform: translateY(-1px);
}

.rail-expand-button {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 18;
    display: none;
    padding: 0.5rem 0.7rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--bg-panel, #ffffff);
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,0.06));
}

.app-layout.left-panel-collapsed .rail-expand-button {
    display: inline-flex;
}

/* ── Shared section card ─────────────────────────────────────── */
.decision-rail .panel-section {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border, #e5e0d8);
    border-radius: var(--radius-lg, 16px);
    background: var(--bg-panel, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
}

.decision-command-section {
    background: var(--bg-panel, #ffffff);
}

/* ── Section heads ───────────────────────────────────────────── */
.decision-command-head,
.decision-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.decision-label,
.decision-section-head h2 {
    color: var(--rail-ink);
}

.decision-command-scope,
.decision-section-head span {
    min-width: 0;
    color: var(--text-muted, #998f82);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.decision-section-head h2 {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* ── Search input ────────────────────────────────────────────── */
.decision-rail #search-input {
    padding: 0.55rem 0;
    border-bottom-color: var(--border, #e5e0d8);
    color: var(--rail-ink);
    font-size: 0.95rem;
}

.decision-rail #search-input:focus {
    border-bottom-color: var(--accent, #d4a44a);
}

.decision-rail .suggestions {
    border-radius: var(--radius, 10px);
    border-color: var(--border, #e5e0d8);
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,0.06));
}

.decision-rail .search-feedback {
    border-radius: var(--radius, 10px);
    border-color: var(--border, #e5e0d8);
    background: var(--bg-elevated, #f8f6f1);
}

/* ── Scoped results strip ────────────────────────────────────── */
.decision-rail .scoped-results-module {
    gap: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.decision-rail .scoped-results-module::before,
.decision-rail .scoped-results-module::after {
    display: none;
}

.decision-rail .scoped-results-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.decision-rail .scoped-results-kicker {
    color: var(--text-muted, #998f82);
}

.decision-rail .scoped-results-mode {
    min-height: 0;
    padding: 0.2rem 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(167, 119, 36, 0.3);
    background: rgba(167, 119, 36, 0.06);
    color: var(--rail-brass);
    font-size: 0.58rem;
}

.decision-rail .scoped-results-copy { gap: 0; }
.decision-rail .scoped-results-title { display: none; }
.decision-rail .scoped-results-detail { display: none; }
.decision-rail .scoped-results-summary { display: none; }
.decision-rail .scoped-results-warnings { display: none; }

.decision-rail .scoped-results-expand {
    width: auto;
    min-height: 0;
    padding: 0.34rem 0.6rem;
    border: 1px solid var(--border, #e5e0d8);
    border-radius: 999px;
    background: var(--bg-elevated, #f8f6f1);
    color: var(--rail-ink);
    font-size: 0.62rem;
    font-weight: 600;
}

.decision-rail .scoped-results-expand:hover {
    border-color: var(--accent, #d4a44a);
    background: var(--accent-dim, rgba(212,164,74,0.08));
}

.decision-rail .scoped-results-expand::after {
    content: none;
}

/* ── Lead candidate / Jump hint (dark card) ──────────────────── */
.decision-rail .jump-hint {
    position: relative;
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0.85rem 0.9rem 0.78rem;
    background: var(--rail-ink);
    color: #f4ead8;
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0,0,0,0.06));
}

.decision-rail .jump-hint.hidden {
    display: none;
}

.decision-rail .jump-hint-rank {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--rail-brass);
}

.decision-rail .jump-hint-place {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #f4ead8;
}

.decision-rail .jump-hint-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0;
    font-size: 0.62rem;
    color: rgba(244, 234, 216, 0.72);
}

.jump-hint-meta-divider::before {
    content: '·';
    font-size: 0.56rem;
    opacity: 0.45;
}

.decision-rail .jump-hint-pct {
    color: #d1a04a;
    font-size: 0.72rem;
    font-weight: 600;
}

.decision-rail .jump-hint-copy {
    max-width: 32ch;
    display: -webkit-box;
    font-size: 0.7rem;
    line-height: 1.35;
    color: rgba(244, 234, 216, 0.76);
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jump-hint-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.12rem;
}

.decision-rail .jump-hint-button,
.jump-hint-secondary {
    margin-top: 0;
    min-height: 28px;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
}

.decision-rail .jump-hint-button {
    padding: 0.42rem 0.6rem;
    background: var(--accent, #d4a44a);
    color: #fff;
    border: none;
}

.decision-rail .jump-hint-button:hover {
    background: var(--accent-hover, #b88a32);
}

.jump-hint-secondary {
    padding: 0.42rem 0.6rem;
    border: 1px solid rgba(244, 234, 216, 0.28);
    background: transparent;
    color: #f4ead8;
    cursor: pointer;
}

.jump-hint-secondary:hover,
.jump-hint-secondary.active {
    border-color: var(--accent, #d4a44a);
    color: #d1a04a;
}

/* ── Signal snapshot (scores grid) ───────────────────────────── */
.decision-signal-list {
    display: grid;
    gap: 0;
    border-top: 0;
}

.decision-signal-row {
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 0.72fr) minmax(0, 0.72fr);
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--rail-rule);
}

.decision-signal-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.08rem;
    height: 1.08rem;
    border: 1px solid var(--border, #e5e0d8);
    background: var(--bg-elevated, #f8f6f1);
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--rail-ink);
}

.decision-signal-name,
.decision-signal-value {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.decision-signal-name {
    color: var(--text-secondary, #5c5549);
}

.decision-signal-value {
    color: var(--rail-brass);
    text-align: right;
}

.decision-signal-note {
    display: none;
}

.decision-signal-empty,
.decision-signal-foot {
    padding-top: 0.4rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted, #998f82);
}

.decision-signal-foot {
    padding-top: 0.3rem;
    border-bottom: 1px solid var(--rail-rule);
}

/* ── Queue / area cards ──────────────────────────────────────── */
.decision-rail .top-areas-list {
    display: grid;
    gap: 0.45rem;
    max-height: none;
    border-top: 0;
}

.decision-rail .queue-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: start;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border, #e5e0d8);
    border-radius: var(--radius, 10px);
    background: var(--bg-panel, #ffffff);
    box-shadow: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.decision-rail .queue-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent, #d4a44a);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
}

.decision-rail .area-item {
    cursor: pointer;
}

.decision-rail .queue-card-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-elevated, #f8f6f1);
    color: var(--text-muted, #998f82);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.decision-rail .queue-card-copy {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.decision-rail .queue-card-kicker {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-muted, #998f82);
}

.decision-rail .queue-card-title {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--rail-ink);
    line-height: 1.1;
}

.decision-rail .queue-card-note,
.decision-rail .area-subline {
    display: -webkit-box;
    color: var(--text-secondary, #5c5549);
    font-size: 0.66rem;
    line-height: 1.35;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.decision-rail .area-subline {
    margin-top: 0.14rem;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.decision-rail .queue-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.14rem;
}

.decision-rail .queue-card-meta span,
.decision-rail .queue-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.15rem;
    padding: 0.14rem 0.4rem;
    border: 1px solid var(--border, #e5e0d8);
    border-radius: 999px;
    background: var(--bg-elevated, #f8f6f1);
    color: var(--text-secondary, #5c5549);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.decision-rail .queue-card-tail,
.decision-rail .area-tail {
    display: grid;
    justify-items: end;
    gap: 0.42rem;
}

.decision-rail .queue-card-score,
.decision-rail .area-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.4rem;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    background: var(--bg-elevated, #f8f6f1);
    border: 1px solid var(--border, #e5e0d8);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.decision-rail .queue-card-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.28rem;
}

.decision-rail .queue-card-button,
.decision-rail .queue-card-pin,
.decision-rail .area-compare-btn {
    min-width: 2.2rem;
    min-height: 1.6rem;
    padding: 0 0.55rem;
    border: 1px solid var(--border, #e5e0d8);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary, #5c5549);
    font-family: var(--font);
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.decision-rail .queue-card-button {
    background: var(--accent, #d4a44a);
    border-color: var(--accent, #d4a44a);
    color: #fff;
}

.decision-rail .queue-card-button:hover {
    background: var(--accent-hover, #b88a32);
    border-color: var(--accent-hover, #b88a32);
}

.decision-rail .area-compare-btn:hover,
.decision-rail .area-compare-btn.active,
.decision-rail .queue-card-pin:hover,
.decision-rail .queue-card-pin.active {
    background: var(--accent-dim, rgba(212,164,74,0.08));
    border-color: var(--accent, #d4a44a);
    color: var(--rail-ink);
}

.decision-rail .queue-card-utility {
    cursor: pointer;
    background: var(--bg-elevated, #f8f6f1);
}

.decision-rail .area-score-high { color: var(--rail-green); }
.decision-rail .area-score-mid { color: var(--rail-brass); }
.decision-rail .area-score-low { color: var(--rail-red); }

.decision-rail .queue-card-utility[data-queue-action="expand-scope"] {
    border-color: rgba(167, 119, 36, 0.22);
}

.decision-rail .queue-card-utility[data-queue-action="open-compare"] {
    border-color: rgba(45, 122, 95, 0.18);
}

/* ── Compare ledger ──────────────────────────────────────────── */
.decision-compare-section {
    background: var(--bg-panel, #ffffff);
}

.decision-rail .compare-ledger-shell {
    padding: 0.06rem;
    border: 0;
    border-radius: var(--radius, 10px);
    background: var(--bg-elevated, #f8f6f1);
}

.decision-rail .compare-ledger-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
}

.decision-rail .compare-ledger-shell:not(.has-items) .compare-ledger-list,
.decision-rail .compare-ledger-shell:not(.has-items) #compare-ledger-open {
    display: none;
}

.decision-rail .compare-ledger-count {
    font-size: 0.72rem;
}

.decision-rail .compare-ledger-helper {
    display: none;
}

.decision-rail .compare-ledger-list {
    margin-top: 0.3rem;
    gap: 0.25rem;
}

.decision-rail .compare-empty-ledger {
    padding: 0.34rem 0;
    border-top: 1px solid var(--rail-rule);
    color: var(--text-muted, #998f82);
}

.decision-rail .compare-ledger-item {
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border, #e5e0d8);
    background: var(--bg-panel, #ffffff);
}

.decision-rail .compare-ledger-remove,
.decision-rail .compare-card-remove {
    border-radius: 999px;
}

/* ── Borough section (hidden) ────────────────────────────────── */
.decision-borough-section {
    display: none;
}

/* ── Site evaluation ─────────────────────────────────────────── */
.decision-site-section {
    display: block;
}

.decision-rail .site-evaluation-hint {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-muted, #998f82);
}

.decision-rail .site-evaluation-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
}

.decision-rail .site-evaluation-input {
    min-height: 32px;
    padding: 0.44rem 0.55rem;
    border-radius: var(--radius, 10px);
    border: 1px solid var(--border, #e5e0d8);
    background: var(--bg-panel, #ffffff);
    font-size: 0.78rem;
}

.decision-rail .site-evaluation-input:focus {
    border-color: var(--accent, #d4a44a);
    outline: none;
}

.decision-rail .site-evaluation-form .btn-secondary {
    min-height: 32px;
    padding: 0.44rem 0.58rem;
    border-radius: 999px;
}

.decision-rail .site-evaluation-result {
    margin-top: 0.45rem;
}

/* ── Evidence footer ─────────────────────────────────────────── */
.decision-evidence-footer {
    display: grid;
    gap: 0.22rem;
    margin-top: auto;
    padding: 0.55rem 0.8rem 0.6rem;
    border-radius: var(--radius, 10px);
    background: var(--bg-secondary, #f5f2ed);
    border: 1px solid var(--border, #e5e0d8);
    color: var(--text-secondary, #5c5549);
}

.decision-evidence-footer span:first-child {
    color: var(--accent-hover, #b88a32);
    font-weight: 600;
}

.decision-evidence-footer span:last-child {
    font-size: 0.66rem;
    line-height: 1.4;
    color: var(--text-muted, #998f82);
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
    .app-layout {
        grid-template-columns: 312px 1fr;
    }
    .app-layout.left-panel-collapsed {
        grid-template-columns: 0 1fr;
    }
    .arrival-shell {
        padding: 1.25rem 1.5rem 3rem;
    }
    .arrival-masthead {
        gap: 0 1rem;
    }
    .arrival-masthead-tag {
        padding-left: 1rem;
    }
    .arrival-file {
        padding: 0 0.75rem;
    }
    .panel-right {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 320px;
        z-index: 20;
        box-shadow: var(--shadow-lg);
    }
    .london-section {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 5rem 2rem;
    }
    .journey-flow {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    .journey-connector {
        display: none;
    }
    .journey-stage {
        flex: 0 0 calc(50% - 0.75rem);
    }
    .provenance-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 1rem 2rem;
    }
    .provenance-item {
        padding: 0.4rem 1.2rem;
    }
    .scoped-results-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .scoped-results-title,
    .scoped-results-detail {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .app-layout {
        grid-template-columns: 1fr;
    }
    .arrival-shell {
        padding: 1rem 1.15rem 3rem;
    }
    .arrival-masthead {
        grid-template-columns: 1fr;
        gap: 0.6rem 0;
        padding: 0.7rem 0;
        margin-bottom: 2.25rem;
    }
    .arrival-masthead-tag {
        border-left: none;
        padding-left: 0;
    }
    .arrival-files {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.4rem 0;
    }
    .arrival-file {
        padding: 0 0.85rem;
    }
    .arrival-section-mark {
        flex-wrap: wrap;
        gap: 0.6rem 1rem;
    }
    .arrival-section-mark-status {
        margin-left: 0;
        flex-basis: 100%;
    }
    .arrival-stage-title {
        font-size: clamp(1.7rem, 7vw, 2.4rem);
        max-width: none;
    }
    .arrival-stage-lede {
        padding-left: 1rem;
    }
    .arrival-stage-lede p {
        font-size: 1.02rem;
    }
    .arrival-ledger-item {
        grid-template-columns: 2rem 1fr;
        row-gap: 0.35rem;
    }
    .arrival-ledger-num {
        grid-row: 1;
        grid-column: 1;
    }
    .arrival-ledger-label {
        grid-row: 1;
        grid-column: 2;
        padding-right: 0;
        white-space: normal;
    }
    .arrival-ledger-leader {
        display: none;
    }
    .arrival-ledger-value {
        grid-row: 2;
        grid-column: 2;
        text-align: left;
        font-size: 1.1rem;
    }
    .arrival-ledger-note {
        grid-column: 2 / -1;
        margin-top: 0.4rem;
    }
    .arrival-field {
        grid-template-columns: 2rem 1fr;
    }
    .arrival-steps-item {
        grid-template-columns: 2rem 1fr;
    }
    .arrival-stage-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .arrival-stage-foot-final {
        align-items: stretch;
    }
    .arrival-cta {
        justify-content: center;
        padding: 0.95rem 1.25rem;
        letter-spacing: 0.18em;
    }
    .arrival-link {
        align-self: flex-start;
    }
    .panel-left {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: none;
        max-height: 82dvh;
        z-index: 24;
        display: flex;
        flex-direction: column;
        transform: translateY(105%);
        transition: transform 0.28s var(--motion-ease-shift);
        border-left: none;
        border-top: 1px solid var(--border, #e5e0d8);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        background: var(--bg-panel, #ffffff);
    }
    .app-layout.mobile-rail-open .panel-left {
        transform: translateY(0);
    }
    .mobile-rail-backdrop {
        position: fixed;
        inset: 0;
        z-index: 23;
        background: rgba(12, 10, 8, 0.36);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.24s ease;
    }
    .app-layout.mobile-rail-open .mobile-rail-backdrop:not(.hidden) {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-rail-fab {
        position: fixed;
        left: max(0.85rem, env(safe-area-inset-left));
        bottom: max(1rem, env(safe-area-inset-bottom));
        z-index: 20;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0.65rem 1rem;
        border: 1px solid rgba(212, 164, 74, 0.45);
        border-radius: 999px;
        background: rgba(249, 247, 242, 0.96);
        color: var(--text-primary, #1a1a1a);
        font-family: var(--font-mono);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        box-shadow: 0 10px 28px rgba(26, 26, 26, 0.12);
        cursor: pointer;
    }
    .mobile-rail-fab[hidden] {
        display: none !important;
    }
    .app-layout.mobile-rail-open .mobile-rail-fab,
    .app-layout:has(.panel-right:not(.hidden)) .mobile-rail-fab {
        display: none !important;
    }
    .rail-expand-button {
        display: none !important;
    }
    .mobile-scoped-results {
        position: absolute;
        left: 0.9rem;
        right: 0.9rem;
        top: 0.9rem;
        z-index: 16;
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 0.85rem 0.9rem;
        border-radius: 18px;
        border: 1px solid rgba(212, 164, 74, 0.24);
        background: rgba(249, 247, 242, 0.96);
        box-shadow: 0 12px 30px rgba(26,26,26,0.08);
    }
    .mobile-scoped-results-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        flex: 1 1 auto;
    }
    .mobile-scoped-results-mode {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent);
    }
    .mobile-scoped-results-title {
        font-family: var(--font-display);
        font-size: 1rem;
        line-height: 1.05;
        letter-spacing: -0.03em;
        color: var(--text-primary);
    }
    .mobile-scoped-results-summary {
        font-size: 0.74rem;
        line-height: 1.45;
        color: var(--text-secondary);
    }
    .mobile-scoped-results-expand {
        flex: 0 0 auto;
        align-self: center;
        min-height: 38px;
        padding: 0.55rem 0.85rem;
        border: 1px solid rgba(26,26,26,0.08);
        border-radius: 999px;
        background: rgba(255,255,255,0.86);
        color: var(--text-primary);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.04em;
    }
    .mobile-scoped-results[data-scoped-results-state="inactive"] .mobile-scoped-results-mode {
        color: var(--text-secondary);
    }
    .mobile-scoped-results[data-scoped-results-state="warning"] .mobile-scoped-results-mode {
        color: var(--score-mid);
    }
    .hero {
        padding: 0 1.5rem 5rem;
        align-items: center;
    }
    .hero-atmosphere::before {
        inset: -12% -18% -8% -18%;
    }
    .hero-atmosphere::after {
        background-size: 96px 96px, 96px 96px;
        opacity: 0.14;
    }
    .hero-title { font-size: 2.4rem; }
    .hero-search {
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
        gap: 0.5rem;
    }
    .hero-search:focus-within { box-shadow: none; }
    .hero-search input {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 9px;
        padding: 0.9rem 1rem;
    }
    .landing-nav { padding: 0 1.25rem; }
    .nav-coord { display: none; }
    .london-section { padding: 4rem 1.5rem; }
    .hex-grid { min-height: 280px; }
    .evidence-section { padding: 4rem 1.5rem; }
    .statement-dark { padding: 5rem 1.5rem; }
    .journey-section { padding: 4rem 1.5rem; }
    .journey-stage {
        flex: 0 0 100%;
    }
    .cta-section { padding: 5rem 1.5rem; }
    .landing-footer {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 2rem 1.5rem;
    }
    .provenance-bar {
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        padding: 1rem 1.5rem;
    }
    .provenance-item {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        padding: 0.5rem 0;
        width: 100%;
    }
    .provenance-item:last-child { border-bottom: none; }
    .scoped-results-module {
        padding: 0.9rem;
        border-radius: 18px;
    }
    .scoped-results-title {
        font-size: 1.05rem;
    }
    .frame-annotations {
        gap: 1rem;
        flex-wrap: wrap;
    }
    .footer-links { flex-direction: column; gap: 0.5rem; align-items: center; }
    .footer-coord { display: block; margin-top: 0.25rem; }

    /* Questionnaire responsive */
    .q-nav { padding: 1rem 1.25rem; }
    .q-heading { font-size: 1.8rem; }
    .q-subtext { font-size: 0.9rem; }
    .q-choice-row { grid-template-columns: 1fr; }
    .q-step-inner { padding: 1.5rem; }
}

/* -- Site evaluation (exact-site assessment) -- */
.site-evaluation-hint {
    margin: 0.25rem 0 0.65rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.site-evaluation-form {
    display: flex;
    gap: 0.45rem;
    align-items: stretch;
}

.site-evaluation-input {
    flex: 1;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-soft, #fcfaf7);
    font-family: var(--font);
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: border-color var(--transition);
}

.site-evaluation-input:focus {
    outline: none;
    border-color: var(--accent);
}

.site-evaluation-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.site-evaluation-feedback {
    margin: 0.55rem 0 0;
    min-height: 1.1em;
    font-size: 0.76rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.site-evaluation-feedback[data-tone="error"] {
    color: #a8423a;
}

.site-evaluation-retry {
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
}

.site-evaluation-result {
    margin-top: 0.85rem;
}

.site-evaluation-result.hidden {
    display: none;
}

.site-eval-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.95rem 1rem;
    background: var(--bg-soft, #fcfaf7);
}

.site-eval-card[data-tier="high"] { border-color: rgba(64, 124, 88, 0.55); }
.site-eval-card[data-tier="mid"]  { border-color: rgba(212, 164, 74, 0.55); }
.site-eval-card[data-tier="low"]  { border-color: rgba(168, 66, 58, 0.45); }

.site-eval-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.site-eval-tier {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.site-eval-score {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.site-eval-verdict {
    margin: 0.55rem 0 0.35rem;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.site-eval-location,
.site-eval-gap,
.site-eval-resolution {
    margin: 0.25rem 0;
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.site-eval-signals {
    list-style: none;
    margin: 0.7rem 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border-top: 1px solid rgba(28, 22, 17, 0.1);
    padding-top: 0.7rem;
}

.site-eval-signal {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    align-items: baseline;
}

.site-eval-signal-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.site-eval-signal-value {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
}

.site-eval-signal-note {
    grid-column: 2;
    font-size: 0.74rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.site-eval-actions {
    margin-top: 0.65rem;
    display: flex;
    justify-content: flex-end;
}

/* ===================================================================
   VENTURIS TOOLTIP — beginner-friendly hover hint
   Floating, body-anchored singleton driven by /js/tooltip.js.
   Lives above all map chrome (toolbars, terrain basis, legend).
   =================================================================== */
.venturis-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    max-width: 264px;
    padding: 0.7rem 0.85rem 0.75rem;
    background: #f1e8d6;
    color: #1c1611;
    border: 1px solid rgba(28, 22, 17, 0.22);
    box-shadow: 0 18px 36px rgba(28, 22, 17, 0.22);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 140ms ease, transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.venturis-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.venturis-tooltip.is-above {
    transform: translateY(4px);
}

.venturis-tooltip.is-above.is-visible {
    transform: translateY(0);
}

.venturis-tooltip-kicker {
    display: block;
    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(184, 134, 46, 0.32);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #b8862e;
}

.venturis-tooltip-body {
    display: block;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: #1c1611;
}

.venturis-tooltip-arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #f1e8d6;
    border-left: 1px solid rgba(28, 22, 17, 0.22);
    border-top: 1px solid rgba(28, 22, 17, 0.22);
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
}

.venturis-tooltip.is-above .venturis-tooltip-arrow {
    top: auto;
    bottom: -6px;
    border-left: none;
    border-top: none;
    border-right: 1px solid rgba(28, 22, 17, 0.22);
    border-bottom: 1px solid rgba(28, 22, 17, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .venturis-tooltip {
        transition: opacity 100ms ease;
        transform: none;
    }
    .venturis-tooltip.is-above,
    .venturis-tooltip.is-above.is-visible,
    .venturis-tooltip.is-visible {
        transform: none;
    }
}

/* ====================================================================
   Hotspot pointer — once-per-session orientation cue.

   Designed to feel like an object rendered into the same engine as the
   3D hex terrain: each line carries a darker outline so it reads
   against amber/brown/green alike, the dot is shaded as a lit sphere,
   and a soft elliptical ground shadow grounds it on the terrain. The
   sonar pulse is the only motion. Hovering the dot reveals an
   inline tooltip explaining the centroid math.
   ==================================================================== */

:root {
    --hotspot-tone: #f5ecd5;
    --hotspot-tone-soft: rgba(245, 236, 213, 0.65);
    --hotspot-tone-faint: rgba(245, 236, 213, 0.22);
    --hotspot-outline: #14110a;
    --hotspot-outline-soft: rgba(20, 17, 10, 0.55);
}

.hotspot-pointer {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-9999px, -9999px);
    pointer-events: none;
    z-index: 30;
    opacity: 0;
    transition: opacity 520ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform, opacity;
}

.hotspot-pointer.is-visible { opacity: 1; }
.hotspot-pointer.is-fading  { opacity: 0; }

/* Anchor: dot at SVG (32, 66) of a 64×92 viewBox — that's at 71.7%
   from the top of the SVG. translate(-50%, -71.7%) on the inner stack
   places the dot centre at the parent's (0,0), which JS positions on
   the geographic point. The tooltip-anchor wraps the SVG so :hover
   triggers on the visible marker, not on the bounding box. */
.hotspot-pointer-stack {
    position: relative;
    width: 64px;
    height: 92px;
    transform: translate(-50%, -71.7%);
    pointer-events: auto;
    cursor: help;
    /* Soft cast shadow so the marker reads as 3D against amber. Two
       layers: a tight near-shadow under the dot, and a longer
       ambient haze around the whole stack. */
    filter:
        drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.45))
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.32));
}

.hotspot-pointer-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ── Cast shadow on the terrain ──────────────────────────────────── */
.hp-ground {
    mix-blend-mode: multiply;
    opacity: 0.85;
    animation: hotspot-ground 2.4s cubic-bezier(0.45, 0, 0.35, 1) infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

@keyframes hotspot-ground {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(1.15); }
}

/* ── Chevron + connector ─────────────────────────────────────────── */
.hp-chevron-outline {
    fill: none;
    stroke: var(--hotspot-outline);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.hp-chevron {
    fill: none;
    stroke: var(--hotspot-tone);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hp-connector {
    stroke: var(--hotspot-tone-faint);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 1 3;
}

/* ── Dot: outline + lit sphere + glint ───────────────────────────── */
.hp-dot-outline {
    fill: var(--hotspot-outline);
    opacity: 0.95;
}

.hp-dot-fill {
    /* The radial-gradient fills the dot with a top-left highlight that
       fades to a darker brass at the bottom-right, matching the map's
       NW lighting convention. Reads as a 3D sphere without any real
       transform. */
    filter: drop-shadow(0 0 4px rgba(245, 236, 213, 0.45));
}

.hp-dot-glint {
    fill: #ffffff;
    opacity: 0.92;
    filter: blur(0.4px);
}

/* ── Sonar pulse rings ───────────────────────────────────────────── */
.hp-pulse {
    fill: none;
    stroke: var(--hotspot-tone-soft);
    stroke-width: 1.4;
    transform-box: fill-box;
    transform-origin: 32px 66px;
    animation: hotspot-sonar 2.4s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
    will-change: r, opacity, stroke-width;
}

.hp-pulse-1 { animation-delay: 0s; }
.hp-pulse-2 { animation-delay: 1.2s; }

@keyframes hotspot-sonar {
    0% {
        r: 5px;
        opacity: 0.95;
        stroke-width: 1.6;
    }
    100% {
        r: 22px;
        opacity: 0;
        stroke-width: 0.6;
    }
}

/* ── Side label ──────────────────────────────────────────────────── */
.hotspot-pointer-label {
    position: absolute;
    top: 53%;
    left: calc(50% + 18px);
    transform: translate(0, -50%);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hotspot-tone);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.hotspot-pointer-label-rule {
    width: 22px;
    height: 1px;
    background: var(--hotspot-tone-soft);
}

.hotspot-pointer-label-mark {
    line-height: 1;
}

/* ── Hover tooltip ───────────────────────────────────────────────── */
/* Tooltip is nested inside .hotspot-pointer-stack so it inherits the
   stack's translate(-50%, -71.7%) and ends up correctly anchored above
   the chevron. Positioned with `top: 0` + translate(-100%) so its
   bottom edge sits 8px above the stack's layout top — which visually
   means just above the chevron tip after the stack's transform. */
.hotspot-pointer-tooltip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% - 8px));
    width: max-content;
    max-width: 240px;
    padding: 10px 12px;
    background: rgba(20, 17, 10, 0.95);
    border: 1px solid rgba(245, 236, 213, 0.35);
    color: var(--hotspot-tone);
    font-family: var(--font);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: left;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 200ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s linear 200ms;
}

.hotspot-pointer-stack:hover .hotspot-pointer-tooltip,
.hotspot-pointer-stack:focus-visible .hotspot-pointer-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, calc(-100% - 2px));
    transition:
        opacity 180ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s linear 0s;
}

.hotspot-pointer-tooltip-mark {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(245, 236, 213, 0.65);
}

.hotspot-pointer-tooltip-body {
    margin: 0;
    color: var(--hotspot-tone);
}

/* Tooltip arrow pointing down at the marker. */
.hotspot-pointer-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(20, 17, 10, 0.95);
}

@media (prefers-reduced-motion: reduce) {
    .hp-pulse,
    .hp-ground {
        animation: none;
        opacity: 0.6;
    }
}

@media (max-width: 640px) {
    .hotspot-pointer-label {
        font-size: 0.52rem;
        letter-spacing: 0.14em;
        left: calc(50% + 14px);
    }
    .hotspot-pointer-tooltip {
        max-width: 180px;
        font-size: 0.72rem;
    }
}

/* Street Read sub-controls live inside the advanced map panel. */
.map-street-read-sub--inline {
    padding-top: 0.15rem;
}

/* Street Read integrated ledger section title style */
.panel-ledger-section-title {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom: 1px solid rgba(212, 164, 74, 0.2);
    margin: 1.4rem 0 0.5rem 0;
    padding-bottom: 0.45rem;
    width: 100%;
}

/* Unlinked Workspace Overlay */
.invalid-client-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--color-surface);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.invalid-client-overlay.hidden {
    display: none !important;
}
.invalid-client-content {
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.invalid-client-content h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    color: var(--color-text-primary);
}
.invalid-client-content p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}




.scroll-bg-video {
    object-fit: cover;
    pointer-events: none;
}
.scroll-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.scroll-panel--has-video .scroll-content {
    position: relative;
    z-index: 2;
}

/* Branch Detail Overlay (Command Center Style) */
.branch-detail-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(6, 6, 8, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: cc-fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.branch-detail-overlay.hidden {
    display: none !important;
}

/* Control Centre Container */
.cc-control-centre {
    background-color: #07070a;
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(0, 240, 255, 0.03);
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    animation: cc-slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

/* Custom Scrollbar for HUD */
.cc-control-centre::-webkit-scrollbar {
    width: 6px;
}
.cc-control-centre::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.cc-control-centre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.cc-control-centre::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 240, 255, 0.3);
}

/* Header HUD Bar */
.cc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.01);
}

.cc-header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.cc-logo-pulse {
    width: 8px;
    height: 8px;
    background-color: #00f0ff;
    border-radius: 50%;
    box-shadow: 0 0 10px #00f0ff;
    animation: cc-pulse 2s infinite ease-in-out;
}

.cc-system-tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.1em;
}

.cc-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 2;
    text-align: center;
}

.cc-branch-badge {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    color: #00f0ff;
    border: 1px solid rgba(0, 240, 255, 0.3);
    background: rgba(0, 240, 255, 0.06);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cc-branch-title {
    margin: 0.4rem 0 0.2rem 0;
    font-size: 1.45rem;
    font-weight: 600;
    color: #f4f4f5;
    letter-spacing: -0.01em;
}

.cc-branch-address {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
}

.cc-header-telemetry {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    justify-content: flex-end;
}

.cc-telemetry-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cc-telemetry-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.05em;
}

.cc-telemetry-value {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: #e4e4e7;
    margin-top: 2px;
}

.cc-status-active {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #10b981;
    font-weight: 600;
}

.cc-status-dot {
    width: 6px;
    height: 6px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: cc-glow 1.5s infinite alternate;
}

.cc-close-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem;
    margin-left: 0.5rem;
    transition: color 0.15s, transform 0.15s;
}

.cc-close-btn:hover {
    color: #fff;
    transform: scale(1.15);
}

/* Main Grid Layout */
.cc-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.05fr;
    gap: 1.25rem;
    padding: 1.5rem;
    box-sizing: border-box;
}

.cc-panel {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cc-panel-header {
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.01);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cc-panel-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cc-panel-subtitle {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.05em;
}

.cc-panel-body {
    padding: 1.15rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Surveillance Specifics */
.cc-camera-controls {
    display: flex;
    gap: 4px;
}

.cc-cam-select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cc-cam-select:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
}

.cc-cam-select.active {
    background: rgba(0, 240, 255, 0.12);
    border-color: rgba(0, 240, 255, 0.4);
    color: #00f0ff;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.15);
}

.cc-cctv-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.cctv-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(140%) brightness(0.75) sepia(10%);
    transition: filter 0.3s ease;
}

.cctv-scanlines {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.12) 50%,
        rgba(0, 0, 0, 0.12)
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 10;
}

.cctv-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.cctv-top-bar, .cctv-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cctv-rec {
    display: flex;
    align-items: center;
    color: #ef4444;
    font-weight: bold;
}

.cctv-dot {
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    margin-right: 6px;
    animation: cctv-blink 1s step-start infinite;
    box-shadow: 0 0 6px #ef4444;
}

.cctv-feed-type {
    color: #10b981;
}

.cc-logs-terminal {
    margin-top: 1rem;
    background: #040406;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 0.75rem 0.85rem;
    font-family: var(--font-mono);
}

.cc-logs-header {
    font-size: 0.58rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-bottom: 4px;
}

.cc-logs-content {
    height: 75px;
    overflow-y: auto;
    font-size: 0.65rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.65);
}

.cc-log-row {
    margin-bottom: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cc-log-time {
    color: rgba(255, 255, 255, 0.25);
    margin-right: 4px;
}

.cc-log-type {
    font-weight: bold;
    margin-right: 4px;
}
.cc-log-type.sec { color: #f59e0b; }
.cc-log-type.sys { color: #00f0ff; }
.cc-log-type.ai { color: #8b5cf6; }
.cc-log-type.data { color: #10b981; }

/* Metrics Panels (Middle Panel) */
.cc-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.85rem;
    height: 100%;
}

.cc-metric-card {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 0.95rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.cc-metric-card:hover {
    background: rgba(255, 255, 255, 0.015);
}

.cc-glow-cyan:hover {
    border-color: rgba(0, 240, 255, 0.35);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.08);
}
.cc-glow-amber:hover {
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.08);
}
.cc-glow-green:hover {
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.08);
}
.cc-glow-purple:hover {
    border-color: rgba(139, 92, 246, 0.35);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.08);
}

.cc-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cc-metric-title {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cc-metric-pill {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.cc-metric-pill.cyan {
    color: #00f0ff;
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.25);
}
.cc-metric-pill.amber {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.cc-metric-pill.green {
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.cc-metric-pill.purple {
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.cc-metric-value {
    font-size: 1.65rem;
    font-weight: 700;
    color: #fff;
    margin: 0.5rem 0;
    letter-spacing: -0.02em;
}

.cc-metric-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}

.cc-metric-footer {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.3;
}

.cc-trend-up {
    color: #10b981;
    font-weight: 600;
    margin-right: 2px;
}

/* Performance and Analytics (Right Panel) */
.cc-analytics-layout {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    justify-content: space-between;
}

.cc-performance-chart {
    background: rgba(255, 255, 255, 0.005);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 0.85rem;
    box-sizing: border-box;
}

.cc-chart-container {
    display: flex;
    height: 110px;
    position: relative;
    padding-left: 25px;
    margin-bottom: 0.5rem;
}

.cc-chart-y-axis {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.2);
    text-align: right;
    padding-right: 4px;
}

.cc-chart-bars {
    display: flex;
    flex-grow: 1;
    justify-content: space-around;
    align-items: flex-end;
    height: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cc-chart-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

.cc-bar-container {
    height: 90px;
    width: 22px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

.cc-bar-fill {
    width: 9px;
    border-radius: 2px 2px 0 0;
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc-bar-fill.val-avg {
    background-color: rgba(255, 255, 255, 0.15);
}

.cc-bar-fill.val-branch {
    background-color: #00f0ff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.cc-chart-label {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 5px;
    text-transform: uppercase;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

.cc-chart-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding-top: 8px;
    margin-top: 8px;
}

.cc-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.4);
}

.cc-legend-color {
    width: 7px;
    height: 7px;
    border-radius: 1px;
}

.cc-legend-color.avg {
    background-color: rgba(255, 255, 255, 0.15);
}

.cc-legend-color.branch {
    background-color: #00f0ff;
}

/* System Commands Deck */
.cc-command-hub {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-hub-title {
    margin: 0 0 4px 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cc-hub-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.65rem 0.95rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    color: #e4e4e7;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}

.cc-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 240, 255, 0.25);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.cc-action-btn:active {
    transform: translateY(0);
}

.cc-btn-icon {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-btn-text {
    flex-grow: 1;
}

.cc-system-notification {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.15);
    color: #10b981;
    text-align: center;
    margin-top: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* Control Centre Footer */
.cc-footer {
    display: flex;
    justify-content: space-between;
    padding: 0.85rem 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.05em;
}

/* Custom Keyframe Animations */
@keyframes cc-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cc-slideUp {
    from { opacity: 0; transform: scale(0.96) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cc-pulse {
    0% { transform: scale(0.95); opacity: 0.5; box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.5); }
    70% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 6px rgba(0, 240, 255, 0); }
    100% { transform: scale(0.95); opacity: 0.5; box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
}

@keyframes cc-glow {
    from { filter: drop-shadow(0 0 1px #10b981); }
    to { filter: drop-shadow(0 0 5px #10b981); }
}

@keyframes cctv-blink {
    50% { opacity: 0; }
}

/* Responsive Overrides */
@media (max-width: 900px) {
    .cc-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    .cc-control-centre {
        max-height: 95vh;
    }
    .cc-header {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }
    .cc-header-logo {
        order: 1;
        justify-content: center;
    }
    .cc-header-center {
        order: 2;
    }
    .cc-header-telemetry {
        order: 3;
        justify-content: center;
        width: 100%;
        border-top: 1px solid rgba(255,255,255,0.05);
        padding-top: 0.75rem;
    }
    .cc-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .cc-metrics-grid {
        grid-template-columns: 1fr;
    }
    .cc-camera-controls {
        display: none; /* Hide custom camera selectors on tiny screens to save space */
    }
}

/* Branch Profile Overlay */
.branch-detail-overlay {
    background: rgba(22, 24, 20, 0.48);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: clamp(0.8rem, 2vw, 1.6rem);
    animation: branch-profile-fade-in 0.2s ease-out;
}

.branch-profile-shell {
    width: min(1120px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: #fffdfa;
    color: #191711;
    border: 1px solid rgba(25, 23, 17, 0.1);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(25, 23, 17, 0.26);
    animation: branch-profile-enter 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.branch-profile-shell::-webkit-scrollbar {
    width: 8px;
}

.branch-profile-shell::-webkit-scrollbar-track {
    background: #f5f2eb;
}

.branch-profile-shell::-webkit-scrollbar-thumb {
    background: #d4c8b3;
    border-radius: 8px;
}

.branch-profile-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 36px;
    gap: 1rem;
    align-items: start;
    padding: 1.35rem 1.45rem 1.15rem;
    border-bottom: 1px solid #ebe4d6;
    background:
        linear-gradient(135deg, rgba(15, 122, 74, 0.08), rgba(180, 134, 43, 0.08)),
        #fffefa;
}

.branch-profile-title-group {
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
}

.branch-profile-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid rgba(25, 23, 17, 0.08);
    background: #ffffff;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(25, 23, 17, 0.04);
}

.branch-profile-logo.hidden {
    display: none;
}

.branch-profile-heading {
    min-width: 0;
}

.branch-profile-kicker,
.branch-card-heading p,
.branch-signal-item span,
.branch-record-list span,
.branch-roadmap-list span {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.branch-profile-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.45rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid rgba(15, 122, 74, 0.22);
    border-radius: 999px;
    background: rgba(15, 122, 74, 0.08);
    color: #0f7a4a;
    font-size: 0.66rem;
    font-weight: 700;
}

.branch-profile-heading h2 {
    margin: 0;
    color: #17150f;
    font-size: clamp(1.35rem, 2.2vw, 2.1rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.branch-profile-heading p {
    margin: 0.5rem 0 0;
    max-width: 58ch;
    color: #615d54;
    font-size: 0.92rem;
    line-height: 1.45;
}

.branch-profile-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: 0.55rem;
    margin: 0;
}

.branch-profile-facts div {
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e8dfcf;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.branch-profile-facts dt {
    margin: 0 0 0.2rem;
    color: #81796b;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.branch-profile-facts dd {
    margin: 0;
    color: #201d17;
    font-size: 0.86rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.branch-profile-close {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(25, 23, 17, 0.14);
    border-radius: 8px;
    background: #ffffff;
    color: #302c23;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.branch-profile-close:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 122, 74, 0.35);
    background: #f7faf6;
}

.branch-profile-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.35fr;
    gap: 0.8rem;
    padding: 0.95rem;
    background:
        linear-gradient(180deg, rgba(247, 250, 246, 0.72), rgba(255, 253, 250, 0.96)),
        #fffdfa;
}

.branch-profile-card {
    min-width: 0;
    border: 1px solid #e8dfcf;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    padding: 1rem;
}

.branch-profile-card--signals {
    grid-row: span 2;
}

.branch-card-heading {
    margin-bottom: 0.85rem;
}

.branch-card-heading--inline {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: flex-start;
}

.branch-card-heading p {
    margin: 0 0 0.25rem;
    color: #81796b;
    font-size: 0.62rem;
    font-weight: 700;
}

.branch-card-heading h3 {
    margin: 0;
    color: #17150f;
    font-size: 1rem;
    line-height: 1.2;
}

.branch-record-list {
    display: grid;
    gap: 0.55rem;
}

.branch-record-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid #eee7dc;
}

.branch-record-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.branch-record-list span {
    color: #81796b;
    font-size: 0.58rem;
    font-weight: 700;
}

.branch-record-list strong {
    color: #201d17;
    font-size: 0.82rem;
    text-align: right;
    overflow-wrap: anywhere;
}

.branch-record-list strong.pending-metric {
    color: #a49e92;
    font-style: italic;
    font-weight: 600;
}

.branch-card-note {
    margin: 0.85rem 0 0;
    color: #6f695f;
    font-size: 0.78rem;
    line-height: 1.45;
}

.branch-status-chip {
    flex: 0 0 auto;
    padding: 0.32rem 0.55rem;
    border: 1px solid #ded5c4;
    border-radius: 999px;
    background: #f6f2ea;
    color: #6f695f;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.branch-status-chip[data-state="loading"] {
    border-color: rgba(180, 134, 43, 0.35);
    background: rgba(180, 134, 43, 0.1);
    color: #7a5b17;
}

.branch-status-chip[data-state="ready"] {
    border-color: rgba(15, 122, 74, 0.28);
    background: rgba(15, 122, 74, 0.1);
    color: #0f7a4a;
}

.branch-signal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.branch-signal-item {
    min-height: 112px;
    padding: 0.85rem;
    border: 1px solid #ece4d8;
    border-radius: 8px;
    background: #fffefa;
}

.branch-signal-item--wide {
    grid-column: 1 / -1;
    min-height: 96px;
}

.branch-signal-item span {
    display: block;
    margin-bottom: 0.5rem;
    color: #81796b;
    font-size: 0.58rem;
    font-weight: 700;
}

.branch-signal-item strong {
    display: block;
    color: #17150f;
    font-size: 1.05rem;
    line-height: 1.18;
}

.branch-signal-item small {
    display: block;
    margin-top: 0.5rem;
    color: #6f695f;
    font-size: 0.76rem;
    line-height: 1.35;
}

.branch-roadmap-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.branch-roadmap-list li {
    border-left: 3px solid rgba(15, 122, 74, 0.34);
    padding: 0.1rem 0 0.1rem 0.75rem;
}

.branch-roadmap-list span {
    display: block;
    color: #81796b;
    font-size: 0.58rem;
    font-weight: 700;
}

.branch-roadmap-list strong {
    display: block;
    margin-top: 0.18rem;
    color: #17150f;
    font-size: 0.86rem;
}

.branch-roadmap-list p {
    margin: 0.28rem 0 0;
    color: #6f695f;
    font-size: 0.76rem;
    line-height: 1.4;
}

.branch-action-list {
    display: grid;
    gap: 0.55rem;
}

.branch-profile-action {
    display: grid;
    gap: 0.2rem;
    width: 100%;
    padding: 0.72rem 0.82rem;
    border: 1px solid #e4dac9;
    border-radius: 8px;
    background: #ffffff;
    color: #17150f;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.branch-profile-action:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(15, 122, 74, 0.35);
    background: #f7faf6;
}

.branch-profile-action:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.branch-profile-action span {
    font-size: 0.86rem;
    font-weight: 800;
}

.branch-profile-action small {
    color: #6f695f;
    font-size: 0.72rem;
    line-height: 1.35;
}

@keyframes branch-profile-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes branch-profile-enter {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
    .branch-profile-header {
        grid-template-columns: minmax(0, 1fr) 36px;
    }

    .branch-profile-facts {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .branch-profile-close {
        grid-column: 2;
        grid-row: 1;
    }

    .branch-profile-grid {
        grid-template-columns: 1fr;
    }

    .branch-profile-card--signals {
        grid-row: auto;
    }
}

@media (max-width: 560px) {
    .branch-detail-overlay {
        align-items: stretch;
        padding: 0.5rem;
    }

    .branch-profile-shell {
        max-height: calc(100vh - 1rem);
    }

    .branch-profile-header {
        padding: 1rem;
    }

    .branch-profile-facts,
    .branch-signal-grid {
        grid-template-columns: 1fr;
    }

    .branch-card-heading--inline {
        flex-direction: column;
    }

    .branch-record-list div {
        display: grid;
        gap: 0.2rem;
    }

    .branch-record-list strong {
        text-align: left;
    }
}

/* ===================================================================
   MAP RESPONSIVE + ACCESSIBILITY CONTRACT

   Mobile overlays occupy explicit slots. Avoid adding independent top or
   bottom offsets elsewhere: doing so can pin one control to both edges and
   stretch it across the map on iOS Safari.
   =================================================================== */

body[data-map-stage="loading"] .map-mode-chrome,
body[data-map-stage="loading"] .map-legend {
    opacity: 0.58;
    pointer-events: none;
}

body[data-map-stage="error"] .map-update-status {
    border-color: rgba(185, 84, 59, 0.58);
}

@keyframes map-status-pulse {
    0%, 100% { opacity: 0.45; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 768px) {
    .map-container {
        --map-mobile-scope-height: 4.75rem;
        --map-status-height: 2.45rem;
    }

    .map-container:has(.mobile-scoped-results.mobile-scope-collapsed),
    body.mobile-scope-collapsed .map-container,
    body.panel-detail-open .map-container {
        --map-mobile-scope-height: 3rem;
    }

    .mobile-scoped-results {
        left: var(--map-safe-left);
        right: var(--map-safe-right);
        top: var(--map-safe-top);
        min-height: 4.25rem;
        max-height: 4.25rem;
        padding: 0.62rem 0.7rem;
        align-items: center;
        gap: 0.65rem;
        overflow: hidden;
        border-radius: 2px;
        box-shadow: 0 6px 18px rgba(28, 22, 17, 0.12);
        transition: max-height 180ms ease, min-height 180ms ease, padding 180ms ease;
    }

    .mobile-scoped-results-title,
    .mobile-scoped-results-summary {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mobile-scoped-results-title {
        font-size: 0.88rem;
    }

    .mobile-scoped-results-summary {
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .mobile-scoped-results-expand {
        min-width: 44px;
        min-height: 44px;
        padding: 0.45rem 0.62rem;
        border-radius: 2px;
    }

    .mobile-scoped-results.mobile-scope-collapsed,
    body.mobile-scope-collapsed .mobile-scoped-results,
    body.panel-detail-open .mobile-scoped-results {
        right: auto;
        min-height: 2.45rem;
        max-height: 2.45rem;
        max-width: min(15rem, calc(100% - 1.5rem));
        padding: 0.35rem 0.55rem;
        border-color: rgba(28, 22, 17, 0.16);
    }

    .mobile-scoped-results.mobile-scope-collapsed .mobile-scoped-results-title,
    .mobile-scoped-results.mobile-scope-collapsed .mobile-scoped-results-summary,
    .mobile-scoped-results.mobile-scope-collapsed .mobile-scoped-results-expand,
    body.mobile-scope-collapsed .mobile-scoped-results-title,
    body.mobile-scope-collapsed .mobile-scoped-results-summary,
    body.mobile-scope-collapsed .mobile-scoped-results-expand,
    body.panel-detail-open .mobile-scoped-results-title,
    body.panel-detail-open .mobile-scoped-results-summary,
    body.panel-detail-open .mobile-scoped-results-expand {
        display: none;
    }

    .mobile-scoped-results.mobile-scope-collapsed .mobile-scoped-results-mode,
    body.mobile-scope-collapsed .mobile-scoped-results-mode,
    body.panel-detail-open .mobile-scoped-results-mode {
        line-height: 1;
    }

    /* Explicitly clear the tablet bottom anchor. This is the key guard
       against the previous top+bottom stretch on phone layouts. */
    .map-mode-chrome {
        top: calc(var(--map-safe-top) + var(--map-mobile-scope-height) + 0.45rem);
        right: var(--map-safe-right);
        bottom: auto;
        left: var(--map-safe-left);
        width: auto;
        max-width: none;
        align-items: stretch;
    }

    .map-mode-primary {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .map-mode-primary .map-mode-btn {
        min-width: 0;
        padding-inline: 0.45rem;
        white-space: nowrap;
    }

    .map-mode-advanced {
        align-self: flex-end;
        width: min(100%, 20rem);
        max-height: min(54dvh, 28rem);
        overflow-y: auto;
    }

    .map-mode-advanced-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
    }

    .map-mode-advanced-summary::after {
        float: none;
        margin-left: 1rem;
    }

    .map-zoom-hint {
        top: calc(var(--map-safe-top) + var(--map-mobile-scope-height) + 6.65rem);
        left: var(--map-safe-left);
        max-width: calc(50% - var(--map-safe-left) - 0.3rem);
        padding: 0.42rem 0.55rem;
        font-size: 0.68rem;
        line-height: 1.3;
        border-radius: 2px;
    }

    .map-update-status {
        top: calc(var(--map-safe-top) + var(--map-mobile-scope-height) + 6.65rem);
        right: var(--map-safe-right);
        left: auto;
        max-width: calc(50% - var(--map-safe-right) - 0.3rem);
        min-height: 36px;
        transform: none;
        box-shadow: 0 6px 18px rgba(28, 22, 17, 0.14);
        font-size: 0.68rem;
    }

    .map-update-status-action {
        min-width: 44px;
        min-height: 36px;
    }

    .map-engine-strip {
        bottom: 0;
        min-height: var(--map-status-height);
        gap: 0.55rem;
        padding: 0.42rem var(--map-safe-right) max(0.42rem, env(safe-area-inset-bottom)) var(--map-safe-left);
        letter-spacing: 0.08em;
    }

    .map-engine-strip .engine-mark,
    .map-engine-strip .engine-sep,
    .map-engine-strip .engine-cell-stat,
    .map-engine-strip .engine-field:has([data-engine-count]) {
        display: none;
    }

    .map-engine-strip .engine-field {
        gap: 0.28rem;
        overflow: hidden;
    }

    .map-engine-strip .engine-field:has([data-engine-scope]) {
        flex: 1 1 auto;
    }

    .map-engine-strip .engine-cell,
    .map-engine-strip .engine-cell-label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .map-engine-strip .engine-field-zoom {
        flex: 0 0 auto;
    }

    .mobile-rail-fab {
        left: var(--map-safe-left);
        bottom: calc(var(--map-status-height) + var(--map-safe-bottom));
        border-radius: 2px;
    }

    .map-legend {
        top: auto;
        right: auto;
        bottom: calc(var(--map-status-height) + var(--map-safe-bottom) + 3.4rem);
        left: var(--map-safe-left);
        width: auto;
        max-width: calc(100% - var(--map-safe-left) - var(--map-safe-right));
        padding: 0.42rem 0.5rem;
        gap: 0.25rem;
        border-radius: 2px;
        box-shadow: 0 5px 14px rgba(28, 22, 17, 0.1);
    }

    .map-legend-heading {
        display: none;
    }

    .map-legend-list {
        display: grid;
        grid-template-columns: repeat(4, auto);
        gap: 0.5rem;
    }

    .map-legend-row {
        gap: 0.22rem;
    }

    .map-legend-swatch {
        width: 10px;
        height: 10px;
    }

    .map-legend-glyph,
    .map-legend-tier-name {
        display: none;
    }

    .map-legend-label {
        font-size: 0.56rem;
        letter-spacing: 0.03em;
    }

    .maplibregl-ctrl-bottom-right {
        right: var(--map-safe-right);
        bottom: calc(var(--map-status-height) + var(--map-safe-bottom)) !important;
    }

    /* Mobile detail sheet: data-sheet-snap is intentionally declarative so
       the parent controller can add drag/snap behavior without rewriting
       layout. The handle is decorative until that behavior is connected. */
    .panel-right[data-mobile-sheet] {
        --panel-sheet-min-height: 28dvh;
        --panel-sheet-height: 62dvh;
        --panel-sheet-max-height: min(94dvh, calc(100dvh - env(safe-area-inset-top)));
        z-index: 30;
        display: block;
        height: clamp(
            var(--panel-sheet-min-height),
            var(--panel-sheet-height),
            var(--panel-sheet-max-height)
        );
        max-height: var(--panel-sheet-max-height);
        padding: 0 0.95rem max(1rem, env(safe-area-inset-bottom));
        overflow-y: auto;
        scroll-padding-top: 5.5rem;
        border-radius: 14px 14px 0 0;
        overscroll-behavior-y: contain;
    }

    .panel-right[data-mobile-sheet][data-sheet-snap="peek"] {
        --panel-sheet-height: 28dvh;
    }

    .panel-right[data-mobile-sheet][data-sheet-snap="half"] {
        --panel-sheet-height: 62dvh;
    }

    .panel-right[data-mobile-sheet][data-sheet-snap="full"] {
        --panel-sheet-height: 94dvh;
        border-radius: 0;
    }

    .panel-right[data-mobile-sheet] .panel-sheet-handle {
        position: sticky;
        top: 0;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.25rem;
        width: calc(100% + 1.9rem);
        margin: 0 -0.95rem;
        padding: 0;
        border: 0;
        background: var(--bg-panel, #ffffff);
        cursor: ns-resize;
        touch-action: none;
    }

    .panel-right[data-mobile-sheet] .panel-sheet-handle::before {
        content: '';
        width: 2.75rem;
        height: 4px;
        border-radius: 999px;
        background: rgba(28, 22, 17, 0.24);
    }

    .panel-right[data-mobile-sheet] .panel-header {
        position: sticky;
        top: 1.25rem;
        z-index: 3;
        margin: 0 -0.95rem 0.75rem;
        padding: 0.55rem 0.95rem 0.65rem;
        background: rgba(255, 255, 255, 0.98);
    }

    .panel-right[data-mobile-sheet] .panel-mode-toggle {
        min-width: 0;
    }

    .panel-right[data-mobile-sheet] .panel-mode-btn,
    .panel-right[data-mobile-sheet] .btn-close {
        min-height: 44px;
    }

    body.panel-detail-open .map-mode-chrome,
    body.panel-detail-open .map-zoom-hint,
    body.panel-detail-open .map-update-status,
    body.panel-detail-open .map-legend,
    body.panel-detail-open .maplibregl-ctrl-bottom-right {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@media (max-width: 390px) {
    .map-mode-primary .map-mode-btn {
        font-size: 0.7rem;
    }

    .map-update-status {
        max-width: calc(58% - var(--map-safe-right));
    }

    .map-zoom-hint {
        max-width: calc(42% - var(--map-safe-left));
    }

    .panel-right[data-mobile-sheet] .panel-heading-stack {
        max-width: 8rem;
    }
}

/* Journey-controller details shared by desktop and mobile. */
.detail-subtitle {
    margin: 0.2rem 0 0;
    color: rgba(28, 22, 17, 0.62);
    font-size: 0.72rem;
    line-height: 1.35;
    max-width: 28rem;
}

.panel-detail-skeleton {
    display: grid;
    gap: 0.55rem;
    width: 100%;
}

.panel-detail-skeleton span,
.panel-detail-skeleton-line {
    display: block;
    min-height: 0.75rem;
    border-radius: 2px;
    background: rgba(28, 22, 17, 0.11);
    animation: panel-skeleton-shift 1.2s ease-in-out infinite alternate;
}

.panel-detail-skeleton span:nth-child(2n) { width: 78%; }
.panel-detail-skeleton-line { color: transparent; }

@keyframes panel-skeleton-shift {
    to { opacity: 0.45; }
}

.competitor-list .competitor-item {
    width: 100%;
    appearance: none;
    border: 0;
    border-bottom: 1px solid rgba(28, 22, 17, 0.1);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.competitor-list .competitor-item:hover,
.competitor-list .competitor-item:focus-visible {
    background: rgba(64, 116, 88, 0.08);
}

.map-legend-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.map-legend-symbol {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    border: 1px solid rgba(28, 22, 17, 0.38);
    background: #4d886a;
}

.map-legend-symbol[data-symbol="cluster"] { background: #2f6f53; box-shadow: inset 0 0 0 2px #f6f1e8; }
.map-legend-symbol[data-symbol="branch"] { border-radius: 2px; background: #c99635; }
.map-legend-symbol[data-symbol="selected"] { background: transparent; border: 2px solid #1c1611; }
.map-legend-symbol[data-symbol="coverage-complete"] { background: #4d886a; }
.map-legend-symbol[data-symbol="coverage-partial"] { background: #c9a34e; }
.map-legend-symbol[data-symbol="coverage-missing"] { background: #9da6aa; }
.map-legend-symbol[data-symbol="pulse-high"] { background: #c47745; }
.map-legend-symbol[data-symbol="pulse-low"] { background: #e7d5ad; }

.map-mode-btn.is-locked {
    opacity: 0.62;
}

.panel-right.is-dragging {
    transition: none !important;
    user-select: none;
}

@media (min-width: 769px) {
    .map-legend-toggle > span:last-child { display: none; }
}

@media (max-width: 768px) {
    .map-legend-rows { display: none; }
    .map-legend.is-expanded .map-legend-rows { display: grid; }
    .map-legend-context { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .panel-detail-skeleton span,
    .panel-detail-skeleton-line {
        animation: none;
    }
}