/* One frame for application pages; page-specific styles size the content inside it. */
:root {
  --page-max-width: 1450px;
  --page-gutter: clamp(17px, 4vw, 56px);
  --page-padding-block: 32px;
}

@media screen {
  :is(#main, #main > .planning-pause-background) > :is(
    .admin-shell,
    .planner-wrap,
    .planning-page,
    .page-wrap,
    .planning-shell,
    .appointment-booking,
    .login-layout,
    .narrow,
    .error-page
  ) {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--page-max-width);
    min-width: 0;
    margin: 0 auto;
    padding: var(--page-padding-block) var(--page-gutter);
  }

  body > .messages {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding-inline: var(--page-gutter);
  }

  /* Account and login forms share the page edge without stretching their fields. */
  #main .narrow > * {
    max-width: 640px;
  }

  #main .tile-preferences-page > [data-tile-preferences] {
    max-width: 720px;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --page-gutter: 17px;
    --page-padding-block: 22px;
  }
}