/* Opmaak van Carom Tracker (alles wat niet inline in de componenten staat) */
/* Laken-kleuren (groen, libre); per discipline overschreven door zetThema() in js/constanten.js */
:root{--c-1a2e1a:#1a2e1a;--c-22341f:#22341f;--c-3a5c35:#3a5c35;--c-2d4a1e:#2d4a1e;--c-0d1f0d:#0d1f0d;--c-1e3a1e:#1e3a1e;--c-182e14:#182e14;--c-152015:#152015;--c-1a3019:#1a3019;--c-1a2e10:#1a2e10;--c-1c3019:#1c3019;--c-2a4a1e:#2a4a1e;--c-5a7a55:#5a7a55;--c-1c2c1c:#1c2c1c;--c-1c2e18:#1c2e18;--c-24401f:#24401f;--c-132613:#132613;--c-1a3a1a:#1a3a1a;--c-2a3d20:#2a3d20;--c-2d4a22:#2d4a22;--c-3f8a3a:#3f8a3a;--c-1d4a1d:#1d4a1d}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%;width:100%;overflow:hidden}
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--c-1a2e1a);font-family:Georgia,serif;color:#f5f0e8}
.app{display:flex;flex-direction:column;height:100vh;max-width:480px;margin:0 auto}
/* Veilige zone rond notch/thuisbalk: bij grotere tekst (zoom op .app) delen door --zoom, anders wordt die rand mee vergroot */
html.native .app{padding:calc(env(safe-area-inset-top) / var(--zoom,1)) calc(env(safe-area-inset-right) / var(--zoom,1)) calc(env(safe-area-inset-bottom) / var(--zoom,1)) calc(env(safe-area-inset-left) / var(--zoom,1))}
@media (min-width:700px){
  body{display:flex;justify-content:center}
  .app{max-width:960px;border-left:1px solid var(--c-3a5c35);border-right:1px solid var(--c-3a5c35)}
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type=number]{-moz-appearance:textfield}
@keyframes badgePopIn{0%{opacity:0;transform:scale(0.7) translateY(10px);}60%{opacity:1;transform:scale(1.04) translateY(0);}100%{opacity:1;transform:scale(1) translateY(0);}}
.plusmin-btn{transition:background-color 0.08s,transform 0.08s;-webkit-tap-highlight-color:transparent;}
.plusmin-btn:active{background-color:#e8c96a!important;color:var(--c-1a2e1a)!important;transform:scale(0.92);}
/* Disciplinekeuze: een onzichtbare vette kopie houdt de breedte vast, zodat er bij wisselen niets verspringt */
.seg-tekst{display:inline-flex;flex-direction:column;align-items:center}
.seg-tekst::after{content:attr(data-tekst);font-weight:bold;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
/* Heel smalle schermen (bijv. iPhone SE 1e generatie): iets kleiner, zodat alle vier de namen passen */
@media (max-width:350px){.seg-knop{font-size:12px!important;padding-left:3px!important;padding-right:3px!important;letter-spacing:0!important}}
/* Datumvelden: iOS geeft ze een vaste minimale breedte; zo passen ze altijd in hun vak */
input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;box-sizing:border-box;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
/* Wauw-animaties (jsx/wauw.jsx). Uit met <html class="rustig"> (Info → Weergave) of bij minder beweging */
@keyframes viering-val{0%{transform:translateY(-12vh) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(112vh) rotate(540deg);opacity:0.9}}
.viering-bal{position:absolute;top:0;border-radius:50%;box-shadow:0 3px 8px rgba(0,0,0,0.4);animation:viering-val 1.8s cubic-bezier(.4,.1,.7,1) forwards}
@keyframes viering-tekst{0%{transform:scale(0.6);opacity:0}18%{transform:scale(1.06);opacity:1}30%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
.viering-tekst{animation:viering-tekst 2.6s ease forwards}
@keyframes verhaal-in{from{opacity:0;transform:translateY(18px) scale(0.98)}to{opacity:1;transform:none}}
.verhaal-in{animation:verhaal-in 0.45s cubic-bezier(.2,.8,.2,1)}
@keyframes balk-groei{from{transform:scaleX(0)}}
.balk-groei{transform-origin:left center;animation:balk-groei 0.7s cubic-bezier(.2,.8,.2,1)}
@keyframes staaf-groei{from{transform:scaleY(0)}}
.staaf-groei{transform-origin:center bottom;animation:staaf-groei 0.6s cubic-bezier(.2,.8,.2,1)}
html.rustig .balk-groei,html.rustig .staaf-groei,html.rustig .verhaal-in{animation:none}
@media (prefers-reduced-motion:reduce){.balk-groei,.staaf-groei,.verhaal-in,.viering-bal,.viering-tekst{animation:none}}
/* Hoofdschermen veren altijd een klein stukje mee aan de rand (iOS), ook als alles op het scherm past: een
   onzichtbaar streepje van 1 px hoger dan het vak geeft net genoeg om te scrollen. Absoluut, dus geen invloed op
   de opmaak (ook niet in flex-vakken). */
.scrollvak{position:relative;overscroll-behavior-y:auto}
.scrollvak::before{content:"";position:absolute;top:0;left:0;width:1px;height:calc(100% + 1px);pointer-events:none}