/* ============================================================
 * Moderis App — webapp shell (responsive).
 * Forest greens on warm cream. Sidebar nav ≥1024px,
 * bottom tab bar + sticky topbar <1024px.
 * Bouwt op moderis.css tokens.
 * ============================================================ */

html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background:
    radial-gradient(120% 90% at 50% -10%, #f3eee2 0%, transparent 55%),
    #efeae0;
  font-family: var(--m-font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01';
}
* { box-sizing: border-box; }

/* ---------- Mobiele soepelheid ---------- */
html, body {
  -webkit-text-size-adjust: 100%;   /* geen auto-vergroting van tekst */
  text-size-adjust: 100%;
  max-width: 100%;
  /* Voorkomt horizontaal schuiven/uitzoomen. `clip` i.p.v. `hidden`: hidden
   * maakt van body een scroll-container en dat breekt op desktop-Safari het
   * verticale scrollen; clip knipt alleen af, zonder scroll-semantiek. */
  overflow-x: hidden;               /* fallback voor oude browsers */
  overflow-x: clip;
}
body {
  -webkit-tap-highlight-color: transparent;
}
/* Alleen op touch-apparaten: geen pull-to-refresh/bounce-jank. Op desktop
 * (muis/trackpad) laten we het scrollgedrag volledig met rust. */
@media (pointer: coarse) {
  body { overscroll-behavior-y: none; }
}
/* Double-tap-zoom uit (de "zoomt als ik tik"), pinch-zoom + scrollen blijft. */
* { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* iOS zoomt in op een veld met tekst < 16px bij focus. Forceer 16px — dit
 * overrulet ook de inline font-sizes, zodat er nergens meer wordt ingezoomd. */
input, textarea, select { font-size: 16px !important; }
/* Geen enkel veld mag breder worden dan z'n container — dit voorkomt dat een
 * grid/rij met invoervelden het scherm uit loopt (en mobiel uitzoomt). */
input, textarea, select { max-width: 100%; min-width: 0; box-sizing: border-box; }
/* Grid-kinderen mogen krimpen (anders forceert hun inhoud een te brede kolom). */
.screen-wrap [style*="grid"] > * { min-width: 0; }

/* ---------- App shell ---------- */
.app-shell {
  min-height: 100vh;
  min-height: 100dvh;   /* volgt de mobiele adresbalk, geen sprong */
  display: flex;
  align-items: stretch;
}

/* ---------- Sidebar (desktop ≥1024px) ---------- */
.sidenav {
  width: 252px;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  padding: 26px 16px 22px;
  display: none;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0)),
    #ece6d8;
  border-right: 1px solid var(--m-line);
}
.sidenav-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 10px 26px;
}
.sidenav-brand-mark {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--forest-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(35,81,57,0.4);
}
.sidenav-brand-name {
  font-family: var(--m-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--forest-950);
}
.sidenav-section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  padding: 0 14px 8px;
}
.sidenav-items {
  display: flex; flex-direction: column; gap: 3px;
}
.sidenav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 13px;
  border: none; cursor: pointer;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--m-font);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background .15s, color .15s;
}
.sidenav-item:hover { background: rgba(30,40,25,0.05); color: var(--ink); }
.sidenav-item.is-active {
  background: var(--forest-100);
  color: var(--forest-800);
  font-weight: 600;
}
.sidenav-foot {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid var(--m-line);
}
.sidenav-foot-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.sidenav-foot-row {
  margin-top: 7px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.sidenav-foot-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--leaf);
  box-shadow: 0 0 0 3px rgba(139,194,74,0.18);
}

/* ---------- Main column ---------- */
.main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Mobile topbar (sticky) */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 14px;
  background: rgba(239,234,224,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--m-line);
  position: sticky; top: 0; z-index: 20;
}
.topbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--m-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--forest-950);
}
.topbar-brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--forest-700);
  display: flex; align-items: center; justify-content: center;
}
.topbar-date {
  font-family: var(--m-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

.screen-wrap {
  flex: 1 1 auto;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 22px 120px;
}
.screen { display: block; }

/* ---------- Bottom nav (mobile) ---------- */
.bottomnav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 9px 10px calc(env(safe-area-inset-bottom, 0px) + 9px);
  background: linear-gradient(180deg, rgba(253,251,246,0.86), rgba(253,251,246,0.98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--m-line);
}
.bn-item {
  border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 0; border-radius: 12px;
  color: var(--ink-3);
  font-family: var(--m-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color .15s;
}
.bn-item.is-active { color: var(--forest-700); }
/* Verhoogde, gecentreerde +knop die net boven de balk uitkomt. */
.bn-fab {
  justify-self: center;
  width: 52px; height: 52px; border-radius: 999px;
  margin-top: -22px;
  background: var(--forest-700); color: var(--on-forest);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(35,81,57,0.55);
  border: none; cursor: pointer;
  transition: transform .12s;
}
.bn-fab:active { transform: scale(0.92); }

/* ---------- Responsive switch ---------- */
@media (min-width: 1024px) {
  .sidenav { display: flex; }
  .topbar { display: none; }
  .bottomnav { display: none; }
  .screen-wrap { padding: 36px 44px 64px; max-width: 1040px; }
}
@media (max-width: 480px) {
  .screen-wrap { padding: 18px 16px 110px; }
}

/* ---------- Bottom sheet / centered modal ---------- */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20,28,18,0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: m-fade .18s ease both;
}
.sheet {
  background: var(--m-card);
  border-radius: 28px 28px 0 0;
  padding: 12px 22px calc(env(safe-area-inset-bottom, 0px) + 26px);
  box-shadow: 0 -20px 50px rgba(20,28,18,0.25);
  animation: m-slide-up .26s cubic-bezier(0.22,1,0.36,1) both;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  scrollbar-width: none;
  /* Scrollen ín de sheet mag nooit doorlekken naar de pagina erachter. */
  overscroll-behavior: contain;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet-grip {
  width: 38px; height: 4px; border-radius: 999px;
  background: var(--m-line-2);
  margin: 0 auto 14px;
}

@media (min-width: 768px) {
  .sheet-overlay {
    justify-content: center;
    align-items: center;
    padding: 24px;
  }
  .sheet {
    border-radius: 22px;
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    padding: 22px 24px 28px;
    box-shadow: 0 28px 70px rgba(20,28,18,0.34);
    animation: m-pop .22s cubic-bezier(0.22,1,0.36,1) both;
  }
  .sheet-grip { display: none; }
}

@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

/* Spinner voor "bezig"-acties — neemt de tekstkleur over (currentColor), dus
   wit op groene knoppen en groen op ghost-knoppen. */
@keyframes m-rotate { to { transform: rotate(360deg); } }
.m-spin {
  display: inline-block; box-sizing: border-box;
  width: 15px; height: 15px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%;
  animation: m-rotate 0.65s linear infinite; vertical-align: -2px;
  flex: 0 0 auto;
}
@keyframes m-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes m-pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Toast ---------- */
.toast-wrap {
  position: fixed;
  left: 0; right: 0;
  bottom: 104px;
  z-index: 70;
  display: flex; justify-content: center;
  pointer-events: none;
  padding: 0 16px;
}
@media (min-width: 1024px) {
  .toast-wrap { bottom: 32px; }
}
.toast {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--forest-800); color: var(--on-forest);
  padding: 11px 17px 11px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 14px 34px -10px rgba(20,28,18,0.55);
  animation: m-toast-in .28s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes m-toast-in { from { transform: translateY(14px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* ---------- Scanner overlay (full viewport) ---------- */
.scanner {
  position: fixed; inset: 0; z-index: 80;
  background: radial-gradient(120% 80% at 50% 30%, #20281b 0%, #0d110a 100%);
  display: flex; flex-direction: column;
  animation: m-fade .2s ease both;
}
.scan-frame { width: 240px; height: 240px; margin: auto; position: relative; }
.scan-corner { position: absolute; width: 34px; height: 34px; border: 3px solid var(--leaf); }
.scan-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.scan-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.scan-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.scan-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.scan-line {
  position: absolute; left: 8px; right: 8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--leaf), transparent);
  box-shadow: 0 0 12px 2px rgba(139,194,74,0.6);
  animation: m-scan 1.9s ease-in-out infinite;
}
@keyframes m-scan { 0%,100% { top: 14px; } 50% { top: 214px; } }

/* ---------- Generic tap feedback ---------- */
.tap { transition: background .12s, transform .08s; cursor: pointer; }
.tap:active { transform: scale(0.985); }

/* Responsieve keuze-grid (profiel): 1 kolom op mobiel, meer op breed scherm. */
.m-pill-grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .m-pill-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@keyframes m-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* ============================================================
 * Loading states — kalme cream-shimmer, geen grijs gestrobe.
 * Eén primitive (.m-skel) die overal in dezelfde toonzet ademt.
 * ============================================================ */

@keyframes m-shimmer {
  0%   { background-position: 180% 0; }
  100% { background-position: -180% 0; }
}
@keyframes m-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
@keyframes m-tile-breathe {
  0%, 100% { background: var(--m-card-2); }
  50%      { background: var(--m-card-3); }
}
@keyframes m-reveal {
  from { opacity: 0; transform: translateY(3px); }
  /* Eindigen op `none` (niet translateY(0)): fill-mode `both` houdt de
   * eindframe vast, en élke blijvende transform maakt de sectie het
   * containing block voor position:fixed-kinderen — een sheet die binnenin
   * gerenderd wordt zou dan midden in de lijst hangen i.p.v. schermvullend. */
  to   { opacity: 1; transform: none; }
}
@keyframes m-strip-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* Resting skeleton block — een warm-cream gradient die schuift.
 * Combineer met .m-skel-line voor pillvormige tekstlijnen of
 * geef het zelf width/height/border-radius via inline style. */
.m-skel {
  background:
    linear-gradient(
      100deg,
      var(--m-card-3)  0%,
      var(--m-card-2)  38%,
      var(--m-card)    50%,
      var(--m-card-2)  62%,
      var(--m-card-3) 100%
    );
  background-size: 220% 100%;
  background-position: 180% 0;
  animation: m-shimmer 2.2s ease-in-out infinite;
  border-radius: var(--m-r-sm);
  border: 1px solid var(--m-line);
  color: transparent;          /* eventueel kindtekst onzichtbaar */
  user-select: none;
  pointer-events: none;
}
.m-skel-line    { height: 11px; border-radius: var(--m-pill); border: none; }
.m-skel-line.sm { height: 8px; }
.m-skel-line.lg { height: 16px; }
.m-skel-line.xl { height: 22px; }

/* Tile-breathe is voor vierkante blokken die structuur blijven tonen
 * (bv. het meal-icon vakje) zonder shimmer — alleen tint die ademt. */
.m-breathing-tile {
  animation: m-tile-breathe 2.4s ease-in-out infinite;
}

/* Inline "AI denkt na…" — drie breathing dots in plaats van één puls.
 * Vervangt de losse pulserende stip op de meal-card. */
.m-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-3);
}
.m-thinking-dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--forest-500);
  animation: m-breathe 1.4s ease-in-out infinite;
}
.m-thinking-dot:nth-child(2) { animation-delay: 0.18s; }
.m-thinking-dot:nth-child(3) { animation-delay: 0.36s; }
.m-thinking-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.005em;
}

/* Slim progress sweep — gebruikt op de AI-strip tijdens dayNudge.
 * Voert dezelfde forest-tonen door als de buttons. */
.m-strip-progress {
  position: relative;
  height: 2px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(35, 81, 57, 0.10);
  overflow: hidden;
}
.m-strip-progress::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 38%;
  background: linear-gradient(
    90deg, transparent, var(--forest-500) 50%, transparent
  );
  animation: m-strip-sweep 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

/* Reveal — gestapelde fade-in voor content die uit pending komt.
 * Stagger door inline animation-delay (bv. 80ms × index). */
.m-reveal { animation: m-reveal 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ============================================================
 * Maaltijdenpool ("Wat ga je eten?") — chips, kaarten, kompas.
 * Eén taal voor alles wat kiesbaar is: kalm cream, forest-accenten,
 * en de leaf alleen waar het lichaam "ja" zegt (past nu / aanrader).
 * ============================================================ */

/* Filter-chip */
.m-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--m-font); font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--m-pill);
  background: var(--m-card); color: var(--ink-2);
  border: 1px solid var(--m-line-2);
  cursor: pointer; white-space: nowrap; flex: 0 0 auto;
  transition: background .16s, color .16s, border-color .16s, transform .08s;
}
.m-chip:active { transform: scale(0.95); }
.m-chip.is-active {
  background: var(--forest-700); color: var(--on-forest);
  border-color: var(--forest-700);
}
@media (hover: hover) {
  .m-chip:not(.is-active):hover { border-color: var(--forest-300); color: var(--forest-800); }
}

/* Chip-rij: horizontaal scrollend, scrollbar weg, rechts een zachte fade
 * zodat je vóelt dat er meer is. */
.m-chip-rij {
  display: flex; gap: 7px;
  overflow-x: auto; padding: 2px 0 6px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 26px), transparent 100%);
}
.m-chip-rij::-webkit-scrollbar { display: none; }

/* Zoekveld — rustige focus-ring in forest-tonen */
.m-zoek {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 14px;
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  transition: border-color .16s, box-shadow .16s;
}
.m-zoek:focus-within {
  border-color: var(--forest-300);
  box-shadow: 0 0 0 3px rgba(140,191,156,0.16);
}
.m-zoek input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--m-font); font-size: 14px; color: var(--ink);
  padding: 12px 0;
}
.m-zoek input::placeholder { color: var(--ink-3); }

/* Dagplanner-paneel: blijft in beeld (onder de topbar) terwijl je door de
 * pool scrolt, zodat je bij elke + meteen ziet wat het met je dag doet. */
.m-planpaneel {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  z-index: 15;
  background: var(--m-card);
  border: 1px solid var(--forest-200);
  border-radius: 18px;
  padding: 13px 14px 12px;
  margin-bottom: 12px;
  box-shadow: var(--m-shadow-md);
}
@media (min-width: 1024px) {
  .m-planpaneel { top: 12px; }   /* geen topbar op desktop */
}

/* Poolkaart — rij in de lijst; tilt zachtjes op hover (desktop) */
.m-pool-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 14px;
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  margin-bottom: 9px;
  cursor: pointer;
  position: relative;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.m-pool-card:active { transform: scale(0.988); }
@media (hover: hover) {
  .m-pool-card:hover {
    transform: translateY(-1px);
    border-color: var(--m-line-2);
    box-shadow: var(--m-shadow-md);
  }
}
/* "past nu": een dunne leaf-veeg langs de linkerrand */
.m-pool-card.is-past::before {
  content: '';
  position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--leaf), var(--forest-500));
}

/* Topkeuze — de aanrader bovenaan: serif-naam, zachte leaf-gloed */
.m-topkeuze {
  position: relative;
  display: block; width: 100%; text-align: left;
  padding: 17px 18px 15px;
  border: 1px solid var(--forest-200);
  border-radius: var(--m-r-lg);
  background:
    radial-gradient(130% 150% at 100% 0%, var(--leaf-soft) 0%, transparent 46%),
    linear-gradient(180deg, #f4f8f0, var(--m-card) 70%);
  box-shadow: var(--m-shadow);
  margin-bottom: 12px;
  cursor: pointer; overflow: hidden;
  font-family: var(--m-font);
  transition: transform .14s, box-shadow .14s;
}
.m-topkeuze:active { transform: scale(0.99); }
@media (hover: hover) {
  .m-topkeuze:hover { transform: translateY(-1px); box-shadow: var(--m-shadow-md); }
}
.m-topkeuze-naam {
  font-family: var(--m-serif);
  font-size: 21px; font-weight: 500; line-height: 1.22;
  letter-spacing: -0.015em; color: var(--forest-950);
  text-wrap: pretty;
}

/* Grootte-stip: hapje → groot als oplopende portie (klein eetbaar detail) */
.m-stip { display: inline-block; border-radius: 999px; background: var(--forest-400); flex: 0 0 auto; }
.m-stip.hap     { width: 5px;  height: 5px;  opacity: .65; }
.m-stip.klein   { width: 7px;  height: 7px;  opacity: .75; }
.m-stip.normaal { width: 9px;  height: 9px;  opacity: .85; }
.m-stip.groot   { width: 11px; height: 11px; }

/* Dagkompas — de coach-kaart, met de grootte-mix als voelbare pills */
.m-kompas {
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 15px;
  background: var(--m-card-2);
  border: 1px solid var(--m-line);
  border-radius: var(--m-r-md);
  margin-bottom: 14px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
.m-kompas.is-klaar {
  background: var(--forest-100);
  border-color: var(--forest-200);
  color: var(--forest-900);
}
.m-kompas-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.m-kompas-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--forest-800);
  background: var(--m-card);
  border: 1px solid var(--m-line);
  border-radius: 999px; padding: 5px 11px 5px 9px;
}

/* Categorie-tegels — de ingang tot je maaltijden zodra de pool te groot wordt
   om in één lijst te tonen. Twee kolommen: label links, aantal rechts. */
.m-cat-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.m-cat-tegel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--m-font); text-align: left;
  padding: 11px 13px; border-radius: 14px;
  background: var(--m-card); border: 1px solid var(--m-line);
  cursor: pointer; min-width: 0;
  transition: border-color .16s, background .16s, transform .08s;
}
.m-cat-tegel:active { transform: scale(0.97); }
@media (hover: hover) {
  .m-cat-tegel:hover { border-color: var(--forest-300); background: var(--forest-100); }
}
.m-cat-tegel-kop {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
}
.m-cat-tegel-naam {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  /* Afbreken i.p.v. afkappen: "Koolhydraatrijk" past op een smalle telefoon
     niet op één regel, en een half woord met puntjes leest slechter dan twee
     regels. De grid-rij groeit gewoon mee, dus de tegels blijven even hoog. */
  line-height: 1.25; overflow-wrap: anywhere; min-width: 0;
}
.m-cat-tegel-num {
  font-size: 12px; font-weight: 700; color: var(--ink-3); flex: 0 0 auto;
}

/* Macro-sturing — "waar stuur je op?": het openstaande gat per macro, en
   tikken opent de gerechten die dat gat het snelst dichten. */
.m-macro-stuur {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--m-font); font-size: 12px; color: var(--ink-2);
  padding: 8px 13px; border-radius: var(--m-pill);
  background: var(--m-card); border: 1px solid var(--m-line-2);
  cursor: pointer; white-space: nowrap;
  transition: border-color .16s, transform .08s;
}
.m-macro-stuur:active { transform: scale(0.96); }
.m-macro-stuur-punt {
  width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto;
}
.m-macro-stuur-vlag {
  font-size: 10px; font-weight: 700; color: var(--forest-700);
  background: var(--forest-100); border-radius: 999px; padding: 2px 7px;
}

/* Cascade — dashboard-secties glijden gestaffeld binnen na het laden */
.m-cascade > * { animation: m-reveal .42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.m-cascade > *:nth-child(1)  { animation-delay: .02s; }
.m-cascade > *:nth-child(2)  { animation-delay: .06s; }
.m-cascade > *:nth-child(3)  { animation-delay: .10s; }
.m-cascade > *:nth-child(4)  { animation-delay: .14s; }
.m-cascade > *:nth-child(5)  { animation-delay: .18s; }
.m-cascade > *:nth-child(6)  { animation-delay: .22s; }
.m-cascade > *:nth-child(7)  { animation-delay: .26s; }
.m-cascade > *:nth-child(8)  { animation-delay: .30s; }
.m-cascade > *:nth-child(9)  { animation-delay: .34s; }
.m-cascade > *:nth-child(n+10) { animation-delay: .38s; }

/* ----- App-boot splash (vervangt "Moderis laden…") ----- */
.m-boot {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background:
    radial-gradient(120% 90% at 50% -10%, #f3eee2 0%, transparent 55%),
    var(--m-bg);
}
.m-boot-mark {
  width: 58px; height: 58px;
  border-radius: 18px;
  background: var(--forest-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 32px -12px rgba(35, 81, 57, 0.55);
  animation: m-breathe 2.4s ease-in-out infinite;
}
.m-boot-label {
  font-family: var(--m-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--forest-900);
  margin: 0;
}
.m-boot-hint {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  margin-top: -14px;
}
.m-boot-bar {
  position: relative;
  width: 140px; height: 2px;
  border-radius: 999px;
  background: rgba(35, 81, 57, 0.10);
  overflow: hidden;
}
.m-boot-bar::after {
  content: '';
  position: absolute; inset: 0;
  width: 42%;
  background: linear-gradient(
    90deg, transparent, var(--forest-500) 50%, transparent
  );
  animation: m-strip-sweep 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}