/* =================================================================
   Plenary — Signup (Conductor "step 0") for the marketing site
   The 3-screen instance-creation flow (signup.html), styled to match
   the Conductor screens in the Onboarding design definition.
   Load after plenary-tokens.css + components.css. Self-contained:
   the .cnd* chrome and the settings-control subset live here so the
   page needs no admin.css.
   ================================================================= */

html, body { height: 100%; }
body { margin: 0; background: var(--c-gray-50); }

/* ---- product chrome ---- */
.onb { min-height: 100vh; display: flex; flex-direction: column; background: var(--c-gray-50); }
.onb a { color: var(--c-primary); }

.onb__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 13px 22px; background: #fff; border-bottom: 1px solid var(--c-gray-200);
}
.onb__brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.onb__mark { width: 30px; height: 30px; border-radius: 24%; background: var(--c-primary-100); position: relative; flex: 0 0 auto; }
.onb__mark::before { content: ""; position: absolute; inset: 35%; border-radius: 30%; background: var(--c-primary); }
.onb__prod { font: 700 16px/1 var(--font-display); color: var(--c-primary-deep); letter-spacing: -.01em; }
.onb__slug { font: 600 13px/1 ui-monospace, Menlo, monospace; color: var(--c-gray-500); padding-left: 12px; border-left: 1px solid var(--c-gray-200); white-space: nowrap; }
.onb__right { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }

/* language select (mirrors the marketing quiet button) */
.lang { position: relative; display: inline-flex; align-items: center; }
.lang__select { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; height: 32px; padding: 0 28px 0 14px; border-radius: var(--r-pill); background: var(--c-gray-100); font: var(--fw-bold) 14px/1 var(--font-body); color: var(--c-primary); transition: background var(--dur-base) var(--ease); }
.lang__select:hover { background: var(--c-primary-100); }
.lang__select:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.lang::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-right: 2px solid var(--c-primary); border-bottom: 2px solid var(--c-primary); transform: rotate(45deg); pointer-events: none; }

/* ---- stage + step indicator ---- */
.cnd__stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px 64px; }
.cnd-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.cnd-steps__it { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font-body); color: var(--c-gray-500); }
.cnd-steps__it i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-gray-100); color: var(--c-gray-500); font: 700 12px/1 var(--font-body); font-style: normal; }
.cnd-steps__it i svg { width: 12px; height: 12px; }
.cnd-steps__it.is-current { color: var(--c-primary-deep); }
.cnd-steps__it.is-current i { background: var(--c-primary); color: #fff; }
.cnd-steps__it.is-done { color: var(--c-gray-800); }
.cnd-steps__it.is-done i { background: #E0F8E6; color: #1F8A3F; }
.cnd-steps__ln { width: 26px; height: 2px; border-radius: 1px; background: var(--c-gray-200); }
.cnd-steps__ln.is-done { background: #A7E3B8; }

/* ---- card ---- */
.cnd-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--c-gray-200); border-radius: 16px; padding: 30px 32px 28px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.cnd-card--wide { max-width: 560px; }
.cnd-card h1 { font: 700 22px/1.2 var(--font-display); color: var(--c-primary-deep); margin: 0 0 6px; letter-spacing: -.01em; }
.cnd-lede { margin: 0 0 20px; font: 400 14px/1.55 var(--font-body); color: var(--c-gray-500); }
.cnd-lede b, .cnd-lede strong { color: var(--c-primary-deep); font-weight: 700; }
.cnd-fine { margin: 16px 0 0; font: 400 12px/1.55 var(--font-body); color: var(--c-gray-500); text-align: center; }

/* trial ribbon above the title */
.cnd-trial { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px; border-radius: var(--r-full); background: var(--c-primary-100); color: var(--c-primary); font: 700 12px/1 var(--font-body); }
.cnd-trial::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); }

.btn--block { width: 100%; justify-content: center; }
.cnd-card .btn--block { margin-top: 6px; }

/* ---- settings-style rows (email / org / slug) ---- */
.setui .set-row { padding: 16px 0; }
.setui .set-row:first-child { padding-top: 0; }
.setui .set-row + .set-row { border-top: 1px solid var(--c-gray-100); }
.setui .set-lbl { font: 700 14px/1.3 var(--font-body); color: var(--c-primary-deep); }
.setui .set-hint { margin: 4px 0 0; font: 400 13px/1.5 var(--font-body); color: var(--c-gray-500); max-width: 60ch; }
.setui .set-ctl { margin-top: 10px; display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.setui .set-ctl > .input { flex: 1 1 240px; max-width: none; }
.setui .field { display: grid; gap: 6px; }
.setui .mini-lbl { font: 700 11px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--c-gray-500); }

/* slug input with fixed domain suffix */
.slugfield { display: inline-flex; align-items: stretch; border: 1px solid var(--c-gray-200); border-radius: var(--r-md); overflow: hidden; background: #fff; flex: 1 1 240px; }
.slugfield input { border: 0; outline: none; height: 42px; padding: 0 12px; font: 600 14px/1 ui-monospace, Menlo, monospace; color: var(--c-primary); flex: 1; min-width: 0; }
.slugfield span { display: inline-flex; align-items: center; padding: 0 12px; background: var(--c-gray-50); border-left: 1px solid var(--c-gray-200); font: 600 14px/1 ui-monospace, Menlo, monospace; color: var(--c-gray-500); white-space: nowrap; }
.slugfield:focus-within { border-color: var(--c-primary); box-shadow: var(--shadow-focus); }
.slugfield.is-bad { border-color: var(--c-danger); }

/* availability line under the slug field */
.cnd-avail { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1.3 var(--font-body); color: var(--c-gray-500); margin-top: 8px; min-height: 18px; }
.cnd-avail svg { width: 14px; height: 14px; flex: 0 0 auto; }
.cnd-avail.is-ok { color: #1F8A3F; }
.cnd-avail.is-bad { color: var(--c-danger); }
.cnd-avail:empty { display: none; }

/* per-field inline error */
.cnd-fielderr { margin: 6px 0 0; font: 600 13px/1.35 var(--font-body); color: var(--c-danger); }
.cnd-fielderr:empty { display: none; }

/* form-level status / error banner */
.cnd-status { margin: 14px 0 0; font: 600 13px/1.45 var(--font-body); border-radius: var(--r-md); }
.cnd-status:empty { display: none; }
.cnd-status.is-error { color: var(--c-danger); background: #FBE0E0; padding: 11px 13px; }

/* ---- OTP inputs ---- */
.cnd-otp { display: flex; gap: 8px; justify-content: center; margin: 4px 0 2px; }
.cnd-otp input { width: 52px; height: 62px; min-width: 0; text-align: center; border: 1.5px solid var(--c-gray-200); border-radius: var(--r-md); font: 700 24px/1 ui-monospace, Menlo, monospace; color: var(--c-primary-deep); background: #fff; }
.cnd-otp input:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--shadow-focus); }
.cnd-otp input.is-filled { background: var(--c-gray-50); }
.cnd-otp.is-bad input { border-color: var(--c-danger); }
.cnd-links { display: flex; justify-content: center; gap: var(--s-2); margin-top: 14px; flex-wrap: wrap; }
.cnd-links .btn[disabled] { opacity: .55; cursor: default; }

/* ---- optional-field marker (screen A) ---- */
.setui .set-opt { margin-left: 7px; font: 400 12px/1 var(--font-body); color: var(--c-gray-500); }

/* ---- branded preview (screen B) ---- */
.cnd-preview { margin: 18px 0 2px; }
.cnd-preview__eyebrow { display: block; margin-bottom: 8px; font: 700 11px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--c-gray-500); }
.cnd-preview__win { border: 1px solid var(--c-gray-200); border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.05); animation: cnd-pop 260ms ease-out; }
.cnd-preview__head { display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: var(--c-primary); }
.cnd-preview__logo { width: 18px; height: 18px; border-radius: 5px; background: #fff; opacity: .92; flex: 0 0 auto; }
.cnd-preview__logo-img { height: 22px; max-width: 96px; width: auto; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px 5px; flex: 0 0 auto; }
.cnd-preview__name { font: 700 14px/1 var(--font-display); letter-spacing: -.01em; color: #fff; }
.cnd-preview__body { display: flex; flex-direction: column; gap: 8px; padding: 13px; background: var(--c-gray-50); }
.cnd-preview__line { height: 9px; border-radius: 5px; background: var(--c-gray-200); }
.cnd-preview__line.is-short { width: 62%; }
.cnd-preview__note { margin: 9px 0 0; display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.3 var(--font-body); color: var(--c-primary); }
.cnd-preview__note[hidden] { display: none; }   /* class display: must not defeat the hidden attribute */
.cnd-preview__note::before { content: "✓"; font-weight: 700; }
@keyframes cnd-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cnd-preview__win { animation: none; } }

/* ---- provisioning (screen C) ---- */
.cnd-prov { text-align: center; }
.cnd-spin { width: 46px; height: 46px; margin: 4px auto 20px; border-radius: 50%; border: 4px solid var(--c-primary-100); border-top-color: var(--c-primary); animation: cnd-spin 900ms linear infinite; }
@keyframes cnd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cnd-spin { animation-duration: 2.4s; } }
.cnd-prov h1 { margin-bottom: 8px; }
.cnd-prov .cnd-lede { margin-bottom: 0; }
.cnd-prov--fail .cnd-spin { display: none; }

.cnd-fail-mark { width: 46px; height: 46px; margin: 4px auto 20px; border-radius: 50%; background: #FBE0E0; color: var(--c-danger); display: none; place-items: center; font: 700 24px/1 var(--font-body); }
.cnd-prov--fail .cnd-fail-mark { display: grid; }
.cnd-prov__actions { margin-top: 22px; display: none; justify-content: center; gap: var(--s-3); }
.cnd-prov--fail .cnd-prov__actions { display: flex; }

@media (max-width: 480px) {
  .cnd-card { padding: 24px 20px; }
  .cnd-otp input { width: 44px; height: 54px; font-size: 20px; }
  .onb__slug { display: none; }
}