.shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* Fixed width, fixed place. Not resizable, not collapsible, not reorderable. */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    /* The first place sits on the line the screen's title sits on. */
    padding: var(--space-8) var(--space-5) var(--space-6);
    background: var(--surface);
    border-right: 1px solid var(--line);
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.sidebar-link {
    display: block;
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius);
    color: var(--ink-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    transition: background var(--duration) ease, color var(--duration) ease;
}

.sidebar-link:hover {
    background: var(--surface-hover);
    color: var(--ink);
}

.sidebar-link[aria-current='page'] {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.sidebar-person {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-3) 0;
    border-top: 1px solid var(--line);
}

.sidebar-person-name {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-signout {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    flex: none;
}

.sidebar-signout:hover {
    color: var(--ink);
}

.main {
    min-width: 0;
    padding: var(--space-8) var(--space-9) var(--space-10);
}

/* The screen area takes focus on arrival so the keyboard starts at the screen
   rather than at the top of the sidebar. That is not a control, so it is not
   ringed. */
.main:focus,
.main:focus-visible {
    outline: none;
    box-shadow: none;
}

.main-inner {
    max-width: var(--content-max);
    margin: 0 auto;
}

/* A screen that could not be drawn keeps the sidebar, and the padding that
   already surrounds it. */
.shell .failure {
    padding: 0;
}

/* Nothing was drawn at all: no sidebar, no card, nobody signed in. It stands in
   the middle of the page like the login screen does, rather than in the corner
   of one. */
#app > .failure {
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Only ever seen in a browser that will not run the product at all. */
noscript .failure-line {
    display: block;
    padding: var(--space-9);
}

.screen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    min-height: var(--control-height);
}

.screen-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.015em;
    line-height: var(--leading-tight);
}

/* On a phone the sidebar becomes a fixed bar at the bottom, holding everything
   it holds on a desktop: the five places and the person signed in. Its position
   is not configurable. */
@media (max-width: 720px) {
    .shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        height: auto;
        gap: 0;
        padding: 0 0 env(safe-area-inset-bottom);
        border-right: 0;
        border-top: 1px solid var(--line);
        z-index: 10;
    }

    /* Above the places, so the places stay under the thumb. */
    .sidebar-person {
        order: -1;
        align-items: center;
        padding: var(--space-2) var(--space-3);
        border-top: 0;
        border-bottom: 1px solid var(--line);
    }

    .sidebar-person-name {
        font-size: var(--text-sm);
        padding-left: var(--space-3);
    }

    .sidebar-signout {
        padding: var(--space-2) var(--space-3);
    }

    .sidebar-nav {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        gap: 0;
        padding: var(--space-2) var(--space-3);
    }

    /* Big enough to hit with a thumb without looking at it. */
    .sidebar-link {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(var(--row-height) + var(--space-2));
        text-align: center;
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-1);
    }

    .main {
        padding: var(--space-6) var(--space-5)
            calc(var(--space-10) + var(--space-10) + var(--space-5) + env(safe-area-inset-bottom));
    }
}