/* 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 ======================= */
.page.today { max-width: 1080px; }
.today { transition: opacity var(--dur) var(--ease); }
.today.dy-loading { opacity: 0.55; pointer-events: none; }

/* week strip: a plain row of days on the grouped background (iOS Calendar / Fitness); swipe = week */
.dy-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; touch-action: pan-y; margin: calc(-1 * var(--space-2)) 0 0; }
.dy-day {
  display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 74px; padding: var(--space-1) 0;
  border: 0; background: none; border-radius: var(--radius-lg); cursor: pointer; color: var(--label);
  transition: background var(--dur-fast) var(--ease);
}
@media (hover: hover) { .dy-day:hover { background: var(--fill); } }
.dy-day:active .dy-num { transform: scale(0.9); }
.dy-dow { font: var(--t-caption); font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.03em; }
.dy-num { width: 36px; height: 36px; 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), transform var(--dur-fast) 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-2); 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): an orange 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-grouped), 0 0 0 3.5px var(--orange); }
.dy-weekavg { margin: calc(-1 * var(--space-3)) 0 0; padding: 0 var(--inset-list); color: var(--label-2); text-align: center; }

/* layout: one column; the summary column moves to the right on an iPad or a wide Mac window */
.dy-layout { display: grid; gap: var(--page-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.dy-side { display: grid; gap: var(--space-3); min-width: 0; }
.dy-main { display: grid; gap: var(--space-5); min-width: 0; align-content: start; }
@media (min-width: 760px) and (max-width: 899px), (min-width: 1100px) {
  .dy-layout { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main side"; }
  .dy-main { grid-area: main; }
  .dy-side { grid-area: side; position: sticky; top: calc(var(--bar-h) + var(--space-4)); }
}

/* weigh-in: one row (V15) */
.dy-weigh { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
.dy-weigh-icon { width: var(--row-icon); height: var(--row-icon); border-radius: 8px; display: grid; place-items: center; background: var(--tint-fill); color: var(--tint); flex: none; }
.dy-weigh-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.dy-weigh-l { flex: 1; min-width: 0; display: grid; cursor: text; }
.dy-weigh-t { font: var(--t-headline); }
.dy-weigh-s { font: var(--t-footnote); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-kg-wrap { display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--fill); min-height: 40px; flex: none; }
.dy-kg { width: 3.2em; border: 0; background: none; padding: 0; font: var(--t-headline); text-align: right; color: var(--label); min-height: 40px; }
.dy-kg::placeholder { color: var(--label-3); }
.dy-kg[aria-invalid="true"] { box-shadow: none; color: var(--red); }
.dy-kg-unit { font: var(--t-subhead); color: var(--label-2); }
.dy-weigh-save { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--tint); color: var(--label-on-tint); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.dy-weigh-save svg { width: 20px; height: 20px; stroke-width: 2.6; }
.dy-weigh-save:active { transform: scale(0.9); }
.dy-weigh-save:disabled { opacity: 0.5; }
@media (pointer: coarse) { .dy-weigh-save { width: var(--hit); height: var(--hit); } }

/* open-day notice (V1/V7) */
.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: kcal ring + eaten / planned / target, then the macros */
.dy-sum { gap: var(--space-4); padding: var(--space-4); }
.dy-sum-top { display: flex; align-items: center; gap: var(--space-5); }
.dy-ring { position: relative; width: 116px; height: 116px; flex: none; }
.dy-ring-svg { display: block; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.dy-ring-svg circle { fill: none; stroke-width: 11; }
.dy-ring-track { stroke: var(--fill); }
.dy-ring-eaten { stroke: var(--c-kcal); stroke-linecap: round; }
.dy-ring-plan { stroke: color-mix(in srgb, var(--c-kcal) 34%, transparent); stroke-linecap: round; }
.dy-ring-svg.over .dy-ring-eaten { stroke: var(--dy-over); }
.dy-ring-mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.dy-ring-v { font: var(--t-metric-sm); letter-spacing: -0.01em; }
.dy-ring-l { font: var(--t-caption); font-weight: 600; color: var(--label-2); }
.dy-ring.over .dy-ring-v { color: var(--dy-over); }
@media (prefers-reduced-motion: no-preference) {
  .dy-ring-eaten, .dy-ring-plan { animation: dy-ring-in 700ms var(--spring) both; }
}
@keyframes dy-ring-in { from { stroke-dasharray: 0 999; } }
.dy-facts { margin: 0; flex: 1; display: grid; gap: var(--space-2); min-width: 0; }
.dy-fact { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.dy-fact dt { display: inline-flex; align-items: center; gap: 6px; font: var(--t-subhead); color: var(--label-2); white-space: nowrap; }
.dy-fact dt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fill-2); flex: none; }
.dy-fact.eaten dt::before { background: var(--c-kcal); }
.dy-fact.planned dt::before { background: color-mix(in srgb, var(--c-kcal) 34%, transparent); }
.dy-sum.over .dy-fact.eaten dt::before { background: var(--dy-over); }
.dy-fact dd { margin: 0; font: var(--t-headline); white-space: nowrap; }
.dy-fact dd small { font: var(--t-footnote); color: var(--label-2); font-weight: 400; }
.dy-over-note { margin: calc(-1 * var(--space-2)) 0 0; color: var(--dy-over); }
.dy-macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.dy-macro { display: grid; gap: 5px; min-width: 0; }
.dy-macro-l { font: var(--t-caption); font-weight: 600; color: var(--label-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-macro .macro-bar { height: 6px; }
.dy-macro-v { font: var(--t-caption); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-macro-v b { font: var(--t-subhead); font-weight: 600; color: var(--label); }
.dy-mbar { display: flex; }
.dy-mbar i { flex: none; border-radius: 0; }
.dy-mbar i.dy-m-plan { opacity: 0.32; }
.dy-goal { margin: 0; padding-top: var(--space-3); border-top: 0.5px solid var(--separator); }

/* moments */
.dy-meals { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.dy-sec { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.dy-sec-head { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; padding-left: var(--inset-list); }
.dy-sec-name { margin: 0 auto 0 0; display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; font: var(--t-title-3); }
.dy-sec-time { font: var(--t-subhead); color: var(--label-2); }
.dy-sec-kcal { font: var(--t-subhead); color: var(--label-2); white-space: nowrap; }
.dy-sec-kcal.is-plan { color: var(--label-2); }
.dy-sec-kcal:empty { display: none; }
.dy-sec-all {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill);
  background: var(--tint-fill); color: var(--tint); font: var(--t-footnote); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.dy-sec-all svg { width: 13px; height: 13px; stroke-width: 2.6; }
.dy-sec-all::after { content: ""; position: absolute; inset: -7px -2px; }        /* 44 px target */
.dy-sec-more {
  position: relative; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: none; color: var(--label-2); cursor: pointer; flex: none; transition: background var(--dur-fast) var(--ease);
}
.dy-sec-more::after { content: ""; position: absolute; inset: -6px; }
.dy-sec-more:hover, .dy-sec-more[aria-expanded="true"] { background: var(--fill); color: var(--label); }
.dy-sec-more svg { width: 18px; height: 18px; stroke-width: 3; }
.dy-sec-head .menu-wrap { display: inline-flex; }
.dy-sec-add {
  position: relative; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint-fill); color: var(--tint); cursor: pointer; flex: none; transition: transform var(--dur-fast) var(--ease);
}
.dy-sec-add::after { content: ""; position: absolute; inset: -6px; }
.dy-sec-add:active { transform: scale(0.9); }
.dy-sec-add svg { width: 18px; height: 18px; stroke-width: 2.4; }

/* entries: [check] [picture] title / one line · kcal › */
.dy-entries { --dy-check-w: 50px; --dy-thumb: 40px; }
@media (max-width: 599px) { .dy-entries { --dy-thumb: 36px; } }
.dy-entry-wrap { position: relative; display: flex; align-items: stretch; min-width: 0; background: var(--bg-elevated); }
.dy-entries > li + li > .dy-entry-wrap::before { content: ""; position: absolute; z-index: 2; top: 0; right: 0; left: calc(var(--dy-check-w) + var(--space-1) + var(--dy-thumb) + var(--space-3)); border-top: 0.5px solid var(--separator); }
.dy-entry-wrap > .row { flex: 1; min-width: 0; padding-left: var(--space-1); }
.dy-entry { align-items: center; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.dy-entry .row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dy-entry-sub { display: flex; align-items: center; white-space: nowrap; overflow: hidden; font: var(--t-footnote); color: var(--label-2); }
.dy-entry-sub > * { flex: none; }
.dy-entry-sub > .dy-names { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dy-entry-sub > * + *::before { content: "·"; margin: 0 5px; color: var(--label-3); font-weight: 400; }
.dy-entry-kcal { display: grid; justify-items: end; gap: 0; color: var(--label); }
.dy-entry-kcal b { font: var(--t-headline); }
.dy-entry-kcal small { font: var(--t-caption); color: var(--label-2); margin-top: -2px; }
.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 b { color: var(--label-2); font-weight: 500; }
.dy-check, .dy-check-gap { flex: none; width: var(--dy-check-w); }
.dy-check {
  display: grid; place-items: center end; padding: 0 6px 0 0; border: 0; background: none; color: transparent; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.dy-check-dot {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--label-3);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.dy-check-dot svg { width: 16px; height: 16px; stroke-width: 2.8; }
@media (hover: hover) { .dy-check:hover .dy-check-dot { box-shadow: inset 0 0 0 1.5px var(--tint); color: var(--tint); } }
.dy-check:active .dy-check-dot { transform: scale(0.88); }
.dy-check.on { color: var(--label-on-tint); }
.dy-check.on .dy-check-dot { background: var(--tint); box-shadow: none; }
@media (hover: hover) { .dy-check.on:hover .dy-check-dot { box-shadow: none; color: var(--label-on-tint); } }
@media (prefers-reduced-motion: no-preference) {
  .dy-check.pop .dy-check-dot { animation: dy-pop 440ms var(--spring-bounce); }
  .dy-check.pop .dy-check-dot svg { animation: dy-draw 320ms var(--ease-out) 80ms both; }
}
@keyframes dy-pop { 0% { scale: 0.6; } 60% { scale: 1.16; } 100% { scale: 1; } }
@keyframes dy-draw { from { stroke-dasharray: 24; stroke-dashoffset: 24; } to { stroke-dasharray: 24; stroke-dashoffset: 0; } }
.dy-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--label-2); }
.dy-tag svg { width: 12px; height: 12px; stroke-width: 2.2; }
.dy-tag.plan { font-weight: 600; }
.dy-tag.conflict, .dy-tag.warn { color: var(--orange); font-weight: 600; }
.dy-tag.skip { color: var(--label-2); font-weight: 600; }
.dy-tag.kind { color: var(--label-2); }
.dy-names { color: var(--label-2); }
.dy-macroline { color: var(--label-2); }
/* Snacks: visually secondary — compact rows, quiet heading, a single text button when empty. */
.dy-snack .dy-sec-name { font: var(--t-headline); 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 b { font: var(--t-subhead); }
.dy-snack .dy-entry-kcal b { font-weight: 600; }
.dy-snack-empty { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0; padding-right: 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-open { padding-right: var(--space-4); }      /* tappable line (Vandaag): chevron, no × */
.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-4); border-radius: var(--radius-pill); 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; }

/* Water card (views/water.js): one row + a thin bar */
.dy-water { gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
.dy-water-row { display: flex; align-items: center; gap: var(--space-3); }
.dy-water-icon { width: var(--row-icon); height: var(--row-icon); border-radius: 8px; display: grid; place-items: center; background: var(--blue-fill); color: var(--c-water); flex: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.dy-water-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.dy-water.done .dy-water-icon { background: var(--c-water); color: #fff; }
.dy-water-amount { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 0; border: 0; background: none; padding: 0; text-align: left; color: var(--label); cursor: pointer; }
.dy-water-l { font: var(--t-footnote); font-weight: 600; color: var(--label-2); }
.dy-water-amount .v { font: var(--t-headline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dy-water-amount .v .u { font: var(--t-footnote); color: var(--label-2); }
.dy-water-btns { display: flex; gap: 6px; flex: none; margin-left: auto; }
.dy-water-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 36px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-pill); background: var(--blue-fill); color: var(--c-water); font: var(--t-button-sm); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.dy-water-btn svg { width: 14px; height: 14px; stroke-width: 2.6; }
.dy-water-btn:active { transform: scale(0.93); }
.dy-water-btn:disabled { opacity: 0.4; cursor: default; }
.dy-water-minus { width: 36px; padding: 0; background: var(--fill); color: var(--label-2); }
@media (pointer: coarse) { .dy-water-btn { min-height: var(--hit); } .dy-water-minus { width: var(--hit); } }
@media (max-width: 359px) {
  .dy-water-row { flex-wrap: wrap; }
  .dy-water-amount { min-width: 6em; }
  .dy-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dy-ring { width: 100px; height: 100px; }
}
.dy-water-bar { height: 6px; }
.dy-water-bar > i { background: var(--c-water); }