/* Academy — voorleesspeler (v3.22.0, 2026-07-26)
   Eigen bestand omdat twee omgevingen hem laden: de ingelogde app (academy.css) en de
   publieke cursus-speler (cursus.css). In één van beide zetten betekent dat de speler in
   de andere ongestyled is — precies het soort drift dat de SSML-bouwers eerder overkwam.
   Alle kleuren via variabelen met een fallback, want cursus.css kent een andere set. */
/* ---------- Voorleesspeler (v3.22.0, 2026-07-26) ----------
   Vervangt het kale <audio controls>: springen per 15s, tempo, tijd en een balk die je
   kunt slepen. Carlo: "ik zie alleen het kleine playertje". */
.asp{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.55rem .75rem; border:1px solid var(--mist,#e6e0d8); border-radius:12px;
  background:var(--paper-2,#faf8f5); flex:1 1 320px; min-width:260px;
}
.asp.speelt{ border-color:color-mix(in srgb, var(--bronze,#b1783c) 45%, var(--mist,#e6e0d8)); }
.asp-lab{ font-size:.8rem; font-weight:600; color:var(--stone,#5a6577); white-space:nowrap; }
.asp-bediening{ display:flex; align-items:center; gap:.25rem; }
.asp-knop{
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  width:2rem; height:2rem; padding:0; border:none; border-radius:50%;
  background:transparent; color:var(--navy,#1c2b3a); cursor:pointer; font:inherit;
  font-size:.8rem; transition:background .13s;
}
.asp-knop:hover{ background:var(--mist,#e6e0d8); }
/* De "15" zit IN de SVG (als <text> in dezelfde boog), niet als los element erover:
   dat laatste viel onzichtbaar weg achter de pijl. */
.asp-knop svg{ display:block; }
.asp-speel{
  width:2.4rem; height:2.4rem; background:var(--navy,#1c2b3a);
  color:var(--paper,#fff); font-size:.9rem;
}
.asp-speel:hover{ background:var(--bronze,#b1783c); }
.asp-baan{ display:flex; align-items:center; gap:.55rem; flex:1 1 160px; min-width:140px; }
.asp-zoek{
  -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:4px; margin:0;
  background:linear-gradient(to right, var(--bronze,#b1783c) var(--asp-pct,0%),
             var(--mist,#e6e0d8) var(--asp-pct,0%));
  cursor:pointer;
}
.asp-zoek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%;
  background:var(--navy,#1c2b3a); border:2px solid var(--paper,#fff); cursor:pointer;
}
.asp-zoek::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:var(--navy,#1c2b3a);
  border:2px solid var(--paper,#fff); cursor:pointer;
}
.asp-tijd{
  font-size:.74rem; color:var(--stone,#5a6577); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.asp-tempo{
  font:inherit; font-size:.74rem; font-weight:700; cursor:pointer; white-space:nowrap;
  padding:.2rem .5rem; border:1px solid var(--mist,#e6e0d8); border-radius:20px;
  background:transparent; color:var(--navy,#1c2b3a); min-width:2.9rem;
}
.asp-tempo:hover{ border-color:var(--bronze,#b1783c); color:var(--bronze,#b1783c); }
.asp-dl{ color:var(--stone,#5a6577); font-size:.85rem; text-decoration:none; padding:.2rem; }
.asp-dl:hover{ color:var(--bronze,#b1783c); }
@media(max-width:520px){
  .asp{ gap:.45rem; }
  .asp-lab{ flex:1 1 100%; }
  .asp-baan{ flex:1 1 100%; order:5; }
}

/* Keten-modus (handsfree): titel + positie in de keten, en knoppen voor les-overgang. */
.asp-nr{
  display:inline-block; font-size:.68rem; font-weight:700; color:var(--bronze,#b1783c);
  margin-right:.5rem; font-variant-numeric:tabular-nums;
}
.asp-titel{ font-weight:600; }
.asp-vorigeles, .asp-volgendeles{ opacity:.75; }
.asp-vorigeles:hover, .asp-volgendeles:hover{ opacity:1; }