html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100dvh;
  min-height: 100dvh;

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  color: var(--text-light);
  background: var(--forest-950);
}

.page-background {
  width: 100%;
  height: 100dvh;
  overflow: hidden;

  display: grid;
  place-items: center;

  padding: 18px;

  background: radial-gradient(
    ellipse at center,
    var(--forest-700) 0%,
    var(--forest-800) 45%,
    var(--forest-950) 100%
  );
}

.app-shell {
  width: var(--shell-width);
  height: var(--shell-height);
  min-width: 0;
  min-height: 0;

  display: grid;
  grid-template-rows:
    var(--navbar-height)
    minmax(0, 1fr)
    var(--dock-height);

  overflow: visible;

  border: var(--shell-border-width) solid var(--forest-700);

  border-radius: var(--shell-radius);

  background: var(--forest-900);

  box-shadow: 0 24px 64px rgb(0 0 0 / 45%),
    inset 0 0 0 1px rgb(255 255 255 / 8%);
}

.app-stage {
  position: relative;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  background: var(--forest-800);
}

.screen {
  position: absolute;
  inset: 0;

  min-width: 0;
  min-height: 0;
}

.screen[hidden] {
  display: none;
}

.screen,
.rsvp-card,
.faq-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.screen::-webkit-scrollbar,
.rsvp-card::-webkit-scrollbar,
.faq-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.shell-screen-placeholder {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  font-size: clamp(28px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: 0.06em;

  color: rgb(255 255 255 / 35%);
}

@media (max-width: 759px) {
  .page-background {
    place-items: stretch;
    padding: 0;
  }

  .app-shell {
    width: 100%;
    height: 100dvh;

    grid-template-rows:
      var(--navbar-height)
      minmax(0, 1fr)
      calc(var(--dock-height) + env(safe-area-inset-bottom));

    border-radius: 0;
  }
}