html {
    background: var(--bg-primary);
}

body.ui-page-shell {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.ui-container {
    width: 100%;
    max-width: calc(var(--container-max) + (var(--gutter) * 2));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Phase-2 compatibility aliases: keep current templates working while aligning gutters */
.header-inner,
.footer-inner {
    width: 100%;
    max-width: calc(var(--container-max) + (var(--gutter) * 2));
    margin-inline: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.site-main {
    width: 100%;
    max-width: calc(var(--container-max) + (var(--gutter) * 2));
    margin-inline: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.site-main.narrow {
    max-width: calc(var(--content-narrow-max) + (var(--gutter) * 2));
}

.site-main.full {
    max-width: calc(var(--container-max) + (var(--gutter) * 2));
}

/* Make nested admin wrappers align to the shell container instead of re-centering at 1100/1200px. */
.site-main > .admin-container,
.site-main > .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Common editor wrappers that add extra inner gutter on top of shell gutter */
.site-main > .edit-container {
    width: 100%;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
}

.ui-page-shell__header,
.ui-page-shell__footer {
    width: 100%;
}

.ui-page-shell__main {
    width: 100%;
}

/* Auth standalone pages get the same container width without forcing global site shell */
body.auth-standalone .container {
    width: 100%;
    max-width: calc(var(--container-max) + (var(--gutter) * 2));
    margin-inline: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

@media (max-width: 768px) {
    .header-inner {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .footer-inner {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .site-main {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }
}