.ui-container {
    width: min(100% - 2 * var(--space-md), var(--site-shell-width));
    margin-inline: auto;
}

.ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ui-stack-space, var(--space-md));
}

.ui-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-cluster-space, var(--space-sm));
}

.ui-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ui-grid-min, 16rem)), 1fr));
    gap: var(--ui-grid-gap, var(--space-lg));
}

.ui-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, var(--ui-split-aside, 24rem));
    gap: var(--ui-split-gap, var(--space-xl));
}

.ui-section {
    padding-block: clamp(var(--space-xl), 5vw, var(--space-3xl));
}

.ui-reading-width {
    width: min(100%, var(--article-width));
}

/*
 * Public page rhythm belongs to the shell, not to feature templates.
 * Breadcrumbs are optional SEO data; their absence must not remove the inset.
 * The existing gap tokens apply to both the header and breadcrumb boundary.
 */
.ui-page-frame {
    min-width: 0;
    padding-block-start: var(--page-frame-after-breadcrumbs-gap);
}

.ui-page-frame > :first-child {
    margin-block-start: 0;
}

/* Centered auth surfaces own their full-height composition and inner inset. */
.ds-scope--auth .ui-page-frame:not(.ui-page-frame--after-breadcrumbs) {
    padding-block-start: 0;
}

@media (max-width: 47.99rem) {
    .ui-page-frame {
        padding-block-start: var(--page-frame-after-breadcrumbs-gap-mobile);
    }
}

@media (max-width: 61.99rem) {
    .ui-split {
        grid-template-columns: minmax(0, 1fr);
    }
}