/* Getting-started wizard (TKF-305). Rendered inside core/dialog.js's card, so
   the overlay, the backdrop and the card chrome are already themed — this is
   only what goes inside it. */

.ob-w { max-width: 460px; }

/* Progress rail. The dots are the four steps and they are clickable, because a
   rider who wants to look ahead should not have to click Next past the step
   they are on to do it. */
.ob-w-rail { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.ob-w-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg3); cursor: pointer; flex: 0 0 auto;
}
.ob-w-dot:hover { box-shadow: 0 0 0 3px rgba(var(--amber-wash), .18); }
.ob-w-dot.done { background: var(--amber); }
.ob-w-dot.at   { background: var(--txt); box-shadow: 0 0 0 3px rgba(var(--amber-wash), .22); }
.ob-w-of { margin-left: auto; font-size: var(--fs-micro); color: var(--dim);
           text-transform: uppercase; letter-spacing: .04em; }

.ob-w-title { margin: 0 0 6px; font-size: var(--fs-md); font-weight: 600; }
.ob-w-done {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 7px; border-radius: 9px; vertical-align: 2px;
  background: rgba(var(--amber-wash), .16); color: var(--on-amber-wash);
}
.ob-w-lede { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--dim); line-height: 1.55; }

/* One button per route to the step's goal. Stacked rather than in a row: they
   are alternatives with different costs, not a segmented control, and the hint
   under each is what tells them apart. */
.ob-w-opts { display: flex; flex-direction: column; gap: 8px; }
.ob-w-opt {
  display: block; width: 100%; text-align: left;
  background: var(--bg2); border: 1px solid var(--bdr2); border-radius: 9px;
  padding: 10px 12px; cursor: pointer; font-family: inherit;
}
.ob-w-opt:hover { background: var(--bg3); border-color: var(--amber-ink); }
.ob-w-opt-l { display: block; font-size: var(--fs-sm); color: var(--txt); }
.ob-w-opt-h { display: block; font-size: var(--fs-xs); color: var(--dim); margin-top: 3px; line-height: 1.5; }

.ob-w-nav { display: flex; gap: 8px; margin-top: 16px; }
.ob-w-btn {
  background: var(--bg2); border: 1px solid var(--bdr2); color: var(--txt);
  border-radius: 8px; padding: 7px 14px; font-size: var(--fs-sm);
  font-family: inherit; cursor: pointer;
}
.ob-w-btn:hover:not(:disabled) { background: var(--bg3); }
.ob-w-btn:disabled { opacity: .45; cursor: default; }
.ob-w-next { margin-left: auto; background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.ob-w-next:hover:not(:disabled) { filter: brightness(1.08); background: var(--amber); }