/* ============================================================
   BLOCK — sidebar.css
   App layout wrapper and sidebar navigation.
   The .app-layout stretches to fill the body grid row and
   provides a sidebar + main content side-by-side layout.
   ============================================================ */

/* ── App layout wrapper ──────────────────────────────────── */
/* Replaces the body grid's second row (1fr) with a
   sidebar + main flex layout. */

.app-layout {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* ── Sidebar ──────────────────────────────────────────────── */

.sidebar {
    flex: 0 0 var(--sidebar-width, 16rem);
    background-color: var(--color-surface-chrome);
    border-inline-end: 1px solid var(--color-border);
    padding: var(--space-m);
}

.sidebar nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.sidebar nav ul li + li {
    margin-block-start: 0;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-s);
    border-radius: 6px;
    font-size: var(--step--1);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

.sidebar nav a:hover {
    color: var(--color-text);
    background-color: oklch(from var(--color-surface-chrome) calc(l - 0.04) c h);
}

.sidebar nav a:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.sidebar nav a[aria-current="page"] {
    color: var(--color-text);
    background-color: var(--color-surface-base);
}

/* ── Sidebar condensed — narrower width ─────────────────── */

.sidebar[data-size="sm"] {
    flex-basis: 12rem;
    padding: var(--space-s);
}

.sidebar[data-size="sm"] nav a {
    padding: var(--space-xs) var(--space-s);
}

/* ── Main content within app layout ──────────────────────── */

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