/* diet.css — multi-column diet planner (diet.html) */
.diet { width: min(100% - 2 * var(--gutter), 100rem); margin-inline: auto; }
.diet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); padding-block: var(--s-4) var(--s-3); }
.diet-head h1 { font-size: var(--step-3); }
.diet-head p { margin: 0; }

/* ---------- sticky scoreboard ---------- */
.scoreboard {
  position: sticky; top: var(--header-h); z-index: 30;
  display: grid; grid-template-columns: auto minmax(14rem, 1fr); gap: var(--s-3) var(--s-6); align-items: center;
  padding: var(--s-2) var(--s-5); margin-bottom: var(--s-4);
  background: var(--glaze); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
.scoreboard__empty { margin: 0; grid-column: 1 / -1; font-weight: 700; }
.sb-figs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.sb-fig { display: flex; flex-direction: column; line-height: 1.15; }
.sb-fig__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.sb-fig__val { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); display: inline-flex; align-items: center; gap: .4rem; }
.sb-fig__unit { font-size: .78rem; color: var(--ink-soft); }
.sb-fig__unit.is-good { color: var(--leaf-deep); font-weight: 700; }
.sb-fig--plan .sb-fig__val { color: var(--leaf-deep); }
.sb-fig--save .sb-fig__val { color: var(--leaf-deep); }
.sb-arrow { font-size: var(--step-2); color: var(--ink-soft); }
.sb-scale { position: relative; height: 2.6rem; }
.sb-track { position: absolute; left: 0; right: 0; top: 1.2rem; height: 10px; border-radius: 5px; background: var(--paper-deep); overflow: hidden; box-shadow: inset 0 1px 2px rgba(80,55,20,.18); }
.sb-track__fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--grade-a), var(--grade-c) 55%, var(--grade-e)); transition: width .4s var(--ease-out); }
.sb-tick { position: absolute; left: var(--at); top: 0; transform: translateX(-50%); font-size: .8rem; opacity: .75; }
.sb-pin { position: absolute; left: var(--at); top: calc(1.2rem + 5px); transform: translate(-50%, -50%); width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--glaze); box-shadow: var(--shadow-1); font-size: .75rem; transition: left .4s var(--ease-out); }
.sb-pin--target { border: 2px solid var(--tomato); z-index: 1; }
.sb-pin--now { border: 2px solid var(--ink-soft); }
.sb-pin--plan { border: 2px solid var(--leaf-deep); z-index: 2; }

/* ---------- grid ---------- */
/* Desktop: columns fill the viewport and each body scrolls on its own; heads stay put. */
.diet-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .95fr); grid-template-areas: "now levers goal"; height: var(--grid-h, auto); margin-bottom: var(--s-4); }
.panel--now { grid-area: now; }
.panel--levers { grid-area: levers; }
.panel--goal { grid-area: goal; }
.panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--glaze); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.panel__head { flex: none; padding: var(--s-3) var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); display: grid; gap: var(--s-2); }
.panel__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.panel__title h2 { font-size: var(--step-1); display: flex; align-items: center; gap: var(--s-2); }
.panel__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-3) var(--s-4) var(--s-4); scrollbar-gutter: stable; }
.step-num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: .9rem; flex: none; }

/* tabs (column 2) */
.tabs { display: flex; gap: var(--s-4); margin-bottom: calc(-1 * var(--s-3) - 1px); }
.tab { border: 0; background: none; font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink-soft); padding: .4rem 0 .5rem; border-bottom: 3px solid transparent; cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--leaf); }

@media (max-width: 1239px) {
  /* Two columns: "what you eat now" is a sticky side panel that scrolls inside;
     levers and target/nutrition stack on the right in normal page flow. */
  .diet-grid { height: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "now levers" "now goal"; align-items: start; }
  .panel--now { position: sticky; top: var(--now-top, 10rem); height: var(--now-h); }
  .panel--levers, .panel--goal { overflow: visible; }
  .panel--levers .panel__body, .panel--goal .panel__body { overflow: visible; }
}
/* Short or narrow screens: back to normal page flow. */
@media (max-width: 879px), (max-height: 599px) {
  .diet-grid { height: auto; grid-template-rows: none; }
  .panel, .panel--now { overflow: visible; position: static; height: auto; }
  .panel__body { overflow: visible; }
}
@media (max-width: 879px) {
  .diet-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "now" "levers" "goal"; }
  .scoreboard { grid-template-columns: 1fr; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); }
  .sb-fig__val { font-size: var(--step-1); }
  .sb-fig--save, .sb-arrow { display: none; }
  .sb-scale { height: 2.2rem; }
}

/* ---------- column 1 ---------- */
.start-row { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; }
.coverage__bar { height: 6px; border-radius: 3px; background: var(--paper-deep); overflow: hidden; }
.coverage__bar span { display: block; height: 100%; width: var(--w); background: var(--mustard); }
.coverage p { margin-top: var(--s-1); }
.cat { border-bottom: 1px solid var(--line); }
.cat__head { display: flex; align-items: center; gap: .45rem; padding: .55rem 0; font-weight: 700; cursor: pointer; list-style: none; }
.cat__head::-webkit-details-marker { display: none; }
.cat__head::after { content: "▸"; color: var(--ink-soft); font-weight: 400; margin-left: .2rem; }
.cat[open] > .cat__head::after { content: "▾"; }
.cat__head:hover .cat__name { text-decoration: underline; }
.cat__meta { margin-left: auto; font-weight: 400; }
.cat__more { margin: var(--s-1) 0 var(--s-2); }
.food-rows { list-style: none; margin: 0; padding: 0; }
.food-row { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; grid-template-areas: "e n c" "e n k"; gap: 0 var(--s-2); align-items: center; padding: .4rem 0; border-bottom: 1px dashed var(--line); }
.food-row__emoji { grid-area: e; font-size: 1.35rem; }
.food-row__name { grid-area: n; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.food-row__name > span:first-child { overflow-wrap: anywhere; }
.food-row .freq { grid-area: c; }
.food-row__kg { grid-area: k; justify-self: end; color: var(--ink-soft); min-height: 1em; }
.food-row.is-added .food-row__name > span:first-child { font-weight: 700; }

/* frequency control */
.freq { display: inline-flex; align-items: center; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--glaze); }
.freq.has-value { background: var(--leaf-tint); }
.freq__btn { width: 1.9rem; height: 1.9rem; border: 0; background: none; border-radius: 50%; font-size: 1.1rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.freq__btn:hover { background: var(--paper-deep); }
.freq__btn[disabled] { opacity: .35; cursor: default; }
.freq__n { width: 2.6rem; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 700; color: var(--ink); -moz-appearance: textfield; }
.freq__n::-webkit-inner-spin-button, .freq__n::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.freq__per { border: 0; border-left: 1.5px solid var(--line-strong); background: transparent; font: inherit; font-size: .85rem; color: var(--ink); padding: .25rem .5rem; border-radius: 0 var(--r-pill) var(--r-pill) 0; cursor: pointer; }

/* ---------- column 2 ---------- */
.insight { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--mustard-tint); }
.levers { list-style: none; padding: 0; margin: 0; }
.lever { padding: var(--s-2) 0 var(--s-3); border-bottom: 1px dashed var(--line); }
.lever.is-top .lever__name strong::after { content: " · big lever"; font-size: .72rem; font-weight: 700; color: var(--tomato-deep); text-transform: uppercase; letter-spacing: .04em; }
.lever__top { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }
.lever__emoji { font-size: 1.5rem; }
.lever__name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lever__kg { text-align: right; font-weight: 700; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.lever__kg > span:first-child { font-family: var(--font-display); font-size: var(--step-1); }
.lever__save { color: var(--leaf-deep); font-weight: 700; }
.lever__add { color: var(--tomato-deep); font-weight: 700; }
.lever__bar { position: relative; height: 14px; margin: var(--s-2) 0; border-radius: 7px; background: var(--paper-deep); }
.lever__now { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 7px; box-shadow: inset 0 0 0 2px var(--ink-soft); }
.lever__plan { position: absolute; inset: 3px auto 3px 3px; width: max(0px, calc(var(--w) - 6px)); border-radius: 5px; background: var(--grade-d); transition: width .4s var(--ease-out); }
.lever.is-changed .lever__plan { background: var(--leaf); }
.lever__ctl { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

.moves { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
.move { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); align-items: start; padding: var(--s-3); border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.move.is-applied { align-items: center; background: var(--leaf-tint); border-color: var(--leaf); }
.move__emoji { font-size: 1.5rem; }
.move__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.move__save { color: var(--leaf-deep); font-weight: 700; }
@media (max-width: 480px) { .move { grid-template-columns: 2rem minmax(0, 1fr); } .move > .btn { grid-column: 2; justify-self: start; } }

/* ---------- column 3 ---------- */
.target-input { display: flex; align-items: center; gap: var(--s-3); }
.target-input .slider { flex: 1; min-width: 0; }
.target-out { font-family: var(--font-display); font-weight: 700; min-width: 6.5ch; text-align: right; }
.stick { line-height: 2.2; margin: 0; }
.select--inline { display: inline-block; width: auto; padding-block: .2rem; min-height: 0; }
.eff__val { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); }
.is-good { color: var(--leaf-deep); }
.panel--goal #nutrition { margin-top: var(--s-3); }

.nutrs { list-style: none; padding: 0; margin: 0; }
.nutr { border-bottom: 1px dashed var(--line); }
.nutr__head { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem; grid-template-areas: "l p" "b b"; gap: .3rem var(--s-2); padding: .55rem 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.nutr__head:hover .nutr__label { text-decoration: underline; }
.nutr__label { grid-area: l; font-weight: 700; }
.nutr__label::after { content: " ▸"; color: var(--ink-soft); font-weight: 400; }
.nutr.is-open .nutr__label::after { content: " ▾"; }
.nutr__pct { grid-area: p; text-align: right; font-weight: 700; }
.nutr__bar { grid-area: b; position: relative; height: 10px; border-radius: 5px; background: var(--paper-deep); }
.nutr__fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: var(--leaf); transition: width .4s var(--ease-out); }
.nutr--low .nutr__fill { background: var(--mustard); }
.nutr--vlow .nutr__fill { background: var(--tomato); }
.nutr--vlow .nutr__pct { color: var(--tomato-deep); }
.nutr__ref { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.nutr__now { position: absolute; left: var(--at); top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--glaze); border: 2px solid var(--ink-soft); }
.nutr__body { padding: 0 0 var(--s-3); }
.nutr__body p { margin: 0; }
.boost__title { font-size: .9rem; margin: var(--s-2) 0 var(--s-1); }
.boosts { list-style: none; padding: 0; margin: 0; }
.boost { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; padding: .3rem 0; }
.boost__name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.bivalve { margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--paper); border: 1px dashed var(--line-strong); }

@media (forced-colors: active) {
  .lever__plan, .nutr__fill, .sb-track__fill, .coverage__bar span { background: Highlight; forced-color-adjust: none; }
}

/* food-group strip */
.groups { margin-top: var(--s-2); }
.groups__title { display: none; }
.groups__row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: var(--s-2); margin-top: .25rem; }
.groups__bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--paper-deep); }
.groups__bar span { width: var(--w); background: var(--c); transition: width .4s var(--ease-out); }
.groups__bar span + span { box-shadow: inset 1px 0 0 var(--glaze); }
.groups__legend { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: .2rem var(--s-3); }
.groups__legend li { display: inline-flex; align-items: center; gap: .3rem; }
.groups__key { width: .7rem; height: .7rem; border-radius: 2px; background: var(--c); }

@media (max-width: 520px) {
  .food-row { grid-template-areas: "e n k" "e c c"; row-gap: .35rem; }
  .food-row .freq { justify-self: start; }
  .food-row__kg { align-self: start; }
}

.diet [hidden] { display: none !important; }

/* ---------- column 1 actions + finder ---------- */
.panel__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.finder { display: grid; gap: var(--s-2); }
/* segmented filter: one connected control, unlike the action buttons */
.seg { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.seg__label { margin-right: var(--s-1); }
.seg__opt { border: 0; background: none; font: inherit; font-size: .88rem; color: var(--ink-soft); padding: .15rem .1rem; cursor: pointer; border-bottom: 2px solid transparent; }
.seg__opt:hover { color: var(--ink); }
.seg__opt[aria-checked="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--leaf); }

/* ---------- questionnaire ---------- */
.quiz { max-width: 52rem; margin: 0 auto var(--s-7); }
.quiz__intro h2 { font-size: var(--step-2); }
.quiz__intro p { margin-top: var(--s-2); }
.quiz__step { border: 0; padding: 0; margin: var(--s-6) 0 0; min-width: 0; }
.quiz__step legend { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); padding: 0; }
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--s-3); }
.type-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "e l" "e n"; gap: 0 var(--s-3); align-items: center; text-align: left; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 2px solid var(--line); background: var(--glaze); font: inherit; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-1); transition: border-color .15s, transform .15s; }
.type-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.type-card[aria-checked="true"] { border-color: var(--leaf); background: var(--leaf-tint); }
.type-card__emoji { grid-area: e; font-size: 2rem; }
.type-card__label { grid-area: l; font-weight: 700; }
.type-card__note { grid-area: n; }
.qs { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
.q { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--glaze); border: 1px solid var(--line); }
.q__head { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.q__emoji { font-size: 1.6rem; }
.q__label { display: flex; flex-direction: column; line-height: 1.25; }
.q__kg { font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.often { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.often__opt { font: inherit; font-size: .85rem; padding: .3rem .7rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--glaze); color: var(--ink); cursor: pointer; }
.often__opt:hover { background: var(--paper-deep); }
.often__opt[aria-checked="true"] { background: var(--leaf-deep); border-color: var(--leaf-deep); color: #fff; }
.often--kind .often__opt[aria-checked="true"] { background: var(--ink); border-color: var(--ink); }
.quiz__bar { position: sticky; bottom: var(--s-3); margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--glaze); border: 1px solid var(--line); box-shadow: var(--shadow-3); z-index: 20; }
.quiz__est { display: flex; flex-direction: column; }
.quiz__est-val { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); display: inline-flex; align-items: center; gap: .3rem; }

/* collapsible cards (column 3) */
.fold { border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.fold__head { display: flex; align-items: center; gap: var(--s-2); padding: .6rem var(--s-3); cursor: pointer; list-style: none; font-weight: 700; }
.fold__head::-webkit-details-marker { display: none; }
.fold__title { display: inline-flex; align-items: center; gap: .3rem; }
.fold__val { margin-left: auto; color: var(--ink-soft); font-weight: 700; }
.fold__head::after { content: "▸"; color: var(--ink-soft); font-weight: 400; }
.fold[open] > .fold__head::after { content: "▾"; }
.fold__body { padding: 0 var(--s-3) var(--s-3); }