/* Onboarding wizard (spec #23). Ported verbatim from the approved artifact
   design/leadsurface/artifacts/onboarding-wizard.html — only the spec-sheet
   chrome around the specimens was dropped. Tokens are the vocabulary; nothing
   here invents a colour or a spacing value. */

/* =====================================================================
   WIZARD — the component. public/signup/ form column.
   ===================================================================== */
.wiz {
  max-width: 460px;
  width: 100%;
}
.wiz.wide {
  max-width: 560px;
}

/* --- progress indicator ---
   An ordered list, not a row of divs: the step sequence is the semantics.
   aria-current="step" marks position; completed steps carry a check and
   a visually-hidden "completed". Not clickable forward — step 3 is
   server-enforced unreachable before a config exists (spec #23). */
.wiz-steps {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0 0 26px;
}
.wiz-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.wiz-steps li + li::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--border-strong);
  margin: 0 12px;
  flex-shrink: 0;
}
.wiz-steps .n {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  font-size: 11px;
  flex-shrink: 0;
}
.wiz-steps li[aria-current='step'] {
  color: var(--accent);
}
.wiz-steps li[aria-current='step'] .n {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.wiz-steps li.done {
  color: #047857;
}
.wiz-steps li.done .n {
  border-color: rgba(16, 185, 129, 0.45);
  color: #047857;
}

.wiz h1 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-hi);
  margin: 0 0 8px;
  line-height: 1.15;
}
.wiz > .lede {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

.wiz-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.wiz-card + .wiz-card {
  margin-top: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field > label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-hi);
}
.field input[type='email'],
.field input[type='text'],
.field input[type='url'] {
  width: 100%;
  font-size: 15px;
  padding: 11px 13px;
}
.field .help {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
}
.field .err {
  font-size: 13px;
  color: #b91c1c;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.field input[aria-invalid='true'] {
  border-color: #b91c1c;
}
.field input[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* 44px, not 42: this rule outranks the base button floor in components.css,
   so a near-miss here silently reintroduces the tap-target failure on the one
   screen every new user must get through. */
.wiz button {
  min-height: 44px;
  font-size: 14px;
}
.wiz button.block {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wiz button:focus-visible,
.wiz a:focus-visible,
.wiz summary:focus-visible,
.wiz input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.wiz button[disabled],
.wiz button[aria-busy='true'] {
  opacity: 0.62;
  box-shadow: none;
  transform: none;
  cursor: progress;
}
.spin {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: sp 0.7s linear infinite;
}
/* On-panel variant: the base .spin is white, for use inside a filled button. */
.spin-ink {
  border-color: var(--rule);
  border-top-color: var(--accent);
}
/* Visible progress line for the suggestion pass. This was sr-only, so a sighted
   user saw only grey skeleton blocks and read them as a broken screen rather
   than as work in progress — the pass takes seconds because it fetches the
   site and runs a model over it. Keeps role="status" so it is still announced. */
.wiz-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
}
@keyframes sp {
  to {
    transform: rotate(360deg);
  }
}

.wiz-foot {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-3);
  text-align: center;
}
.wiz-foot a {
  color: var(--accent);
}
.wiz-back {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  cursor: pointer;
}
.wiz-back:hover {
  box-shadow: none;
  transform: none;
  color: var(--accent);
}

/* --- big status screens (check email / expired / mail down) --- */
.wiz-status {
  text-align: center;
  padding: 34px 26px;
}
.wiz-status .ic {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.wiz-status .ic.sent {
  background: var(--accent-soft);
  color: var(--accent);
}
.wiz-status .ic.warn {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
}
.wiz-status .ic.bad {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}
.wiz-status h2 {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  margin: 0 0 10px;
}
.wiz-status p {
  margin: 0 auto 8px;
  max-width: 40ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
}
.wiz-status .addr {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-hi);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 9px;
  display: inline-block;
  margin: 4px 0 12px;
}
.wiz-status .acts {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* --- step 2: company confirmation --- */
.confirm {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.confirm .fav {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.confirm .who {
  flex: 1;
  min-width: 0;
}
.confirm .who strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text-hi);
  letter-spacing: -0.01em;
}
.confirm .who .dom {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}
.confirm .who .src {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
}

/* --- step 2: suggestion groups --- */
.sug-group + .sug-group {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.sug-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.sug-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-hi);
  letter-spacing: -0.01em;
}
.cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  white-space: nowrap;
}
.cap.full {
  color: #b45309;
}
.sug-why {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
}
.sug-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* One suggestion = an editable value + the reason it was proposed.
   The reason is always visible, never a tooltip: spec #23 § "Show your
   work" — a wrong guess the user can see the basis for reads as helpful,
   a bare wrong guess reads as broken. */
.sug {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 10px 9px 12px;
}
.sug:focus-within {
  border-color: var(--accent);
}
.sug input {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 14.5px;
  color: var(--text-hi);
  font-weight: 500;
  width: 100%;
  min-width: 0;
}
.sug input:focus {
  outline: none;
  box-shadow: none;
}
.sug .why {
  grid-column: 1;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}
.sug .why::before {
  content: '— ';
  color: var(--accent);
}
.sug .rm {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.sug .rm:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #b91c1c;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.sug.manual {
  background: var(--panel);
  border-style: dashed;
}
.sug-add {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.sug-add input {
  flex: 1;
  font-size: 14px;
}
.sug-add button {
  min-height: 0;
  padding: 8px 14px;
  font-size: 13px;
}

/* --- step 3: plan choice as a real radio group --- */
.plans {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plans > legend {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-hi);
  padding: 0;
  margin-bottom: 10px;
}
.plan-opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  align-items: start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 16px;
  cursor: pointer;
}
.plan-opt:hover {
  border-color: var(--border-strong);
}
/* Selected styling is driven by the real radio, so keyboard selection and
   mouse selection cannot diverge. :has() is the whole mechanism — there
   is no JS class toggle to get out of sync. */
.plan-opt:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--panel);
}
.plan-opt:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.plan-opt input[type='radio'] {
  margin: 3px 0 0;
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.plan-opt .nm {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: -0.01em;
}
.plan-opt .amt {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-hi);
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.plan-opt .amt span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}
.plan-opt .desc {
  grid-column: 2 / span 2;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
.plan-opt .rec {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 2px 8px;
  vertical-align: 2px;
}

/* The consequence line — restated whenever the plan or the card choice
   changes. Spec #23: say plainly what happens on day 15, and for how
   much. Two variants, both shown below. */
.outcome {
  margin: 18px 0 0;
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
}
.outcome strong {
  color: var(--text-hi);
}
.outcome.pause {
  border-left-color: var(--amber);
}

.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.cta-stack .alt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cta-stack .alt::before,
.cta-stack .alt::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* Legal acceptance. Sits with the CTAs, above them, so it is read before
   the click and not buried under it. The version string is what gets
   written to the tenant with the timestamp (spec #11 AC 15). */
.accept {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-3);
}
.accept a {
  color: var(--accent);
}
.accept .ver {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.accept-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 13px 15px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.accept-box input[type='checkbox'] {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.accept-box label {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.pe-slot {
  border: 1px dashed var(--border-accent);
  border-radius: var(--radius);
  background: var(--panel-2);
  min-height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-3);
}

/* --- notice (left rule, no fill) --- */
.note {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.note .ic {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-3);
}
.note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
/* Closing a card (the step-2 communities note) — no trailing gutter. */
.wiz-card > .note:last-child {
  margin-top: 20px;
  margin-bottom: 0;
}
.note.warn {
  border-left-color: var(--amber);
}
.note.warn .ic {
  color: #b45309;
}

/* --- skeleton --- */
.sk {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2));
  background-size: 200% 100%;
  animation: sk 1.4s ease-in-out infinite;
}
@keyframes sk {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk,
  .spin {
    background: var(--panel-2);
    animation: none;
  }
  .spin {
    background: none;
  }
}
.sk-sug {
  height: 56px;
  border-radius: var(--radius);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- responsive --- */
@media (max-width: 640px) {
  .wiz-card {
    padding: 18px 15px;
  }
  /* The step rail loses its connectors and keeps only the current step
     labelled — three mono labels do not fit 320px without wrapping into
     an unreadable stack. */
  .wiz-steps li + li::before {
    width: 12px;
    margin: 0 7px;
  }
  .wiz-steps li:not([aria-current='step']) .lbl {
    display: none;
  }
  .plan-opt {
    grid-template-columns: auto 1fr;
  }
  .plan-opt .amt {
    grid-column: 2;
    grid-row: 2;
    font-size: 15px;
  }
  .plan-opt .desc {
    grid-column: 2;
  }
  .sug {
    grid-template-columns: 1fr auto;
  }
}