html { scrollbar-gutter: stable }

body {
    container: site / inline-size;
    min-block-size: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.page {
    display: flex;
    flex-direction: column;
}

.layout {
    flex-grow: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    @container site (width >= 54rem) { grid-template-columns: var(--layout-side) minmax(0, 1fr) var(--layout-side) }
}

.layout__main {
    container: centre / inline-size;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem var(--layout-gutter);

    > * { transition: opacity var(--transition-duration) var(--transition-timing) }
}

@container site (width >= 54rem) {
    .layout__nav, .layout__actions { padding-block: 1rem }

    .layout__nav:has(> nav) { background-color: var(--surface-panel) }

    .layout > :is(.layout__nav, .layout__actions) > * {
        position: sticky;
        inset-block-start: 1rem;
        max-block-size: calc(100dvh - 2rem);
        overflow-y: auto;
    }
}

/* 200ms: LiveComponent's own loading delay, so an answer under it never dims the list */
.page[aria-busy="true"] {
    opacity: 1;
    pointer-events: auto;

    .layout__main > :not(search) {
        opacity: 0.6;
        transition-delay: 200ms;
    }
}

.page:has(:read-write:focus) > .bottom-bar { display: none }

:root:has(.bottom-bar) { scroll-padding-block-end: calc(var(--control-md) + 1rem) }

.page-single {
    flex-grow: 1;
    margin-inline: auto;
    inline-size: min(100%, 30rem);
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    gap: 1.5rem;
    padding: 3rem 1rem;
}

.layout__actions .entity-actions {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

@container site (width < 54rem) {
    .page:has(> .banner-band) > .page-header > .breadcrumb { padding-inline-end: 7rem }

    .key-facts > .key-facts__wide { display: none }
}