/* ===========================================================================
   First-sign-in onboarding — the step strip, body and closing summary of the
   operator's walk and the org admin's, and the .onb-status row the settings screen
   also draws, through screens/afterFilingSettings.js, with no guard of its own.

   Linked by index.html, render-blocking, with the data-if-sheet="onboarding"
   marker screens/onboarding.js guards on before linking it as the fallback, so
   a screen still cannot ship without its styling. screens/org.js calls the
   same guard before drawing its walk with these classes, and the module's href
   is resolved against its own URL, so it stays inside the versioned bundle.

   Every value comes from the token set in styles.css; the pixels left are hairline
   rules and one column floor. The walk is the first screen a new account sees, so it
   is the app's own fields, rows and step discs rather than a welcome language of its
   own: what it teaches has to look like the product the operator lands in when it ends.
   =========================================================================== */

.onb { gap: 0; }
.onb-steps {
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center;
  margin: 0 0 var(--space-4); padding: 0; list-style: none;
  font-size: var(--text-xs); color: var(--ink-muted);
}
.onb-step { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); border: 1px solid var(--rule); }
.onb-step.is-current { color: var(--ink-strong); border-color: var(--accent); background: var(--accent-surface); }
.onb-step.is-done { color: var(--state-done-fg); border-color: var(--state-done-rule); }
.onb-body { display: flex; flex-direction: column; gap: var(--space-3); }
.onb-lede { margin: 0; color: var(--ink); max-width: var(--prose-max); line-height: var(--leading-loose); }
.onb-status { display: flex; gap: var(--space-2); }
.onb-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--ink); }
.onb-list--rows { flex-direction: column; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden; }
.onb-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--row-pad-y-dense) var(--row-pad-x-dense); border-top: 1px solid var(--rule); }
.onb-row:first-child { border-top: 0; }
.onb-row-name { min-width: 0; overflow-wrap: anywhere; }
.onb-track { margin-bottom: var(--space-1); }
.onb-shop .settings-sec-head { display: none; }
.onb-display { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.onb-done { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-4) 0; }
.onb-done-icon { background: var(--state-done-bg); color: var(--state-done-fg); }
.onb-done-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-strong); }
.onb-summary { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); color: var(--ink); }

/* .settings-sec-head is also the section heading screens/adminPlatform.js and
   screens/orgAccess.js draw on the Administration and Organisation panels. */