/* Hreyfing — onboarding and profile (L2).
 * Builds on base.css tokens and components (cards, chips, fields, notices, steps); no new colours.
 */

/* ------------------------------------------------------------------------------------------ */
/* Onboarding: one calm, readable column                                                       */
/* ------------------------------------------------------------------------------------------ */
.onb-page { width: 100%; max-width: 780px; margin-inline: auto; }
.onb-page .page-body { gap: var(--s4); }

.onb-card { gap: var(--s5); }
.onb-card-head { display: flex; flex-direction: column; gap: var(--s2); }
.onb-step-title { font-size: 1.5rem; }
.onb-step-intro { color: var(--muted); max-width: var(--readw); }

.onb-notes { display: flex; flex-direction: column; gap: var(--s2); }
.onb-notes:empty,
.onb-concern:empty { display: none; }

.onb-inline-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 550; }

/* Goal cards: radio chips with an icon, laid out as a grid */
.onb-goals .chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: var(--s3);
}
.onb-goals .chip { display: flex; }
.onb-goals .chip-face {
  position: relative;
  align-items: center;
  gap: var(--s3);
  min-height: 80px;
  padding: 14px 44px 14px 14px;
}
.onb-goals .chip-check { position: absolute; top: 12px; right: 12px; margin: 0; }
.onb-goals .chip-label { font-weight: 650; }
.onb-goal-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-soft-ink);
}
.onb-goal-icon .icon { width: 24px; height: 24px; }
.onb-goals .chip input:checked + .chip-face .onb-goal-icon { background: var(--primary); color: var(--primary-ink); }

/* Fitness level and diet: rich radio chips in an even grid */
.onb-levels .chip-list,
.onb-diets .chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--s2);
}
.onb-levels .chip,
.onb-diets .chip { display: flex; }

/* Day chips: equal width so the week reads as a row */
.onb-days .chip-face { min-width: 66px; justify-content: center; }

/* Short controls should not stretch across the card */
.onb-date-group .field--date input { max-width: 17rem; }
.onb-card .field--select select,
.profile-form .field--select select { max-width: 22rem; }
.onb-card .form-row .field--select select,
.profile-form .form-row .field--select select { max-width: none; }

/* ------------------------------------------------------------------------------------------ */
/* Starting point (baseline) rows                                                              */
/* ------------------------------------------------------------------------------------------ */
.onb-measure { gap: 6px; }
.onb-measure-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.onb-measure-head .field-label { margin: 0; }
.onb-needed { font-size: 0.8125rem; min-height: 0; }
.scale-legend .onb-needed { margin-left: 8px; vertical-align: 1px; }
.onb-num-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.onb-input-unit { display: inline-flex; align-items: center; gap: 8px; }
.onb-measure .onb-input-unit input.onb-num { width: 8.5rem; max-width: 100%; font-variant-numeric: tabular-nums; }
.onb-measure--pair .onb-input-unit input.onb-num { width: 5.5rem; }
.onb-unit { color: var(--muted); font-weight: 600; min-width: 2ch; }
.onb-measure input.onb-num:disabled,
.onb-measure--scale input:disabled + .scale-face { background: var(--surface-2); cursor: not-allowed; opacity: 0.7; }

.onb-skip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  min-height: 44px;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 550;
  cursor: pointer;
}
.onb-skip input.checkbox { width: 22px; height: 22px; margin: 0; }

.onb-units .chip-face { min-height: 44px; }

/* ------------------------------------------------------------------------------------------ */
/* Step footer                                                                                 */
/* ------------------------------------------------------------------------------------------ */
.onb-saved-note { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.875rem; margin-bottom: calc(-1 * var(--s3)); }
.onb-saved-note .icon { color: var(--success); width: 1.05em; height: 1.05em; flex: none; }
.onb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.onb-primary { margin-left: auto; }
@media (max-width: 479.98px) {
  .onb-actions .btn { flex: 1 1 0; }
  .onb-actions .btn-lg { flex-basis: 100%; }
}

/* ------------------------------------------------------------------------------------------ */
/* Review                                                                                      */
/* ------------------------------------------------------------------------------------------ */
.onb-review-group {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3) var(--s4) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  background: var(--surface);
}
.onb-review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.onb-review-head h3 { font-size: 1.0625rem; }
.onb-edit { flex: none; }
.onb-dl { display: flex; flex-direction: column; gap: var(--s2); }
.onb-dl-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.onb-dl dt { color: var(--muted); font-size: 0.9375rem; }
.onb-dl dd { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-weight: 550; min-width: 0; }
.onb-dl dd .icon { flex: none; margin-top: 3px; width: 1.05em; height: 1.05em; }
.onb-dl-row.is-missing dd { color: var(--warning-ink); }
@media (min-width: 560px) {
  .onb-dl-row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s4); }
}

/* ------------------------------------------------------------------------------------------ */
/* Profile                                                                                     */
/* ------------------------------------------------------------------------------------------ */
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.profile-main { min-width: 0; max-width: 820px; }
.profile-toc { display: none; }
@media (min-width: 1024px) {
  .profile-layout { grid-template-columns: 210px minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .profile-toc { display: block; position: sticky; top: calc(var(--header-h) + var(--s4)); }
}
.profile-toc-title {
  margin-bottom: var(--s2);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-toc-list li + li { margin-top: 0; }
.profile-toc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}
.profile-toc-link:hover { background: var(--surface-2); }
.profile-toc-link .icon { color: var(--muted); flex: none; }

.profile-section { scroll-margin-top: calc(var(--header-h) + var(--s4)); }

/* Save bar: stays reachable at the bottom of the screen while the form is in view */
.profile-savebar {
  position: sticky;
  bottom: var(--s3);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 767.98px) {
  body.has-tabbar .profile-savebar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s2)); }
}
.profile-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 550; font-size: 0.9375rem; }
.profile-status .icon { color: var(--success); flex: none; }
.profile-status.is-dirty { color: var(--warning-ink); }
.profile-status.is-dirty .icon { color: var(--warning); }
.profile-save-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-left: auto; }
@media (max-width: 479.98px) {
  .profile-savebar { padding: var(--s2) var(--s3); }
  .profile-save-actions { width: 100%; }
  .profile-save-actions .btn { flex: 1 1 0; }
}

.profile-privacy { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 0.9375rem; max-width: var(--readw); }
.profile-privacy .icon { flex: none; margin-top: 3px; }

@media print {
  .profile-savebar, .profile-toc, .onb-actions { display: none !important; }
}