/* OurPace app — designsysteem */
:root{
  --green:#1f7a5a;--green2:#2f9c74;--green-soft:#e7f2ec;
  --ink:#16211c;--muted:#5c6b63;--bg:#f2f5f3;--card:#fff;--line:#e3e9e4;
  --danger:#b23b3b;--radius:18px;
  --c-kracht:#7a5bb0;--c-hardlopen:#c2410c;--c-fietsen:#1d6fb8;
  --c-wandelen:#1f7a5a;--c-mobiliteit:#0e7490;--c-overig:#5c6b63;
  /* Soort gerecht. Donker genoeg voor wit erop (chip) én voor de lichte
     tint erachter (badge); beide gemeten op minstens 4.5:1. */
  --s-vis:#14568f;--s-vlees:#8f3809;--s-vegetarisch:#17614a;--s-veganistisch:#3d5f13;
  /* De drie vormfilters. Bewust een andere familie dan de dieetkleuren:
     ze zeggen iets anders over een gerecht en horen niet mee te kleuren met
     wat erin zit. Contrast op wit nagemeten. */
  --s-soep:#8a5b12;--s-meenemen:#1f5f8f;--s-snel:#6b3f8f;
  --s-vis-licht:#e8f0f8;--s-vlees-licht:#f8ece5;
  --s-vegetarisch-licht:#e6f2ec;--s-veganistisch-licht:#eef3e4;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
body.appbg{background:
  radial-gradient(54rem 32rem at 112% -10%, rgba(47,156,116,.16), transparent 62%),
  radial-gradient(46rem 28rem at -14% 6%, rgba(29,111,184,.10), transparent 58%),
  var(--bg);
  background-attachment:fixed}
a{color:var(--green)}
button{font:inherit;cursor:pointer}

/* ---------- App-balk ---------- */
.appbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.appbar .inner{max-width:1020px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:16px}
.appbar .logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);text-decoration:none;font-size:1.05rem}
.appbar .logo svg{width:26px;height:26px;filter:drop-shadow(0 2px 4px rgba(31,122,90,.35))}
.appnav{display:flex;gap:4px;margin-left:auto}
.appnav a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:600;transition:background .15s,color .15s}
.appnav a svg{width:17px;height:17px}
.appnav a.active{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;box-shadow:0 3px 10px -3px rgba(31,122,90,.5)}
.appnav a:not(.active):hover{color:var(--green);background:var(--green-soft)}

/* ---------- Mobiele tabbalk ---------- */
.tabbar{display:none}
@media(max-width:760px){
  .appnav{display:none}
  .usermenu{margin-left:auto}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;color:var(--muted);text-decoration:none;font-size:.68rem;font-weight:600;border-radius:12px}
  .tabbar a svg{width:22px;height:22px}
  .tabbar a.active{color:var(--green);background:var(--green-soft)}
}

/* Onder 340px wordt een tegel krapper dan het langste label (Frans "Programme"
   heeft 63px nodig, een tegel is daar ~60px). Dan krimpt de tekst mee — labels
   verbergen is wat de oude scrollbalk deed en precies wat we kwijt wilden.
   Let op: dit blok staat NA de 760px-query, niet erin. Genest raakte de hele
   tabbalk-definitie erin verzeild en verdween de balk tussen 341 en 760px. */
@media(max-width:340px){
  .tabbar a{font-size:.62rem}
  .tabbar a svg{width:20px;height:20px}
}

/* ---------- Layout ---------- */
main.appwrap{max-width:1020px;margin:0 auto;padding:26px 18px 60px}

/* De tabbalk is vast en ~67px hoog, dus zonder extra ruimte valt de laatste
   inhoud eronder. Deze regel stond in de 760px-query hierboven, maar die komt
   in het bestand vóór de shorthand hierboven en verloor daar dus van — media
   queries verhogen de specificiteit niet, alleen de volgorde telt. */
@media(max-width:760px){main.appwrap{padding-bottom:88px}}
.pagehead{margin-bottom:20px}
.pagehead h1{font-size:1.62rem;margin:0;letter-spacing:-.4px}
.pagehead .sub{color:var(--muted);font-size:.93rem;margin-top:3px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media(max-width:760px){.grid2{grid-template-columns:1fr}
  /* "Opzijgezet" en "Eerdere weken" staan in de linkerkolom omdat daar op
     desktop 339 px leegstond naast de langere rechterkolom. Op mobiel wordt het
     één kolom, en dan zouden ze vóór de boodschappenlijst komen — die zakte
     485 px. display:contents haalt de kolomwikkels uit de stapeling zodat alle
     kaarten flexitems worden, en order zet die twee weer achteraan. */
  .mp-grid{display:flex;flex-direction:column;gap:18px}
  .mp-grid > div{display:contents}
  .mp-grid > div > .card{margin-top:0}
  .mp-grid .mp-afwijzen,.mp-grid .mp-hist{order:2}
}

@media(min-width:761px){
  /* Kolommen als flexkolom met gap, niet op de marges van `.card + .card`.
     Een verborgen maaltijdpaneel (display:none) telt wél als sibling voor die
     selector, dus de eerste zíchtbare kaart links kreeg 18 px die de
     rechterkolom niet had — de twee kolommen begonnen 18 px uit elkaar. Met
     gap doet een verborgen kaart niet mee en staan ze gelijk. */
  .mp-grid > div{display:flex;flex-direction:column;gap:18px}
  .mp-grid > div > .card{margin-top:0}
}

/* De bereidingskaarten zitten in een wikkel die het javascript vult. Zonder dit
   is die wikkel één blok in de stapeling en krijgen de kaarten erbinnen geen
   ruimte van de kolom: de boodschappenlijst plakte tegen de eerste kaart. */
.mp-grid #mp-preps{display:contents}
/* En dan mag de oude marge er niet bovenop komen: de kaarten binnen die wikkel
   zijn DOM-siblings, dus `.card + .card` telde er 18 px bij de gap op. */
.mp-grid #mp-preps > .card{margin-top:0}
/* De kcal-regel hoort bij de bakjes erboven maar is geen kaart. Zonder eigen
   marges valt hij in hetzelfde ritme als de rest van de kolom. */
.mp-grid #mp-preps > .mp-kcaldag{margin:0}

/* ---------- Kaarten ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  box-shadow:0 1px 2px rgba(22,33,28,.04),0 14px 34px -26px rgba(22,33,28,.22)}
.card h2{font-size:1.02rem;margin:0 0 14px}
.card + .card, .grid2 + .card, .card + .grid2{margin-top:18px}
.grid2 > .card{margin-top:0} /* kolommen in een grid altijd op één lijn */

/* ---------- Persoonskaart ---------- */
.person{--pc:var(--green);position:relative;overflow:hidden}
.person::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--pc),transparent 140%)}
.person .top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.05rem;flex:0 0 auto}
.person .avatar{box-shadow:0 0 0 4px color-mix(in srgb, var(--pc) 16%, transparent)}
.person .who{min-width:0}
.person .who .name{font-weight:700}
.deltachip{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--green-soft);color:var(--green)}
.deltachip.up{background:#fbf1df;color:#a06614}
.person .kg{margin-left:auto;font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px;white-space:nowrap}
.person .kg small{font-size:.95rem;font-weight:600;color:var(--muted)}
.track{height:10px;background:#e9efe9;border-radius:999px;overflow:hidden}
.track i{display:block;height:100%;border-radius:999px;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.28))}
.goalline{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;margin-top:6px}
.stats{display:flex;gap:10px;margin-top:14px}
.stats > div{flex:1;background:#f5f8f6;border-radius:12px;padding:9px 6px;text-align:center}
.stats b{display:block;font-size:1.12rem;font-variant-numeric:tabular-nums}
.stats span{font-size:.68rem;color:var(--muted);line-height:1.25;display:block;margin-top:1px}
.stats .tint.g{background:#e9f4ee}
.stats .tint.g b{color:var(--green)}
.stats .tint.b{background:#e9f0f8}
.stats .tint.b b{color:var(--c-fietsen)}

/* ---------- Grafiek ---------- */
.chartwrap{position:relative;height:300px}
@media(max-width:760px){.chartwrap{height:240px}}

/* ---------- Feed ---------- */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.feed li:last-child{border-bottom:none}
.fic{width:38px;height:38px;border-radius:12px;background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fic svg{width:19px;height:19px}
.fic.c-kracht{background:#f0eafa;color:var(--c-kracht)}
.fic.c-hardlopen{background:#fdf1e3;color:var(--c-hardlopen)}
.fic.c-fietsen{background:#e9f0f8;color:var(--c-fietsen)}
.fic.c-wandelen{background:#e7f2ec;color:var(--c-wandelen)}
.fic.c-mobiliteit{background:#e4f3f6;color:var(--c-mobiliteit)}
.fic.c-overig{background:#f0f2f0;color:var(--c-overig)}
.feed .what{min-width:0}
.feed .what b{display:block;font-size:.94rem}
.feed .what span{color:var(--muted);font-size:.82rem}
.feed .when{margin-left:auto;color:var(--muted);font-size:.82rem;white-space:nowrap}
.empty{color:var(--muted);font-size:.92rem;text-align:center;padding:18px 0}
.chartnoot{color:var(--muted);font-size:.82rem;text-align:center;padding:0 4px 10px}
.bigempty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:34px 16px}
.bigempty svg{width:40px;height:40px;color:#b9c9c0}
.bigempty b{font-size:1.05rem}
.bigempty p{margin:0;color:var(--muted);font-size:.93rem;max-width:420px}
.bigempty .btn{margin-top:10px}

/* ---------- Formulieren ---------- */
label{display:block;font-size:.86rem;font-weight:600;color:#33413a;margin-bottom:5px}
.field{margin-bottom:14px}
input,select,textarea{width:100%;font:inherit;padding:11px 13px;border:1.5px solid #d5dfd8;border-radius:12px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,122,90,.14)}
textarea{resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border:none;border-radius:12px;padding:12px 18px;font-weight:700;text-decoration:none;
  transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px -6px rgba(31,122,90,.45)}
.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px -6px rgba(31,122,90,.5)}
.btn.ghost{background:#fff;color:var(--green);border:1.5px solid var(--green);box-shadow:none}
.btn.slim{width:auto;padding:10px 24px}
.btn.danger-link{width:auto;background:none;color:var(--danger);padding:4px 6px;font-size:.83rem;font-weight:600;box-shadow:none}
.btn.danger-link:hover{transform:none;box-shadow:none}
.hint{color:var(--muted);font-size:.82rem}
/* Een rij velden telt als één veld: zonder ondermarge plakt hij tegen het
   volgende veld aan, en dat is door de app heen zichtbaar. */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatch{position:relative;display:inline-block;width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s}
.swatch:has(input:checked){border-color:var(--ink);transform:scale(1.1)}
.swatch:has(input:focus-visible){box-shadow:0 0 0 3px rgba(31,122,90,.35)}
.swatch input{position:absolute;opacity:0;width:1px;height:1px}

/* ---------- Weging-status (Loggen) ---------- */
.wstatus{--pc:var(--green);background:linear-gradient(140deg,#f3f9f6,#eaf3ee);border:1px solid #dbe8e0;border-radius:14px;padding:14px 16px;margin-bottom:16px}
.wstatus .ws-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.wstatus .ws-kg{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.wstatus .ws-kg small{font-size:.9rem;font-weight:600;color:var(--muted)}
.wstatus .ws-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.wstatus .ws-meta > span:first-child{color:var(--muted);font-size:.8rem}
.wstatus .track{height:8px}
.wstatus .ws-none{color:var(--muted);font-size:.9rem}

/* ---------- Snel wegen & streaks ---------- */
.chiprow2{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.streakchip{display:inline-flex;align-items:center;gap:3px;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:999px;background:#fdf1e3;color:#c2410c}
.streakchip svg{width:13px;height:13px}
.quickweigh{display:flex;gap:8px;margin-top:14px}
.quickweigh input[type=number]{flex:1}
.quickweigh .btn{width:auto;padding:11px 20px}
.card.together{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;
  background:linear-gradient(135deg,#175d45,#1f7a5a 45%,#2f9c74);border:none;color:#fff;
  box-shadow:0 14px 34px -18px rgba(23,93,69,.55)}
.card.together::after{content:"";position:absolute;right:-70px;top:-90px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.card.together .tg-left{display:flex;align-items:center;gap:12px}
.card.together .tg-left svg{width:30px;height:24px;color:#fff;opacity:.9}
.card.together b{display:block;font-size:.95rem}
.card.together .tg-left span{font-size:.82rem;opacity:.9}
.card.together .tg-right{display:flex;align-items:center;gap:7px;flex-wrap:wrap;position:relative}
.card.together .tg-right .hint{color:rgba(255,255,255,.75)}
.daychip{font-size:.78rem;font-weight:700;padding:3px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.daychip.on{background:rgba(255,255,255,.92);color:#1f7a5a;border-color:transparent}

/* ---------- Levels, weekring & badges ---------- */
.lvlchip{display:inline-flex;align-items:center;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:999px;background:#eef1fa;color:#3b5bcc}
.stats .ringtile{display:flex;flex-direction:column;align-items:center;gap:2px}
.ringwrap{position:relative;width:46px;height:46px}
.ringwrap svg{width:46px;height:46px;display:block}
.ringnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;font-variant-numeric:tabular-nums}
.badgecols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.badgecols{grid-template-columns:1fr}}
.bhead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.avatar.sm{width:26px;height:26px;font-size:.8rem}
.xpline{margin-left:auto;color:var(--muted);font-size:.78rem;font-weight:600}
.xpbar{height:7px;background:#e9efe9;border-radius:999px;overflow:hidden;margin-bottom:12px}
.xpbar i{display:block;height:100%;border-radius:999px;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.3))}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.badge{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border:1px solid var(--line);border-radius:12px;color:#b9c4bd;background:#fafcfa;text-align:center}
.badge svg{width:20px;height:20px}
.badge em{font-style:normal;font-size:.64rem;font-weight:600;line-height:1.2}
.badge.on{color:var(--green);background:linear-gradient(160deg,#eaf5ef,#d9ece1);border-color:#bedccb;box-shadow:0 3px 9px -4px rgba(31,122,90,.35)}
.samenrow{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.flash > div.celebrate{background:linear-gradient(135deg,#1f7a5a,#2f9c74);color:#fff;border:none;font-weight:700;animation:pop .45s ease;box-shadow:0 10px 26px -12px rgba(31,122,90,.6)}
@keyframes pop{0%{transform:scale(.94);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---------- Type-tegels & duur-chips ---------- */
.typegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.typetile{--tc:var(--muted);position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1.5px solid #d5dfd8;border-radius:12px;cursor:pointer;font-size:.78rem;font-weight:600;color:var(--muted);text-align:center;margin:0;transition:border-color .15s,background .15s}
.typetile input{position:absolute;opacity:0;pointer-events:none}
.typetile svg{width:22px;height:22px;color:var(--tc)}
.tt-kracht{--tc:var(--c-kracht)}
.tt-hardlopen{--tc:var(--c-hardlopen)}
.tt-fietsen{--tc:var(--c-fietsen)}
.tt-wandelen{--tc:var(--c-wandelen)}
.tt-mobiliteit{--tc:var(--c-mobiliteit)}
.tt-overig{--tc:var(--c-overig)}
.typetile:hover{border-color:var(--tc)}
.typetile:has(input:checked){border-color:var(--tc);color:var(--tc);background:#f4f7f5;background:color-mix(in srgb, var(--tc) 9%, #fff);box-shadow:0 0 0 3px color-mix(in srgb, var(--tc) 14%, transparent)}
.chips{display:flex;gap:7px;margin-top:8px}
.chip{flex:1;background:#f5f8f6;border:1.5px solid #d5dfd8;border-radius:9px;padding:6px 0;font-size:.82rem;font-weight:700;color:var(--muted)}
.chip:hover{border-color:var(--green);color:var(--green)}
.chip:active{transform:scale(.95)}

/* ---------- Meldingen ---------- */
.flash{max-width:1020px;margin:16px auto -6px;padding:0 18px}
.flash>div{background:var(--green-soft);border:1px solid #c8e2d5;color:#1f5c46;padding:11px 14px;border-radius:12px;font-size:.92rem}
.errors{background:#fbe9e9;border:1px solid #f0c4c4;color:#a12b2b;padding:11px 14px;border-radius:12px;font-size:.9rem;margin-bottom:14px}
.errors ul{margin:0;padding-left:18px}

/* ---------- Tabellen (historie) ---------- */
table.list{width:100%;border-collapse:collapse;font-size:.9rem}
table.list th,table.list td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:left}
table.list th{color:var(--muted);font-weight:600;font-size:.8rem}
table.list tr:last-child td{border-bottom:none}
.right{text-align:right}

/* ---------- Login ---------- */
body.authpage{background:linear-gradient(150deg,#1f7a5a,#2f9c74);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.authcard{background:#fff;border-radius:20px;padding:34px 30px;width:100%;max-width:400px;box-shadow:0 30px 70px -20px rgba(10,40,28,.5)}
.langpick{display:flex;justify-content:center;gap:6px;margin-bottom:16px}
.langpick a{font-size:.72rem;font-weight:700;color:var(--muted);text-decoration:none;padding:3px 9px;border-radius:999px;border:1px solid var(--line)}
.langpick a.active{background:var(--green-soft);color:var(--green);border-color:#c8e2d5}
.authcard .brandrow{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:1.25rem;margin-bottom:6px}
.authcard .brandrow svg{width:28px;height:28px}
.authcard .tagline{text-align:center;color:var(--muted);font-size:.9rem;margin:0 0 22px}
.remember{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.remember input{width:auto}
.remember label{margin:0;font-weight:500}

/* ---------- Zwevende feedbackknop ---------- */
@media(max-width:760px){
    }

/* Beheer: stellen en gebruikers. Blokken in plaats van een tabel — er staan
   formulieren in, en die passen niet in een cel. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stel{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.stel:last-child{margin-bottom:0}
.stelkop{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.stelstatus{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700}
.lid{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.lidnaam{flex:1 1 180px;min-width:0}
.lidmail{display:flex;gap:8px;flex:2 1 320px}
.lidmail input{flex:1;min-width:0}
.steltoegang{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.steltoegang .field{margin-bottom:0;flex:1 1 180px}
@media(max-width:720px){.lidmail{flex-basis:100%}.steltoegang .field{flex-basis:100%}}
.verifybanner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* **Een verzoek is geen bevestiging.** Deze balk had dezelfde groene opmaak als
   de "opgeslagen"-melding en las daardoor als iets dat al goed was. Amber, met
   een rand die opvalt: dit is iets dat je nog moet doen, en zonder dat krijg je
   geen enkele mail. `.flash > div` staat eerder in het bestand, dus deze regel
   wint op volgorde — geen !important nodig. */
.flash > div.let-op{background:#fdf6e3;border-color:#e8d5a3;color:#7a5a1f}
.flash > div.let-op .btn.ghost{border-color:#c9a94f;color:#7a5a1f}
.check{display:flex;align-items:flex-start;gap:8px;font-weight:400}
.check input{margin-top:3px;flex:0 0 auto}

/* ---------- Mealprep-bouwer ---------- */
.mp-lbl{display:block;margin:16px 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
/* "kies er zoveel als je wilt" achter het sectielabel: een vinkje ziet er
   hetzelfde uit als een rondje, dus zonder dit is de vrijheid onzichtbaar. */
.mp-multi{margin-left:8px;font-weight:600;letter-spacing:0;text-transform:none;opacity:.75}
.mp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
/* De maaltijdtabs. Even breed, zodat de balk niet verspringt als je een
   maaltijd aan- of uitzet — een tab die van plaats wisselt terwijl je kijkt
   kost meer dan hij oplevert. */
/* `align-self:stretch` en niet `flex:0 0 100%`. Onder 760px staat de
   kolomwikkel op display:contents (zie de mediaquery bovenaan), dus deze balk is
   dán zélf een item van `.mp-grid` — en die is een *kolom*-flexcontainer met
   `align-items:start` (§4.5, dat de gridkolommen op één lijn houdt). In een
   kolom slaat flex-basis op de hóógte, dus 100% deed niets aan de breedte; en
   `start` betekent dat het item naar zijn inhoud krimpt. Gemeten: drie tabs van
   73 px in een ruimte van 339. `stretch` is de eigenschap die er wél over gaat.
   Op desktop is de balk een gewoon blok en doet deze regel niets. */
/* Geen eigen ondermarge: de kolom is een flexkolom met `gap:18px`, en een
   marge erbovenop maakt er 30 van — precies de soort layoutconstante die hier
   al drie keer stilletjes verliep (§4.41). */
.mp-tabs{display:flex;gap:6px;margin:0;align-self:stretch}
.mp-tab{flex:1 1 0;min-width:0;background:#fff;border:1.5px solid #d5dfd8;border-radius:10px;
  padding:10px 8px;font-size:.86rem;font-weight:700;color:var(--muted);cursor:pointer;
  transition:border-color .12s,background .12s,color .12s}
.mp-tab.on{background:var(--green);border-color:var(--green);color:#fff}
/* Staat de tabbalk er, dan zegt die al welke maaltijd je bekijkt; de kop van het
   paneel is dan de derde plek met hetzelfde woord. Zonder javascript blijft de
   balk weg en is die kop juist het enige dat het zegt. */
.mp-mettabs .mp-meal > h2{display:none}
/* **`hidden` verliest van elke eigen regel met een `display`** (§4.32). De
   browserregel `[hidden]{display:none}` staat in dezelfde origin als onze
   `.mp-tabs{display:flex}` en heeft dezelfde specificiteit, dus wint de laatste
   — en dan staat de balk er nog terwijl hij verborgen hoort te zijn. Gemeten bij
   één maaltijd: `hidden` was true en de knop had gewoon hoogte.
   Twee attributen respectievelijk klasse+attribuut halen het wél. */
.mp-tabs[hidden]{display:none}
.mp-tab[hidden]{display:none}
/* De weekkeuze is een link en geen invoerveld, maar leest als dezelfde chip.
   De .on-klasse mag hier wél: een link navigeert, dus de server weet welke
   aanstaat. */
a.mp-chip{text-decoration:none;color:inherit}
/* De datum naast de weeknaam. Gedempt en een maat kleiner: de naam zegt
   waar je bent, de datum bevestigt het — die tweede hoort niet even hard
   te roepen. Geen eigen regel, want dan wordt de chip twee keer zo hoog. */
.mp-weekdatum{margin-left:5px;font-weight:600;opacity:.65;font-variant-numeric:tabular-nums}
.mp-kcal{margin:2px 0 0;font-size:.85rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.mp-kcaldag{margin-top:10px}
/* "Alle gerechten": een uitklap zonder JavaScript, zelfde patroon als het
   poppetjesmenu in de app-balk. */
.mp-alle{margin-top:12px}
.mp-alle summary{cursor:pointer;font-size:.86rem;font-weight:600;color:var(--green);list-style:none}
.mp-alle summary::-webkit-details-marker{display:none}
.mp-alle summary::before{content:"▸ ";font-size:.8em}
.mp-alle[open] summary::before{content:"▾ "}
/* Afwijzen: een rij met het gerecht en de knop ernaast. */
/* Opzijgezette gerechten: elke chip ís de terugzetknop. Geen rij per gerecht
   met een formulier eromheen — dat werd een kolom volle-breedte knoppen. */
.mp-wegchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mp-wegchip{display:inline-flex;align-items:center;gap:7px;
  background:#f5f8f6;border:1.5px solid #d5dfd8;border-radius:999px;
  padding:6px 13px;font-size:.85rem;font-weight:600;color:var(--muted);
  transition:border-color .12s,color .12s,background .12s}
.mp-wegchip svg{width:14px;height:14px;flex:0 0 auto}
.mp-wegchip:hover{background:#fff;border-color:var(--green);color:var(--green)}
.mp-wegchip:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* "Dit was niks", op de kaart van het gerecht zelf. Mét tekst: een kaal kruisje
   zegt niet wát er gebeurt, en dit is een keuze die je niet per ongeluk wilt
   maken. Onderaan de kaart en rechts uitgelijnd, zodat hij niet met de titel
   vecht. Het icoon negeert klikken, anders geeft het label die alsnog aan de
   radio door. */
.mp-wegrij{display:block;margin-top:9px;text-align:right}
.mp-weg{display:inline-flex;align-items:center;gap:5px;width:auto;
  /* Eigen randkleur en niet var(--line): die verdwijnt op een gekozen kaart
     (contrast 1.07 tegen het groen). Deze is op wit én op groen zichtbaar. */
  background:none;border:1px solid #bacabf;border-radius:999px;
  padding:5px 11px;font-size:.76rem;font-weight:600;color:var(--muted);
  transition:background .12s,color .12s,border-color .12s}
.mp-weg svg{width:13px;height:13px;pointer-events:none}
.mp-weg:hover{background:#fdeceb;border-color:#e0aaa6;color:var(--danger)}
.mp-weg:focus-visible{outline:2px solid var(--danger);outline-offset:1px}

/* Terugdraaien staat in de melding zelf. De opmaak van een melding hangt aan
   .flash > div, dus de tekst en de knop zitten samen in die laag. */
.mp-flashrij{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mp-flashknop{width:auto;flex:0 0 auto;background:none;border:1.5px solid currentColor;
  border-radius:999px;padding:4px 12px;font-size:.82rem;font-weight:700;color:inherit}
.mp-flashknop:hover{background:rgba(255,255,255,.5)}

/* Zoeken en filteren, bóven de uitklap: een filterbalk die meebuigt. In de
   linkerkolom (441 px) passen het veld en de vier chips samen niet op één regel
   — de chips zijn al 440 px — dus daar breekt hij netjes af. Op een bredere
   plek deelt hij wél één regel. */
.mp-zoekrij{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
/* width:auto erbij: .mp-zoek draagt width:100%, en dat wordt in een flexrij de
   basisbreedte — dan pakt het veld de hele regel en wippen de chips eronder.
   Zelfde val als .btn in .mp-balk en in de oude afwijsrij. */
.mp-zoekrij .mp-zoek{flex:1 1 200px;width:auto;margin:0}
.mp-zoekrij .mp-soorten{flex:0 1 auto;margin:0}
/* Gerechtkaarten: naam, omschrijving en tijd onder elkaar in één klikvlak.
   Radio's staan verborgen — het hele blok is de knop. */
.mp-gerechten{display:grid;gap:10px;margin-top:10px}
.mp-gerecht{display:block;position:relative;cursor:pointer;margin:0;padding:13px 15px;
  background:#f5f8f6;border:1.5px solid #d5dfd8;border-radius:14px;transition:border-color .15s,background .15s}
.mp-gerecht input{position:absolute;opacity:0;pointer-events:none}
.mp-gerecht b{display:block;font-size:.98rem;color:var(--ink)}
.mp-gerecht span{display:block;color:var(--muted);font-size:.86rem;font-weight:400;margin-top:2px}
.mp-gerecht small{display:block;color:var(--muted);font-size:.76rem;margin-top:5px;font-variant-numeric:tabular-nums}
.mp-gerecht:hover{border-color:var(--green2)}
/* De selectie volgt de radio, niet een klasse die de server rendert. Met zo'n
   klasse bleef de groene markering staan op het gerecht waarmee de pagina
   laadde, terwijl je er allang een ander had aangeklikt — dat was de bug.
   Zelfde patroon als .mp-chip, .typetile en .swatch hierboven. */
.mp-gerecht:has(input:checked){background:var(--green-soft);border-color:var(--green)}
.mp-gerecht:has(input:checked) b{color:var(--green)}
.mp-gerecht:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.mp-hist h2{margin:0 0 10px}
.mp-histrij{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:10px 0;border-top:1px solid var(--line)}
.mp-histrij:first-of-type{border-top:0}
.mp-histrij .hint{margin:2px 0 0}
.mp-histlink{white-space:nowrap;font-weight:600;font-size:.85rem}
.mp-chip{display:inline-flex;align-items:center;background:#f5f8f6;border:1.5px solid #d5dfd8;
  border-radius:9px;padding:7px 11px;font-size:.82rem;font-weight:700;color:var(--muted);
  cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.mp-chip input{position:absolute;opacity:0;width:0;height:0}
.mp-chip:hover{border-color:var(--green);color:var(--green)}
.mp-chip:has(input:checked){background:var(--green);border-color:var(--green);color:#fff}
.mp-chip:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}

.mp-meal h2{margin:0 0 4px;font-size:1.02rem}
.mp-note{border-left:4px solid var(--green)}

/* De uitleg bij het aantal bakjes: staat direct onder de kop, want die
   verklaart het getal in de badge ernaast. */
.mp-vries{margin:6px 0 0}
.mp-vries[hidden]{display:none}
.mp-list{list-style:none;margin:10px 0 0;padding:0}
.mp-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:7px 0;border-top:1px solid #eef2ef}
.mp-list li:first-child{border-top:0}
.mp-item{font-size:.9rem}
.mp-amount{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}

.mp-steps{margin:10px 0 0;padding-left:20px}
/* ---------- Heb je het gemaakt? ---------- */
.mp-uitkomstrij{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:11px 0;border-top:1px solid var(--line)}
.mp-uitkomstrij:first-of-type{border-top:0}
.mp-uitkomstnaam{flex:1 1 180px;font-size:.92rem;font-weight:600}
.mp-uitkomstknoppen{display:flex;gap:6px;flex-wrap:wrap}
.mp-uitkomstknop{padding:6px 11px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font:inherit;font-size:.82rem;font-weight:700;color:var(--muted);cursor:pointer}
.mp-uitkomstknop:hover{border-color:var(--green);color:var(--green)}
.mp-uitkomstknop.on{background:var(--green);border-color:var(--green);color:#fff}
.mp-uitkomstvlag{margin-left:6px;font-size:.72rem;font-weight:700;
  padding:1px 7px;border-radius:999px;background:#eef1ef;color:var(--muted)}
.mp-uitkomstvlag.gemaakt{background:#e7f3ea;color:var(--green)}

.mp-zoek{width:100%;margin:0 0 8px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.9rem;background:#fff;color:inherit}
.mp-zoek:focus{outline:2px solid var(--green);outline-offset:1px}

/* ---------- Mealprep: samen ---------- */
/* Wat je partner koos, en wat jij daarmee doet. Aansluiten en zelf iets kiezen
   staan náást elkaar: allebei kunnen jullie een eigen gerecht hebben — de tabel
   staat per gebruiker — en aansluiten is dus een aanbod en geen voorschrift. */
.mp-partnerblok{margin:0 0 12px;padding:10px 12px;background:#fafcfa;
  border:1px solid var(--line);border-left:4px solid var(--green2);border-radius:10px}
.mp-partnerkeuze{margin:0;font-size:.88rem}
.mp-partneractie{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:8px}
/* `width:auto` erbij is geen sier: in een flexrij wordt `width:100%` de
   basisbreedte en krimpt de buurman naar niets (§4.42). Deze knop is geen
   `.btn`, maar dezelfde val ligt hier klaar. */
.mp-aansluit{flex:0 0 auto;width:auto;padding:7px 13px;border:1px solid var(--green);
  border-radius:999px;background:#fff;color:var(--green);font:inherit;font-size:.82rem;
  font-weight:700;cursor:pointer}
.mp-aansluit:hover{background:var(--green-soft)}
.mp-aansluit:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.mp-aansluit.on{background:var(--green);border-color:var(--green);color:#fff}
.mp-partneractie .hint{flex:1 1 auto;margin:0}

/* Van wie een regel of een bakje is. Klein en grijs: de boodschappenlijst
   blijft één lijst — je doet één keer boodschappen — en het naambordje zegt
   alleen van wie een regel komt. Het staat er alleen bij een partner met een
   vastgezette week; anders is elke regel van jou. */
.mp-voor{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
  background:#eef1ef;color:var(--muted);font-size:.7rem;font-weight:700;
  vertical-align:middle;white-space:nowrap}
.bhead .mp-voor{margin-left:0}

.mp-partnerlijst{list-style:none;margin:8px 0 0;padding:0;font-size:.86rem}
.mp-partnerlijst li{display:flex;flex-wrap:wrap;gap:4px 10px;padding:3px 0}
.mp-partnermaaltijd{flex:0 0 auto;min-width:72px;color:var(--muted)}

/* ---------- Mealprep: soort gerecht ---------- */
/* Vinkjes als chips. Meervoudig, dus geen radio-uiterlijk: een chip die aanstaat
   is gevuld in zijn eigen kleur, en die kleur komt terug op de kaarten zelf. */
.mp-soorten{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.mp-soortknop{display:inline-flex;align-items:center;gap:6px;position:relative;
  background:#f5f8f6;border:1.5px solid #d5dfd8;border-radius:999px;
  padding:5px 12px;font-size:.82rem;font-weight:600;color:var(--muted);
  cursor:pointer;user-select:none;transition:background .12s,border-color .12s,color .12s}
.mp-soortknop input{position:absolute;opacity:0;width:0;height:0}
.mp-soortknop b{font-weight:600;font-size:.76rem;opacity:.7;font-variant-numeric:tabular-nums}
.mp-soortknop:hover{border-color:currentColor}
.mp-soortknop:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
a.mp-soortknop{text-decoration:none}
.mp-soortknop.on,.mp-soortknop:has(input:checked){color:#fff}
.mp-soortknop.on b,.mp-soortknop:has(input:checked) b{opacity:.85}
.mp-soortknop.leeg{opacity:.45;cursor:default}

.mp-soort-vis:hover,.mp-soort-vis.on,.mp-soort-vis:has(input:checked){border-color:var(--s-vis)}
.mp-soort-vlees:hover,.mp-soort-vlees.on,.mp-soort-vlees:has(input:checked){border-color:var(--s-vlees)}
.mp-soort-vegetarisch:hover,.mp-soort-vegetarisch.on,.mp-soort-vegetarisch:has(input:checked){border-color:var(--s-vegetarisch)}
.mp-soort-veganistisch:hover,.mp-soort-veganistisch.on,.mp-soort-veganistisch:has(input:checked){border-color:var(--s-veganistisch)}
.mp-soortknop.mp-soort-vis:not(.on):hover{color:var(--s-vis)}
.mp-soortknop.mp-soort-vlees:not(.on):hover{color:var(--s-vlees)}
.mp-soortknop.mp-soort-vegetarisch:not(.on):hover{color:var(--s-vegetarisch)}
.mp-soortknop.mp-soort-veganistisch:not(.on):hover{color:var(--s-veganistisch)}
.mp-soortknop.mp-soort-vis.on,.mp-soortknop.mp-soort-vis:has(input:checked){background:var(--s-vis);color:#fff}
.mp-soortknop.mp-soort-vlees.on,.mp-soortknop.mp-soort-vlees:has(input:checked){background:var(--s-vlees);color:#fff}
.mp-soortknop.mp-soort-vegetarisch.on,.mp-soortknop.mp-soort-vegetarisch:has(input:checked){background:var(--s-vegetarisch);color:#fff}
.mp-soortknop.mp-soort-veganistisch.on,.mp-soortknop.mp-soort-veganistisch:has(input:checked){background:var(--s-veganistisch);color:#fff}

/* Het merkteken op de kaart zelf. Staat vooraan in de regel met de feiten, want
   dat is waar je op scant als je door honderd kaarten gaat. */
span.mp-soort{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.02em;
  background:rgba(0,0,0,.05);color:var(--muted);vertical-align:1px}
span.mp-soort+span.mp-soort{margin-left:-3px}
span.mp-soort-vis{background:var(--s-vis-licht);color:var(--s-vis)}
span.mp-soort-vlees{background:var(--s-vlees-licht);color:var(--s-vlees)}
span.mp-soort-vegetarisch{background:var(--s-vegetarisch-licht);color:var(--s-vegetarisch)}
span.mp-soort-veganistisch{background:var(--s-veganistisch-licht);color:var(--s-veganistisch)}
.mp-meta{margin:2px 0 0;font-size:.85rem;font-weight:600;color:var(--muted)}
.mp-subkop{margin:14px 0 0;font-size:.85rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.mp-opwarmen{list-style:disc}
.mp-steps li{margin:7px 0;font-size:.9rem;line-height:1.5}

/* De ingrediënten van één gerecht. Twee kolommen zoals de boodschappenlijst —
   naam links, hoeveelheid rechts uitgelijnd met tabelcijfers, zodat je ze onder
   elkaar kunt lezen. Bewust géén opsommingstekens: dit is een lijst om af te
   vinken terwijl je kookt, geen tekst om te lezen. */
.mp-ingredienten{list-style:none;margin:8px 0 0;padding:0}
.mp-ingredienten li{display:flex;justify-content:space-between;gap:12px;
  padding:4px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.mp-ingredienten li:last-child{border-bottom:0}
.mp-ing-naam{min-width:0}
.mp-ing-hoev{flex:0 0 auto;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}

/* Het voorwerk: bolletjes en geen nummers. De volgorde is de klok — wat het
   langst duurt eerst — maar het is geen recept waarin stap 2 op stap 1 wacht. */
.mp-voorwerk{list-style:disc}

/* Waarom het goed blijft. Getint zodat het opvalt als de zin waar deze hele
   app om draait: je maakt het nu en eet het over drie dagen. */
/* "Jouw keuze staat er nog niet bij." Getint als een mededeling en niet als
   waarschuwing: er is niets stuk, je hebt alleen nog niet vastgezet. */
.mp-nogniet{margin:0 0 10px;padding:9px 12px;border-radius:10px;
  background:#fdf6e8;color:#6b4b16;font-size:.88rem;line-height:1.5}

.mp-bewaartip{margin:8px 0 0;padding:10px 12px;border-radius:10px;
  background:#f3f6f3;font-size:.88rem;line-height:1.55;color:#2b3a33}

.mp-warn,.mp-leaf{margin:10px 0 0;padding:8px 11px;border-radius:9px;font-size:.82rem}
.mp-warn{background:#fdf3e3;color:#8a5b12}
.mp-leaf{background:#eef7f2;color:#1f7a5a}

.mp-unpin{margin-top:10px}
.mp-ghost{background:none;border:1.5px solid #d5dfd8;color:var(--muted);box-shadow:none}
.mp-ghost:hover{border-color:var(--green);color:var(--green)}
.mp-disclaimer{margin-top:18px;font-size:.78rem;color:var(--muted);line-height:1.5}

/* Botsende bouwstenen staan wel in de HTML maar zijn verborgen, zodat de
   "toon alles"-schakelaar geen nieuw verzoek nodig heeft. Een botsende optie
   die tóch geselecteerd is blijft altijd zichtbaar — anders verdwijnt je
   eigen keuze uit beeld als je later je voorkeuren aanpast. */
.mp-clash{display:none}
.mp-showall .mp-clash,.mp-clash:has(input:checked){display:inline-flex}
.mp-showall .mp-clash{opacity:.62}
/* Een gerechtkaart is een blok en geen chip; de regel hierboven komt uit het
   bouwsteen-tijdperk toen alleen chips konden botsen. */
.mp-showall .mp-gerecht.mp-clash,.mp-gerecht.mp-clash:has(input:checked){display:block}
/* Het `hidden`-attribuut verliest van elke author-regel met een display.
   `.mp-gerecht{display:block}` en `.mp-chip{display:inline-flex}` staan in
   dezelfde origin als de UA-regel `[hidden]{display:none}` en winnen op
   volgorde. Twee attributen geven genoeg specificiteit; !important is hier niet
   nodig — maar `.mp-showall .mp-gerecht.mp-clash` heeft er drie, dus de
   afkomst erbij. Deze regel staat bewust als laatste: wat je wegfiltert hoort
   weg te blijven, ook als "alles tonen" aan staat. */
.mp-gerechten [data-filterbaar][hidden],#beheer-gerechten [data-filterbaar][hidden]{display:none}

.mp-toggle{display:inline-flex;align-items:center;gap:7px;margin-top:8px;
  font-size:.85rem;font-weight:700;color:var(--green);cursor:pointer}

/* ---------- Beheer: registratieschakelaar en knoprijen ---------- */
.regcard{border-left:4px solid var(--green)}
.regcard form{margin-top:10px}
.badge.aan{background:#e6f4ec;color:#1f7a5a;border-color:#bfe0ce}
.badge.uit{background:#fdf3e3;color:#8a5b12;border-color:#eddcbb}

/* De knoppen onder een gebruiker stonden gestapeld en links uitgelijnd,
   waardoor 'Adres opslaan' en 'Herstel-link sturen' als twee losse blokken
   onder elkaar hingen. Nu één rij die netjes wrapt op smal scherm. */
.lidacties{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:6px}
.lidacties form{display:flex;align-items:center;gap:8px;margin:0}
.lidacties .lidmail{flex:1 1 320px}
.lidacties .lidmail input{flex:1;min-width:0}
.lidacties .btn.slim{white-space:nowrap}
@media (max-width:560px){
  .lidacties,.lidacties form{width:100%}
  .lidacties .btn.slim{width:100%}
}

/* ---------- Feedback als dialoog ---------- */
.fbdlg{width:min(520px,calc(100vw - 32px));border:0;border-radius:16px;padding:0;
  box-shadow:0 24px 60px rgba(16,42,32,.24)}
.fbdlg::backdrop{background:rgba(16,42,32,.42)}
.fbform{padding:20px 22px 22px}
.fbform h2{margin:0;font-size:1.06rem}
.fbform .field{margin-top:14px}
.fbform textarea{width:100%;box-sizing:border-box}
.fbclose{background:none;border:0;padding:6px;margin:-6px -6px 0 0;border-radius:8px;
  color:var(--muted);cursor:pointer;line-height:0}
.fbclose:hover{background:#f0f4f1;color:var(--green)}
.fbtypes{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}

/* De tabbalk draagt vier items — dagelijks werk. Historie, profiel, beheer,
   feedback en uitloggen zitten in het poppetjesmenu rechtsboven. Er stond hier
   eerder een horizontale scrollbalk omdat er zeven items in 375 pixels moesten;
   die is weg, anders flexen vier items niet uit. */
/* Geen margin-left:auto hier: op desktop duwt .appnav zelf al alles naar
   rechts, en twee auto-marges verdelen de vrije ruimte in plaats van hem aan
   één kant te leggen. Op mobiel is .appnav verborgen en krijgt het menu de
   auto-marge alsnog — zie het mobiele blok. */
.usermenu{position:relative}
.usermenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;color:var(--muted);transition:background .15s,color .15s}
.usermenu>summary::-webkit-details-marker{display:none}
.usermenu>summary:hover,.usermenu[open]>summary{background:var(--green-soft);color:var(--green)}
.usermenu>summary svg{width:20px;height:20px}
.usermenu-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:208px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 18px 40px -14px rgba(16,42,32,.3)}
.usermenu-panel a,.usermenu-panel button{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:.92rem;
  font-weight:600;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer}
.usermenu-panel a svg,.usermenu-panel button svg{width:17px;height:17px;color:var(--muted)}
.usermenu-panel a:hover,.usermenu-panel button:hover{background:var(--green-soft);color:var(--green)}
.usermenu-panel a.active{color:var(--green)}
.usermenu-panel form{margin:0}
.usermenu-panel button:hover{color:var(--danger)}

/* Kop van een kaart met een ingang rechts. De h2 houdt zijn eigen marges, dus
   die worden hier niet overschreven — anders schuift elke kaart met een kop. */
.cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cardlink{color:var(--green);text-decoration:none;font-size:.85rem;font-weight:600;white-space:nowrap}
.cardlink:hover{text-decoration:underline}

/* Drie gelijkwaardige signalen per persoon. Gelijke breedte, want gelijkwaardig
   is hier de hele boodschap: gewicht is één van de drie, niet de kop. */
.signalen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.sig{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:12px 8px;border-radius:12px;background:#f6f8f6}
.siglabel{font-size:.7rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.sigwaarde{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.sigwaarde small{font-size:.75rem;font-weight:600;color:var(--muted)}
.sigwaarde.ok{color:var(--green)}
.sigsub{font-size:.72rem;color:var(--muted);line-height:1.3}
.sigsub.warn{color:#b45309}
.sigsub.link{color:var(--green);text-decoration:underline}
.sig .track{width:100%;margin:2px 0}
.sig .ringwrap{width:46px;height:46px}
/* Onder 400px is een tegel ongeveer 95px breed. Met .72rem brak "0 km deze
   week" over twee regels; op .64rem past hij op één. Kleiner maken en niet
   inkorten, want "deze week" doet er toe: de km's tellen vanaf maandag terwijl
   de actieve dagen over de laatste zeven lopen. */
@media(max-width:400px){
  .signalen{gap:6px}
  .sig{padding:10px 4px}
  .sigwaarde{font-size:1.25rem}
  .sigsub{font-size:.64rem}
  .siglabel{font-size:.64rem}
}

.periodekeuze{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.periodekeuze a{padding:4px 9px;border-radius:999px;font-size:.78rem;font-weight:600;
  color:var(--muted);text-decoration:none}
.periodekeuze a:hover{background:var(--green-soft);color:var(--green)}
.periodekeuze a.on{background:var(--green-soft);color:var(--green)}
.periodekeuze .cardlink{margin-left:6px}

/* "Bijna binnen" krijgt een eigen rand: het is geen behaalde badge, maar ook
   geen grijze die je nooit haalt. */
.badge.bijna{border:1px dashed var(--green);color:var(--green);opacity:1}
.badgealles{margin-top:10px}
.badgealles>summary{cursor:pointer;font-size:.8rem;font-weight:600;color:var(--muted);
  list-style:none;padding:6px 0}
.badgealles>summary::-webkit-details-marker{display:none}
.badgealles>summary:hover{color:var(--green)}
.badgealles[open]>summary{color:var(--green)}

/* De uitklap is per familie gegroepeerd: zestig tegels in één wolk is geen
   lijst maar een muur. De kop is klein en de teller ernaast staat rechts, zodat
   je per ladder in één oogopslag ziet hoeveel er nog open staat.
   Buiten elke media query — een regel die verderop staat wint van een regel in
   een query, want media queries verhogen de specificiteit niet (§4.22). */
.badgefam{margin-top:12px}
.badgefam:first-of-type{margin-top:4px}
.badgefam>h4{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:.74rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px}
.badgefam>h4>span{font-size:.72rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--muted);opacity:.75}

.feeddag{font-size:.74rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
  color:var(--muted);margin:14px 0 4px}
.feeddag:first-of-type{margin-top:4px}

/* ---------- Historie als tijdlijn ---------- */
.periodeform{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-top:12px}
.periodeform label{display:block;font-size:.78rem;color:var(--muted);font-weight:600;margin-bottom:2px}
.periodeform input[type=date]{width:auto;margin:0}
.maandkop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.maandkop b{font-size:1rem}
.maandkop span{font-size:.8rem;color:var(--muted);text-align:right}
.histregel{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.histregel:last-of-type{border-bottom:none}
.histregel .what{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.histregel .what b{font-size:.93rem;font-weight:700}
.histregel .what span{font-size:.8rem;color:var(--muted)}
.histregel .when{font-size:.8rem;color:var(--muted);white-space:nowrap}
.regelnotitie{font-style:italic}
.verschil{font-size:.8rem;font-weight:600;margin-left:5px}
.verschil.omlaag{color:var(--green)}
.verschil.omhoog{color:#b45309}
.verschil.gelijk{color:var(--muted)}
.fic.c-weging{background:#eef2f7;color:#3b5f8a}

/* Maandrij in de kwartaal- en jaarweergave: klikbaar naar die maand. */
.maandrij{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 8px;border-radius:10px;text-decoration:none;color:var(--ink)}
.maandrij:hover{background:var(--green-soft)}
.maandrij b{font-size:.93rem}
.maandrij span{font-size:.82rem;color:var(--muted);text-align:right}
.maandrij span.leeg{color:#c3ccc5;font-style:italic}

/* Verwijderen is onomkeerbaar, maar het hoeft niet het luidste op de pagina te
   zijn. Grijs tot je erop staat; de bevestigingsvraag doet het echte werk. */
.wisknop{background:none;border:0;padding:6px;border-radius:8px;cursor:pointer;
  color:#b9c2bb;line-height:0;transition:color .15s,background .15s}
.wisknop svg{width:16px;height:16px}
.wisknop:hover,.wisknop:focus-visible{color:var(--danger);background:#fdf0ef}

.maandnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.maandnav a{color:var(--green);text-decoration:none;font-weight:600;font-size:.88rem;
  padding:6px 12px;border-radius:999px}
.maandnav a:hover{background:var(--green-soft)}
.maandnav .uit{color:#c3ccc5;font-size:.88rem;padding:6px 12px}
.maandnav .tel{font-size:.82rem;color:var(--muted)}

/* ---------- Statistieken (beheer) ---------- */
.statbars{display:flex;align-items:flex-end;gap:2px;height:88px;margin-top:12px;
  padding:8px;background:#f5f8f6;border-radius:10px}
.statbar{flex:1;min-width:2px;height:100%;display:flex;align-items:flex-end}
.statbar span{display:block;width:100%;background:var(--green);border-radius:2px;opacity:.85}
.statbar:hover span{opacity:1}
/* Welke dag elke balk is. Zelfde verdeling als de balken, dus elk label staat
   onder de zijne; boven de veertien dagen alleen de uiteinden, want negentig
   labels naast elkaar zijn onleesbaar. */
.statdagen{display:flex;gap:2px;margin-top:5px;padding:0 8px;
  font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}
.statdagen span{flex:1;min-width:0;text-align:center;overflow:hidden;white-space:nowrap}
.statdagen b{display:block;font-weight:700;text-transform:capitalize}
.statdagen.uiteinden span:first-child{text-align:left}
.statdagen.uiteinden span:last-child{text-align:right}
a.mp-chip{text-decoration:none}
a.mp-chip.on{background:var(--green);border-color:var(--green);color:#fff}

.mailalarm{border-left:4px solid #c2410c;background:#fef6f1}
.mailalarm h2{color:#9a3412}

/* Klein label in een tabelrij. Niet .badge hergebruiken: dat is de
   gamification-tegel (flex-kolom met padding) en die wordt in een cel een
   blok over de hele breedte in plaats van een pill. */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.75rem;font-weight:600;
  background:#e6f4ec;color:#1f7a5a;border:1px solid #bfe0ce}

/* Maatwerkplan: een compleet HTML-document met eigen opmaak. In een iframe,
   zodat zijn stylesheet de app niet raakt. Geen vaste hoogte — JS laat hem
   meegroeien met de inhoud, zodat er één scrollbalk is in plaats van twee.
   De min-height is de terugval als dat script niet draait. */
/* Versielijst: rijen met twee blokken in plaats van een tabel, zodat de datum
   op een telefoon niet over vier regels breekt. */
.versielijst{list-style:none;margin:0;padding:0}
.versielijst li{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.versielijst li:last-child{border-bottom:0}
.versielijst li > div:last-child{flex:none;text-align:right}
.versielijst .hint{display:block;margin-top:2px}

/* Acties boven het plan, want het plan zelf kan tienduizenden pixels lang zijn. */
.planacties{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 6px}
.planacties form{margin:0}
.planacties-uitleg{margin:0 0 16px}

/* Het maatwerkplan brengt zijn eigen opmaak mee, gescopet onder .planinhoud.
   Let op: .plandoc is de wrapper van het GEGENEREERDE plan en hoort geen
   eigen regels te hebben — die stonden hier even, en gaven elk gegenereerd
   plan ongevraagd een min-height en overflow:hidden. */
.planinhoud{margin-top:4px}
/* Een plan mag nooit uit zijn eigen kader breken. De oude terug-knop stond met
   position:fixed in een style-attribuut en zweefde over de navigatie; CSS
   scopen helpt daar niet tegen, dit wel. */
.planinhoud [style*="fixed"]{position:static !important}


/* ---------- Mealprep: de uitkomst binnen bereik houden ---------- */
/* Wat je aanklikt heeft zijn gevolg onderaan de pagina: op mobiel vier schermen
   lager, op desktop onder de vouw. Deze balk houdt het aantal bakjes en de
   vastzetknop altijd bij de hand.
   
   Bewust géén `position:sticky` op de rechterkolom: die kolom is precies zo
   hoog als zijn grid-container, en dan heeft sticky geen ruimte om te plakken.
   Eén balk werkt op beide breedtes, ongeacht welke kolom het langst is. */
.mp-balk{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  position:fixed;left:0;right:0;bottom:0;z-index:39;
  padding:10px max(14px, calc((100vw - 1020px) / 2 + 18px));
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
.mp-balk[hidden]{display:none}
.mp-balk .btn{margin:0;width:auto;flex:0 0 auto;padding:10px 20px;font-size:.9rem}
.mp-balklink{flex:0 0 auto;font-size:.9rem;font-weight:700;color:var(--green);text-decoration:none;white-space:nowrap}
/* Waarom het aantal hoger is dan dagen × maaltijden: een eigen regel onder het
   getal en de knop. Naast die twee gezet past hij op mobiel niet — daar is nog
   geen honderd pixels vrij en werd de knop het beeld uit geduwd. */
.mp-balkvries{flex:0 0 100%;margin-top:-2px;text-align:center;
  font-size:.72rem;font-weight:600;color:var(--muted);white-space:normal}
.mp-balkvries[hidden]{display:none}
/* De inhoud van de balk volgt de kolombreedte van de pagina in plaats van
   het hele scherm; anders staat de knop op een breed scherm loshangend. */
.mp-balk{justify-content:center;gap:18px}
/* De ruimte onderaan volgt de échte balkhoogte (mealprep.js zet --mp-balk-h).
   Een vast getal klopte tot de balk een tweede regel kreeg voor de vriesuitleg;
   toen liep de inhoud er tien pixels achter. De terugval is de gemeten hoogte
   van een balk van één regel — die wordt bepaald door de knop, niet door de
   tekst — voor het geval het javascript niet draait. */
body.metbalk main.appwrap{padding-bottom:calc(var(--mp-balk-h, 63px) + 54px)}

@media(max-width:760px){
  /* Bóven de tabbalk (67px hoog) en eronder in de stapeling, zodat de navigatie
     bereikbaar blijft. De extra ruimte onderaan dekt beide balken samen. */
  .mp-balk{bottom:calc(67px + env(safe-area-inset-bottom));padding:10px 14px}
  body.metbalk main.appwrap{padding-bottom:calc(var(--mp-balk-h, 63px) + 67px + env(safe-area-inset-bottom) + 45px)}
}


/* Dagwaarden uit een gezondheidsplatform: stappen en rusthartslag, boven de
   regels van die dag. Gedempt en klein — het is context bij de dag en geen
   gebeurtenis, en het hoort de wegingen en trainingen niet te overstemmen. */
.dagmeting{
  margin:10px 0 2px;padding:0 2px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);text-transform:lowercase;
}

/* Wat je in deze periode deed, per soort. Staat onder de maandkop in de
   historie en gebruikt dezelfde --c-{soort}-kleuren als de tijdlijniconen,
   zodat "hardlopen" hier en drie regels lager hetzelfde blauw draagt. */
.soortbalk{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px}
.soortchip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border-radius:10px;font-size:12.5px;font-weight:600;line-height:1;
  background:#f2f4f6;color:#42505c}
.soortchip svg{width:14px;height:14px;flex:0 0 auto}
.soortchip.c-kracht{background:rgba(124,92,196,.10);color:#5b3fa0}
.soortchip.c-hardlopen{background:rgba(43,127,208,.10);color:#1f5f9e}
.soortchip.c-fietsen{background:rgba(0,150,136,.10);color:#00695f}
.soortchip.c-wandelen{background:rgba(76,140,74,.10);color:#3a6b39}
.soortchip.c-mobiliteit{background:rgba(214,137,16,.12);color:#8a5606}
.soortchip.xpchip{background:rgba(31,122,90,.10);color:#1f7a5a}

/* ---------- Samen-kaart ----------
   De samenstrip was 130 px op een pagina van 4030 en daarmee het kleinste
   element op een scherm dat over samen gaat. Dit is dezelfde groene kaart, maar
   in kolom in plaats van in één regel, met de weekring, het gedeelde level en
   de samen-badges erin. Staat ná .card.together zodat deze regels winnen —
   media queries en volgorde, niet specificiteit (§4.22). */
.card.together.samenkaart{flex-direction:column;align-items:stretch;gap:15px;padding:18px}
.samenkaart .sk-kop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative}
.samenkaart .sk-merk{width:30px;height:24px;color:#fff;opacity:.9;flex:0 0 auto}
.samenkaart .sk-titel{flex:1 1 auto;min-width:0}
.samenkaart .sk-titel b{display:block;font-size:1rem}
.samenkaart .sk-titel span{font-size:.84rem;opacity:.9}
.samenkaart .sk-vandaag{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.samenkaart .sk-vandaag .hint{color:rgba(255,255,255,.75);font-size:.8rem}

.samenkaart .sk-cijfers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:relative}
.samenkaart .sk-vak{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;min-width:0}
.samenkaart .sk-vak-badges{grid-column:1 / -1}
.samenkaart .sk-label{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.82}
.samenkaart .sk-waarde{font-size:1.3rem;font-weight:800;line-height:1}
.samenkaart .sk-waarde small{font-size:.72rem;font-weight:700;opacity:.78}
.samenkaart .sk-sub{font-size:.75rem;opacity:.86;line-height:1.3}
.samenkaart .sk-ring{align-self:flex-start}
.samenkaart .sk-ring .ringnum{color:#fff;font-size:.78rem}
.samenkaart .sk-bar{height:8px;width:100%;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden}
.samenkaart .sk-bar i{display:block;height:100%;border-radius:999px;background:#fff}

/* Badges op groen: de gewone tegel is lichtgroen op wit en verdwijnt hier. */
.samenkaart .sk-badges{width:100%}
.samenkaart .badge{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.92)}
.samenkaart .badge.on{background:rgba(255,255,255,.93);color:#1f7a5a;border-color:transparent;box-shadow:none}
.samenkaart .badge.bijna{border:1px dashed rgba(255,255,255,.75);color:#fff;background:rgba(255,255,255,.07)}
.samenkaart .badgealles{width:100%}
.samenkaart .badgealles>summary{color:rgba(255,255,255,.82)}
.samenkaart .badgealles>summary:hover,.samenkaart .badgealles[open]>summary{color:#fff}
.samenkaart .badgefam>h4{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.2)}

/* De badgetegels in de samen-kaart staan in één rij van vier; op een smal
   scherm twee. Zonder deze regel erft hij minmax(96px,1fr) en wordt het een
   raster van drie rijen dat de kaart twee keer zo hoog maakt. */
.samenkaart .sk-badges{grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.samenkaart .sk-badges{grid-template-columns:repeat(4,1fr)}}
.samenkaart .sk-vak-badges{gap:9px}

@media(max-width:339px){
  .samenkaart .sk-cijfers{grid-template-columns:1fr}
}

/* ---------- Bijna binnen ----------
   De badge die je bijna hebt is het enige dat gedrag stuurt en stond áchter
   vierenveertig behaalde tegels, in exact hetzelfde formaat. Nu vooraan, breed,
   met de balk erbij. */
.bsub{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 7px}
.badgecol>.bsub:first-of-type{margin-top:2px}
.badges.bijnarij{grid-template-columns:1fr;gap:8px}
@media(min-width:560px){.badges.bijnarij{grid-template-columns:1fr 1fr}}
.badge.groot{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;
  padding:12px 14px;gap:5px 10px;border-style:dashed;border-color:var(--green);
  color:var(--green);background:#f4faf6}
.badge.groot svg{width:22px;height:22px;flex:0 0 auto}
.badge.groot em{font-size:.82rem;font-weight:800;flex:1 1 auto;min-width:0}
.badgebar{flex:1 1 100%;height:6px;background:#e2ece6;border-radius:999px;overflow:hidden}
.badgebar i{display:block;height:100%;border-radius:999px;background:var(--green)}
.badgenog{flex:1 1 100%;font-size:.7rem;font-weight:600;color:var(--muted);line-height:1.25}

/* De levelchip draagt zijn bestemming als kleine staart. `white-space:nowrap`
   houdt "Level 6 nog 80 XP" op één regel; zonder dat brak hij midden in het
   getal en werd de chiprij twee regels hoog. */
.lvlchip{white-space:nowrap}
.lvlchip small{font-size:.72rem;font-weight:600;opacity:.75;margin-left:5px}

/* ---------- Loggen: samenvatting boven het trainingsformulier ----------
   De weegkaart had zijn `.wstatus` al; hiernaast stond alleen een formulier.
   Gemeten over de vijf app-pagina's: het dashboard had drie ringen, zeven
   balken en een grafiek, en de andere vier samen één balk. Het designsysteem
   bestond wel, maar was op één pagina aangesloten. */
.wstatus.tstatus{display:flex;flex-direction:column;gap:12px}
.tstatus .ts-top{display:flex;align-items:center;gap:12px}
.tstatus .ts-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.tstatus .ts-meta b{font-size:.95rem}
.tstatus .ts-meta span{font-size:.8rem;color:var(--muted)}
.tstatus .ts-partner{font-weight:600}
.ts-label{display:block;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tstatus .ts-herhaal{border-top:1px solid var(--line);padding-top:11px}
.herhaalchip{font-weight:700;border-color:currentColor;background:#fff}
.herhaalchip:hover{background:var(--bg)}

/* ---------- Loggen: wat er vanzelf binnenkwam ----------
   De vier dagwaarden uit de sync stonden op precies één plek — een grijze regel
   in de maandweergave van de historie. Daardoor was "er kwam niets binnen" niet
   te onderscheiden van "het staat nergens". */
.autokaart .autohint{margin:0 0 14px}
.autotegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.autotegel{background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;display:flex;flex-direction:column;gap:3px}
.strookkop{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.strookdatums{display:flex;justify-content:space-between;margin-top:5px;
  font-size:.7rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.strookkop .ts-label{margin-bottom:0}
.strook{display:flex;gap:4px;margin-top:8px}
/* De hokjes vullen samen de regel: veertien vaste breedtes lopen op een smal
   scherm over de rand, en een strook die afgeknipt wordt telt niet meer. */
.strookdag{flex:1 1 0;min-width:0;height:26px;border-radius:6px;
  background:#eef2ef;border:1px solid var(--line)}
.strookdag.raak{background:var(--green);border-color:var(--green)}

/* De sync-samenvatting in de historie, en de grafiek eronder. */
.metingbalk{margin-top:2px}
.soortchip.metingchip{background:#eef2fa;color:#3b5bcc;border-color:#d6def5;font-weight:700}
.soortchip.metingchip em{font-style:normal;font-weight:600;opacity:.8;margin-left:5px}
.histgrafiek{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* De dagwaardenregel draagt nu het sync-teken: je ziet dát het van een
   gekoppeld toestel komt en niet uit je eigen vingers. */
.dagmeting{display:flex;align-items:center;gap:6px}
.dagmeting svg{width:13px;height:13px;flex:0 0 auto;opacity:.75}

/* De maandrij in kwartaal en jaar kreeg een staafje voor het gewichtsverschil,
   geschaald op de zwaarste maand van die periode. Twaalf regels tekst zijn niet
   te vergelijken; twaalf staafjes wel. */
.maandrij{position:relative}
.maandbalk{position:absolute;left:16px;bottom:6px;height:3px;border-radius:999px;
  display:block;max-width:calc(100% - 32px)}
.maandbalk.omlaag{background:var(--green)}
.maandbalk.omhoog{background:#d8a25b}

/* "Dit komt al vanzelf binnen" onder het weegformulier. Alleen zichtbaar als
   er de afgelopen twee weken echt een weging via een platform binnenkwam. */
.autoregel{display:flex;align-items:flex-start;gap:7px;color:var(--green);font-weight:600}
.autoregel svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px}

/* ---------- Schema: weekkop en hoofdstukken ----------
   Het plan was 13.695 px in één ruk: vijfendertig telefoonschermen zonder
   uitklap, zonder kaart en zonder inhoudsopgave. De app splitste hetzelfde
   document al; het web deed het niet. */
.card.weekkop{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.weekkop .wk-tekst{display:flex;flex-direction:column;gap:1px;min-width:0}
.weekkop .wk-tekst b{font-size:1rem}
.weekkop .wk-tekst span{font-size:.82rem;color:var(--muted)}

.hoofdstukken .card{margin-top:0}
.hoofdstukken .card + .card{margin-top:10px}
.planhoofdstuk{padding:0}
.planhoofdstuk>summary{display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:15px 18px;list-style:none;font-size:.98rem}
.planhoofdstuk>summary::-webkit-details-marker{display:none}
.planhoofdstuk>summary b{flex:1;min-width:0;font-weight:700}
.planhoofdstuk>summary svg{width:18px;height:18px;flex:0 0 auto;color:var(--muted);
  transition:transform .18s ease}
.planhoofdstuk[open]>summary svg{transform:rotate(180deg)}
.planhoofdstuk[open]>summary{border-bottom:1px solid var(--line)}
.planhoofdstuk .ph-nr{width:24px;height:24px;border-radius:8px;flex:0 0 auto;
  background:var(--green-soft);color:var(--green);display:flex;align-items:center;
  justify-content:center;font-size:.74rem;font-weight:800}
.planhoofdstuk .ph-inhoud{padding:4px 18px 18px}
/* De aanhef en de voetnoot dragen hun eigen opmaak uit het plandocument;
   een kaart eromheen zou de wikkel-divs van dat document alle hoofdstukken
   in trekken (gemeten: de aanhef werd even hoog als de hele pagina). */
.planlos{margin:0 0 12px}
.planlos:last-child{margin:12px 0 0}

/* ---------- Mealprep: bediening en kiezen als stap ----------
   Gemeten op 390 px: 517 px instellingen bovenaan vóór je één gerecht zag, 250
   keuzekaarten, en de boodschappenlijst pas op 1957 px — ook op een week die al
   vastlag. Nu klapt de bediening in en zit kiezen achter één stap zodra er iets
   vaststaat; wat je komt halen staat bovenaan.

   Zelfde vorm als de planhoofdstukken, zodat een uitklap er in deze app overal
   hetzelfde uitziet. */
.mp-instel,.mp-kiesstap{padding:0}
.mp-instel>summary,.mp-kiesstap>summary{display:flex;align-items:center;gap:11px;
  cursor:pointer;padding:14px 16px;list-style:none}
.mp-instel>summary::-webkit-details-marker,
.mp-kiesstap>summary::-webkit-details-marker{display:none}
.mp-instel>summary svg,.mp-kiesstap>summary svg{width:18px;height:18px;flex:0 0 auto;
  color:var(--muted);transition:transform .18s ease;margin-left:auto}
.mp-instel[open]>summary svg,.mp-kiesstap[open]>summary svg{transform:rotate(180deg)}
.mp-instel[open]>summary,.mp-kiesstap[open]>summary{border-bottom:1px solid var(--line)}
.mp-instel .mi-tekst{display:flex;flex-direction:column;gap:1px;min-width:0}
.mp-instel .mi-tekst b{font-size:.95rem}
.mp-instel .mi-tekst span{font-size:.8rem;color:var(--muted)}
.mp-kiesstap>summary b{font-size:.95rem}
/* De inhoud van beide uitklappen krijgt de padding die de kaart kwijt is. */
.mp-instel>*:not(summary){margin-left:16px;margin-right:16px}
.mp-instel>*:last-child{margin-bottom:16px}
.mp-kiesinhoud{padding:14px 0 2px}
/* De kaarten binnen de kiesstap dragen hun eigen rand al; geen kaart in een kaart. */
.mp-kiesinhoud>.card{box-shadow:none}

/* **Korte kaarten krompen.** Het mealprep-raster is op mobiel een flexkolom
   (§4.46) met `align-items:start` uit `.grid2`, en in een kolom is dat de
   horizontale as: een kaart wordt dan zo breed als zijn inhoud. De lange
   kaarten vielen dat niet op, "Iets anders kiezen" wel — gemeten 197 px naast
   buren van 354. Zelfde familie als §4.42. */
.mp-grid .card{align-self:stretch}

/* **Eén kolom zodra de week vastligt.** Dan is de linkerkolom nog maar twee
   ingeklapte kaarten, terwijl rechts de boodschappenlijst en twee recepten
   staan: gemeten 3551 px dood grijs op 1200 px breed — tien keer erger dan de
   339 px waar dit scherm eerder op werd afgekeurd (§4.44). De staartkaarten
   houden hun `order`, zodat "Eerdere weken" achteraan blijft en niet vóór de
   boodschappenlijst komt te staan. */
@media (min-width:761px){
  .mp-grid.mp-vast{display:flex;flex-direction:column;gap:18px}
  .mp-grid.mp-vast > div{display:contents}
  .mp-grid.mp-vast > div > .card{margin-top:0}
  .mp-grid.mp-vast .mp-afwijzen,.mp-grid.mp-vast .mp-hist{order:2}
}

/* De drie vormchips: soep, meenemen, snel. Zelfde vorm als de dieetchips —
   Sarah vroeg ze er nadrukkelijk náást ("bij de filter, dus bij vlees, vis
   etc"), niet in een tweede rij. */
.mp-soort-soep:hover,.mp-soort-soep.on{border-color:var(--s-soep)}
.mp-soort-meenemen:hover,.mp-soort-meenemen.on{border-color:var(--s-meenemen)}
.mp-soort-snel:hover,.mp-soort-snel.on{border-color:var(--s-snel)}
.mp-soortknop.mp-soort-soep:not(.on):hover{color:var(--s-soep)}
.mp-soortknop.mp-soort-meenemen:not(.on):hover{color:var(--s-meenemen)}
.mp-soortknop.mp-soort-snel:not(.on):hover{color:var(--s-snel)}
.mp-soortknop.mp-soort-soep.on{background:var(--s-soep);color:#fff}
.mp-soortknop.mp-soort-meenemen.on{background:var(--s-meenemen);color:#fff}
.mp-soortknop.mp-soort-snel.on{background:var(--s-snel);color:#fff}

/* De eerste stap van de mealprep: welke maaltijden ga je preppen.
   Smal gehouden — dit is één vraag, en een kaart die de volle breedte pakt
   suggereert dat er meer te doen valt dan er te doen is. */
.mp-eerst{max-width:640px}
.mp-eerst h2{margin:0 0 6px}
.mp-eerst form{margin:0}
.mp-verder{width:auto;margin-top:16px;padding-left:34px;padding-right:34px}
.mp-stapfout{margin:10px 0 0;color:var(--danger);font-weight:600;font-size:14px}