/* ==========================================================================
   WIDE LAYOUT (docs/features/ONE_UI.md): the pocket pages at every width.
   Three layers on top of pocket.css, chosen by viewport width alone:
     600  the content column widens to 720px; the dock stays
     840  the one <nav class="pocket-tabs"> becomes a left sidebar on every page
     1024 a list page draws an empty detail pane; a detail page draws its list beside it
   Below 600px nothing here changes the phone's layout.
   ========================================================================== */
:root {
    /* The sidebar's 248px plus, in the iOS app in landscape, the notch beside it (pocket.css --pocket-left-inset). */
    --pocket-sidebar-width: calc(248px + var(--pocket-left-inset));
    --pocket-list-pane-width: 380px;
}

/* The wide-only parts start hidden; their layers show them. */
.pocket-list-pane,
.pocket-detail-empty,
.pocket-wide-extra {
    display: none;
}

/* Below 840px the nav is the phone's dock: only a root draws it, without the sidebar's brand line and foot. */
@media (max-width: 839.98px) {
    .pocket-brand,
    .pocket-sidebar-foot {
        display: none;
    }

    body.pocket:not(.pocket-has-dock) .pocket-tabs {
        display: none;
    }
}

@media (min-width: 600px) {
    :root {
        --pocket-max-width: 720px;
    }
}

/* ---- 840: the sidebar. Brand, destinations, then the ⋮ menu's items as the foot (no ⋮ button). ---- */
@media (min-width: 840px) {
    :root {
        /* The bars start at the sidebar's edge; their controls line up with the column in the space that is left. */
        --pocket-bar-inset: max(0px, calc((100% - var(--pocket-sidebar-width) - var(--pocket-max-width)) / 2));
    }

    .pocket-has-dock {
        --pocket-tab-height: 0px;
    }

    body.pocket {
        padding-left: var(--pocket-sidebar-width);
    }

    .pocket-tabs {
        top: 0;
        right: auto;
        bottom: 0;
        width: var(--pocket-sidebar-width);
        height: auto;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: var(--pocket-space-sm);
        /* In the iOS app it draws behind the status bar and the notch, its items clear of both. */
        padding: calc(var(--pocket-top-inset) + var(--pocket-space-lg)) var(--pocket-space-md) var(--pocket-space-lg) calc(var(--pocket-left-inset) + var(--pocket-space-md));
        border-top: 0;
        border-right: var(--pocket-chrome-line-width) solid var(--chrome-line);
        box-shadow: none;
        overflow-y: auto;
    }

    .pocket-brand {
        display: block;
        padding: var(--pocket-space-sm) var(--pocket-space-md) var(--pocket-space-lg);
        color: var(--pocket-nav-active-text);
        font-family: var(--pocket-font-display);
        font-size: var(--pocket-font-size-2xl);
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1;
        text-decoration: none;
        text-transform: uppercase;
    }

    .pocket-tab {
        flex: none;
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--pocket-space-md);
        min-height: var(--pocket-target-min);
        padding: var(--pocket-space-sm) var(--pocket-space-md);
        border-radius: var(--pocket-radius-md);
        font-size: var(--pocket-font-size-base);
    }

    /* The active destination carries the pill as a row, not behind the glyph. */
    .pocket-tab.active {
        background: var(--chrome-pill);
        color: var(--on-chrome-pill);
    }

    .pocket-tab.active svg {
        background: none;
        color: inherit;
        padding: 0;
    }

    .pocket-sidebar-foot {
        display: flex;
        flex-direction: column;
        margin-top: auto;
        padding-top: var(--pocket-space-md);
        border-top: var(--pocket-chrome-line-width) solid var(--chrome-line);
    }

    .pocket-sidebar-foot .pocket-overflow-item {
        width: 100%;
        box-sizing: border-box;
        border: 0;
        background: none;
        border-radius: var(--pocket-radius-md);
        color: var(--pocket-nav-text);
        font: inherit;
        font-size: var(--pocket-font-size-base);
        text-align: left;
        cursor: pointer;
    }

    .pocket-sidebar-foot .pocket-overflow-item svg {
        color: inherit;
    }

    .pocket-sidebar-foot .pocket-overflow-item:hover,
    .pocket-sidebar-foot .pocket-overflow-item:active {
        background: var(--chrome-pill);
        color: var(--on-chrome-pill);
    }

    .pocket-toolbar,
    .pocket-namebar {
        left: var(--pocket-sidebar-width);
        /* The sidebar's width already holds the notch (:root above): the bars do not pad by it again. */
        --pocket-left-inset: 0px;
    }

    /* The sidebar holds what the ⋮ menu held. */
    .pocket-overflow-btn,
    .pocket-overflow-menu,
    .pocket-overflow-menu.open {
        display: none;
    }
}

/* ---- 1024: list and detail side by side. A detail page draws its list in .pocket-list-pane (an <aside> before
   <main>, scrolling itself); a list page keeps its list in <main> at the same width and draws .pocket-detail-empty
   where the detail goes. .pocket-wide-extra is the one hook for desktop-only features: empty today. ---- */
@media (min-width: 1024px) {
    .pocket-list-pane {
        display: block;
        position: fixed;
        top: var(--pocket-top-inset);
        bottom: 0;
        left: var(--pocket-sidebar-width);
        width: var(--pocket-list-pane-width);
        box-sizing: border-box;
        padding: var(--pocket-space-lg);
        overflow-y: auto;
        background: var(--pocket-bg);
        border-right: 1px solid var(--pocket-border);
    }

    /* A row of the list pane that is the page on screen (marked in Python: aria-current). */
    .pocket-list-pane [aria-current] {
        background: var(--pocket-border-light);
    }

    body.pocket:has(.pocket-list-pane) {
        padding-left: calc(var(--pocket-sidebar-width) + var(--pocket-list-pane-width));
        --pocket-bar-inset: max(0px, calc((100% - var(--pocket-sidebar-width) - var(--pocket-list-pane-width) - var(--pocket-max-width)) / 2));
    }

    body.pocket:has(.pocket-list-pane) .pocket-toolbar {
        left: calc(var(--pocket-sidebar-width) + var(--pocket-list-pane-width));
    }

    body.pocket:has(.pocket-detail-empty) .pocket-main {
        width: var(--pocket-list-pane-width);
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.pocket:has(.pocket-detail-empty) .pocket-namebar {
        right: auto;
        width: var(--pocket-list-pane-width);
    }

    .pocket-detail-empty {
        display: flex;
        position: fixed;
        top: var(--pocket-top-inset);
        bottom: 0;
        left: calc(var(--pocket-sidebar-width) + var(--pocket-list-pane-width));
        right: 0;
        align-items: center;
        justify-content: center;
        padding: var(--pocket-space-xl);
        color: var(--pocket-text-secondary);
        font-size: var(--pocket-font-size-base);
        text-align: center;
        border-left: 1px solid var(--pocket-border);
    }

    .pocket-wide-extra {
        display: block;
    }
}