.inbox {
  --card-padding-inline: var(--space-lg);

  scroll-margin-block-start: var(--topbar-offset);
}

@media (width <= 48rem) {
  .inbox {
    scroll-margin-block-start: var(--space-sm);
  }
}

.inbox-card {
  max-inline-size: var(--sheet-inline-size);
  overflow-x: clip;
  overflow-y: visible;
}

@media (width <= 48rem) {
  .inbox-card {
    max-inline-size: none;
  }
}

@container page (width >= 52rem) {
  .inbox {
    --inbox-choices-size: calc(
      var(--sheet-inline-size) - 2 * var(--card-padding-inline)
    );
  }

  .inbox-card:has(.split-form__choices) {
    max-inline-size: none;
  }

  .inbox:has(.split-form__choices) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--inbox-choices-size);
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: var(--space-md) var(--space-lg);
  }

  .inbox__event {
    grid-area: 1 / 1;
  }

  .split-form__division {
    grid-area: 2 / 1;
  }

  .split-form__choices {
    grid-area: 1 / 2 / span 2;
  }

  .inbox .split-form {
    display: contents;
  }
}

.inbox-actions,
.inbox-actions .row {
  flex-wrap: nowrap;
}

.inbox-actions .row,
.inbox-actions p {
  min-inline-size: 0;
}

.inbox-actions .inbox-event-actions {
  --row-gap: var(--space-2xs);
}

.inbox-stack {
  --inbox-stack-offset: var(--space-lg);
  --inbox-stack-scale-step: 0.05;
  --inbox-stack-peeks: 2;
  --inbox-stack-lift: var(--space-md);
  --inbox-stack-exit: var(--space-3xl);
  --inbox-stack-duration: calc(var(--duration-enter) * 2);
  --inbox-stack-skip-duration: calc(var(--inbox-stack-duration) * 2);
  --inbox-stack-sideways: 105%;
  --inbox-stack-tilt: 6deg;

  position: relative;
  isolation: isolate;
  margin-block-end: calc(var(--inbox-stack-peeks) * var(--inbox-stack-offset) -
    var(--inbox-stack-lift));
}

.inbox-stack__card {
  --slot-translate: calc(var(--stack-index, 0) * var(--inbox-stack-offset));
  --slot-scale: calc(1 - var(--stack-index, 0) * var(--inbox-stack-scale-step));
  --slot-delay: calc(var(--stack-index, 0) * var(--duration-stagger));

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  translate: 0 var(--slot-translate);
  scale: var(--slot-scale);
  transform-origin: top center;
}

.inbox-stack__card--front {
  position: relative;
}

.inbox-stack__card--peek,
.inbox-stack__card--leaving {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  overflow: clip;
  pointer-events: none;
}

.inbox-stack--advancing :is(.inbox-stack__card--front, .inbox-stack__card--peek) {
  animation: inbox-step-forward var(--inbox-stack-duration) var(--easing-enter) var(--slot-delay)
    backwards;
}

.inbox-stack--advancing .inbox-stack__card--joining {
  animation:
    inbox-step-forward var(--inbox-stack-duration) var(--easing-enter) var(--slot-delay) backwards,
    inbox-join var(--inbox-stack-duration) var(--easing-enter) var(--slot-delay) backwards;
}

.inbox-stack--returning .inbox-stack__card--peek {
  animation: inbox-step-back var(--inbox-stack-duration) var(--easing-enter) var(--slot-delay)
    backwards;
}

.inbox-stack--returning .inbox-stack__card--front {
  animation: inbox-return var(--inbox-stack-duration) var(--easing-enter);
}

.inbox-stack__card--filed {
  animation: inbox-filed var(--inbox-stack-duration) var(--easing-leave) forwards;
}

.inbox-stack__card--skipped {
  animation: inbox-skipped var(--inbox-stack-skip-duration) var(--easing-leave) forwards;
}

@keyframes inbox-step-forward {
  from {
    translate: 0 calc(var(--slot-translate) + var(--inbox-stack-offset));
    scale: calc(var(--slot-scale) - var(--inbox-stack-scale-step));
  }
}

@keyframes inbox-join {
  from {
    opacity: 0;
  }
}

@keyframes inbox-step-back {
  from {
    translate: 0 calc(var(--slot-translate) - var(--inbox-stack-offset));
    scale: calc(var(--slot-scale) + var(--inbox-stack-scale-step));
  }
}

@keyframes inbox-return {
  from {
    opacity: 0;
    translate: 0 calc(-1 * var(--inbox-stack-exit));
    scale: var(--scale-recessed);
  }
}

@keyframes inbox-filed {
  to {
    opacity: 0;
    translate: 0 calc(-1 * var(--inbox-stack-exit));
    scale: var(--scale-recessed);
  }
}

@keyframes inbox-skipped {
  from {
    z-index: var(--z-popover);
  }

  45% {
    z-index: var(--z-popover);
    translate: calc(-1 * var(--inbox-stack-sideways)) calc(0.5 * var(--inbox-stack-offset));
    rotate: calc(-1 * var(--inbox-stack-tilt));
    scale: calc(1 - var(--inbox-stack-scale-step));
  }

  46% {
    z-index: var(--z-behind);
  }

  85% {
    opacity: 1;
  }

  to {
    z-index: var(--z-behind);
    opacity: 0;
    translate: 0 calc((var(--inbox-stack-peeks) + 1) * var(--inbox-stack-offset));
    scale: calc(1 - (var(--inbox-stack-peeks) + 1) * var(--inbox-stack-scale-step));
  }
}

@media (width <= 48rem) {
  .inbox {
    --split-save-offset: calc(var(--dock-height) + var(--space-md));
  }
}