/* Signup wizard styles (Track B). Loaded per-page via each signup
   template's {% block styles %}. Tokens come from tokens.css; no new
   color literals. */

/* 2026-05-20 audit P0-1: step2_identity.html uses .lab-field*
   classes that were only defined in admin.css. admin.css is not
   loaded on the public signup wizard, so the identity form
   collapsed to an unstyled lump at every viewport. Copy the
   primitive rules here so the wizard renders correctly without
   pulling in the admin stylesheet. Keep in sync with the same
   block in admin.css around line 2474. */
.lab-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.lab-field:last-child { margin-bottom: 0; }
.lab-field-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
}
.lab-field-help {
  font-size: 0.78rem;
  margin: 0.25rem 0 0;
  line-height: 1.5;
}
.lab-field-grow { flex: 1 1 200px; min-width: 200px; }
.lab-field-conditional { margin-top: 0.4rem; }

.signup-wizard {
  max-width: 1120px;
  /* horizontal padding scales down on phones so the panel never
     overflows at 320px wide. */
  margin: 2.25rem auto 3rem;
  padding: 0 1rem;
}
.signup-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.9rem 1.25rem;
  margin-bottom: 1.25rem;
  padding: 1.65rem 1.85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at top right, var(--accent-soft) 0, transparent 22rem),
    var(--paper);
  box-shadow: var(--shadow-1);
}
.signup-brand-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  color: var(--accent);
}
.signup-brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  /* The SVG draws with currentColor so the icon picks up the
     ancestor color. Keeps the brand a single-source asset. */
  color: var(--accent);
}
.signup-brand-wordmark {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.signup-title {
  grid-column: 1 / -1;
  max-width: 920px;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  line-height: 1.12;
  margin: 0.2rem 0 0;
  color: var(--ink);
}
.signup-lede {
  grid-column: 1 / -1;
  max-width: 64ch;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
}
.signup-step-indicator {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  flex-wrap: wrap;
}
.signup-step-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  margin: 0;
  list-style: none;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  background: var(--bone-soft);
}
.signup-step-pip {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--rule);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--mono);
}
.signup-step-pip-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.signup-step-pip.active {
  background: var(--accent);
  color: var(--paper);
  box-shadow: 0 0 0 2px var(--accent-tint);
}
.signup-step-pip.done {
  background: var(--ok, var(--accent));
  color: var(--paper);
}
.signup-step-pip.errored {
  background: var(--danger);
  color: var(--paper);
}

/* Tier cards */
.signup-tier-form {
  display: grid;
  gap: 1rem;
}
.radio-card-group {
  display: grid;
}
.signup-tier-cards {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
  gap: 1rem;
}
.radio-card {
  position: relative;
  display: flex;
  min-width: 0;
  cursor: pointer;
}
.radio-card input[type="radio"] {
  position: absolute;
  inset: 1rem auto auto 1rem;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.radio-card-body {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 0.45rem;
  padding: 1.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.radio-card input[type="radio"]:focus-visible + .radio-card-body {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.radio-card input[type="radio"]:checked + .radio-card-body {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, var(--accent-soft), var(--paper) 46%),
    var(--paper);
  box-shadow: 0 0 0 2px var(--accent-tint), var(--shadow-2);
}
.radio-card input[type="radio"]:checked + .radio-card-body::after {
  content: "✓";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 760;
}
.signup-tier-card {
  min-height: 100%;
  border-radius: var(--radius-lg);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.signup-tier-card:hover {
  transform: translateY(-1px);
}
.signup-tier-card:hover .radio-card-body {
  border-color: var(--accent-soft-border);
  box-shadow: var(--shadow-1);
}
.signup-tier-card-recommended {
  color: var(--accent);
}
.signup-tier-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-right: 1.9rem;
}
.signup-tier-card-head strong {
  color: var(--ink);
  font-size: 1rem;
}
.signup-tier-recommended-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.signup-tier-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.1rem 0 0.25rem;
}
.signup-tier-price-value {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--ink);
}
.signup-tier-price-interval {
  white-space: nowrap;
}
.signup-tier-card .radio-card-help {
  margin: 0.1rem 0 0.3rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}
.signup-tier-features {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.signup-tier-features li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.signup-security-strip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--accent-tint);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--ink-soft);
  font-size: 0.87rem;
}
.signup-security-mark {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-tint);
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent);
}
.signup-tier-confirm {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}
.signup-tier-confirm-price { margin-left: 4px; }

/* Roadmap 2026-06-09: HIPAA trust strip above the tier cards. Promotes the
   compliance posture (previously buried in muted lede copy) into a visible
   marketing-style row of signals so compliance buyers see it pre-commit. */
.signup-trust-strip {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1.25rem;
  border: 1px solid var(--accent-tint);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.signup-trust-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.signup-trust-mark {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-tint);
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent);
}
.signup-trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: 0.8rem;
}
.signup-trust-text strong {
  color: var(--ink);
  font-size: 0.85rem;
}

/* Roadmap 2026-06-09: per-tier BAA badge at plan selection. */
.signup-tier-baa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin: 0.15rem 0 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.signup-tier-baa-included {
  background: var(--accent-tint);
  color: var(--accent-deep);
}
.signup-tier-baa-available {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: 1px solid var(--accent-tint);
}
.signup-tier-baa-none {
  background: var(--bone-soft);
  color: var(--muted);
  border: 1px solid var(--rule-soft);
}

/* Identity form */
.signup-identity-form {
  display: grid;
  gap: 1rem;
  max-width: 620px;
}
.signup-panel {
  padding: 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.signup-field-error {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0.25rem 0 0;
  color: var(--danger);
  font-size: 0.8rem;
}
.signup-field-hint {
  font-weight: 400;
  font-size: 0.78rem;
}
.signup-npi-result { min-height: 1.4rem; margin-top: 0.35rem; }
.signup-npi-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
}
.signup-npi-ok   { color: var(--ok-deep); }
.signup-npi-warn { color: var(--warn-text-deep); }

/* Bridge + welcome */
.signup-bridge-card,
.signup-welcome-card,
.signup-security-card,
.signup-welcome-next {
  padding: 1.25rem;
  margin: 1rem 0;
}
.signup-bridge-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}
.signup-bridge-actions,
.signup-welcome-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.signup-security-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-color: var(--accent-tint);
  background:
    linear-gradient(180deg, var(--paper), var(--accent-soft));
}
.signup-security-card-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.signup-security-card h3 {
  margin: 0 0 0.25rem;
}
.signup-security-card p {
  max-width: 66ch;
  margin: 0;
}
.signup-security-card-mark {
  margin-top: 0.1rem;
}
.signup-disabled-action {
  pointer-events: none;
  opacity: 0.72;
  white-space: nowrap;
}
.signup-welcome-checklist {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.signup-back-link { margin-left: 0.5rem; }
.signup-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

@media (max-width: 900px) {
  .signup-head {
    grid-template-columns: 1fr;
  }

  .signup-step-indicator {
    justify-self: start;
  }

  .signup-tier-cards {
    grid-template-columns: 1fr;
  }

  .signup-actions,
  .signup-security-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .signup-actions .btn,
  .signup-actions button,
  .signup-security-card .btn {
    width: 100%;
    justify-content: center;
  }

  .signup-back-link {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .signup-wizard {
    margin-top: 1rem;
  }

  .signup-head,
  .signup-panel,
  .signup-bridge-card,
  .signup-welcome-card,
  .signup-security-card,
  .signup-welcome-next {
    padding: 1rem;
  }

  .signup-step-indicator {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
  }
}

/* Compact viewports (<=420px) collapse the step indicator into the
   minimum useful surface: drop padding, shrink the pip bar, narrow the
   brand mark. Inputs and buttons widen to 100% so the form never
   overflows at 320px. */
@media (max-width: 420px) {
  .signup-wizard {
    padding: 0 0.6rem;
    margin: 0.75rem auto 2rem;
  }
  .signup-head,
  .signup-panel,
  .signup-bridge-card,
  .signup-welcome-card,
  .signup-security-card,
  .signup-welcome-next {
    padding: 0.85rem;
    border-radius: var(--radius-md);
  }
  .signup-title {
    font-size: 1.35rem;
  }
  .signup-lede {
    font-size: 0.9rem;
  }
  .signup-step-text {
    font-size: 0.68rem;
  }
  .signup-step-pip {
    width: 18px;
    height: 18px;
    font-size: 0.66rem;
  }
  .signup-brand-mark {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }
  .signup-brand-wordmark {
    font-size: 0.95rem;
  }
  .signup-tier-card-head,
  .signup-tier-price {
    flex-wrap: wrap;
  }
  .radio-card-body {
    padding: 1rem;
  }
  .radio-card input[type="radio"]:checked + .radio-card-body::after {
    top: 0.8rem;
    right: 0.8rem;
  }
  .signup-security-card-copy {
    grid-template-columns: 1fr;
  }
}

/* Spinner: hover-aware spin reused by step3 bridge, step4 provisioning
   status, and baa_poll/return waiting fragment. The animation is
   suppressed under prefers-reduced-motion (per Sanolith a11y baseline). */
.signup-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: signup-spin 1.6s linear infinite;
  transform-origin: 50% 50%;
}
.signup-spinner svg { display: block; }
@keyframes signup-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .signup-spinner {
    animation: none;
  }
}