/* Guided client setup.
 *
 * One section at a time on a centred column. The shape is deliberately
 * closer to the welcome than to a settings page: this runs once, it is
 * the first real work a new client does in the product, and it should
 * feel like being walked through something rather than like filling in
 * a form somebody left out.
 *
 * Sized for a phone first. A shop owner does this between jobs. */

.onboarding-shell {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: start center;
  padding: var(--s6) var(--s4) var(--s9);
  background: var(--bg);
  overflow-y: auto;
}

.ob-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

/* ---------------------------------------------------------- header */

.ob-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
}

.ob-eyebrow {
  margin: 0;
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

.ob-title {
  margin: var(--s1) 0 0;
  font-family: var(--font-brand);
  font-size: var(--t-27);
  font-weight: 600;
  letter-spacing: var(--track-title);
  line-height: var(--lh-tight);
  color: var(--text);
}

/* -------------------------------------------------------- progress */

.ob-progress {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.ob-bar {
  flex: 1;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}

.ob-bar-fill {
  display: block;
  height: 100%;
  width: var(--fill, 0%);
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-2, 260ms) var(--ease, cubic-bezier(0.2, 0, 0, 1));
}

.ob-progress-note {
  margin: 0;
  flex: none;
  font-size: var(--t-12);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

/* ------------------------------------------------------------ card */

.ob-card {
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--lift-2), var(--edge-top);
}

.ob-section-title {
  margin: 0;
  font-size: var(--t-21);
  font-weight: 600;
  letter-spacing: var(--track-title);
  color: var(--text);
}

.ob-blurb {
  margin: var(--s2) 0 0;
  max-width: 54ch;
  font-size: var(--t-14);
  line-height: var(--lh-body);
  color: var(--text-2);
}

.ob-card > :is(.ob-points, .ob-fields, .ob-hours, .stack) {
  margin-top: var(--s5);
}

/* ---------------------------------------------------------- points */

.ob-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s4);
}

.ob-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
}

.ob-point-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
}

.ob-point strong {
  font-size: var(--t-15);
  font-weight: 600;
  color: var(--text);
}

.ob-point p {
  margin: 2px 0 0;
  font-size: var(--t-14);
  line-height: var(--lh-body);
}

/* ---------------------------------------------------------- fields */

.ob-fields {
  display: grid;
  gap: var(--s4);
}

.ob-fields label {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.ob-required {
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-3);
}

/* -------------------------------------------------------- services */

.ob-service-head,
.ob-service {
  display: grid;
  /* The duration column is a dropdown reading "4 hours (half day)", so
     it needs real room. It was 5.5rem when it held a number. */
  grid-template-columns: 1fr 6rem 11rem auto;
  gap: var(--s2);
  align-items: center;
}

.ob-service-head {
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.ob-services {
  margin: var(--s2) 0 var(--s3);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s2);
}

/* ----------------------------------------------------------- hours */

.ob-hours {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s1);
}

.ob-hour-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}

.ob-hour-row:last-child { border-bottom: 0; }

.ob-day {
  font-size: var(--t-14);
  color: var(--text);
}

.ob-times {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.ob-time { width: 7.5rem; }

/* ------------------------------------------------------------ foot */

.ob-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.ob-step {
  font-size: var(--t-12);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

/* ----------------------------------------------------------- phone */

@media (max-width: 560px) {
  .onboarding-shell { padding: var(--s4) var(--s3) var(--s8); }

  .ob-card { padding: var(--s4); }

  .ob-head { flex-direction: column; gap: var(--s2); }

  /* Name on its own line, then price and minutes side by side. Three
     columns at 360px gives a name field too narrow to read back. */
  .ob-service {
    grid-template-columns: 1fr 1fr auto;
  }

  .ob-service > :first-child { grid-column: 1 / -1; }

  .ob-service-head { display: none; }

  .ob-hour-row { flex-wrap: wrap; }

  .ob-time { width: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-bar-fill { transition: none; }
}

/* A per-row caption for the numeric fields. Redundant beside the header
 * row on a wide screen, and the only labelling there is on a phone,
 * where that header is hidden. */
.ob-cell { display: block; }

.ob-cell-label {
  display: none;
  margin-bottom: 2px;
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.ob-cell .ob-narrow { width: 100%; }

@media (max-width: 560px) {
  .ob-cell-label { display: block; }

  /* The remove button sits beside the numbers, so it has to clear the
     caption line those numbers now carry. */
  .ob-service > button { align-self: end; margin-bottom: var(--s1); }
}


/* ------------------------------------------------ custom duration */

/* "Other": a number and the unit it is in, on one line. */
.ob-custom {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: var(--s1);
}

.ob-custom .ob-num { width: 100%; text-align: right; }
.ob-custom .ob-unit { width: 100%; }

.ob-cell .select { width: 100%; }

@media (max-width: 560px) {
  /* Name on its own row, then price and duration share the next one.
     The duration dropdown is the wider of the two. */
  .ob-service { grid-template-columns: 6rem 1fr auto; }
}