/*
 * Page structure (app shell) and layout primitives. Primitives take their
 * spacing from a custom property, e.g. <div class="stack" style="--gap: var(--space-8)">.
 */
@layer layout {
    /*
     * Custom properties are inherited: without this, a cluster inside a stack set
     * to --gap: 4rem would get the same gap. Children start from the defaults
     * again, unless they set their own values.
     */
    :where(.stack, .cluster, .grid, .with-sidebar) > * {
        --gap: initial;
        --min: initial;
        --align: initial;
        --justify: initial;
        --sidebar-width: initial;
    }

    /* App shell: header, main content, footer. */
    .app {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

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

    .app-footer {
        padding-block: var(--space-6);
        border-top: var(--border-width-thin) solid var(--color-border);
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
    }

    /* Centred column with side gutters. */
    .container {
        width: 100%;
        max-width: calc(var(--layout-container) + 2 * var(--layout-gutter));
        margin-inline: auto;
        padding-inline: var(--layout-gutter);
    }

    .container-narrow {
        max-width: calc(var(--layout-container-narrow) + 2 * var(--layout-gutter));
    }

    /* Vertical rhythm: children separated by --gap. */
    .stack {
        display: flex;
        flex-direction: column;
        gap: var(--gap, var(--space-4));
    }


    /* Horizontal group that wraps: buttons, tags, toolbars. */
    .cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: var(--align, center);
        justify-content: var(--justify, flex-start);
        gap: var(--gap, var(--space-3));
    }

    /* Responsive grid: as many columns of at least --min as fit. */
    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 16rem), 100%), 1fr));
        gap: var(--gap, var(--space-6));
    }

    /* Sidebar next to the content, stacked on narrow screens. */
    .with-sidebar {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap, var(--space-8));
    }

    .with-sidebar > :first-child {
        flex-basis: var(--sidebar-width, 16rem);
        flex-grow: 1;
    }

    .with-sidebar > :last-child {
        flex-basis: 0;
        flex-grow: 999;
        min-width: 55%;
    }

    /* Page title area: title, description and actions. */
    .page-header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-4);
        margin-bottom: var(--space-8);
    }

    .page-header h1 {
        margin: 0;
    }

    .page-header p {
        margin: var(--space-2) 0 0;
        color: var(--color-text-muted);
    }
}