/* App grid, rail (desktop column; mobile and tablet top bar with a drawer), main column and icon sprite. */

.app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
    padding-top: var(--topbar-h);
}

.main {
    min-width: 0;
    min-height: 0;
}

.thread {
    min-width: 0;
}

.thread__col {
    max-width: var(--col-max);
    margin: 0 auto;
    padding: var(--s-6) var(--s-5);
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Below 1200 px the rail is a fixed bar; only its brand row shows until the toggle opens the drawer. */
.rail {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 800;
    pointer-events: none;
}

.rail__brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    height: var(--topbar-h);
    padding: 0 var(--s-3) 0 var(--s-4);
    pointer-events: auto;
    background-color: var(--ink-1);
    border-bottom: 1px solid var(--rule);
}

.rail__logo {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
}

.rail__brand-text {
    display: flex;
    flex-direction: column;
}

.rail__word {
    font: 800 var(--t-lg) / 1 var(--font-display);
    letter-spacing: .04em;
    color: var(--paper-hi);
}

.rail__sub {
    font: 400 var(--t-xs) / 1 var(--font-mono);
    letter-spacing: .08em;
    color: var(--paper-lo);
}

.rail__toggle {
    margin-left: auto;
}

.rail__drawer {
    display: none;
    flex-direction: column;
    gap: var(--s-4);
    width: min(100%, var(--rail-w));
    max-height: calc(100dvh - var(--topbar-h));
    padding: var(--s-4);
    overflow-y: auto;
    pointer-events: auto;
    background-color: var(--ink-1);
    box-shadow: var(--e-overlay);
}

/* The toggle is a details element: its open state (no JavaScript needed) reveals the drawer. */
.rail__drawer-toggle > summary {
    list-style: none;
    cursor: pointer;
}

.rail__drawer-toggle > summary::-webkit-details-marker {
    display: none;
}

.rail:has(.rail__drawer-toggle[open]) .rail__drawer {
    display: flex;
}

.rail__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-top: auto;
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule);
}

.rail__version {
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

@media (min-width: 1200px) {
    .app {
        grid-template-columns: var(--rail-w) minmax(0, 1fr) auto;
        height: 100dvh;
        min-height: 0;
        padding-top: 0;
    }

    .main {
        overflow-y: auto;
    }

    .rail {
        position: relative;
        z-index: auto;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow-y: auto;
        pointer-events: auto;
        background-color: var(--ink-1);
        border-right: 1px solid var(--rule);
    }

    .rail__brand {
        height: auto;
        padding: var(--s-5) var(--s-4) var(--s-4);
        background-color: transparent;
        border-bottom: 0;
    }

    .rail__drawer-toggle {
        display: none;
    }

    .rail__drawer {
        display: flex;
        flex: 1;
        width: auto;
        max-height: none;
        padding: 0 var(--s-4) var(--s-4);
        background-color: transparent;
        box-shadow: none;
    }
}

/* Wide desktops give the reading column and the inspector more room. */
@media (min-width: 1560px) {
    :root {
        --col-max: 60rem;
        --inspector-w: 22.5rem;
    }
}

/* Installed with window-controls-overlay: the brand row is the title bar. Its empty space drags the window; controls stay clickable. */
@media (display-mode: window-controls-overlay) {
    .rail__brand {
        height: env(titlebar-area-height, var(--topbar-h));
        padding-left: max(var(--s-4), env(titlebar-area-x, 0));
        app-region: drag;
        -webkit-app-region: drag;
    }

    .rail__brand :is(a, button, summary, input, select, textarea) {
        app-region: no-drag;
        -webkit-app-region: no-drag;
    }
}