/*
 * Shared magic-link email gate (shared/email_gate_react).
 *
 * The `eg-` prefix is owned entirely by the component. The host SPA keeps its
 * own page/card wrapper and its own prefix; only a modifier class
 * (.eg-gate--wv, .eg-gate--rcr, …) is emitted so a host can theme the gate
 * without the component knowing anything about it.
 *
 * Remember: style.css sets `html { font-size: 10px }`, so 1rem = 10px here, not
 * 16px. Body text is 1.4rem (=14px), small print 1.2rem (=12px).
 */

.eg-gate {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
}

.eg-title {
  font-size: var(--fs-5);
  font-weight: var(--fw-700);
  color: var(--charcoal);
  margin: 0;
}

.eg-subtitle,
.eg-explanation {
  font-size: 1.3rem;
  color: var(--black-coral);
  margin: 0;
  line-height: 1.5;
}

.eg-explanation {
  font-size: 1.2rem;
}

.eg-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.eg-label {
  font-size: 1.2rem;
  font-weight: var(--fw-700);
  color: var(--charcoal);
}

/* Input and button sit side by side, and wrap to two rows on narrow screens
   rather than squeezing the input down to nothing. */
.eg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: stretch;
}

.eg-input {
  flex: 1 1 22rem;
  min-width: 0;
  padding: 1rem 1.2rem;
  font-size: 1.4rem;
  font-family: inherit;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: 0.6rem;
}

.eg-input:focus {
  outline: none;
  border-color: var(--cinnamon-satin);
  box-shadow: 0 0 0 3px var(--snow);
}

.eg-btn {
  padding: 1rem 1.6rem;
  font-size: 1.4rem;
  font-family: inherit;
  font-weight: var(--fw-700);
  border: 1px solid transparent;
  border-radius: 0.6rem;
  cursor: pointer;
  white-space: nowrap;
}

.eg-btn--primary {
  background: var(--cinnamon-satin);
  color: var(--white);
}

.eg-btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.eg-btn--secondary {
  align-self: flex-start;
  background: transparent;
  color: var(--cinnamon-satin);
  border-color: var(--cadet-blue-crayola_a20);
}

.eg-btn--secondary:hover {
  background: var(--cultured);
}

/* The typo question. Styled as a notice rather than the quiet footnote it used
   to be: it now holds the send until it is answered, so it has to look like
   something that is waiting on you. Amber, not red — nothing is wrong yet. */
.eg-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.2rem;
  font-size: 1.3rem;
  line-height: 1.5;
  color: hsla(32, 60%, 26%, 1);
  background: hsla(38, 90%, 96%, 1);
  border: 1px solid hsla(38, 70%, 78%, 1);
  border-radius: 0.6rem;
}

/* Focus lands here (see EmailGate.tsx), so it must be visibly the thing that
   just took over — a -1 tabindex container otherwise shows no focus at all. */
.eg-confirm:focus {
  outline: 2px solid var(--cinnamon-satin);
  outline-offset: 2px;
}

.eg-confirm-question {
  font-size: 1.4rem;
  overflow-wrap: anywhere;
}

.eg-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* "Neither" sends nothing, so it must not read as a third peer of the two that
   do — it is deliberately the quietest thing in the box. */
.eg-confirm-edit {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 1.2rem;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.eg-message {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.2rem;
  border-radius: 0.6rem;
  font-size: 1.3rem;
  line-height: 1.5;
}

.eg-message--error {
  background: hsla(354, 70%, 96%, 1);
  color: hsla(354, 60%, 34%, 1);
}

.eg-message--success {
  background: hsla(145, 55%, 95%, 1);
  color: hsla(145, 45%, 26%, 1);
}

.eg-hint {
  font-size: 1.2rem;
  opacity: 0.85;
}

/* The echoed address is the thing the user needs to proof-read, so it gets to
   look like data rather than prose — and must not overflow on a phone when
   somebody types a very long address. */
.eg-address {
  font-weight: var(--fw-700);
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .eg-btn--primary {
    width: 100%;
  }

  /* Full-width and stacked, so neither answer is the one you hit by accident
     because the other wrapped somewhere unexpected. */
  .eg-confirm-actions .eg-btn {
    flex: 1 1 100%;
    align-self: stretch;
    width: 100%;
  }
}