.new-onboarding .top {
  position: relative;
  z-index: 50;
  padding: 10px 24px 0;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 1s;
}

@media (min-height: 700px) {
  .new-onboarding .top { padding-top: 16px; }
}
.new-onboarding .top.show { opacity: 1 }
.new-onboarding .top.on-coral {
  background: transparent;
  padding-bottom: 12px;
}
.new-onboarding .top.on-coral .bk {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .18);
}
.new-onboarding .top.on-coral .bk svg { color: #fff }
.new-onboarding .top.on-coral .ptr { background: rgba(255, 255, 255, .2) }
.new-onboarding .top.on-coral .pf { background: #fff }

.new-onboarding .nav {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
}

.new-onboarding .bk {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.new-onboarding .bk:active { transform: scale(.92) }
.new-onboarding .bk svg { width: 18px; height: 18px; color: var(--text-primary) }

.new-onboarding .ptr {
  flex: 1;
  height: 3px;
  background: var(--sand);
  border-radius: 2px;
  overflow: hidden;
}

.new-onboarding .pf {
  height: 100%;
  background: var(--coral);
  border-radius: 2px;
  transition: width 1s cubic-bezier(.4, 0, .2, 1);
}

/* Onboarding::StepsController's `ob-back` icon (app/views/onboarding/steps/show.html.erb).
   The rest of the 32-screen flow's `.ob-*` markup is intentionally unstyled pending a
   later visual pass, but this one is a functional bug, not a cosmetic gap: the <svg>
   has a viewBox but no width/height, so with nothing else constraining it Chrome sizes
   it to the full viewport width and matches the height to the (square) viewBox aspect
   ratio — a ~1400x1400px icon that pushes every screen's Continue button off-screen.
   Every screen but the first ("welcome", which has no back link) is unusable without
   this. */
.ob-back svg {
  width: 24px;
  height: 24px;
}

.new-onboarding .edit-done {
  font-size: 15px;
  font-weight: 600;
  color: var(--coral);
  cursor: pointer;
  flex-shrink: 0;
  padding: 6px 2px;
  -webkit-tap-highlight-color: transparent;
}