/* F/G-only composition using the accepted #513 tokens. */
.fg-meal-proof { margin: 24px 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: center; }
.fg-meal-proof img { display: block; inline-size: 100%; max-block-size: 400px; object-fit: cover; border-radius: 18px; }
.fg-meal-proof figcaption { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.fg-meal-proof h2 { font-size: 1.15rem; line-height: 1.4; }
.fg-meal-proof strong { display: block; font-size: 1.7rem; }
.fg-meal-proof p { font-size: .875rem; line-height: 1.55; }
.fg-principle { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.fg-principle h2 { font-size: 1.15rem; }
.journey-card .journey-labels { display: block; position: relative; min-height: 7em; }
.journey-card .journey-labels > span { position: absolute; inline-size: max-content; max-inline-size: 48%; inset-block-start: 0; }
.journey-card .journey-labels > span:first-child { inset-inline-start: 0; }
.journey-card .journey-labels > span:last-child { inset-inline-end: 0; }
.journey-card .journey-labels > span:nth-child(2) { inset-block-start: 3.7em; inset-inline-start: clamp(25%,var(--journey-progress),75%); transform: translateX(-50%); }
.journey-card .journey-chart { min-height: 110px; }
.journey-card .journey-node { stroke-width: 2; }
.account-menu-sheet .settings-account-card { display: block; }
.account-menu-sheet #open-account-settings { display: none; }
.account-menu-sheet .settings-account-status { min-width: 0; }
.account-menu-sheet .settings-account-status > div { min-width: 0; overflow-wrap: anywhere; }
.bmi-orientation .bmi-band { margin-block-start: 6.5em; margin-block-end: 2.5em; }
.bmi-orientation .bmi-marker { transform: none; inline-size: 0; border-left: 2px solid var(--green); block-size: 26px; }
.bmi-orientation .bmi-value-label { position: absolute; display: flex; flex-direction: column; inline-size: max-content; max-inline-size: 9em; transform: none; padding: 0; }
.bmi-orientation .bmi-value-label i, .bmi-orientation .bmi-value-label b { position: static; display: block; transform: none; inset: auto; white-space: normal; line-height: 1.3; }
#settings-overlay { --account-screen-bg: #EEF0F4; inset: 0; height: 100dvh; padding: 0; display: block; background: var(--account-screen-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
#settings-overlay > .account-menu-sheet { width: 100%; height: 100%; max-height: none; margin: 0; padding: max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); border: 0; border-radius: 0; box-shadow: none; background: var(--account-screen-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; }
.account-menu-sheet > * { max-width: 720px; margin-inline: auto; }
.account-menu-sheet .account-screen-header { align-items: center; justify-content: flex-start; min-height: 52px; margin-bottom: 14px; border-bottom: 1px solid var(--kk-border-soft); padding-bottom: 12px; }
.account-menu-sheet .account-screen-header .icon-button { border: 0; background: transparent; }
.account-menu-sheet .account-screen-header h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.account-menu-sheet .settings-account-card { padding: 16px; border: 0; border-radius: 18px; background: var(--kk-surface); }
.account-menu-sheet .settings-account-status strong { font-size: 1.0625rem; font-weight: 400; }
.account-menu-sheet .settings-account-status small { font-size: .8125rem; }
.account-menu-groups { display: block; margin: 8px 0 20px; }
.account-menu-group { min-width: 0; margin-block: 0 24px; }
.account-menu-group h3 { display: flex; align-items: center; gap: 7px; color: var(--kk-ink-soft); font-size: .8125rem; font-weight: 500; margin: 0; padding: 10px 16px; }
.account-menu-list { padding-inline: 16px; border-radius: 18px; background: var(--kk-surface); }
.account-menu-list .account-menu-row:first-child { border-top: 0; }
.account-menu-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: left; width: 100%; min-height: 52px; padding: 14px 0; color: var(--kk-ink); background: transparent; border: 0; border-top: 1px solid var(--kk-border-soft); border-radius: 0; font: inherit; font-size: 1.0625rem; }
.account-menu-row > span:first-child { display: grid; gap: 5px; min-width: 0; }
.account-menu-row strong { font-weight: 400; line-height: 1.45; }
.account-menu-row small { color: var(--kk-ink-soft); font-size: .8125rem; font-weight: 400; line-height: 1.5; }
.account-menu-row > span:last-child { flex: 0 0 auto; color: var(--kk-ink-faint); font-size: 1.4rem; font-weight: 400; }
.account-menu-signout { color: var(--kk-ink-soft); padding-inline: 16px; border: 0; border-radius: 18px; background: var(--kk-surface); }
.account-menu-danger { margin-block-start: 32px; padding: 18px 0 0; border-top: 1px solid var(--kk-border-soft); }
.account-menu-danger h3 { font-size: .8125rem; font-weight: 500; color: var(--kk-danger); }
.account-menu-danger p { color: var(--kk-ink-soft); font-size: .875rem; line-height: 1.6; }
#account-menu-detail h3 { margin-block-start: 24px; font-size: 1.0625rem; font-weight: 600; }
#account-menu-detail button, #account-menu-detail input { font-family: inherit; }
#account-menu-detail p { line-height: 1.6; }
@media(max-width:700px) {
 .fg-meal-proof { grid-template-columns: minmax(0,1fr); gap: 14px; }
 .fg-meal-proof img { max-block-size: 270px; }
 .account-menu-groups { grid-template-columns: minmax(0,1fr); }
 .bmi-orientation header { grid-template-columns: minmax(0,1fr); }
}

/* #515 H: one scoped Clean Healthy composition over the shared design tokens.
   All numbers and chart geometry continue to come from the existing engine. */
.onboarding-main {
 --kk-action-primary: var(--kk-green-500);
 --kk-action-primary-hover: var(--kk-green-600);
 --kk-action-primary-active: var(--kk-green-700);
 --kk-data-energy: var(--kk-green-500);
 --green: var(--kk-action-primary);
 --green-dark: var(--kk-action-primary-active);
 --healthy-radius: 20px;
 --healthy-gap: clamp(18px, 2.4vw, 32px);
 width: min(1240px, calc(100% - 32px));
}
.onboarding-main .onboarding-flow {
 width: 100%; max-width: 100%; padding: clamp(20px, 3.5vw, 44px);
 background: var(--kk-bg-surface); border: 1px solid var(--kk-border-subtle);
 border-radius: 28px; box-shadow: 0 14px 44px rgb(19 57 42 / 5%);
}
.onboarding-main .onboarding-flow:has(.clean-healthy-panel:not([hidden])) { width: 100%; max-width: 100%; }
.onboarding-main .flow-header { align-items: center; margin-bottom: clamp(28px, 4vw, 44px); }
.onboarding-main .back-button { border-radius: 50%; }
.onboarding-main .flow-stages li { font-weight: 500; font-size: .8125rem; letter-spacing: 0; }
.onboarding-main .flow-stages li::before { height: 4px; }
.onboarding-main .clean-healthy-panel { text-align: left; }
.onboarding-main .clean-healthy-panel h1 {
 font-family: var(--kk-font-editorial); font-size: clamp(2rem, 4vw, 3.375rem);
 font-weight: 400; line-height: 1.1; letter-spacing: -.03em;
 max-width: none; overflow-wrap: anywhere;
}
.onboarding-main .clean-healthy-panel .step-lead {
 font-size: 1.0625rem; line-height: 1.6; max-width: 68ch; margin: 14px 0 26px;
}
.onboarding-main .clean-healthy-panel .eyebrow { font-size: .8125rem; font-weight: 550; letter-spacing: .08em; }
.onboarding-main .clean-healthy-panel h2 { font-size: 1.125rem; line-height: 1.4; font-weight: 550; }
.onboarding-main .clean-healthy-panel :where(p, small, span, strong, h2, h3, dd, dt, figcaption, summary) { overflow-wrap: anywhere; }
.onboarding-main .insight-visual-grid,
.onboarding-main .onboarding-flow .onboarding-result .result-overview-grid {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26em), 1fr));
 gap: var(--healthy-gap); align-items: start; min-width: 0;
}
.onboarding-main .insight-visual-grid > *,
.onboarding-main .onboarding-flow .onboarding-result .result-overview-grid > * { min-width: 0; }
.onboarding-main .journey-card, .onboarding-main .bmi-orientation {
 margin: 0; padding: 24px; border-radius: var(--healthy-radius);
 border: 1px solid var(--kk-border-subtle); background: var(--kk-bg-surface);
}
.onboarding-main .journey-card h2 { margin: 0 0 16px; }
.onboarding-main .journey-chart {
 display: block; width: 100%; height: auto; min-height: 130px;
 background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(33.33% - 1px), var(--kk-border-subtle) calc(33.33% - 1px), var(--kk-border-subtle) 33.33%);
}
.onboarding-main .journey-guide { stroke-width: 1; }
.onboarding-main .journey-line { stroke: var(--kk-data-energy); stroke-width: 2; }
.onboarding-main .journey-labels { margin-top: 14px; }
.onboarding-main .journey-labels strong { font-size: 1rem; font-weight: 500; }
.onboarding-main .journey-labels small { font-size: .8125rem; line-height: 1.35; }
.onboarding-main .bmi-orientation header { display: block; }
.onboarding-main .bmi-orientation header h2 {
 font-family: var(--kk-font-editorial); font-weight: 400; font-size: 1.75rem; line-height: 1.25;
}
.onboarding-main .bmi-orientation header > p { margin-top: 12px; font-size: .9375rem; line-height: 1.6; }
.onboarding-main .bmi-segments { grid-template-columns: 2.5fr 6.5fr 5fr 10fr; }
.onboarding-main .bmi-segments .under { background: #e5eef3; }
.onboarding-main .bmi-segments .normal { background: var(--kk-green-100); }
.onboarding-main .bmi-segments .over { background: #f6edd7; }
.onboarding-main .bmi-segments .high { background: #f0dfdc; }
.onboarding-main .bmi-value-label b { font-size: 1rem; font-weight: 500; }
.onboarding-main .motivation-line { padding: 18px 22px; border-radius: var(--healthy-radius); background: var(--kk-green-50); font-size: 1rem; }
.onboarding-main .energy-model {
 margin: 24px 0; padding: 24px; gap: 24px; border-radius: var(--healthy-radius);
 background: var(--kk-bg-surface); border-color: var(--kk-border-subtle);
}
.onboarding-main .energy-row > div { flex-wrap: wrap; }
.onboarding-main .energy-row span, .onboarding-main .energy-deficit span { font-size: 1rem; }
.onboarding-main .energy-row strong, .onboarding-main .energy-deficit strong { font-size: 1.25rem; font-weight: 550; }
.onboarding-main .energy-row i { height: 10px; background: var(--kk-bg-subtle); }
.onboarding-main .energy-deficit { border-top: 1px solid var(--kk-border-subtle); padding-top: 20px; gap: 12px; flex-wrap: wrap; }
.onboarding-main .science-average { font-size: 1rem; line-height: 1.6; }
.onboarding-main .science-trust-card {
 display: block; padding: 22px; background: var(--kk-green-50);
 border-color: var(--kk-border-subtle); border-radius: var(--healthy-radius);
}
.onboarding-main .science-mark, .onboarding-main .result-science-seal > span { display: none; }
.onboarding-main .science-trust-card p { font-size: .9375rem; line-height: 1.6; }
.onboarding-main .science-sources { margin-top: 18px; border-radius: 14px; }
.onboarding-main .science-sources summary { min-height: 44px; padding-block: 10px; font-size: 1rem; font-weight: 500; }
.onboarding-main .fg-principle {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22em), 1fr));
 gap: var(--healthy-gap); padding: 24px; background: var(--kk-bg-surface);
 border-radius: var(--healthy-radius); margin-bottom: 22px;
}
.onboarding-main .fg-principle p { font-size: 1rem; line-height: 1.65; margin: 10px 0 0; }
.onboarding-main .early-principle-step > p:last-child { font-size: .9375rem; line-height: 1.6; color: var(--kk-text-secondary); }
.onboarding-main .onboarding-flow .onboarding-result .result-summary { text-align: left; }
.onboarding-main .onboarding-flow .onboarding-result .result-hero {
 width: 100%; margin: 24px 0; padding: 24px; border-radius: var(--healthy-radius); text-align: left;
 background: var(--kk-green-50);
}
.onboarding-main .onboarding-flow .onboarding-result .result-hero strong { font-size: clamp(2.75rem, 4.5vw, 4rem); font-weight: 550; }
.onboarding-main .onboarding-flow .onboarding-result .result-hero span { font-size: 1rem; font-weight: 500; }
.onboarding-main .onboarding-flow .onboarding-result .result-date { font-size: 1rem; line-height: 1.65; margin: 0 0 12px; }
.onboarding-main .onboarding-flow .onboarding-result .result-reassurance { font-size: .9375rem; font-weight: 400; line-height: 1.6; color: var(--kk-text-secondary); }
.onboarding-main .onboarding-flow .onboarding-result .projection-card {
 margin: 0; padding: 24px; border-radius: var(--healthy-radius);
 background: var(--kk-bg-surface); border: 1px solid var(--kk-border-subtle);
}
.onboarding-main .projection-card figcaption { margin: 0 0 22px; font-size: 1.125rem; font-weight: 550; color: var(--kk-text-primary); }
.onboarding-main #projection-chart { min-height: 180px; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), var(--kk-border-subtle) calc(25% - 1px), var(--kk-border-subtle) 25%); }
.onboarding-main #projection-line { stroke-width: 3; }
.onboarding-main #projection-start-dot, .onboarding-main #projection-end-dot, .onboarding-main #projection-milestone-dot { fill: white; stroke-width: 2; stroke: var(--kk-data-energy); }
.onboarding-main .projection-labels { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,7em),1fr)); gap: 14px; font-size: .875rem; line-height: 1.5; }
.onboarding-main .projection-labels > span { min-width: 0; }
.onboarding-main .onboarding-flow .onboarding-result .result-meta-grid {
 display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23em), 1fr));
 gap: var(--healthy-gap); margin-top: 26px; border-top: 1px solid var(--kk-border-subtle); padding-top: 20px;
}
.onboarding-main .onboarding-flow .onboarding-result .result-science-seal,
.onboarding-main .onboarding-flow .onboarding-result .result-benefit { margin: 0; padding: 0; border: 0; background: transparent; width: auto; box-shadow: none; }
.onboarding-main .result-science-seal { display: block; }
.onboarding-main .result-science-seal strong { font-size: 1rem; font-weight: 500; }
.onboarding-main .onboarding-flow .onboarding-result .result-science-seal small,
.onboarding-main .onboarding-flow .onboarding-result .result-benefit p { font-size: .9375rem; line-height: 1.6; }
.onboarding-main .onboarding-flow .onboarding-result .result-benefit h2 { font-size: 1rem; font-weight: 500; }
.onboarding-main .result-warning { font-size: .9375rem; padding: 16px 20px; line-height: 1.6; }
.onboarding-main .result-details { font-size: 1rem; padding: 16px 20px; }
.onboarding-main .result-details summary { min-height: 44px; font-weight: 500; }
.onboarding-main .result-details dl div { flex-wrap: wrap; }
.onboarding-main .onboarding-legal-note { margin: 24px 0; padding: 16px 20px; background: var(--kk-bg-surface); border: 1px solid var(--kk-border-subtle); border-radius: 14px; text-align: left; }
.onboarding-main .onboarding-legal-note p { margin: 0; font-size: .9375rem; line-height: 1.6; }
.onboarding-main .onboarding-legal-note p + p { margin-top: 8px; color: var(--kk-text-secondary); }
.onboarding-main .onboarding-legal-note a { color: var(--kk-action-primary-active); text-underline-offset: 3px; }
.onboarding-main .choice-card:has(input:focus-visible) { outline: 3px solid var(--kk-focus); outline-offset: 3px; }
.onboarding-main .choice-card:has(input:disabled) { background: var(--kk-bg-subtle); border-color: var(--kk-border-subtle); box-shadow: none; color: var(--kk-text-disabled); cursor: not-allowed; }
@media (hover:hover) and (pointer:fine) {
 .onboarding-main .choice-card:not(:has(input:disabled)):hover { border-color: var(--kk-green-300); background: var(--kk-neutral-25); box-shadow: 0 3px 12px rgb(19 57 42 / 6%); }
 .onboarding-main .choice-card:has(input:checked):not(:has(input:disabled)):hover { border-color: var(--kk-action-primary); background: var(--kk-green-100); box-shadow: inset 0 0 0 1px var(--kk-action-primary); }
}
@media (max-width: 600px) {
 .onboarding-main { width: calc(100% - 24px); }
 .onboarding-main .onboarding-flow { padding: 20px 16px; border-radius: 22px; }
 .onboarding-main .flow-header { gap: 12px; }
 .onboarding-main .flow-stages li { font-size: .6875rem; }
 .onboarding-main .journey-card, .onboarding-main .bmi-orientation, .onboarding-main .energy-model,
 .onboarding-main .onboarding-flow .onboarding-result .projection-card,
 .onboarding-main .onboarding-flow .onboarding-result .result-hero, .onboarding-main .fg-principle { padding: 18px 16px; }
 .onboarding-main .energy-row > div, .onboarding-main .energy-deficit { display: grid; gap: 6px; }
 .onboarding-main .projection-labels { gap: 8px; }
}