/* styles.css — onboarding wizard layout on top of the vendored brand.css. */

.wizard {
  max-width: 720px;
  margin: 0 auto;
  padding: 5vh 1.5rem 6vh;
}

.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 2rem 1.9rem;
}

.card h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 0.4rem;
}
.card p { color: rgba(248, 249, 250, 0.82); margin-bottom: 1rem; }
.muted { color: var(--neutral-mid); }

/* Progress rail — one dot per step. */
.steps-rail {
  display: flex; gap: 0.5rem; align-items: center;
  margin-bottom: 1.6rem; flex-wrap: wrap;
}
.steps-rail .dot {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(248, 249, 250, 0.55);
}
.steps-rail .bead {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
}
.steps-rail .done .bead { background: var(--secondary); border-color: var(--secondary); }
.steps-rail .current .bead { border-color: var(--accent); background: var(--accent); }
.steps-rail .current { color: #fff; }
.steps-rail .done { color: rgba(248, 249, 250, 0.8); }

/* Forms. */
label { display: block; font-size: 0.85rem; margin: 0.9rem 0 0.3rem; color: rgba(248,249,250,0.9); }
input[type="text"], input[type="password"] {
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
}
input:focus { outline: none; border-color: var(--secondary); }

.actions { margin-top: 1.5rem; display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* Inline result banners (verify success / 422 / auth errors). */
.banner {
  margin-top: 1.2rem; padding: 0.9rem 1.1rem; border-radius: 10px;
  font-size: 0.92rem; border-left: 3px solid;
}
.banner.ok { background: rgba(0,191,166,0.10); border-color: var(--secondary); }
.banner.err { background: rgba(245,166,35,0.10); border-color: var(--accent); }
.banner.info { background: rgba(255,255,255,0.05); border-color: var(--neutral-mid); }
.banner code { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; }

pre.payload {
  margin-top: 1rem; padding: 1rem; border-radius: 10px;
  background: rgba(0, 0, 0, 0.30); border: 1px solid rgba(255,255,255,0.10);
  font-family: "JetBrains Mono", monospace; font-size: 0.78rem;
  white-space: pre-wrap; word-break: break-word; color: rgba(248,249,250,0.9);
  max-height: 340px; overflow: auto;
}

.hint { font-size: 0.82rem; color: var(--neutral-mid); margin-top: 0.5rem; }
.spinner { opacity: 0.7; }