/* ================================================================
   Hulpklassen — voorheen style="..." in de HTML en de schermcode. De CSP staat geen inline
   opmaak toe (style-src 'self'). Ze hebben !important omdat een style-attribuut ook altijd
   voorging; zo blijft het beeld exact gelijk. Niet bij .verborgen (JS toont met
   el.style.display) en niet bij de kleur van meldingsteksten (JS zet el.style.color).
   Breedtes van balken: data-breedte="42", zie volgLevend() in scherm/html.js.
   ================================================================ */
.verborgen{display:none;}
.flex-1{flex:1 !important;}
.w-auto{width:auto !important;}
.w-80{width:80px !important;}
.w-100{width:100px !important;}
.min-110{min-width:110px !important;}
.max-420{max-width:420px !important;}
.rij-8{display:flex !important;gap:8px !important;}
.rij-10{display:flex !important;gap:10px !important;}
.rij-midden{align-items:center !important;}
.rij-wrap{flex-wrap:wrap !important;}
.rij-tussen{display:flex !important;justify-content:space-between !important;gap:8px !important;align-items:baseline !important;}
.pre-wrap{white-space:pre-wrap !important;}
.tekst-dim{color:var(--text-dim) !important;}
.tekst-gewoon{color:var(--text) !important;}
.knop-goud{border-color:var(--gold) !important;color:var(--gold) !important;}
.knop-rood{border-color:var(--red) !important;color:var(--red) !important;}
.knop-groen{border-color:var(--green) !important;color:var(--green) !important;}
.rand-goud{border-color:var(--gold) !important;}
.rand-groen{border-color:var(--green) !important;}
.rand-streep{border-style:dashed !important;}
.knop-auto{width:auto !important;padding:6px 14px !important;}
.knop-klein{width:auto !important;padding:4px 10px !important;}
.knop-mini{width:auto !important;padding:2px 8px !important;display:inline !important;}
.lijn-kaart{border:none !important;border-top:1px solid var(--card-border) !important;margin:16px 0 12px !important;}
.lijn-paneel{border:none !important;border-top:1px solid var(--border) !important;margin:16px 0 !important;}
.kop-klein{font-size:.85rem !important;color:var(--text) !important;margin-bottom:6px !important;}
.uitleg{font-size:.85rem !important;color:var(--text-dim) !important;margin:0 !important;}
.uitleg-klein{font-size:.78rem !important;color:var(--text-dim) !important;margin:0 !important;}
.uitleg-80{font-size:.8rem !important;color:var(--text-dim) !important;margin:0 !important;}
.klein-dim{font-size:.7rem !important;color:var(--text-dim) !important;font-weight:400 !important;}
.melding-klein{font-size:.78rem !important;color:var(--text-dim);margin:8px 0 0 !important;min-height:1em !important;}
.melding-ticket{font-size:.78rem !important;margin:10px 0 0 !important;min-height:1em !important;}
.fout-klein{font-size:.78rem !important;color:var(--red);margin:10px 0 0 !important;min-height:1em !important;}
.invoer{width:100% !important;padding:8px !important;background:var(--card-bg) !important;border:1px solid var(--card-border) !important;border-radius:6px !important;color:var(--text) !important;}
.invoer-ticket{width:100% !important;padding:8px !important;margin-bottom:8px !important;background:var(--card-bg) !important;border:1px solid var(--card-border) !important;border-radius:6px !important;color:var(--text) !important;font-family:inherit !important;font-size:.8rem !important;}
.rek-verticaal{resize:vertical !important;}
.ticket-voorbeeld{max-width:100% !important;max-height:160px !important;border:1px solid var(--card-border) !important;border-radius:6px !important;display:block !important;}
.quest-kop{display:flex !important;justify-content:space-between !important;font-size:.74rem !important;margin-bottom:3px !important;}
.quest-voet{display:flex !important;justify-content:space-between !important;align-items:center !important;font-size:.68rem !important;color:var(--text-dim) !important;}
.prestatie-regel{display:flex !important;gap:6px !important;padding:3px 0 !important;font-size:.7rem !important;}
.plot-progress-bar.balk-groen{background:var(--green) !important;}
/* Marges als laatste: ze winnen van de margin:0 van .uitleg hierboven. */
.my-2{margin:2px 0 !important;}
.mt-6{margin-top:6px !important;}
.mt-8{margin-top:8px !important;}
.mt-10{margin-top:10px !important;}
.mt-16{margin-top:16px !important;}
.mb-6{margin-bottom:6px !important;}
.mb-8{margin-bottom:8px !important;}
.mb-10{margin-bottom:10px !important;}
.mb-12{margin-bottom:12px !important;}
.mb-16{margin-bottom:16px !important;}