html {
    overflow-x: clip;
    /*
     * Always show the vertical scrollbar so layout width is stable and the
     * content column centers with equal left/right margins. Avoid
     * scrollbar-gutter: both-edges (adds gutter on both sides + scrollbar
     * on the right → left margin looks smaller than the right).
     * stable reserves the gutter even if overlay scrollbars are used later.
     */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    overflow-x: clip;
}

body {
    margin: 0;
    min-height: 100svh;
    min-height: var(--viewport-height, 100svh);
}

:root {
    /* x.ai: mx-auto w-full px-4 lg:px-6 xl:max-w-7xl */
    --content-side-padding: 16px;
    --site-max-width: 100%;
}

@media screen and (min-width: 1024px) {
    :root {
        --content-side-padding: 24px;
    }
}

@media screen and (min-width: 1280px) {
    :root {
        --site-max-width: 80rem;
    }
}

.page-content {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--site-max-width);
    margin-inline: auto;
    padding-inline: var(--content-side-padding);
}

.page-content > footer {
    padding-inline: 0;
}

/* Standalone pages (login, register, etc.) without .page-content wrapper */
.max-w-7xl.mx-auto:not(.page-content) {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--site-max-width) !important;
    margin-inline: auto;
    padding-inline: var(--content-side-padding);
}

.page-content .max-w-7xl {
    max-width: 100% !important;
    width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
}