/* Cyclus: opmaak. Kleuren alleen via de variabelen hieronder (licht en donker), lettergroottes altijd
   relatief (rem), zodat de app de tekstgrootte van de telefoon volgt. Contrast minstens 4,5:1.
   Geen inline opmaak in de HTML: de CSP staat alleen dit bestand toe. */

:root {
  --achtergrond: #f7f3f1;
  --vlak: #ffffff;
  --tekst: #2a2430;
  --tekst-zacht: #5e5463;
  --accent: #9b3a5c;          /* menstruatie */
  --accent-tekst: #ffffff;
  --accent-zacht: #f6dde6;    /* verwachte menstruatie */
  --vruchtbaar: #2c6f68;      /* vruchtbare periode */
  --vruchtbaar-zacht: #d7ece9;
  --rand: #d9cfd3;
  --fout: #a4262c;
  --ruimte: 1rem;
  --hoek: 0.9rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --achtergrond: #1c1820;
    --vlak: #28222d;
    --tekst: #f1eaf0;
    --tekst-zacht: #c3b8c3;
    --accent: #e7a1bb;
    --accent-tekst: #1c1820;
    --accent-zacht: #4a2a38;
    --vruchtbaar: #86d0c5;
    --vruchtbaar-zacht: #1f3d3a;
    --rand: #4a4150;
    --fout: #ff9a9f;
  }
}

* { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

a { color: var(--accent); }

.kop { padding: calc(var(--ruimte) + env(safe-area-inset-top)) var(--ruimte) 0.5rem; max-width: 40rem; margin: 0 auto; }
h1 { margin: 0; font-size: 1.5rem; color: var(--accent); font-weight: 650; }
h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }

main { padding: 0 var(--ruimte) var(--ruimte); max-width: 40rem; margin: 0 auto; }

.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  padding: var(--ruimte);
  margin-bottom: var(--ruimte);
}
.midden { text-align: center; }
.zacht { color: var(--tekst-zacht); font-size: 0.9rem; }
.waarschuwing { color: var(--tekst-zacht); font-size: 0.875rem; text-align: center; }

/* Knoppen: minstens 44 pixels hoog (makkelijk te raken) */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.5rem 1rem;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--vlak); color: var(--accent);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.knop.hoofd { background: var(--accent); color: var(--accent-tekst); width: 100%; font-size: 1.1rem; }
.knop.klein { min-width: 2.75rem; padding: 0.25rem; font-size: 1.4rem; line-height: 1; }
.knop.leeg { visibility: hidden; }
.knop:disabled { opacity: 0.6; }
.knop:focus-visible, .dag:focus-visible, .chip:focus-within, #tabbalk a:focus-visible { outline: 3px solid var(--vruchtbaar); outline-offset: 2px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--ruimte); }
.knoppen .knop { flex: 1 1 auto; }

/* Vandaag */
.ring-houder { position: relative; width: min(14rem, 70vw); margin: 0 auto 0.5rem; }
.ring { display: block; width: 100%; }
.ring circle { fill: none; stroke-width: 9; }
.ring-achter { stroke: var(--accent-zacht); }
.ring-voor { stroke: var(--accent); stroke-linecap: round; }
.ring-tekst { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.groot { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.fase { font-weight: 600; color: var(--accent); margin: 0.25rem 0; }
.lijst { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0 0 0.5rem; }
.lijst dt { color: var(--tekst-zacht); }
.lijst dd { margin: 0; }

/* Kalender */
.maandkop { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.maandkop h2 { margin: 0; text-align: center; flex: 1; }
.weekdagen, .maand { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; text-align: center; }
.weekdagen { color: var(--tekst-zacht); font-size: 0.8rem; margin-bottom: 0.25rem; }
.dag {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; min-height: 2.5rem; border-radius: 50%;
  color: var(--tekst); text-decoration: none; border: 2px solid transparent;
}
.dag.mens { background: var(--accent); color: var(--accent-tekst); font-weight: 600; }
.dag.voorspeld { border: 2px dashed var(--accent); }
.dag.vruchtbaar { background: var(--vruchtbaar-zacht); }
.dag.ovulatie { border: 2px solid var(--vruchtbaar); font-weight: 700; }
.dag.vandaag { box-shadow: 0 0 0 2px var(--tekst); }
.dag.notitie::after { content: ""; position: absolute; bottom: 12%; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: currentColor; }
.legenda { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.legenda li { display: flex; align-items: center; gap: 0.6rem; }
.legenda .dag { width: 1.6rem; min-height: 1.6rem; flex: none; }
.legenda .dag.notitie { border: 1px solid var(--rand); }

/* Formulieren */
.formulier p { margin: 0 0 0.9rem; }
/* Geleerde instelling: het invoerveld en de waarschuwing pas na "Zelf instellen" */
.geleerd { margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
.geleerd legend { padding: 0; }
.geleerd p { margin: 0 0 0.5rem; }
.geleerd strong { display: block; font-size: 1.15rem; }
.geleerd .vast { accent-color: var(--accent); width: 1.4rem; height: 1.4rem; vertical-align: middle; margin: 0 0.4rem 0 0; }
.geleerd .vinkje { display: inline; font-weight: 400; }
.geleerd .zelf { margin-top: 0.6rem; }
.geleerd .vast:not(:checked) ~ .zelf { display: none; }
#push-stand { margin: 1rem 0 0.5rem; }
.let-op { border-left: 0.25rem solid var(--accent); padding-left: 0.6rem; }
label, legend { display: block; font-weight: 600; margin-bottom: 0.25rem; }
input:not([type=radio]):not([type=checkbox]), textarea {
  display: block; width: 100%; min-width: 0; min-height: 2.75rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--rand); border-radius: 0.6rem;
  background: var(--achtergrond); color: var(--tekst); font: inherit;
}
/* Safari op iOS geeft een datumveld een eigen minimale breedte (het valt dan buiten de kaart) en negeert
   width zolang het eigen uiterlijk aan staat */
input[type=date] { -webkit-appearance: none; appearance: none; }
input + .knop { margin-top: 0.75rem; }
.naast { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 0.8rem; }
.keuzes { border: 0; padding: 0; margin: 0 0 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.keuzes legend { width: 100%; }
.chip {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.3rem 0.85rem;
  border: 1px solid var(--rand); border-radius: 999px; font-weight: 500; margin: 0; cursor: pointer;
}
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-tekst); }

.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { text-align: left; vertical-align: top; padding: 0.4rem 0.4rem 0.4rem 0; border-top: 1px solid var(--rand); }
code { overflow-wrap: anywhere; }

/* Grafieken: één kleur per grafiek (de accentkleur); de rest via vorm en tekst. Labels volgen de tekstgrootte. */
figure.grafiek { margin: 0 0 var(--ruimte); }
.grafiek svg { display: block; width: 100%; height: auto; overflow: visible; margin: 0.25rem 0 0.5rem; }
.grafiek text { font-size: 0.75rem; fill: var(--tekst-zacht); }
.grafiek text.label { fill: var(--tekst); }
.grafiek .raster { stroke: var(--rand); stroke-width: 1; }
.grafiek .staaf { fill: var(--accent); }
.grafiek .staaf.telt-niet { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 2; }
.grafiek .lijn { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.grafiek .punt { fill: var(--accent); stroke: var(--vlak); stroke-width: 2; }
.grafiek .band { fill: var(--accent-zacht); }
.grafiek .hulplijn { stroke: var(--tekst-zacht); stroke-width: 1.5; stroke-dasharray: 4 3; }
.grafiek .maandkop p { margin: 0; flex: 1; }
.grafiek details { margin-top: 0.5rem; }
.grafiek summary { cursor: pointer; color: var(--accent); font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }

/* Melding onderin */
#melding {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(5rem + env(safe-area-inset-bottom));
  max-width: calc(100% - 2rem); padding: 0.6rem 1rem; border-radius: 0.8rem;
  background: var(--tekst); color: var(--achtergrond); z-index: 2;
}
#melding.fout { background: var(--fout); color: var(--achtergrond); }

/* Tabbalk onderin */
#tabbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; justify-content: space-around;
  background: var(--vlak); border-top: 1px solid var(--rand);
  padding: 0.3rem 0 calc(0.3rem + env(safe-area-inset-bottom));
}
#tabbalk[hidden] { display: none; }
#tabbalk a {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  flex: 1 1 0; min-width: 0; min-height: 2.75rem; padding: 0.2rem 0.25rem; border-radius: 0.6rem; overflow-wrap: anywhere; text-align: center;
  color: var(--tekst-zacht); text-decoration: none; font-size: 0.8rem;
}
#tabbalk a[aria-current="page"] { color: var(--accent); font-weight: 700; }
#tabbalk svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }