/* Shared styles for the sign-up site. Colours match EagleClientApp/theme.ts's
   own brand-kit palette (#00005C / #FFFFFF / #000000 core, extended) — see
   that file's header comment — so this feels like the same product, not a
   generic form host. */

:root {
  --ink: #00005c;
  --ground: #f4f6ff;
  --white: #ffffff;
  --secondary1: #1b3898;
  --accent: #6e29d1;
  --accent-soft: #efe3fc;
  --success: #1c8a5a;
  --success-soft: #e3f5ec;
  --warning: #c9861a;
  --warning-soft: #fbf0dc;
  --danger: #c6303e;
  --danger-soft: #fbe4e6;
  --text: #1c1e42;
  --text-soft: #4a5488;
  --text-muted: #7c86b8;
  --border: #d8def5;
}

* {
  box-sizing: border-box;
}

/* Utility classes replacing what used to be inline `style="..."` attributes
   throughout this site. The CSP this site serves (see signup/infra/
   template.yml's SecurityHeadersPolicy) sets `style-src 'self'` with no
   `'unsafe-inline'` — which silently blocks every inline style ATTRIBUTE
   written in HTML markup (and reports it as a console error), while NOT
   blocking JavaScript's own `.style.property = ...` CSSOM assignments,
   which are a different mechanism CSP doesn't restrict at all. Found live
   2026-09-23 after several rounds of a static inline style (a spacer div's
   height, a banner's margin, and — much earlier — activate.html's
   step-form/step-success default-hidden state) all silently never applying
   in strict-CSP browsers, while a JS-driven `.style.display = "none"` fix
   for the exact same elements worked immediately. Anything that needs to be
   styled from HTML markup on this site from now on must be a class defined
   here, never a `style="..."` attribute — JS toggling `.style.xxx` or
   `classList` at runtime is unaffected either way.
   See CLAUDE.md/the plan for the full investigation this replaces. */
.hidden {
  display: none;
}

.optional-label {
  font-weight: 400;
  color: var(--text-muted);
}

.consent-notice-spacer {
  height: 28px;
}

/* privacy.html's own wider layout — was a page-local <style> block, which
   CSP's style-src 'self' (no 'unsafe-inline') blocks exactly the same way
   it blocks inline style="..." attributes (see the comment above .hidden).
   This page reads as plain text, not a form — a wider card and normal
   paragraph flow suit it better than the form pages' narrow layout. */
.card-wide {
  max-width: 640px;
}

.card-wide p,
.card-wide li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}

.card-wide h2 {
  color: var(--ink);
  font-size: 17px;
  margin: 24px 0 8px;
}

.card-wide ol {
  padding-left: 20px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  /* flex-direction was missing entirely (defaulting to `row`), so .card and
     footer.legal — direct siblings here — laid out SIDE BY SIDE instead of
     stacked. Barely visible on a narrow phone screen (little room for the
     row to spread into), fully exposed on a wide desktop screen: the footer
     (privacy notice link) sat to the right of the card, near its top, not
     below it. Found live 2026-09-23. `column` stacks them as originally
     intended; `align-items`/`justify-content` then center that stack both
     horizontally and vertically in the viewport on any screen size, rather
     than pinning content to the top-left the way a plain `row` would once
     truly single-column. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 64px;
}

.card {
  width: 100%;
  max-width: 480px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 92, 0.08);
  padding: 32px 28px;
}

h1 {
  color: var(--ink);
  font-size: 24px;
  margin: 0 0 8px;
}

.subtitle {
  color: var(--text-soft);
  font-size: 15px;
  margin: 0 0 28px;
  line-height: 1.5;
}

label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin: 18px 0 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

textarea {
  resize: vertical;
  min-height: 72px;
}

.hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.radio-group {
  margin-top: 6px;
}

.radio-question {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin: 18px 0 8px;
}

.radio-options {
  display: flex;
  gap: 16px;
}

.radio-options label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 15px;
  margin: 0;
  cursor: pointer;
}

.radio-options input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

button.primary {
  width: 100%;
  margin-top: 26px;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: var(--secondary1);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

button.primary:hover:not(:disabled) {
  background: var(--ink);
}

button.primary:disabled {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
}

.field-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 6px;
  display: none;
}

.field-error.visible {
  display: block;
}

.banner {
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
  display: none;
}

.banner.visible {
  display: block;
}

.banner.success {
  background: var(--success-soft);
  color: var(--success);
}

.banner.error {
  background: var(--danger-soft);
  color: var(--danger);
}

.banner.info {
  background: var(--accent-soft);
  color: var(--accent);
}

.turnstile-wrap {
  margin-top: 20px;
}

/* Honeypot — hidden from real visitors, still present in the DOM/tab order
   avoided, for naive scrapers that fill every input they find. */
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

footer.legal {
  max-width: 480px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 20px;
  line-height: 1.6;
}

footer.legal a {
  color: var(--text-soft);
}

.prefill-summary {
  background: var(--ground);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 6px;
}

.prefill-summary .name {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.prefill-summary .email {
  font-size: 14px;
  color: var(--text-soft);
}

.spinner-state {
  text-align: center;
  color: var(--text-soft);
  padding: 20px 0;
}

/* A genuinely slow wait (Aurora cold-resume, up to ~23s per MinCapacity:0 —
   see CLAUDE.md) previously only changed a button's *text*, which read as
   "is this dead?" rather than "still working" (live-tested 2026-09-22). Used
   inside button.primary (white text, so currentColor renders white) and
   inside .spinner-state (var(--text-soft), so currentColor renders that
   instead) — one class, no colour variants to keep in sync. */
.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -3px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}