/* Shared app shell: every route has one footer after its main content. */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
#app > .app-header,
#app > .app-footer {
  flex: 0 0 auto;
}
#app > main {
  flex: 1 0 auto;
  width: 100%;
  min-height: 0;
}
.app-footer {
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 48px 24px;
}
.app-footer .welcome-footer {
  padding: 25px 0 0;
}
.app-footer a:focus-visible {
  outline: 3px solid #a6c6ff;
  outline-offset: 3px;
}
body:has(.planner-page) .app-footer {
  max-width: var(--planner-max-width);
  padding-left: var(--planner-gutter);
  padding-right: var(--planner-gutter);
}
@media print {
  #app > .app-footer { display: none; }
  #app { display: block; min-height: 0; }
}

/* Shared public-page grid: 1440px content, centered with 48px gutters. */
body:has(.landing-page) .app-header {
  padding-left: max(48px, calc((100% - 1440px) / 2));
  padding-right: max(48px, calc((100% - 1440px) / 2));
}
#app > .landing-page {
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}
body:has(.landing-page) .app-header #header-account-menu,
body:has(.landing-page) .app-header #header-inbox {
  right: max(48px, calc((100% - 1440px) / 2));
}