/* app.css: alle opmaak van de Dagritme Klok. Kleuren en maten alleen via tokens uit themes.js.
   De tokens hieronder zijn de terugval voordat app.js applyTheme() heeft gedraaid. */
:root{
  color-scheme:light;
  --cream:#FBF3E4;
  --face:#FFFDF8;
  --ink:#2E2019;
  --ink-soft:#7A6A5C;
  --wood:#C6924F;
  --on-wood:#2E2019;
  --sticker:#FFFFFF;
  --sticker-edge:rgba(46,32,25,.16);
  --divider:rgba(46,32,25,.55);
  --w-teal:#2C9C8A;
  --w-blue:#3D77B0;
  --w-orange:#EE9A34;
  --w-magenta:#C13F82;
  --w-redorange:#DB5A34;
  --w-yellow:#F1C548;
  --card-teal:#1F7A6B;
  --card-blue:#2F67A0;
  --card-redorange:#B8441F;
  --card-magenta:#C13F82;
  --card-yellow:#F1C548;
  --card-orange:#EE9A34;
  --card-night:#26304F;
  --card-vrij:#C6924F;
  --veil:rgba(20,24,48,.40);
  --card-shadow:0 14px 34px -16px rgba(46,32,25,.45);
  --ring:rgba(46,32,25,.40);
  --track:rgba(46,32,25,.12);
  --ster:#F1C548;
  --patroon:none;
  --fout:#B8441F;
  --pad-boven:max(8px, env(safe-area-inset-top));
  --pad-onder:max(14px, env(safe-area-inset-bottom));
}
@media (prefers-color-scheme: dark){
  :root:not([data-scheme="light"]){
    color-scheme:dark;
    --cream:#1B1611;
    --face:#25201A;
    --ink:#F3ECE0;
    --ink-soft:#BCAC9B;
    --wood:#B98A4B;
    --sticker:#F6F0E6;
    --sticker-edge:rgba(0,0,0,.30);
    --divider:rgba(243,236,224,.45);
    --w-teal:#279589;
    --w-blue:#3E75A8;
    --w-orange:#D68A2E;
    --w-magenta:#B23D7C;
    --w-redorange:#C7522E;
    --w-yellow:#DEB63E;
    --card-vrij:#B98A4B;
    --fout:#FFB59A;
    --veil:rgba(8,10,24,.55);
    --card-shadow:0 14px 34px -16px rgba(0,0,0,.65);
    --ring:rgba(243,236,224,.50);
    --track:rgba(243,236,224,.14);
  }
}
:root[data-scheme="dark"]{
  color-scheme:dark;
  --cream:#1B1611;
  --face:#25201A;
  --ink:#F3ECE0;
  --ink-soft:#BCAC9B;
  --wood:#B98A4B;
  --sticker:#F6F0E6;
  --sticker-edge:rgba(0,0,0,.30);
  --divider:rgba(243,236,224,.45);
  --w-teal:#279589;
  --w-blue:#3E75A8;
  --w-orange:#D68A2E;
  --w-magenta:#B23D7C;
  --w-redorange:#C7522E;
  --w-yellow:#DEB63E;
  --card-vrij:#B98A4B;
  --fout:#FFB59A;
  --veil:rgba(8,10,24,.55);
  --card-shadow:0 14px 34px -16px rgba(0,0,0,.65);
  --ring:rgba(243,236,224,.50);
  --track:rgba(243,236,224,.14);
}
/* einde tokens */
/* Uitlopende curve voor alles wat op een tik reageert: snel weg, rustig tot stilstand. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);}

*{box-sizing:border-box;}
html{touch-action:pan-x pan-y;}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:var(--cream);
  /* --ink-soft mag hier nooit rechtstreeks op staan: op het patroon meet dat 3,82 tot 3,92:1 in
     licht, onder de eis van 4,5:1. Alleen --ink (koppen) mag direct op deze achtergrond. */
  background-image:var(--patroon);background-size:120px 120px;
  color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  padding-block:var(--pad-boven) var(--pad-onder);
  padding-inline:max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  touch-action:pan-x pan-y;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
input,textarea{-webkit-user-select:text;user-select:text;}
h1,h2,h3{font-family:'Baloo 2',sans-serif;margin:0;line-height:1.15;}
h2{font-size:1.3rem;}
h3{font-size:1.05rem;}
p{margin:0;}
.view[hidden]{display:none;}
.wrap{width:100%;max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:12px;}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;}
.brand{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.1rem;min-width:0;overflow-wrap:anywhere;}
button.brand{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.1rem;text-align:left;min-height:44px;cursor:pointer;border-radius:8px;}
button.brand:disabled{cursor:default;opacity:1;}
button.brand:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
.kind-lijst{display:flex;flex-direction:column;gap:8px;}
#blok-kinderen .kind-lijst{margin-bottom:12px;}
.kind-lijst .kind-knop{width:100%;text-align:left;justify-content:flex-start;font-size:1.05rem;}
.kind-lijst .kind-knop[aria-current="true"]{box-shadow:inset 0 0 0 3px var(--wood);}

/* knoppen: minimaal 44 px, contrast via hout of plaat */
.btn{
  font-family:inherit;font-weight:800;font-size:.95rem;letter-spacing:.02em;
  min-height:44px;min-width:44px;border:none;border-radius:999px;padding:10px 20px;
  background:var(--wood);color:var(--on-wood);cursor:pointer;
  touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .16s var(--ease-out), filter .2s ease;
}
.btn:hover{filter:brightness(.95);}
.btn:active{transform:scale(.97);}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
.btn[disabled]{opacity:.7;cursor:default;transform:none;}
/* display uit .btn wint het van [hidden] van de browser, dus het hidden-kenmerk hier expliciet
   afdwingen. Zonder deze regel staat de Gelukt-knop gewoon in beeld terwijl .hidden true is. */
.btn[hidden]{display:none;}
.btn.zacht{background:var(--face);color:var(--ink);box-shadow:inset 0 0 0 2px var(--wood);}
.btn.icoon{padding:0;width:48px;height:48px;font-size:1.4rem;}
.btn.icoon svg{width:26px;height:26px;fill:currentColor;}

/* toast */
#toast{
  position:fixed;left:50%;bottom:max(20px, env(safe-area-inset-bottom));transform:translate(-50%, 20px);
  background:var(--ink);color:var(--cream);font-weight:700;font-size:.95rem;
  padding:12px 18px;border-radius:14px;max-width:calc(100vw - 32px);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;z-index:50;
}
#toast.on{opacity:1;transform:translate(-50%, 0);}

/* dialogen */
dialog{
  border:none;border-radius:22px;padding:20px;background:var(--face);color:var(--ink);
  box-shadow:var(--card-shadow);width:min(92vw, 420px);max-height:90dvh;overflow:auto;
}
dialog::backdrop{background:rgba(0,0,0,.45);}
.dialoog-knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:16px;}
/* Blokpaneel: de knoppenrij plakt onderaan het venster, zodat Bewaren, Annuleren en Verwijderen altijd
   bereikbaar zijn, ook als het paneel op een kleine telefoon drie schermen lang is. */
/* scroll-padding: iets in beeld scrollen (focus, tik) stopt boven de plakkende knoppenrij, niet eronder. */
#paneel-blok{padding-bottom:0;scroll-padding-bottom:96px;}
#paneel-blok .dialoog-knoppen{
  position:sticky;bottom:0;z-index:2;background:var(--face);
  margin:16px -20px 0;padding:10px 12px max(12px, env(safe-area-inset-bottom));
  box-shadow:0 -8px 12px -10px rgba(0,0,0,.35);
  flex-wrap:nowrap;gap:8px;
}
/* Een rij, zodat de plakkende balk laag blijft (twee rijen waren GEMETEN 126 px op 375 breed). */
#paneel-blok .dialoog-knoppen .btn{flex:1 1 auto;padding:10px 10px;}
/* Kies je sticker (3.5.0): twaalf grote knoppen, 3 of 4 per rij, minstens 64 px. */
#dialoog-sticker h3{margin:0 0 12px;text-align:center;}
.sticker-keuze{display:grid;grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));gap:8px;}
.sticker-knop{
  min-width:64px;min-height:64px;padding:6px;border:2px solid var(--sticker-edge);border-radius:16px;
  background:var(--sticker);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.sticker-knop img{width:44px;height:44px;pointer-events:none;}
.sticker-knop:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
.sticker-knop:active{transform:scale(.94);}
.sticker-knop,.blok-knop,.dag,.vandaag,.kiezer-icoon,.cat-knop,.stem-keuze{transition:transform .16s var(--ease-out);}
.blok-knop:active,.dag:active,.vandaag:active,.kiezer-icoon:active,.cat-knop:active,.stem-keuze:active{transform:scale(.98);}

/* confetti-canvas ligt over alles, vangt geen tikken */
#confetti{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;z-index:40;}

/* schermlezer-teksten */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ===== KLOK (Taak 4): uit versie 2, met nieuwe ids ===== */
.clockread{display:flex;align-items:center;gap:8px;}
.digital{font-weight:800;font-size:1.2rem;font-variant-numeric:tabular-nums;color:var(--ink);}
/* Strook onder de kop. Stond eerst als pil IN de kop, maar die duwde de titel weg. Hij is er nu
   ALTIJD en houdt een vaste hoogte van een regel, zodat de klok niet van maat springt zodra je gaat
   oefenen. nowrap dwingt die ene regel af; de test meet of de tekst er ook echt op past. */
.strip-oefenen{
  margin:0;
  font-weight:800;font-size:17px;line-height:1.2;font-variant-numeric:tabular-nums;
  text-align:center;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:52px;
  color:var(--ink);background:var(--face);
  border:2px solid var(--wood);border-radius:999px;padding:0 14px;
}
/* In de oefenstand staat er een tijd op de klok die niet klopt, dus dat mag opvallen. */
.strip-oefenen.oefent{background:var(--wood);color:var(--on-wood);}
.tandwiel{background:var(--face);color:var(--ink);box-shadow:inset 0 0 0 2px var(--wood);}
.tandwiel.houdt{transform:scale(.92);filter:brightness(.9);}
/* Stip op het tandwiel: in Instellen staat een melding voor de ouder. */
.tandwiel{position:relative;}
.tandwiel[data-melding]::after{
  content:"";position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:var(--fout);box-shadow:0 0 0 2px var(--face);
}

.clock-area{display:flex;justify-content:center;align-items:center;}
.clock-area svg{
  display:block;
  width:min(100%, 50vh);
  width:min(100%, 50svh);
  height:auto;
  aspect-ratio:1/1;
  overflow:visible;
}
@media (max-width:599px){
  .clock-area{margin-inline:-10px;}
  /* Volle breedte, in beide standen even groot. De hoogte volgt. */
  .clock-area svg{width:100%;height:auto;aspect-ratio:1/1;}
}
.frame-bg{fill:var(--wood);}
.face-bg{fill:var(--face);}
.wedge-g{transform-origin:200px 200px;transition:transform .5s ease, opacity .6s ease, filter .6s ease;}
.wedge-fill{transition:opacity .5s ease;}
.wedge-g.dim{opacity:.45;filter:saturate(.6);}
.wedge-g.active{transform:scale(1.03);}
.wedge-g.night{opacity:.32;filter:saturate(.45);}
.wedge-outline{fill:none;stroke:var(--ink);stroke-width:4;stroke-linejoin:round;opacity:0;transition:opacity .5s ease;}
.wedge-g.active .wedge-outline{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  .wedge-g.active .wedge-outline{animation:pulse 2.4s ease-in-out infinite;}
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.sticker{fill:var(--sticker);stroke:var(--sticker-edge);stroke-width:1.5;}
.ico{pointer-events:none;}
.ster{pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));transform-box:fill-box;transform-origin:center;}
.divider{stroke:var(--divider);stroke-width:2;stroke-linecap:round;}
.num{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:28px;
  fill:var(--ink);text-anchor:middle;dominant-baseline:central;
}
.veil{fill:var(--veil);opacity:0;transition:opacity .6s ease;pointer-events:none;}
.veil.on{opacity:1;}
.moon{opacity:0;transition:opacity .6s ease;pointer-events:none;}
.moon.on{opacity:1;}
.hand{transform-origin:200px 200px;transition:transform .35s cubic-bezier(.34,1.3,.64,1);}
.hands.no-anim .hand{transition:none;}
.hand-min{stroke:var(--ink);stroke-width:2;stroke-linecap:round;opacity:.8;}
.hand-hour-halo{stroke:var(--face);stroke-width:21;stroke-linecap:round;}
.hand-hour{stroke:var(--ink);stroke-width:16;stroke-linecap:round;}
.hub{fill:var(--ink);}
.hub-dot{fill:var(--face);}

/* kaart onder de klok */
.side{display:flex;flex-direction:column;gap:12px;min-width:0;}
.card{
  border-radius:24px;
  padding:18px 20px;
  background:var(--card-c, var(--card-teal));
  color:var(--card-ink, #FFFFFF);
  box-shadow:var(--card-shadow);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  transition:background-color .5s ease, color .5s ease;
}
.card .emo{width:56px;height:56px;flex:0 0 auto;}
.card .txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 160px;}
.card .nu{font-weight:800;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;}
.card .label{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.45rem;line-height:1.15;
  text-wrap:balance;overflow-wrap:anywhere;
}
.card .meta{font-weight:800;font-size:.9rem;font-variant-numeric:tabular-nums;}
.card .rest{font-size:.95rem;font-weight:700;line-height:1.35;}
.bar{height:6px;border-radius:999px;background:rgba(0,0,0,.2);overflow:hidden;margin-top:4px;}
.card.dark-ink .bar{background:rgba(46,32,25,.15);}
.bar-fill{height:100%;width:0;border-radius:999px;background:currentColor;transition:width .5s ease;}
.btn.gelukt{background:var(--card-ink, #FFFFFF);color:var(--card-c, var(--card-teal));flex:0 0 auto;font-size:1.05rem;padding:12px 22px;}
.btn.gelukt[data-state="gedaan"]{opacity:1;box-shadow:inset 0 0 0 3px currentColor;}
.btn.gelukt[data-state="oefenen"]{font-size:.95rem;}
/* Het vinkje landt op de knop zodra hij op gedaan springt. */
.btn.gelukt[data-state="gedaan"]::before{content:"\2713";font-weight:900;display:inline-block;animation:vink .5s linear;}
@keyframes vink{
  0%{opacity:0;transform:scale(.2) rotate(-40deg);}
  25%{opacity:1;transform:scale(.9) rotate(-8deg);}
  45%{transform:scale(1.08) rotate(3deg);}
  70%{transform:scale(.99) rotate(0);}
  100%{transform:scale(1) rotate(0);}
}

/* vandaag-strip */
.strip{
  background:var(--face);border-radius:18px;padding:10px 14px;box-shadow:var(--card-shadow);
  display:flex;align-items:center;gap:10px;min-height:56px;
}
.strip-sterren{display:flex;gap:2px;flex:0 0 auto;}
.strip-sterren img{width:24px;height:24px;}
.strip-tekst{flex:1 1 auto;font-weight:700;min-width:0;}

/* De strook en de knop Nu op een rij; de knop staat er altijd, zodat de klok niet verspringt. */
.strip-rij{display:flex;align-items:center;gap:8px;}
.strip-rij .strip-oefenen{flex:1 1 auto;min-width:0;}
.strip-rij #btn-nu{flex:0 0 auto;min-height:52px;font-size:18px;padding:0 20px;}
/* Strook en Nu even hoog (52 px, vraag Fawad 22-09): beide groter dan de 31 en 44 px van 3.5.0. */
/* Draaien aan de klok: niet scrollen tijdens het slepen, en in de oefenstand een dikkere gloed. */
/* Scrollen mag overal op de klok; de touchstart in app.js houdt dat alleen tegen op de uurwijzer. */
#klok{touch-action:pan-x pan-y;}
#klok.draait{cursor:grabbing;}
/* Tijdens het slepen volgt de uurwijzer de vinger direct: zonder overgang, dus zonder naijlen en doorschieten. */
#klok.draait .hand{transition:none;}
#klok:focus-visible{outline:3px solid var(--ring);outline-offset:4px;border-radius:24px;}
#klok.oefent .hand-hour-halo{stroke-width:30;}

/* Tablet rechtop: daar is ruimte zat, dus krijgt de klok wat er overblijft en past alles in een keer.
   Op een telefoon (max-width 599px) doet deze regel NIET mee: daar wint de volle breedte van het
   scrollverbod, want Fawad vroeg om een klok die het scherm vult. De svg houdt zijn vierkante vorm
   via preserveAspectRatio, dus hij blijft gecentreerd en onvervormd in een niet-vierkant vak. */
@media (min-width:600px){
  #view-klok .wrap{height:calc(100dvh - var(--pad-boven) - var(--pad-onder));}
  .clock-area{flex:1 1 auto;min-height:150px;}
  .clock-area svg{width:100%;height:100%;aspect-ratio:auto;}
}

/* tablet of telefoon op zijn kant: klok links, de rest rechts */
@media (orientation:landscape) and (min-width:560px){
  #view-klok .wrap{
    max-width:1400px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:28px;row-gap:8px;
    align-items:center;
  }
  #view-klok .top{grid-column:1 / -1;}
  #view-klok .strip-rij{grid-column:1 / -1;}
  #view-klok .wrap{height:auto;}
  .clock-area{margin-inline:0;flex:none;min-height:0;}
  .clock-area svg{
    height:auto;
    width:min(calc(58vw - 40px), calc(100vh - 80px));
    width:min(calc(58vw - 40px), calc(100svh - 80px));
  }
}
/* lage schermen: alles blijft zichtbaar zonder scrollen */
@media (max-height:720px){
  :root{--pad-boven:max(6px, env(safe-area-inset-top));--pad-onder:max(8px, env(safe-area-inset-bottom));}
  .wrap,.side{gap:3px;}
  /* Strook en Nu blijven even hoog; op lage schermen 50 px in plaats van 52, en kleinere tussenruimtes,
     zodat de klok 363 px breed blijft en de kaart op 375x667 GEMETEN op 666 van 667 eindigt. */
  .strip-oefenen,.strip-rij #btn-nu{min-height:50px;}
  .card{padding:5px 14px;gap:8px;border-radius:18px;}
  .card .emo{width:44px;height:44px;}
  .card .label{font-size:1.2rem;}
  /* Taak 7: de Gelukt-knop wordt nu echt zichtbaar tijdens een lopend blok en duwt de kaart
     op een klein toestel (375x667) 16 px onder de vouw uit. Minder eigen opvulling houdt hem
     boven de min. tikmaat van 44 px (die komt uit .btn) en laat de kaart weer passen. */
  .btn.gelukt{padding:8px 18px;}
}

/* ===== INSTELLEN (Taak 5) ===== */
/* Geen stapel gelijke kaarten: vier groepen met een eigen kleur en kop, per groep een vlak, met dunne lijnen
   tussen de onderdelen (opzet uit de instellingen van de Sales-app). De kop staat rechtstreeks op de
   achtergrond, dus --ink en niet --ink-soft (zie body). */
.groep{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.groep-kop{display:flex;align-items:center;gap:8px;font-size:1.25rem;font-weight:800;color:var(--ink);padding-inline:4px;}
.groep-kop::before{content:"";flex:0 0 auto;width:14px;height:14px;border-radius:5px;background:var(--groep);}
.groep-vlak{background:var(--face);border-radius:18px;border-top:6px solid var(--groep);box-shadow:var(--card-shadow);overflow:hidden;}
.instellen .blok{position:relative;padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.instellen .blok + .blok::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--track);}
.instellen .blok h4{margin:0;font-size:.95rem;font-weight:800;}
.melding{background:var(--face);border:3px solid var(--fout);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-weight:700;}
.melding[hidden]{display:none;}
.instellen input[type=text],.instellen input[type=time],.instellen input[type=email],.instellen input[type=password],.instellen select,dialog input[type=text],dialog input[type=time],dialog input[type=password]{
  font:inherit;font-weight:700;font-size:1rem;color:var(--ink);background:var(--face);
  border:2px solid var(--wood);border-radius:12px;min-height:44px;padding:8px 12px;width:100%;
}
/* iOS geeft een tijdveld een eigen minimale breedte, waardoor het over de rand van het paneel liep. */
.instellen input[type=time],dialog input[type=time]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;}
#paneel-titel:focus,#sticker-titel:focus{outline:none;}
.instellen input:focus-visible,dialog input:focus-visible,.instellen select:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
.lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.blok-knop{
  position:relative;overflow:hidden;
  width:100%;min-height:56px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  text-align:left;background:var(--cream);border:none;border-radius:14px;padding:10px 12px 10px 28px;
  color:var(--ink);font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation;
}
.blok-knop:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
/* Elke rij draagt de kleur van zijn blok als brede band links, zodat de blokken uit elkaar te houden zijn. */
.blok-knop .bol{position:absolute;top:0;bottom:0;left:0;width:16px;}
.blok-knop .tijd{font-variant-numeric:tabular-nums;font-size:.9rem;flex:0 0 auto;}
.blok-knop .iconen{display:flex;gap:2px;flex:0 0 auto;}
.blok-knop .iconen img{width:26px;height:26px;}
.blok-knop .label{order:-1;flex:1 1 100%;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.1rem;overflow-wrap:anywhere;}
.ouder-knoppen{margin-top:10px;}
.ouder-los{margin-top:8px;}
#ouder-uit .status,#ouder-in .status{margin:8px 0 0;}
#ouder-in h4{margin-top:14px;}
.ouder-toestellen{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.ouder-toestellen li{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.9rem;font-weight:700;}
.ouder-meer{margin-top:12px;border-top:2px solid var(--wood);padding-top:10px;}
.ouder-meer summary{font-weight:800;min-height:44px;display:flex;align-items:center;cursor:pointer;}
.ouder-meer summary::-webkit-details-marker{display:none;}
.ouder-meer summary::before{content:"";flex:0 0 auto;width:8px;height:8px;margin:0 12px 0 4px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(-45deg);transition:transform .15s;}
.ouder-meer[open] summary::before{transform:rotate(45deg);}
.ouder-meer form{margin-top:8px;}
.ouder-meer .btn{align-self:flex-start;margin-top:8px;}
.velden{display:flex;flex-direction:column;gap:6px;}
.velden label,.veldkop{font-weight:800;font-size:.9rem;margin-top:6px;}
.fout{color:var(--fout);font-weight:700;font-size:.9rem;}
.kiezer{display:grid;grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));gap:6px;}
/* iconenkiezer: knopjesrij scrollt horizontaal, de lijst scrollt binnen het paneel */
.cat-knoppen{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px 2px 6px;}
.cat-knop{
  flex:0 0 auto;min-height:44px;min-width:44px;padding:0 14px;border-radius:22px;border:2px solid var(--ink);
  background:var(--cream);color:var(--ink);font:inherit;font-size:.85rem;font-weight:800;white-space:nowrap;
  cursor:pointer;touch-action:manipulation;
}
.cat-knop:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
.kiezer-lijst{
  position:relative;height:min(300px, 38dvh);overflow-y:auto;overscroll-behavior:contain;
  border-radius:12px;padding:0 2px 6px;
}
/* Lage schermen: kortere icoontjeslijst, zodat vegen vaker het paneel zelf raakt en niet vast blijft in de lijst. */
@media (max-height:720px){ .kiezer-lijst{height:min(180px, 30dvh);} }
.cat-kop{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1rem;margin:10px 0 4px;}
.cat-kop:first-child{margin-top:2px;}
.kiezer-icoon{
  min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--cream);border:2px solid transparent;border-radius:12px;padding:6px 2px;
  font:inherit;font-size:.57rem;font-weight:700;color:var(--ink);cursor:pointer;touch-action:manipulation;
}
.kiezer-icoon img{width:32px;height:32px;}
.kiezer-icoon[aria-pressed="true"]{border-color:var(--ink);background:var(--face);}
.kiezer-icoon:focus-visible{outline:3px solid var(--ring);}
.bolletjes{display:flex;gap:10px;flex-wrap:wrap;}
.bolletje{position:relative;width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0;touch-action:manipulation;flex:0 0 auto;box-sizing:border-box;}
.bolletje[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--face);}
.bolletje:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
/* Gekozen bolletje: rand plus een vinkje op een klein rondje in de plaatkleur, leesbaar op elke kleur. */
.bolletje[aria-pressed="true"]::after,.bolletje.eigen[data-gekozen="true"]::after{
  content:"\2713";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:var(--face);color:var(--ink);font:900 14px/22px system-ui,sans-serif;text-align:center;pointer-events:none;
}
/* Eigen kleur: regenboog met een plusje; na kiezen de gekozen kleur met vinkje. De kleurinvoer ligt
   onzichtbaar over het hele bolletje, zodat een tik direct de kleurkiezer van het toestel opent. */
.bolletje.eigen{background:conic-gradient(#FF4FA3,#FFE500,#3DB83D,#1CC7D0,#1F4FE0,#7B3FC4,#FF4FA3);}
.bolletje.eigen[data-gekozen="false"]::after{
  content:"+";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:var(--face);color:var(--ink);font:900 18px/22px system-ui,sans-serif;text-align:center;pointer-events:none;
}
.bolletje.eigen[data-gekozen="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--face);}
.bolletje.eigen input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;}
.bolletje.eigen:focus-within{outline:3px solid var(--ring);outline-offset:2px;}
.geluiden{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;}
.geluiden label{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:700;cursor:pointer;}
.geluiden input[type=radio]{width:24px;height:24px;margin:0;accent-color:var(--ink);}
.stem,.rij-knoppen{display:flex;gap:8px;flex-wrap:wrap;}
/* Stemmen (3.5.0): een rij per stem in Instellen; in het blokpaneel een aan/uit-knop plus afspelen. */
.stem-rij{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:44px;}
.stem-rij .stem-naam{flex:1 1 8em;font-weight:700;overflow-wrap:anywhere;}
.stem-knoppen{display:flex;gap:6px;flex:0 0 auto;margin-left:auto;}
.stem-rij .btn{padding:8px 14px;}
.stem-kiezer{display:flex;flex-direction:column;gap:6px;}
.stem-optie{display:flex;align-items:center;gap:8px;}
.stem-keuze{
  flex:1 1 auto;min-height:44px;display:flex;align-items:center;gap:8px;text-align:left;
  background:var(--cream);border:2px solid transparent;border-radius:12px;padding:8px 12px;
  font:inherit;font-weight:700;color:var(--ink);cursor:pointer;touch-action:manipulation;overflow-wrap:anywhere;
}
.stem-keuze::before{
  content:"";flex:0 0 auto;width:22px;height:22px;border-radius:6px;box-sizing:border-box;border:2px solid var(--ink);
  font:900 14px/18px system-ui,sans-serif;text-align:center;
}
.stem-keuze[aria-pressed="true"]{border-color:var(--ink);background:var(--face);}
.stem-keuze[aria-pressed="true"]::before{content:"\2713";background:var(--ink);color:var(--face);}
.stem-keuze:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
.stem-optie .stem-speel{flex:0 0 auto;padding:8px 14px;}
.status,.uitleg-klein{font-size:.9rem;color:var(--ink-soft);line-height:1.4;}
#veld-link{font-size:.85rem;}

/* ===== BELONING (Taak 7) ===== */
.ster-rij{display:flex;align-items:center;gap:10px;min-height:44px;}
.ster-rij img{width:24px;height:24px;flex:0 0 auto;}
.ster-rij span{flex:1 1 auto;font-weight:700;}
.leeg{color:var(--ink-soft);font-weight:700;min-height:44px;display:flex;align-items:center;}

/* ===== STICKERS (Taak 8) ===== */
.vandaag{
  background:var(--face);border-radius:22px;padding:16px 18px;box-shadow:var(--card-shadow);
  display:flex;flex-direction:column;gap:8px;min-height:96px;cursor:pointer;
  border:none;width:100%;text-align:left;color:var(--ink);font:inherit;
}
.vandaag:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
.vandaag-titel{font-family:'Baloo 2',sans-serif;font-size:1.05rem;font-weight:700;line-height:1.15;}
.vandaag-sterren{display:flex;flex-wrap:wrap;gap:4px;min-height:40px;}
.vandaag-sterren img{width:40px;height:40px;}
#vandaag-tekst{font-weight:700;}
.raster{display:grid;grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));gap:8px;}
.dag{
  min-height:72px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
  background:var(--face);border:none;border-radius:14px;padding:8px 10px;box-shadow:var(--card-shadow);
  color:var(--ink);font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation;
}
.dag[data-aantal="0"]{background:var(--cream);box-shadow:inset 0 0 0 2px var(--track);cursor:default;}
.dag:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
.dag-naam{font-size:.85rem;color:var(--ink);}
.dag-sterren{display:flex;flex-wrap:wrap;gap:1px;min-height:18px;font-size:.8rem;color:var(--ink-soft);}
.dag-sterren img{width:18px;height:18px;}

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