/* One container for the email and its submit button, after polymarket.com's
   sign-in field: the input on the left, the button inset on the right. The
   button reads as inactive until an email is typed, then turns action blue.
   Applies to every signup surface (hero card, closing card, dialog, drawer).
   The ::before is the container so the status message can sit below it. */
.signup-form:has(> .phone-field) {
  --sf-field-inset: 0.375rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0;
  align-items: stretch;
}
.signup-form:has(> .phone-field)::before {
  content: '';
  grid-area: 1 / 1 / 2 / 3;
  border: 1px solid var(--color-hero-input-border);
  border-radius: 1rem;
  background: var(--color-hero-input);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.signup-form:has(> .phone-field) > .phone-field {
  position: relative;
  grid-area: 1 / 1;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: none;
}
.signup-form:has(> .phone-field) > .phone-field:focus-within {
  outline: 0;
  box-shadow: none;
}
.signup-form:has(> .phone-field) > .phone-field input:-webkit-autofill,
.signup-form:has(> .phone-field) > .phone-field input:-webkit-autofill:hover,
.signup-form:has(> .phone-field) > .phone-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--sf-field-fill, var(--color-hero-input)) inset;
}
.signup-form:has(> .phone-field) > button[type='submit'] {
  position: relative;
  grid-area: 1 / 2;
  width: auto;
  min-height: 0;
  margin: var(--sf-field-inset);
  margin-inline-start: 0;
  padding: 0 1rem;
  border-radius: 0.75rem;
  background-color: var(--color-action);
  color: var(--palette-white);
  white-space: nowrap;
  box-shadow: none;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}
.signup-form:has(> .phone-field) > button[type='submit']:hover {
  background-color: var(--color-action-hover);
}
.signup-form:has(> .phone-field) > .form-message {
  grid-column: 1 / -1;
}

/* A well-formed email: the container tints and the button gets a slow, soft
   sheen as a ready cue. The busy shimmer below is faster and darker. */
.signup-form:has(> .phone-field input:valid) {
  --sf-field-fill: color-mix(in srgb, var(--color-action) 9%, var(--color-hero-input));
}
.signup-form:has(> .phone-field input:valid)::before {
  background: var(--sf-field-fill);
}
.signup-form:has(> .phone-field input:valid) > button[type='submit'] {
  background-image: linear-gradient(
    100deg,
    transparent 35%,
    color-mix(in srgb, var(--palette-white) 14%, transparent) 50%,
    transparent 65%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: sf-ready-sheen 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* The ready cue's arrow. Its slot opens from zero width so the button grows
   smoothly instead of jumping, while the glyph is unmasked from the right edge
   inward (clip-path, not a fade). Clearing the field runs both in reverse. */
.signup-form:has(> .phone-field) > button[type='submit'] .sf-submit-arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  width: 0;
  height: 1em;
  margin-inline-start: 0;
  overflow: hidden;
  transition:
    width var(--duration-slow) var(--ease-standard),
    margin-inline-start var(--duration-slow) var(--ease-standard);
}
.signup-form:has(> .phone-field) > button[type='submit'] .sf-submit-arrow svg {
  flex: none;
  width: 1em;
  height: 1em;
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--duration-slow) var(--ease-standard);
}
.signup-form:has(> .phone-field input:valid) > button[type='submit'] .sf-submit-arrow {
  width: 1em;
  margin-inline-start: 0.5em;
}
.signup-form:has(> .phone-field input:valid) > button[type='submit'] .sf-submit-arrow svg {
  clip-path: inset(0);
  /* Unmask once the slot has started opening, so the head leads the wipe. */
  transition-delay: 80ms;
}

/* Marketing opt-in: tucked away until the email is complete (the same :valid cue as
   the submit arrow), then it unfolds below the field. Rows animate from 0fr to
   1fr so the card grows smoothly instead of jumping. Once changed, or while it
   has keyboard focus, it stays open even if the email is edited. Closed, it is
   also visibility: hidden, so it is skipped by Tab and screen readers. */
.signup-form:has(> .phone-field) > .sf-consent {
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.25rem;
  transition:
    grid-template-rows var(--duration-slow) var(--ease-standard),
    opacity var(--duration-fast) ease,
    translate var(--duration-slow) var(--ease-standard),
    visibility 0s linear var(--duration-slow);
}
.signup-form:has(> .phone-field input:valid) > .sf-consent,
.signup-form > .sf-consent[data-touched],
.signup-form > .sf-consent:has(input:focus-visible) {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  translate: 0;
  transition:
    grid-template-rows var(--duration-slow) var(--ease-standard),
    opacity var(--duration-slow) ease 80ms,
    translate var(--duration-slow) var(--ease-standard),
    visibility 0s;
}
.sf-consent-inner {
  min-height: 0;
  overflow: hidden;
}
.sf-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.125rem 0.125rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}
.sf-consent-label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.sf-consent-box {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.1rem 0 0;
  accent-color: var(--color-action);
  cursor: pointer;
}
.sf-consent-box:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.signup-form:has(> .phone-field:focus-within)::before {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-focus) 15%, transparent);
}
.signup-form:has(> .phone-field input[aria-invalid='true'])::before {
  border-color: #b71b3f;
}
/* The busy shimmer keeps its darker base while the request runs. */
.signup-form[aria-busy='true']:has(> .phone-field input:valid) > button[type='submit'] {
  background-color: var(--color-action-hover);
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--palette-white) 18%, transparent) 50%,
    transparent 70%
  );
  animation: sf-busy-shimmer 1.1s linear infinite;
}

@keyframes sf-ready-sheen {
  from {
    background-position: 150% 0;
  }
  to {
    background-position: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signup-form:has(> .phone-field)::before,
  .signup-form:has(> .phone-field) > button[type='submit'] {
    transition: none;
  }
  .signup-form:has(> .phone-field input:valid) > button[type='submit'] {
    animation: none;
    background-image: none;
  }
  .signup-form:has(> .phone-field) > button[type='submit'] .sf-submit-arrow,
  .signup-form:has(> .phone-field) > button[type='submit'] .sf-submit-arrow svg {
    transition: none;
  }
  .signup-form:has(> .phone-field) > .sf-consent,
  .signup-form:has(> .phone-field input:valid) > .sf-consent,
  .signup-form > .sf-consent[data-touched],
  .signup-form > .sf-consent:has(input:focus-visible) {
    translate: 0;
    transition: none;
  }
}

/* Section "Register now" CTAs (lineup, programme) hug their label instead of
   the old fixed 282–352px widths. Section styles sit in @scope blocks, which
   win ties on proximity, hence the :not(#_) specificity. */
:root .calendar-button[data-signup-open]:not(#_) {
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding-inline: 2rem;
}