/*
 * Shared responsive refinement layer.
 *
 * App styles keep ownership of their desktop layouts and established
 * breakpoints. This file standardizes the transitions between those layouts:
 * fluid gutters, short-page height, compact navigation, stacked panel
 * behavior, and mobile control sizing.
 */
:root {
    --layout-page-gutter: var(--type-space-page, 16px);
    --layout-panel-max-height: min(42svh, 360px);
    --layout-mobile-control-height: 36px;
    --top-nav-primary-gap: clamp(15px, 4vw, 20px);
    --top-nav-group-gap: var(--type-space-compact, 8px);
    --top-nav-action-gap: clamp(2px, 0.5vw, 4px);
    --top-nav-primary-max-width: calc(20em + var(--layout-page-gutter));
    --layout-desktop-panel-min-height: calc(
        100dvh - var(--footer-height) - var(--main-padding-top) - var(--main-padding-bottom)
    );

    --body-width-min: 0px;
    --main-padding-top: calc(var(--nav-box-height) + var(--layout-page-gutter));
    --main-padding-left: var(--layout-page-gutter);
    --main-padding-right: var(--layout-page-gutter);
    --main-padding-bottom: var(--layout-page-gutter);
    --footer-padding-horizontal: var(--layout-page-gutter);
    --nav-leftbox-padding: var(--layout-page-gutter);
    --nav-rightbox-padding: var(--layout-page-gutter);
    --toggle-padding-right: var(--layout-page-gutter);
}

html {
    background: var(--theme-bg, #ffffff);
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
}

body > header {
    flex: 0 0 auto;
}

.nav-container {
    box-sizing: border-box;
}

main {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    flex: 1 0 auto;
}

.site-footer {
    flex: 0 0 auto;
}

/* Sparse landing lists fill the page, then retain the page-end gutter before the footer. */
:is(
    .resources-detail-column:has(.resources-home-panel.is-active),
    .microlecture-detail-column:has(.microlecture-home-panel.is-active)
) {
    padding-bottom: var(--layout-page-gutter);
}

/* Keep desktop panel dividers continuous from the navigation boundary to the footer. */
@media (min-width: 901px) {
    .members-section {
        flex: 1 0 auto;
        margin-bottom: calc(-1 * var(--main-padding-bottom));
    }

    :is(
        .lecture-section,
        .members-section,
        .microlecture-section,
        .resources-section,
        .board-section,
        .reservation-section
    ) {
        display: flex;
        flex-direction: column;
        min-height: var(--layout-desktop-panel-min-height);
    }

    :is(
        .lecture-layout,
        .members-layout,
        .microlecture-layout,
        .resources-layout,
        .board-layout,
        .reservation-layout
    ) {
        flex: 1 0 auto;
    }

    .members-main {
        padding-bottom: var(--main-padding-bottom);
    }

    .members-main:has(> .studio-profile.has-funded-projects) {
        padding-bottom: 0;
    }
}

.menu-toggle {
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: var(--type-control-padding-tight);
    border: 0;
    background: transparent;
    font-family: var(--body-font);
}

.menu-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.menu-toggle-icon {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.menu-toggle:focus-visible {
    outline: 2px solid var(--theme-focus-ring, #0969da);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 850px) {
    .nav-actions {
        gap: var(--top-nav-action-gap);
        padding-inline-end: var(--layout-page-gutter);
    }

    .nav-auth-item,
    .nav-theme-item,
    .menu-toggle {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 900px) {
    main:has(.studio-profile.has-funded-projects) {
        padding-bottom: 0;
    }

    /* Collapsible panels retain one boundary even while their sidebar is hidden. */
    :is(
        .members-layout,
        .microlecture-layout,
        .resources-layout,
        .board-layout
    )::after {
        content: "";
        z-index: 1;
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        justify-self: stretch;
        height: 1px;
        margin-left: calc(-1 * var(--main-padding-left));
        margin-right: calc(-1 * var(--main-padding-right));
        background: var(--theme-divider-strong);
        pointer-events: none;
    }

    /* A collapsed stacked panel keeps only its compact control and boundary. */
    .microlecture-section .microlecture-layout.is-sidebar-collapsed,
    .resources-section .resources-layout.is-sidebar-collapsed,
    .board-section .board-layout.is-sidebar-collapsed {
        row-gap: 0;
    }

    .members-section .members-sidebar-toggle {
        display: none;
    }

    .members-section .members-layout.is-sidebar-collapsed .members-sidebar {
        display: block;
    }

    :is(
        .lecture-sidebar,
        .members-sidebar,
        .microlecture-sidebar,
        .resources-sidebar,
        .board-sidebar
    ) {
        max-height: var(--layout-panel-max-height);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: auto;
    }

    .reservation-sidebar {
        flex-wrap: nowrap;
        gap: 0;
        padding-block: calc(var(--type-space-content) / 2);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .reservation-menu-link {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .site-fullscreen-button {
        display: none;
    }

    :root {
        --nav-box-height: 50px;
        --dropdown-position-top: var(--nav-box-height);
        --footer-height: auto;
    }

    .nav-container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        column-gap: var(--top-nav-group-gap);
        height: var(--nav-box-height);
    }

    .nav-left {
        flex: 0 1 auto;
        align-items: center;
        justify-content: flex-start;
        gap: var(--top-nav-primary-gap);
        width: auto;
        max-width: var(--top-nav-primary-max-width);
        min-width: 0;
        height: 100%;
        margin: 0;
        padding: 0 0 0 var(--layout-page-gutter);
        box-sizing: border-box;
    }

    .nav-left > li {
        min-width: 0;
    }

    .nav-left .separator {
        display: none;
    }

    /* Keep a visible divider in the existing gap without consuming width. */
    .nav-left > .separator + li > a {
        position: relative;
    }

    .nav-left > .separator + li > a::before {
        position: absolute;
        top: 50%;
        inset-inline-start: calc(-0.5 * var(--top-nav-primary-gap));
        content: "|";
        color: var(--theme-text-secondary);
        font-size: var(--nav-font-size);
        font-weight: 400;
        line-height: 1;
        pointer-events: none;
        transform: translate(-50%, -50%);
    }

    .nav-left a {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        min-height: 40px;
        white-space: nowrap;
    }

    .nav-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
        width: auto;
        min-width: 0;
        height: 100%;
        margin: 0 0 0 auto;
        padding: 0 var(--layout-page-gutter) 0 0;
        border: 0;
        box-sizing: border-box;
    }

    .menu-toggle {
        display: inline-flex;
        color: var(--toggle-font-color);
        font-size: 24px !important;
        font-weight: 700;
    }

    .nav-dropdown.show {
        max-height: calc(100dvh - var(--nav-box-height));
        padding: var(--type-space-compact, 8px) 0;
        overflow-y: auto;
        box-shadow: 0 8px 18px var(--theme-shadow, rgba(0, 0, 0, 0.3));
    }

    .nav-dropdown.show li,
    .nav-dropdown.show li + li {
        margin: 0;
        padding: 0 var(--layout-page-gutter);
    }

    .nav-dropdown.show li a {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: var(--dropdown-row-height);
        min-height: var(--dropdown-row-height);
    }

    .site-footer-meta {
        justify-content: flex-start;
    }

    .site-footer-visits {
        text-align: left;
    }

    .site-login-dialog :is(
        input[type="text"],
        input[type="email"],
        input[type="password"]
    ),
    .site-login-submit,
    .site-account-delete-button {
        min-height: 42px;
    }

    .site-login-close {
        width: 36px;
        height: 36px;
    }

    .playground-cell-menu-action {
        min-height: 30px;
        align-items: center;
    }
}

/* Compact only the visible label; preserve full DOM text and accessible names. */
@media (max-width: 430px) {
    .nav-label {
        font-size: 0;
    }

    .nav-label::after {
        content: attr(data-compact-label);
        font-size: var(--nav-font-size);
        line-height: var(--type-leading-ui, 1.4);
    }
}

@media (max-width: 360px) {
    :root {
        --nav-font-size: 14px;
    }

    .nav-label::after {
        content: attr(data-narrow-label);
    }
}

@media print {
    body {
        display: block;
        min-height: 0;
    }
}