/* Onboarding and standalone pages: a sticky bar with the logo and the steps, one floating frame below it. */

.onb-shell { display: flex; flex-direction: column; min-height: 100vh; }

.onb-topbar {
  zoom: var(--stage-zoom);
  position: sticky; top: calc(var(--banner-h, 0px) / var(--stage-zoom, 1)); z-index: 90; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 12px 28px;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
}
.onb-topbar { --logo-h: 18px; }
.onb-topbar-actions { display: flex; align-items: center; gap: 8px; }

/* The step labels sit in the centre of the bar; the current step is brand coloured. */
.onb-topbar-steps { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 760px; }
.onb-topbar-steps .srail { margin: 0; padding: 0; }
.onb-topbar-steps .srail .dot, .onb-topbar-steps .onb-dot { display: none; }
.onb-topbar-steps .srail .lbl, .onb-topbar-steps .onb-lbl { font-size: var(--fs-s); font-weight: 500; color: var(--ink-4); white-space: nowrap; }
.onb-topbar-steps .srail .s.done .lbl, .onb-topbar-steps .onb-step.done .onb-lbl { color: var(--ink-2); }
.onb-topbar-steps .srail .s.now .lbl, .onb-topbar-steps .onb-step.now .onb-lbl { color: var(--brand-text); font-weight: 600; }
.onb-topbar-steps .onb-step.ok .onb-lbl { color: var(--ok); }
.onb-topbar-steps .srail .bar { min-width: 12px; margin: 0 10px; }
.onb-topbar-steps .onb-steps { margin: 0; max-width: none; align-items: center; }
.onb-topbar-steps .onb-step { flex-direction: row; gap: 8px; min-width: 0; }
.onb-topbar-steps .onb-bar { flex: none; width: 24px; min-width: 0; margin: 0 12px; }

.onb-stage { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: calc(28px * var(--stage-zoom)) 16px; }
.onb-wrap {
  zoom: var(--stage-zoom);
  display: flex; flex-direction: column; flex: 0 1 1180px; width: 100%; max-width: 1180px; min-width: 0; margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--sh-float);
}
.onb-wrap.wide { flex-basis: 1360px; max-width: 1360px; }
.onb-wrap.narrow { flex-basis: 720px; max-width: 720px; }
.onb-body { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 30px 34px 36px; }
.onb-body > * { width: 100%; }

/* Dot stepper, used above the plans during onboarding. */
.onb-steps { display: flex; align-items: flex-start; justify-content: center; width: 100%; max-width: 640px; margin: 0 auto 22px; }
.onb-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; min-width: 78px; }
.onb-dot { display: block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--panel); transition: background .2s ease, border-color .2s ease; }
.onb-step.now .onb-dot, .onb-step.done .onb-dot { background: var(--brand); border-color: var(--brand); }
.onb-step.now .onb-dot { box-shadow: var(--focus-ring); }
.onb-step.ok .onb-dot { background: var(--ok); border-color: var(--ok); }
.onb-lbl { font-size: var(--fs-2xs); font-weight: 600; line-height: 1.35; text-align: center; color: var(--ink-4); }
.onb-step.now .onb-lbl { color: var(--ink); }
.onb-step.done .onb-lbl { color: var(--ink-3); }
.onb-step.ok .onb-lbl { color: var(--ok); }
.onb-bar { flex: 1; min-width: 26px; height: 2px; margin-top: 4px; border-radius: 2px; background: var(--line); }
.onb-bar.fill { background: var(--brand); }

.onb-plans-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.onb-plans-head h3 { font-size: var(--fs-xl); font-weight: 700; }
.onb-plans-head .sub { max-width: 70ch; margin: 4px 0 0; font-size: var(--fs-s); color: var(--ink-3); }
.onb-plans-head .pill { margin-top: 2px; }
.onb-skip { margin: 22px 0 0; text-align: center; font-size: var(--fs-s); color: var(--ink-3); }
.onb-skip a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.onb-panel { width: min(100%, 520px); margin-inline: auto; }
.onb-locked-system { display: flex; align-items: center; gap: 10px; min-height: 42px; background: var(--panel-2); }
.onb-locked-system .pill { margin-left: auto; }
.onb-wrap .srail { max-width: 980px; margin: 0 auto; }
.onb-wrap .setup { max-width: none; }
.onb-wrap .reviewlist { max-width: 720px; }

/* Hidden before the first paint so the entrance does not flash in twice; shown anyway after 2s if the script never runs. */
.onb-enter .onb-body > :not(script),
.onb-enter .onb-topbar-steps > * { opacity: 0; animation: onb-reveal 0s 2s forwards; }
@keyframes onb-reveal { to { opacity: 1; } }

@media (max-width: 1100px) {
  .onb-topbar-steps .srail .lbl, .onb-topbar-steps .onb-lbl { display: none; }
  .onb-topbar-steps .srail .s.now .lbl, .onb-topbar-steps .onb-step.now .onb-lbl { display: block; }
}

@media (max-width: 700px) {
  .onb-topbar { padding: 10px 14px; }
  .onb-topbar-steps { display: none; }
  .onb-stage { padding: 12px; }
  .onb-wrap, .onb-wrap.wide, .onb-wrap.narrow { max-width: none; border-radius: var(--r-l); }
  .onb-body { padding: 20px 16px 28px; }
  .onb-step { min-width: 62px; }
  .onb-bar { min-width: 12px; }
}

@media (max-width: 560px) {
  .onb-topbar { --logo-h: 14px; }
  .onb-topbar-actions .onb-request { display: none; }
  .onb-step { min-width: 50px; }
  .onb-bar { min-width: 8px; }
}