/**
 * @file        lead.css
 * @description Probe opt-in and qualifying form (C-12, C-13)
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         b38e56d1-2704-4c9f-85a3-6e17d0b4a29c
 * @version     0.0.0.1
 * @created     2026-09-11
 * @updated     2026-09-11
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* --- Reading-probe opt-in (Story 4.1, C-12) ------------------------------
 * One input, one button. Deliberately plain: this is an offer of value, not a
 * conversion device, and urgency styling would contradict the brand voice
 * ("no urgency devices, no dark patterns" — DESIGN.md §1). */

.probe {
  max-width: var(--measure);
  padding: var(--space-5);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-top: var(--space-5);
}

.band--raised .probe { background: var(--surface-page); }
.band--page   .probe { background: var(--surface-raised); }

.probe__heading { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.probe__offer   { margin-bottom: var(--space-4); }

.probe__field { margin-bottom: var(--space-4); }

/* Visible label, never a placeholder standing in for one. */
.probe__label,
.lead-form__label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.probe__input,
.lead-form__input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--surface-raised);
  color: var(--text-primary);
}

.probe__hint {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
}

/* The newsletter opt-in is visually separate from the chapter request, because
 * they are separate permissions (FR77). */
.probe__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.probe__consent input { margin-top: 0.25rem; }

.probe__privacy { font-size: var(--text-sm); margin: var(--space-3) 0 0; }

/* --- Opt-in result ------------------------------------------------------- */

.probe-result {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  max-width: var(--measure);
}

/* State is carried by a border weight and the message text, not by colour
 * alone (NFR21). */
.probe-result--success       { border-left: 4px solid var(--color-gold-text); }
.probe-result--invalid-email,
.probe-result--rate-limited,
.probe-result--error         { border-left: 4px solid var(--text-primary); }

/* --- Qualifying form (Story 4.3, C-13) -----------------------------------
 * SINGLE COLUMN AT EVERY VIEWPORT. Not a responsive choice — a two-column form
 * can put a label out of reading order, and Story 4.3 rules it out outright. */

.contact__intro { font-size: var(--text-lg); max-width: var(--measure); }

.lead-form {
  display: block;
  max-width: var(--container-reading);
}

.lead-form__field {
  margin-bottom: var(--space-5);
  border: 0;
  padding: 0;
}

/* fieldset resets, so a radio group looks like every other field. */
.lead-form__field legend { padding: 0; }

.lead-form__radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
}

.lead-form__error {
  margin: var(--space-2) 0 0;
  font-weight: 600;
  /* Deep Space rather than a red: the palette has no error token, and inventing
   * one here would be an undocumented colour. The weight plus the summary link
   * carry the signal. */
  color: var(--text-primary);
  border-left: 3px solid var(--text-primary);
  padding-left: var(--space-3);
}

.lead-form__known,
.lead-note {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.lead-form__privacy { font-size: var(--text-sm); }

/* --- Error summary -------------------------------------------------------
 * Appears at the top and links to each field. The first thing a keyboard user
 * meets after a failed submit. */

.error-summary {
  border: 2px solid var(--text-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  max-width: var(--measure);
}

.error-summary__heading { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.error-summary ul { margin: 0; padding-left: var(--space-5); }
.error-summary li { margin-bottom: var(--space-2); }

.lead-success {
  padding: var(--space-4);
  border-left: 4px solid var(--color-gold-text);
  background: var(--surface-raised);
  max-width: var(--measure);
}