/* קלורי — page styles for `onboarding` (#/onboarding/:step). Every selector is prefixed `.pg-onboarding `.
   Full-screen wizard: layout.css hides the tab bar for this page; the primary button is pinned
   to the bottom with .pinned-actions--full. Shared components live in css/components.css. */

.pg-onboarding .onb {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}
.pg-onboarding .onb-form { gap: var(--sp-4); }
/* keep a field that scrolls into view (focus / error) above the pinned footer */
.pg-onboarding .field,
.pg-onboarding .onb-card,
.pg-onboarding .check { scroll-margin-block: calc(var(--header-h) + var(--sp-4)) 140px; }
.pg-onboarding .onb-sub {
  color: var(--c-text-2);
  font-size: var(--fs-md);
  margin-block-end: calc(-1 * var(--sp-1));
}

/* ---------- progress (8 segments + "שלב X מתוך 8") ---------- */
.pg-onboarding .onb-progress {
  display: grid;
  gap: var(--sp-2);
}
.pg-onboarding .onb-progress__bar {
  display: flex;
  gap: 4px;
}
.pg-onboarding .onb-progress__seg {
  flex: 1 1 0;
  block-size: 6px;
  border-radius: var(--r-full);
  background: var(--c-surface-3);
  transition: background-color var(--dur-2) var(--ease);
}
.pg-onboarding .onb-progress__seg--done { background: var(--c-primary); }
.pg-onboarding .onb-progress__text {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
}

/* ---------- step 0 hero ---------- */
.pg-onboarding .onb-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding-block: var(--sp-6) var(--sp-4);
}
.pg-onboarding .onb-logo {
  inline-size: 112px;
  block-size: 112px;
  filter: drop-shadow(0 6px 16px rgba(14, 143, 110, .18));
}
.pg-onboarding .onb-hero__brand {
  font-size: var(--fs-hero);
  font-weight: 800;
  color: var(--c-primary-text);
  letter-spacing: -.01em;
  line-height: 1.1;
}
.pg-onboarding .onb-hero__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
}
.pg-onboarding .onb-hero__lead {
  font-size: var(--fs-md);
  color: var(--c-text);
  max-inline-size: 36ch;
}
.pg-onboarding .onb-hero__privacy {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  max-inline-size: 36ch;
}
.pg-onboarding .onb-actions {
  display: grid;
  gap: var(--sp-2);
  padding-block-start: var(--sp-2);
}

/* ---------- radio cards (activity, goal, pace) ---------- */
.pg-onboarding .onb-cards {
  display: grid;
  gap: var(--sp-2);
}
.pg-onboarding .onb-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--hit-lg);
  padding: var(--sp-3) var(--sp-4);
  padding-inline-start: calc(var(--sp-4) + 28px);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1);
}
.pg-onboarding .onb-card:hover { border-color: var(--c-text-2); }
/* the native radio fills the whole card (hidden) so the card is the target */
.pg-onboarding .onb-card > input[type="radio"] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border-radius: inherit;
}
/* drawn radio indicator at the start side */
.pg-onboarding .onb-card::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--sp-4);
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--r-full);
  border: 2px solid var(--c-border);
  background: var(--c-surface);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.pg-onboarding .onb-card:has(> input:checked),
.pg-onboarding .onb-card--selected {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}
.pg-onboarding .onb-card:has(> input:checked)::before,
.pg-onboarding .onb-card--selected::before {
  border-color: var(--c-primary);
  box-shadow: inset 0 0 0 5px var(--c-primary);
}
.pg-onboarding .onb-card:has(> input:focus-visible) {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.pg-onboarding .onb-card__body {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: grid;
  gap: 2px;
}
.pg-onboarding .onb-card__title {
  font-weight: 700;
  font-size: var(--fs-md);
}
.pg-onboarding .onb-card__pct {
  font-weight: 500;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}
.pg-onboarding .onb-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}
.pg-onboarding .onb-card__meta {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-primary-text);
}
.pg-onboarding .onb-card__end {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  text-align: end;
  white-space: nowrap;
}
.pg-onboarding .onb-card:has(> input:checked) .onb-card__end { color: var(--c-primary-text); }
.pg-onboarding .onb-cards > .field__error { margin-block-start: var(--sp-1); }

/* ---------- step 4 extras ---------- */
.pg-onboarding .onb-navy {
  font-weight: 700;
  color: var(--c-primary-text);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-primary-soft);
  border-radius: var(--r-1);
}
.pg-onboarding .onb-navy--warn {
  color: var(--c-warning);
  background: var(--c-warning-soft);
}
.pg-onboarding .disclosure { margin-block-start: var(--sp-1); }
.pg-onboarding .disclosure > .disclosure__body > .stack,
.pg-onboarding .disclosure > .disclosure__body.stack { gap: var(--sp-3); }

/* ---------- step 5 calories ---------- */
.pg-onboarding .onb-kcal-card {
  display: grid;
  gap: var(--sp-4);
}
.pg-onboarding .onb-kcal {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-block: var(--sp-3) var(--sp-2);
  text-align: center;
}
.pg-onboarding .onb-kcal__value {
  font-size: 56px;
  color: var(--c-primary-text);
}
.pg-onboarding .onb-kcal__unit {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-text-2);
}
.pg-onboarding .onb-kcal .chip { margin-block-start: var(--sp-2); }
.pg-onboarding .onb-kcal-edit {
  display: grid;
  gap: var(--sp-2);
  align-items: end;
}
.pg-onboarding .onb-kcal-edit .field { margin-block-end: 0; }
.pg-onboarding .onb-kcal-edit .btn { justify-self: start; }
/* goal weight + weeks chips under the kcal hero (abs / target weight) */
.pg-onboarding .onb-projection {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  text-align: center;
  margin-block-start: calc(-1 * var(--sp-2));
}
.pg-onboarding .onb-projection__chips { justify-content: center; }
/* static chips: no hit-size padding, allow the Hebrew line to wrap on narrow phones */
.pg-onboarding .onb-projection__chips > .chip {
  min-block-size: 28px;
  padding: 4px var(--sp-3);
  cursor: default;
  white-space: normal;
  text-align: center;
}
.pg-onboarding .onb-projection__chips > .chip--selected::before { content: none; }
.pg-onboarding .onb-projection__note { max-inline-size: 40ch; }
.pg-onboarding .onb-macros {
  display: grid;
  gap: var(--sp-2);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--c-border);
}
.pg-onboarding .onb-macros__line {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.pg-onboarding .onb-macros .chart-wrap {
  inline-size: 100%;
  block-size: 14px;
}
.pg-onboarding .onb-macros .chart { block-size: 14px; }
.pg-onboarding .onb-water {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-water);
}
.pg-onboarding .onb-medical { text-align: center; }

/* ---------- step 6 prefs ---------- */
.pg-onboarding .onb-dislike-results {
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  background: var(--c-surface);
  margin-block-start: var(--sp-1);
  overflow: hidden;
}
.pg-onboarding .onb-dislike-result {
  min-block-size: var(--hit);
  padding-inline: var(--sp-3);
}
.pg-onboarding .onb-dislike-results li { list-style: none; }
.pg-onboarding [data-part="dislike-selected"]:not(:empty) { margin-block-start: var(--sp-2); }

/* ---------- step 7 habits ---------- */
.pg-onboarding .onb-habits {
  display: grid;
  margin-inline: calc(-1 * var(--sp-2));
}
.pg-onboarding .onb-habit {
  padding-inline: var(--sp-2);
  border-radius: var(--r-2);
  transition: background-color var(--dur-1);
}
.pg-onboarding .onb-habit:hover { background: var(--c-surface-2); }
.pg-onboarding .onb-habit--on { color: var(--c-text); }
.pg-onboarding .onb-habit__icon {
  flex: none;
  display: inline-flex;
  inline-size: 36px;
  block-size: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  color: var(--c-text-2);
}
.pg-onboarding .onb-habit--on .onb-habit__icon {
  background: var(--c-primary-soft);
  color: var(--c-primary-text);
}
.pg-onboarding .onb-habit__icon .icon { inline-size: 20px; block-size: 20px; }
.pg-onboarding .onb-habit__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.pg-onboarding .onb-habit .btn--icon { margin-inline-start: auto; }
.pg-onboarding .onb-custom-habit { margin-block-start: var(--sp-2); }
.pg-onboarding .onb-custom-habit .btn { flex: none; }

/* ---------- summary (step 8) ---------- */
.pg-onboarding .kv__key { flex: none; }
.pg-onboarding .kv__val { flex: 1 1 auto; min-inline-size: 0; }

/* ---------- pinned footer ---------- */
.pg-onboarding .onb-footer {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
}

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .pg-onboarding .onb { max-inline-size: 640px; }
  .pg-onboarding .onb-hero { padding-block-start: var(--sp-6); }
  .pg-onboarding .onb-kcal__value { font-size: 64px; }
  .pg-onboarding .onb-footer {
    position: static;
    background: none;
    padding-block: var(--sp-2) 0;
    grid-template-columns: 1fr auto;
    direction: rtl;
  }
  .pg-onboarding .onb-footer .btn--primary { grid-column: 1; inline-size: auto; min-inline-size: 220px; justify-self: start; }
  .pg-onboarding .onb-footer .btn--ghost { grid-column: 2; inline-size: auto; }
  .pg-onboarding .onb-actions { max-inline-size: 360px; margin-inline: auto; inline-size: 100%; }
}