/* Vandaag (today.js) + Voortgang (progress.js). Tokens only (tokens.css); components from base.css. */

/* ======================= shared ======================= */
/* Over target (U5): its own colour, not the protein orange. Local so tokens.css stays untouched. */
.today, .progress, dialog.sheet { --dy-over: var(--red); }
.bar-protein { background: var(--c-protein); }
.bar-carbs { background: var(--c-carbs); }
.bar-fat { background: var(--c-fat); }
.bar-fiber { background: var(--c-fiber); }
.stat.fiber .v { color: var(--c-fiber); }
.dy-credit { margin: 0; padding: 0 var(--inset-list); color: var(--label-2); font: var(--t-caption); }
.dy-notice { display: flex; align-items: flex-start; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 0; font: var(--t-footnote); color: var(--label-2); }
.dy-notice svg { width: 16px; height: 16px; flex: none; color: var(--tint); stroke-width: 2.4; margin-top: 1px; }
.dy-seg-full { display: grid; width: 100%; }
.dy-seg-full button { min-height: 32px; }
.dy-pad { margin: 0; padding: 0 var(--inset-list); }
.dy-select {
  border: 0; background: none; color: var(--label-2); font: var(--t-body); text-align: right; text-align-last: right;
  min-height: 32px; padding: 0 var(--space-1); cursor: pointer; max-width: 60%; -webkit-appearance: none; appearance: none;
}
.dy-select:hover { color: var(--label); }
.dy-unit-text { font: var(--t-body); color: var(--label-2); flex: none; width: 2.9em; }
.row .dy-unit-text:empty { display: none; }
.dy-add { color: var(--tint); }
.dy-add .row-title { color: var(--tint); }
.dy-add-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--label-on-tint); flex: none; }
.dy-add-icon svg { width: 15px; height: 15px; stroke-width: 2.6; }
.row:has(> .dy-add-icon) { --sep-inset: calc(var(--inset-list) + 24px + var(--space-3)); }
.dy-danger { justify-content: center; color: var(--red); font: var(--t-body); cursor: pointer; }
.dy-danger:hover { background: var(--red-fill) !important; }
.dy-confirm { gap: var(--space-2); flex-wrap: wrap; }
.dy-confirm .row-title { font: var(--t-subhead); color: var(--label-2); }
.dy-confirm-go { background: var(--red); color: var(--label-on-tint); }
.dy-confirm-go:hover { background: var(--red); opacity: 0.88; }

/* ======================= Vandaag ======================= */
.today { transition: opacity var(--dur) var(--ease); }
.today.dy-loading { opacity: 0.55; pointer-events: none; }

/* week strip */
.dy-strip {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: var(--space-2);
  background: var(--bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.dy-day {
  display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 76px; padding: var(--space-1) 0;
  border: 0; background: none; border-radius: var(--radius); cursor: pointer; color: var(--label);
  transition: background var(--dur-fast) var(--ease);
}
.dy-day:hover { background: var(--fill); }
.dy-dow { font: var(--t-caption); font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.03em; }
.dy-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: var(--t-headline); font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.dy-day.is-today .dy-num { color: var(--tint); font-weight: 700; }
.dy-day.is-future .dy-num { color: var(--label-2); }
.dy-day[aria-current="date"] .dy-num { background: var(--label); color: var(--bg-elevated); font-weight: 700; }
.dy-day.is-today[aria-current="date"] .dy-num { background: var(--tint); color: var(--label-on-tint); }
.dy-dbar { display: flex; width: 26px; height: 4px; border-radius: var(--radius-pill); background: var(--fill); overflow: hidden; }
.dy-dbar i { display: block; flex: none; height: 100%; background: var(--tint); transition: width var(--dur-slow) var(--ease-out); }
.dy-dbar i.dy-dbar-plan { background: color-mix(in srgb, var(--tint) 35%, transparent); }
.dy-dbar.over i.dy-dbar-eaten { background: var(--dy-over); }
/* future days: planned food drawn as an outline, nothing is eaten yet (V6) */
.dy-day.is-future .dy-dbar { background: none; box-shadow: inset 0 0 0 1px var(--separator); }
.dy-day.is-future .dy-dbar i.dy-dbar-plan { background: none; box-shadow: inset 0 0 0 1px var(--tint); border-radius: var(--radius-pill); }
/* past days with rows still "gepland" (V1): a dashed ring around the date */
.dy-day.has-open .dy-num { box-shadow: inset 0 0 0 1.5px var(--orange); }
.dy-day.has-open[aria-current="date"] .dy-num { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 3.5px var(--orange); }
.dy-weekavg { margin: calc(-1 * var(--space-2)) 0 0; padding: 0 var(--inset-list); color: var(--label-2); }

/* weigh-in prompt + open-day notice (V15, V1/V7) */
.dy-weigh { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--inset-list); }
.dy-weigh-l { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--space-2); font: var(--t-subhead); color: var(--label-2); }
.dy-weigh-l svg { width: 18px; height: 18px; color: var(--tint); flex: none; }
.dy-weigh .pg-kg-wrap { min-height: 36px; }
.dy-weigh .pg-kg { min-height: 36px; font: var(--t-headline); width: 3.2em; }
.dy-open {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--inset-list);
  border-radius: var(--radius-lg); background: var(--orange-fill); font: var(--t-subhead); color: var(--label);
}
.dy-open > svg { width: 18px; height: 18px; color: var(--orange); flex: none; stroke-width: 2.2; }
.dy-open-text { flex: 1 1 14em; min-width: 0; }
.dy-open-acts { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }

/* summary */
.dy-sum { gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3) var(--inset-list); }
.dy-sum-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.dy-sum-eaten, .dy-sum-left { display: grid; gap: 2px; min-width: 0; }
.dy-sum-left { justify-items: end; text-align: right; }
.dy-sum-l { font: var(--t-footnote); font-weight: 600; color: var(--label-2); }
.dy-sum .v { font: var(--t-metric-lg); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.dy-sum .v .u { font: var(--t-subhead); font-weight: 600; color: var(--label-2); margin-left: 4px; letter-spacing: 0; }
.dy-sum-left .v { font: var(--t-metric); color: var(--tint); }
.dy-sum-left.over .v { color: var(--dy-over); }
.dy-sum-left.near .v { color: var(--label); }
.dy-sum-plan { color: var(--label-2); }
.dy-over-note { margin: calc(-1 * var(--space-2)) 0 0; color: var(--dy-over); }
.dy-sum-of { font: var(--t-subhead); color: var(--label-2); }
.dy-kbar { height: 10px; display: flex; }
.dy-kbar i, .dy-mbar i { flex: none; border-radius: 0; }
.dy-kbar i.dy-k-eaten { background: var(--c-kcal); }
.dy-kbar i.dy-k-plan { background: color-mix(in srgb, var(--c-kcal) 32%, transparent); }
.dy-kbar.over i.dy-k-eaten { background: var(--dy-over); }
.dy-mbar { display: flex; }
.dy-mbar i.dy-m-plan { opacity: 0.32; }
.dy-macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); padding-top: var(--space-1); }
.dy-macro { display: grid; gap: 4px; min-width: 0; }
.dy-macro-l { font: var(--t-caption); font-weight: 600; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-macro-v { font: var(--t-footnote); color: var(--label-2); white-space: nowrap; }
.dy-macro-v b { font: var(--t-headline); color: var(--label); }
.dy-macro .macro-bar { height: 6px; }
.dy-goal { margin: 0; padding-top: var(--space-2); border-top: 0.5px solid var(--separator); }
@media (max-width: 599px) {
  .dy-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
  .dy-sum .v { font: var(--t-metric); }
  .dy-sum-left .v { font: var(--t-metric-sm); }
}

/* sections */
.dy-meals { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.dy-sec-head { display: flex; align-items: baseline; gap: var(--space-2); }
.dy-sec-head > span:first-child { color: var(--label); font-weight: 600; }
.dy-sec-time { text-transform: none; letter-spacing: 0; }
.dy-sec-kcal { margin-left: auto; text-transform: none; letter-spacing: 0; }
.dy-entry { align-items: center; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.dy-entry-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); font: var(--t-footnote); }
.dy-entry-kcal { font: var(--t-headline); color: var(--label); }
.dy-entry-kcal small { font: var(--t-footnote); color: var(--label-2); }
.dy-entry.skipped .row-title { text-decoration: line-through; color: var(--label-2); }
.dy-entry.skipped .dy-entry-kcal { text-decoration: line-through; color: var(--label-2); }
/* planned rows: dimmed until you tick them off (V6) */
.dy-entry.planned .row-title { color: var(--label-2); }
.dy-entry.planned .dy-entry-kcal { color: var(--label-2); font-weight: 500; }
.dy-entry-wrap { display: flex; align-items: center; min-width: 0; }
.dy-entry-wrap > .row { flex: 1; min-width: 0; padding-left: var(--space-2); --sep-inset: 0px; }
.dy-check, .dy-check-gap { flex: none; width: 26px; height: 26px; margin-left: var(--inset-list); }
.dy-check {
  display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px solid var(--label-3); background: none;
  color: transparent; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dy-check svg { width: 15px; height: 15px; stroke-width: 2.8; }
.dy-check:hover { border-color: var(--tint); color: var(--tint); }
.dy-check.on { background: var(--tint); border-color: var(--tint); color: var(--label-on-tint); }
@media (pointer: coarse) { .dy-check { width: 30px; height: 30px; } .dy-check-gap { width: 30px; } }
.dy-tag.conflict, .dy-tag.warn { color: var(--orange); }
.dy-sec-kcal.is-plan { color: var(--label-2); font-style: normal; }
.dy-sec-all {
  border: 0; background: none; padding: 2px var(--space-2); margin: -2px 0; border-radius: var(--radius-pill); cursor: pointer;
  color: var(--tint); font: var(--t-footnote); font-weight: 600; text-transform: none; letter-spacing: 0;
}
.dy-sec-all:hover { background: var(--tint-fill); }
.dy-sec-more {
  width: 28px; height: 28px; margin: -6px 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: none; color: var(--label-2); cursor: pointer; flex: none;
}
.dy-sec-more:hover { background: var(--fill); color: var(--label); }
.dy-sec-more svg { width: 18px; height: 18px; stroke-width: 3; }
.dy-sec-kcal:empty + .menu-wrap, .dy-sec-kcal:empty + .dy-sec-all { margin-left: auto; }
.dy-snack-empty { display: flex; align-items: center; justify-content: space-between; padding-right: var(--space-2); }
.dy-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--label-2); font: var(--t-footnote); font-weight: 600; }
.dy-tag svg { width: 13px; height: 13px; stroke-width: 2.2; }
.dy-tag.eaten { color: var(--tint); }
.dy-tag.skip { color: var(--label-2); }
.dy-macroline { color: var(--label-2); }
/* recipe / standard rows (docs/PLAN.md §11): kind tag + ingredient names on one line */
.dy-tag.kind { color: var(--label-2); }
.dy-names { flex: 1 1 8em; min-width: 0; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Snacks: visually secondary — compact rows, quiet heading, a single text button when empty. */
.dy-snack .dy-sec-head > span:first-child { font-weight: 400; color: var(--label-2); }
.dy-snack .dy-entry { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.dy-snack .row-title, .dy-snack .dy-entry-kcal { font: var(--t-subhead); }
.dy-snack .dy-entry-kcal { font-weight: 600; }
.dy-sec-add {
  width: 28px; height: 28px; margin: -6px calc(-1 * var(--space-2)) -6px 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: none; color: var(--tint); cursor: pointer; flex: none; transition: background var(--dur-fast) var(--ease);
}
.dy-sec-add:hover { background: var(--tint-fill); }
.dy-sec-add svg { width: 18px; height: 18px; stroke-width: 2.4; }
@media (pointer: coarse) { .dy-sec-add { width: var(--hit); height: var(--hit); margin-block: -14px; } }
.dy-sec-kcal:empty + .dy-sec-add { margin-left: auto; }
.dy-sec-head .menu-wrap { display: inline-flex; }
.dy-snack-empty { margin: calc(-1 * var(--space-3)) 0; }
.dy-snack-add {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 36px; padding: 0 var(--space-3) 0 var(--space-2);
  margin-left: calc(var(--inset-list) - var(--space-2)); border: 0; border-radius: var(--radius-pill); background: none;
  color: var(--tint); font: var(--t-subhead); font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease);
}
.dy-snack-add:hover { background: var(--tint-fill); }
.dy-snack-add svg { width: 16px; height: 16px; stroke-width: 2.4; }
.dy-snack-time { color: var(--label-2); font-weight: 400; }
@media (pointer: coarse) { .dy-snack-add { min-height: var(--hit); } }
.dy-hint { margin: 0; padding: 0 var(--inset-list); }

/* entry sheet */
.dy-sheet { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.dy-nstats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.dy-nstats .stat { padding: var(--space-2) var(--space-3) var(--space-3); gap: 2px; }
.dy-nstats .stat .v { font: var(--t-metric-sm); }
.dy-nstats .stat .l { font: var(--t-caption); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599px) {
  .dy-nstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dy-nstats .stat.kcal { grid-column: 1 / -1; }
  .dy-nstats .stat .v { font: 700 18px/22px var(--font-rounded); }
}
/* editable ingredient lines (entry sheet, standard-meal editor) */
.dy-line { gap: var(--space-2); min-height: 52px; padding-top: var(--space-1); padding-bottom: var(--space-1); padding-right: var(--space-1); }
.dy-line .row-title { font: var(--t-subhead); }
.dy-line-kcal { font: var(--t-footnote); }
.dy-line-kcal:empty { display: none; }
.dy-line-amt { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; }
.dy-line-qty { width: 5.2em; min-height: 36px; padding: 0 var(--space-2); text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.dy-line-qty::-webkit-outer-spin-button, .dy-line-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dy-line-qty[aria-invalid] { box-shadow: inset 0 0 0 1.5px var(--red); }
.dy-line-unit { width: 3.2em; font: var(--t-subhead); color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-line-warn { display: flex; align-items: flex-start; gap: 4px; font: var(--t-footnote); color: var(--orange); white-space: normal; }
.dy-line-warn svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.dy-line-x { min-width: var(--hit); min-height: var(--hit); padding: 0; display: grid; place-items: center; color: var(--label-3); }
.dy-line-x svg { width: 16px; height: 16px; }
.dy-line-x:hover { color: var(--red); opacity: 1; }
.dy-lines .dy-add { min-height: 48px; }
.dy-nstats.is-stale { opacity: 0.5; transition: opacity var(--dur) var(--ease); }
.dy-food-names { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-src svg { width: 12px; height: 12px; }
.dy-food[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.dy-ingr .row { min-height: 40px; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.dy-ingr .row-title { font: var(--t-subhead); }
.dy-ingr .row-detail { font: var(--t-subhead); }

/* add sheet */
.dy-pane { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.dy-results:empty { display: none; }
.dy-food { min-height: 56px; }
.dy-food .row-title { font: var(--t-body); }
.dy-src { flex: none; }
.dy-back { justify-self: start; margin-bottom: calc(-1 * var(--space-2)); }
.dy-food-head { display: grid; gap: 2px; padding: 0 var(--inset-list); }
.dy-food-head .footnote { margin: 0; }
.dy-amt { width: 4.5em !important; font: var(--t-headline) !important; }
.dy-unit { display: inline-flex; flex: none; }
.dy-unit-seg button { min-height: 28px; padding: 0 var(--space-3); }
.row input.inline.dy-wide { flex: 1; width: auto; min-width: 8em; }

/* product pictures + every supermarket (docs/PLAN.md §9) */
/* pictures: the shared .thumb (base.css, ui.js thumb, §13) */
.dy-results { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.dy-res-wrap { gap: var(--space-3); }
.dy-store-food .row-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dy-store-food .row-sub { font: var(--t-footnote); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-msg { min-height: 48px; }
.dy-msg .spinner { flex: none; }
.dy-row-spin { width: 16px; height: 16px; border-width: 2px; flex: none; }
.dy-unavail { margin-top: calc(-1 * var(--space-3)) !important; color: var(--label-2) !important; }
.dy-food-head.has-thumb { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
.dy-food-head-text { display: grid; gap: 2px; min-width: 0; }
.dy-food-head-text .footnote { margin: 0; }
.dy-food-sub { color: var(--label); }
.dy-credit-off { margin: 0; font: var(--t-caption); color: var(--label-2); }

/* add sheet: scan, recents, replace prompt, conflicts, toast action, portion stepper */
.dy-search-row { display: flex; align-items: center; gap: var(--space-2); }
.dy-search-row > .search { flex: 1; min-width: 0; }
.dy-scan { flex: none; min-width: var(--hit); min-height: var(--hit); padding: 0; display: grid; place-items: center; color: var(--tint); }
.dy-scan svg { width: 22px; height: 22px; }
.dy-scan-video { width: 100%; max-height: 50vh; border-radius: var(--radius-lg); background: #000; object-fit: cover; }
.dy-recent-add { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-fill); color: var(--tint); }
.dy-recent-add svg { width: 16px; height: 16px; stroke-width: 2.6; }
.dy-more-nevo .row-title { color: var(--tint); font: var(--t-subhead); }
.dy-replace, .dy-conflict {
  display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-3) var(--inset-list);
  border-radius: var(--radius-lg); background: var(--orange-fill); font: var(--t-subhead);
}
.dy-replace[hidden] { display: none; }
.dy-replace p, .dy-conflict p { margin: 0; display: flex; align-items: flex-start; gap: var(--space-2); }
.dy-replace p svg, .dy-conflict p svg { width: 17px; height: 17px; flex: none; color: var(--orange); margin-top: 1px; }
.dy-replace-acts, .dy-conflict-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dy-toast { padding-right: var(--space-2); }
.dy-toast-btn {
  border: 0; background: none; color: var(--tint); font: inherit; font-weight: 700; cursor: pointer;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); min-height: 32px;
}
.dy-toast-btn:hover { background: color-mix(in srgb, var(--tint) 18%, transparent); }
dialog .toast { position: fixed; }
.dy-por-row { gap: var(--space-3); }
.dy-por-val { min-width: 6.5em; }

/* ======================= Voortgang ======================= */
.progress { max-width: var(--content-max); }
.pg-seg { justify-self: start; min-width: 260px; }
@media (max-width: 599px) { .pg-seg { justify-self: stretch; } }
.pg-seg button { min-height: 32px; }
.pg-empty { padding: 0; }

/* weigh today */
.pg-weigh { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--inset-list); }
.pg-weigh-label { flex: 1; min-width: 0; display: grid; gap: 2px; cursor: text; }
.pg-weigh-label .footnote { color: var(--label-2); }
.pg-kg-wrap { display: inline-flex; align-items: baseline; gap: var(--space-1); padding: 0 var(--space-3); border-radius: var(--radius); background: var(--fill); min-height: var(--hit); align-items: center; }
.pg-kg { width: 3.6em; border: 0; background: none; padding: 0; font: var(--t-metric-sm); font-variant-numeric: tabular-nums; text-align: right; color: var(--label); min-height: var(--hit); }
.pg-kg::placeholder { color: var(--label-3); }
.pg-kg[aria-invalid="true"] { box-shadow: none; color: var(--red); }
.pg-kg-unit { font: var(--t-headline); color: var(--label-2); }
.pg-weigh-btn { flex: none; min-width: 92px; }
@media (max-width: 420px) {
  .pg-weigh { flex-wrap: wrap; }
  .pg-weigh-label { flex-basis: 100%; }
  .pg-kg-wrap { flex: 1 1 0; min-width: 0; }
  .pg-kg { flex: 1 1 0; width: 0; min-width: 0; }
}

/* chart card */
.pg-chart-card { gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3); }
.pg-range { display: grid; width: 100%; }
.pg-range button { min-height: 28px; }
.pg-readout { display: grid; gap: 0; min-height: 76px; align-content: start; }
.pg-ro-l { font: var(--t-footnote); font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.02em; }
.pg-ro-v .v { font: var(--t-metric-lg); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.pg-ro-v .u { font: var(--t-headline); color: var(--label-2); margin-left: 4px; letter-spacing: 0; }
.pg-ro-s { font: var(--t-footnote); color: var(--label-2); }
.pg-chart { width: 100%; min-height: 220px; touch-action: pan-y; }
.pg-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font); user-select: none; -webkit-user-select: none; }
.pg-grid { stroke: var(--separator); stroke-width: 0.5; }
.pg-vgrid { stroke: var(--separator); stroke-width: 0.5; stroke-dasharray: 2 3; }
.pg-ylab, .pg-xlab { fill: var(--label-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.pg-goal { stroke: var(--label-2); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.pg-area { fill: url(#pg-area); stroke: none; }
.pg-stop-a { stop-color: var(--tint); stop-opacity: 0.18; }
.pg-stop-b { stop-color: var(--tint); stop-opacity: 0; }
.pg-dot { fill: var(--chart-dot); }
.pg-trend { fill: none; stroke: var(--tint); stroke-width: 2.75; stroke-linejoin: round; stroke-linecap: round; }
.pg-last { fill: var(--tint); stroke: var(--bg-elevated); stroke-width: 2.5; }
.pg-last-lab { fill: var(--tint); font-size: 13px; font-weight: 600; stroke: var(--bg-elevated); stroke-width: 4px; paint-order: stroke; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.pg-cursor { stroke: var(--label-3); stroke-width: 1; }
.pg-cursor-dot { fill: var(--bg-elevated); stroke: var(--tint); stroke-width: 2.5; }
.pg-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font: var(--t-caption); color: var(--label-2); }
.pg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pg-key { display: inline-block; flex: none; }
.pg-key.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chart-dot); }
.pg-key.line { width: 16px; height: 3px; border-radius: 2px; background: var(--tint); }
.pg-key.dash { width: 16px; height: 0; border-top: 1.5px dashed var(--label-2); }
.pg-key.met { width: 7px; height: 7px; border-radius: 50%; background: var(--tint); }
.pg-met { fill: var(--tint); }

/* stats */
.pg-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.pg-stat .v { font: var(--t-metric-sm); }
.pg-stat-note { font: var(--t-caption); color: var(--label-2); }
/* Inname (V15) */
.pg-week { align-items: center; gap: var(--space-3); }
.pg-week .row-main { gap: 4px; }
.pg-week-bar { height: 5px; max-width: 220px; }
.pg-week-bar i { background: var(--c-kcal); }
.pg-week-bar i.over { background: var(--dy-over); }
.pg-week-v { display: grid; justify-items: end; gap: 1px; flex: none; text-align: right; }
.pg-week-v b { font: var(--t-headline); color: var(--label); }
.pg-week-v small { font: var(--t-footnote); color: var(--label-2); }
.pg-tdee-card { padding: var(--space-3) var(--space-4); }
.pg-tdee { max-height: 120px; }
.pg-more .row-title { color: var(--tint); }
.pg-date { width: auto; min-width: 9em; color: var(--label); }
.pg-date:disabled { color: var(--label-2); opacity: 1; }

/* targets */
.pg-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(-1 * var(--space-2)); }
.pg-sec-head .bar-btn { min-height: 32px; font: var(--t-subhead); }
.pg-targets { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pg-targets .stat .v { font: var(--t-metric-sm); }
.pg-targets .pg-kcal-tile .v { font: var(--t-metric-sm); }
@media (max-width: 699px) {
  .pg-targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-targets .pg-kcal-tile { grid-column: 1 / -1; }
  .pg-targets .pg-kcal-tile .v { font: var(--t-metric); }
}
.pg-empty-small { padding: var(--space-4) var(--inset-list); }
.pg-empty-small p { margin: 0; font: var(--t-subhead); }

/* check-in card */
.pg-ci { gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) var(--inset-list); }
.pg-ci-head { display: flex; align-items: center; gap: var(--space-3); }
.pg-ci-icon { width: var(--row-icon); height: var(--row-icon); border-radius: 7px; display: grid; place-items: center; background: var(--tint); color: var(--label-on-tint); flex: none; }
.pg-ci-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.pg-ci-title { flex: 1; min-width: 0; display: grid; }
.pg-ci-text { margin: 0; font: var(--t-callout); }
.pg-ci-text.muted { font: var(--t-subhead); }
.pg-facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.pg-fact { background: var(--bg-elevated-2); border-radius: var(--radius); padding: var(--space-2) var(--space-3); display: grid; gap: 2px; align-content: start; min-width: 0; }
.pg-fact dt { font: var(--t-caption); font-weight: 600; color: var(--label-2); }
.pg-fact dd { margin: 0; font: var(--t-headline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-fact dd small { display: block; font: var(--t-caption); color: var(--label-2); font-weight: 400; }
@media (max-width: 699px) { .pg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-reasons { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; font: var(--t-footnote); color: var(--label-2); }
.pg-cmp { width: 100%; border-collapse: collapse; font: var(--t-subhead); }
.pg-cmp th, .pg-cmp td { padding: var(--space-2) 0; text-align: right; font-weight: 400; }
.pg-cmp thead th { font: var(--t-footnote); color: var(--label-2); padding-top: 0; }
.pg-cmp tbody th { text-align: left; color: var(--label); }
.pg-cmp tbody tr > * { border-top: 0.5px solid var(--separator); }
.pg-cmp td { color: var(--label-2); }
.pg-cmp td b { color: var(--label); font-weight: 600; }
.pg-cmp td.up { color: var(--tint); font-weight: 600; }
.pg-cmp td.down { color: var(--orange); font-weight: 600; }
.pg-ci-applied { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--t-subhead); color: var(--label-2); }
.pg-ci-applied svg { width: 18px; height: 18px; color: var(--tint); stroke-width: 2.4; flex: none; }

/* goal sheet */
.pg-sex { flex: none; }
.pg-sex button { min-height: 28px; padding: 0 var(--space-4); }

/* calendar */
.pg-goal-row .row-main { flex: none; }
.pg-goal-row .row-detail { flex: 1; min-width: 0; white-space: normal; text-align: right; }
.dy-ah-more .dy-ah-title { color: var(--tint); }

/* amount control (pak / portie / stuk / gewicht) — reuses the Voorraad stepper (planner.css .gr-*) */
.dy-amount { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.dy-unit-btn { min-width: 0; gap: var(--space-1); }
.dy-amount-row { flex-wrap: wrap; row-gap: var(--space-2); }
.dy-amount-hint { font: var(--t-footnote); color: var(--label-2); }
.dy-amount-row > .row-main { min-width: 6.5em; }
.dy-amount-row .row-title { white-space: nowrap; }
.list:has(.dy-amount-row) { overflow: visible; }      /* the unit menu must not be clipped by the list */
.list:has(.dy-amount-row) .menu { z-index: 30; }