/* Van schoolplein naar het scherm – huisstijl Digital Awareness (vastgesteld 5 november 2026)
   Middernachtblauw #172B3A (basis), digitaal teal #00A6A6 (verbinding, interactie, stemmen),
   insight lime #C8F36B (alleen het aha-moment en inzichten), lichtgrijs #F1F4F2 (rustige achtergrond),
   signaaloranje #F0A45D (spaarzaam: aandacht en keuzemomenten).
   Regels: lime verschijnt voor ouders pas na het sluiten van de stemming (aha-moment), nooit eerder.
   Teal, lime en oranje nooit als tekst op een licht vlak; daarvoor zijn er donkere tekstvarianten (minimaal 4,5:1).
   Typografie (vaste richtlijn, november 2026): een lettertypefamilie, Manrope, in de hele app.
     400 Regular  - uitleg en ondersteunende teksten        (--w-tekst)
     500 Medium   - navigatie, knoppen, interface-elementen  (--w-ui)
     600 Semibold - vragen, spreekkaarten, belangrijke info  (--w-vraag)
     700 Bold     - titels, stemresultaten, percentages      (--w-titel)
   Accenten (labels, sessiecode, kernmomenten) gebruiken ook Bold 700. Geen andere gewichten.
   Manrope staat op onze eigen server (geen externe diensten), SIL Open Font License (zie /fonts). */
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope.woff') format('woff'); font-weight: 200 800; font-style: normal; font-display: swap; }
/* Arabisch schrift (0.7-test): Manrope heeft geen Arabische tekens. Noto Sans Arabic vult alleen die tekens aan
   en wordt door unicode-range pas geladen als er Arabische tekst op het scherm staat. */
@font-face { font-family: 'Noto Sans Arabic'; src: url('/fonts/noto-sans-arabic.woff') format('woff'); font-weight: 400 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

:root {
  /* Digital Awareness */
  --nacht: #172B3A;           /* middernachtblauw: basis, tekst, beamer */
  --nacht-2: #21394B;
  --nacht-3: #34505F;
  --grijs-nacht: #A9BCC7;     /* ondersteunende tekst op middernachtblauw (7,4:1) */
  --teal: #00A6A6;            /* vlak (met middernachtblauwe tekst) of accent op middernachtblauw */
  --teal-donker: #006B6B;     /* teal als tekst op licht */
  --teal-zacht: #DDF2F1;
  --lime: #C8F36B;            /* alleen aha-moment en inzicht */
  --lime-tekst: #4F6B12;
  --lime-zacht: #EEF9D6;
  --signaal: #F0A45D;         /* spaarzaam: aandacht en keuzemomenten */
  --signaal-donker: #8A4A0E;
  --signaal-zacht: #FCEEDF;

  /* Werkkleuren */
  --bg: #F1F4F2;              /* lichtgrijs */
  --vlak: #ffffff;
  --vlak-2: #E4EAE7;
  --lijn: #D3DDD8;
  --tekst: #172B3A;
  --tekst-2: #3E5563;
  --tekst-3: #556B77;
  --blauw-zacht: #E6ECEF;
  --schaduw: 0 1px 2px rgba(23, 43, 58, .06), 0 6px 18px rgba(23, 43, 58, .07);
  --radius: 20px;
  --font: 'Manrope', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --w-tekst: 400;
  --w-ui: 500;
  --w-vraag: 600;
  --w-titel: 700;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-weight: var(--w-tekst);
  background: var(--bg);
  color: var(--tekst);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-weight: var(--w-titel); letter-spacing: -.015em; }
body.zacht { background: var(--bg); }
button, input, select, textarea { font: inherit; }
a { color: var(--teal-donker); }
:focus-visible { outline: 3px solid var(--teal-donker); outline-offset: 2px; }
.verborgen { display: none !important; }

/* logo */
.logo { display: block; height: 40px; width: auto; }
.merkregel { display: flex; align-items: center; gap: 14px; }
.merkregel .prog { font-weight: var(--w-titel); color: var(--tekst-2); line-height: 1.2; }

/* knoppen: groot, afgerond, duidelijk */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; border-radius: 999px; padding: .85em 1.5em; min-height: 48px;
  font-weight: var(--w-ui); cursor: pointer; text-decoration: none;
  background: var(--vlak); color: var(--tekst); box-shadow: inset 0 0 0 2px var(--lijn);
  transition: transform .08s ease, background .2s ease, box-shadow .2s;
}
.knop:hover { box-shadow: inset 0 0 0 2px var(--teal); }
.knop:active { transform: scale(.98); }
.knop:disabled { opacity: .45; cursor: not-allowed; }
.knop.primair, .knop.teal { background: var(--teal); color: var(--nacht); box-shadow: none; }
.knop.primair:hover, .knop.teal:hover { background: #0bb8b8; }
.knop.accent, .knop.signaal { background: var(--signaal); color: var(--nacht); box-shadow: none; }
.knop.lime { background: var(--lime); color: var(--nacht); box-shadow: none; }
.knop.nacht { background: var(--nacht); color: #fff; box-shadow: none; }
.knop.nacht:hover { background: var(--nacht-2); }
.knop.rand { background: transparent; }
.knop.klein { padding: .5em 1em; min-height: 38px; font-size: .92rem; }

.kaart { background: var(--vlak); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--schaduw); }
.label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); font-weight: var(--w-ui); }
.icoon { width: 1.4em; height: 1.4em; flex: none; }

/* resultatenbalken: neutraal, alle antwoorden dezelfde kleur, vaste volgorde, geen winnaar */
.balken { display: grid; gap: .8rem; }
.balk { display: grid; grid-template-columns: 2.2em 1fr 4.4em; align-items: end; gap: .8rem; }
.balk .letter { font-weight: var(--w-titel); font-size: .9em; color: #fff; background: var(--nacht); border-radius: 10px; width: 2.2em; height: 2.2em; display: grid; place-items: center; }
.balk .mid { min-width: 0; }
.balk .tekst { display: block; font-weight: var(--w-vraag); margin-bottom: .35em; }
.balk .spoor { position: relative; height: 1.1em; background: var(--vlak-2); border-radius: 999px; overflow: hidden; }
.balk .vulling { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--teal); border-radius: 999px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.balk .pct { font-weight: var(--w-titel); font-variant-numeric: tabular-nums; text-align: right; line-height: 1; }
.balk .aantal { display: block; white-space: nowrap; font-weight: var(--w-tekst); font-size: .7em; color: var(--tekst-3); margin-top: .25em; }

.melding { background: var(--blauw-zacht); border-radius: 14px; padding: .8rem 1rem; color: var(--tekst-2); }
.testlint { background: var(--signaal); color: var(--nacht); font-weight: var(--w-titel); font-size: .8rem; letter-spacing: .06em; text-align: center; padding: 4px 8px; }

@keyframes opkomen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.opkomen { animation: opkomen .5s ease both; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }