/* A finished RSVP card (success, or registered on a later visit) keeps the
   default card's head: the event wordmark stays exactly where it was and at
   the same size, so moving between the form and "You're registered" only
   swaps what sits below it. The stage joins the card's flow under the head,
   the card grows to fit (render() animates the height), and the artwork
   anchors to the card's own bottom-right corner. Same on every surface:
   hero, closing card and the dialog. Loaded after signup-dialog.css. */
.sf-inline-host:is([data-signup-step='success'], [data-signup-step='registered']) {
  container-type: inline-size;
}
.sf-inline-host:is([data-signup-step='success'], [data-signup-step='registered']) > .sf-original {
  display: contents;
  visibility: visible;
}
.sf-inline-host:is([data-signup-step='success'], [data-signup-step='registered'])
  > .sf-original
  > :not(.paper-hero-rsvp-head) {
  display: none;
}
/* The form's own copy in the head ("RSVP your seat now", the offer line). */
.sf-inline-host:is([data-signup-step='success'], [data-signup-step='registered'])
  .paper-hero-rsvp-head
  :is(.paper-rsvp-mobile-title, .paper-rsvp-divider, .offer) {
  display: none !important;
}
.sf-inline-host:is([data-signup-step='success'], [data-signup-step='registered']) > .sf-stage {
  position: static;
  flex: 1 0 auto;
  margin-top: var(--space-5);
  padding: 0;
  overflow: visible;
  border-radius: 0;
}
/* The head already shows the wordmark. */
.sf-inline-host:has(.paper-hero-rsvp-head) .sf-stage .sf-success-logo {
  display: none;
}
.sf-stage .sf-success {
  gap: var(--space-5);
}
.sf-stage .sf-success .sf-heading h2 {
  /* One line in the narrow hero column, full size in wide cards. */
  font-size: clamp(2rem, 11cqi, 3.36rem);
  white-space: nowrap;
}
.sf-stage .sf-success-download {
  margin-top: 0;
}
/* Bottom-left, beside the art: the reminder line, then the reset link under
   it, both left-aligned. */
.sf-stage .sf-success-reset {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: auto;
  margin-bottom: 0;
  max-width: calc(100% - var(--sf-art-room));
}
.sf-stage .sf-success {
  --sf-art-scale: 1.15;
  --sf-art-room: 18.5rem;
}
.sf-stage .sf-success-art {
  transform: scale(var(--sf-art-scale));
  transform-origin: 100% 100%;
}
@container (max-width: 28rem) {
  .sf-stage .sf-success {
    --sf-art-scale: 0.68;
    --sf-art-room: 10.75rem;
  }
}

/* Desktop balance: a finished card's wordmark 20% smaller and its art 20%
   larger than the default card's (phones keep the compact head as is). */
@media (min-width: 901px) {
  .sf-inline-host:is([data-signup-step='success'], [data-signup-step='registered'])
    .paper-event-title {
    zoom: 0.8;
  }
  .sf-stage .sf-success {
    --sf-art-scale: 1.38;
    --sf-art-room: 22rem;
  }
  @container (max-width: 28rem) {
    .sf-stage .sf-success {
      --sf-art-scale: 0.82;
      --sf-art-room: 13rem;
    }
    /* Keep the larger phone clear of the store badges. */
    .sf-stage .sf-success-download {
      margin-bottom: var(--space-4);
    }
  }
}