/* Asset onboarding ladder. Tokens only; every canonical component
   (.btn, .pill, .card, .field, .panel) comes from base.css unchanged. */
.onboard-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* The template choice governs every field above it, and its note is a
   sentence rather than a hint, so it gets the row rather than a column. */
.onboard-grid > .onboard-wide { grid-column: 1 / -1; }

.onboard-ladder { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.onboard-stage {
  display: grid; gap: var(--sp-2) var(--sp-4);
  grid-template-columns: auto 1fr;
  padding: var(--sp-4); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--bg-sunk);
}
.onboard-stage > .pill { grid-row: 1 / span 2; align-self: start; }
.onboard-stage h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.onboard-stage > div { grid-column: 2; }
.onboard-stage p { margin: 0 0 var(--sp-2); }
.onboard-stage p:last-child { margin-bottom: 0; }
.onboard-detail { color: var(--fg-muted); font-size: var(--fs-sm); }
.onboard-why { color: var(--fg-muted); font-size: var(--fs-xs); border-left: 2px solid var(--border); padding-left: var(--sp-3); }
.onboard-needs { font-size: var(--fs-sm); }

/* Commands are copied and pasted into a terminal, so they wrap rather than
   scroll: a truncated command is a command run wrong. */
.onboard-command {
  font-family: var(--mono); font-size: var(--fs-xs);
  white-space: pre-wrap; overflow-wrap: anywhere;
  margin: 0 0 var(--sp-2); padding: var(--sp-3);
  background: var(--bg); border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
}
.onboard-json {
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
  margin: 0; padding: var(--sp-4);
  background: var(--bg-sunk); border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
}
.onboard-copy { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }

@media (max-width: 560px) {
  .onboard-stage { grid-template-columns: 1fr; }
  .onboard-stage > .pill { grid-row: auto; justify-self: start; }
  .onboard-stage > div { grid-column: 1; }
}