/* =========================
   SIGNUP PANEL — inlined into Index.html (no iframe) so iOS Safari
   handles input focus natively without the cross-frame quirks that were
   causing the page-jump on keyboard appearance.

   All selectors are scoped under #signup-panel-inline to avoid leaking
   into the rest of the page. Font-face declarations + universal reset
   that the iframe version had are NOT here — they are handled by the
   parent page's style.css already.
========================= */

/* ========================= PANEL ========================= */
#signup-panel-inline {
  background: #101010;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
  font-family: 'Satoshi', sans-serif;
  color: #ffffff;
  box-sizing: border-box;
}
#signup-panel-inline *,
#signup-panel-inline *::before,
#signup-panel-inline *::after { box-sizing: border-box; }

/* ========================= STATES ========================= */
#signup-panel-inline #signup-form-state {
  transition: opacity 0.5s ease;
}
#signup-panel-inline #signup-form-state.hide { opacity: 0; pointer-events: none; }

#signup-panel-inline #signup-score-state {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  position: absolute;
  top: 0; left: 0; right: 0;
  margin-top: -5px;
}
#signup-panel-inline #signup-score-state.show { display: block; }
#signup-panel-inline #signup-score-state.show.visible { opacity: 1; }

#signup-panel-inline .stat-row {
  display: flex;
  gap: 0;
}
#signup-panel-inline .stat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px 12px;
  position: relative;
}
#signup-panel-inline .stat-box + .stat-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17.5%;
  height: 65%;
  border-left: 2px solid #333333;
}
#signup-panel-inline .stat-number {
  font-size: 3rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1;
  letter-spacing: 0.05rem;
}
#signup-panel-inline .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  margin-top: 6px;
}

/* ========================= FORM FIELDS ROW ========================= */
#signup-panel-inline .form-fields {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-bottom: 16px;
}
#signup-panel-inline .form-fields .input-wrap {
  flex: 1;
  margin-bottom: 0;
}

/* ========================= INPUT WRAPS ========================= */
#signup-panel-inline .input-wrap {
  display: flex;
  align-items: stretch;
  background: linear-gradient(to bottom, #000000 0%, #1a1a1a 100%);
  border: 2px solid #343434;
  border-radius: 20px;
  padding: 2px;
  width: 100%;
  height: 56px;
  margin-bottom: 16px;
  transition: border-color 0.5s ease;
}
#signup-panel-inline .input-wrap.focused { border-color: #ffffff; transition: border-color 0.15s ease; }
#signup-panel-inline .input-wrap.error   { border-color: #e0370d; }

#signup-panel-inline .input-wrap input {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 5px 24px 11px 16px;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04rem;
  color: #ffffff;
  caret-color: #ffffff;
  align-self: center;
  margin: 0;
  /* iOS Safari calls scrollIntoView on the focused input. Asking for 100vh
     of margin above + below makes the browser unable to satisfy the
     constraint, and on iOS that effectively cancels the auto-scroll —
     the popup stays put when the email input gets focus. */
  scroll-margin-top: 100vh;
  scroll-margin-bottom: 100vh;
}

#signup-panel-inline .input-wrap input::placeholder       { color: #ffffff; }
#signup-panel-inline .input-wrap input:hover::placeholder { color: #ffffff; }
#signup-panel-inline .input-wrap input:focus::placeholder { color: transparent; }

#signup-panel-inline .input-wrap.error input              { color: #e0370d; }
#signup-panel-inline .input-wrap.error input::placeholder { color: #e0370d; opacity: 1; }

#signup-panel-inline .input-wrap input:focus,
#signup-panel-inline .input-wrap input:active {
  background: transparent;
  box-shadow: none;
}

/* Autofill — keep gradient bg visible */
#signup-panel-inline .input-wrap input:-webkit-autofill,
#signup-panel-inline .input-wrap input:-webkit-autofill:hover,
#signup-panel-inline .input-wrap input:-webkit-autofill:focus,
#signup-panel-inline .input-wrap input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  transition: background-color 999999s ease-in-out, color 999999s ease-in-out;
}

/* ========================= SUBMIT ROW ========================= */
#signup-panel-inline .signup-submit-row {
  display: flex;
  gap: 12px;
  width: 100%;
  align-items: center;
}

#signup-panel-inline .privacy-text {
  flex: 1;
  padding-left: 20px;
  color: #b1b1b1;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.04rem;
  line-height: 1.4;
  opacity: 0.72;
  margin: 0;
}

#signup-panel-inline .btn-submit {
  width: calc(50% - 6px);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-radius: 20px;
  padding: 0 16px;
  background-color: #000000;
  color: #4e804f;
  border: 2px solid #4e804f;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  gap: 14px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#signup-panel-inline .btn-submit:not(.submitting):not(.submitted):hover {
  background-color: #4e804f;
  color: #ffffff;
}

#signup-panel-inline .btn-submit .btn-label {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  /* Satoshi uppercase optical-centre fix: lift just the text label,
     the logo + arrow (separate flex siblings) stay perfectly centered. */
  transform: translateY(-1px);
}

#signup-panel-inline .btn-logo-wrap {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

#signup-panel-inline .btn-submit .btn-logo {
  position: absolute;
  top: 0; left: 0;
  width: 30px;
  height: 30px;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

#signup-panel-inline .btn-submit .btn-logo-hover { opacity: 0; }
#signup-panel-inline .btn-submit:not(.submitting):not(.submitted):hover .btn-logo-default { opacity: 0; }
#signup-panel-inline .btn-submit:not(.submitting):not(.submitted):hover .btn-logo-hover   { opacity: 1; }
#signup-panel-inline .btn-submit.submitting .btn-logo-default,
#signup-panel-inline .btn-submit.submitted  .btn-logo-default { opacity: 0; }
#signup-panel-inline .btn-submit.submitting .btn-logo-hover,
#signup-panel-inline .btn-submit.submitted  .btn-logo-hover   { opacity: 1; }

#signup-panel-inline .btn-submit .btn-icon-stack {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
#signup-panel-inline .btn-submit .btn-arrow,
#signup-panel-inline .btn-submit .btn-spinner,
#signup-panel-inline .btn-submit .btn-check {
  position: absolute;
  top: 50%;
  left: 50%;
  /* -1px Y nudge to match the text label's optical-centre fix. */
  transform: translate(-50%, calc(-50% - 1px));
  transition: opacity 0.2s ease;
}
#signup-panel-inline .btn-submit .btn-arrow { width: 24px; height: 24px; object-fit: contain; }
#signup-panel-inline .btn-submit .btn-check { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
#signup-panel-inline .btn-submit .btn-spinner { width: 24px; height: 24px; }

#signup-panel-inline .btn-submit .btn-arrow-white { opacity: 0; }
#signup-panel-inline .btn-submit .btn-spinner     { opacity: 0; }
#signup-panel-inline .btn-submit .btn-check       { opacity: 0; }

#signup-panel-inline .btn-submit:not(.submitting):not(.submitted):hover .btn-arrow-white { opacity: 1; }
#signup-panel-inline .btn-submit:not(.submitting):not(.submitted):hover .btn-arrow-green { opacity: 0; }

#signup-panel-inline .btn-submit.submitting,
#signup-panel-inline .btn-submit.submitted {
  pointer-events: none;
  background-color: #4e804f;
  border-color: #4e804f;
  color: #ffffff;
}
#signup-panel-inline .btn-submit.submitting .btn-arrow-white,
#signup-panel-inline .btn-submit.submitting .btn-arrow-green,
#signup-panel-inline .btn-submit.submitted  .btn-arrow-white,
#signup-panel-inline .btn-submit.submitted  .btn-arrow-green { opacity: 0; }
#signup-panel-inline .btn-submit.submitting .btn-spinner     { opacity: 1; }

#signup-panel-inline .btn-submit.submitted .btn-spinner { opacity: 0; }
#signup-panel-inline .btn-submit.submitted .btn-check   { opacity: 1; }

/* ========================= OAUTH BUTTONS ========================= */
#signup-panel-inline .oauth-row {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-bottom: 16px;
}

#signup-panel-inline .oauth-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-radius: 20px;
  padding: 0 16px;
  background-color: #000000;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  text-decoration: none;
  position: relative;
}

#signup-panel-inline .oauth-btn .logo  { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
#signup-panel-inline .oauth-btn .arrow { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; transform: translateY(-1px); }
#signup-panel-inline .oauth-btn > span { flex: 1; text-align: center; padding: 0 4px; white-space: nowrap; transform: translateY(-1px); }

#signup-panel-inline .oauth-label--full  { display: inline; }
#signup-panel-inline .oauth-label--short { display: none; }

#signup-panel-inline .oauth-btn.google   { color: #ffffff; border: 2px solid #ffffff; }
#signup-panel-inline .oauth-btn.facebook { color: #4184f5; border: 2px solid #4184f5; }

/* ========================= ERROR MESSAGE ========================= */
#signup-panel-inline #signup-error {
  color: #e0370d;
  font-size: 0.85rem;
  margin-top: 10px;
  display: none;
}

/* ========================= MOBILE (≤ 609px) ========================= */
@media (max-width: 609px) {
  #signup-panel-inline .form-fields {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }
  #signup-panel-inline .form-fields .input-wrap {
    flex: none;
    height: 56px;
    width: 100%;
    margin-bottom: 16px;
  }
  #signup-panel-inline .signup-submit-row { flex-direction: column; justify-content: space-between; gap: 0; }
  /* Double the gap between email and button (32px total) with the privacy
     text sitting exactly in the middle (16px above + 16px below). */
  #signup-panel-inline .privacy-text {
    display: block;
    width: 100%;
    padding-left: 18px;
    opacity: 0.72;
    margin: 0 0 11px;
    text-align: left;
  }
  /* Reduce email's bottom margin to 11px to mirror the privacy text's 11px
     bottom margin — keeps the small text vertically centered with 30%
     reduced spacing on each side. */
  #signup-panel-inline #wrap-email {
    margin-bottom: 11px;
  }
  /* Hide leading "*" on mobile — placeholder/text get the * stripped via JS */
  #signup-panel-inline .privacy-text .star { display: none; }
  #signup-panel-inline .btn-submit { width: 100%; flex-shrink: 0; }
  #signup-panel-inline .oauth-row {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }
  #signup-panel-inline .oauth-btn {
    flex: none;
    height: 56px;
    width: 100%;
  }
}