/* ==========================================================================
   chrome.css — shared chrome shell: top nav, hamburger, mobile menu overlay,
   mobile bottom nav, filter drawer.

   De-duped from public/orbit/orbit.css and public/spacetrack/spacetrack.css
   (Phase 2.1 CSS de-dupe, see docs/game-plans/34_unblock_landing_refactor_plan.md).
   Every rule below was byte-identical in both source files before the move.

   Depends on --sa-*, --panel-*, --hud-blur, --font-mono, which orbit.css
   (and, via its own link order, spacetrack.css) still declare locally — migrating
   those into css/tokens.css is a separate, out-of-scope step. This file must
   be linked AFTER orbit.css (and after spacetrack.css where present) so those
   custom properties already exist when this stylesheet is parsed.

   Two selectors that LOOK like duplicates were deliberately left in their
   source files instead of moved here — the rule bodies differ between
   /orbit/ and /spacetrack/ pages:
     - .hamburger-btn        (orbit.css: full styled button; spacetrack.css:
                               `display:none` — spacetrack pages don't use a
                               hamburger button, only the bottom nav)
     - .hamburger-btn @ (max-width:768px)
                              (orbit.css: `display:flex` to reveal it;
                               spacetrack.css: `display:none !important` to
                               keep it hidden)
     - .mobile-menu__inner   (orbit.css adds `align-items: center`;
                               spacetrack.css does not)
     - .spacetrack-nav__brand (orbit.css adds `display:flex; align-items:
                               center; gap:6px` for a logo+text layout;
                               spacetrack.css's brand is text-only)
   See the plan doc / commit message for the full drift report.
   ========================================================================== */

/* ── Top navigation (shared across /orbit/ and /spacetrack/ pages) ────────── */
.spacetrack-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 8px;
    padding:
        calc(10px + var(--sa-top))
        calc(16px + var(--sa-right))
        10px
        calc(16px + var(--sa-left));
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    background: linear-gradient(180deg, rgba(0, 8, 16, 0.85) 0%, rgba(0, 8, 16, 0.4) 80%, transparent 100%);
    pointer-events: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.spacetrack-nav::-webkit-scrollbar { display: none; }

.spacetrack-nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

.spacetrack-nav__link {
    display: block;
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    font-weight: 700;
    color: rgba(160, 210, 240, 0.55);
    text-decoration: none;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: auto;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .spacetrack-nav__link:hover {
        color: rgba(200, 240, 255, 0.85);
        background: rgba(0, 210, 255, 0.08);
    }
    .spacetrack-nav__brand:hover { color: #00d2ff; }
    .spacetrack-nav__source-link:hover {
        color: rgba(200, 240, 255, 0.85);
        background: rgba(0, 210, 255, 0.08);
    }
}
.spacetrack-nav__link--active {
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.1);
}

.spacetrack-nav__source-link {
    padding: 4px 9px;
    color: rgba(160, 210, 240, 0.45);
    text-decoration: none;
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    font-weight: 600;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: auto;
    transition: color 0.15s, background 0.15s;
}

/* ── Mobile bottom navigation bar — hidden on desktop, shown on mobile ────── */
.mobile-bottom-nav {
    display: none;
}

/* ── Mobile menu overlay (hamburger-triggered full-screen nav) ────────────── */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(0, 8, 16, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 32px 48px;
    animation: mobile-menu-fade-in 0.15s ease-out;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__close {
    position: absolute;
    top: calc(16px + var(--sa-top));
    right: calc(16px + var(--sa-right));
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 4px;
    color: rgba(200, 240, 255, 0.7);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
    z-index: 1;
}
.mobile-menu__close:hover { border-color: rgba(0, 210, 255, 0.6); color: #00d2ff; }
@keyframes mobile-menu-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.mobile-menu__link {
    display: block;
    padding: 16px 12px;
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: rgba(160, 210, 240, 0.65);
    text-decoration: none;
    text-align: center;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu__link:active {
    background: rgba(0, 210, 255, 0.12);
    color: rgba(220, 245, 255, 0.95);
}
.mobile-menu__link--active {
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.1);
}
.mobile-menu__source {
    font-size: 0.85rem;
    color: rgba(160, 210, 240, 0.4);
}
.mobile-menu__divider {
    border: none;
    border-top: 1px solid rgba(0, 210, 255, 0.12);
    margin: 12px 0;
}

/* ── Filter drawer (mobile slide-out, layers) ──────────────────────────────
 * Both source files defined `.filter-drawer-overlay` twice: an unconditional
 * `display:none` fallback (below) and the real positioned styling nested
 * inside the shared @media(max-width:768px) block further down. Preserved
 * as-is — collapsing the redundancy is out of scope for this de-dupe. */
.filter-drawer-overlay {
    display: none;
}

.filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 29;
    width: min(85vw, 320px);
    background: linear-gradient(145deg, rgba(0, 12, 24, 0.97) 0%, rgba(0, 25, 45, 0.95) 100%);
    border-left: 1px solid rgba(0, 210, 255, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(16px + var(--sa-top)) 16px calc(16px + var(--sa-bottom)) 16px;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    scrollbar-width: thin;
}

.filter-drawer-overlay[open] {
    display: block;
}

.filter-drawer-overlay[open] .filter-drawer {
    transform: translateX(0);
}

.filter-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
}

.filter-drawer__title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(0, 210, 255, 0.8);
}

.filter-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 4px;
    color: rgba(200, 240, 255, 0.7);
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.filter-drawer__close:hover { border-color: rgba(0, 210, 255, 0.6); color: #00d2ff; }

/* Real positioned styling — mobile only, matches the source files' nesting */
@media (max-width: 768px) {
    .filter-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 28;
        background: rgba(0, 8, 16, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .filter-drawer-overlay[open] {
        display: block;
    }
}

/* ── Mobile / Tablet (<768px) breakpoint rules for the chrome above ───────── */
@media (max-width: 768px) {
    /* Hide desktop nav links on mobile (bottom nav replaces them).
     * NOTE: orbit.css also sets `.spacetrack-nav__source-link { display:
     * block; }` at this breakpoint — spacetrack.css does not have that rule,
     * so it stays in orbit.css rather than moving here (not a true dupe). */
    .spacetrack-nav__list {
        display: none;
    }
    .spacetrack-nav {
        padding:
            calc(8px + var(--sa-top))
            calc(12px + var(--sa-right))
            8px
            calc(12px + var(--sa-left));
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 26;
        height: calc(56px + var(--sa-bottom));
        padding-bottom: var(--sa-bottom);
        background: linear-gradient(0deg, rgba(0, 8, 16, 0.95) 0%, rgba(0, 8, 16, 0.88) 100%);
        border-top: 1px solid rgba(0, 210, 255, 0.2);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        align-items: center;
        justify-content: space-around;
        pointer-events: auto;
    }
    .mobile-bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 44px;
        min-height: 44px;
        padding: 6px 4px;
        background: none;
        border: none;
        border-radius: 6px;
        color: rgba(160, 210, 240, 0.5);
        font-family: var(--font-mono);
        font-size: 0.45rem;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.15s, background 0.15s;
        -webkit-tap-highlight-color: transparent;
        text-align: center;
        line-height: 1.2;
    }
    @media (hover: hover) {
        .mobile-bottom-nav__item:hover {
            color: rgba(200, 240, 255, 0.85);
            background: rgba(0, 210, 255, 0.08);
        }
    }
    .mobile-bottom-nav__item--active {
        color: #00d2ff;
        background: rgba(0, 210, 255, 0.1);
    }
    .mobile-bottom-nav__icon {
        font-size: 1.1rem;
        line-height: 1;
    }
    .mobile-bottom-nav__label {
        white-space: nowrap;
    }
}

/* ── Mission clock (shared visual, used in nav bars and footers) ─────────── */
.mission-clock {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: rgba(160, 210, 240, 0.55);
    pointer-events: none;
    white-space: nowrap;
}
.mission-clock::before {
    content: 'YR';
    color: rgba(160, 210, 240, 0.35);
    font-weight: 600;
}
.mission-clock__year {
    color: #00d2ff;
}
.mission-clock__sep {
    color: rgba(160, 210, 240, 0.35);
}
.mission-clock__end {
    color: rgba(160, 210, 240, 0.45);
}
.mission-clock__bar {
    position: relative;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: rgba(160, 210, 240, 0.15);
    overflow: hidden;
}
.mission-clock__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: #00d2ff;
    border-radius: 2px;
}
@media (max-width: 600px) {
    .mission-clock__bar {
        display: none;
    }
}