/* Basis, de tegelwand en de schermen buiten de les. De les zelf staat in les.css. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--voeg); color: var(--inkt);
  font-family: var(--tekst); font-size: 1rem; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
h1, h2, p { margin: 0; }
svg { display: block; }
/* Verborgen is echt weg: anders ligt een onzichtbaar blad over de app en houdt het tikken tegen */
[hidden] { display: none !important; }

#app { position: relative; height: 100vh; height: 100dvh; max-width: 30rem; margin: 0 auto; overflow: hidden; background: var(--kalk); }
#scherm {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top) + 1.25rem) 1.25rem calc(env(safe-area-inset-bottom) + 7rem);
}
#scherm.komt-binnen > * { animation: omhoog 0.7s var(--veer) both; }
#scherm.komt-binnen > *:nth-child(2) { animation-delay: 0.06s; }
#scherm.komt-binnen > *:nth-child(3) { animation-delay: 0.12s; }
#scherm.komt-binnen > *:nth-child(4) { animation-delay: 0.18s; }
@keyframes omhoog { from { opacity: 0; transform: translateY(1.75rem) scale(0.97); } }

/* Knoppen */
.knop {
  display: block; width: 100%; padding: 1rem 1.25rem; border-radius: 1.125rem; text-align: center; text-decoration: none;
  font-family: var(--kop); font-weight: 700; font-size: 1.0625rem; color: var(--wit);
  background: linear-gradient(180deg, #2a50d8, var(--kobalt));
  box-shadow: 0 0.0625rem 0 rgba(255, 255, 255, 0.35) inset, 0 0.3125rem 0 var(--kobalt-diep), 0 0.875rem 1.5rem -0.5rem rgba(29, 63, 191, 0.55);
  transition: transform 0.35s var(--veer), box-shadow 0.2s, opacity 0.2s;
}
.knop:active { transform: translateY(0.25rem) scale(0.98); box-shadow: 0 0.0625rem 0 var(--kobalt-diep); }
.knop:disabled { opacity: 0.35; }
.knop--stil { color: var(--kobalt); background: var(--wit); box-shadow: 0 0.3125rem 0 var(--lucht); }
.knop--terra { color: var(--terra); background: var(--terra-licht); box-shadow: none; }
.rondknop {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--wit); box-shadow: var(--schaduw); transition: transform 0.4s var(--veer);
}
.rondknop:active { transform: scale(0.86) rotate(-20deg); }
.rondknop svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--inkt); stroke-width: 2; stroke-linecap: round; }

/* Een tegel: tekening plus glans. Ongebakken is hij mat biscuit, gebakken glimt hij. */
.tegel { position: relative; display: block; aspect-ratio: 1; border-radius: 0.625rem; overflow: hidden; }
.tegel svg { width: 100%; height: 100%; }
.tegel--gebakken { --t-vlak: var(--wit); --t-lijn: var(--kobalt); --t-zacht: #8fa6ee; --t-accent: var(--geel);
  box-shadow: 0 0 0 0.0625rem rgba(19, 31, 77, 0.08), 0 0.75rem 1.25rem -0.625rem rgba(19, 31, 77, 0.45); }
.tegel--gebakken.tegel--nacht { --t-vlak: var(--kobalt); --t-lijn: var(--wit); }
.tegel--ruw { --t-vlak: var(--biscuit); --t-lijn: var(--biscuit-diep); --t-zacht: #dfd2b9; --t-accent: #dccdb0;
  box-shadow: 0 0 0 0.0625rem rgba(19, 31, 77, 0.05) inset; }
.tegel__glans { position: absolute; inset: 0; pointer-events: none; }
.tegel--gebakken .tegel__glans {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 68%, rgba(19, 31, 77, 0.12) 100%);
  box-shadow: 0 0.125rem 0 rgba(255, 255, 255, 0.7) inset, 0 -0.125rem 0 rgba(19, 31, 77, 0.1) inset;
}

/* Startscherm */
.hero__rij { display: flex; align-items: center; justify-content: space-between; }
.hero__dag { color: var(--inkt-zacht); font-weight: 600; font-size: 0.875rem; }
.hero__dag::first-letter { text-transform: uppercase; }
.hero__groet { font-family: var(--kop); font-weight: 800; font-size: 3.75rem; line-height: 0.95; letter-spacing: -0.04em; color: var(--kobalt); margin-top: 1rem; }
.hero__sub { margin-top: 0.625rem; color: var(--inkt-zacht); max-width: 19rem; }
.hero__stand { margin-top: 1.125rem; display: flex; align-items: center; gap: 0.875rem; font-size: 0.875rem; color: var(--inkt-zacht); }
.hero__stand strong { color: var(--inkt); }
.miniwand { display: grid; grid-template-columns: repeat(10, 0.5625rem); gap: 0.1875rem; padding: 0.3125rem; border-radius: 0.5rem; background: var(--voeg); flex: none; }
.miniwand i { aspect-ratio: 1; border-radius: 0.125rem; background: var(--biscuit-diep); opacity: 0.55; }
.miniwand i.is-klaar { background: var(--kobalt); opacity: 1; }

.bica {
  position: relative; display: block; width: 100%; margin-top: 1.5rem; padding: 1.25rem 7.5rem 1.25rem 1.25rem; text-align: left;
  border-radius: 1.75rem; color: var(--wit); overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, #3b62ea 0%, var(--kobalt) 48%, var(--kobalt-diep) 100%);
  box-shadow: 0 0.0625rem 0 rgba(255, 255, 255, 0.35) inset, var(--schaduw-hoog);
  transition: transform 0.45s var(--veer);
}
.bica:active { transform: scale(0.96); }
.bica::before { content: ''; position: absolute; right: -3.5rem; top: -3.5rem; width: 13rem; height: 13rem; border-radius: 50%; border: 1.75rem solid rgba(255, 255, 255, 0.07); }
.bica__etiket { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--geel); }
.bica__titel { display: block; margin-top: 0.25rem; font-family: var(--kop); font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.02em; }
.bica__sub { display: block; margin-top: 0.375rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); }
.bica__start {
  display: inline-block; margin-top: 1rem; padding: 0.5rem 1.125rem; border-radius: 2rem;
  font-family: var(--kop); font-weight: 700; color: var(--inkt); background: var(--geel); box-shadow: 0 0.1875rem 0 var(--geel-diep);
}
.kopje { position: absolute; right: 0.25rem; bottom: 0.5rem; width: 7.5rem; animation: zweef 4.5s ease-in-out infinite; filter: drop-shadow(0 0.75rem 0.75rem rgba(8, 16, 60, 0.45)); }
.stoom { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 30; animation: stoom 2.6s linear infinite; }
.stoom--2 { animation-delay: -0.9s; }
.stoom--3 { animation-delay: -1.7s; }
@keyframes stoom { from { stroke-dashoffset: 0; opacity: 0; } 30% { opacity: 1; } to { stroke-dashoffset: 38; opacity: 0; } }
@keyframes zweef { 50% { transform: translateY(-0.4rem) rotate(-3deg); } }

.wand { margin-top: 2.25rem; }
.thema { margin-bottom: 2rem; }
.thema h2 { font-family: var(--kop); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.1; }
.thema p { color: var(--inkt-zacht); font-size: 0.875rem; }
.thema__tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem; border-radius: 1.125rem; background: var(--voeg); }
.lestegel { text-align: left; transition: transform 0.45s var(--veer); }
.lestegel:active { transform: scale(0.92); }
.lestegel__titel { display: block; margin: 0.5rem 0.25rem 0; font-family: var(--kop); font-weight: 700; line-height: 1.2; }
.lestegel__stand { display: block; margin: 0 0.25rem 0.375rem; font-size: 0.8125rem; color: var(--inkt-zacht); }
/* De volgende les: de tegel wiebelt zacht en heeft een gele rand */
.lestegel.is-volgende .tegel { box-shadow: 0 0 0 0.1875rem var(--geel), 0 0.875rem 1.5rem -0.625rem rgba(224, 157, 0, 0.7); animation: wiebel 3.2s ease-in-out infinite; }
@keyframes wiebel { 50% { transform: translateY(-0.25rem) rotate(-1.5deg); } }

/* Tabbalk: zwevende pil onderaan */
#tabs {
  position: absolute; left: 1rem; right: 1rem; bottom: calc(env(safe-area-inset-bottom) + 0.875rem); z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; padding: 0.375rem; border-radius: 1.75rem;
  background: rgba(255, 253, 248, 0.82); -webkit-backdrop-filter: blur(1.25rem) saturate(1.6); backdrop-filter: blur(1.25rem) saturate(1.6);
  box-shadow: 0 0.0625rem 0 #fff inset, 0 1.25rem 2.5rem -0.75rem rgba(19, 31, 77, 0.45);
}
.tab { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.75rem 0.25rem; border-radius: 1.375rem;
  font-weight: 600; font-size: 0.8125rem; color: var(--inkt-zacht); transition: background 0.3s, color 0.3s, transform 0.4s var(--veer); }
.tab svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.5s var(--veer); }
.tab:active { transform: scale(0.9); }
.tab.is-actief { background: var(--kobalt); color: var(--wit); }
.tab.is-actief svg { transform: scale(1.15) rotate(-6deg); }

/* Opfrissen en zakboekje */
.paginakop h1 { font-family: var(--kop); font-weight: 800; font-size: 2.75rem; letter-spacing: -0.04em; line-height: 1; color: var(--kobalt); margin-top: 1rem; }
.paginakop p { margin-top: 0.625rem; color: var(--inkt-zacht); }
.teller { margin-top: 1.5rem; padding: 1.5rem; border-radius: 1.75rem; background: var(--wit); box-shadow: var(--schaduw); display: flex; align-items: baseline; gap: 0.75rem; }
.teller strong { font-family: var(--kop); font-weight: 800; font-size: 4.5rem; line-height: 0.9; letter-spacing: -0.04em; color: var(--kobalt); }
.teller span { color: var(--inkt-zacht); font-weight: 600; }
.staven { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.staaf { display: grid; grid-template-columns: 6rem 1fr 2rem; align-items: center; gap: 0.75rem; font-size: 0.875rem; font-weight: 600; }
.staaf strong { text-align: right; }
.staaf__baan { height: 0.875rem; border-radius: 1rem; background: var(--voeg); overflow: hidden; }
.staaf__vul { height: 100%; width: calc(var(--deel) * 100%); min-width: 0.875rem; border-radius: 1rem; background: var(--kobalt); transform-origin: left; animation: groei 0.9s var(--veer) both; animation-delay: calc(var(--i) * 0.1s + 0.25s); }
.staaf:nth-child(2) .staaf__vul { background: var(--geel); }
.staaf:nth-child(3) .staaf__vul { background: var(--olijf); }
@keyframes groei { from { transform: scaleX(0); } }
.paginavoet { margin-top: 1.75rem; display: grid; gap: 1rem; }
.leeg { color: var(--inkt-zacht); }

.zoek { width: 100%; margin-top: 1.25rem; padding: 0.875rem 1.125rem; border: 0; border-radius: 1.125rem; background: var(--wit); box-shadow: var(--schaduw); outline: none; }
.zoek:focus { box-shadow: 0 0 0 0.1875rem var(--kobalt); }
.boekthema { margin-top: 1.5rem; }
.boekthema h2 { font-family: var(--kop); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.zin { display: block; width: 100%; text-align: left; padding: 0.75rem 1rem; margin-bottom: 0.375rem; border-radius: 0.875rem; background: var(--wit); transition: transform 0.4s var(--veer), background 0.3s; }
.zin:active { transform: scale(0.97); }
.zin b { display: block; font-family: var(--kop); font-size: 1.0625rem; }
.zin span { display: block; color: var(--inkt-zacht); font-size: 0.875rem; }
.zin em { display: none; margin-top: 0.375rem; font-size: 0.8125rem; font-style: normal; color: var(--kobalt); font-weight: 600; }
.zin.is-open { background: var(--lucht); }
.zin.is-open em { display: block; animation: omhoog 0.45s var(--veer) both; }

/* Instellingen: blad dat van onderen omhoog komt */
.blad { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; background: rgba(19, 31, 77, 0); transition: background 0.35s; }
.blad.is-open { background: rgba(19, 31, 77, 0.45); }
.blad__paneel { width: 100%; padding: 1.5rem 1.25rem calc(env(safe-area-inset-bottom) + 1.5rem); border-radius: 1.75rem 1.75rem 0 0; background: var(--kalk); display: grid; gap: 0.875rem; transform: translateY(105%); transition: transform 0.6s var(--veer); }
.blad.is-open .blad__paneel { transform: none; }
.blad__paneel h2 { font-family: var(--kop); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.03em; }
.blad__noot { font-size: 0.8125rem; color: var(--inkt-zacht); }
.schakel { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem; border-radius: 1rem; background: var(--wit); font-weight: 600; }
.schakel input { position: absolute; opacity: 0; }
.schakel i { width: 3rem; height: 1.75rem; border-radius: 1rem; background: var(--biscuit-diep); position: relative; transition: background 0.3s; }
.schakel i::after { content: ''; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--wit); box-shadow: 0 0.125rem 0.25rem rgba(19, 31, 77, 0.3); transition: transform 0.45s var(--veer); }
.schakel input:checked + i { background: var(--kobalt); }
.schakel input:checked + i::after { transform: translateX(1.25rem); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; }
}