/* Planner + Boodschappen views. Tokens only (tokens.css); components from base.css. */

/* ---------- Page head ---------- */
.pl-save:empty { display: none; }
.status-text { color: var(--label-2); }
.status-text.done { color: var(--tint); font-weight: 600; }
.pl-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 599px) { .pl-actions .btn { flex: 1; } }
.pl-sub { margin-top: var(--space-2); }
.pl-pane { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (max-width: 599px) { .pl-pane { gap: var(--space-5); } }
.pl-seg { justify-self: start; min-width: 240px; }
@media (max-width: 599px) { .pl-seg { justify-self: stretch; } }
/* One-line notice (no banner box): icon + footnote text. */
.pl-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); }
.pl-notice svg { width: 16px; height: 16px; flex: none; color: var(--tint); stroke-width: 2.4; margin-top: 1px; }

/* ---------- Empty state ---------- */
.pl-empty { background: var(--bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* ---------- Who's home grid ---------- */
.who-wrap { background: var(--bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.who-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.who { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; }
.who th, .who td { padding: 0; text-align: center; }
.who thead th { padding: var(--space-3) var(--space-1) var(--space-1); font-weight: 400; min-width: 44px; }
.who-dow { display: block; font: var(--t-caption); color: var(--label-2); text-transform: uppercase; letter-spacing: 0.03em; }
.who-dom { display: block; font: var(--t-headline); font-variant-numeric: tabular-nums; }
.who tbody th[scope="row"], .who-corner {
  position: sticky; left: 0; z-index: 1; background: var(--bg-elevated);
  text-align: left; font: var(--t-subhead); color: var(--label-2); font-weight: 400;
  padding: 0 var(--space-3) 0 var(--inset-list); white-space: nowrap; min-width: 84px;
}
.who-person th { text-align: left; padding: var(--space-3) 0 var(--space-1); border-top: 0.5px solid var(--separator); }
.who tbody:first-of-type .who-person th { border-top: 0; }
.who-person th > span { position: sticky; left: 0; display: inline-block; padding-left: var(--inset-list); font: var(--t-headline); color: var(--label); }
.who tbody tr:last-child th, .who tbody tr:last-child td { padding-bottom: var(--space-2); }
.who-cell {
  display: grid; place-items: center; width: 100%; min-width: 40px; height: 40px;
  border: 0; background: none; padding: 0; cursor: pointer; border-radius: var(--radius-sm);
}
@media (pointer: coarse) { .who-cell { min-width: var(--hit); height: var(--hit); } }
/* Phone: fit a 7-day week without sideways scrolling. */
@media (max-width: 599px) {
  .who thead th { min-width: 38px; padding-inline: 0; }
  .who tbody th[scope="row"], .who-corner { min-width: 0; padding-right: var(--space-1); }
  .who-cell { min-width: 38px; }
}
.who-dot {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--label-3); color: transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.who-dot svg { width: 16px; height: 16px; stroke-width: 2.6; }
.who-cell[aria-pressed="true"] .who-dot { background: var(--tint); box-shadow: none; color: var(--label-on-tint); }
.who-cell:hover .who-dot { box-shadow: inset 0 0 0 1.5px var(--label-2); }
.who-cell[aria-pressed="true"]:hover .who-dot { box-shadow: none; opacity: 0.85; }

/* ---------- Day label (dinners, nutrition) ---------- */
.pl-day { flex: none; width: 40px; display: grid; justify-items: center; line-height: 1.1; }
.pl-day .pl-dow { font: var(--t-caption); color: var(--label-2); text-transform: uppercase; letter-spacing: 0.03em; }
.pl-day .num { font: var(--t-title-3); font-variant-numeric: tabular-nums; }
/* Hairlines in day lists start at the text, after the day column. */
.row:has(.pl-day) { --sep-inset: calc(var(--inset-list) + 40px + var(--space-3)); }

/* ---------- Dinners ---------- */
.pl-dinner { min-height: 60px; padding-top: 0; padding-bottom: 0; }
.pl-dinner-link { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: var(--label); }
.pl-dinner-link:hover .pl-recipe { color: var(--tint); }
.pl-recipe { transition: color var(--dur-fast) var(--ease); }
.pl-dinner.empty-day { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.pl-pick-label { color: var(--tint); }
.empty-day .row-sub { color: var(--label-3); }
.pl-dinner-ctl { align-items: center; flex: none; }
.pl-dinner-ctl .stepper-value { display: none; }
.pl-dinner-ctl .stepper > button { width: 40px; }
.pl-icon-btn { width: var(--hit); height: var(--hit); display: grid; place-items: center; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; }
.pl-icon-btn svg { width: 22px; height: 22px; }
.pl-remove { color: var(--red); margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-2)); }
.pl-remove:hover { background: var(--red-fill); }
.editing .row.pl-dinner:has(.pl-remove) { --sep-inset: var(--inset-list); }

/* ---------- Stepper: see .stepper in base.css ---------- */
.pl-date input { border: 0; background: var(--fill); border-radius: var(--radius-sm); min-height: 34px; padding: 0 var(--space-3); font: var(--t-body); color: var(--tint); font-variant-numeric: tabular-nums; }

/* ---------- Nutrition ---------- */
.pl-nday { gap: var(--space-3); min-height: 60px; }
.pl-bars { flex: 1; display: grid; gap: 6px; min-width: 60px; }
.bar-kcal { background: var(--c-kcal); }
.bar-protein { background: var(--c-protein); }
.pl-nvals { display: grid; justify-items: end; min-width: 92px; gap: 1px; }
.pl-nkcal { font: var(--t-headline); font-variant-numeric: tabular-nums; }
.pl-nkcal small { font: var(--t-caption); color: var(--label-2); }
.pl-nprot { font: var(--t-caption); color: var(--label-2); }
.pl-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pl-day-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-nutri-empty { padding: var(--space-5) var(--inset-list); }

/* ======================= Boodschappen ======================= */
.gr-week-btn { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--tint); font: var(--t-subhead); font-weight: 600; cursor: pointer; }
.gr-week-btn svg { width: 14px; height: 14px; stroke-width: 2.4; }
@media (pointer: coarse) { .gr-week-btn { min-height: var(--hit); } }
.gr-warn { align-items: flex-start; }
.gr-warn-list { margin: var(--space-1) 0 var(--space-2); padding-left: 1.1em; display: grid; gap: 2px; }
.gr-warn .caption { color: var(--label-2); }

/* Cart card: one status row + one action */
.gr-cart { gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-4) var(--inset-list); }
.gr-cart-top { display: flex; align-items: center; gap: var(--space-2); }
.gr-cart-status { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-height: var(--hit); min-width: 0; }
.gr-cart-status { align-items: flex-start; padding-top: var(--space-2); }
.gr-dot { margin-top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--label-3); flex: none; }
.gr-dot.on { background: var(--tint); }
.gr-ah-account { width: 100%; margin-top: var(--space-1); border-top: 0.5px solid var(--separator); text-align: left; background: none; }
.gr-ah-steps { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.gr-ah-step p, .gr-ah-step ul { margin: var(--space-1) 0 0; color: var(--label-2); font: var(--t-subhead); }
.gr-ah-step ul { padding-left: 1.2em; display: grid; gap: var(--space-1); }
.gr-ah-step .field { margin-top: var(--space-2); }
.gr-ah-step textarea { min-height: 72px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; }
.gr-refresh { margin-right: calc(-1 * var(--space-3)); }
.gr-refresh svg { width: 20px; height: 20px; }
.gr-sheet-note { padding: 0 var(--inset-list); margin: 0; }

/* Inventory */
.gr-details > summary { list-style: none; }
.gr-details > summary::-webkit-details-marker { display: none; }
.gr-summary { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4) var(--space-2) var(--inset-list); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.gr-summary:hover { background: var(--fill); }
.gr-disclose { transition: rotate var(--dur) var(--ease); }
.gr-details[open] .gr-disclose { rotate: 90deg; }
.gr-inner { border-radius: 0; box-shadow: none; border-top: 0.5px solid var(--separator); }
.gr-inv { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; }


/* Buylist */
.gr-item { align-items: flex-start; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.gr-item .row-detail { padding-top: 1px; }
.gr-prod { display: flex; gap: var(--space-2); }
.gr-packs { flex: none; color: var(--label); font-weight: 600; min-width: 2.2ch; font-variant-numeric: tabular-nums; }
.gr-noprod { color: var(--orange); }
.gr-item-main { border: 0; background: none; padding: 0; margin: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.gr-item-main:hover .row-title { color: var(--tint); }
.gr-item-main .row-title { transition: color var(--dur-fast) var(--ease); }
.gr-why { flex-basis: 100%; margin: 0 0 var(--space-1); padding: var(--space-2) var(--space-3); list-style: none; background: var(--fill); border-radius: var(--radius-sm); font: var(--t-footnote); color: var(--label-2); display: grid; gap: 2px; }
.gr-manual { font: var(--t-footnote); color: var(--blue); }

/* Diff + results */
.gr-remove { color: var(--red); }
.gr-res { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--label-on-tint); }
.gr-res svg { width: 14px; height: 14px; stroke-width: 2.6; }
.gr-res.ok { background: var(--tint); }
.gr-res.fail { background: var(--red); }

/* Grid pages: keep wide children (who-table) from widening the page track. */
.planner, .planner .section { grid-template-columns: minmax(0, 1fr); }
.groceries .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.groceries .stat { padding: var(--space-2) var(--space-3) var(--space-3); gap: 2px; }
.groceries .stat .v { font: var(--t-metric-sm); }
.groceries .stat .l { font: var(--t-caption); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599px) { .groceries .stat .v { font: 700 19px/24px var(--font-rounded); } }
.gr-top { display: grid; gap: var(--space-3); }
.gr-top:empty { display: none; }

/* ---------- Boodschappen v2: categories, manual edits, inline inventory ---------- */
.gr-group { display: grid; gap: var(--space-1); }
.gr-group + .gr-group { margin-top: var(--space-3); }
.gr-cat { margin: 0; }
.gr-compact { min-height: var(--hit); padding-top: var(--space-1); padding-bottom: var(--space-1); }
.gr-item { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.gr-trail { display: flex; align-items: center; gap: var(--space-2); flex: none; align-self: center; }
.gr-remove-btn { width: var(--hit); height: var(--hit); margin: 0 calc(-1 * var(--space-2)) 0 calc(-1 * var(--space-3)); display: grid; place-items: center; border: 0; background: none; color: var(--red); cursor: pointer; border-radius: 50%; flex: none; transition: background var(--dur-fast) var(--ease); }
.gr-remove-btn svg { width: 22px; height: 22px; }
.gr-remove-btn:hover { background: var(--red-fill); }
.gr-struck { text-decoration: line-through; color: var(--label-2); }
.gr-undo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-5); border-radius: var(--radius-pill); background: var(--toast-bg); color: var(--toast-label); font: var(--t-subhead); box-shadow: var(--shadow-card); }
.gr-undo-btn { color: var(--toast-label); font: var(--t-subhead); font-weight: 600; gap: var(--space-1); }
.gr-undo-btn svg { width: 18px; height: 18px; }

/* add / track sheets */
.gr-seg-full { display: grid; width: 100%; }
.gr-seg-full button { min-height: 32px; }

.gr-result-check { width: 22px; height: 22px; color: var(--tint); visibility: hidden; flex: none; }
.gr-result-check svg { width: 22px; height: 22px; }
.gr-result[aria-pressed="true"] .gr-result-check { visibility: visible; }
.gr-result[aria-pressed="true"] .row-title { font-weight: 600; }

/* inventory rows: name | voorraad | streef | remove; wraps under the name on narrow screens */
.gr-inv-wrap, .gr-inv-body .list { overflow: visible; }
.gr-inv-body { display: grid; gap: var(--space-2); padding: var(--space-3) 0 0; border-top: 0.5px solid var(--separator); background: var(--bg-grouped); }
.gr-inv-body > .gr-undo { margin: 0 var(--space-3); }
.gr-inv-body .gr-group { gap: var(--space-1); }
.gr-inv-row { flex-wrap: wrap; row-gap: var(--space-1); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.gr-inv-name { flex: 1 1 160px; }
.gr-uncounted { color: var(--orange); font: var(--t-footnote); }
.gr-inv-ctl { display: flex; gap: var(--space-4); align-items: center; }
.gr-ctl { display: grid; gap: 2px; justify-items: start; }
.gr-ctl > .caption { padding-left: var(--space-1); }
.gr-field { display: inline-flex; align-items: center; gap: var(--space-1); }
.stepper.stepper-field > button { width: 38px; }
.stepper.stepper-field > button:first-child::after { content: none; }
.gr-num { width: 3.6em; min-height: 32px; text-align: center; border: 0; background: none; padding: 0; font: var(--t-headline); font-variant-numeric: tabular-nums; color: var(--label); -moz-appearance: textfield; }
.gr-num::-webkit-outer-spin-button, .gr-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gr-num::placeholder { color: var(--orange); }
.gr-num[aria-invalid="true"] { color: var(--red); }
.gr-unit { min-width: 1.8em; font: var(--t-footnote); color: var(--label-2); }
.gr-unit-btn { min-width: 6.5em; justify-content: space-between; background: var(--fill); color: var(--tint); }
.gr-unit-btn .gr-unit-chev { width: 12px; height: 12px; transform: rotate(90deg); }
.gr-equiv { color: var(--label-3); }
.gr-unit-inline { display: none; }
.gr-pack-row .row-main { min-width: 0; }
.gr-pack-in { width: 6em; text-align: right; }
.gr-pack-src { color: var(--label-3); }
.gr-inv-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4) var(--space-2) var(--space-2); }
@media (max-width: 599px) {
  .gr-inv-ctl { order: 3; width: 100%; justify-content: space-between; gap: var(--space-2); }
  .gr-ctl-unit, .gr-inv-ctl .gr-unit { display: none; }
  .gr-unit-inline { display: block; margin-top: var(--space-1); }
  .gr-unit-inline .gr-unit-btn { min-width: 0; gap: var(--space-2); }
  .gr-trail .row-detail { font: var(--t-subhead); }
}
.gr-item { flex-wrap: wrap; row-gap: var(--space-1); }
.gr-item > .row-main { flex: 1 1 0; min-width: 0; }
.gr-item { align-items: center; }
.gr-item > .gr-trail { margin-left: auto; }
.empty-day .row-main { min-width: 0; }


/* ======================= Review round W2 (P1-P22, U4/U9/U11/U16-U18) ======================= */
.status-text.warn { color: var(--orange); font-weight: 600; }
.status-text.muted { color: var(--label-3); }
.pl-next { margin-left: var(--space-2); vertical-align: 2px; }
.pl-gap .row { min-height: 0; padding-top: var(--space-1); padding-bottom: var(--space-1); gap: var(--space-2); }
.pl-gap .row > svg { width: 16px; height: 16px; color: var(--orange); flex: none; }
.pl-gap .row-sub { color: var(--label-2); }
.pl-warn svg { color: var(--orange); }
.pl-warn-text { color: var(--orange); }
.pl-seg-full { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.pl-stale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.pl-stale .chip svg { width: 12px; height: 12px; }
.pl-notices:empty { display: none; }
.pl-notices { display: grid; gap: var(--space-2); }

/* calendar subscription (P22) */
.pl-url-row { gap: var(--space-3); }
.pl-url-icon { width: 22px; height: 22px; color: var(--tint); flex: none; }
.pl-url { flex: 1; min-width: 0; border: 0; background: none; font: var(--t-footnote); color: var(--label-2); text-overflow: ellipsis; }

/* dinners (P15): a row is one button that opens Bekijk / Wissel / Porties */
button.row.pl-dinner { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; padding-top: var(--space-2); padding-bottom: var(--space-2); }
button.row.pl-dinner:hover .pl-recipe { color: var(--tint); }
.pl-nobody { color: var(--label-3); font: var(--t-subhead); }
.empty-day.nobody .pl-day { opacity: 0.55; }
.pl-check { margin-left: var(--space-2); vertical-align: 2px; }
.pl-badges { display: inline-flex; gap: var(--space-1); flex: none; }
.pl-sheet-text { margin: 0; padding: 0 var(--inset-list); font: var(--t-subhead); color: var(--label-2); }
.pl-sheet-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--inset-list); }
.pl-check-list { margin: 0; padding: 0 var(--inset-list) 0 calc(var(--inset-list) + 1.1em); font: var(--t-subhead); display: grid; gap: var(--space-1); }

/* who's home: past days dim; fit 7 days at 320 pt (U17) */
.who thead th.past { opacity: 0.5; }
.who-short { display: none; }
.who-cell:disabled { cursor: default; }
.who-cell:disabled .who-dot { opacity: 0.6; }
@media (max-width: 380px) {
  .who-long { display: none; }
  .who-short { display: inline; }
  .who tbody th[scope="row"], .who-corner { padding-left: var(--space-3); padding-right: 2px; font: var(--t-caption); }
  .who-person th > span { padding-left: var(--space-3); }
  .who thead th { min-width: 32px; }
  .who-cell { min-width: 32px; height: 36px; }
  .who-dot { width: 24px; height: 24px; }
  .who-dot svg { width: 14px; height: 14px; }
}

/* Voeding bars: target tick, calm protein colour (U18); warnings (P9) */
.pl-bar { position: relative; overflow: visible; }
.pl-bar > i { max-width: 100%; }
.pl-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--label); opacity: 0.55; }
.pl-prot { background: var(--blue); }
.pl-nwarn { font: var(--t-footnote); color: var(--label-2); padding: 0 var(--inset-list); }
.pl-nwarn summary { cursor: pointer; display: flex; gap: var(--space-2); align-items: center; }
.pl-nwarn summary svg { width: 14px; height: 14px; color: var(--orange); }
.pl-nwarn ul { margin: var(--space-2) 0 0; padding-left: 1.1em; display: grid; gap: 2px; }

/* Boodschappen: structured issues with actions (P9) */
.gr-issues { display: grid; gap: var(--space-1); min-width: 0; flex: 1; }
.gr-warn-list { list-style: none; padding-left: 0; }
.gr-issue { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; }
.gr-issue-text { min-width: 0; }
.gr-issue-btn { flex: none; min-height: 28px; }
.gr-notes { font: var(--t-footnote); color: var(--label-2); padding: 0 var(--space-1); }
.gr-notes summary { cursor: pointer; }
.gr-notes .gr-warn-list { margin-top: var(--space-2); }
.gr-bonus { margin-left: var(--space-2); vertical-align: 1px; }
.gr-left { color: var(--label-3); }

/* Voorraad compact (P14): name | one stepper */
.gr-inv-row.compact { flex-wrap: nowrap; align-items: center; }
.gr-inv-row.compact .gr-inv-name { flex: 1 1 auto; min-width: 0; }
.gr-estimate { color: var(--blue); font: var(--t-footnote); }
.gr-below { color: var(--label-2); font: var(--t-footnote); }
.gr-field.estimated .gr-num { color: var(--blue); font-style: italic; }
.gr-inv-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); }
.gr-inv-filter { min-width: 200px; }
.gr-inv-none { padding: 0 var(--inset-list); }
@media (max-width: 380px) { .gr-inv-row.compact .gr-num { width: 2.8em; } .gr-inv-row.compact .stepper.stepper-field > button { width: 32px; } }

/* push progress (P16) */
.gr-progress { display: grid; gap: var(--space-1); padding: 0 var(--inset-list); }
.gr-progress .macro-bar > i { transition: width var(--dur) var(--ease); }