@layer components {
    .app {
        display: flex;
        min-height: 100svh;
        align-items: stretch;
    }

    .app-sidebar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 16rem;
        flex-shrink: 0;
        background: var(--sidebar-bg);
        border-inline-end: var(--border-width) solid var(--sidebar-border);
        padding: var(--space-6) var(--space-4);
    }

    .nav-group + .nav-group {
        margin-block-start: var(--space-4);
    }

    .nav-group__label {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        color: var(--sidebar-text-subtle);
        padding-inline: var(--space-3);
        margin-block-end: var(--space-2);
    }

    .nav-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-block-end: 0;
    }

    .nav-link {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        color: var(--sidebar-text-muted);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        transition: background-color var(--transition-fast), color var(--transition-fast);
    }

    .nav-link:hover {
        color: var(--sidebar-text);
        background: var(--sidebar-surface-hover);
        text-decoration: none;
    }

    .nav-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--color-ring);
    }

    .nav-link.active {
        color: var(--sidebar-accent);
        background: var(--sidebar-accent-subtle);
    }

    .app-user-block {
        padding-block-start: var(--space-4);
        border-block-start: var(--border-width) solid var(--sidebar-border);
    }

    .app-user {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-block-end: var(--space-3);
    }

    /* The one deliberate exception to square corners — an avatar reads as
       an avatar because it's circular; everything else stays square. */
    .app-user__avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--color-accent);
        color: var(--color-accent-contrast);
        font-family: var(--font-mono);
        font-weight: var(--font-weight-semibold);
        font-size: var(--font-size-sm);
        text-transform: uppercase;
    }

    .app-user__info {
        flex: 1;
        min-width: 0;
    }

    .app-user__name {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--sidebar-text);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-user__email {
        font-size: var(--font-size-xs);
        color: var(--sidebar-text-subtle);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-user-block form {
        margin: 0;
        max-width: none;
    }

    .app-user-block .btn-danger {
        width: 100%;
    }

    .app-main {
        flex: 1;
        min-width: 0;
        padding: var(--space-8);
    }
}