/* Waitlist page additions. Shared form styles live in styles.css. */

/* waitlist-config.js sets data-waitlist on <html>. Without it (no JavaScript,
   or the config did not load) the page shows the "not yet open" notice. */
html:not([data-waitlist="open"]) .waitlist-open { display: none; }
html[data-waitlist="open"] .waitlist-closed { display: none; }

.waitlist-fields { display: grid; gap: 22px; min-width: 0; }
.waitlist-fields[hidden], .waitlist-success[hidden] { display: none; }

.waitlist-optional { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }

.waitlist-error { margin: 0; color: var(--danger); font-size: 14px; font-weight: 500; }

.waitlist-success { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--accent-soft); }
.waitlist-success-title { margin: 0; font: 500 24px/1.2 var(--font-display); color: var(--ink); }
.waitlist-success-title:focus { outline: none; }
.waitlist-success-title:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.waitlist-success p { margin: 0; color: var(--text); }
.waitlist-success .btn { width: auto; justify-self: start; }

.waitlist-form .chip span { min-height: 44px; }
.waitlist-form .waitlist-consent input { min-width: 18px; }

@media (max-width: 480px) {
  .waitlist-form .chips { gap: 6px; }
  .waitlist-form .chip span { padding: 0 13px; }
}

/* Inline field messages, linked by aria-describedby when a field is invalid. */
.field-error { margin: 0; color: var(--danger); font-size: 14px; font-weight: 500; }
.field-error[hidden] { display: none; }
.waitlist-form [aria-invalid="true"]:is(input:not([type="checkbox"])) { border-color: var(--danger); }
.waitlist-form fieldset[aria-invalid="true"] .chip span { border-color: var(--danger); }

/* On narrow screens the intro sits above the form; offer a quick way down. */
.waitlist-jump { display: none; }
@media (max-width: 760px) {
  html[data-waitlist="open"] .waitlist-jump { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 8px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
  .waitlist-intro .waitlist-promises { margin: 20px 0; }
}

/* Capability pages use local assets only; no third-party script can read the fragment. */
.waitlist-consent-page { max-width: 680px; margin: 64px auto; padding-block: 24px; }
.waitlist-consent-page h1 { font: 500 clamp(28px, 5vw, 42px)/1.15 var(--font-display); margin-block: 32px 24px; }
.waitlist-consent-page [data-consent-text] { white-space: pre-line; margin-block: 24px; }
.waitlist-consent-page [role="status"] { margin-block: 24px; }
.waitlist-consent-page img { width: auto; max-width: 100%; }

/* Explicit disabled state for capability pages; no change to confirmation behavior. */
.waitlist-page { min-height: 100svh; }
.waitlist-consent-page button:disabled {
  background: var(--color-surface-sunken);
  color: var(--color-ink-muted);
  border-color: var(--color-line-control);
  cursor: not-allowed;
}