/* =========================================================
   DNUV W8 / U18 — Onboarding wizard styles
   ---------------------------------------------------------
   Renders into #route-root (kit/Onboarding.js). The shell is
   a 720px-centered card on desktop with a sidebar list of
   steps on the left and the step body + footer on the right.

   Mobile: collapses to a single column below 760px. The
   sidebar becomes a horizontal stepper at the top.

   R389 (C24) — REWRITE. This file previously referenced a
   phantom token namespace (--primary / --bg-1/2/3 / --fg-1..3
   misused / --success / --info / --text / --surface / --muted /
   --accent / --border / --bg-soft …) that does NOT exist in
   colors_and_type.css, so every rule fell through to its
   hardcoded LIGHT-mode hex fallback and the whole wizard was
   unreadable in dark mode (white-on-white). Every surface, text,
   border and semantic colour now consumes the REAL design-system
   tokens (--bg-app/-surface/-sunken/-2, --fg-1..4,
   --color-primary/-success/-info/-warn/-danger + their -bg/-fg
   variants, --border-1, --dnuv-blue-50, --gray-*, --radius-*,
   --space-*, --fs-*, --shadow-*, --dur-* and --ease-*, --ring-focus)
   so the wizard themes correctly in Claro / Escuro / Sistema.

   The only intentional hardcoded literals are `color:#fff` /
   `#FFFFFF` on FILLED primary/success chips (the design-system
   guarantees AA for white-on-(--color-primary/--color-success))
   and the always-dark video/code stages, which are tokenised to
   the --gray-* ramp so their contrast holds.
   ========================================================= */

.onb-shell {
  /* Fullscreen mobile, centered card desktop. We use a flex
     layout so the sidebar + main panel can have independent
     scroll regions. */
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: inherit;
}

@media (max-width: 760px) {
  .onb-shell {
    flex-direction: column;
  }
}

/* ---------- Full-page route (Wave-F #1) ----------
   The wizard ships its OWN sidebar + footer, so on /onboarding the app shell's
   chrome must be hidden or the user sees DOUBLE chrome (app rail + wizard rail,
   appbar + wizard header). app.js stamps body.onboarding-route on enter/exit
   (mirroring the body.print-route pattern); these rules hide the shell chrome
   and make .onb-shell own the full viewport — i.e. the viewport height minus
   the (now-hidden) chrome. The selectors target the served shell ids in
   index.html: #sidebar (the rail), #appbar-host (the topbar), #app-footer-host
   (the footer). Scoped to the on-screen route only; the standalone-kit preview
   (which renders the wizard without the app shell) is unaffected. */
body.onboarding-route #sidebar,
body.onboarding-route #appbar-host,
body.onboarding-route #app-footer-host,
body.onboarding-route .sidebar-backdrop {
  display: none !important;
}

/* Collapse the 2-column app grid to a single column so the hidden 260px rail
   track doesn't leave an empty gutter beside the wizard. */
body.onboarding-route .app {
  display: block;
}

/* With the appbar + footer gone, #route-root is the only child of .main; pin the
   wizard shell to the full viewport so its sidebar + body scroll independently
   and there's no page-level scrollbar. dvh tracks mobile browser chrome. */
body.onboarding-route .main,
body.onboarding-route .main > #route-root {
  min-height: 100vh;
  min-height: 100dvh;
}

body.onboarding-route .onb-shell {
  height: 100vh;
  height: 100dvh;
  /* Cap the inner scroll regions to the shell height (sidebar list + step body
     each scroll on their own) instead of letting the page grow past the fold. */
  overflow: hidden;
}

/* ---------- Sidebar (step list) ---------- */
.onb-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-1);
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* On the full-page route the shell is overflow:hidden + 100dvh; let the step
     list scroll on its own (min-height:0 lets this flex child shrink below its
     content) so a short viewport never clips the lower steps. */
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 760px) {
  .onb-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-1);
    padding: var(--space-3);
  }
}

.onb-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 16px;
}

.onb-logo {
  height: 40px;
  width: auto;
}

.onb-step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 760px) {
  .onb-step-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x mandatory;
  }
}

.onb-step-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

@media (max-width: 760px) {
  .onb-step-item {
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

.onb-step-item:hover:not(:disabled) {
  background: var(--bg-sunken);
}

.onb-step-item:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.onb-step-item.active {
  /* F-DARK: --dnuv-blue-tint is the purpose-built active-card wash (= --dnuv-blue-50
     in light mode, a translucent sky in dark) — use it instead of --dnuv-blue-50,
     which historically read as bright white on the dark shell. */
  background: var(--dnuv-blue-tint);
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: var(--fw-600);
}

.onb-step-item.done {
  color: var(--color-success-fg);
}

.onb-step-item.stub {
  opacity: 0.5;
  cursor: not-allowed;
}

.onb-step-item.stub small {
  font-size: var(--fs-xs);
  opacity: 0.8;
}

.onb-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-sunken);
  font-weight: var(--fw-700);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.onb-step-item.active .onb-step-num {
  background: var(--color-primary);
  color: #FFFFFF;
}

.onb-step-item.done .onb-step-num {
  background: var(--color-success);
  color: #FFFFFF;
}

.onb-step-item.done .onb-step-num i {
  width: 14px;
  height: 14px;
}

.onb-step-label {
  flex: 1;
}

/* ---------- Main panel ---------- */
.onb-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Lets the .onb-body flex child shrink below its content height so its
     overflow-y:auto engages inside the fixed-height (100dvh) full-page shell
     instead of pushing the footer off-screen. */
  min-height: 0;
}

.onb-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-12);
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
  /* Vertically center the step content: the body is a tall flex column with a
     single .onb-step child, and the child uses margin-block:auto to sit in the
     middle when it's short (fixes the "giant empty white area" with the welcome
     copy pinned to the top). When the step is taller than the body the auto
     margins collapse and overflow-y:auto scrolls normally — no clipping. */
  display: flex;
  flex-direction: column;
}

@media (max-width: 760px) {
  .onb-body {
    padding: var(--space-6) var(--space-4);
  }
}

.onb-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Center within the tall .onb-body when short; collapses to 0 (top-aligned +
     scroll) when the step is taller than the viewport. flex-shrink:0 keeps the
     content from being squeezed by the auto margins on very short viewports. */
  margin-block: auto;
  flex-shrink: 0;
}

.onb-h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-700);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
  color: var(--fg-1);
}

@media (max-width: 760px) {
  .onb-h1 {
    font-size: var(--fs-2xl);
  }
}

.onb-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-2);
}

.onb-hint {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  margin-top: 4px;
}

/* ---------- Step 1 — Welcome ---------- */
.onb-step-welcome {
  text-align: center;
}

.onb-step-welcome .onb-h1 {
  font-size: var(--fs-4xl);
}

.onb-value-props {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.onb-value-props > li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
}

.onb-prop-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  /* F-DARK: dark-aware brand tint (was --dnuv-blue-50 → bright white on dark). */
  background: var(--dnuv-blue-tint);
  color: var(--color-primary);
}

.onb-value-props h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-700);
  margin: 0 0 4px;
}

.onb-value-props p {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  margin: 0;
  line-height: var(--lh-relaxed);
}

/* ---------- Step 2 — Org form ---------- */
.onb-form .field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-5);
}

.onb-form label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  color: var(--fg-2);
  margin-bottom: 6px;
}

.onb-form label small {
  font-weight: var(--fw-400);
  color: var(--fg-3);
  margin-left: 4px;
}

.onb-cnpj-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--color-info-bg);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-xs);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.onb-cnpj-banner i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.onb-cnpj-banner a {
  color: var(--color-primary);
  text-decoration: underline;
}

.onb-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.onb-logo-preview {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  background: var(--bg-sunken);
  border: 1px dashed var(--border-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  overflow: hidden;
}

.onb-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Step 3 — Plan ---------- */
.onb-plan-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-section);
  padding: 24px;
  margin-top: 16px;
}

.onb-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 16px;
}

.onb-plan-head h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-700);
  margin: 4px 0 0;
}

.onb-plan-badge {
  display: inline-block;
  padding: 3px 8px;
  background: var(--color-success-bg);
  color: var(--color-success-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-xs);
}

.onb-plan-quotas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.onb-plan-quotas > li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.onb-plan-quotas i {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  margin-top: 2px;
}

.onb-plan-quotas b {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-700);
  margin-bottom: 2px;
}

.onb-plan-quotas span {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.onb-plan-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-1);
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.onb-plan-foot a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Inline anchor-as-button for in-app nav inside body copy. The kit's
   convention is <button onclick="go(...)"> for navigation (the global <a>
   rule is dormant insurance), so render the button to read like the
   surrounding link text without a spurious history hash. */
.onb-inline-link {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.onb-inline-link:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: 2px;
}

/* ---------- Step 4 — Server ---------- */
.onb-os-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-1);
  margin: 16px 0;
}

.onb-os-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-600);
  color: var(--fg-3);
  cursor: pointer;
  font-family: inherit;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

.onb-os-tab:hover {
  color: var(--fg-1);
}

.onb-os-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.onb-os-tab:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.onb-os-tab i {
  width: 16px;
  height: 16px;
}

.onb-os-steps {
  padding-left: 20px;
  margin: 0 0 12px;
  font-size: var(--fs-base);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

.onb-os-steps li {
  margin-bottom: 6px;
}

.onb-os-steps a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Install-command block. Intentionally an always-dark surface (a terminal
   reads best on a near-black field in either theme) but tokenised to the
   --gray-* ramp so the contrast pair is design-system-owned, not raw hex. */
.onb-code {
  background: var(--gray-900);
  color: var(--gray-50);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  overflow-x: auto;
  margin: 0 0 8px;
  word-break: break-all;
  white-space: pre-wrap;
}

.onb-code code {
  font-family: inherit;
}

/* ---------- Status banners (success / waiting / error) ---------- */
.onb-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  margin-top: 16px;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.onb-status b {
  display: block;
  font-weight: var(--fw-700);
  margin-bottom: 2px;
}

.onb-status span {
  color: inherit;
  opacity: 0.85;
  font-size: var(--fs-sm);
}

.onb-status i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.onb-status-ok {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
  border: 1px solid var(--color-success);
}

.onb-status-wait {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
  border: 1px solid var(--color-info);
}

/* Error/danger banner — the step-4 token generation can fail; this gives
   the status component the danger variant it was missing for parity. */
.onb-status-err {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
  border: 1px solid var(--color-danger);
}

.onb-spin {
  animation: onb-spin-rotate 1.2s linear infinite;
}

@keyframes onb-spin-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .onb-spin {
    animation: none;
  }
}

/* ---------- Step 5 — Camera options ---------- */
.onb-cam-options {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.onb-cam-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-card);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.onb-cam-option:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card-hover);
}

.onb-cam-option:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.onb-cam-option > i {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.onb-cam-option > div {
  flex: 1;
}

.onb-cam-option b {
  display: block;
  font-weight: var(--fw-700);
  font-size: var(--fs-base);
  margin-bottom: 2px;
}

.onb-cam-option span {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

.onb-tag {
  display: inline-block;
  padding: 3px 8px;
  /* F-DARK: dark-aware brand tint (was --dnuv-blue-50 → bright white on dark). */
  background: var(--dnuv-blue-tint);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-700);
  border-radius: var(--radius-xs);
}

/* Camera empty-state (no edge connected). The shared `.empty-state` rule
   (index.html) already supplies the padding/typography; this only colours
   the alert glyph via the real warn token (was an inline
   `style="color:var(--warn,#B7791F)"` against a phantom token). */
.onb-empty-warn {
  color: var(--color-warn);
}

.onb-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ---------- Footer (Voltar / Skip / Próximo + progress) ---------- */
.onb-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 48px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-1);
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .onb-foot {
    padding: 12px 16px;
  }
}

.onb-foot-left,
.onb-foot-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.onb-foot-mid {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 200px;
}

@media (max-width: 760px) {
  .onb-foot-mid {
    order: -1;
    width: 100%;
    flex-basis: 100%;
  }
}

.onb-progress {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 8px;
  background: var(--bg-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
  /* Reserve room below the 8px bar for the absolutely-positioned text label
     so it never collides with the footer buttons on the mobile stack. */
  margin-bottom: 22px;
}

.onb-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 8px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .onb-progress-fill {
    transition: none;
  }
}

.onb-progress-label {
  position: absolute;
  inset: auto 0 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

@media (max-width: 760px) {
  .onb-progress {
    margin-bottom: 22px;
  }
}

/* ---------- Topbar mini-banner ---------- */
/* The "Continuar configuração" pill shown in the topbar when the user
   has dismissed/paused the wizard. Lives in Topbar.js.

   #41 — restyled to match the appbar chip family (.ab-chip / .ab-icon /
   .ab-quick in index.html): 38px tall, 10px radius, neutral --bg-surface on a
   --border-1 line, so it sits flush with the org chip / bell / "Novo" buttons
   instead of the short full-pill with a bright tint that destoava. It stays
   noticeable via the primary-blue label + sparkles icon; hover adds the
   dark-aware --dnuv-blue-tint wash + a primary border to read as interactive. */
.onb-continue-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--control-h, 38px);
  padding: 0 12px;
  background: var(--bg-surface);
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-600);
  border-radius: 10px;
  border: 1px solid var(--border-1);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.onb-continue-pill:hover {
  background: var(--dnuv-blue-tint);
  border-color: var(--color-primary);
}

.onb-continue-pill:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.onb-continue-pill i {
  width: 14px;
  height: 14px;
}

/* ---------- R321 — Steps 6-9 styles (reconciled from PR #578) ---------- */

/* ---------- Step 6 — player stage ---------- */

/* Intentionally an always-dark media surface (video reads best on near-black
   in either theme). Tokenised to the --gray-* ramp so the placeholder/chip
   contrast is design-system-owned. */
.onb-player-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--gray-900);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onb-player-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.onb-player-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--gray-400);
}

.onb-player-placeholder i {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

.onb-player-text {
  font-size: var(--fs-sm);
  color: var(--gray-300);
}

.onb-transport-chip {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  /* Raise the scrim opacity (a11y W2 #10) so the chip text clears AA even
     when it overlaps a bright video frame. */
  background: rgba(15, 23, 42, 0.85);
  border-radius: var(--radius-pill);
  color: var(--gray-200);
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.onb-transport-chip i {
  width: 14px;
  height: 14px;
}

.onb-confirm-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
}

.onb-q {
  font-weight: var(--fw-600);
  color: var(--fg-1);
  margin: 0 12px 0 0;
  font-size: var(--fs-md);
}

/* ---------- Step 7 — inline rule form ---------- */

.onb-inline-form {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  padding: 0;
  margin-bottom: 14px;
  background: var(--bg-sunken);
}

.onb-inline-form-summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: var(--fw-600);
  color: var(--fg-1);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.onb-inline-form-summary::-webkit-details-marker { display: none; }

.onb-inline-form[open] > .onb-inline-form-summary {
  border-bottom: 1px solid var(--border-1);
}

.onb-inline-form > form {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onb-rule-created {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-success-bg);
  color: var(--color-success-fg);
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-base);
  margin-bottom: 12px;
}

.onb-rule-created i { width: 18px; height: 18px; }

/* ---------- Step 8 — invite list ---------- */

.onb-invite-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.onb-invite-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
}

.onb-invite-row .field { margin: 0; }

.onb-invite-row .field label.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.onb-invite-row .input { width: 100%; }

.onb-invite-status {
  font-size: var(--fs-sm);
  font-weight: var(--fw-500);
  min-width: 90px;
  text-align: right;
  color: var(--fg-3);
}

.onb-invite-status-pending { color: var(--color-info-fg); }
.onb-invite-status-ok { color: var(--color-success-fg); }
.onb-invite-status-err { color: var(--color-danger-fg); }

.onb-invite-remove {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onb-invite-remove:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.onb-invite-add { margin-bottom: 12px; }

.onb-invite-status-region {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  margin-top: 8px;
  min-height: 1.5em;
}

/* ---------- Step 9 — Finish (confetti + summary) ---------- */

.onb-step-finish {
  position: relative;
  overflow: hidden;
}

.onb-confetti-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.onb-confetti {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 14px;
  background: var(--c, var(--dnuv-blue-light));
  border-radius: 2px;
  transform-origin: center;
  animation: onb-confetti-fall var(--d, 2s) linear var(--dy, 0s) forwards;
  opacity: 0.9;
  z-index: 0;
}

@keyframes onb-confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translateY(640px) rotate(var(--r, 360deg)); opacity: 0; }
}

.onb-fin-static {
  text-align: center;
  font-size: 72px;
  margin: 12px 0 8px;
}

.onb-fin-hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 8px 0 18px;
}

.onb-fin-check {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--dnuv-success), var(--color-success));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 6px 16px rgba(15, 186, 129, 0.25);
}

.onb-fin-check i { width: 32px; height: 32px; stroke-width: 3; }

.onb-fin-title { margin-bottom: 6px; }

.onb-summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  background: var(--bg-sunken);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-1);
  margin: 18px 0;
}

.onb-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--bg-surface);
  border-radius: var(--radius-xs);
}

.onb-summary-row i {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.onb-summary-k {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  font-weight: var(--fw-500);
}

.onb-summary-v {
  font-size: var(--fs-md);
  font-weight: var(--fw-600);
  color: var(--fg-1);
}

.onb-fin-foot { position: relative; z-index: 1; }

@media (max-width: 640px) {
  .onb-invite-row {
    /* Stack into a single column. `remove` sits on its own row, right-
       aligned — no negative-margin hack (was margin-top:-78px, which
       overlapped the inputs on taller locales/zoom and hid the control). */
    grid-template-columns: 1fr;
    grid-template-areas:
      "email"
      "role"
      "status"
      "remove";
    padding: 12px;
  }
  .onb-invite-row .onb-invite-email { grid-area: email; }
  .onb-invite-row .onb-invite-role { grid-area: role; }
  .onb-invite-row .onb-invite-status {
    grid-area: status; text-align: left; min-width: 0;
  }
  .onb-invite-row .onb-invite-remove {
    grid-area: remove; justify-self: end;
  }
  .onb-summary { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .onb-confetti { animation: none !important; display: none !important; }
}