/* BiteLog — één stylesheet. Kleuren als tokens bovenaan; het ontwerp staat in het canvas
   "BiteLog redesign" (abrikoos-lila met koningsblauw, ronde vormen, zwevend menu). */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
:root {
  --bg: #fff8ee;              /* achtergrond: licht crème */
  --surface: #ffffff;
  --surface-2: #f6efe6;
  --text: #2b1d14;            /* warm donkerbruin in plaats van zwart */
  --muted: #6e5646;
  --soft: #8a7b70;            /* niet-actieve iconen */
  --line: #efe4d9;
  /* Merkkleuren uit het logo (docs/brand.md) */
  --brand-blue: #3d5fd9;
  --brand-cream: #fbf4ec;
  --brand-ink: #16120f;
  --brand-blue-soft: #7c96f2;
  --accent: var(--brand-blue);  /* koningsblauw = merkblauw */
  --accent-soft: #3d5fd91f;
  --accent-ink: #ffffff;
  --accent-dark: #2b459b;
  --top-from: #ffddbf;        /* bovenblok: abrikoos naar lila */
  --top-to: #e2d6ff;
  --status-shade: rgb(150 70 20 / .16); /* maakt de strook achter de klok iets dieper */
  --yellow: #ffebcb;          /* +-knopjes en koolhydraten */
  --danger: #c2412d;
  --protein: var(--brand-blue); --protein-bg: #e8ecfb; --protein-ink: #2b459b;
  --carbs: #e99a2a;   --carbs-bg: #ffebcb;   --carbs-ink: #8a5a0c;
  --fat: #db6c9a;     --fat-bg: #fde2ec;     --fat-ink: #8f2f59;
  --planned-line: #d9c4b4;
  --radius: 20px;
  --shadow: 0 6px 18px rgb(43 29 20 / .07);
  --shadow-float: 0 10px 28px rgb(43 29 20 / .12);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* ook als een class display zet */
/* De paginakleur zelf is abrikoos: iOS kleurt de balk achter de klok (en het stukje bij omhoog
   overscrollen) naar de achtergrond van de pagina. Het crème begint pas bij <body>. */
html { -webkit-text-size-adjust: 100%; background: var(--top-from); min-height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  /* iOS (Safari en beginscherm) kleurt de balk achter de klok naar de achtergrondkleur van de
     pagina. Die is dus abrikoos; het crème ligt er als laag overheen, behalve achter de klok. */
  background-color: var(--top-from);
  background-image: linear-gradient(var(--bg), var(--bg));
  background-repeat: no-repeat;
  background-position: 0 env(safe-area-inset-top);
  background-size: 100% 200%; /* ruim, zodat onderaan geen abrikoos strookje overblijft */
  color: var(--text);
  font: 16px/1.4 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
main {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) 18px calc(env(safe-area-inset-bottom) + 40px);
}
main.has-nav { padding-bottom: calc(env(safe-area-inset-bottom) + 96px); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
h1 { font-size: 24px; margin: 0; letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: 16px; margin: 0; font-weight: 700; }

/* ---------- knoppen en velden ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 20px; border-radius: 24px; border: 0;
  background: var(--surface); box-shadow: var(--shadow); font-weight: 700;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 18px rgb(61 95 217 / .25); }
.btn.danger { color: var(--danger); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 22px;
  background: var(--surface); box-shadow: var(--shadow); font-size: 20px; color: var(--text); flex: none;
}
.icon-btn:hover { background: var(--surface-2); }
.link { border: 0; background: none; color: var(--accent); font-weight: 700; padding: 8px 0; }

label.field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.input {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 16px;
  border: 1.5px solid var(--line); background: var(--surface); font-size: 16px; /* 16px: iOS zoomt dan niet in */
}
.input:focus, .btn:focus-visible, .icon-btn:focus-visible, .row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stack { display: grid; gap: 12px; }

/* ---------- kop (andere schermen dan Vandaag) ---------- */
.topbar { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.topbar .title { flex: 1; text-align: center; }
.topbar .title small { display: block; font-size: 13px; color: var(--muted); font-weight: 500; }
.topbar .icon-btn svg { display: block; }

/* ---------- kaarten ---------- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Vandaag: bovenblok ---------- */
.hero {
  margin: calc(-1 * (env(safe-area-inset-top) + 12px)) -18px 0;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 64px;
  /* Bovenaan iets dieper (onder de witte klok van iOS), dat vervaagt naar het gewone verloop. */
  background:
    linear-gradient(180deg, var(--status-shade) 0, var(--status-shade) env(safe-area-inset-top), transparent calc(env(safe-area-inset-top) + 48px)),
    linear-gradient(180deg, var(--top-from) 0%, var(--top-to) 100%);
  border-radius: 0 0 50% 50% / 0 0 64px 64px;
  display: grid; gap: 8px;
}
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand { height: 28px; width: auto; display: block; } /* wordmark: minimaal 72 px breed */
.hero-top .icon-btn { background: rgb(255 255 255 / .5); box-shadow: none; }
.today-chip { border: 0; border-radius: 16px; min-height: 32px; padding: 0 12px; background: rgb(255 255 255 / .6); font-size: 13px; font-weight: 700; margin-left: auto; }
/* Drie weken naast elkaar (vorige, deze, volgende); je ziet alleen de middelste tot je veegt. */
.week-viewport { overflow: hidden; margin: 0 -4px; touch-action: pan-y; }
.week-track { display: flex; width: 300%; transform: translateX(calc(-100% / 3)); will-change: transform; }
.week-track > .week { flex: 0 0 calc(100% / 3); padding: 0 4px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.week button {
  height: 58px; border: 0; border-radius: 18px; background: rgb(255 255 255 / .55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0;
}
.week .wd { font-size: 12px; }
.week .n { font-size: 16px; font-weight: 700; }
.week .dot { width: 5px; height: 5px; border-radius: 3px; background: transparent; }
.week .logged .dot { background: var(--accent); }
.week [aria-current="date"] { background: var(--accent); color: var(--accent-ink); }
/* Vandaag, als je een andere dag bekijkt: een dun blauw randje, zodat je hem terugvindt. */
.week .is-today:not([aria-current]) { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-dark); }
.week [aria-current="date"].logged .dot { background: var(--accent-ink); } /* stipje alleen als er iets gelogd is */
.gauge-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.gauge-stat { width: 76px; display: grid; justify-items: center; }
.gauge-stat span { font-size: 13px; font-weight: 600; }
.gauge-stat b { font-size: 23px; font-weight: 800; }
.gauge { width: 196px; height: 172px; flex: none; }

/* ---------- Vandaag: macroblokjes (snijden door de rand van het bovenblok) ---------- */
.macros {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: -38px 0 0;
}
.macro { border-radius: 18px; padding: 11px 12px; box-shadow: var(--shadow); display: grid; gap: 4px; }
.macro .label { font-size: 12px; font-weight: 700; }
.macro .value { font-size: 20px; font-weight: 800; }
.macro .value small { font-size: 12px; font-weight: 500; }
.macro .bar { height: 6px; border-radius: 3px; background: #fff; overflow: hidden; }
.macro .bar > span { display: block; height: 100%; border-radius: 3px; }
.macro.protein { background: var(--protein-bg); } .macro.protein .label { color: var(--protein-ink); } .macro.protein .bar > span { background: var(--protein); }
.macro.carbs { background: var(--carbs-bg); } .macro.carbs .label { color: var(--carbs-ink); } .macro.carbs .bar > span { background: var(--carbs); }
.macro.fat { background: var(--fat-bg); } .macro.fat .label { color: var(--fat-ink); } .macro.fat .bar > span { background: var(--fat); }

/* ---------- Vandaag: maaltijden ---------- */
.meals { display: grid; gap: 10px; margin-top: 16px; }
.meal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.meal-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; min-height: 64px; }
.meal-head .toggle { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 4px 0; display: grid; }
.meal-head .toggle .name { font-size: 16px; font-weight: 700; }
.meal-head .toggle .name::first-letter { text-transform: uppercase; }
.meal-head .toggle .sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* klein balkje: kcal van de maaltijd tegenover de richtlijn (streepje) */
.mini-goal { position: relative; display: block; height: 4px; margin: 7px 0 3px; border-radius: 2px; background: var(--protein-bg); }
.mini-goal .fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--accent); max-width: 100%; }
.mini-goal.over .fill { background: var(--carbs); }
.mini-goal .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: .55; }
.round-btn {
  width: 44px; height: 44px; border-radius: 22px; border: 0; flex: none;
  background: var(--yellow); color: var(--text); display: grid; place-items: center;
}
.round-btn.check { background: var(--surface); border: 2px solid var(--planned-line); }
.meal.planned { background: transparent; box-shadow: none; border: 2px dashed var(--planned-line); }
.list { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; min-height: 52px;
  border: 0; border-top: 1px solid var(--line); background: none; text-align: left;
}
.row:hover { background: var(--surface-2); }
.row .grow { flex: 1; min-width: 0; }
.row .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .kcal { font-weight: 700; white-space: nowrap; }
.add-row { color: var(--accent); font-weight: 700; }

/* ---------- maaltijdpagina ---------- */
/* Bewust geen gekleurd bovenblok: zo voelt dit als een pagina ín Vandaag, niet als Vandaag zelf. */
.meal-top { display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; }
.meal-top .icon-btn { background: var(--surface); box-shadow: var(--shadow); }
.meal-top .title { flex: 1; min-width: 0; text-align: center; }
.meal-top h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.meal-top h1::first-letter { text-transform: uppercase; }
.meal-top small { display: block; font-size: 13px; color: var(--muted); }

/* kcal van de maaltijd tegenover de richtlijn */
.meal-goal { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); padding: 14px 16px 12px; margin-bottom: 14px; display: grid; gap: 8px; }
.mg-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.mg-top b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.mg-track { position: relative; height: 12px; border-radius: 6px; background: var(--protein-bg); }
.mg-track .fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--accent); max-width: 100%; }
.meal-goal.over .mg-track .fill { background: var(--carbs); }
.mg-track .mark { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); }
.mg-note { font-size: 13px; font-weight: 600; color: var(--muted); }
.meal-goal.near .mg-note { color: var(--accent); }
.meal-goal.over .mg-note { color: var(--carbs-ink); }
.pct-input { position: relative; display: block; }
.pct-input .input { padding-right: 26px; }
.pct-input > span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.split .field { min-width: 0; }
.meal-items { display: grid; gap: 12px; }
main > .meal.planned { margin-bottom: 12px; }
main > .meal.planned .name::first-letter { text-transform: uppercase; }

.recipe-group {
  background: var(--surface); border: 2px solid #cfdafb; border-radius: 26px; overflow: hidden;
  box-shadow: 0 8px 24px rgb(43 29 20 / .06);
}
.rg-head { background: var(--protein-bg); padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 10px; }
.rg-title { flex: 1; min-width: 0; border: 0; background: none; padding: 2px 0; text-align: left; display: grid; color: inherit; }
.rg-title .eyebrow { font-size: 12px; font-weight: 700; color: var(--accent-dark); letter-spacing: .06em; text-transform: uppercase; }
.rg-title .name { font-size: 17px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.recipe-group ul, .loose { list-style: none; margin: 0; padding: 0; }
/* De rode veegknop loopt tot de rand; overflow: hidden knipt hem af in de ronde hoeken. */
.loose { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.ing-row.row { gap: 8px; min-height: 62px; padding: 2px 12px 2px 16px; cursor: default; }
.ing-row.row:hover { background: var(--surface); }
.recipe-group .ing + .ing::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: #f3ece4; z-index: 2; } /* lijntjes tussen, niet onder de laatste */
.ing-name { flex: 1; min-width: 0; border: 0; background: none; padding: 6px 0; text-align: left; display: grid; color: inherit; }
.ing-name .name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ing-name .sub { font-size: 12px; color: var(--muted); }
.ing-name .sub.changed { color: var(--accent); font-weight: 700; }
.amount-only { font-size: 14px; font-weight: 700; color: var(--muted); padding-right: 6px; }

.stepper { height: 36px; border-radius: 18px; background: var(--yellow); display: flex; align-items: center; flex: none; }
.stepper button { width: 36px; height: 36px; border: 0; background: none; color: var(--carbs-ink); display: grid; place-items: center; border-radius: 18px; }
.stepper button:active { background: rgb(0 0 0 / .06); }
.stepper .num { min-width: 46px; text-align: center; font-size: 14px; font-weight: 700; white-space: nowrap; }
.stepper.white { height: 40px; background: var(--surface); }
.stepper.white button { width: 40px; height: 40px; color: var(--text); }
.stepper.white .num { min-width: 64px; }
.gram-field { height: 34px; width: 78px; flex: none; border-radius: 17px; background: none; box-shadow: inset 0 0 0 1.5px var(--line); display: flex; align-items: center; padding: 0 12px 0 4px; cursor: text; }
.gram-field input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; text-align: right; color: var(--text); padding: 0 4px 0 0; outline: none; }
.gram-field span { font-size: 13px; font-weight: 500; color: var(--muted); }
.gram-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }

.add-block { height: 52px; border-radius: 26px; background: var(--yellow); border: 0; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.add-block::first-letter { text-transform: none; }

.section-title { margin: 26px 4px 10px; font-size: 19px; font-weight: 800; }
.nutri { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: 16px; display: grid; gap: 14px; }
.nbar { display: grid; gap: 6px; }
.nbar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.nbar .label { font-weight: 700; }
.nbar .track { height: 10px; border-radius: 5px; overflow: hidden; }
.nbar .track > span { display: block; height: 100%; border-radius: 5px; }
.nbar.protein .label { color: var(--protein-ink); } .nbar.protein .track { background: var(--protein-bg); } .nbar.protein .track > span { background: var(--protein); }
.nbar.carbs .label { color: var(--carbs-ink); } .nbar.carbs .track { background: var(--carbs-bg); } .nbar.carbs .track > span { background: var(--carbs); }
.nbar.fat .label { color: var(--fat-ink); } .nbar.fat .track { background: var(--fat-bg); } .nbar.fat .track > span { background: var(--fat); }
.nlist { margin: 0; border-top: 1px solid var(--line); }
.nlist > div { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; }
.nlist > div + div { border-top: 1px solid var(--line); }
.nlist dt { color: var(--muted); }
.nlist dd { margin: 0; font-weight: 700; }

/* ---------- zwevend menu ---------- */
.nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, calc(env(safe-area-inset-bottom) - 6px)); z-index: 5;
  height: 56px; padding: 0 5px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-float);
  display: flex; align-items: center; gap: 6px;
}
.nav a {
  width: 46px; height: 46px; border-radius: 23px; display: grid; place-items: center; flex: none;
  color: var(--soft); text-decoration: none;
}
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.nav .nav-add {
  width: 66px; height: 66px; border-radius: 33px; margin: 0 2px;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 18px rgb(43 29 20 / .2);
}

/* ---------- zoeken ---------- */
.search { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 4px 0 10px; }
.results.list { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 20px 6px 8px; }
.results .row:first-child { border-top: 0; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.empty { padding: 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- onderblad (dialog) ---------- */
.sheet {
  width: min(560px, 100%); max-width: 100%; margin: auto auto 0; padding: 0; border: 0;
  border-radius: 28px 28px 0 0; background: var(--surface); color: var(--text);
  max-height: 90dvh;
}
@media (min-width: 640px) { .sheet { margin: auto; border-radius: 28px; } }
.sheet::backdrop { background: rgb(43 29 20 / .35); }
.sheet-body { padding: 20px 16px calc(env(safe-area-inset-bottom) + 16px); display: grid; gap: 14px; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sheet-actions { display: flex; gap: 4px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* bibliotheek: tabbladen als één pil met twee helften */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); margin-bottom: 12px; }
.seg button { min-height: 40px; border: 0; border-radius: 20px; background: none; font-weight: 700; font-size: 15px; color: var(--muted); }
.seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
/* veeg naar links om te verwijderen */
.swipe { position: relative; overflow: hidden; transition: height .25s ease, opacity .25s ease; }
.swipe .row { position: relative; z-index: 1; border-top: 0; background: var(--surface); touch-action: pan-y; }
.swipe-del {
  position: absolute; inset: 0 0 0 auto; width: 104px; border: 0;
  background: var(--danger); color: #fff; font-weight: 700; font-size: 14px;
}
.swipe.removing { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .swipe, .swipe .row { transition: none !important; } }
/* scheidingslijntjes tussen de regels (ingesprongen, zoals in iOS-lijsten) */
.lib-list .swipe + .swipe::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); z-index: 2; }
.verified { color: #e6d3bd; --verified-ink: #fff; display: grid; flex: none; }
/* statusiconen van producten */
.status-dot { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--accent); }
.fav-mark { display: inline-grid; vertical-align: -1px; margin-left: 6px; color: var(--accent); }
.fav-btn { color: var(--muted); }
.fav-btn[aria-pressed="true"] { color: var(--accent); }
.fav-btn[aria-pressed="true"] path { fill: currentColor; }
/* filterchips op één regel, horizontaal te scrollen als ze niet passen */
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll .chip { flex: none; display: inline-flex; align-items: center; }
.check-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 0 0 14px; cursor: pointer; }
.check-row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
.check-row > span:not(.verified) { flex: 1; display: grid; }
.lib-tools { display: grid; gap: 10px; margin-bottom: 12px; }
.chip { min-height: 38px; padding: 0 14px; border-radius: 19px; border: 1.5px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.amount { display: flex; align-items: center; gap: 8px; }
.amount .input { font-size: 22px; font-weight: 600; text-align: center; }
.preview { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; background: var(--surface-2); border-radius: 18px; padding: 12px 4px; }
.preview b { display: block; font-size: 17px; }
.preview span { font-size: 12px; color: var(--muted); }
.meal-select { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.meal-select .chip { padding: 0 4px; text-transform: capitalize; }

/* ---------- formulier ---------- */
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
legend { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; padding: 0 4px; }
.form-card { padding: 18px; margin-bottom: 14px; }
.error { color: var(--danger); font-size: 14px; }

/* ---------- inloggen ---------- */
.login { min-height: 80dvh; display: grid; place-content: center; gap: 16px; text-align: center; }
.login .login-logo { height: 52px; width: auto; display: block; margin: 0 auto 8px; }
.login form { display: grid; gap: 10px; width: min(320px, 90vw); }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 70px); transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 18px; font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 24px rgb(0 0 0 / .2); z-index: 10; max-width: calc(100vw - 32px);
}

/* ---------- barcode scannen ---------- */
.search-row { display: flex; gap: 8px; }
.search-row .input { flex: 1; min-width: 0; }
.scan-btn { padding: 0 12px; }
.input-with-btn { display: flex; gap: 4px; align-items: center; }
.input-with-btn .input { flex: 1; min-width: 0; }
.input-with-btn .icon-btn { color: var(--text); flex: none; }

.scanner {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #000; color: #fff; overflow: hidden;
}
.scanner::backdrop { background: #000; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Kader met donkere rand eromheen: de schaduw van het kader vult de rest van het scherm. */
.scanner-frame {
  position: absolute; left: 10%; right: 10%; top: 50%; height: min(30vh, 220px); transform: translateY(-50%);
  border: 2px solid rgb(255 255 255 / .9); border-radius: 16px; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45);
}
.scanner-top { position: absolute; top: calc(env(safe-area-inset-top) + 8px); right: 8px; }
.scanner-top .icon-btn { color: #fff; background: rgb(0 0 0 / .35); }
.scanner-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; justify-items: center;
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 20px);
}
.scanner-hint { margin: 0; text-align: center; font-weight: 600; text-shadow: 0 1px 4px rgb(0 0 0 / .6); max-width: 34ch; }
.scanner-bottom .btn { background: rgb(255 255 255 / .92); color: #1d1f1c; border: 0; }
.scanner-bottom .btn.primary { background: var(--accent); color: var(--accent-ink); }
.scanner-type { display: flex; gap: 8px; width: min(420px, 100%); }
.scanner-type[hidden] { display: none; }
.scanner-type .input { flex: 1; background: #fff; color: #1d1f1c; }

/* ---------- recepten ---------- */
textarea.input { resize: vertical; min-height: 96px; font: inherit; line-height: 1.4; }
.picker-results { max-height: 46dvh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.picker-results .section-label:first-child { margin-top: 4px; }
.notice { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--surface-2); }
.notice p { margin: 0; }
.topbar .icon-btn svg { display: block; }

/* ---------- etiket scannen ---------- */
.steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); }
.steps b { color: var(--text); }
.input.autofilled { background: var(--accent-soft); border-color: var(--accent); }
.crop canvas { display: block; max-width: 100%; max-height: 52dvh; margin: 0 auto; border-radius: 10px; touch-action: none; cursor: crosshair; }
.crop-actions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
details summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; padding: 4px 0; }
.review-row { cursor: default; min-height: 40px; padding: 8px 14px; }
.review-row:first-child { border-top: 0; }
.review-row .muted { font-weight: 400; font-size: 14px; }
.ocr-text { white-space: pre-wrap; font-size: 12px; background: var(--surface-2); padding: 10px; border-radius: 10px; max-height: 30dvh; overflow: auto; margin: 8px 0 0; }
.actions .btn { padding: 0 12px; font-size: 15px; white-space: nowrap; }


/* Statusbalk van de iPhone: de app loopt erachter door (black-translucent), de klok is dan wit.
   Een vaste strook in de diepere abrikooskleur, zodat er bij scrollen geen tekst door de klok
   loopt. Op Vandaag is dat precies de bovenkant van het verloop, dus het sluit naadloos aan. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: env(safe-area-inset-top); z-index: 20; pointer-events: none;
  background: linear-gradient(var(--status-shade), var(--status-shade)), var(--top-from);
}

/* Vandaag: glazen balk die inschuift als de cirkel uit beeld is. Doorschijnend abrikoos met
   vervaging, zodat de kaartjes er zacht onder verdwijnen; achter de klok loopt hij door. */
body:has(.hero)::before { background: transparent; }
.mini {
  position: fixed; inset: 0 0 auto 0; z-index: 21; border: 0; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 20px 12px;
  background: rgb(255 221 191 / .78);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 1px 0 rgb(43 29 20 / .06), 0 8px 24px rgb(43 29 20 / .06);
  color: var(--text); font-size: 16px; font-weight: 700;
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}
.mini.show { transform: none; opacity: 1; pointer-events: auto; }
.mini b { color: var(--accent); font-size: 18px; }
.mini-logo { height: 22px; width: auto; display: block; }
.mini-info { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-weight: 600; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .mini { transition: opacity .2s ease; transform: none; } }

/* Andere schermen dan Vandaag: de balk achter de klok in het crème van de pagina zelf
   (iOS kleurt de balk naar de achtergrondkleur), met een strook in dezelfde kleur zodat er bij
   scrollen niets door de klok heen loopt. */
body:not(:has(.hero)) { background-color: var(--bg); }
body:not(:has(.hero))::before { background: rgb(255 248 238 / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---------- weekmenu ---------- */
.menu-row { gap: 14px; }
.menu-row:disabled { cursor: default; color: inherit; opacity: 1; }
.menu-row:disabled:hover { background: none; }
.menu-day { width: 34px; flex: none; display: grid; justify-items: center; line-height: 1.15; }
.menu-day b { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.menu-day span { font-size: 17px; font-weight: 800; }
.menu-row.is-today .menu-day b, .menu-row.is-today .menu-day span { color: var(--accent); }
.menu-row.quiet .name { color: var(--muted); font-weight: 500; }
.menu-row .chev { color: var(--muted); font-size: 22px; line-height: 1; }
.menu-ingredients { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; font-size: 15px; }
a.btn { color: var(--text); text-decoration: none; }