/* ============================================================
   The Cycle Reset - Tracker
   Stylesheet, gebaseerd op het design system van The Cycle Reset
   ============================================================ */

:root{
  /* Huisstijl */
  --bruin:#3b2e1d;
  --bruin2:#705747;
  --taupe:#c7b1a7;
  --beige:#efe6e5;
  --wit:#ffffff;
  --groen:#a8b37e;
  --roze:#e8b4b4;
  --blauw:#90c9d2;

  /* Lichte tinten van de accenten */
  --groen0:#e9e7dd;
  --blauw0:#e4eced;
  --roze0:#f4e3e2;
  --bruin0:#e8ded6;

  /* Lijnen en vlakken */
  --lijn:rgba(199,177,167,.38);
  --lijn2:rgba(199,177,167,.22);
  --vlak:rgba(199,177,167,.14);
  /* Taupe als tekstkleur haalde 2,0 op 1 contrast. Dit haalt 4,6. */
  --tekst-zwak:#877063;

  /* Gekleurde vlakken. Zacht genoeg om achter tekst te liggen,
     vol genoeg om de app kleur te geven. */
  --groen-vlak:#e9ede0;
  --roze-vlak:#fbeaea;
  --blauw-vlak:#e6f1f3;
  --bruin-vlak:#f1e8e2;
  --groen-rand:rgba(168,179,126,.55);
  --roze-rand:rgba(232,180,180,.6);
  --blauw-rand:rgba(144,201,210,.55);
  --bruin-rand:rgba(112,87,71,.35);
  --groen-diep:#7f8a56;
  --roze-diep:#b97c7c;
  --blauw-diep:#4f929c;

  /* Typografie */
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --antic:"Antic Didone",Georgia,serif;
  --script:"Dancing Script",cursive;

  --shadow:0 2px 12px rgba(59,46,29,.06);
  --shadow2:0 8px 34px rgba(59,46,29,.10);

  --radius:20px;

  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  margin:0;
  background:var(--beige);
  color:var(--bruin);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}

button,input,textarea,select{font-family:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:500}

/* ============================================================
   App-frame
   ============================================================ */
.app{
  max-width:520px;
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--beige);
  position:relative;
}
@media (min-width:560px){
  body{background:#e6dad8}
  .app{box-shadow:0 0 60px rgba(59,46,29,.10)}
}

/* De balk moet dekkend zijn tot onder zijn eigen tekst.

   Hij eindigde eerst in doorzichtig op 72 procent van zijn hoogte,
   en juist daar staat de datum. Alles wat eronderdoor scrolde liep
   dus dwars door die datum heen. Nu dekt de balk zijn eigen inhoud
   af en zit de vervaging in een strookje eronder. */
.topbar{
  position:sticky;top:0;z-index:40;
  padding:calc(var(--safe-top) + 14px) 20px 12px;
  background:linear-gradient(180deg,#f6ecec 0%,var(--beige) 100%);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:18px;
  background:linear-gradient(180deg,var(--beige),rgba(239,230,229,0));
  pointer-events:none;
}
/* Het woordmerk uit de huisstijl, horizontaal omdat de balk smal is.
   Het bronbestand heeft wit ingebakken in plaats van een doorzichtige
   achtergrond. Met vermenigvuldigen verdwijnt dat wit in de
   achtergrond en blijven alleen de letters staan, met hun zachte
   randjes. Geen wit blok dus. */
.topbar .merk{
  display:block;width:auto;height:34px;max-width:66vw;object-fit:contain;
  mix-blend-mode:multiply;
}
.topbar .datum{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--tekst-zwak);margin-top:5px}
.iconbtn{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  border:1px solid var(--lijn);background:var(--wit);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);transition:.2s;
}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:17px;height:17px;stroke:var(--bruin2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.scherm{flex:1;padding:0 20px calc(var(--safe-bottom) + 96px)}
.pane{display:none;animation:fade .3s ease}
.pane.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============================================================
   Navigatiebalk
   ============================================================ */
.nav{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  max-width:520px;margin:0 auto;
  display:flex;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--lijn);
  padding-bottom:var(--safe-bottom);
}
.nav button{
  flex:1;background:none;border:none;padding:9px 0 8px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:9.5px;letter-spacing:.4px;color:var(--tekst-zwak);transition:color .22s;
}
.nav button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav button.on{color:var(--bruin)}
.nav button.on svg{stroke-width:1.9;stroke:var(--groen-diep)}
.nav button i{
  display:block;width:20px;height:3px;border-radius:99px;background:transparent;
  margin:-2px 0 1px;transition:background .22s;
}
.nav button.on i{background:var(--groen)}

/* ============================================================
   Bouwstenen
   ============================================================ */
.c{background:var(--wit);border-radius:var(--radius);padding:17px;box-shadow:var(--shadow);margin-bottom:13px}
.c.pad{padding:20px}

/* Typografie: koppen mochten harder aankomen.

   Antic Didone stond hier eerst op 17 px. Dat is een didone met heel
   dunne haarlijnen, en op die maat verdwijnen die: een kop leek dan
   nauwelijks te verschillen van de lopende tekst eronder. Playfair
   heeft veel meer body en houdt zijn karakter ook klein.

   Verder is de sprong tussen kop en tekst groter gemaakt. Niet door
   alles op te blazen, maar door de kop echt kop te laten zijn. */
.groet{
  font-family:var(--serif);font-size:27px;font-weight:600;
  margin:8px 2px 18px;line-height:1.2;letter-spacing:-.2px;
}
.groet small{
  display:block;font-family:var(--sans);font-size:10.4px;font-weight:500;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--groen-diep);margin-top:6px;
}

.sect{
  font-family:var(--serif);font-size:20px;font-weight:600;margin:28px 2px 11px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  letter-spacing:-.1px;
}
.sect .actie{
  font-family:var(--sans);font-size:10.4px;font-weight:500;letter-spacing:.9px;
  text-transform:uppercase;color:var(--groen-diep);background:none;border:none;padding:0;
}
.sect .actie:active{opacity:.6}

.kicker{font-size:9.6px;letter-spacing:1.6px;text-transform:uppercase;color:var(--tekst-zwak)}
.kaartkop{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:10px;line-height:1.25}
.mini{font-size:11.8px;color:var(--bruin2);line-height:1.6}
.disc{font-size:10px;color:var(--tekst-zwak);line-height:1.55;margin:14px 2px 4px}
.note{background:var(--vlak);border-radius:14px;padding:11px 13px;font-size:11.5px;color:var(--bruin2);line-height:1.5;margin-top:11px}
.leeg{text-align:center;color:var(--bruin2);font-size:12.5px;padding:22px 10px;line-height:1.6}
.leeg .em{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--bruin);display:block;margin-bottom:6px}

/* Knoppen zijn schreefloos: Antic Didone is onder de 17 px slecht
   leesbaar. Hoogte 52 px, conform het design system. */
.btn{
  display:block;width:100%;min-height:52px;padding:14px;border-radius:99px;
  background:var(--bruin);color:#fff;border:none;
  font-size:14.5px;font-weight:500;letter-spacing:.3px;
  margin-top:8px;transition:.18s cubic-bezier(.4,0,.2,1);
}
.btn:active{transform:scale(.985);opacity:.9}
.btn.sec{background:transparent;border:1px solid var(--taupe);color:var(--bruin)}
.btn.klein{min-height:0;padding:12px;font-size:13px}

/* ============================================================
   Datumstrip
   ============================================================ */
.datumstrip{
  display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
  margin:0 -20px;padding:2px 20px 9px;
}
.datumstrip::-webkit-scrollbar{display:none}
.dag{
  flex:0 0 auto;width:44px;padding:8px 0 7px;border-radius:15px;
  background:var(--wit);border:1px solid transparent;
  text-align:center;box-shadow:var(--shadow);transition:.2s;
}
.dag .dl{font-size:9px;letter-spacing:.9px;text-transform:uppercase;color:var(--tekst-zwak)}
.dag .dn{font-family:var(--serif);font-size:17px;line-height:1.3;color:var(--bruin2)}
.dag .stip{width:4px;height:4px;border-radius:50%;background:var(--groen);margin:1px auto 0;opacity:0}
.dag.gevuld .stip{opacity:1}
.dag.on{background:var(--bruin);border-color:var(--bruin)}
.dag.on .dl{color:rgba(255,255,255,.55)}
.dag.on .dn{color:#fff}
.dag.on .stip{background:var(--roze)}

/* ============================================================
   Cycluskaart en fasebalk
   ============================================================ */
.cday{font-family:var(--serif);font-size:40px;line-height:1;font-weight:600;letter-spacing:-1px}
.cphase{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--groen-diep);margin-top:7px;
}
.est{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tekst-zwak);margin-top:5px}

.phasebar{margin:17px 0 4px}
.phasebar .track{display:flex;gap:3px;height:7px}
.phasebar .track i{flex:1;border-radius:99px;display:block}
.phasebar .marker{position:relative;height:0}
.phasebar .marker i{
  position:absolute;top:-11px;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2.5px solid var(--bruin2);transform:translateX(-50%);
  box-shadow:0 2px 6px rgba(59,46,29,.18);transition:left .4s cubic-bezier(.4,0,.2,1);
}
.phasebar .lbls{display:flex;margin-top:9px;font-size:8.6px;color:var(--tekst-zwak);letter-spacing:.5px;text-transform:uppercase}
.phasebar .lbls span{flex:1;text-align:center}
.phasebar .lbls span.on{color:var(--bruin)}
/* Te weinig gegevens: de balk wordt gestippeld en de fasenaam vervalt.
   De app doet dan geen uitspraak die ze niet kan onderbouwen. */
.phasebar.onzeker .track i{opacity:.32}
.phasebar.onzeker .marker i{border-style:dotted;border-color:var(--tekst-zwak)}
.tip{font-size:12.4px;color:var(--bruin2);line-height:1.55;margin-top:15px;padding-top:13px;border-top:1px solid var(--lijn2)}

/* ============================================================
   Schalen, 1 tot 5
   ============================================================ */
.schaal{margin:15px 0}
.schaal:first-child{margin-top:4px}
.schaal .top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:8px}
.schaal .top b{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--bruin2)}
.schaal .top b.nietingevuld{color:var(--tekst-zwak);font-size:11.5px;font-family:var(--sans);font-weight:400}
.stappen{display:flex;gap:6px}
.stappen button{
  flex:1;height:38px;border-radius:12px;border:1px solid var(--lijn);
  background:var(--wit);font-size:13px;color:var(--tekst-zwak);
  font-variant-numeric:tabular-nums;transition:.2s;
}
.stappen button.on{color:var(--bruin);border-color:transparent;font-weight:500}
.stappen button.gisteren{position:relative}
.stappen button.gisteren::after{
  content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:12px;height:1.5px;border-radius:99px;background:var(--taupe);
}
.schaal[data-kleur=roze] .stappen button.on{background:rgba(232,180,180,.42)}
.schaal[data-kleur=groen] .stappen button.on{background:rgba(168,179,126,.36)}
.anch{display:flex;justify-content:space-between;font-size:9.4px;color:var(--tekst-zwak);margin-top:7px;letter-spacing:.4px}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chips button{
  padding:8px 13px;border-radius:99px;border:1px solid var(--lijn);
  background:var(--wit);font-size:11.6px;color:var(--bruin2);transition:.2s;
}
.chips button.on{background:rgba(144,201,210,.24);border-color:var(--blauw);color:var(--bruin)}
.chips button.nieuw{border-style:dashed;color:var(--groen-diep);border-color:var(--groen-rand)}

/* Kopje boven een groep chips */
.chipgroep{
  font-size:9.2px;letter-spacing:1.4px;text-transform:uppercase;color:var(--tekst-zwak);
  margin:15px 0 2px;
}

/* Hoe erg was een symptoom */
.ernstrij{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 0;border-bottom:1px solid var(--lijn2);
}
.ernstrij:last-of-type{border-bottom:none}
.ernstrij .nm{flex:1;min-width:120px;font-size:12.6px}
.ernst{display:flex;gap:5px}
.ernst button{
  padding:6px 11px;border-radius:99px;border:1px solid var(--lijn);
  background:var(--wit);font-size:10.6px;color:var(--bruin2);transition:.2s;
}
.ernst button.on{background:rgba(112,87,71,.16);border-color:var(--bruin2);color:var(--bruin)}

/* Slaapuren */
.urenrij{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--vlak);border-radius:16px;padding:10px 14px;
}
.urenrij .uren{text-align:center}
.urenrij .getal{
  display:block;font-family:var(--serif);font-size:26px;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.urenrij .eenheid{
  display:block;font-size:9.4px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--tekst-zwak);margin-top:2px;
}

/* Een raster in plaats van een flexrij. Met flex bleef de laatste
   knop bij het afbreken alleen achter op een eigen regel en werd
   die over de volle breedte uitgerekt, terwijl de vijf erboven
   samengeperst werden tot de tekst niet meer paste.
   Het aantal kolommen volgt nu het aantal knoppen. */
.seg{display:grid;gap:5px;margin-top:9px;grid-template-columns:repeat(2,minmax(0,1fr))}
.seg:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
.seg:has(> :nth-child(4)):not(:has(> :nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))}
.seg button{
  padding:10px 6px;border-radius:99px;border:1px solid var(--lijn);
  background:var(--wit);font-size:11.6px;color:var(--bruin2);transition:.2s;
  min-width:0;overflow-wrap:break-word;
}
.seg button.on{background:rgba(232,180,180,.30);border-color:var(--roze);color:var(--bruin)}
/* Geen menstruatie is geen gebeurtenis, dus ook geen accentkleur */
.seg button.on[data-bloeding=geen]{background:var(--vlak);border-color:var(--tekst-zwak)}

/* Zestien pixels is hier geen smaak maar een regel.

   Safari op de iPhone zoomt automatisch in zodra je in een veld tikt
   dat kleiner is dan 16 px, en zoomt daarna niet meer terug. Je zit
   dan ingezoomd in het volgende veld zonder te kunnen lezen wat er
   gevraagd wordt. Vanaf 16 px gebeurt dat niet. */
.inp{
  width:100%;padding:12px 13px;border-radius:13px;border:1px solid var(--lijn);
  background:var(--wit);font-size:16px;color:var(--bruin);margin-top:8px;
  resize:none;line-height:1.5;
}
/* Tekstvakken mogen wel kleiner: daar tikt niemand een getal in en
   het zoomprobleem speelt alleen bij korte velden waar je uit klikt.
   Toch ook hier 16 px, want anders zoomt hij net zo goed. */
textarea.inp{font-size:16px;line-height:1.5}
.inp:focus{outline:none;border-color:var(--tekst-zwak);box-shadow:0 0 0 3px rgba(199,177,167,.18)}
.inp::placeholder{color:var(--tekst-zwak)}
.hint{font-size:10.5px;color:var(--tekst-zwak);margin-top:7px}

/* ============================================================
   Reset Garden
   ============================================================ */
.gardenrow{display:flex;justify-content:space-between;text-align:center;gap:4px}
.gardenrow .g{flex:1}
.gardenrow .g .p{font-family:var(--serif);font-size:14px;color:var(--bruin2);margin-top:3px;font-variant-numeric:tabular-nums}
.gardenrow .g .l{font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--tekst-zwak)}
.gardenbig{display:grid;grid-template-columns:1fr 1fr;gap:14px;justify-items:center;text-align:center}
.gardenbig .p{font-family:var(--serif);font-size:18px;margin-top:2px}
.gardenbig .l{font-size:9.4px;letter-spacing:.8px;text-transform:uppercase;color:var(--tekst-zwak)}
.histrij{display:grid;align-items:center;gap:4px;margin-bottom:5px}
.histrij .hl{font-size:11.5px;color:var(--bruin2);line-height:1.3}
.histrij .hl .richting{
  display:block;font-size:9.2px;letter-spacing:.3px;margin-top:1px;color:var(--tekst-zwak);
}
.histrij .hl .richting.omhoog{color:var(--groen-diep)}
.histrij .hl .richting.omlaag{color:var(--roze-diep)}
.histrij .histnu{
  font-family:var(--serif);font-size:13.5px;color:var(--bruin2);
  text-align:right;font-variant-numeric:tabular-nums;
}
.histkop{display:grid;gap:4px;margin-bottom:6px}
.histkop div{
  text-align:center;font-size:9.2px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--tekst-zwak);
}

/* ============================================================
   Gewoontes
   ============================================================ */
.hgroep{font-size:9.4px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tekst-zwak);margin:15px 0 7px}
.hgroep:first-child{margin-top:0}
.h{display:flex;align-items:center;gap:11px;padding:7px 0;user-select:none}
.h .box{
  width:23px;height:23px;flex:0 0 23px;border-radius:50%;
  border:1.5px solid var(--taupe);display:flex;align-items:center;justify-content:center;transition:.24s;
}
.h .box svg{width:11px;height:11px;stroke:#fff;stroke-width:2.6;fill:none;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .26s ease .04s}
.h .nm{font-size:13.4px;transition:.24s;flex:1;text-align:left}
.h .sk{font-size:10px;color:var(--tekst-zwak);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.h.done .box{border-color:transparent}
.h.done .box svg{stroke-dashoffset:0}
.h.done .nm{color:var(--bruin2)}
.h[data-cat=n].done .box{background:var(--groen)}
.h[data-cat=d].done .box{background:var(--blauw)}
.h[data-cat=b].done .box{background:var(--roze)}
.h[data-cat=r].done .box{background:var(--bruin2)}

.weekgrid{width:100%;border-collapse:collapse}
.weekgrid th{
  font-weight:400;font-size:8.6px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--tekst-zwak);padding-bottom:8px;text-align:center;
}
.weekgrid th.vandaag{color:var(--bruin)}
.weekgrid th:first-child{text-align:left}
.weekgrid td{padding:5px 0;text-align:center;vertical-align:middle}
/* De namenkolom stond op 118 px. Bijna elke afspraak van meer dan
   drie woorden brak daar over drie regels, en dan werd de hele rij
   twee keer zo hoog als de rij ernaast. De bolletjes zijn een paar
   pixels kleiner geworden, en dat scheelt genoeg breedte om de
   meeste namen op een of twee regels te houden. */
.weekgrid td.nm{
  text-align:left;font-size:12px;color:var(--bruin2);padding-right:10px;
  line-height:1.3;width:47%;
}
.weekgrid td.nm .sk{display:block;font-size:9.2px;color:var(--tekst-zwak);letter-spacing:.3px;margin-top:1px}
.vink{
  position:relative;
  width:23px;height:23px;border-radius:50%;border:1.5px solid var(--lijn);
  background:var(--wit);display:inline-flex;align-items:center;justify-content:center;transition:.24s;padding:0;
}
/* Het vinkje is 26 px, maar het aanraakgebied blijft 44 bij 44 px. */
.vink::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.vink svg{width:11px;height:11px;stroke:#fff;stroke-width:2.8;fill:none;opacity:0;transition:opacity .2s}
.vink.on svg{opacity:1}
.vink.on{border-color:transparent}
.vink[data-cat=n].on{background:var(--groen)}
.vink[data-cat=d].on{background:var(--blauw)}
.vink[data-cat=b].on{background:var(--roze)}
.vink[data-cat=r].on{background:var(--bruin2)}
.vink.toekomst{opacity:.3;pointer-events:none}

/* Een afspraak in de beheerlijst is helemaal aanklikbaar, zodat
   je hem meteen kunt aanpassen in plaats van alleen verwijderen. */
.hbeheer{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 0;border:none;border-bottom:1px solid var(--lijn2);
  background:none;text-align:left;
}
.hbeheer:last-of-type{border-bottom:none}
.hbeheer .cat{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.hbeheer .nm{flex:1;font-size:13.4px;line-height:1.35}
.hbeheer .nm small{
  display:block;font-size:10px;letter-spacing:.4px;color:var(--tekst-zwak);margin-top:2px;
}
.hbeheer .pas{
  flex:0 0 auto;font-size:11px;color:var(--groen-diep);
  border:1px solid var(--groen-rand);border-radius:99px;padding:5px 11px;
}
.hbeheer .weg{background:none;border:none;color:var(--tekst-zwak);font-size:11px;padding:4px 6px}

/* Aanpasstand */
.hbewerk{
  background:var(--vlak);border-radius:14px;padding:13px;margin:10px 0;
}
.hbewerk .bewerkknoppen{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.hbewerk .bewerkknoppen .btn{flex:1;min-width:92px;margin-top:0}
.hbewerk .bewerkknoppen .btn.weg{border-color:rgba(232,180,180,.9);color:var(--roze-diep)}

/* Voorstellen die je al gebruikt. Blijven aanklikbaar, want nog
   een keer tikken haalt hem weer weg. */
.chips button.gekozen{
  background:var(--groen-vlak);border-color:var(--groen-rand);
  color:var(--groen-diep);font-weight:500;
}

.weeknav{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:10px}
.weeknav .lbl{font-size:13.5px;font-weight:500;text-align:center;line-height:1.3}
.weeknav .lbl span{display:block;font-family:var(--sans);font-size:9.6px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tekst-zwak)}
.pijl{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid var(--lijn);background:var(--wit);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.pijl svg{width:14px;height:14px;stroke:var(--bruin2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pijl:disabled{opacity:.3;box-shadow:none}

/* ============================================================
   Kalender
   ============================================================ */
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center;font-size:11px}
.calgrid .dh{color:var(--tekst-zwak);font-size:8.6px;text-transform:uppercase;letter-spacing:.5px;padding-bottom:3px}
.calgrid .d{
  aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--bruin2);position:relative;font-variant-numeric:tabular-nums;
}
.calgrid .d.m{background:rgba(232,180,180,.62);color:var(--bruin)}
.calgrid .d.f{background:rgba(168,179,126,.24)}
.calgrid .d.o{background:rgba(144,201,210,.38)}
.calgrid .d.l{background:rgba(199,177,167,.26)}
.calgrid .d.verwacht{box-shadow:inset 0 0 0 1.5px rgba(232,180,180,.75)}
.calgrid .d.vandaag{outline:2px solid var(--bruin);outline-offset:1px}
.calgrid .d.buiten{opacity:.22}
.calgrid .d .gv{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--bruin2);opacity:.55}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px;font-size:9.6px;color:var(--bruin2)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px}

.trend{display:flex;justify-content:space-between;gap:10px;font-size:12.4px;padding:9px 0;border-bottom:1px solid var(--lijn2)}
.trend:last-child{border-bottom:none}
.trend .v{font-variant-numeric:tabular-nums;color:var(--bruin2);white-space:nowrap}

/* ============================================================
   Overzicht, patronenraster
   ============================================================ */
.patroon{overflow-x:auto;margin:0 -3px;padding:0 3px 4px}
.patroon table{border-collapse:collapse;width:100%}
.patroon th{
  font-weight:400;font-size:8.4px;letter-spacing:.6px;text-transform:uppercase;color:var(--tekst-zwak);
  padding-bottom:7px;text-align:center;
}
.patroon th:first-child{text-align:left;padding-right:9px}
.patroon td{padding:2px}
.patroon td.wk{
  font-size:9.4px;color:var(--tekst-zwak);letter-spacing:.3px;text-align:left;
  white-space:nowrap;padding-right:9px;
}
.cel{
  width:100%;aspect-ratio:1;min-height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--bruin);font-variant-numeric:tabular-nums;
  background:rgba(199,177,167,.15);
}
.cel.geenwaarde{color:transparent}
.cel.bloed{box-shadow:inset 0 0 0 1.5px var(--roze)}

/* Vijf keuzes met namen van heel verschillende lengte. Ze de volle
   breedte laten delen knijpt "Slaapkwaliteit" af, dus laten we elke
   knop zijn eigen tekst bepalen en netjes afbreken naar de regel
   eronder. */
.metriekkeuze{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap}
.metriekkeuze button{
  flex:0 1 auto;padding:9px 13px;border-radius:99px;border:1px solid var(--lijn);
  background:var(--wit);font-size:11.4px;color:var(--bruin2);transition:.2s;
  white-space:nowrap;
}
.metriekkeuze button.on{background:var(--bruin);border-color:var(--bruin);color:#fff}

/* ============================================================
   Cycli onder elkaar

   Een rij per cyclus, een vakje per cyclusdag. Cyclusdag 1 ligt
   altijd in dezelfde kolom, zodat patronen boven elkaar vallen.
   ============================================================ */
/* Het raster schuift zijwaarts. Zonder scrollbalk zag je dat niet,
   dus staan er nu vage randjes links en rechts die verdwijnen zodra
   je aan het eind bent. Zo weet je dat er meer staat. */
.rasterhoes{position:relative}
.rasterhoes::before,.rasterhoes::after{
  content:"";position:absolute;top:0;bottom:0;width:22px;pointer-events:none;z-index:2;
  transition:opacity .2s;
}
.rasterhoes::before{
  left:62px;background:linear-gradient(90deg,var(--wit),rgba(255,255,255,0));
  opacity:var(--links,0);
}
.rasterhoes::after{
  right:0;background:linear-gradient(270deg,var(--wit),rgba(255,255,255,0));
  opacity:var(--rechts,0);
}
.cyclusraster{display:flex;flex-direction:column;gap:3px;overflow-x:auto;scrollbar-width:none}
.cyclusraster::-webkit-scrollbar{display:none}
.crij{display:flex;align-items:center;gap:8px;min-width:max-content}
/* Het label blijft staan terwijl de cyclus eronder doorschuift,
   anders weet je bij een lange cyclus niet meer welke rij je leest. */
.crij .clabel{
  flex:0 0 62px;font-size:9.4px;letter-spacing:.2px;color:var(--tekst-zwak);
  text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  position:sticky;left:0;background:var(--wit);z-index:1;
}
.crij .cvakken{
  flex:1;display:grid;grid-template-columns:repeat(var(--kolommen),1fr);gap:2px;
}
.cvak{
  aspect-ratio:1;border-radius:2px;background:rgba(199,177,167,.18);min-height:8px;
}
.cvak.leegvak{background:rgba(199,177,167,.13)}
.cvak.bloedt{box-shadow:inset 0 0 0 1.5px var(--roze)}
.cvak.buitenCyclus{background:none}
.crij-kop .cnr{
  font-size:7.6px;color:var(--tekst-zwak);text-align:center;line-height:1;
  font-variant-numeric:tabular-nums;
}
.crij-kop .cvakken{align-items:end}

/* Twee dingen die niet door elkaar mogen: de kleurschaal van wat je
   meet, en de twee tekens die iets anders betekenen. */
.raster-legenda{margin-top:14px;padding-top:12px;border-top:1px solid var(--lijn2)}
.raster-legenda .rl-schaal{display:flex;flex-direction:column;gap:5px}
.raster-legenda .rl-kop{font-size:10.5px;color:var(--bruin);letter-spacing:.3px}
.raster-legenda .rl-kop small{color:var(--tekst-zwak);font-size:9.6px;margin-left:3px}
.raster-legenda .rl-balk{display:block;height:9px;border-radius:99px}
.raster-legenda .rl-uit{display:flex;justify-content:space-between;font-size:9.4px;color:var(--tekst-zwak)}
.raster-legenda .rl-tekens{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:11px;
  font-size:9.8px;color:var(--bruin2);
}
.raster-legenda .lv{
  display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:5px;vertical-align:-1px;background:rgba(199,177,167,.18);
}

/* ============================================================
   Patronen per cyclusdag
   ============================================================ */
.patroonrij{
  display:flex;align-items:center;gap:11px;
  padding:9px 0;border-bottom:1px solid var(--lijn2);
}
.patroonrij:last-of-type{border-bottom:none}
.patroonrij .pnaam{flex:1;min-width:0;font-size:13px;line-height:1.3}
.patroonrij .pwaar{
  display:block;font-size:10.6px;color:var(--tekst-zwak);margin-top:2px;
}
.patroonrij .pstaafjes{
  flex:0 0 auto;display:flex;align-items:flex-end;gap:2px;height:22px;
}
.patroonrij .pstaafjes i{
  display:block;width:7px;border-radius:2px 2px 1px 1px;background:var(--bruin2);opacity:.75;
}
.patroonrij .pkeer{
  flex:0 0 34px;text-align:right;font-family:var(--serif);font-size:15px;
  color:var(--bruin2);font-variant-numeric:tabular-nums;
}

.balkkop{display:grid;grid-template-columns:74px repeat(4,1fr);gap:5px;font-size:8.2px;letter-spacing:.4px;text-transform:uppercase;color:var(--tekst-zwak);text-align:center;margin-bottom:6px}
.balkrij{display:grid;grid-template-columns:74px repeat(4,1fr);gap:5px;align-items:end;margin-top:5px}
.balkrij .rl{font-size:10.6px;color:var(--bruin2);padding-bottom:3px}
.balkrij .bar{border-radius:5px 5px 2px 2px;min-height:5px}

.stat{display:flex;gap:9px}
.stat > div{flex:1;background:var(--vlak);border-radius:14px;padding:13px 8px;text-align:center}
.stat .n{font-family:var(--serif);font-size:21px;line-height:1.1;color:var(--bruin2);font-variant-numeric:tabular-nums}
.stat .l{font-size:8.6px;letter-spacing:.9px;text-transform:uppercase;color:var(--tekst-zwak);margin-top:5px;line-height:1.35}

/* ============================================================
   Paneel
   ============================================================ */
.overlay{
  position:fixed;inset:0;z-index:60;background:rgba(59,46,29,.34);
  backdrop-filter:blur(2px);display:none;align-items:flex-end;justify-content:center;
}
.overlay.on{display:flex;animation:fade .2s ease}
.paneel{
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:var(--beige);border-radius:28px 28px 0 0;
  padding:8px 20px calc(var(--safe-bottom) + 26px);
  animation:omhoog .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes omhoog{from{transform:translateY(30px)}to{transform:none}}
.paneel .greep{width:38px;height:4px;border-radius:99px;background:var(--taupe);margin:8px auto 16px;opacity:.5}
.paneel h2{font-family:var(--serif);font-size:22px;margin-bottom:4px}
.paneel .rij{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--lijn2);
}
.paneel .rij:last-of-type{border-bottom:none}
.paneel .rij .lbl{font-size:13.4px}
.paneel .rij .lbl small{display:block;font-size:10.6px;color:var(--tekst-zwak);margin-top:3px;line-height:1.45}

.schakel{
  width:46px;height:27px;flex:0 0 46px;border-radius:99px;border:none;
  background:var(--taupe);position:relative;transition:.25s;padding:0;
}
.schakel i{
  position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:.25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.schakel.on{background:var(--groen)}
.schakel.on i{left:22px}

.teller{display:flex;align-items:center;gap:9px}
.teller button{
  width:31px;height:31px;border-radius:50%;border:1px solid var(--lijn);background:var(--wit);
  font-size:17px;color:var(--bruin2);line-height:1;display:flex;align-items:center;justify-content:center;
}
.teller .v{font-family:var(--serif);font-size:19px;min-width:36px;text-align:center;font-variant-numeric:tabular-nums}

/* ============================================================
   Meldingen
   ============================================================ */
.melding{
  position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 76px);transform:translate(-50%,14px);
  z-index:70;background:var(--bruin);color:#fff;font-size:12.5px;
  padding:11px 18px;border-radius:99px;box-shadow:var(--shadow2);
  opacity:0;pointer-events:none;transition:.28s;max-width:86vw;text-align:center;
}
.melding.zien{opacity:1;transform:translate(-50%,0)}

/* Blijft staan zolang er niet bewaard kan worden. Een melding van
   twee seconden is te makkelijk te missen als je gegevens verdwijnen. */
.opslagbalk{
  margin:0 20px 14px;padding:13px 15px;border-radius:14px;
  background:#f8e7e2;border:1px solid #dda893;
  font-size:12.5px;line-height:1.5;color:#7d3f2c;
}
.opslagbalk b{display:block;font-weight:600;margin-bottom:3px}
.opslagbalk[hidden]{display:none}

.waarschuwing{
  background:rgba(232,180,180,.28);border:1px solid rgba(232,180,180,.75);
  border-radius:14px;padding:12px 14px;font-size:11.8px;color:var(--bruin);
  line-height:1.5;margin-bottom:14px;
}

/* ============================================================
   Kleur
   De accenten mogen gezien worden. Elk vlak krijgt een kleur die
   past bij waar het over gaat: groen voor voeding, roze voor je
   cyclus, blauw voor uitleg, bruin voor rust en overzicht.
   ============================================================ */

.c.tint-groen{background:var(--groen-vlak);box-shadow:none;border:1px solid var(--groen-rand)}
.c.tint-roze{background:var(--roze-vlak);box-shadow:none;border:1px solid var(--roze-rand)}
.c.tint-blauw{background:var(--blauw-vlak);box-shadow:none;border:1px solid var(--blauw-rand)}
.c.tint-bruin{background:var(--bruin);color:var(--beige);box-shadow:var(--shadow2)}
.c.tint-bruin .kaartkop,.c.tint-bruin .cday{color:#fff}
.c.tint-bruin .mini,.c.tint-bruin .hint{color:rgba(239,230,229,.82)}
.c.tint-bruin .note{background:rgba(255,255,255,.10);color:rgba(239,230,229,.9)}

/* Sectiekop met een gekleurd streepje ervoor */
.sect{position:relative;padding-left:14px}
.sect::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--groen);
}
.sect.roze::before{background:var(--roze)}
.sect.blauw::before{background:var(--blauw)}
.sect.bruin::before{background:var(--bruin2)}

/* Knoppen krijgen kleur */
.btn{background:var(--groen);color:#fff}
.btn.donker{background:var(--bruin)}
.btn.sec{background:var(--wit);border:1px solid var(--taupe);color:var(--bruin)}

/* Fase-etiket */
.fasepil{
  display:inline-block;font-size:9.6px;letter-spacing:1.2px;text-transform:uppercase;
  padding:4px 11px;border-radius:99px;color:#fff;white-space:nowrap;
}

/* ============================================================
   Plan: weekmenu, dagkaarten, boodschappen, prep
   ============================================================ */

.blokkop{
  background:linear-gradient(135deg,var(--bruin) 0%,#4d3d28 100%);
  color:var(--beige);border-radius:var(--radius);padding:20px;margin-bottom:14px;
  box-shadow:var(--shadow2);
}
.blokkop h2{font-family:var(--serif);font-size:24px;color:#fff}
.blokkop .meta{font-size:11.5px;color:rgba(239,230,229,.8);margin-top:5px;line-height:1.6}
.blokkop .knoppen{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.blokkop .knoppen button{
  flex:1;min-width:110px;padding:10px;border-radius:99px;font-size:12px;
  background:rgba(255,255,255,.12);border:1px solid rgba(239,230,229,.3);color:var(--beige);
}
.blokkop .knoppen button.vol{background:var(--groen);border-color:var(--groen);color:#fff}

.weekkop{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:26px 2px 10px;
}
.weekkop h2{font-family:var(--serif);font-size:23px}
.weekkop .meta{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--bruin2)}

.menurij{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid var(--lijn2);
}
.menurij:last-child{border-bottom:none}
.menurij .wat{flex:1;min-width:0}
.menurij .moment{font-size:9.2px;letter-spacing:1.3px;text-transform:uppercase;color:var(--tekst-zwak)}
.menurij .naam{font-size:13.4px;font-weight:500;margin-top:2px;line-height:1.35}
.menurij .detail{font-size:10.8px;color:var(--bruin2);margin-top:3px}
.menurij .wissel{
  flex:0 0 auto;align-self:center;padding:7px 12px;border-radius:99px;
  border:1px solid var(--groen-rand);background:var(--groen-vlak);
  font-size:11px;color:var(--groen-diep);
}

.dagkaart{
  background:var(--wit);border-radius:var(--radius);padding:16px;margin-bottom:12px;
  box-shadow:var(--shadow);border-top:4px solid var(--taupe);
}
.dagkaart.klaar{border-top-color:var(--groen)}
.dagkaart .kop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:10px}
.dagkaart .dnr{font-family:var(--serif);font-size:20px;line-height:1.1}
.dagkaart .ddat{font-size:11px;color:var(--bruin2);margin-top:2px}
.dagkaart .kcal{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--tekst-zwak);text-align:right;margin-top:5px}
.blokje{
  font-size:9.2px;letter-spacing:1.4px;text-transform:uppercase;color:var(--tekst-zwak);
  margin:13px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--lijn2);
}
ul.vinklijst{list-style:none;margin:0;padding:0}
ul.vinklijst li{display:flex;gap:10px;align-items:flex-start;padding:4px 0;font-size:13px}
ul.vinklijst input{
  margin-top:3px;accent-color:var(--groen);width:17px;height:17px;flex:none;cursor:pointer;
}
ul.vinklijst label{cursor:pointer;flex:1}
ul.vinklijst li.af label{opacity:.45;text-decoration:line-through}
ul.vinklijst .pg{color:var(--tekst-zwak);font-size:11px}
ul.vinklijst .mn{font-weight:500}

/* Knopje om van het plan af te wijken */
ul.vinklijst .anders{
  flex:0 0 auto;align-self:flex-start;margin-top:2px;
  padding:5px 10px;border-radius:99px;
  border:1px solid var(--lijn);background:var(--wit);
  font-size:10px;letter-spacing:.3px;color:var(--tekst-zwak);
}
ul.vinklijst li.eigen .anders,
ul.vinklijst li.overgeslagen .anders{
  border-color:var(--blauw-rand);background:var(--blauw-vlak);color:var(--blauw-diep);
}

/* Een maaltijd die je zelf hebt ingevuld */
ul.vinklijst li.eigen .mn{color:var(--blauw-diep)}
ul.vinklijst li.overgeslagen .mn{color:var(--tekst-zwak);font-weight:400;font-style:italic}
ul.vinklijst .ipv{color:var(--tekst-zwak);font-style:italic}

/* ============================================================
   Wat je vandaag binnen hebt
   ============================================================ */
.totaalblok{
  border-radius:16px;padding:14px;border:1px solid var(--lijn);background:var(--vlak);
}
.totaalblok.onder{background:var(--vlak);border-color:var(--lijn)}
.totaalblok.goed{background:var(--groen-vlak);border-color:var(--groen-rand)}
.totaalblok.boven{background:var(--roze-vlak);border-color:var(--roze-rand)}

.totaalblok .tkop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.totaalblok .tgetal{font-family:var(--serif);font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.totaalblok .tgetal small{font-family:var(--sans);font-size:11.5px;color:var(--bruin2);font-variant-numeric:normal}
.totaalblok .tstand{font-size:11px;letter-spacing:.4px;font-weight:500}
.totaalblok.onder .tstand{color:var(--bruin2)}
.totaalblok.goed .tstand{color:var(--groen-diep)}
.totaalblok.boven .tstand{color:var(--roze-diep)}

.totaalblok .tbalk{
  height:8px;border-radius:99px;background:rgba(255,255,255,.65);
  overflow:hidden;margin:10px 0 14px;
}
.totaalblok .tbalk i{display:block;height:100%;border-radius:99px;background:var(--groen);transition:width .3s}
.totaalblok.boven .tbalk i{background:var(--roze)}

.totaalblok .mrij{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.totaalblok .mrij:last-of-type{margin-bottom:0}
.totaalblok .ml{flex:0 0 82px;font-size:11px;color:var(--bruin2)}
.totaalblok .mbalk{
  flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.7);overflow:hidden;
}
.totaalblok .mbalk i{display:block;height:100%;background:var(--bruin2);opacity:.55;border-radius:99px}
.totaalblok .mw{
  flex:0 0 auto;font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;
}
.totaalblok .mw small{font-weight:400;color:var(--bruin2)}
.totaalblok .tvoet{
  margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.7);
  font-size:10.5px;color:var(--bruin2);line-height:1.5;
}

/* Knopje in een blokkop, bijvoorbeeld om een extra toe te voegen */
.mini-knop{
  border:1px solid var(--groen-rand);background:var(--groen-vlak);color:var(--groen-diep);
  border-radius:99px;padding:4px 11px;font-size:10px;letter-spacing:.3px;
  text-transform:none;margin-left:auto;
}
.blokje{display:flex;align-items:center;gap:8px}

/* Snelle keuze uit je snacks van de week */
.snackkeuze{
  display:block;width:100%;text-align:left;background:var(--wit);
  border:1px solid var(--lijn);border-radius:14px;padding:12px 14px;margin-bottom:8px;
}
.snackkeuze .nm{display:block;font-size:13.4px;font-weight:500}
.snackkeuze .det{display:block;font-size:11px;color:var(--bruin2);margin-top:3px}

/* Kleine velden voor kcal en macro's naast elkaar */
.macrovelden{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:8px}
.macrovelden .inp{margin-top:3px;padding:10px 3px;text-align:center;font-size:16px}
.macrovelden .hint{margin-top:0;text-align:center;display:block;font-size:9.6px}

.macrorij{
  display:flex;gap:9px;flex-wrap:wrap;font-size:10.5px;color:var(--bruin2);
  margin-top:9px;padding-top:9px;border-top:1px solid var(--lijn2);
}
.macrorij b{color:var(--bruin);font-variant-numeric:tabular-nums}

/* Bruin, niet blauw. De vier accentkleuren horen bij de vier fases,
   en een blauw vlak naast een fasepil las alsof het advies zelf de
   ovulatie aanwees. Bruin is de huiskleur en claimt geen fase. */
.trainingblok{
  background:var(--bruin-vlak);border-radius:12px;padding:10px 12px;font-size:12.5px;
  border:1px solid rgba(112,87,71,.22);line-height:1.5;color:var(--bruin);
}
.trainingblok b{
  display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;
  font-size:9.6px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--bruin);margin-bottom:4px;
}
.trainingblok .tfase{
  letter-spacing:.3px;text-transform:none;font-weight:400;font-size:10.6px;
  color:var(--bruin2);
}
/* Zonder bekende fase nog een tint lichter, zodat het verschil
   tussen "afgestemd op je fase" en "nog niet bekend" zichtbaar blijft */
.trainingblok.onbekend{background:var(--vlak);border-color:var(--lijn)}
.trainingblok.onbekend b{color:var(--tekst-zwak)}

/* Fases die deze week beslaan */
.fasestrook{display:flex;flex-wrap:wrap;gap:6px;margin:0 2px 12px}
.fasechip{
  display:inline-flex;align-items:baseline;gap:6px;
  font-size:10px;letter-spacing:.5px;color:#fff;
  padding:6px 12px;border-radius:99px;
}
.fasechip b{font-weight:600;opacity:.8;font-size:9.4px}
.fasechip.leeg{
  background:var(--vlak);color:var(--tekst-zwak);border:1px dashed var(--taupe);
}

/* Fase achter een moment in het weekmenu */
.minifase{
  display:inline-block;margin-left:7px;padding:2px 8px;border-radius:99px;
  font-size:8.6px;letter-spacing:.6px;color:#fff;text-transform:none;
  vertical-align:1px;
}

/* Fase boven het menu van vandaag */
.menufase{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-bottom:11px;margin-bottom:6px;border-bottom:1px solid var(--lijn2);
}
.fasepil.leeg{background:var(--vlak);color:var(--tekst-zwak);border:1px dashed var(--taupe)}
.gelukt{font-size:11.5px;color:var(--groen-diep);margin-top:8px}
.gelukt::before{content:"\2713  "}

details.lijst{
  background:var(--wit);border-radius:var(--radius);padding:15px 17px;margin-bottom:12px;
  box-shadow:var(--shadow);
}
details.lijst summary{
  cursor:pointer;font-family:var(--serif);font-weight:600;font-size:18px;list-style:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
details.lijst summary::-webkit-details-marker{display:none}
details.lijst summary::after{content:"+";color:var(--groen-diep);font-size:19px;line-height:1}
details.lijst[open] summary::after{content:"\2013"}
details.lijst summary .aantal{font-family:var(--sans);font-size:11px;color:var(--tekst-zwak);margin-left:auto;margin-right:8px}

.schap{margin-top:14px}
.schap h4{
  font-size:9.4px;letter-spacing:1.4px;text-transform:uppercase;color:var(--groen-diep);
  margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--groen-rand);
}
.schap ul{list-style:none;margin:0;padding:0}
.schap li{display:flex;gap:9px;align-items:flex-start;padding:3px 0;font-size:12.8px}
.schap input{accent-color:var(--groen);margin-top:3px;flex:none;width:17px;height:17px;cursor:pointer}
.schap li.af span{opacity:.42;text-decoration:line-through}

.prepblok{
  background:var(--bruin);color:var(--beige);border-radius:var(--radius);
  padding:18px;margin-bottom:12px;box-shadow:var(--shadow2);
}
.prepblok h3{font-family:var(--serif);font-size:20px;color:#fff}
.prepblok .intro{font-size:12px;opacity:.82;margin-top:3px}
.prepblok .wanneer{
  font-size:9.6px;letter-spacing:1.5px;text-transform:uppercase;
  opacity:.72;margin:14px 0 6px;
}
.prepblok ul{list-style:none;margin:0;padding:0}
.prepblok li{display:flex;gap:9px;align-items:flex-start;padding:4px 0;font-size:12.8px;line-height:1.5}
.prepblok input{margin-top:3px;accent-color:var(--groen);width:17px;height:17px;flex:none;cursor:pointer}
.prepblok li.af label{opacity:.45;text-decoration:line-through}

/* ============================================================
   Voortgang
   ============================================================ */
.meetrij{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--lijn2);font-size:12.6px}
.meetrij:last-child{border-bottom:none}
.meetrij .v{font-variant-numeric:tabular-nums;color:var(--bruin2)}
.meetrij .op{color:var(--groen-diep);font-weight:500}
.balkje{height:7px;background:rgba(199,177,167,.4);border-radius:99px;overflow:hidden;margin-top:9px}
.balkje i{display:block;height:100%;background:var(--groen);border-radius:99px;transition:width .4s}
.fotovak{
  border:1px dashed var(--taupe);border-radius:12px;padding:9px;text-align:center;
  font-size:10.5px;color:var(--bruin2);
}
.fotovak img{width:100%;border-radius:8px;display:block;margin-bottom:6px}
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:8px}

/* ============================================================
   Receptenlijst
   ============================================================ */
.receptrij{
  display:flex;gap:11px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--lijn2);
}
.receptrij:last-child{border-bottom:none}
.receptrij .n{flex:1;font-size:13.2px;font-weight:500;line-height:1.35}
.receptrij .s{font-size:10.8px;color:var(--bruin2);margin-top:3px;font-weight:400}
.receptrij .bz{
  flex:0 0 auto;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--tekst-zwak);
  text-align:right;white-space:nowrap;
}
.filters{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.filters select,.filters input{
  flex:1;min-width:100px;padding:10px 11px;border-radius:12px;border:1px solid var(--lijn);
  background:var(--wit);font-size:12.5px;color:var(--bruin);
}

/* ============================================================
   Signalen: valt er iets buiten het gebruikelijke bereik

   Zacht van toon en zacht van kleur. Geen rood, geen uitroeptekens.
   ============================================================ */
.signaalkaart{
  background:var(--bruin-vlak);border:1px solid var(--bruin-rand);
  border-radius:var(--radius);padding:17px;margin-bottom:12px;
}
.signaalkaart h4{font-family:var(--serif);font-weight:600;font-size:18px;margin-bottom:6px}
.signaalkaart p{font-size:12.6px;color:var(--bruin2);line-height:1.55;margin:0 0 8px}
.signaalkaart .basis{
  font-size:9.6px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tekst-zwak);
}

/* ============================================================
   Mijn overzicht, om te printen of als PDF te bewaren
   ============================================================ */
.printvel{display:none}

@media print{
  .app,.overlay,.melding,.opslagbalk,.nav{display:none !important}
  body{background:#fff}
  .printvel{
    display:block;font-family:var(--sans);color:#2c2317;font-size:11pt;line-height:1.5;
  }
  .printvel .vel{max-width:100%;padding:0}
  .printvel header{
    border-bottom:2px solid #3b2e1d;padding-bottom:10pt;margin-bottom:16pt;
    display:flex;align-items:center;gap:12pt;
  }
  .printvel .merk{width:64pt;height:auto;flex:0 0 auto;mix-blend-mode:multiply}
  .printvel header h1,.printvel header .periode{flex:1 1 auto}
  .printvel h1{font-family:var(--serif);font-size:22pt;font-weight:500;margin:0 0 2pt}
  .printvel header > div{flex:1}
  .printvel .periode{font-size:10pt;color:#705747;margin:0}
  .printvel section{margin-bottom:16pt;page-break-inside:avoid}
  .printvel h2{
    font-family:var(--antic);font-weight:400;font-size:14pt;margin:0 0 7pt;
    border-bottom:1px solid #c7b1a7;padding-bottom:3pt;
  }
  .printvel .cijfers{display:flex;gap:14pt;margin-bottom:10pt}
  .printvel .cijfers div{flex:1;text-align:center;border:1px solid #c7b1a7;padding:7pt 4pt}
  .printvel .cijfers b{display:block;font-family:var(--serif);font-size:17pt;font-weight:500}
  .printvel .cijfers span{font-size:8pt;color:#705747;text-transform:uppercase;letter-spacing:.6pt}
  .printvel table{width:100%;border-collapse:collapse;font-size:10pt;margin-bottom:5pt}
  .printvel th,.printvel td{
    text-align:left;padding:4pt 6pt;border-bottom:1px solid #e0d3cb;
  }
  .printvel th{
    font-family:var(--antic);font-weight:400;font-size:9pt;color:#705747;
    border-bottom:1px solid #c7b1a7;
  }
  .printvel .signaal{border-left:3px solid #c7b1a7;padding:2pt 0 2pt 9pt;margin-bottom:8pt}
  .printvel .signaal b{font-family:var(--antic);font-weight:400;font-size:12pt}
  .printvel .signaal p{margin:2pt 0;font-size:10pt}
  .printvel .klein{font-size:8.5pt;color:#705747;margin:4pt 0 0}
  .printvel footer{border-top:1px solid #c7b1a7;padding-top:8pt;margin-top:14pt}
  @page{margin:16mm}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ============================================================
   Aantekeningen

   Momentnotities lezen als een gesprek: tijd links, tekst
   rechts. De terugblik leest als antwoorden op vragen. Beide
   bewust smal gehouden, zodat een regel niet te lang wordt om
   nog prettig te lezen.
   ============================================================ */
.momentlijst{display:flex;flex-direction:column;gap:7px;margin-top:13px}
.moment{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--bruin-vlak);border:1px solid var(--bruin-rand);
  border-radius:14px;padding:9px 10px 9px 11px;
}
.moment .tijd{
  flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.4px;
  color:var(--bruin2);font-variant-numeric:tabular-nums;padding-top:2px;
}
.moment .tk{flex:1 1 auto;font-size:12.5px;line-height:1.55;color:var(--bruin);white-space:pre-wrap;word-break:break-word}
.moment .weg{
  flex:0 0 auto;width:24px;height:24px;border:none;background:transparent;
  color:var(--tekst-zwak);font-size:17px;line-height:1;border-radius:50%;
}
.moment .weg:active{background:rgba(199,177,167,.3)}
.moment.lezen{background:var(--vlak);border-color:transparent}

.reflectie{margin-top:13px}
.reflectie label{display:block;font-size:12.5px;color:var(--bruin);margin-bottom:6px}
.reflectie .inp{margin:0}

.terugblik{margin-top:11px}
.terugblik .vr{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--tekst-zwak);margin-bottom:3px}
.terugblik p{font-size:12.5px;line-height:1.6;color:var(--bruin);white-space:pre-wrap;word-break:break-word}

/* Losse labels zonder knopgedrag, voor terugkijken */
.chips.stil span{
  display:inline-block;font-size:11px;color:var(--bruin2);
  background:var(--vlak);border-radius:99px;padding:5px 11px;
}
.chips.stil.klein span{font-size:10px;padding:4px 9px}

.inp.zoek{margin:0}

/* Kalender: een streepje voor een dag met tekst */
.calgrid .d .pen{
  position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:9px;height:2px;border-radius:2px;background:var(--bruin2);opacity:.7;
}
.calgrid .d.klikbaar{border:none;font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.calgrid .d.klikbaar:active{transform:scale(.9)}

/* Notitieboek in Overzicht */
.weekblok{margin-top:14px}
.notitieweek{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--serif);font-weight:600;font-size:15px;color:var(--bruin);
  padding:0 4px 7px;border-bottom:1px solid var(--taupe);
}
.notitieweek span{font-family:var(--sans);font-size:10.5px;color:var(--tekst-zwak);white-space:nowrap}
.notitiedag{
  background:var(--wit);border-radius:18px;padding:13px 15px;margin-top:9px;
  box-shadow:0 1px 3px rgba(59,46,29,.05);
}
.ndkop{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ndkop .dt{font-size:11px;color:var(--tekst-zwak);text-transform:uppercase;letter-spacing:.5px}
.ndkop .cd{
  font-size:10px;padding:3px 9px;border-radius:99px;
  background:var(--vlak);color:var(--bruin2);font-variant-numeric:tabular-nums;
}
.ndkop .cd.m{background:rgba(232,180,180,.55);color:var(--bruin)}
.ndkop .cd.f{background:rgba(168,179,126,.3)}
.ndkop .cd.o{background:rgba(144,201,210,.4)}
.ndkop .cd.l{background:rgba(199,177,167,.34)}
.notitiedag .moment{margin:0}
.notitiedag .terugblik:first-of-type{margin-top:0}
.notitiedag .chips{margin-top:10px}

/* ============================================================
   Vruchtbare dagen
   ============================================================ */
.calgrid .d.vr-rand{box-shadow:inset 0 0 0 2.5px rgba(45,103,113,.55)}
/* Vetgedrukt maakte het getal net te breed voor zijn cirkel. De
   donkere vulling en het ringetje wijzen de dag al genoeg aan. */
.calgrid .d.vr-piek{font-weight:500}
.calgrid .d.vr-piek::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(45,103,113,.4);
}

.kansuitleg{margin-top:15px;padding-top:14px;border-top:1px solid var(--taupe)}
.kansuitleg .kt{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--tekst-zwak);margin-bottom:8px}
.kansschaal{display:flex;gap:5px;align-items:center}
.kansschaal span{flex:1 1 0;height:15px;border-radius:99px}
.kansschaal .ring{box-shadow:inset 0 0 0 2.5px rgba(45,103,113,.55)}
.kansrand{display:flex;justify-content:space-between;font-size:9.6px;color:var(--tekst-zwak);margin-top:5px}

/* De kans van vandaag, in de cycluskaart */
.kansrij{
  display:flex;align-items:flex-start;gap:11px;margin-top:14px;
  background:var(--blauw-vlak);border:1px solid var(--blauw-rand);
  border-radius:16px;padding:12px 14px;
}
.kansrij.buiten{background:var(--vlak);border-color:transparent}
.kansrij .bol{flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:1px}
.kansrij .bol.rand{background:transparent;box-shadow:inset 0 0 0 3px rgba(45,103,113,.5)}
.kansrij b{display:block;font-size:12.5px;font-weight:600;color:var(--bruin);line-height:1.4}
.kansrij small{display:block;font-size:11px;color:var(--bruin2);line-height:1.55;margin-top:3px}

/* Wat je vandaag kunt verwachten */
.verwacht-blok{margin-top:14px;padding-top:14px;border-top:1px solid var(--taupe);text-align:left}
.verwacht-blok .vkop{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--bruin);margin-bottom:6px}
.verwacht-blok p{font-size:12.5px;line-height:1.65;color:var(--bruin2)}
.verwacht-blok .vvoet{font-size:10.5px;line-height:1.5;color:var(--tekst-zwak);margin-top:10px}
.bijjou{margin-top:12px;background:var(--vlak);border-radius:14px;padding:11px 12px}
.bijjou .bj{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--tekst-zwak)}
.bijjou .chips{margin-top:7px}

/* De acht weken naast elkaar moeten op een telefoon passen zonder
   dat de hele pagina meeschuift: de bloemen krimpen mee met hun
   kolom in plaats van hun eigen maat af te dwingen. */
.histrij > div,.histkop > div{min-width:0}
.histrij svg{width:100%;height:auto;max-width:34px;vertical-align:middle}

/* Zacht bruin kaartje: informatie die niets met een fase te maken
   heeft. De vier accentkleuren blijven zo voorbehouden aan de fases. */
.c.tint-zand{background:var(--bruin-vlak);box-shadow:none;border:1px solid rgba(112,87,71,.2)}

/* ============================================================
   Zelf je week indelen
   ============================================================ */
/* Vaste kolommen: een per sport, plus rust. De namen staan een keer
   bovenaan in plaats van in elke knop, zodat de vakjes even breed
   blijven en er niets verschuift als je iets aantikt. */
.weekindeling{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.wikop,.wirij{display:grid;gap:5px;align-items:center}
.wikop span{
  font-size:9.2px;line-height:1.25;letter-spacing:.4px;text-align:center;
  color:var(--tekst-zwak);padding-bottom:5px;
  overflow-wrap:normal;
}
.wirij .wd{
  font-size:9.6px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--tekst-zwak);
}
.wivak{
  display:flex;align-items:center;justify-content:center;
  height:34px;border-radius:12px;border:1px solid var(--lijn);
  background:var(--wit);padding:0;transition:.16s;
}
.wivak i{
  display:block;width:9px;height:9px;border-radius:50%;
  background:var(--taupe);opacity:.5;transition:.16s;
}
.wivak.on{background:var(--bruin-vlak);border-color:rgba(112,87,71,.45)}
.wivak.on i{background:var(--bruin2);opacity:1;width:11px;height:11px}
.wivak:active{transform:scale(.94)}

/* Op je beginscherm zetten */
.installkaart .installknoppen{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.installkaart .btn{width:auto;flex:0 1 auto;margin-top:0;padding:10px 16px}
.stappenlijst{margin:0;padding-left:20px;font-size:12.5px;line-height:1.65;color:var(--bruin2)}
.stappenlijst li{margin-bottom:8px}
.stappenlijst li:last-child{margin-bottom:0}
.stappenlijst b{color:var(--bruin);font-weight:600}

/* ============================================================
   Bewaarde eigen gerechten
   ============================================================ */
.gerechten{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.gerecht{display:flex;align-items:stretch;gap:6px}
.gerecht .kies{
  flex:1;text-align:left;background:var(--vlak);border:1px solid transparent;
  border-radius:14px;padding:10px 13px;transition:.16s;
}
.gerecht .kies:active{transform:scale(.985);background:var(--bruin-vlak)}
.gerecht .gn{display:block;font-size:12.5px;color:var(--bruin);line-height:1.35}
.gerecht .gd{display:block;font-size:10.5px;color:var(--tekst-zwak);margin-top:2px}
.gerecht .weg{
  flex:0 0 34px;border:1px solid var(--lijn);background:transparent;
  border-radius:14px;color:var(--tekst-zwak);font-size:17px;line-height:1;
}
.gerecht .weg:active{background:rgba(199,177,167,.25)}

.bewaarrij{
  display:flex;align-items:flex-start;gap:10px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--lijn2);
}
.bewaarrij input{
  flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:var(--groen-diep);
}
.bewaarrij span{font-size:12.5px;color:var(--bruin);line-height:1.4}
.bewaarrij small{display:block;font-size:10.5px;color:var(--tekst-zwak);margin-top:2px;line-height:1.45}

/* Sluitknop die altijd in beeld blijft.
   Sommige panelen zijn lang. De knop Klaar staat onderaan, en om
   daarbij te komen moest je eerst langs alle voorstellen scrollen.
   Nu kun je altijd weg vanaf de plek waar je bent. */
.paneelsluit{
  position:sticky;top:0;float:right;z-index:3;
  width:36px;height:36px;margin:4px -4px 0 0;border-radius:50%;
  border:1px solid var(--lijn);background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 5px rgba(59,46,29,.10);
}
.paneelsluit svg{
  width:16px;height:16px;stroke:var(--bruin2);fill:none;
  stroke-width:1.9;stroke-linecap:round;
}
.paneelsluit:active{transform:scale(.93)}
.paneel h2{padding-right:44px}

/* ============================================================
   Meer kleur, minder spreekkamer

   De app was wit-op-beige met een enkel accentje. Correct, maar
   kil. Dit brengt de huisstijlkleuren naar voren zonder de vier
   fasekleuren hun betekenis af te nemen: die blijven voorbehouden
   aan fasepillen, kalender en de cyclusbalk.
   ============================================================ */

/* De sectiestreepjes worden een echt merkteken in plaats van een
   stipje dat je moet zoeken. */
.sect{padding-left:16px}
.sect::before{
  width:7px;height:20px;border-radius:99px;top:.16em;
  background:linear-gradient(180deg,var(--groen),var(--groen-diep));
}
.sect.roze::before{background:linear-gradient(180deg,var(--roze),var(--roze-diep))}
.sect.blauw::before{background:linear-gradient(180deg,var(--blauw),var(--blauw-diep))}
.sect.bruin::before{background:linear-gradient(180deg,var(--taupe),var(--bruin2))}

/* De cycluskaart is het eerste wat je ziet. Die mag geen wit vel zijn. */
#pane-vandaag > .c:first-of-type,
#pane-cyclus > .c:first-of-type{
  background:linear-gradient(155deg,#fdf6f4 0%,#f6ece7 52%,#efe3dc 100%);
  border:1px solid rgba(199,177,167,.4);
}

/* Kaarten krijgen iets meer diepte en een zachte rand, zodat ze op
   het beige niet als losse witte blokken zweven. */
.c{border:1px solid rgba(199,177,167,.28)}
.c.tint-groen,.c.tint-roze,.c.tint-blauw,.c.tint-zand,.c.tint-bruin{border-width:1px}

/* De grote getallen mogen kleur hebben in plaats van alleen grootte. */
.stat .n{color:var(--bruin)}
.dagkaart .dnr{color:var(--bruin)}
.dagkaart .kcal{color:var(--groen-diep);font-weight:600}

/* Micro-labels: klein, maar wel met kleur en ruimte. */
.blokje{color:var(--groen-diep);font-weight:600;border-bottom-color:var(--groen-rand)}


/* Knoppen: het groen was al de merkkleur, nu ook met wat verloop. */
.btn{background:linear-gradient(160deg,var(--bruin2),var(--bruin))}
.btn.sec{background:var(--wit);background-image:none}

/* De adviesvelden. Twee per rij, zodat een label als "Koolhydraten"
   er nog naast past en je met de mail ernaast kunt overtypen. */
.adviesvelden{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px;margin-top:8px}
.adviesvelden .inp{margin-top:4px;text-align:center;font-size:16px;padding:11px 6px}
.adviesvelden .hint{margin-top:0;display:block}

/* ============================================================
   Fasetips van de website

   Een gekleurd streepje links in de fasekleur, zodat je meteen
   ziet bij welke fase een tip hoort zonder dat het vlak zelf
   gekleurd hoeft te worden.
   ============================================================ */
.fasetip{
  border-left:3px solid var(--tint);background:var(--vlak);
  border-radius:0 14px 14px 0;padding:12px 14px;margin-top:10px;
}
.fasetip:first-of-type{margin-top:0}
.fasetip .ft-kop{
  font-size:10px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--bruin);font-weight:600;margin-bottom:5px;
}
.fasetip p{font-size:12.4px;line-height:1.6;color:var(--bruin2);margin:0}
.fasetip ul{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.fasetip li{
  font-size:11px;color:var(--bruin2);background:var(--wit);
  border-radius:99px;padding:5px 11px;
}

/* Zelf toegevoegde boodschappen, onderaan dezelfde lijst */
.schap.eigenschap{border-top:1px solid var(--lijn2);padding-top:12px;margin-top:16px}
.schap.eigenschap h4{color:var(--bruin2);border-bottom-color:var(--taupe)}
.schap.eigenschap li{align-items:center}
.schap.eigenschap li label{flex:1}
.schap.eigenschap .weg{
  flex:0 0 26px;width:26px;height:26px;border:none;background:transparent;
  color:var(--tekst-zwak);font-size:17px;line-height:1;border-radius:50%;padding:0;
}
.schap.eigenschap .weg:active{background:rgba(199,177,167,.3)}
.boodschaptoevoegen{display:flex;gap:7px;align-items:center;margin-top:10px}
.boodschaptoevoegen .inp{flex:1;margin-top:0;font-size:16px;padding:10px 12px}
.boodschaptoevoegen .btn{width:auto;flex:0 0 auto;margin-top:0;padding:11px 16px}

/* Ingredienten onder een zelf ingevulde maaltijd */
.vinklijst .ingr{
  display:inline-block;font-size:10.5px;color:var(--tekst-zwak);
  line-height:1.5;margin-top:2px;
}

/* Recepten aanklikbaar, en de ingrediëntenlijst in het paneel */
button.receptrij{width:100%;text-align:left;background:none;border:none;padding:11px 0}
.ingrlijst{list-style:none;margin:0;padding:0}
.ingrlijst li{
  font-size:12.8px;line-height:1.5;color:var(--bruin2);
  padding:7px 0;border-bottom:1px solid var(--lijn2);
}
.ingrlijst li:last-child{border-bottom:none}

/* De schatting van kcal en macro's bij zelf ingevulde maaltijden */
.schatting{
  margin-top:14px;padding:13px 14px;border-radius:16px;
  background:var(--groen-vlak);border:1px solid var(--groen-rand);
}
.schatting.leeg-schatting{background:var(--vlak);border-color:var(--lijn)}
.schatting .sk{
  font-size:10px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--groen-diep);font-weight:600;margin-bottom:8px;
}
.sgetallen{display:flex;flex-wrap:wrap;gap:5px 14px}
.sgetallen span{font-size:11px;color:var(--bruin2)}
.sgetallen b{
  font-family:var(--serif);font-size:19px;font-weight:600;color:var(--bruin);
  margin-right:3px;font-variant-numeric:tabular-nums;
}
.schatting .btn{width:auto;margin-top:11px;padding:10px 16px}

/* Boodschappen per maaltijd */
.lijstkeuze{margin-top:14px}
.gerechtlijst{margin-top:16px;padding-top:13px;border-top:1px solid var(--lijn2)}
.gerechtlijst:first-of-type{border-top:none}
.gl-kop{margin-bottom:7px}
.gl-naam{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--bruin);line-height:1.3}
.gl-wanneer{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--groen-diep);font-weight:600;margin-top:3px}
.gl-keer{font-size:11px;color:var(--tekst-zwak);margin-top:2px}
.gerechtlijst ul{list-style:none;margin:0;padding:0}
.gerechtlijst li{display:flex;gap:9px;align-items:flex-start;padding:3px 0;font-size:12.8px}
.gerechtlijst input{accent-color:var(--groen);margin-top:3px;flex:none;width:17px;height:17px;cursor:pointer}
.gerechtlijst li.af label{opacity:.42;text-decoration:line-through}