/* ------------------------------------------------------- the way in, once */

/*
 * The old sign up panel, measured off it: a shell of #040506 with twenty four
 * pixel corners, a poster filling the left half and the form on the right,
 * sixteen pixels of padding and sixteen between the rows. The pieces in it are
 * their sizes too: a thirty nine pixel toggle bar on #0E1015 with a #161922
 * pill inside it, thirty nine pixel rows, and one violet button across.
 */
.modal.reg-modal {
  max-width: 900px;
  width: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #040506;
  font-family: Poppins, Inter, system-ui, sans-serif;
}

.modal.reg-modal .modal-inner {
  padding: 0;
  gap: 0;
}

/* The toggle is the title here, and the close button is the corner. */
.modal.reg-modal h3,
.modal.reg-modal .modal-actions {
  display: none;
}

.reg {
  display: grid;
  grid-template-columns: 0.94fr 1fr;
  min-height: 520px;
  /* The panel carries the face, so every row in it reads the same. */
  font-family: Poppins, Inter, system-ui, sans-serif;
}

/* ---------------------------------------------------------- the poster */

.reg-poster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 24px 26px;
  border-radius: 24px 0 0 24px;
  background:
    radial-gradient(90% 60% at 50% 22%, rgba(204, 255, 0, 0.55), transparent 70%),
    linear-gradient(180deg, var(--lime-dark) 0%, #1a2408 52%, #0d1206 100%);
  overflow: hidden;
  text-align: center;
}

.reg-logo {
  font-family: var(--display), Poppins, sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.reg-logo b {
  color: var(--gold);
}

/* The boxes, stacked the way a poster stacks them. */
.reg-poster-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  flex: 1;
  min-height: 210px;
  margin: 8px 0 12px;
}

.reg-poster-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 184, 74, 0.35), transparent 65%);
}

.reg-poster-art img {
  position: absolute;
  width: 58%;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}

.reg-poster-art .reg-art-0 {
  width: 66%;
  z-index: 2;
}

.reg-poster-art .reg-art-1 {
  left: 4%;
  bottom: 6%;
  width: 44%;
  transform: rotate(-8deg);
  opacity: 0.92;
}

.reg-poster-art .reg-art-2 {
  right: 4%;
  bottom: 8%;
  width: 44%;
  transform: rotate(9deg);
  opacity: 0.92;
}

.reg-poster-kicker {
  padding: 5px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  color: var(--on-lime);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reg-poster-title {
  margin-top: 10px;
  font-family: var(--display), Poppins, sans-serif;
  font-size: 30px;
  line-height: 1.02;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.reg-poster small {
  margin-top: 8px;
  max-width: 30ch;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------ the form */

.reg-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.reg-close {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: #0e1015;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.reg-close:hover {
  background: #161922;
}

.reg-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 39px;
  padding: 0 4px;
  border-radius: 10px;
  background: #0e1015;
  width: calc(100% - 40px);
}

/* The pill sits under the active half and slides when it changes. */
.reg-toggle-pill {
  position: absolute;
  left: 4px;
  top: 3.5px;
  width: calc(50% - 4px);
  height: 32px;
  border-radius: 8px;
  background: #161922;
  transition: transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.reg-toggle.is-in .reg-toggle-pill {
  transform: translateX(100%);
}

.reg-toggle-label {
  position: relative;
  z-index: 1;
  height: 39px;
  border: 0;
  background: transparent;
  color: #73798c;
  font: inherit;
  font-size: 13.8px;
  font-weight: 500;
  cursor: pointer;
  transition: color 200ms ease;
}

.reg-toggle-label.is-on {
  color: #fff;
}

.reg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reg-field-label {
  font-size: 13.8px;
  color: #fff;
}

.reg-static {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 39px;
  padding: 0 12px;
  border-radius: 10px;
  background: #0e1015;
  color: #73798c;
  font-size: 13px;
}

.reg-static svg {
  width: 17px;
  height: 17px;
  color: var(--gold);
  flex: none;
}

.reg-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  line-height: 1.45;
  color: #73798c;
  cursor: pointer;
}

.reg-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--lime);
  cursor: pointer;
  flex: none;
}

.reg-check b {
  color: #fff;
  font-weight: 600;
}

.reg-go {
  width: 100%;
  margin-top: 2px;
}

.reg-go:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.reg-or {
  position: relative;
  text-align: center;
  font-size: 12px;
  color: #73798c;
}

.reg-or::before,
.reg-or::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 72px);
  height: 1px;
  background: #161922;
}

.reg-or::before {
  left: 0;
}

.reg-or::after {
  right: 0;
}

.reg-socials {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reg-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 49px;
  border: 1px solid #161922;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13.8px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.reg-social:hover {
  border-color: #2a3040;
  background: #0e1015;
}

.reg-social.is-blocked {
  opacity: 0.45;
}

.reg-social-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.reg-social-logo.missing {
  display: none;
}

.reg-fine {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #565c6e;
}

/* --------------------------------------------------- the two CTA buttons */

/*
 * The register button, as it was.
 *
 * Solid violet, ten pixel corners, thirty nine tall, medium weight and no
 * border at all, in the same face the old site used. Sign in is the same
 * button in #161922, which is how the pair sat in that header.
 */
.button.signup,
.button.signin {
  height: 39px;
  min-width: 128px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-family: Poppins, Inter, system-ui, sans-serif;
  font-weight: 500;
  font-size: 13.8px;
  transition: background 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.button.signup {
  background: var(--lime);
}

.button.signup:hover:not(:disabled) {
  filter: none;
  background: var(--lime-soft);
}

.button.signup:active:not(:disabled) {
  background: var(--lime-dark);
}

.button.signin {
  background: #161922;
}

.button.signin:hover:not(:disabled) {
  filter: none;
  background: #1e2330;
}

@media (max-width: 720px) {
  .reg {
    grid-template-columns: minmax(0, 1fr);
  }

  .reg-poster {
    display: none;
  }
}

/*
 * The present on the corner of the register button.
 *
 * Measured off the old header: the present is sixty nine pixels against a
 * thirty nine pixel button, it hangs half its width off the left edge, and it
 * is centred on the button rather than on the bar. The label does not move
 * for it: the word stays centred in the violet and the present overlaps it.
 */
.signup-slot {
  position: relative;
  display: inline-flex;
}

/* An inline-flex slot would ignore the attribute, so it is said out loud. */
.signup-slot[hidden] {
  display: none;
}

.signup-gift {
  position: absolute;
  left: -34px;
  top: 50%;
  width: 69px;
  height: 69px;
  transform: translateY(-50%);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  z-index: 2;
}