/* Signup form and its states. Values from /design/tokens.css. Behaviour lives in /signup.js. */
/* Offer switch: data-offer="chapters" or "report" on <html>. */
html[data-offer="chapters"] .offer-report,
html[data-offer="report"] .offer-chapters { display: none !important; }

.signup-card { max-width: var(--form-max); }
.email-form { display: grid; gap: var(--space-3); }
.email-inputs { display: grid; gap: var(--space-3); }
.email-form input { font: inherit; font-size: var(--size-body); color: var(--color-ink); background: var(--color-paper); border: var(--rule-width) solid var(--color-field-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); width: 100%; min-width: 0; }
.email-form input::placeholder { color: var(--color-ink-muted); }
.email-form input:focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: 0; border-color: var(--color-ink); }
.email-form input.invalid { border-color: var(--color-error); }
.email-form button { font-family: var(--font-text); font-size: var(--size-small); font-weight: var(--weight-strong); letter-spacing: var(--tracking-button); line-height: 1; padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--color-accent); color: var(--color-on-accent); border: var(--rule-width) solid var(--color-accent-border); cursor: pointer; transition: background-color var(--duration), color var(--duration); }
.email-form button:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.email-form button:disabled { opacity: 0.45; cursor: not-allowed; }
.form-error { font-size: var(--size-small); color: var(--color-error); }
.offer { font-size: var(--size-body); font-weight: var(--weight-strong); color: var(--color-ink); }
.email-note { margin-top: var(--space-3); font-size: var(--size-small); color: var(--color-ink-muted); }
.email-note a { color: var(--color-ink-muted); }

.email-success { display: none; padding-top: var(--space-4); border-top: var(--rule-width) solid var(--color-ink); max-width: var(--form-max); }
.email-success.show { display: block; }
.email-success h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-h3); line-height: var(--leading-tight); margin-bottom: var(--space-2); color: var(--color-ink); }
.email-success p { font-size: var(--size-body); color: var(--color-ink-soft); }

.cta-deliverables { list-style: none; display: grid; gap: var(--space-2); max-width: var(--form-max); }
.cta-deliverables li { padding-block: var(--space-2); border-top: var(--rule-width) solid var(--color-rule); font-size: var(--size-small); color: var(--color-ink-soft); }

@media (min-width: 600px) {
  .email-inputs { grid-template-columns: 1fr 1fr; }
  .signup-card--inline .email-inputs { grid-template-columns: 1fr auto; }
  .signup-card--inline .email-inputs button { white-space: nowrap; }
}