:root {
    --sl-cyan: #00eaff;
    --sl-magenta: #ff00a8;
    --sl-purple: #a855f7;
    --sl-bg: #090a10;
    --sl-bg-2: #0b0d17;
    --bs-primary: var(--sl-purple);
    --bs-link-color: var(--sl-cyan);
    --bs-body-bg: var(--sl-bg);
    --bs-body-color: #e6e6f0;
    --bs-border-color: #27293a;
}

/* Background + global */
html, body {
    min-height: 100%
}

body {
    background: radial-gradient(1200px 600px at 80% -10%, rgba(168, 85, 247, .15), transparent 70%),
    radial-gradient(1000px 500px at -10% 20%, rgba(0, 234, 255, .12), transparent 65%),
    linear-gradient(180deg, var(--sl-bg), var(--sl-bg-2));
}

/* Reusable vibes */
.neon-text {
    text-shadow: 0 0 .4rem rgba(168, 85, 247, .8), 0 0 .8rem rgba(255, 0, 168, .35)
}

.neon-border {
    box-shadow: 0 0 0 .1rem rgba(168, 85, 247, .35), 0 0 1.25rem rgba(0, 234, 255, .18) inset;
    border: 1px solid rgba(168, 85, 247, .3) !important
}

.glass {
    background: rgba(15, 17, 30, .55);
    backdrop-filter: blur(6px)
}

.brand-gradient {
    background: linear-gradient(90deg, var(--sl-cyan), var(--sl-magenta) 50%, var(--sl-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero-gradient {
    background: radial-gradient(900px 450px at 20% 10%, rgba(255, 0, 168, .12), transparent 60%),
    radial-gradient(900px 450px at 80% 0%, rgba(0, 234, 255, .10), transparent 60%);
}

/* Navbar tweaks */
.navbar.glass {
    background: rgba(15, 17, 30, .55)
}

.navbar .nav-link {
    color: #cfe4ff
}

.navbar .nav-link:hover {
    color: #fff;
    text-shadow: 0 0 6px rgba(58, 167, 255, .9)
}

/* Forms */
.form-label {
    color: #e6e6f0
}

.form-control.glass {
    background: rgba(255, 255, 255, .04);
    color: #eaf2ff
}

.form-control.glass:focus {
    border-color: #3aa7ff;
    box-shadow: 0 0 0 .2rem rgba(58, 167, 255, .25);
    background: rgba(255, 255, 255, .06)
}

.invalid-feedback {
    display: block
}

/* ensure field errors show */

/* ===== SLAMLab Potree encapsulation ===== */

.sl-pview {
    /* The "card" height; tweak as you like */
    height: 70vh;
    position: relative;
    overflow: hidden; /* clip sidebar & toolbar to the glass card */
}

/* Potree expects absolute children; we anchor them to the card */
.sl-pview #potree_render_area,
.sl-pview #potree_sidebar_container {
    position: absolute;
    inset: 0; /* top/right/bottom/left = 0 relative to .sl-pview */
}

/* Sidebar gets a fixed width & scroll inside the card */
.sl-pview #potree_sidebar_container {
    width: 320px; /* adjust to taste */
    right: auto; /* ensure it sticks to the left */
    left: 0;
    overflow: auto; /* scroll within the card, not the page */
    border-right: 1px solid rgba(168, 85, 247, .25);
}

/* Render area occupies the remaining space to the right of the sidebar */
.sl-pview #potree_render_area {
    left: 320px; /* same as sidebar width */
    right: 0;
    top: 0;
    bottom: 0;
}

/* Keep the toolbar inside the card at the very top */
.sl-pview .potree_toolbar {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10; /* ensure it sits above canvas */
}

/* Optional: tweak Potree UI colors to match your theme */
.sl-pview .potree_toolbar {
    background: rgba(15, 17, 30, .75);
    border-bottom: 1px solid rgba(168, 85, 247, .25);
}

.sl-pview #potree_sidebar_container {
    background: rgba(15, 17, 30, .65);
}

/* ── home page ──────────────────────────────────────────────────────
   Instrument-panel register: hairline rules, mono labels, cyan reserved
   for measurement/state, never decoration. All rules scoped under .hp so
   nothing here touches Projects, sessions, or any other page. */
.hp { --hp-rule: #1c1e2b; --hp-tick: rgba(0, 234, 255, .85); --hp-label: #8a90aa; }

.hp-band {
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
    position: relative;
}

.hp-band-tight {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hp h1 {
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -.022em;
    line-height: 1.05;
    color: var(--bs-body-color);
}

.hp h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--bs-body-color);
}

.hp-close {
    max-width: 54ch;
}

.hp-hero h1 {
    max-width: none;
}

.hp-lead {
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 54ch;
}

.hp-eyebrow, .hp-label, .hp-cap, .hp-tab {
    font-family: var(--bs-font-monospace);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--hp-label);
}

.hp-eyebrow {
    letter-spacing: .24em;
    color: var(--hp-tick);
}

.hp-quiet-link {
    font-size: .9375rem;
    color: var(--bs-body-color);
    text-decoration: none;
    border-bottom: 1px solid var(--hp-rule);
    padding-bottom: .1rem;
    transition: border-color .15s ease, color .15s ease;
}

.hp-quiet-link:hover, .hp-quiet-link:focus-visible {
    color: var(--sl-cyan);
    border-color: var(--sl-cyan);
}

/* Live map */
.hp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.hp-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 0 .35rem;
    cursor: pointer;
}

.hp-tab[aria-selected="true"] {
    color: var(--sl-cyan);
    border-bottom-color: var(--sl-cyan);
}

.hp-tab:hover {
    color: #cfe4ff;
}

.hp-tab:focus-visible {
    outline: 2px solid var(--sl-cyan);
    outline-offset: 3px;
}

.hp-frame {
    border: 1px solid var(--hp-rule);
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: rgba(15, 17, 30, .55);
    position: relative;
}

.hp-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Statements */
.hp-rows {
    position: relative;
}

.hp-row {
    display: grid;
    grid-template-columns: 9rem 1fr 1fr;
    gap: 1.25rem 2.5rem;
    align-items: baseline;
    border-top: 1px solid var(--hp-rule);
    padding-block: 1.75rem;
}

.hp-row:last-of-type {
    border-bottom: 1px solid var(--hp-rule);
}

.hp-row .hp-label {
    padding-top: .2rem;
}

.hp-stmt {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.25;
    margin: 0;
    color: var(--bs-body-color);
}

.hp-clar {
    font-size: .9375rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 767.98px) {
    .hp-row {
        grid-template-columns: 1fr;
        gap: .375rem;
    }
}

/* Position-readout rail — the one signature element. Desktop only; tracks
   which STATEMENTS row is centered in view. Pure enhancement: JS absent or
   IntersectionObserver unsupported just leaves the dot at row one. */
.hp-rail {
    position: absolute;
    left: -3.5rem;
    top: 0;
    bottom: 0;
    width: 3rem;
    display: none;
}

@media (min-width: 1240px) {
    .hp-rail {
        display: block;
    }
}

.hp-rail-readout {
    position: absolute;
    top: -1.75rem;
    left: 0;
    font-family: var(--bs-font-monospace);
    font-size: .625rem;
    letter-spacing: .12em;
    color: var(--hp-tick);
    white-space: nowrap;
}

.hp-rail-tick {
    position: absolute;
    left: .6rem;
    width: .55rem;
    height: 1px;
    background: var(--hp-rule);
    transform: translateY(-50%);
}

.hp-rail-dot {
    position: absolute;
    left: .375rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--sl-cyan);
    box-shadow: 0 0 .4rem rgba(0, 234, 255, .6);
    transform: translate(0, -50%);
}

/* In / out */
.hp-inout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3rem;
}

.hp-inout-col {
    border-top: 1px solid var(--hp-rule);
    padding-top: 1rem;
}

.hp-inout-head {
    display: block;
    margin-bottom: .5rem;
}

.hp-inout-list {
    margin: 0;
    color: var(--bs-body-color);
    line-height: 1.8;
}

.hp-inout-list code {
    color: var(--bs-body-color);
    background: rgba(255, 255, 255, .06);
    border-radius: .3rem;
    padding: .1rem .35rem;
    font-size: .875em;
}

@media (max-width: 575.98px) {
    .hp-inout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}