/* V2 onboarding. */

/* ── Onboarding ── */

/* The progress bar is a hairline under the header that fills in. */
:root[data-ui="v2"] .modal-header:has(+ .onboarding-progress) {
  border-bottom: none;
}

:root[data-ui="v2"] .onboarding-progress {
  height: 2px;
  margin: 0 calc(-1 * var(--modal-padding));
  width: auto;
  border: none;
  border-radius: 0;
  background: var(--card-border);
}

:root[data-ui="v2"] .onboarding-progress-bar {
  border-radius: 0;
}

:root[data-ui="v2"] .onboarding-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

:root[data-ui="v2"] .onboarding-section {
  gap: 16px;
}

:root[data-ui="v2"] .elective-grid {
  max-height: 300px;
  padding-right: 0;
}

:root[data-ui="v2"] .mini-button:hover {
  transform: none;
  box-shadow: none;
}

:root[data-ui="v2"] .custom-elective-panel {
  gap: 8px;
}

:root[data-ui="v2"] .custom-elective-list {
  gap: 8px;
}

:root[data-ui="v2"] .custom-elective-row {
  padding: 12px;
  gap: 8px;
}

/* The smoothing preview is a hint, not a chart: keep it short (.chart-wrap's 220px wins otherwise). */
:root[data-ui="v2"] .chart-wrap--compact {
  height: 140px;
}

/* "Enter share code" stays the quiet option but lines up with the buttons beside it. */
:root[data-ui="v2"] .onboarding-step .form-actions > .mini-button {
  height: var(--control-height);
}

/* Custom elective: colour swatch and remove stay on one line on phones too. */
@media (max-width: 620px) {
  :root[data-ui="v2"] .custom-elective-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  :root[data-ui="v2"] .custom-elective-color {
    width: 64px;
  }

  :root[data-ui="v2"] .custom-elective-row .icon-button--small {
    justify-self: end;
    width: auto;
  }
}