/* ============================================================
   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)}
}

.topbar{
  position:sticky;top:0;z-index:40;
  padding:calc(var(--safe-top) + 14px) 20px 12px;
  background:linear-gradient(180deg,#f6ecec 0%,var(--beige) 72%,rgba(239,230,229,0));
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
/* 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}

.groet{font-family:var(--serif);font-size:22px;margin:6px 2px 16px;line-height:1.25}
.groet small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.3px;color:var(--bruin2);margin-top:3px;font-weight:400}

.sect{
  font-family:var(--antic);font-size:17px;margin:24px 2px 10px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
}
.sect .actie{font-family:var(--sans);font-size:11px;color:var(--tekst-zwak);background:none;border:none;padding:0}
.sect .actie:active{color:var(--bruin2)}

.kicker{font-size:9.6px;letter-spacing:1.6px;text-transform:uppercase;color:var(--tekst-zwak)}
.kaartkop{font-family:var(--antic);font-size:17px;margin-bottom:9px}
.mini{font-size:11.5px;color:var(--bruin2);line-height:1.55}
.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(--antic);font-size:17px;color:var(--bruin);display:block;margin-bottom:5px}

/* 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:34px;line-height:1;font-weight:500}
.cphase{font-size:13.5px;color:var(--bruin2);margin-top:4px}
.est{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tekst-zwak);margin-top:4px}

.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;
}

.seg{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.seg button{
  flex:1;min-width:54px;padding:9px 4px;border-radius:99px;border:1px solid var(--lijn);
  background:var(--wit);font-size:11.4px;color:var(--bruin2);transition:.2s;
}
.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)}

.inp{
  width:100%;padding:12px 13px;border-radius:13px;border:1px solid var(--lijn);
  background:var(--wit);font-size:13.5px;color:var(--bruin);margin-top:8px;
  resize:none;line-height:1.55;
}
.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:11px;color:var(--bruin2)}
.histkop{display:grid;gap:4px;margin-top:2px}
.histkop div{text-align:center;font-size:9.4px;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}
.weekgrid td.nm{text-align:left;font-size:12.2px;color:var(--bruin2);padding-right:8px;line-height:1.35;max-width:118px}
.weekgrid td.nm .sk{display:block;font-size:9.4px;color:var(--tekst-zwak);letter-spacing:.3px}
.vink{
  position:relative;
  width:26px;height:26px;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}

.hbeheer{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--lijn2)}
.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:13px}
.hbeheer .weg{background:none;border:none;color:var(--tekst-zwak);font-size:11px;padding:4px 6px}

.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)}

.metriekkeuze{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap}
.metriekkeuze button{
  flex:1;min-width:58px;padding:9px 4px;border-radius:99px;border:1px solid var(--lijn);
  background:var(--wit);font-size:11.4px;color:var(--bruin2);transition:.2s;
}
.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.
   ============================================================ */
.cyclusraster{display:flex;flex-direction:column;gap:3px}
.crij{display:flex;align-items:center;gap:8px}
.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;
}
.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}

.raster-legenda{
  display:flex;flex-wrap:wrap;gap:11px;margin-top:12px;
  font-size:9.6px;color:var(--bruin2);
}
.raster-legenda .lv{
  display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:4px;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}

.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}

.trainingblok{
  background:var(--blauw-vlak);border-radius:12px;padding:10px 12px;font-size:12.5px;
  border:1px solid var(--blauw-rand);line-height:1.5;
}
.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(--blauw-diep);margin-bottom:4px;
}
.trainingblok .tfase{
  letter-spacing:.3px;text-transform:none;font-weight:400;font-size:10.6px;
  color:var(--bruin2);
}
/* Zonder bekende fase geen blauw advies-uiterlijk, maar neutraal */
.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(--antic);font-size:17px;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(--antic);font-weight:400;font-size:17px;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}
}