/* =========================
   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%;
  }
}

/* ── Touch devices (tablet + phone): kill the stuck :hover state ──
   These devices have no real hover, but a tap leaves :hover "stuck", so after
   signup (when the button drops back to its default class) it would sit there
   solid green with white text. Neutralise every hover style so it stays in its
   resting black bg + green text/arrow look. Selectors mirror the :hover rules
   above exactly so the specificity matches and these win by source order. */
@media (hover: none) {
  #signup-panel-inline .btn-submit:not(.submitting):not(.submitted):hover {
    background-color: #000000;
    color: #4e804f;
  }
  #signup-panel-inline .btn-submit:not(.submitting):not(.submitted):hover .btn-logo-default { opacity: 1; }
  #signup-panel-inline .btn-submit:not(.submitting):not(.submitted):hover .btn-logo-hover   { opacity: 0; }
  #signup-panel-inline .btn-submit:not(.submitting):not(.submitted):hover .btn-arrow-white  { opacity: 0; }
  #signup-panel-inline .btn-submit:not(.submitting):not(.submitted):hover .btn-arrow-green  { opacity: 1; }
}