.page-shell {
  width: 100%;
  min-width: 0;
  max-width: 1120px;
  padding: 48px 24px 72px;

  .event-header {
    margin-bottom: 42px;
  }

  .registration {
    padding: 28px;

    .form-grid {
      grid-template-columns: 1fr 1fr auto;
      align-items: start;

      .field {
        input[aria-invalid="true"] {
          border-color: var(--color-error);
          background: var(--color-error-soft);
        }

        .field-error:empty {
          visibility: hidden;
        }
      }

      .submit-area {
        display: grid;
        padding-top: 34px;
      }

      @media (width <= 768px) {
        grid-template-columns: 1fr;

        .submit-area {
          padding-top: 0;
        }
      }
    }
  }
}

.toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  max-width: calc(100% - 48px);
  padding: 16px 20px;
  border: 1px solid var(--color-success);
  border-radius: var(--radius-card);
  background: var(--color-success-soft);
  box-shadow: var(--shadow-card);
  color: var(--color-success);
  font-weight: bold;
  opacity: 0;
  transform: translateX(calc(100% + 32px));
  transition: opacity 300ms ease, transform 300ms ease;

  &.is-visible {
    opacity: 1;
    transform: translateX(0);
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}