body {
    display: grid;
    grid-template-rows: var(--header-height) 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

.site-header {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: 0 var(--space-s);
    border-bottom: 1px solid var(--rule);
    background: var(--surface-sunken);
}

.site-header__brand {
    margin-right: auto;
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--ink-strong);
}

.site-header__user {
    font-size: var(--step--1);
    color: var(--ink-muted);
}

.workspace {
    display: grid;
    grid-template-columns: var(--list-width) 1fr;
    min-height: 0;
}

.list-pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-height: 0;
    padding: var(--space-s);
    border-right: 1px solid var(--rule);
}

.editor-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-s);
}

.signed-out {
    display: grid;
    place-items: center;
    padding: var(--space-l) var(--space-s);
}

@media (width < 48rem) {
    .workspace {
        grid-template-columns: 1fr;
    }

    .list-pane {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        max-height: 45vh;
    }
}