/* IMP-0621 — task-first reader navigation.
 *
 * Standard and detail routes share the compact primary rail defined in
 * primary-navigation.css. Session runtime owns a standalone document, but uses the
 * same component. All placement is logical so the component mirrors without a
 * second RTL implementation.
 */

@media (min-width: 993px) {
    .reader-shell--standard .sidebar,
    .reader-shell--detail .sidebar {
        width: var(--reader-primary-nav-size, 6rem);
    }

    .reader-shell--standard .main,
    .reader-shell--detail .main {
        margin-inline-start: var(--reader-primary-nav-size, 6rem);
        /* 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 - var(--reader-primary-nav-size, 6rem));
        max-width: calc(100dvw - var(--reader-primary-nav-size, 6rem));
    }
}

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

/* IMP-1117: the detail shell has always suppressed global search; it now has to name the
   rail/header toggles and the flyout that replaced the inline top-bar box, or the
   affordance would come back on exactly the surface that opted out of it.
   IMP-1118: the compact Discover toggle joins the same detail-shell suppression
   as the search toggle it sits beside -- the reading context stays decluttered. */
.reader-shell--detail [data-global-search-toggle],
.reader-shell--detail .global-search-panel,
.reader-shell--immersive .global-search-panel,
.reader-shell--detail .search-box,
.reader-shell--detail .header-discover-toggle--compact,
.reader-shell--detail .value-prop-strip {
    display: none;
}

.reader-shell--detail .header {
    background: var(--theme-canvas);
    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: 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 {
        min-height: 44px;
        width: 100%;
        min-width: 0;
        justify-content: center;
    }

    .mobile-nav-item span {
        width: 100%;
        min-width: 0;
        /* Audit #1787260306214 (BUG-9975): align the complete label with its icon
           without reducing the full-width navigation target, including RTL labels. */
        text-align: center;
        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;
    }
}