/* Canonical Widais page geometry. Page CSS owns appearance, never shell width or rhythm. */
:root {
  --widais-page-max-width: 1440px;
  --widais-page-padding-desktop: 24px;
  --widais-page-padding-tablet: 18px;
  --widais-page-padding-mobile: 12px;
  --widais-header-gap: 15px;
  --widais-section-gap: 15px;
  --widais-block-gap: 10px;
  --widais-item-gap: 10px;
  --widais-card-gap: var(--widais-item-gap);
  --widais-form-max-width: 760px;
  --widais-admin-max-width: var(--widais-page-max-width);
  --widais-content-radius: 28px;
  --widais-navigation-gap: 4px;

  /* Compatibility aliases while page bundles are progressively simplified. */
  --widais-page-padding: var(--widais-page-padding-desktop);
  --page-horizontal-padding: var(--widais-page-padding-desktop);
  --widais-layer-gap: var(--widais-section-gap);
  --page-header-gap: var(--widais-header-gap);
  --section-gap: var(--widais-section-gap);
  --footer-gap: var(--widais-section-gap);
  --block-gap: var(--widais-block-gap);
  --item-gap: var(--widais-item-gap);
  --widais-internal-max: var(--widais-page-max-width);
  --widais-shell-max: var(--widais-page-max-width);
  --widais-user-shell-max: var(--widais-page-max-width);
  --widais-internal-page-padding: var(--widais-page-padding-desktop);
  --widais-shell-edge: var(--widais-page-padding-desktop);
  --widais-user-shell-edge: var(--widais-page-padding-desktop);
  --widais-internal-layer-gap: var(--widais-section-gap);
  --widais-shell-gap: var(--widais-section-gap);
  --widais-user-shell-gap: var(--widais-section-gap);
  --page-max-width: var(--widais-page-max-width);
  --widais-internal-page-padding-mobile: var(--widais-page-padding-mobile);
  --widais-internal-layer-gap-mobile: 10px;
  --widais-w-max: var(--widais-page-max-width);
  --widais-w-edge: var(--widais-page-padding-desktop);
  --widais-w-edge-mobile: var(--widais-page-padding-mobile);
  --widais-w-gap: var(--widais-section-gap);
  --widais-w-gap-mobile: 10px;
  --widais-shell-edge-mobile: var(--widais-page-padding-mobile);
  --widais-shell-gap-mobile: 10px;
  --widais-user-shell-edge-mobile: var(--widais-page-padding-mobile);
  --widais-user-shell-gap-mobile: 10px;
  --widais-internal-block-gap: var(--widais-section-gap);
  --widais-internal-block-gap-mobile: 10px;
  --widais-compact-layer-gap: var(--widais-block-gap);
  --widais-footer-link-gap: var(--widais-card-gap);
  --content-radius: var(--widais-content-radius);
}

html body {
  padding: var(--widais-page-padding-desktop) !important;
}

/* Auth pages have no shared chrome, but still use the canonical viewport gutter. */
html body.login-page {
  padding: var(--widais-page-padding-desktop) !important;
}

.widais-page {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding-inline: 0;
}

.widais-container {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--widais-page-max-width) !important;
  margin-inline: auto !important;
}

/* Canonical page shells outrank historical route-specific container rules. */
html body .widais-container.widais-main[class] {
  width: 100% !important;
  max-width: var(--widais-page-max-width) !important;
  margin-inline: auto !important;
}

/* A nested page main inherits the full canonical container width. */
html body[class] .widais-container.widais-main[class] > :is(
  main,
  .admin-container.user-liquid-shell
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* Semantic shells are authoritative even when an older page bundle is more specific. */
html body[class] :is(
  .widais-container.widais-main[class],
  main.admin-container.user-liquid-shell.widais-main[class],
  .admin-container.user-liquid-shell.widais-main[class]
) {
  gap: var(--widais-section-gap) !important;
}

/*
 * The page shell owns vertical rhythm. Historical page bundles may still add
 * outer margins (including negative ones) to their first-level sections; those
 * margins must not be allowed to stack with the canonical shell gap.
 */
html body:not(.login-page)[class] .widais-main[class] > :where(
  *:not(script):not(style):not(link)
) {
  margin-block: 0 !important;
}

.widais-main,
.widais-stack {
  display: flex !important;
  min-width: 0;
  flex-direction: column;
  gap: var(--widais-section-gap) !important;
}

.widais-main {
  width: 100%;
}

.widais-section,
.widais-block {
  box-sizing: border-box;
  min-width: 0;
  margin-block: 0;
}

.widais-section {
  display: flex;
  flex-direction: column;
  gap: var(--widais-block-gap);
}

.widais-block,
.widais-grid {
  width: 100%;
}

.widais-grid {
  display: grid;
  min-width: 0;
  gap: var(--widais-item-gap);
}

.widais-form-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--widais-form-max-width);
  margin-inline: auto;
}

.widais-admin-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--widais-admin-max-width);
  margin-inline: auto;
}

/*
 * Legacy shell bridge.
 * These selectors map existing User, Pro and Admin markup onto the canonical
 * geometry while controllers are progressively given the semantic classes.
 */
html body:not(.login-page) :is(
  .admin-shell,
  .admin-shell > .container,
  .admin-shell.user-shell > .admin-card,
  main.admin-container,
  .admin-container.user-liquid-shell,
  .user-liquid-shell
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--widais-admin-max-width) !important;
  margin-inline: auto !important;
}

html body:not(.login-page) :is(
  .admin-shell > .container,
  .admin-shell.user-shell > .admin-card,
  main.admin-container,
  .admin-container.user-liquid-shell,
  .user-liquid-shell,
  .settings-config-grid,
  .settings-overview-grid,
  .messages-page-grid,
  .social-page-grid,
  .widais-events-layout,
  .widais-x-user-shell,
  .widais-x-pro-shell,
  .link-admin-shell,
  .mailing-composer-layout
) {
  gap: var(--widais-section-gap) !important;
}

html body:not(.login-page)[class] .admin-shell.user-shell > .admin-card {
  display: flex !important;
  flex-direction: column !important;
}

html body:not(.login-page)[class] .admin-shell.user-shell > .admin-card > :where(
  *:not(script):not(style):not(link)
) {
  margin-block: 0 !important;
}

/* Direct-body internal layouts do not have the outer .widais-main wrapper. */
html body:not(.login-page)[class] > #widais-site-header ~ :is(
  main.admin-container,
  .admin-container.user-liquid-shell
):first-of-type {
  margin-block: 0 !important;
  margin-top: var(--widais-header-gap) !important;
}

/*
 * The shared footer can be rendered in three legacy positions. A footer inside
 * .widais-main already receives the parent gap; the other two positions need
 * the same explicit separation. The selector intentionally outranks the
 * component's visual reset (`margin: 0`).
 */
html body:not(.login-page)[class] > #widais-site-footer[data-site-footer],
html body:not(.login-page)[class] > .admin-shell > #widais-site-footer[data-site-footer] {
  margin-top: var(--widais-section-gap) !important;
}

.widais-page > .widais-container,
.widais-page > .widais-main,
.widais-container > .widais-main {
  gap: var(--widais-header-gap);
}

/* About's final route dock matches /x above and below.
 * Compensate its inner grid gap; the outer shell supplies the full footer gap.
 */
html body.x-directory-page.x-public-profile-page main.x-public-pics-page-shell {
  --widais-about-section-gap: 15px;
  --widais-about-navigation-gap: var(--widais-section-gap);
  gap: var(--widais-about-section-gap) !important;
}

html body.x-directory-page.x-public-profile-page main.x-public-pics-page-shell > .x-route-bubble-banner.x-public-profile-explore-more {
  margin-top: calc(var(--widais-about-navigation-gap) - var(--widais-about-section-gap)) !important;
  margin-bottom: 0 !important;
}

/* Tablet changes only the viewport gutter; component breakpoints stay local. */
@media (min-width: 761px) and (max-width: 1100px) {
  :root {
    --widais-page-padding: var(--widais-page-padding-tablet);
    --page-horizontal-padding: var(--widais-page-padding-tablet);
    --widais-internal-page-padding: var(--widais-page-padding-tablet);
    --widais-shell-edge: var(--widais-page-padding-tablet);
    --widais-user-shell-edge: var(--widais-page-padding-tablet);
    --widais-w-edge: var(--widais-page-padding-tablet);
  }

  html body {
    padding: var(--widais-page-padding-tablet) !important;
  }

  html body.login-page {
    padding: var(--widais-page-padding-tablet) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --widais-page-padding: var(--widais-page-padding-mobile);
    --widais-header-gap: 10px;
    --widais-section-gap: 10px;
    --page-horizontal-padding: var(--widais-page-padding-mobile);
    --widais-internal-page-padding: var(--widais-page-padding-mobile);
    --widais-shell-edge: var(--widais-page-padding-mobile);
    --widais-user-shell-edge: var(--widais-page-padding-mobile);
    --widais-w-edge: var(--widais-page-padding-mobile);
    --widais-internal-layer-gap: var(--widais-section-gap);
    --widais-shell-gap: var(--widais-section-gap);
    --widais-user-shell-gap: var(--widais-section-gap);
  }

  html body {
    padding: var(--widais-page-padding-mobile) !important;
  }

  html body.login-page {
    padding: var(--widais-page-padding-mobile) !important;
  }
}

/*
 * Intentional exceptions:
 * - dialogs, popovers and map overlays size themselves against their viewport;
 * - editorial text columns may use a narrower local max-width for readability;
 * - component-internal padding and gaps remain owned by their component CSS.
 */