/* Keep the established prototype shell and controls. Only map its tokens to
   the current product palette/type and style the new answer-state controls. */
.new-onboarding .ob-question-flow {
  --coral: var(--gs-product-action);
  --coral-deep: var(--gs-product-action);
  --coral-glow: var(--gs-sand-light);
  --coral-glow-s: var(--gs-sand-light);
  --warm-cream: var(--gs-warm-cream);
  --sand: var(--gs-sand);
  --sand-light: var(--gs-sand-light);
  --white: var(--gs-card);
  --border: var(--gs-border);
  --text-primary: var(--gs-text-primary);
  --text-secondary: var(--gs-text-secondary);
  --text-muted: var(--gs-text-muted);
  --text-hint: var(--gs-text-hint);
  --slider-track: var(--gs-border);
  --font-d: var(--font-display);
  --font-b: var(--font-body);
  font-family: var(--font-body);
  color: var(--gs-text-primary);
  background: var(--gs-sand);
}
.new-onboarding .ob-question-flow .ob-continue {
  background: var(--gs-product-action);
  color: var(--gs-product-on-action);
  box-shadow: none;
}
.new-onboarding .ob-question-flow .ob-top { padding-top: calc(10px + env(safe-area-inset-top, 0px)); height: calc(44px + env(safe-area-inset-top, 0px)); }
.new-onboarding .ob-question-flow .ob-text,
.new-onboarding .ob-question-flow select { font-size: 16px; }
.new-onboarding .ob-question-error {
  color: var(--gs-coral-deep);
  background: var(--gs-coral-glow);
  padding: 14px;
  border: 1px solid var(--gs-coral-deep);
  border-radius: 14px;
  margin: 4px 0 16px;
  font-size: 14px;
  line-height: 1.5;
}
.new-onboarding .ob-answer-status,
.new-onboarding .ob-slider-unanswered,
.new-onboarding .ob-number-unit {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 14px;
}
.new-onboarding .ob-answer-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  flex-shrink: 0;
}
.new-onboarding .ob-answer-option {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--text-secondary);
  font: 500 14px/1.4 var(--font-b);
  cursor: pointer;
}
.new-onboarding .ob-answer-option[aria-pressed="true"] { border-color: var(--coral); background: var(--coral-glow); color: var(--coral-deep); }
.new-onboarding .ob-answer-skip { flex-basis: 100%; border-color: transparent; background: transparent; }
.new-onboarding .ob-answer-option:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.new-onboarding .ob-number-input { text-align: center; font-size: 36px!important; font-weight: 600; }
.new-onboarding .ob-number-unit { text-align: center; margin: 10px 0 0; }
.new-onboarding .ob-question-flow .ob-body > * { flex-shrink: 0; }

.new-onboarding .ob-question-flow > .gs-onboarding-topic { width: 100%; flex: 1; min-height: 0; overflow-y: auto; }
.new-onboarding .ob-question-flow.ob-screen--coral { background: var(--gs-coral); }

.new-onboarding .ob-related-fields { display: grid; gap: 28px; }
.new-onboarding .ob-related-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.new-onboarding .ob-related-field[hidden] { display: none; }
.new-onboarding .ob-field-label { font: 600 15px/1.5 var(--font-body); color: var(--text-primary); margin-bottom: 12px; }
.new-onboarding .ob-field-hint { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin: -4px 0 12px; }
.new-onboarding .ob-field-select { width: 100%; min-height: 48px; }
.new-onboarding .ob-measurement-input { width: 100%; font-size: 28px!important; font-variant-numeric: tabular-nums; }
.new-onboarding .ob-field-unknown { display: flex; gap: 10px; align-items: center; min-height: 44px; color: var(--text-secondary); font-size: 14px; margin-top: 4px; }
.new-onboarding .ob-field-unknown input { width: 18px; height: 18px; accent-color: var(--gs-product-action); }
.new-onboarding .ob-related-fields textarea { width: 100%; resize: vertical; min-height: 84px; }
.new-onboarding .ob-prior-answers { padding: 14px 16px; margin: 0 0 24px; background: var(--sand-light); border: 1px solid var(--border); border-radius: 14px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.new-onboarding .ob-prior-answers p { margin: 0 0 8px; }
.new-onboarding .ob-prior-answers p:last-child { margin-bottom: 0; }
.new-onboarding .ob-prior-answers a { color: var(--text-primary); text-underline-offset: 3px; margin-left: 6px; }
.new-onboarding .ob-related-fields--height_weight,
.new-onboarding .ob-related-fields--drinks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.new-onboarding .ob-related-fields--height_weight [data-key="height"],
.new-onboarding .ob-related-fields--height_weight [data-key="feet"] { order: 1; }
.new-onboarding .ob-related-fields--height_weight [data-key="height_unit"] { order: 2; }
.new-onboarding .ob-related-fields--height_weight [data-key="inches"] { order: 3; grid-column: 1 / -1; }
.new-onboarding .ob-related-fields--height_weight [data-key="weight"] { order: 4; }
.new-onboarding .ob-related-fields--height_weight [data-key="weight_unit"] { order: 5; }
.new-onboarding .ob-related-fields--height_weight [data-key="measured"] { order: 6; grid-column: 1 / -1; }
.new-onboarding .ob-related-fields--drinks [data-key="types"],
.new-onboarding .ob-related-fields--drinks [data-key="water_glasses"],
.new-onboarding .ob-related-fields--drinks [data-key="limit"],
.new-onboarding .ob-related-fields--drinks [data-key="limit_detail"] { grid-column: 1 / -1; }
.new-onboarding .ob-drink-choices { gap: 10px; }
.new-onboarding .ob-drink-card { min-height: 76px; padding: 10px 12px; align-items: flex-start; }
.new-onboarding .ob-drink-card .ob-choice-label { font-size: 15px; }
.new-onboarding .ob-drink-card .ob-choice-sub { margin-top: 3px; }
.new-onboarding .ob-drink-cups { display: flex; gap: 6px; margin-top: 9px; }
.new-onboarding .ob-drink-cup { width: 25px; height: 31px; flex: 0 0 25px; }
.new-onboarding .ob-drink-glass { fill: #e0f2fe; stroke: #60a5fa; stroke-width: 1.2; }
.new-onboarding .ob-drink-water { fill: #3b82f6; opacity: .8; }
.new-onboarding .ob-choice-input:checked + .ob-drink-card { border-color: var(--gs-product-action); background: var(--gs-sand-light); }
.new-onboarding .ob-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.new-onboarding .ob-compact-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.new-onboarding .ob-compact-choices .ob-choice { min-height: 46px; padding: 10px 12px; gap: 10px; }
.new-onboarding .ob-compact-choices .ob-choice-label { font-size: 14px; }
.new-onboarding .ob-detail-trigger { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text-secondary); font-size: 15px; line-height: 1.4; cursor: pointer; }
.new-onboarding .ob-detail-trigger input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--gs-product-action); }
.new-onboarding .ob-optional-note { margin-top: 18px; }
.new-onboarding .ob-optional-note textarea { display: block; width: 100%; margin-top: 10px; }
.new-onboarding .ob-related-fields--height_weight > .ob-detail-trigger { order: 6; grid-column: 1 / -1; }
.new-onboarding .ob-compact-choices .ob-choice { align-items: center; }
.new-onboarding .ob-choices--multi .ob-choice::before { border-radius: 5px; }
.new-onboarding .ob-detail-trigger:has(input:focus-visible) { outline: 2px solid var(--coral-deep); outline-offset: 3px; border-radius: 6px; }
.new-onboarding .ob-detail-trigger input,
.new-onboarding .ob-field-unknown input { appearance: none; background-color: var(--gs-card); border: 1.5px solid var(--gs-border); border-radius: 4px; }
.new-onboarding .ob-detail-trigger input:checked,
.new-onboarding .ob-field-unknown input:checked { background-color: var(--gs-product-action); border-color: var(--gs-product-action); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m4 9 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Scroll the content independently so every primary action stays at the bottom. */
.new-onboarding .ob-question-flow .ob-form { overflow: hidden; display: flex; flex-direction: column; }
.new-onboarding .ob-question-flow .ob-form > .ob-body { overflow-y: auto; flex: 1; min-height: 0; padding: 24px 24px 24px; scroll-padding-bottom: 24px; }
.new-onboarding .ob-question-flow .ob-form > .ob-cta { margin-top: 0; padding: 8px 24px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--gs-sand); border-top: 1px solid var(--gs-border); }
.new-onboarding .ob-question-flow .ob-continue { height: 50px; border-radius: 13px; }
.new-onboarding .ob-question-flow .ob-grid { grid-template-columns: minmax(0, 1fr); gap: 7px; }
.new-onboarding .ob-question-flow .ob-choice { min-height: 46px; padding: 10px 12px; gap: 10px; }
.new-onboarding .ob-question-flow .ob-choice-grid { flex-direction: row; text-align: left; }
.new-onboarding .ob-question-flow .ob-choice-grid::before { margin-bottom: 0; }
.new-onboarding .ob-question-flow .ob-choice-sub { font-size: 12px; line-height: 1.4; }
.new-onboarding .ob-question-flow .ob-drink-card { min-height: 76px; }
.new-onboarding .ob-question-flow .ob-related-fields { gap: 16px; }
.new-onboarding .ob-question-flow .ob-answer-options { flex-direction: column; }

.new-onboarding .ob-question-flow .ob-input { margin-bottom: 8px; }

.new-onboarding .ob-question-flow .ob-detail-trigger {
  min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: 13px; background: var(--white); color: var(--text-primary);
  font-size: 14.5px;
}
.new-onboarding .ob-question-flow .ob-detail-trigger:has(input:checked) { border-color: var(--coral); background: var(--coral-glow); }
.new-onboarding .ob-question-flow .ob-goal-note { margin: 4px 0 12px; }
.new-onboarding .ob-question-flow .ob-goal-note textarea { width: 100%; min-height: 84px; margin-top: 8px; resize: vertical; }
.new-onboarding .ob-question-flow .ob-slider-input,
.new-onboarding .ob-question-flow .ob-severity-input { height: 10px; border-radius: 999px; }
.new-onboarding .ob-question-flow .ob-related-fields--height_weight [data-key="weight_changes"] { order: 7; grid-column: 1 / -1; }
.new-onboarding .ob-referral-icon { width: 28px; height: 28px; flex: 0 0 28px; color: var(--text-primary); }

.new-onboarding .ob-preview-card { padding: 16px; margin: 12px 0; border: 1px solid var(--gs-border); border-radius: 16px; background: var(--gs-card); }
.new-onboarding .ob-preview-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.new-onboarding .ob-preview-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gs-text-secondary); }
.new-onboarding .ob-demo-note { margin: 0 0 20px; font-size: 13px; line-height: 1.5; color: var(--gs-text-secondary); }

/* Vertical number wheel: one centered value, touch scrolling and keyboard steps. */
.ob-number-picker { margin:24px 0 12px; }
.ob-picker-units { display:flex; padding:4px; border-radius:12px; background:var(--gs-sand-light); margin-bottom:28px; }
.ob-picker-units button { flex:1; border:0; border-radius:9px; padding:10px; color:var(--gs-text-secondary); background:transparent; font-size:14px; font-weight:600; cursor:pointer; }
.ob-picker-units button[aria-pressed=true] { background:var(--gs-card); color:var(--gs-text-primary); box-shadow:0 1px 4px #0001; }
.ob-picker-hint { font-size:13px; color:var(--gs-text-secondary); text-align:center; margin-bottom:18px; }
.ob-wheel-frame { position:relative; height:260px; max-width:280px; margin:0 auto 24px; }
.ob-wheel-selection { position:absolute; inset:104px 0; height:52px; background:var(--gs-sand-light); border-radius:12px; pointer-events:none; }
.ob-wheel { height:260px; overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y mandatory; scrollbar-width:none; padding:104px 0; position:relative; touch-action:pan-y; -webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent); mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent); }
.ob-wheel::-webkit-scrollbar { display:none; }
.ob-wheel:focus-visible { outline:2px solid var(--gs-product-action); outline-offset:5px; border-radius:12px; }
.ob-wheel-option { height:52px; display:flex; align-items:center; justify-content:center; scroll-snap-align:center; font-size:23px; line-height:1; font-variant-numeric:tabular-nums; color:var(--gs-text-secondary); cursor:pointer; }
.ob-wheel-option.is-selected { font-size:30px; font-weight:650; color:var(--gs-text-primary); }

/* The shared range reset forces a coral gradient with !important. Keep the
   override scoped to this flow, including Firefox and focused thumbs.
   Its -8px thumb margin assumes a separately styled track; these inputs
   paint the track on the input itself, so let the browser center the thumb. */
.new-onboarding .ob-question-flow input[type=range]::-webkit-slider-thumb {
  margin-top: 0 !important;
  background: var(--gs-product-action) !important;
  border-color: var(--gs-card) !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%) !important;
}
.new-onboarding .ob-question-flow input[type=range]::-moz-range-thumb {
  background: var(--gs-product-action) !important;
  border-color: var(--gs-card) !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%) !important;
}

.new-onboarding .ob-flash-alert { color: var(--gs-coral-deep); }

/* The native health connection uses the same selection color as this flow. */
.new-onboarding .ob-question-flow .ah-toggle-input:checked + .tgl { background: var(--gs-product-action); }
.new-onboarding .ob-question-flow .ah-toggle-input:focus-visible + .tgl { outline: 2px solid var(--gs-product-action); outline-offset: 4px; }

/* Recap edits are a coral text action; question selection keeps its ink token. */
.new-onboarding .ob-question-flow .ob-recap-change { color:var(--gs-coral-deep); text-underline-offset:3px; padding:6px 0 6px 8px; }
.new-onboarding .ob-question-flow .ob-recap-change:hover { color:var(--gs-coral); text-decoration:underline; }
.new-onboarding .ob-question-flow .ob-recap-change:focus-visible { outline:2px solid var(--gs-coral-deep); outline-offset:3px; border-radius:3px; text-decoration:underline; }