/* Copyright 2026 Renofy Ltd. All rights reserved. */
/* Onboarding Modal — vertical numbered timeline.
   Shared modal chrome lives in static/css/components/modal.css.
   Circle styles mirror share-prompt-modal.css for visual consistency
   with the deep-dive stepper. */

.onboarding-modal__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.onboarding-modal__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

/* Vertical connector — two pseudos per step that overlap in the inter-step
   gap. Lets us vertically centre the circle (align-items: center) while
   still anchoring the line endpoints to circle edges, regardless of how
   tall the description text is.
   The ±1.25rem values are coupled to `gap: 1.25rem` on .onboarding-modal__steps;
   the ±15px to half the 30px circle. Update together. */
.onboarding-modal__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: calc(50% + 15px);   /* just below this circle */
  bottom: -1.25rem;        /* extends down into the gap to next step */
  width: 2px;
  background: var(--color-border);
  z-index: 0;
}

.onboarding-modal__step:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -1.25rem;           /* extends up from the gap above */
  bottom: calc(50% + 15px); /* up to just above this circle */
  width: 2px;
  background: var(--color-border);
  z-index: 0;
}

.onboarding-modal__step-node {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: 0.78rem;
  position: relative;
  z-index: 1;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.onboarding-modal__step--active .onboarding-modal__step-node {
  background: var(--color-pink);
  border-color: var(--color-pink);
  color: var(--color-white);
  box-shadow: 0 0 0 6px rgba(215, 0, 92, 0.12);
}

.onboarding-modal__step-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.onboarding-modal__step-label {
  /* Hardcoded 18px on both viewports to preserve hierarchy over the 16px
     step-desc on mobile (--font-size-lg would shrink to 16px and flatten it). */
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.onboarding-modal__step-desc {
  /* See modal.css for rationale on hardcoded 16px. */
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}