.appShell.is-sidebar-collapsed {
    grid-template-columns: var(--navbar) minmax(0, 1fr) var(--sidebar-closed);
}

.appShell.is-sidebar-collapsed .sidebarPanel {
    justify-content: flex-start;
    padding: 0;
}

.appShell.is-sidebar-collapsed .sidebarPanel__content {
    display: none;
}

.appShell.is-sidebar-collapsed .sidebarPanel__collapsedToggle {
    display: inline-flex;
}

@media (max-width: 640px) {
    /* Phone: app shell */
    .appShell,
    .appShell.is-sidebar-collapsed {
        position: relative;
        --mobile-sidebar-header-height: var(--header);
        --mobile-sidebar-drawer-handle-height: 24px;
        --mobile-sidebar-drawer-top-offset: calc(
            var(--pad-1)
            + (var(--pad-3) * 2)
            + (var(--media-action-size) * 2)
        );
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        min-height: 100vh;
        min-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        padding-top: var(--footer);
        padding-bottom: calc(
            var(--navbar)
            + var(--mobile-sidebar-header-height)
            + (var(--border-2) * 2)
            + (var(--pad-1) * 2)
        );
    }


    /* Phone: method rail */
    .methodRail {
        grid-column: 1;
        grid-row: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        height: var(--navbar);
        min-height: var(--navbar);
        display: flex;
        flex-direction: row;
        align-items: stretch;
        border-right: 0;
        border-top: var(--border-2) solid var(--c-border);
        border-bottom: 0;
        background: var(--c-surface-glass);
        z-index: calc(var(--z-ui) + 3);
    }

    .methodRail__brand {
        display: flex;
        width: var(--navbar);
        min-width: var(--navbar);
        min-height: 44px;
        border-bottom: 0;
        border-right: var(--border-1) solid var(--c-border);
    }

    .methodRail__nav {
        width: auto;
        flex: 1 1 auto;
        min-height: 44px;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .methodRail__navItem {
        width:  calc(var(--navbar) + 2 * var(--pad-2));
        flex: 0 0 auto;
    }

    .methodRail__navItem + .methodRail__navItem {
        border-top: 0;
        border-left: var(--border-1) solid var(--c-border);
    }

    .methodRail__settings {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        width: var(--navbar);
        height: var(--navbar);
        min-width: var(--navbar);
        min-height: var(--navbar);
        border-top: 0;
        border-left: var(--border-1) solid var(--c-border);
    }

    .methodRailUtilityButton {
        width: 100%;
        height: 100%;
    }

    .methodRailUtilityButton + .methodRailUtilityButton {
        border-top: var(--border-1) solid var(--c-border);
        border-left: 0;
    }

    .navMethodBtn {
        min-width: 48px;
        min-height: 44px;
        padding: 0 var(--pad-1);
    }

    .navMethodBtn::after {
        display: none;
    }

    /* Phone: content/compare panel */
    body {
        overflow: hidden;
    }

    .contentArea {
        grid-column: 1;
        grid-row: 1;
        padding: var(--pad-1);
        padding-bottom: 0;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .appShell.is-alignment-workspace-active .panelInfoButton,
    .appShell.is-alignment-workspace-active .panelZoomButton {
        display: none;
    }

    .panelAlignmentPoints__magnification,
    .panelFileNameLabel {
        display: none;
    }
    .timelineStrip {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .timelineStrip__primary {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .timelineStrip__scrubber {
        flex: 1 1 100%;
        order: 2;
    }

    .timelineStrip__timeGroup {
        padding-left: 0;
    }

    .timelineStrip__speedLabel {
        display: none;
    }

    /* Phone: sidebar sheet */
    .sidebarPanel {
        grid-column: 1;
        grid-row: auto;
        position: fixed;
        top: auto;
        right: 0;
        bottom: var(--navbar);
        left: 0;
        width: 100%;
        height: calc(var(--mobile-sidebar-header-height) + (var(--border-2) * 2) + (var(--pad-1) * 2));
        align-items: flex-end;
        max-height: none;
        padding: var(--pad-1);
        z-index: calc(var(--z-ui) + 2);
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: none;
        overflow: hidden;
        transition: none;
    }

    .appShell.is-sidebar-open-mobile .sidebarPanel {
        top: auto;
        height: min(
            var(--mobile-sidebar-drawer-height, 56dvh),
            calc(
                100dvh
                - var(--footer)
                - var(--mobile-sidebar-drawer-top-offset)
                - var(--navbar)
            )
        );
        align-items: stretch;
        max-height: calc(
            100dvh
            - var(--footer)
            - var(--mobile-sidebar-drawer-top-offset)
            - var(--navbar)
        );
    }


    .sidebarPanel__content {
        position: relative;
        max-width: none;
        flex-direction: column-reverse;
        height: 100%;
        max-height: 100%;
        border: var(--border-2) solid var(--c-border);
        border-radius: var(--radius-1);
        background: transparent;
        box-shadow: none;
        pointer-events: auto;
        transition: background-color var(--ease-fast), border-color var(--ease-fast);
    }

    .sidebarPanel__header {
        height: var(--mobile-sidebar-header-height);
        border-top: var(--border-1) solid var(--c-border);
        border-bottom: 0;
    }

    .sidebarPanel__main {
        position: relative;
        padding-top: 0;
        background: var(--c-surface-solid);
    }

    .sidebarPanel__drawerHandle {
        position: absolute;
        top: var(--pad-1);
        inset-inline: 0;
        width: 100%;
        height: var(--mobile-sidebar-drawer-handle-height);
        background: var(--c-accent);
        mask: url("../../public/assets/icons/sidebar/drawer_handle.svg") center / auto 12px no-repeat;
        -webkit-mask: url("../../public/assets/icons/sidebar/drawer_handle.svg") center / auto 12px no-repeat;
        display: none;
        touch-action: none;
        user-select: none;
    }

    .appShell.is-sidebar-open-mobile .sidebarPanel__main {
        padding-top: calc(var(--mobile-sidebar-drawer-handle-height) + (var(--pad-1) * 2));
    }

    .appShell.is-sidebar-open-mobile .sidebarPanel__drawerHandle {
        display: block;
    }

    .sidebarPanel__scroll {
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        padding-block-end: var(--pad-2);
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
        transition: none;
    }

    .appShell:not(.is-sidebar-open-mobile) .sidebarPanel__content {
        max-height: calc(var(--mobile-sidebar-header-height) + (var(--border-2) * 2));
    }

    .appShell:not(.is-sidebar-open-mobile) .sidebarPanel__scroll {
        max-height: 0;
        overflow: hidden;
    }

    .appShell.is-sidebar-collapsed .sidebarPanel {
        justify-content: flex-start;
        padding: var(--pad-1);
    }

    .appShell.is-sidebar-collapsed .sidebarPanel__collapsedToggle {
        display: none;
    }

    .appShell.is-sidebar-collapsed .sidebarPanel__content {
        display: flex;
    }

    .sidebarPanel__toggleGlyph {
        transform: rotate(90deg);
    }

    .appShell:not(.is-sidebar-open-mobile) .sidebarPanel__toggleGlyph {
        transform: rotate(-90deg);
    }

    .sidebarPanel [data-sidebar-peek-gesture^="hold"],
    .sidebarPanel [data-sidebar-peek-gesture^="hold"] > button {
        touch-action: none;
    }

    .sidebarControlSection,
    .sidebarControlPanel,
    .sidebarControlGroup {
        transition:
            background-color var(--ease-fast),
            border-color var(--ease-fast),
            box-shadow var(--ease-fast),
            max-height var(--ease-shell);
    }

    .sidebarPanel.is-peek-through .sidebarPanel__content,
    .sidebarPanel.is-peek-through .sidebarPanel__main,
    .sidebarPanel.is-peek-through .sidebarControlSection,
    .sidebarPanel.is-peek-through .sidebarControlPanel,
    .sidebarPanel.is-peek-through .sidebarControlGroup {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .sidebarPanel.is-peek-through .sidebarPanel__scroll {
        scrollbar-color: transparent transparent;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .sidebarPanel.is-peek-through .sidebarPanel__scroll::-webkit-scrollbar-track,
    .sidebarPanel.is-peek-through .sidebarPanel__scroll::-webkit-scrollbar-thumb {
        background: transparent;
        border-color: transparent;
    }

    .sidebarPanel.is-peek-through .sidebarPanel__content * {
        visibility: hidden;
    }

    .sidebarPanel.is-peek-through .sidebarControl.is-peek-source,
    .sidebarPanel.is-peek-through .sidebarControl.is-peek-source *,
    .sidebarPanel.is-peek-through .sidebarControlSegment.is-peek-source,
    .sidebarPanel.is-peek-through .sidebarControlSegment.is-peek-source *,
    .sidebarPanel.is-peek-through .is-peek-source > .sidebarControl,
    .sidebarPanel.is-peek-through .is-peek-source > .sidebarControl * {
        visibility: visible;
        opacity: 1;
    }

    .sidebarPeekStatus {
        position: fixed;
        right: 0;
        bottom: var(--navbar);
        left: 0;
        z-index: calc(var(--z-ui) + 4);
        display: grid;
        height: calc(
            var(--mobile-sidebar-header-height)
            + (var(--border-2) * 2)
            + (var(--pad-1) * 2)
        );
        padding: var(--pad-1);
        color: var(--c-font);
        pointer-events: none;
    }

    .sidebarPeekStatus[hidden] {
        display: none;
    }

    .sidebarPeekStatus__label {
        display: none;
        min-width: 0;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding-inline: var(--pad-2);
        border: var(--border-1) solid var(--c-border);
        border-radius: var(--radius-1);
        background: var(--c-surface-solid);
        color: var(--c-font-muted);
        font: var(--font-button);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebarPeekStatus__choices {
        --sidebar-peek-choice-count: 2;

        width: 100%;
        min-width: 0;
        min-height: 0;
        display: flex;
        align-items: stretch;
        border: var(--border-1) solid var(--c-border);
        border-radius: var(--radius-1);
        background: var(--c-surface-solid);
        overflow: hidden;
    }

    .sidebarPeekStatus__choice {
        min-width: 0;
        min-height: 0;
        flex: 1 1 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        padding-inline: var(--pad-2);
        color: var(--c-font-muted);
        font: var(--font-button);
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: default;
    }

    .sidebarPeekStatus__choices > * + * {
        border-left: var(--border-1) solid var(--c-border);
    }

    .sidebarPeekStatus__choice.is-selected {
        background: color-mix(in srgb, var(--c-accent) 32%, var(--c-surface-solid));
        color: var(--c-font);
    }

    .sidebarPeekStatus__choiceIconSection {
        flex: 0 0 auto;
        height: 100%;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
    }

    .sidebarPeekStatus__choiceIcon.sidebarControl__icon {
        width: var(--sidebar-control-icon);
        height: var(--sidebar-control-icon);
        aspect-ratio: 1;
        margin: 0;
    }

    .sidebarPeekStatus.is-choice {
        display: block;
    }

    .sidebarPeekStatus.is-choice .sidebarPeekStatus__label {
        display: none;
    }

    .sidebarPeekStatus.is-choice .sidebarPeekStatus__choices {
        height: 100%;
    }

    .sidebarPeekStatus__live {
        display: none;
        min-width: 0;
        min-height: 0;
        align-items: center;
        justify-content: center;
        padding-inline: var(--pad-2);
        border: var(--border-1) solid var(--c-accent);
        border-radius: var(--radius-1);
        background: color-mix(in srgb, var(--c-accent) 32%, var(--c-surface-solid));
        color: var(--c-font);
        font: var(--font-button);
    }

    .sidebarPeekStatus.is-drag {
        display: block;
    }

    .sidebarPeekStatus.is-drag .sidebarPeekStatus__label,
    .sidebarPeekStatus.is-drag .sidebarPeekStatus__live {
        display: none;
    }

    .sidebarPeekStatus.is-drag .sidebarPeekStatus__choices {
        display: flex;
        height: 100%;
    }
    /* Phone: fixed footer */
    .appFooter {
        grid-column: 1;
        grid-row: auto;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        height: var(--footer);
        min-height: var(--footer);
        padding: var(--pad-1);
        background: var(--c-surface-solid);
        border-top: 0;
        border-bottom: var(--border-2) solid var(--c-border);
        z-index: calc(var(--z-ui) + 3);
    }
}