/* Purpose:
Applies target-device safe areas, readable fixed navigation, and scroll-responsive chrome to the rendered mobile application shell.

Responsibilities:
- Protect physical screen insets.
- Preserve readable and accessible persistent navigation.
- Increase usable reading height by condensing status and navigation chrome while the user scrolls down.
- Restore full labels and status spacing when the user returns toward the top.

Boundaries:
CSS controls presentation only; trust meaning, workflow state, privacy, and persistence remain in maintained source logic.

Key decisions and invariants:
Safe-area shielding remains fixed, critical status and every navigation destination remain present in compact mode, compact status tracks keep connectivity and save text readable without horizontal scrolling, content clearance tracks the actual expanded or condensed bottom navigation height, and density changes are immediate so controls never remain in motion during interaction.
*/
:root {
    --rbo-safe-area-top: env(safe-area-inset-top, 0px);
    --rbo-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --rbo-mobile-content-bottom: calc(104px + var(--rbo-safe-area-bottom));
}

.mobile-safe-area-guard {
    display: none;
}

@media (max-width: 720px) {
    /*
    The status bar is translucent in the installed iPhone app. Reserving inset padding only at
    initial layout does not prevent later content from scrolling underneath it, so this fixed,
    opaque guard owns the physical top inset for every route.
    */
    .mobile-safe-area-guard {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 55;
        height: var(--rbo-safe-area-top);
        display: block;
        background: #080b19;
        pointer-events: auto;
    }

    /* The Explore route omits the dossier topbar, so it must consume the iPhone top safe area directly. */
    .main-content-explore {
        padding-top: calc(20px + var(--rbo-safe-area-top)) !important;
        padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: var(--rbo-mobile-content-bottom) !important;
        padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    }

    .main-content {
        padding-bottom: var(--rbo-mobile-content-bottom) !important;
    }

    /* Keep operational chips below the same tested inset used by the fixed guard. */
    .topbar {
        padding-top: calc(10px + var(--rbo-safe-area-top)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: 10px !important;
        padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    }

    .topbar-operational-status {
        gap: 6px !important;
    }

    .operational-chip {
        min-height: 34px;
        padding: 6px 9px;
    }

    .operational-chip-package {
        max-width: 100%;
    }

    /* NavLink renders its anchor inside a child component, so these rules must remain global rather than scoped. */
    .sidebar .primary-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }

    .sidebar .nav-item {
        min-width: 0;
        min-height: 58px;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 5px 2px !important;
        overflow: visible;
        border-radius: 12px;
        text-align: center;
    }

    .sidebar .nav-icon {
        width: auto !important;
        flex: 0 0 auto;
        font-size: 1.08rem;
        line-height: 1;
    }

    .sidebar .nav-item > span:last-child {
        width: 100%;
        min-width: 0;
        max-height: 1.2rem;
        display: block;
        overflow: visible;
        color: inherit;
        font-size: clamp(0.62rem, 2.55vw, 0.7rem);
        font-weight: 760;
        line-height: 1.1;
        text-align: center;
        text-overflow: clip;
        white-space: nowrap;
    }

    /*
    Long-page reading mode. JavaScript adds this root class only after deliberate downward
    scrolling and removes it near the top or after sustained upward reading.
    */
    html.rbo-mobile-shell-condensed {
        --rbo-mobile-content-bottom: calc(72px + var(--rbo-safe-area-bottom));
    }

    html.rbo-mobile-shell-condensed .topbar {
        padding-top: calc(4px + var(--rbo-safe-area-top)) !important;
        padding-bottom: 4px !important;
    }

    /*
    Compact mode gives connectivity its intrinsic width, lets the complete save message use the
    remaining first row, and places package detail on a constrained second row. This removes the
    prior horizontal scroller while keeping the decision-relevant status meanings fully readable.
    */
    html.rbo-mobile-shell-condensed .topbar-operational-status {
        width: 100%;
        min-width: 0;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
        gap: 4px !important;
        overflow: visible !important;
        overscroll-behavior-inline: auto;
        scrollbar-width: auto;
        -webkit-overflow-scrolling: auto;
    }

    html.rbo-mobile-shell-condensed .operational-chip {
        min-width: 0;
        max-width: 100%;
        min-height: 28px;
        flex: none;
        padding: 4px 7px;
        font-size: 0.68rem;
    }

    html.rbo-mobile-shell-condensed .operational-chip-connectivity {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        white-space: nowrap;
    }

    html.rbo-mobile-shell-condensed .operational-chip-save {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    html.rbo-mobile-shell-condensed .operational-chip-package {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        justify-self: stretch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html.rbo-mobile-shell-condensed .sidebar {
        padding-top: 3px;
        padding-bottom: calc(3px + var(--rbo-safe-area-bottom));
    }

    html.rbo-mobile-shell-condensed .sidebar .primary-nav {
        gap: 2px;
    }

    html.rbo-mobile-shell-condensed .sidebar .nav-item {
        min-height: 44px;
        gap: 0 !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    html.rbo-mobile-shell-condensed .sidebar .nav-icon {
        font-size: 1.02rem;
    }

    html.rbo-mobile-shell-condensed .sidebar .nav-item > span:last-child {
        max-height: 0;
        opacity: 0;
        transform: translateY(3px);
    }
}