/* IMP-0621 — task-first reader navigation.
 *
 * Standard routes expose four reader tasks with real labels. Detail routes
 * collapse that shell so the authored object leads. Session runtime routes are
 * immersive and remove global chrome entirely. All placement is logical so the
 * same component mirrors without a second RTL implementation.
 */

@media (min-width: 993px) {
    .reader-shell--standard .sidebar {
        width: 216px;
    }

    .reader-shell--standard .main {
        margin-inline-start: 216px;
        /* Audit #3604 (BUG-2899): dvh/dvw track the visible viewport, where vh hides behind
           the mobile URL bar and vw counts the scrollbar gutter. The bare line is the
           fallback for browsers that cannot parse the dynamic unit. */
        max-width: calc(100vw - 216px);
        max-width: calc(100dvw - 216px);
    }

    .sidebar-header {
        justify-content: flex-start;
        padding-inline: 1rem;
    }

    .logo {
        justify-content: flex-start;
        gap: 0.75rem;
        min-width: 0;
    }

    .logo-label,
    .nav-label {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-item {
        justify-content: flex-start;
        gap: 0.75rem;
        width: calc(100% - 1rem);
        text-align: start;
    }

    .reader-shell--detail .sidebar {
        width: 64px;
    }

    .reader-shell--detail .main {
        margin-inline-start: 64px;
        /* Audit #3604 (BUG-2899): dvh/dvw track the visible viewport, where vh hides behind
           the mobile URL bar and vw counts the scrollbar gutter. The bare line is the
           fallback for browsers that cannot parse the dynamic unit. */
        max-width: calc(100vw - 64px);
        max-width: calc(100dvw - 64px);
    }

    .reader-shell--detail .logo-label,
    .reader-shell--detail .nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .reader-shell--detail .sidebar-header,
    .reader-shell--detail .nav-item {
        justify-content: center;
    }
}

.nav-item:focus-visible,
.mobile-nav-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.reader-shell--detail .search-box,
.reader-shell--detail .resume-chip,
.reader-shell--detail .credits-pill,
.reader-shell--detail .value-prop-strip {
    display: none;
}

.reader-shell--detail .header {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.reader-shell--immersive .sidebar,
.reader-shell--immersive .header,
.reader-shell--immersive .mobile-nav {
    display: none !important;
}

.reader-shell--immersive .main {
    margin-inline-start: 0;
    /* Audit #3604 (BUG-2899): dvh/dvw track the visible viewport, where vh hides behind
       the mobile URL bar and vw counts the scrollbar gutter. The bare line is the
       fallback for browsers that cannot parse the dynamic unit. */
    max-width: 100vw;
    max-width: 100dvw;
}

@media (max-width: 992px) {
    .reader-shell .sidebar {
        display: none;
    }

    .reader-shell .main {
        margin-inline-start: 0;
        /* Audit #3604 (BUG-2899): dvh/dvw track the visible viewport, where vh hides behind
           the mobile URL bar and vw counts the scrollbar gutter. The bare line is the
           fallback for browsers that cannot parse the dynamic unit. */
        max-width: 100vw;
        max-width: 100dvw;
    }

    .reader-shell--standard .mobile-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .reader-shell--standard .mobile-nav--authenticated {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mobile-nav-item {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .mobile-nav-item span {
        width: 100%;
        min-width: 0;
        line-height: 1.15;
        overflow: hidden;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .reader-shell--detail .mobile-nav {
        display: none;
    }

    .reader-shell--detail .content {
        padding-bottom: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .mobile-nav-item,
    .nav-item {
        transition: none;
    }
}