/* Shared reader primary navigation.
 *
 * Desktop follows the Stremio web-shell model: a compact, persistent icon rail owns
 * the inline edge and the application content is laid out beside it. The standalone
 * story player uses a separate contextual-control branch with no service or discovery
 * destinations. At compact widths the global destinations disappear; only those story
 * controls use the compass-triggered off-canvas surface.
 */

:root {
    --reader-primary-nav-size: 6rem;
}

.reader-primary-nav {
    box-sizing: border-box;
    position: fixed;
    z-index: 130;
    inset-block: 0;
    inset-inline-start: 0;
    display: flex;
    width: var(--reader-primary-nav-size);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-inline-end: 1px solid var(--rd-rule, var(--border));
    border-radius: 0;
    background: color-mix(in srgb, var(--rd-surface, var(--bg-card)) 97%, transparent);
    box-shadow: none;
    scrollbar-width: thin;
}

.reader-primary-nav__header {
    box-sizing: border-box;
    display: flex;
    min-height: 4.25rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.4rem;
    border-block-end: 1px solid var(--rd-rule-soft, var(--border));
}

.reader-primary-nav__brand {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 0.15rem;
    color: var(--rd-text, var(--text));
    font-family: var(--rd-font-display, Fraunces, serif);
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.1;
    text-decoration: none;
}

.reader-primary-nav__brand > i {
    color: var(--amethyst, var(--primary));
    font-size: 1.45rem;
}

.reader-primary-nav__brand:hover,
.reader-primary-nav__brand:focus-visible {
    color: var(--amethyst, var(--primary));
}

.reader-primary-nav__destinations,
.reader-primary-nav__tools,
.reader-primary-nav__service-switcher {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.55rem 0.4rem;
}

.reader-primary-nav__destinations {
    flex: 0 0 auto;
}

.reader-primary-nav__tools {
    margin-block-start: auto;
    border-block-start: 1px solid var(--rd-rule-soft, var(--border));
}

.reader-primary-nav__service-switcher {
    margin-block-start: auto;
    border-block-start: 1px solid var(--rd-rule-soft, var(--border));
}

.reader-primary-nav__item,
body.session-runtime-body .reader-primary-nav__tools .session-btn,
body.session-runtime-body .reader-primary-nav__tools .sidebar-toggle-btn {
    box-sizing: border-box;
    position: relative;
    display: flex;
    width: 100%;
    min-height: 3.8rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.24rem;
    margin: 0;
    padding: 0.42rem 0.18rem;
    border: 1px solid transparent;
    border-radius: var(--rd-radius, 12px);
    background: transparent;
    color: var(--rd-text-muted, var(--text-muted));
    font-family: var(--rd-font-ui, Inter, sans-serif);
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.reader-primary-nav__item > i,
body.session-runtime-body .reader-primary-nav__tools button > i {
    width: auto;
    font-size: 1.15rem;
    opacity: 0.48;
    transition: opacity 150ms ease, transform 150ms ease;
}

.reader-primary-nav__label,
body.session-runtime-body .reader-primary-nav__tools button > span {
    display: -webkit-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    opacity: 0.66;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.reader-primary-nav__item:hover,
.reader-primary-nav__item:focus-visible,
.reader-primary-nav__item.active,
body.session-runtime-body .reader-primary-nav__tools button:hover,
body.session-runtime-body .reader-primary-nav__tools button:focus-visible {
    border-color: color-mix(in srgb, var(--amethyst, var(--primary)) 34%, transparent);
    background: var(--rd-amethyst-wash, var(--bg-hover));
    color: var(--amethyst, var(--primary));
}

.reader-primary-nav__item.active::before {
    position: absolute;
    inset-block: 0.65rem;
    inset-inline-start: -0.42rem;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--amethyst, var(--primary));
    content: "";
}

[dir="rtl"] .reader-primary-nav__item.active::before {
    border-radius: 999px 0 0 999px;
}

.reader-primary-nav__item:hover > i,
.reader-primary-nav__item:focus-visible > i,
.reader-primary-nav__item.active > i,
body.session-runtime-body .reader-primary-nav__tools button:hover > i,
body.session-runtime-body .reader-primary-nav__tools button:focus-visible > i,
.reader-primary-nav__item.active .reader-primary-nav__label {
    opacity: 1;
}

.reader-primary-nav__item:focus-visible,
.reader-primary-nav__brand:focus-visible,
body.session-runtime-body .reader-primary-nav button:focus-visible {
    outline: 2px solid var(--amethyst, var(--primary));
    outline-offset: -2px;
}

.reader-primary-nav__compact-title,
.reader-primary-nav--player .session-player-nav__close {
    display: none;
}

@media (min-width: 993px) {
    body.session-runtime-body {
        --player-nav-rail-size: var(--reader-primary-nav-size);
        --player-stage-max: max(
            20rem,
            min(
                var(--rd-page, 1180px),
                calc(177.78dvh - 10.75rem),
                calc(100dvw - var(--player-nav-rail-size) - 1.5rem)
            )
        );
    }

    body.session-runtime-body .reader-primary-nav--player {
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    body.session-runtime-body .session-tools-toggle,
    body.session-runtime-body .session-player-nav-backdrop {
        display: none;
    }

    body.session-runtime-body .session-header,
    body.session-runtime-body .session-footer {
        inset-inline-start: var(--player-nav-rail-size);
    }

    body.session-runtime-body .session-main {
        box-sizing: border-box;
        width: calc(100dvw - var(--player-nav-rail-size));
        margin-inline-start: var(--player-nav-rail-size);
    }

    body.session-runtime-body .session-context-band {
        inset-inline-start: calc(var(--player-nav-rail-size) + 1rem);
        inset-inline-end: 1rem;
        width: auto;
    }
}

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

    body.session-runtime-body .reader-primary-nav--player {
        z-index: 520;
        width: min(19rem, calc(100dvw - 3rem));
        visibility: hidden;
        transform: translateX(-100%);
        pointer-events: none;
        box-shadow: 20px 0 56px rgba(0, 0, 0, 0.42);
        transition: transform 190ms var(--rd-ease-out, ease), visibility 190ms;
        backdrop-filter: blur(18px);
    }

    [dir="rtl"] body.session-runtime-body .reader-primary-nav--player {
        transform: translateX(100%);
        box-shadow: -20px 0 56px rgba(0, 0, 0, 0.42);
    }

    body.session-runtime-body .reader-primary-nav--player.is-open {
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;
    }

    body.session-runtime-body .reader-primary-nav--player .reader-primary-nav__header {
        min-height: var(--player-header-h, 64px);
        justify-content: space-between;
        padding-inline: 1rem 0.8rem;
    }

    body.session-runtime-body .reader-primary-nav--player .reader-primary-nav__brand,
    body.session-runtime-body .reader-primary-nav--player .reader-primary-nav__destinations {
        display: none;
    }

    body.session-runtime-body .reader-primary-nav__compact-title,
    /* Audit #1787260301009 fixes BUG-4871: closing the player drawer remains a
       44px action even though the visible icon is deliberately smaller. */
    body.session-runtime-body .reader-primary-nav--player .session-player-nav__close {
        display: inline-grid;
    }

    body.session-runtime-body .reader-primary-nav__compact-title {
        color: var(--rd-text, var(--text));
        font: 650 1rem var(--rd-font-display, Fraunces, serif);
    }

    body.session-runtime-body .reader-primary-nav--player .session-player-nav__close {
        width: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        min-height: 2.75rem;
        place-items: center;
        padding: 0;
        border: 1px solid transparent;
        border-radius: var(--rd-radius, 12px);
        color: var(--rd-text-muted, var(--text-muted));
        background: transparent;
    }

    body.session-runtime-body .reader-primary-nav__tools {
        margin-block-start: 0;
        border-block-start: 0;
        padding: 0.8rem;
    }

    body.session-runtime-body .reader-primary-nav__tools .session-btn,
    body.session-runtime-body .reader-primary-nav__tools .sidebar-toggle-btn {
        min-height: 3rem;
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.75rem;
        padding: 0.65rem 0.75rem;
        font-size: 0.9rem;
        text-align: start;
    }

    body.session-runtime-body .reader-primary-nav__tools button > i {
        width: 1.5rem;
        opacity: 0.72;
        text-align: center;
    }

    body.session-runtime-body .reader-primary-nav__tools button > span {
        width: auto;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reader-primary-nav,
    .reader-primary-nav__item,
    .reader-primary-nav__item > i {
        transition: none !important;
    }
}

/* IMP-1117: global search moved from the top bar to the primary rail.
 *
 * The rail hosts the toggle; the input is a flyout anchored to the rail's inline edge,
 * because the rail itself is a 6rem column with clipped inline overflow. Below 993px the
 * rail is display:none, so the toggle that opens the same panel moves into the header and
 * the panel drops under it, full width.
 */
.global-search-panel {
    position: fixed;
    z-index: 140;
    inset-block-start: 0.75rem;
    inset-inline-start: calc(var(--reader-primary-nav-size, 6rem) + 0.75rem);
    width: min(26rem, calc(100dvw - var(--reader-primary-nav-size, 6rem) - 1.5rem));
}

.global-search-panel .search-box {
    width: 100%;
    max-width: none;
    background: var(--rd-surface, var(--bg-card));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.global-search-toggle--compact,
.header-discover-toggle--compact {
    display: none;
}

@media (max-width: 992px) {
    .global-search-toggle--compact,
    .header-discover-toggle--compact {
        display: inline-flex;
    }

    .global-search-panel {
        inset-block-start: 4.25rem;
        inset-inline: 0.75rem;
        width: auto;
    }
}