/* ceeme-toolvlak.css — HET WERKVLAK VAN EEN GRATIS TOOL.
   ================================================================================================
   Taak A11. Tot 9 augustus zat het werkvlak van elke gratis tool als losse markup ín <main>, met de
   logica als inline <script> eronder — in drie talen apart, met de Nederlandse teksten in de
   Franse en de Engelse code. Eenentwintig kopieën van dezelfde tool, en elk van die kopieën droeg
   zijn eigen kleuren mee: #9BE870, #EC4899, #F59E0B, #3D7A00. Vier tinten die in geen enkel palet
   van deze site staan, op de pagina's die we als bewijs van vakmanschap aanbieden.

   Wat hier staat is dezelfde tool in de ceeme-vorm: één stylesheet, één script, één component per
   taal gevuld met labels uit lib/toolvlak.js. Het voorvoegsel is `tv-` zodat niets van de
   paginavorm (hw-) of het omhulsel (kp-, vt-) eraan kan raken.

   ── De regel die hier het scherpst geldt ─────────────────────────────────────────────────────
   Eén accent, en violet belicht maar duidt nooit iets aan. Een oordeel wordt daarom niet met kleur
   gegeven maar met een WOORD — "toegelaten", "geblokkeerd", "ontbreekt" — met een zachte tint
   eronder die uit PALET komt. Dat is niet alleen palettrouw: een pil die alleen een kleur draagt,
   leest een schermlezer als niets en een crawler als niets. */

.cmp-tv {
  --tv-line: #E2E2D8;
  --tv-ink: #17170F;
  --tv-soft: #3A3A31;
  --tv-muted: #83837A;
  --tv-creme: #F6F2E9;
  --tv-diep: #EEE9DF;
  --tv-amber: #C6892B;
  --tv-amberdiep: #A8721F;
  margin: 0 0 34px;
  display: grid; gap: 16px;
}

/* ── Het paneel ───────────────────────────────────────────────────────────────────────────── */
.tv-paneel {
  background: #fff; border: 1px solid var(--tv-line); border-radius: 14px;
  padding: clamp(18px, 2.4vw, 26px);
}
.tv-kop {
  margin: 0 0 14px;
  font: 700 10.5px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tv-muted);
}
.tv-veld { display: block; margin: 0 0 14px }
.tv-veld > span {
  display: block; margin-bottom: 6px;
  font: 600 12px/1.4 "Manrope", system-ui, sans-serif; color: var(--tv-soft);
}
.tv-veld input, .tv-veld textarea, .tv-veld select {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--tv-line); border-radius: 9px;
  padding: 10px 12px; font: 400 14.5px/1.5 "Manrope", system-ui, sans-serif;
  background: var(--tv-creme); color: var(--tv-ink);
}
.tv-veld textarea { font-family: "Space Mono", ui-monospace, monospace; font-size: 13px }
.tv-veld input:focus, .tv-veld textarea:focus { outline: 2px solid var(--tv-amber); outline-offset: 1px }

.tv-knop {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tv-ink); color: var(--tv-creme);
  border: 0; border-radius: 999px; cursor: pointer;
  font: 700 14px/1 "Manrope", system-ui, sans-serif; padding: 12px 24px;
}
.tv-knop:hover { background: var(--tv-amberdiep) }
.tv-knop:disabled { opacity: .5; cursor: default }
.tv-knop2 {
  background: transparent; color: var(--tv-ink);
  border: 1px solid rgba(23, 23, 15, .22);
  border-radius: 999px; cursor: pointer;
  font: 600 12.5px/1 "Manrope", system-ui, sans-serif; padding: 8px 16px;
}
.tv-knop2:hover { border-color: var(--tv-amber); color: var(--tv-amberdiep) }
.tv-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }

/* ── De uitkomst ──────────────────────────────────────────────────────────────────────────── */
/* ── Verbergen doet het SCRIPT, niet de stylesheet ────────────────────────────────────────────
   Hier stond `display:none` in de basis, en scripts/test-zonderjs.mjs viel daarop — terecht, en het
   is exact dezelfde fout als `.rv{opacity:0}` in ceeme-2026.css die de halve homepagina zonder
   JavaScript onzichtbaar maakte.

   De regel die die test afdwingt: niets wordt verborgen tenzij JavaScript het zelf aanzet. Daarom
   hangt het verbergen aan `.tv-klaar`, en die klasse zet public/ceeme-toolvlak.js op het element
   zodra hij een werkvlak overneemt. Zonder JavaScript staat er dus niets verborgen — en er staat
   ook niets, want deze blokken zijn leeg tot het script ze vult. */
.tv-fout {
  margin: 12px 0 0; padding: 10px 13px;
  border-left: 3px solid var(--tv-amberdiep); background: var(--tv-diep);
  font-size: 13.5px; line-height: 1.5; color: var(--tv-soft);
}
.tv-uit { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--tv-line) }
.tv-klaar .tv-fout, .tv-klaar .tv-uit { display: none }
.tv-klaar .tv-uit.tv-aan, .tv-klaar .tv-fout.tv-aan { display: block }
.tv-meta { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--tv-muted) }

.tv-code {
  margin: 0; padding: 16px; border-radius: 11px;
  background: var(--tv-ink); color: var(--tv-creme);
  font: 400 12.5px/1.75 "Space Mono", ui-monospace, monospace;
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto;
}
.tv-code .tv-c-op { color: #C6892B }
.tv-code .tv-c-uit { color: rgba(246, 242, 233, .45) }
.tv-code .tv-c-com { color: rgba(246, 242, 233, .38) }

.tv-tabel { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px }
.tv-tabel th, .tv-tabel td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--tv-line);
  vertical-align: top; line-height: 1.5;
}
.tv-tabel th { font-weight: 700; color: var(--tv-soft); font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em }

/* Een oordeel is een WOORD met een zachte tint eronder, nooit een kleur alleen. */
.tv-pil {
  display: inline-block; border-radius: 999px; padding: 2px 9px;
  font: 700 11px/1.6 "Manrope", system-ui, sans-serif; white-space: nowrap;
}
.tv-ja { background: rgba(198, 137, 43, .16); color: #A8721F }
.tv-half { background: rgba(131, 131, 122, .16); color: #3A3A31 }
.tv-nee { background: rgba(23, 23, 15, .08); color: #17170F }

/* ── De rijen van een lijst met crawlers of signalen ──────────────────────────────────────── */
.tv-rij {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--tv-line);
}
.tv-rij > span:first-child { flex: 1; min-width: 0 }
.tv-rij b { display: block; font: 600 13.5px/1.4 "Space Mono", ui-monospace, monospace; color: var(--tv-ink) }
.tv-rij i { display: block; font-style: normal; font-size: 11.5px; color: var(--tv-muted); line-height: 1.4 }
.tv-groep {
  margin: 16px 0 2px;
  font: 700 10.5px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tv-muted);
}
.tv-lijst { max-height: 340px; overflow-y: auto; padding-right: 4px }

/* ── De stand: hoeveel van hoeveel ────────────────────────────────────────────────────────── */
.tv-stand {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  border: 1px solid var(--tv-line); border-left: 3px solid var(--tv-amber);
  border-radius: 11px; padding: 12px 14px; background: var(--tv-diep);
}
.tv-stand b { display: block; font: 800 15px/1.25 "Manrope", system-ui, sans-serif; color: var(--tv-ink) }
.tv-stand span { display: block; font-size: 12.5px; color: var(--tv-soft); line-height: 1.45 }
.tv-cijfer {
  width: 42px; height: 42px; border-radius: 999px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--tv-ink); color: var(--tv-creme);
  font: 800 15px/1 "Manrope", system-ui, sans-serif;
}

/* ── De zelftest ──────────────────────────────────────────────────────────────────────────── */
.tv-vraag { border: 1px solid var(--tv-line); border-radius: 11px; padding: 14px; margin-bottom: 10px }
.tv-vraag p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--tv-ink) }
.tv-vraag .tv-knoppen button { flex: 1 }
.tv-jn {
  border: 1px solid var(--tv-line); background: #fff; border-radius: 9px;
  padding: 9px 12px; cursor: pointer;
  font: 600 13.5px/1 "Manrope", system-ui, sans-serif; color: var(--tv-ink);
}
.tv-jn:hover { border-color: var(--tv-ink) }
.tv-jn[aria-pressed="true"] { background: var(--tv-ink); color: var(--tv-creme); border-color: var(--tv-ink) }
.tv-balk { height: 5px; background: var(--tv-diep); border-radius: 999px; overflow: hidden; margin: 10px 0 16px }
.tv-balk i { display: block; height: 100%; width: 0; background: var(--tv-amber); transition: width 260ms ease }

/* ── Het donkere leesvenster van de inspector ─────────────────────────────────────────────── */
.tv-venster {
  background: var(--tv-ink); color: rgba(246, 242, 233, .8);
  border-radius: 12px; padding: 18px;
  font: 400 12.5px/1.7 "Space Mono", ui-monospace, monospace;
  max-height: 520px; overflow: auto; word-break: break-word;
}
.tv-venster h4 {
  margin: 16px 0 4px;
  font: 700 10.5px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 242, 233, .42);
}
.tv-venster h4:first-child { margin-top: 0 }
.tv-venster b { color: var(--tv-creme) }
.tv-venster em { font-style: normal; color: var(--tv-amber) }

@media (prefers-reduced-motion: reduce) { .tv-balk i { transition: none } }