:root{
  /* Terug naar het oude look & feel (Isabels keuze, 4 september 2026), maar
     met de kleuren van Healing Grounds zelf in plaats van het zelfgekozen
     sagegroen: Isabel gaf vijf HG-tinten door en vroeg per rol de dichtstbij
     liggende te kiezen. Namen van de variabelen blijven zoals ze waren, en
     dus ook alle regels verderop -- alleen de waarden zijn vervangen. */
  /* --bg en --card gelijk: #EEE8D0 (de andere HG-lichttint) vond Isabel te
     gesatureerd als paginabrede kleur (gemeten: S 0,47 tegenover 0,38 voor
     F5F1E9). F5F1E9 was al --card en beviel als achtergrond van het
     instellingenvenster, dus die kleur ook voor de pagina. */
  --bg:#F5F1E9;    /* was #f6f4ee */
  --card:#F5F1E9;  /* was #fffdf9 */
  --ink:#27330E;   /* HG-donkergroen; Isabel wees dit zelf al aan als tekstkleur */
  /* --muted: HG's eigen lichte tint (#879964) haalt op onze achtergronden
     maar 2,52-2,75 op 1, ruim onder de norm van 4,5 (net als de oude
     --muted hierboven al met een ándere lichte tint overkwam, zie de
     geschiedenis van dit bestand). Zelfde hue/verzadiging, lightness omlaag
     tot ruim over de norm: #5E6B46 haalt 5,08 en 4,66. */
  --muted:#5E6B46;
  --line:#e6e1d6; --accent:#485614;
  /* --accent-d hergebruikt bewust dezelfde tint als --ink: van de vier
     HG-tinten die Isabel gaf is dat de enige die nog donkerder is dan
     --accent, en dat is precies de hover-richting die --accent-d altijd al
     had. Wit erop haalt 13,4 op 1. */
  --accent-d:#27330E;
  /* --accent-soft: Isabels eigen suggestie voor de achtergrond van een
     actief/geselecteerd onderdeel (chips, badges, geselecteerde regels).
     Steviger dan de vorige, bijna onzichtbare muntgroene tint, en dat is
     hier bewust: het is nu een echte HG-kleur op die plek in plaats van een
     zelfgekozen fletse tint. Tekst erop (--accent-d) haalt 8,72 op 1. */
  --accent-soft:#CED3BB;
  --winter:#4a6b8a; --lente:#6fae6f; --zomer:#e5b84b; --herfst:#cf8a4a;
  /* --danger haalde op de oude, bijna-witte kaart 4,32 op 1; op de nieuwe,
     iets minder witte achtergrond nog maar 3,96 -- onder de norm. Zelfde
     rood, iets donkerder: #A54E3A haalt 4,97 en 4,56. Blijft los van het
     HG-palet, met opzet: een destructieve actie hoort een eigen kleur te
     houden. */
  --danger:#A54E3A;
  /* Inkt voor tekst op de lichte seizoenskleuren. De gewone --ink haalt daar
     4,4 en 4,1 op 1, net onder de norm; deze haalt 5,0 en 4,7. */
  --ink-op-kleur:#28322b;
  /* Per seizoen de inkt die daar leesbaar op is. Winter is het donkere blauw
     en heeft juist wit nodig (5,58); de drie lichte kleuren hebben donker
     nodig, want wit haalt daar maar 1,9 tot 2,8 terwijl 4,5 de eis is.
     Eén token voor alle vier zou dus altijd ergens misgaan. Kleuren zelf
     bewust nog niet aangepast aan het merk: dit zijn categorische
     cyclusfasen, geen merkkleuren, en dat vraagt een apart akkoord. */
  --winter-ink:#fff;
  --lente-ink:var(--ink-op-kleur);
  --zomer-ink:var(--ink-op-kleur);
  --herfst-ink:var(--ink-op-kleur);
  /* Het oranje van Healing Grounds, voor de doneerknop en als signaalkleur.

     Let op bij hergebruik: #ED910A is een lichte kleur en haalt op onze
     lichte kaart maar 2,39 op 1. Als tekstkleur mag dat niet (norm 4,5) en
     als rand van een bediening ook niet (norm 3,0). Daarom drie tinten:
     de merkkleur voor het vlak, een donkerder oranje uit dezelfde familie
     voor de letters, en donkere inkt voor als de knop bij hover wél gevuld
     raakt. --hg-oranje-tekst haalde 4,68 op de oude kaart; op de nieuwe
     achtergrond nog maar 3,87 -- onder de norm. Zelfde oranje, iets
     donkerder: #995905 haalt 4,92 en 4,51. */
  --hg-oranje:#ED910A; --hg-oranje-tekst:#995905; --hg-oranje-ink:#28322b;
  --radius:20px; --shadow:0 1px 3px rgba(60,60,40,.07),0 6px 18px rgba(60,60,40,.05);
}
/* Outfit voor alle interface-tekst, zelf gehost (font-src 'self' in de CSP
   staat geen Google Fonts-link toe). Platypi is er ook al (public/fonts/)
   voor een los accentwoord in een koptekst op de marketingsite; deze dichte
   werk-app heeft daar geen goede plek voor, dus die blijft ongebruikt. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/outfit-v15-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/outfit-v15-latin-500.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/outfit-v15-latin-600.woff2') format('woff2')}
:root{ --font:'Outfit',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
*{box-sizing:border-box}
/* Wie met het toetsenbord werkt moet altijd kunnen zien waar hij is. Ring
   getest tegen tan en cream: 7,12 en 6,53 op 1, ruim boven de norm van 3. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* Verbergen moet altijd winnen. Zonder deze regel overrulet een eigen
   display-regel (zoals display:flex) het hidden-kenmerk, en blijft een
   verborgen onderdeel gewoon in beeld staan. */
[hidden]{display:none!important}
body{margin:0;font-family:var(--font);font-weight:400;
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
h1,h2,h3,h4,h5,h6{font-weight:500}
h1{font-size:18px;margin:0}
h3{font-size:15px;margin:0 0 10px;letter-spacing:.2px}
button{font-family:inherit;font-weight:600;cursor:pointer}
.muted{color:var(--muted);font-weight:400}
.small{font-size:12.5px}

header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
  background:rgba(245,241,233,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding:10px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
/* Het merkicoon is staand, dus we sturen op hoogte en laten de breedte volgen. */
.brand .logo{height:34px;width:auto;display:block;flex:none}
.sub{font-size:12px;color:var(--muted)}
.seasonBadge{display:flex;align-items:center;gap:7px;background:var(--accent-soft);
  border:1px solid var(--line);padding:5px 12px;border-radius:999px;font-weight:600;font-size:13px}
/* Alle tekst in de badge krijgt dezelfde kleur: donkergroen op de lichte
   achtergrond, wit zodra er een seizoenskleur onder ligt. Eerder had het
   dagnummer een eigen grijstint, en die viel weg tegen allebei. */
.seasonBadge,.seasonBadge .cd{color:var(--accent-d)}
.seasonBadge .cd{font-weight:500}
.seasonBadge.gekleurd,.seasonBadge.gekleurd .cd{color:var(--seizoen-ink,#fff)}
nav{margin-left:auto;display:flex;gap:6px;align-items:center}
/* De doneerknop is geen tabblad maar een link naar buiten, en hoort er ook
   niet uit te zien als een tabblad. Een gevuld blok was te schreeuwerig naast
   het rustige groen; nu draagt de rand de merkkleur en de letters doen de rest. */
.doneer{border:1px solid var(--hg-oranje);background:transparent;color:var(--hg-oranje-tekst);
  padding:6px 16px;border-radius:999px;font-weight:700;text-decoration:none;
  font-size:15px;line-height:1.5;white-space:nowrap;letter-spacing:.2px}
.doneer:hover{background:var(--hg-oranje);color:var(--hg-oranje-ink)}
.tab{border:1px solid var(--line);background:var(--card);padding:7px 16px;border-radius:999px;color:var(--ink);font-weight:500}
.tab:hover{background:var(--accent-soft);border-color:var(--accent)}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.saveState{font-size:12px;color:var(--muted);min-width:70px;text-align:right}

.tabpane{display:none;padding:20px;max-width:1180px;margin:0 auto}
.tabpane.active{display:block}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:16px}

/* ---------- Loggen ---------- */
.logGrid{display:grid;grid-template-columns:220px 1fr;gap:18px}
.timeline{position:sticky;top:76px;align-self:start}
.dateNav{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.dateNav input[type=date]{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:6px;font-family:inherit}
.dateNav button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 9px}
.dateNav button:hover{background:var(--accent-soft);border-color:var(--accent)}
.ghost{background:transparent;border:1px solid var(--line);border-radius:20px;padding:6px 10px;color:var(--ink)}
.ghost:hover{background:var(--accent-soft);border-color:var(--accent)}
.ghost.small{padding:4px 8px;font-size:12px;border-radius:10px}
.slots{display:flex;flex-direction:column;gap:2px;max-height:70vh;overflow:auto;padding-right:4px}
.slot{display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:8px;
  padding:5px 8px;font-size:13px;color:var(--muted);cursor:pointer}
.slot:hover{background:var(--accent-soft)}
.slot.has{color:var(--ink)}
.slot.sel{border-color:var(--accent);background:var(--accent-soft)}
.slot .t{width:42px;font-variant-numeric:tabular-nums;font-weight:600}
.slot .mini{display:flex;flex-wrap:wrap;gap:3px}
.slot .mdot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.slot .mdot.sym{background:var(--herfst)}

.rowTop{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rowTop label{font-weight:600;font-size:13px}
.rowTop input[type=time]{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-family:inherit}
.segmented{display:flex;gap:6px;margin-bottom:12px}
.seg{flex:1;border:1px solid var(--line);background:var(--card);padding:8px;border-radius:9px;color:var(--muted);font-weight:600}
/* .seg[data-kind], niet kaal .seg: die klasse wordt ook gebruikt voor de 28
   niet-klikbare dagvakjes van de cyclusstrip op het dashboard (zie de
   toelichting bij .cycleStrip .seg hieronder), en die moeten geen hover
   krijgen. */
.seg[data-kind]:hover{background:var(--accent-soft);border-color:var(--accent)}
.seg.active{background:var(--accent-soft);color:var(--accent-d);border-color:var(--accent)}
.kindPane{display:none}
.kindPane.active{display:block}

.typeahead{position:relative}
.typeahead input{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:15px}
.suggestions{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:5;overflow:hidden;display:none}
.suggestions.show{display:block}
.suggestions .s{padding:9px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.suggestions .s:hover,.suggestions .s.hi{background:var(--accent-soft)}
.suggestions .s .n{font-weight:500}
.suggestions .s .note{font-size:11.5px;color:var(--muted);max-width:55%;text-align:right}
.suggestions .s.new{color:var(--accent-d);font-style:italic}

.chipRow{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink)}
.chip:hover{background:var(--accent-soft);border-color:var(--accent)}
.chip .c{color:var(--muted);font-size:11px;margin-left:4px}
.chip.on{background:var(--accent-soft);color:var(--accent-d);border-color:var(--accent);font-weight:600}

.sevRow{display:flex;align-items:center;gap:8px;margin:10px 0}
.sevRow span{font-size:13px;color:var(--muted)}
.sev{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 10px;font-size:12.5px}
.sev:hover{background:var(--accent-soft);border-color:var(--accent)}
.sev.active{background:var(--herfst);color:#fff;border-color:var(--herfst)}

.add{width:100%;border:none;background:var(--accent);color:#fff;padding:11px;border-radius:20px;font-weight:600;font-size:15px}
.add:hover{background:var(--accent-d)}

.cycleCard .cycleBtns{display:flex;gap:8px;flex-wrap:wrap}
.cycleCard .cycleBtns button{flex:1;min-width:150px;border:1px solid var(--line);background:var(--card);padding:10px;border-radius:10px;font-weight:600}
.cycleCard .cycleBtns button:hover{background:var(--accent-soft)}
.seasonPick{margin-top:12px;font-size:13px;color:var(--muted)}
.seasonRow{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.seasonOpt{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 10px;font-size:13px}
.seasonOpt:hover{background:var(--accent-soft);border-color:var(--accent)}
.seasonOpt[data-season=winter].active{background:var(--winter);color:#fff;border-color:var(--winter)}
.seasonOpt[data-season=lente].active{background:var(--lente);color:#fff;border-color:var(--lente)}
.seasonOpt[data-season=zomer].active{background:var(--zomer);color:#fff;border-color:var(--zomer)}
.seasonOpt[data-season=herfst].active{background:var(--herfst);color:#fff;border-color:var(--herfst)}
.hint{font-size:12px;color:var(--muted);margin:10px 0 0}

.dayList{display:flex;flex-direction:column;gap:6px}
.dayItem{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px}
.dayItem .time{font-variant-numeric:tabular-nums;font-weight:600;width:46px;color:var(--muted)}
.dayItem .badge{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-d)}
.dayItem .badge.sym{background:#f7e9de;color:var(--herfst)}
.dayItem .name{flex:1}
.dayItem .note{font-size:11.5px;color:var(--danger);flex-basis:100%;margin-left:56px}
.dayItem .del{border:none;background:transparent;color:var(--muted);font-size:16px;padding:2px 6px}
.dayItem .del:hover{color:var(--danger)}
.dayItem .edit{border:none;background:transparent;color:var(--muted);font-size:14px;padding:2px 6px;cursor:pointer}
.dayItem .edit:hover{color:var(--accent)}
.dayItem.editing{padding:8px}
.diEdit{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%}
.diEdit input[type=time]{border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-family:inherit}
.diEdit .edName{flex:1;min-width:120px;border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-family:inherit;font-size:14px}
.diEdit .edNote{flex:1;min-width:120px;border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-family:inherit;font-size:13.5px}
.diEdit select{border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-family:inherit;font-size:13px;background:var(--card)}
.diEdit .diSave{border:none;background:var(--accent);color:#fff;border-radius:7px;padding:7px 14px;font-weight:600;font-size:13px}
.diEdit .diSave:hover{background:var(--accent-d)}
.diEdit .diCancel{padding:6px 10px}
.empty{color:var(--muted);font-size:13px;padding:8px 0}

/* ---------- Dashboard ---------- */
.dashGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dashGrid .span2{grid-column:1 / -1}
.cycleSummary{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:12px}
.cycleSummary .kpi{display:flex;flex-direction:column}
.cycleSummary .kpi b{font-size:22px}
.cycleSummary .kpi span{font-size:12px;color:var(--muted)}
.cycleStrip{display:flex;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.cycleStrip .seg{flex:1;display:flex;align-items:center;justify-content:center;font-size:10px;
  color:var(--ink-op-kleur);font-weight:700}

.trendRow{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.trendRow .lab{width:150px;font-size:13px;flex-shrink:0}
.trendRow .track{position:relative;flex:1;height:22px;background:var(--bg);border-radius:6px;border:1px solid var(--line)}
.trendRow .mk{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%}
.sev1{opacity:.45}.sev2{opacity:.7}.sev3{opacity:1}

.ftDay{margin-bottom:12px}
.ftDay .d{font-weight:600;font-size:13px;margin-bottom:4px;display:flex;gap:8px;align-items:center}
.ftDay .season{font-size:10px;padding:1px 7px;border-radius:999px;color:var(--seizoen-ink,#fff);font-weight:600}
.ftItems{display:flex;flex-wrap:wrap;gap:6px}
.ftItems .fi{font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.ftItems .fi.sym{background:#f7e9de}

.hyp{border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:9px}
.hyp .h{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.hyp .rank{background:var(--accent);color:#fff;border-radius:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.hyp .title{font-weight:600;font-size:14px}
.hyp .conf{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.hyp p{margin:4px 0;font-size:12.5px}
.hyp .lbl{color:var(--muted);font-weight:600}

.exp{border:1px solid var(--line);border-radius:10px;padding:11px;margin-bottom:9px}
.exp .top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.exp .name{font-weight:600;font-size:13.5px}
.exp .status{font-size:10.5px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-d);white-space:nowrap}
.exp p{margin:3px 0;font-size:12.5px}
.exp .res{color:var(--accent-d)}

.plainlist{margin:0;padding-left:18px}
.plainlist li{font-size:13px;margin-bottom:5px}
.redflags{border-color:#e8c9be}
.redflags h3{color:var(--danger)}

/* ---------- Ingrediënten ---------- */
.ingIntro{max-width:760px;margin:0 0 16px;font-size:13.5px}
.ingGrid{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start}
.ingNewProduct input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:14px;margin-bottom:10px}
.ingProducts{display:flex;flex-direction:column;gap:4px;max-height:70vh;overflow:auto}
.ingProduct{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);
  background:var(--card);border-radius:9px;padding:9px 11px;text-align:left;font-size:13.5px;color:var(--ink)}
.ingProduct:hover{background:var(--accent-soft)}
.ingProduct.sel{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.ingProduct .pc{font-size:11px;color:var(--muted);background:var(--bg);border-radius:999px;padding:1px 8px;min-width:24px;text-align:center}
.ingProduct .pc.has{background:var(--accent);color:#fff}
.ingMain{min-height:200px}
.ingHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ingHead h3{margin:0}
.ingName{font-size:15px;font-weight:600;color:var(--ink);font-family:inherit;background:transparent;
  border:1px solid transparent;border-radius:7px;padding:4px 8px;min-width:180px;max-width:420px;width:auto}
.ingName:hover{border-color:var(--line)}
.ingName:focus{outline:none;border-color:var(--accent);background:var(--card)}
.ingHead .delProduct{margin-left:auto;color:var(--muted)}
.ingHead .delProduct:hover{color:var(--danger);border-color:var(--danger)}
.ingChips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;min-height:20px}
.ingChip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-d);
  border:1px solid var(--accent);border-radius:999px;padding:4px 6px 4px 12px;font-size:13px}
.ingChip button{border:none;background:transparent;color:var(--accent-d);font-size:15px;line-height:1;cursor:pointer;padding:0 2px}
.ingChip button:hover{color:var(--danger)}
.ingAdd{margin-bottom:14px}
.ingCheckTitle{margin-bottom:8px}
.ingChecklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.ingCheck{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:13px;cursor:pointer}
.ingCheck:hover{background:var(--accent-soft)}
.ingCheck.on{background:var(--accent-soft);border-color:var(--accent)}
.ingLbl{display:block;margin-bottom:6px}
.ingRaw{width:100%;min-height:120px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font-family:inherit;font-size:14px;line-height:1.55;resize:vertical}
.ingRaw:focus{outline:none;border-color:var(--accent)}
.ingBtns{display:flex;align-items:center;gap:12px;margin:10px 0}
.add.small{width:auto;padding:9px 16px;font-size:14px;border-radius:10px}
.suggestions .s{align-items:center}
.sdel{border:none;background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0 4px;margin-left:6px;flex-shrink:0}
.sdel:hover{color:var(--danger)}

/* ---------- Activiteiten & check-in ---------- */
.inlineRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}
.inlineRow label{font-size:13px;font-weight:600}
.numS{width:72px;border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-family:inherit;font-size:14px}
.noteInput{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:14px;margin:10px 0}
.needfill{border-color:var(--herfst)!important;box-shadow:0 0 0 3px rgba(207,138,74,.25);animation:pulsefill 1.1s ease}
@keyframes pulsefill{0%{box-shadow:0 0 0 0 rgba(207,138,74,.55)}100%{box-shadow:0 0 0 7px rgba(207,138,74,0)}}
.segMini{display:flex;gap:4px;margin-left:auto}
.segi{border:1px solid var(--line);background:var(--card);border-radius:7px;padding:6px 10px;font-size:12.5px;color:var(--muted)}
.segi:hover{background:var(--accent-soft);border-color:var(--accent)}
.segi.active{background:var(--accent-soft);color:var(--accent-d);border-color:var(--accent)}
.bristolRow{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.bristol{display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid var(--line);background:var(--card);
  border-radius:8px;padding:6px 8px;min-width:62px;font-size:10.5px;color:var(--muted);line-height:1.15;text-align:center}
.bristol b{font-size:14px;color:var(--ink)}
.bristol:hover{background:var(--accent-soft)}
.bristol.active{background:var(--accent);border-color:var(--accent)}
.bristol.active b,.bristol.active span{color:#fff}
.mdot.act{background:var(--zomer)}
.dayItem .badge.act{background:#e6eef2;color:var(--winter)}
.fi.act{background:#eef3ee;border-style:dashed}

.checkinCard #checkin{display:flex;flex-direction:column;gap:10px}
.ciRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ciLbl{width:78px;font-size:13px;font-weight:600;flex-shrink:0}
.scoreRow{display:flex;gap:5px}
.score{width:32px;height:32px;border:1px solid var(--line);background:var(--card);border-radius:8px;font-size:13px;font-weight:600;color:var(--muted)}
.score:hover{background:var(--accent-soft);border-color:var(--accent)}
.score.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.toggle{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--muted)}
.toggle:hover{background:var(--accent-soft);border-color:var(--accent)}
.toggle.on{background:var(--accent-soft);color:var(--accent-d);border-color:var(--accent)}
.skinRow,.spotRow{display:flex;flex-wrap:wrap;gap:5px}
.skinOpt,.spotOpt{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 11px;font-size:12.5px;color:var(--ink)}
.skinOpt:hover,.spotOpt:hover{background:var(--accent-soft)}
/* Witte tekst haalt op deze lichte kleuren maar 1,9 tot 2,8 op 1. Donkere
   inkt haalt er 4,4 tot 6,3, dus die gebruiken we hier. Alleen op het diepe
   rood van "extreem" wint wit wel (4,9). */
.skinOpt.on{font-weight:600}
.skinOpt.sk-glow.on{background:var(--lente);color:var(--ink-op-kleur);border-color:var(--lente)}
.skinOpt.sk-normaal.on{background:#9bb0a0;color:var(--ink);border-color:#9bb0a0}
.skinOpt.sk-vettig.on{background:var(--zomer);color:var(--ink);border-color:var(--zomer)}
.skinOpt.sk-pukkels.on{background:var(--herfst);color:var(--ink-op-kleur);border-color:var(--herfst)}
.skinOpt.sk-extreem.on{background:var(--danger);color:#fff;border-color:var(--danger)}
.spotOpt.on{background:var(--herfst);color:#fff;border-color:var(--herfst)}
.spotAdd{border:1px dashed var(--line);border-radius:8px;padding:6px 10px;font-family:inherit;font-size:12.5px;width:130px}
.spotAdd:focus{outline:none;border-color:var(--accent);border-style:solid}

/* ---------- Cyclus ---------- */
.cyclusGrid{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start}
.cycSide{position:sticky;top:76px}
.cycSummaryBox{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.cycKpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column}
.cycKpi b{font-size:15px}
.cycKpi span{font-size:11.5px;color:var(--muted)}
.cycleBtns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.cycleBtns button{flex:1;min-width:150px;border:1px solid var(--line);background:var(--card);padding:10px;border-radius:10px;font-weight:600}
.cycleBtns button:hover{background:var(--accent-soft)}
.cycleBtns button.on{border-width:2px}
.cycleBtns #markMenstruation.on{border-color:var(--winter);color:var(--winter)}
.cycleBtns #markOvulation.on{border-color:var(--zomer);color:#a9791f}
.cycL{display:block;margin:12px 0 6px}
.mucusRow{display:flex;flex-wrap:wrap;gap:6px}
.mucusOpt{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 11px;font-size:12.5px;color:var(--ink)}
.mucusOpt:hover{background:var(--accent-soft)}
.mucusOpt.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- Experimenten ---------- */
.expNew input{width:100%;max-width:520px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:14px;margin-bottom:16px}
#expList{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.expCard{margin-bottom:0}
.expTop{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.expName{flex:1;font-size:15px;font-weight:600;color:var(--ink);font-family:inherit;background:transparent;
  border:1px solid transparent;border-radius:7px;padding:5px 8px}
.expName:hover{border-color:var(--line)}
.expName:focus{outline:none;border-color:var(--accent);background:var(--card)}
.expDel{color:var(--muted);flex-shrink:0}
.expDel:hover{color:var(--danger);border-color:var(--danger)}
.expStatusRow{display:flex;gap:6px;margin-bottom:12px}
.expStatus{flex:1;border:1px solid var(--line);background:var(--card);border-radius:8px;padding:7px 6px;font-size:12.5px;font-weight:600;color:var(--muted)}
/* Hover toont hier bewust de kleur die de knop krijgt als hij geselecteerd
   wordt (niet de gewone hoverkleur van de rest van de app), zodat je van
   tevoren ziet wat je kiest. */
.expStatus.st-voorstel:hover,.expStatus.st-voorstel.on{background:var(--accent-soft);color:var(--accent-d);border-color:var(--accent)}
/* Gestart gebruikte --lente (seizoenskleur), en dat viel niet meer lekker
   samen met de knoppenkleuren eromheen. Nu --accent: samen met voorstel
   (zacht) en beëindigd (--accent-d, het donkerste groen) ontstaat een
   duidelijke opbouw van licht naar donker binnen hetzelfde groen. */
.expStatus.st-gestart:hover,.expStatus.st-gestart.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
/* Beëindigd gebruikte --winter (blauw): een toevallig geleend seizoenskleurtje
   dat niks met het seizoen te maken had en tussen het groen/oranje uit de
   toon viel. Nu het donkerste groen: net zo duidelijk "klaar" zonder een
   vreemde kleur te introduceren. */
.expStatus.st-beeindigd:hover,.expStatus.st-beeindigd.on{background:var(--accent-d);color:#fff;border-color:var(--accent-d)}
.expL{display:block;margin:2px 0 5px}
.expCard textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13.5px;line-height:1.5;resize:vertical;margin-bottom:10px}
.expCard textarea:focus{outline:none;border-color:var(--accent)}
.logAdd{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;align-items:flex-start}
.logAdd .logDate{border:1px solid var(--line);border-radius:8px;padding:7px;font-family:inherit;font-size:12.5px}
.logAdd .logText{flex:1 1 100%;min-height:76px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:inherit;font-size:14px;line-height:1.5;resize:vertical}
.logAdd .logText:focus{outline:none;border-color:var(--accent)}
.logAdd .logAddBtn{width:auto;padding:8px 14px;font-size:13.5px}
.logList{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.logEntry{display:flex;align-items:baseline;gap:9px;padding:6px 9px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.logEntry .ld{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0;white-space:nowrap}
.logEntry .lt{flex:1;font-size:13px}
.logEntry .logDel{border:none;background:transparent;color:var(--muted);font-size:14px;cursor:pointer;padding:0 4px}
.logEntry .logDel:hover{color:var(--danger)}
.status.st-gestart{background:var(--accent);color:#fff;font-weight:700}
.status.st-beeindigd{background:var(--accent-d);color:#fff}

/* ---------- Header / instellingen ---------- */
.brand{cursor:pointer}
/* Was 15px in grijs en daardoor nauwelijks te vinden. Nu een echte knop met
   voldoende tikvlak (44px is de richtlijn voor vingers) en leesbare kleur. */
.gear{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border:1px solid var(--line);background:var(--card);
  border-radius:10px;font-size:21px;line-height:1;color:var(--accent-d);cursor:pointer}
.gear:hover{background:var(--accent-soft);border-color:var(--accent)}
.gear:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modal{position:fixed;inset:0;background:rgba(40,45,40,.35);display:flex;align-items:center;justify-content:center;z-index:50}
.modalCard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px;width:min(440px,92vw);max-height:88vh;overflow-y:auto}
.modalCard h3{margin-bottom:12px}
.modalBtns{display:flex;gap:8px;margin-top:14px}
.setHead{margin:18px 0 6px;padding-top:14px;border-top:1px solid var(--line);font-size:14px}

/* ---------- Keuzescherm voor het logboekbestand ---------- */
.setupScreen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;
  justify-content:center;z-index:80;padding:20px}
.setupCard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px;width:min(520px,94vw)}
.setupCard h2{font-size:19px;margin:0 0 8px}
/* Het logo staat gecentreerd boven de tekst, die zelf links uitgelijnd blijft.
   Op 44px links was het eerder een voetnoot bij het scherm waarop iemand voor
   het eerst kennismaakt met Healing Grounds. max-width houdt hem heel op een
   smal scherm; het logo is ruim drie keer zo breed als hoog. */
.welkomLogo{display:block;height:72px;width:auto;max-width:100%;margin:0 auto 22px}
.setupLead{margin:0 0 18px;color:var(--ink)}
.setupBtns{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 10px}
.setupBtns .add{width:auto;flex:1 1 auto;padding:10px 18px;font-size:14px}
.setupBtns .ghost{padding:10px 16px}
.setupCard{max-height:90vh;overflow-y:auto}

/* ---------- Kennismaking ---------- */
.stapje{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.3px;
  margin:0 0 10px;text-transform:uppercase}
.belofteLijst{list-style:none;padding:0;margin:0 0 4px;display:flex;flex-direction:column;gap:7px}
.belofteLijst li{display:flex;align-items:center;gap:9px;font-size:14.5px}
.belofteLijst li::before{content:'✓';color:var(--accent-d);font-weight:700}
.browserStatus{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:12px 0 0}
.browserStatus .dot{width:8px;height:8px;border-radius:50%;background:var(--lente);flex:none}
.contactFoot{font-size:12.5px;color:var(--muted);margin:16px 0 0;line-height:1.5;
  border-top:1px solid var(--line);padding-top:12px}
/* HG-linkpatroon: groen, onderstreept (standaard van de browser, dat is
   hier bewust het enige signaal naast kleur), geel bij hover. Nooit geel als
   basiskleur -- #ED910A haalt zelf geen 4,5 op 1 op deze achtergronden. */
.contactFoot a{color:var(--accent)}
.contactFoot a:hover{color:var(--hg-oranje)}
.blockCard{border-color:var(--danger)}
.blockBanner{background:var(--danger);color:#fff;font-weight:600;font-size:13px;
  border-radius:9px;padding:8px 12px;margin-bottom:14px}
.grpLabel{font-size:13px;font-weight:600;color:var(--ink);margin:18px 0 2px}
.yesno{display:flex;gap:8px;margin:12px 0}
.yesno button{flex:1;border:1px solid var(--line);background:var(--card);border-radius:10px;
  padding:11px;font:inherit;font-size:15px;font-weight:600;color:var(--ink)}
.yesno button:hover{border-color:var(--accent);background:var(--accent-soft)}
.yesno button.sel{background:var(--accent);border-color:var(--accent);color:#fff}
.reveal{background:var(--accent-soft);border-radius:10px;padding:12px 14px;
  margin:4px 0 12px;font-size:14px;line-height:1.5}
.doneIcon{width:46px;height:46px;border-radius:50%;background:var(--accent-soft);color:var(--accent-d);
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;margin:0 0 14px}
/* Was grijs (--muted): een link hoort als link herkenbaar te zijn, niet als
   grijze bijzaak (style-audit sectie 4). Zelfde groen/geel-patroon als
   .contactFoot en .voet. */
.back-link{background:none;border:0;color:var(--accent);font:inherit;font-size:13px;
  padding:8px 0 0;text-decoration:underline;text-underline-offset:3px}
.back-link:hover{color:var(--hg-oranje)}
.hintBol{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border:0;padding:0;font:inherit;
  border-radius:50%;background:var(--line);color:var(--muted);font-size:10px;font-weight:700;
  margin-left:5px;flex:none;cursor:help}
.hintBubble{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:4px 9px;border-radius:6px;font-size:12px;
  font-weight:400;white-space:nowrap;box-shadow:var(--shadow);pointer-events:none;z-index:20}
.hintBubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink)}

/* Stappen in de kennismaking */
.stapBalk{display:flex;gap:6px;margin-bottom:16px}
.stapBol{width:26px;height:4px;border-radius:999px;background:var(--line);transition:background .2s}
.stapBol.gehad{background:var(--accent-soft)}
.stapBol.nu{background:var(--accent)}
.stap h2{margin-top:0}
.obEigenL{display:block;margin:14px 0 4px}
.setupCard .chipRow{margin-top:8px}
.setupError:empty{display:none}

/* Uitleg bij lijsten waar je eigen opties maakt */
.optieHint{font-size:12px;color:var(--muted);margin:2px 0 12px;line-height:1.45}

/* ---------- Sprongmenu bovenaan het dashboard ---------- */
.dashSprong{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;
  position:sticky;top:76px;z-index:10;padding:10px 0;
  background:linear-gradient(var(--bg) 78%,transparent)}
.sprongKnop{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:7px 14px;font:inherit;font-size:13.5px;color:var(--accent-d)}
.sprongKnop:hover{background:var(--accent-soft);border-color:var(--accent)}
.sprongKnop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#tab-dash .card{scroll-margin-top:130px}

/* ---------- Experimenten op het dashboard ---------- */
.expTellers{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
button.avgKpi{border:1px solid var(--line);background:var(--bg);text-align:left;
  font-family:inherit;color:inherit;transition:border-color .15s,background .15s}
button.avgKpi:hover{border-color:var(--accent);background:var(--accent-soft)}
.expNaam{background:transparent;border:0;padding:0;font:inherit;color:var(--accent-d);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.expNaam:hover{color:var(--ink)}
.expGemarkeerd{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
.expLijst{display:flex;flex-direction:column;gap:5px;margin-top:14px;
  border-top:1px solid var(--line);padding-top:12px}
.expRegel{display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  font:inherit;font-size:14px;color:var(--ink)}
.expRegel:hover{border-color:var(--accent);background:var(--accent-soft)}
.erNaam{font-weight:600}
.erNotitie{flex:1 1 100%;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erUit{font-size:12px;border-radius:999px;padding:2px 9px;background:var(--bg);color:var(--muted)}
.erUit.u-beter{background:var(--accent-soft);color:var(--accent-d)}
.erUit.u-slechter{background:#f6e3de;color:var(--danger)}
.expTussen{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.expTussen h4{font-size:14px;margin:0 0 8px}
.vgRij{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:5px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.vgRij:last-of-type{border-bottom:0}
.vgLbl{flex:1 1 130px;color:var(--muted)}
.vgWaarde{font-weight:600;min-width:44px}
.vgVs{font-size:12px;border-radius:999px;padding:2px 9px}
.vgBeter{background:var(--accent-soft);color:var(--accent-d)}
.vgMinder{background:#f6e3de;color:var(--danger)}
.vgGelijk{background:var(--bg);color:var(--muted)}
.vgOnd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 0 2px;font-size:14px}
.ondLijst{display:flex;gap:6px;flex-wrap:wrap}
/* Zelfde lettertype en grootte als de regels erboven; alleen de telling is vet. */
.ondTag{display:inline-flex;align-items:baseline;gap:6px;font-size:14px;
  background:var(--accent-soft);color:var(--accent-d);border-radius:999px;padding:3px 11px}
.ondTag b{font-weight:600;font-size:13px}

/* ---------- Experimenten: periode en uitkomst ---------- */
.expPeriode{margin:2px 0 8px}
.expUitkomstRow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.expUitkomst{border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:6px 12px;font-size:13px;color:var(--ink)}
/* Hover toont hier bewust de kleur die de knop krijgt als hij geselecteerd
   wordt, per uitkomst -- niet de gewone hoverkleur van de rest van de app. */
.expUitkomst:hover,.expUitkomst.on{background:var(--accent-soft);border-color:var(--accent);font-weight:600}
.expUitkomst.u-beter:hover,.expUitkomst.u-beter.on{background:var(--lente);border-color:var(--lente);color:var(--ink-op-kleur);font-weight:700}
.expUitkomst.u-slechter:hover,.expUitkomst.u-slechter.on{background:var(--danger);border-color:var(--danger);color:#fff}

/* ---------- Meldbalk: wat er zojuist gebeurde ---------- */
.meldBalk{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);
  display:flex;align-items:center;gap:12px;z-index:95;
  background:var(--accent-d);color:#fff;border-radius:999px;
  padding:11px 14px 11px 18px;box-shadow:0 6px 22px rgba(40,50,40,.28);
  font-size:14.5px;font-weight:600;max-width:min(560px,92vw);
  opacity:0;transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .28s}
.meldBalk.zichtbaar{transform:translate(-50%,0);opacity:1}
.meldBalk.herstel{background:var(--ink)}
.meldVink{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);
  font-size:13px;flex:none}
.meldBalk.herstel .meldVink{background:transparent}
.meldTekst{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meldOngedaan{background:rgba(255,255,255,.18);border:0;color:#fff;
  border-radius:999px;padding:6px 14px;font:inherit;font-size:13.5px;flex:none}
.meldOngedaan:hover{background:rgba(255,255,255,.32)}
@media (prefers-reduced-motion:reduce){ .meldBalk{transition:opacity .2s} }

/* Soort bij ondersteuning: opgevouwen, want de meeste mensen hebben het niet nodig */
.soortVouw{margin:8px 0 4px}
.soortVouw summary{cursor:pointer;padding:4px 0}
.soortVouw summary:hover{color:var(--accent-d)}

/* ---------- Menuutje achter de rechtermuisknop ---------- */
.optieMenu{position:fixed;z-index:90;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:4px;min-width:170px;display:flex;flex-direction:column}
.optieMenu button{text-align:left;background:transparent;border:0;border-radius:7px;
  padding:8px 12px;font-size:14px;color:var(--ink)}
.optieMenu button:hover,.optieMenu button:focus{background:var(--accent-soft);outline:none}
.optieMenu button.gevaar{color:var(--danger)}
/* Hoverkleur meegemeten met de nieuwe --danger: wit op #87402F haalt 7,49
   op 1 (de oude hover #9c4736 hoorde bij de oude --danger). */
.add.gevaar{background:var(--danger)}
.add.gevaar:hover{background:#87402F}

/* ---------- Zoekveld bij de producten ----------
   Bewust dezelfde vorm als het invoerveld erboven, maar rustiger: het staat
   op de achtergrondkleur in plaats van op kaartwit, zodat het leest als
   filter en niet als tweede invoerveld. */
.ingSearch{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 11px;
  font-family:inherit;font-size:14px;background:var(--bg);color:var(--ink)}
.ingSearch::placeholder{color:var(--muted)}
.ingSearch:focus{outline:none;border-color:var(--accent);background:var(--card)}
.ingSearch::-webkit-search-cancel-button{cursor:pointer}
.ingCount{margin:6px 2px 8px}
.ingCount:empty{display:none}

/* ---------- Aan/uit-lijst voor wat je bijhoudt ---------- */
.modGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px;margin:10px 0 4px}
.modGrid label{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer;font-size:14px}
.modGrid input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none}
.modGroup{grid-column:1/-1;margin:8px 0 0;font-size:12px;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.4px}
.setupError{margin-top:14px;padding:10px 12px;border:1px solid var(--danger);
  border-left:4px solid var(--danger);border-radius:9px;color:var(--ink);font-size:13px}
.loadError{margin:16px;padding:12px 14px;border:1px solid var(--danger);border-left:4px solid var(--danger);
  border-radius:10px;background:var(--card);color:var(--ink)}

/* Het scherm dat overblijft als het logboek niet geopend kon worden. Het staat
   in de plaats van de app, niet erbovenop: een dode app die er werkend uitziet
   is erger dan geen app. */
.loadErrorScherm{flex-direction:column;align-items:stretch;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px;width:min(560px,94vw);height:max-content;
  max-height:92vh;margin:auto;inset:auto;position:relative;z-index:80}
.loadErrorScherm h2{font-size:19px;margin:0 0 10px}
.loadErrorScherm .loadError{margin:0 0 10px}
.loadErrorScherm .modalBtns{margin-top:14px;flex-wrap:wrap;align-items:center}
.loadErrorScherm .setHead{margin-top:20px}

/* De back-upherinnering. Een stipje op het tandwiel en een regel in het
   venster zelf — geen venster dat over je scherm springt. Wie niet wil, hoeft
   niet, en dat is de bedoeling (zie CLAUDE.md 1.1, autonomie). */
.gear{position:relative}
.gear.herinner::after{content:'';position:absolute;top:4px;right:4px;
  width:8px;height:8px;border-radius:50%;background:var(--hg-oranje);
  border:1.5px solid var(--card)}
.backupNudge{margin:0 0 8px;padding:8px 10px;border-radius:8px;font-size:12.5px;
  background:var(--accent-soft);border:1px solid var(--accent);color:var(--ink)}

/* Een kaart die net van plek verschoven is even laten oplichten, zodat je hem
   terugvindt in plaats van je af te vragen waar hij gebleven is. */
@keyframes netVerplaatst{from{box-shadow:0 0 0 3px var(--hg-oranje)}to{box-shadow:var(--shadow)}}
.netVerplaatst{animation:netVerplaatst 2.2s ease-out}
@media (prefers-reduced-motion:reduce){
  .netVerplaatst{animation:none;box-shadow:0 0 0 3px var(--hg-oranje)}
}

/* De voettekst staat onder elk tabblad: de voorbehouden horen overal te
   gelden, niet alleen op het scherm waar iemand toevallig begint. */
.voet{max-width:1180px;margin:0 auto;padding:24px 20px 40px;
  border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;line-height:1.6}
.voet p{margin:0 0 8px}
.voet p:last-child{margin-bottom:0}
.voet a{color:var(--accent)}
.voet a:hover{color:var(--hg-oranje)}
.voetVersie{color:var(--ink)}

/* ---------- Dashboard extra ---------- */
.todaySnap{display:flex;flex-wrap:wrap;gap:10px}
.snap{flex:1;min-width:118px;background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.snap b{font-size:15px}
.snap span{font-size:11px;color:var(--muted)}
.dailyAvg{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.avgKpi{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;min-width:88px}
.avgKpi b{font-size:17px}
.avgKpi span{font-size:11px;color:var(--muted)}
.insightRow{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.insightRow:last-child{border-bottom:none}
.iName{width:170px;font-size:13.5px;font-weight:600;flex-shrink:0}
.iBar{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.iCount{font-weight:700;font-size:12.5px;background:var(--accent);color:#fff;border-radius:999px;padding:2px 9px}
.iTag{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--ink);background:var(--card)}
/* Ingrediënten en symptomen op het dashboard. Eén blok per patroon: de
   combinatie bovenaan, daaronder wat er geteld is en waartegen het afgezet is.
   De vergelijkingsregel staat er met opzet even groot bij als de bevinding;
   zonder dat getal is de bevinding niet te beoordelen. */
.ipRij{padding:10px 0;border-bottom:1px solid var(--line)}
.ipRij:last-of-type{border-bottom:none}
.ipKop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px}
.ipIng,.ipSym{font-size:14px;font-weight:600}
.ipIng{background:var(--accent-soft);color:var(--accent-d);border-radius:999px;padding:2px 10px}
.ipPijl{color:var(--muted);font-size:13px}
.ipTekst{font-size:13.5px;line-height:1.45}
.ipVgl{font-size:12.5px;color:var(--muted);margin-top:2px}
.ipSlot{margin-top:10px}
.ipVoet{margin-top:10px}
.ipUitleg{margin-top:10px;font-size:12.5px;color:var(--muted)}
.ipUitleg summary{cursor:pointer;color:var(--accent);font-weight:600}
.ipUitleg p{margin:6px 0 0;line-height:1.5}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.legItem{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.legDot{width:11px;height:11px;border-radius:50%}
.dayItem.justAdded{animation:swishIn .4s ease}
@keyframes swishIn{0%{transform:translateY(-10px);opacity:.2;background:var(--accent-soft)}60%{background:var(--accent-soft)}100%{transform:translateY(0);opacity:1;background:transparent}}

@media(max-width:820px){
  #expList{grid-template-columns:1fr}
  .cyclusGrid{grid-template-columns:1fr}
  .cycSide{position:static}
  .ingGrid{grid-template-columns:1fr}
  .ingProducts{max-height:220px}
  .logGrid{grid-template-columns:1fr}
  .timeline{position:static;max-height:none}
  .slots{max-height:220px;flex-direction:row;flex-wrap:wrap}
  .dashGrid{grid-template-columns:1fr}
  .dashGrid .span2{grid-column:auto}
}

/* ---------- Overzicht voor een begeleider ----------
   Op het scherm een leesbare pagina, op papier liggend en zonder alles
   eromheen. De vorm volgt het papieren dagboek: kolommen naast elkaar, met
   de klachten op dezelfde rij als het eten. */
.expPeriodeRij{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.expPeriodeRij input{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit}
.expOnderdeelKop{margin:14px 0 2px;font-weight:600;color:var(--ink)}
.expNotitieRij{display:flex;align-items:center;gap:9px;margin:12px 0 2px;cursor:pointer;font-size:14px}
.expNotitieRij input{width:16px;height:16px;accent-color:var(--accent);flex:none}

#exportView{position:fixed;inset:0;z-index:100;background:var(--bg);overflow:auto;padding:0 0 60px}
.exportBalk{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card);border-bottom:1px solid var(--line);padding:12px 20px}
#exportDoc{max-width:1100px;margin:0 auto;padding:24px 20px}
.expKop h1{font-size:21px;margin:0 0 4px}
.expKop p{margin:0 0 4px;color:var(--muted);font-size:13.5px}
.expUitleg{font-style:italic}
.expDag{margin-top:22px;page-break-inside:avoid;break-inside:avoid}
.expDag h2{font-size:15px;margin:0 0 6px;padding-bottom:5px;border-bottom:2px solid var(--accent)}
.expDagVeld{margin:0 0 8px;font-size:13px;color:var(--ink)}
.expTabel{width:100%;border-collapse:collapse;font-size:12.5px}
.expTabel th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;
  color:var(--muted);border-bottom:1px solid var(--line);padding:5px 8px;vertical-align:bottom}
.expTabel td{border-bottom:1px solid var(--line);padding:6px 8px;vertical-align:top}
.expTabel .cTijd{width:52px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.expLeeg{color:var(--muted);font-size:13px;font-style:italic;margin:6px 0 0}

@media print{
  @page{size:A4 landscape;margin:12mm}
  body>*{display:none!important}
  body>#exportView{display:block!important;position:static;overflow:visible;padding:0;background:#fff}
  .exportBalk{display:none!important}
  #exportDoc{max-width:none;padding:0}
  .expDag h2{border-bottom-color:#333}
  .expTabel th,.expTabel td{border-bottom-color:#bbb}
  .expTabel{font-size:10.5pt}
  a[href]::after{content:''}
}

/* Een mislukte opslag mag niet stiller zijn dan een geslaagde. */
.saveState.mislukt{color:var(--danger);font-weight:600}