/* Trial Reels: het voorbeeld van de tekst in beeld, op de maten van de Trial Reels Starter (engine/scripts/tekstblok.py,
   op een beeld van 1080 bij 1920): hooguit 860 breed, en binnen de veilige zone van Instagram (bovenin 14 procent,
   onderin 35 procent vrij): boven begint op 270, het midden ligt op 760, onder eindigt op 1250.
   Het beeld zelf is dat van de video-editor (.beeld in style.css). */
.tr-tekst { position: absolute; z-index: 1; left: 10.2%; right: 10.2%; text-align: center; color: var(--tr-tekst);
  font-family: var(--tr-font), var(--sans); font-weight: 400; font-synthesis: none; /* het bestand is zelf al vet */
  font-size: 18px; font-size: calc(var(--tr-fs) / 10.8 * 1cqw); line-height: 1.26; overflow-wrap: anywhere;
  font-kerning: none; /* de starter zet geen kerning (tekstblok.py, BASIS_OPMAAK): zo breekt het voorbeeld op dezelfde plek af */ }
.beeld[data-trplek="boven"] .tr-tekst { top: 14.06%; }
.beeld[data-trplek="midden"] .tr-tekst { top: 39.58%; transform: translateY(-50%); }
.beeld[data-trplek="onder"] .tr-tekst { bottom: 34.9%; }
/* Blokje: per regel een vak met ronde hoeken, 0,42 keer de letter breder en 0,3 keer hoger dan de regel. Door clone telt de
   zijruimte van het vak per regel mee bij het afbreken, net als in de starter (860 min twee keer 0,42); de ruimte boven en
   onder laat het vak precies op de rand van de zone beginnen. */
.beeld[data-trvorm="blokje"] .tr-tekst { padding: 0.3em 0; }
.beeld[data-trvorm="blokje"] .tr-tekst span { padding: 0.3em 0.42em; border-radius: 0.2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* De achterste laag tekent alleen de blokjes, de voorste alleen de letters (zie teken() in trialreels.js) */
.beeld[data-trvorm="blokje"] .tr-achter span { background: var(--tr-vlak); color: transparent; }
.beeld[data-trvorm="rand"] .tr-achter { display: none; }
/* Rand: 0,08 keer de letter rondom. Een rand in CSS ligt half binnen de letter, dus twee keer zo dik getekend; hij telt in
   de opmaak niet mee, dus de binnenruimte houdt hem vrij, zoals de starter de rand meetelt bij het afbreken. */
.beeld[data-trvorm="rand"] .tr-tekst { padding: 0 0.08em; line-height: 1.2; }
.beeld[data-trvorm="rand"] .tr-tekst span { -webkit-text-stroke: calc(var(--tr-fs) * 0.16 / 10.8 * 1cqw) var(--tr-vlak); paint-order: stroke fill; }
#trialBlok .stepper output { min-width: 3ch; }
#trialBlok .stepper button.op-grens { opacity: 0.35; cursor: default; }
#trialBlok #trVenster:empty { display: none; }
/* zoals bij de video-editor en de Thumbnail Maker: past de keuze niet naast zijn label, dan komt hij eronder in plaats van
   over de tekst heen ("LetterAnton" op een smal scherm) */
#trialBlok .rij.keuze .rij-tekst { flex: 1 0 auto; max-width: 100%; }