/* ============================================================================
   ATLAS REDESIGN — Get Started (new-tenant onboarding checklist) styles
   BrokerDIY onboarding wave · 2026-07-03

   Prefix: .rd-onb. Tokens only (--r-*) so Calm (almanac) + Operator themes
   both work automatically; raw hex appears ONLY inside color-mix over token
   vars (house pattern). Status chips: Connected = good tone, Not connected =
   NEUTRAL (expected state for a new tenant — never an error tone), Warming up
   = amber (distinct). The whole row is the tap target (≥44px, tabbable);
   390px collapses to a single column. Content scrolls with the page.
   ========================================================================== */

.rd-onb {
  font-family: var(--r-font-body);
  color: var(--r-body);
  padding: var(--r-gutter);
  max-width: var(--r-page-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- page header --------------------------------------------------------- */
.rd-onb-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rd-onb-eyebrow {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--r-clay);
}
.rd-onb-h1 {
  font-family: var(--r-font-display);
  font-size: var(--r-fs-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--r-ink);
  margin: 0;
}
.rd-onb-sub {
  margin: 4px 0 0;
  font-size: var(--r-fs-body);
  line-height: 1.55;
  color: var(--r-muted);
  max-width: 680px;
}
.rd-onb-org {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-meta);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--r-mint-ink);
  background: var(--r-mint-surface);
  border-radius: var(--r-radius-pill);
  padding: 1px 8px;
}

/* ---- progress hero -------------------------------------------------------- */
.rd-onb-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 28px;
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-shadow-card);
  padding: 22px 26px;
}
.rd-onb-hero-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 28px;
  border-right: 1px solid var(--r-hairline);
}
.rd-onb-hero-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rd-onb-hero-n {
  font-family: var(--r-font-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--r-ink);
  font-variant-numeric: tabular-nums;
}
/* while the live check runs the count is an em-dash — keep it visibly muted */
.rd-onb-hero[aria-busy="true"] .rd-onb-hero-n { color: var(--r-faint); }
.rd-onb-hero-of {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-meta);
  letter-spacing: .04em;
  color: var(--r-muted);
}
.rd-onb-hero-label {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--r-faint);
}
.rd-onb-hero-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.rd-onb-hero-copy {
  margin: 0;
  font-size: var(--r-fs-body);
  line-height: 1.55;
  color: var(--r-muted);
  max-width: 560px;
}

/* progress bar — fill width is set from the DERIVED count only */
.rd-onb-bar {
  position: relative;
  height: 8px;
  border-radius: var(--r-radius-pill);
  background: var(--r-seg-track);
  overflow: hidden;
}
.rd-onb-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: var(--r-radius-pill);
  background: var(--r-primary);
  transition: width .5s var(--r-ease);
}
/* indeterminate sweep while checks run — never a fake percentage */
.rd-onb-hero[aria-busy="true"] .rd-onb-bar-fill {
  width: 32%;
  opacity: .45;
  animation: rd-onb-sweep 1.4s var(--r-ease) infinite;
}
@keyframes rd-onb-sweep {
  from { transform: translateX(-110%); }
  to   { transform: translateX(330%); }
}
.rd-onb-hero-meta {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-meta);
  letter-spacing: .02em;
  color: var(--r-faint);
}

/* ---- checklist panel ------------------------------------------------------- */
.rd-onb-well {
  background: var(--r-canvas-raised);
  border: 1px solid var(--r-border);
  border-radius: 16px;
  box-shadow: var(--r-shadow-card);
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rd-onb-group { display: flex; flex-direction: column; }
.rd-onb-group-label {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--r-faint);
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--r-hairline);
}

/* ---- one connect row (the whole row is the ≥44px tap target) --------------- */
.rd-onb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 13px 6px;
  border-bottom: 1px solid var(--r-hairline-2);
  border-radius: var(--r-radius-control);
  cursor: pointer;
  transition: background var(--r-dur) var(--r-ease),
              transform var(--r-dur) var(--r-ease);
}
.rd-onb-group .rd-onb-row:last-child { border-bottom: 0; }
.rd-onb-row:hover { background: var(--r-well); }
.rd-onb-row:hover .rd-onb-title { color: var(--r-primary); }
.rd-onb-row:active { transform: scale(.997); }
.rd-onb-row:focus-visible { outline: var(--r-focus); outline-offset: 2px; }

/* icon chip — lights up (good tone) once the source is connected */
.rd-onb-ic {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-radius-control);
  background: var(--r-surface);
  border: 1px solid var(--r-hairline-2);
  color: var(--r-clay);
  font-size: 17px;
  transition: background var(--r-dur) var(--r-ease),
              color var(--r-dur) var(--r-ease),
              transform var(--r-dur) var(--r-ease);
}
.rd-onb-row:hover .rd-onb-ic { transform: translateY(-1px); }
.rd-onb-row[data-state="connected"] .rd-onb-ic {
  background: var(--r-mint-surface);
  border-color: color-mix(in srgb, var(--r-good) 22%, var(--r-hairline-2));
  color: var(--r-mint-ink);
}
/* done badge — small checkmark, ONLY on a settled "connected" result */
.rd-onb-row[data-state="connected"] .rd-onb-ic::after {
  content: "\2713";
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--r-good);
  color: var(--r-surface);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--r-surface);
}
/* warming badge — a small pulsing dot, distinct from done and not-connected */
.rd-onb-row[data-state="warming"] .rd-onb-ic::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--r-amber);
  border: 2px solid var(--r-surface);
  animation: rd-onb-pulse 1.3s var(--r-ease) infinite;
}

.rd-onb-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rd-onb-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rd-onb-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--r-ink);
  transition: color var(--r-dur) var(--r-ease);
}
/* the go-arrow surfaces on hover/focus — the title is a navigation affordance */
.rd-onb-go {
  font-size: 13px;
  color: var(--r-muted);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity var(--r-dur) var(--r-ease),
              transform var(--r-dur) var(--r-ease);
}
.rd-onb-row:hover .rd-onb-go,
.rd-onb-row:focus-visible .rd-onb-go { opacity: 1; transform: translateX(0); }

.rd-onb-unlocks {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--r-muted);
}
/* real config facts only (e.g. member count) — hidden when empty */
.rd-onb-detail {
  font-family: var(--r-font-mono);
  font-size: var(--r-fs-eyebrow);
  letter-spacing: .03em;
  color: var(--r-faint);
}
.rd-onb-detail:empty { display: none; }

/* how-to-connect line — shown ONLY while the source is not connected */
.rd-onb-how {
  display: none;
  font-size: 12px;
  line-height: 1.5;
  color: var(--r-faint);
}
.rd-onb-row[data-state="none"] .rd-onb-how { display: block; }

/* ---- status chips -----------------------------------------------------------
   Connected = good tone · Not connected = NEUTRAL (expected for a new tenant)
   · Warming up = amber · Checking = quiet pulse while probes run. */
.rd-onb-chip {
  flex: none;
  justify-self: end;
  font-family: var(--r-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--r-radius-pill);
  padding: 4px 11px;
  background: var(--r-well);
  color: var(--r-muted);
  border: 1px solid var(--r-hairline-2);
}
.rd-onb-chip[data-state="pending"] {
  color: var(--r-faint);
  animation: rd-onb-pulse 1.3s var(--r-ease) infinite;
}
@keyframes rd-onb-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
.rd-onb-chip[data-state="connected"] {
  background: var(--r-mint-surface);
  color: var(--r-mint-ink);
  border-color: color-mix(in srgb, var(--r-good) 24%, transparent);
}
.rd-onb-chip[data-state="warming"] {
  background: color-mix(in srgb, var(--r-amber) 14%, transparent);
  color: color-mix(in srgb, var(--r-amber) 72%, var(--r-ink));
  border-color: color-mix(in srgb, var(--r-amber) 30%, transparent);
}
/* Not connected keeps the neutral base look — deliberately NOT an alert. */

/* ---- trust footnote ---------------------------------------------------------- */
.rd-onb-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-shadow-card);
  padding: 14px 20px;
}
.rd-onb-trust-copy {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--r-muted);
  min-width: 0;
}
.rd-onb-trust-copy i {
  flex: none;
  font-size: 15px;
  color: var(--r-mint-ink);
  transform: translateY(2px);
}
.rd-onb-trust-link {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 12px;
  border-radius: var(--r-radius-control);
  font-size: 13px;
  font-weight: 600;
  color: var(--r-primary);
  cursor: pointer;
  transition: background var(--r-dur) var(--r-ease);
}
.rd-onb-trust-link:hover { background: var(--r-well); }
.rd-onb-trust-link:hover i { transform: translateX(2px); }
.rd-onb-trust-link i { transition: transform var(--r-dur) var(--r-ease); }
.rd-onb-trust-link:focus-visible { outline: var(--r-focus); outline-offset: 2px; }

/* ---- responsive ---------------------------------------------------------------- */
@media (max-width: 980px) {
  .rd-onb-hero { grid-template-columns: 1fr; gap: 16px; }
  .rd-onb-hero-main {
    padding-right: 0;
    border-right: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--r-hairline);
  }
  .rd-onb-trust { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* 390px-class phones: single column, chip drops under the copy, targets ≥44px */
@media (max-width: 720px) {
  .rd-onb-row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 10px;
    padding: 14px 4px;
  }
  .rd-onb-chip {
    grid-column: 2;
    justify-self: start;
  }
  .rd-onb-hero { padding: 18px 18px; }
  .rd-onb-hero-n { font-size: 34px; }
  .rd-onb-well { padding: 14px 14px 16px; }
}

/* ---- S12/A3: tenant provisioning wizard (platform admins only) ------------------- */
.rd-onb-wiz {
  background: var(--r-canvas-raised);
  border: 1px solid var(--r-border);
  border-radius: 16px;
  box-shadow: var(--r-shadow-card);
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rd-onb-wiz-sub { margin: 0; font-size: var(--r-fs-meta); color: var(--r-muted); line-height: 1.5; max-width: 70ch; }
.rd-onb-wiz-form { display: flex; flex-direction: column; gap: 14px; }
.rd-onb-wiz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.rd-onb-wiz-field { display: flex; flex-direction: column; gap: 5px; font-size: var(--r-fs-meta); color: var(--r-muted); font-weight: 500; }
.rd-onb-wiz-in {
  font: inherit;
  font-size: var(--r-fs-body);
  color: var(--r-ink);
  background: var(--r-canvas);
  border: 1px solid var(--r-border);
  border-radius: 10px;
  padding: 9px 12px;
  min-height: 40px;
}
.rd-onb-wiz-in:focus-visible { outline: 2px solid var(--r-focus); outline-offset: 1px; }
.rd-onb-wiz-depts { border: 1px solid var(--r-hairline); border-radius: 12px; padding: 10px 14px 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rd-onb-wiz-depts legend { font-family: var(--r-font-mono); font-size: var(--r-fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--r-faint); padding: 0 4px; }
.rd-onb-wiz-dept { display: inline-flex; align-items: center; gap: 7px; font-size: var(--r-fs-meta); color: var(--r-ink); min-height: 28px; cursor: pointer; }
.rd-onb-wiz-actions { display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.rd-onb-wiz-note { font-size: var(--r-fs-meta); color: var(--r-faint); max-width: 56ch; line-height: 1.45; }
.rd-onb-wiz-go {
  font: inherit;
  font-size: var(--r-fs-body);
  font-weight: 600;
  color: var(--r-on-primary, var(--r-canvas));
  background: var(--r-primary);
  border: 1px solid var(--r-primary);
  border-radius: 10px;
  padding: 10px 20px;
  min-height: 44px;
  cursor: pointer;
  transition: filter .15s var(--r-ease);
}
.rd-onb-wiz-go:hover { filter: brightness(1.08); }
.rd-onb-wiz-go:focus-visible { outline: 2px solid var(--r-focus); outline-offset: 2px; }
.rd-onb-wiz-go[disabled] { opacity: .6; cursor: default; }
.rd-onb-wiz-result { border-radius: 12px; }
.rd-onb-wiz-ok, .rd-onb-wiz-err { border: 1px solid var(--r-border); border-radius: 12px; padding: 12px 16px; font-size: var(--r-fs-meta); color: var(--r-ink); }
.rd-onb-wiz-ok ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--r-muted); }
.rd-onb-wiz-ok .rd-onb-wiz-next { margin-top: 8px; color: var(--r-muted); }
.rd-onb-wiz-err { border-color: color-mix(in srgb, var(--r-alert) 45%, transparent); }
.rd-onb-wiz-err div { margin-top: 4px; color: var(--r-muted); }
.rd-onb-wiz-list { display: flex; flex-direction: column; }
.rd-onb-wiz-list-label { font-family: var(--r-font-mono); font-size: var(--r-fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--r-faint); padding: 4px 0 8px; border-bottom: 1px solid var(--r-hairline); }
.rd-onb-wiz-rows { font-size: var(--r-fs-meta); color: var(--r-muted); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.rd-onb-wiz-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; }
.rd-onb-wiz-slug { font-family: var(--r-font-mono); color: var(--r-ink); }
.rd-onb-wiz-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-onb-wiz-meta { color: var(--r-faint); }
@media (max-width: 720px) {
  .rd-onb-wiz { padding: 14px 14px 16px; }
  .rd-onb-wiz-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-onb-wiz-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rd-onb-wiz-row .rd-onb-wiz-meta:nth-child(3) { display: none; }
}

/* ---- entrance motion ------------------------------------------------------------- */
@keyframes rd-onb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rd-onb > * { animation: rd-onb-rise .36s var(--r-ease) both; }

/* ---- reduced motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rd-onb-hero[aria-busy="true"] .rd-onb-bar-fill,
  .rd-onb-chip[data-state="pending"],
  .rd-onb-row[data-state="warming"] .rd-onb-ic::after,
  .rd-onb > * { animation: none; }
  .rd-onb-bar-fill,
  .rd-onb-go,
  .rd-onb-wiz-go,
  .rd-onb-row,
  .rd-onb-ic,
  .rd-onb-title,
  .rd-onb-trust-link i { transition: none; }
}