/* Partnerportaal Avondmakers, de ingelogde omgeving.
 *
 * Zwart, wit, grijs en het huisstijlgeel. Bewust EEN thema en geen
 * licht-donkerschakelaar: dit is een gekozen look, geen instelling. Daarom
 * staat er ook geen prefers-color-scheme-blok in dit bestand.
 *
 * Het geel is #ffc000 en haalt 11,6:1 contrast op de zwarte grond EN met
 * donkere tekst erop, dus het kan zowel als tekstkleur als als knopvulling.
 * Nagerekend, niet gegokt.
 *
 * Rood is hier GEEN accentkleur maar uitsluitend voor fouten, zodat een
 * foutmelding nooit lijkt op een knop.
 *
 * Geen webfonts: de beveiligingsheader staat geen externe bronnen toe, en een
 * stille terugval op een verkeerd font is erger dan een systeemfont.
 */

:root {
  color-scheme: dark;

  --grond: #101011;
  --vlak: #191a1b;
  --vlak-op: #212223;
  --lijn: #2b2c2e;
  --lijn-op: #3a3b3e;

  --tekst: #ffffff;
  --tekst-dun: #a5a5a9;
  --tekst-vaag: #8b8b91;

  /* Accent */
  --geel: #ffc000;
  --geel-zacht: #2a2205;

  /* Alleen voor fouten, meldingen en aandacht. Nooit voor knoppen. */
  --rood: #ff4757;
  --rood-zacht: #2a1517;
  --groen: #5fd08a;
  --groen-zacht: #12251a;
  --oranje: #f0803c;
  --oranje-zacht: #2a1a0f;

  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --schaduw: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -22px rgba(0, 0, 0, .9);

  /* Breedte van de leeskolom op pagina's met een formulier of een contract.
     De 40px is de zijkantruimte van .vel, zodat de inhoud precies 46rem breed
     wordt en niet 46rem min de marge. */
  --kolom: 46rem;
  --kolom-buiten: calc(46rem + 40px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---------- balk ---------- */

.balk {
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}

.balk-in {
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}

.merk {
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--tekst);
  text-decoration: none;
}
.merk span { color: var(--geel); font-weight: 700; }
.merk:hover span { filter: brightness(1.15); }
.merk:focus-visible { outline: 2px solid var(--geel); outline-offset: 3px; border-radius: 4px; }

.menu { display: flex; gap: 18px; flex: 1; }

.menu a {
  color: var(--tekst-dun);
  text-decoration: none;
  font-size: .94rem;
  font-weight: 600;
}

.menu a:hover, .menu a:focus-visible { color: var(--geel); }

.wie { font-size: .86rem; color: var(--tekst-vaag); font-family: var(--mono); }

/* ---------- vel ---------- */

.vel { max-width: 1000px; margin: 0 auto; padding: 32px 20px 72px; }

/* Smalle pagina's: kop en inhoud krijgen dezelfde breedte, en die staat midden
   op het scherm. Op een breed scherm stond een smalle kaart anders links in een
   blok van 1000px, waardoor het scheef leek te staan. */
.vel.smalle-kolom { max-width: var(--kolom-buiten); }
.balk.smalle-kolom .balk-in { max-width: var(--kolom-buiten); }

h1 {
  font-size: 1.72rem;
  line-height: 1.15;
  letter-spacing: -.028em;
  margin: 0 0 14px;
  text-wrap: balance;
}

h2 {
  font-size: 1.16rem;
  letter-spacing: -.016em;
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

h3 { font-size: 1.02rem; margin: 0; letter-spacing: -.01em; }

p { margin: 0 0 14px; }

a { color: var(--geel); text-underline-offset: 2px; }

.blok { margin: 0 0 40px; }

/* Een lijn boven elke sectietitel. Op een lange beheerpagina zie je zo in een
   oogopslag waar een onderdeel begint en waar het volgende overneemt. */
.blok > h2 {
  border-top: 1px solid var(--lijn);
  padding-top: 18px;
  margin-bottom: 16px;
}

/* De laatste kaart of tabel in een sectie brengt zijn eigen marge mee. Die telt
   op bij de marge van de sectie, waardoor het gat tussen twee onderdelen groter
   werd dan bedoeld. Daarom hier weg. */
.blok > *:last-child { margin-bottom: 0; }

.inleiding { color: var(--tekst-dun); font-size: 1.04rem; max-width: 62ch; }

.dun { color: var(--tekst-vaag); font-size: .9rem; }

.leeg {
  color: var(--tekst-dun);
  background: var(--vlak);
  border: 1px dashed var(--lijn-op);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 0;
  font-size: .95rem;
}

.teller {
  font-family: var(--mono);
  font-size: .74rem;
  background: var(--geel-zacht);
  color: var(--geel);
  border: 1px solid var(--geel);
  border-radius: 99px;
  padding: 1px 9px;
}

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--vlak-op);
  border: 1px solid var(--lijn);
  padding: .08em .4em;
  border-radius: 4px;
}

/* ---------- kaarten ---------- */

.kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 24px 26px;
  margin: 0 0 16px;
  box-shadow: var(--schaduw);
}

.kaart.smal { max-width: 46rem; }

.kaart-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 12px;
}

.baken {
  background: var(--geel-zacht);
  border-left: 3px solid var(--geel);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 0 0 32px;
}

.baken h2 { margin-bottom: 8px; }
.baken p:last-child { margin-bottom: 0; }

/* ---------- meldingen ---------- */

.melding {
  border-radius: 8px;
  padding: 13px 16px;
  margin: 0 0 20px;
  font-size: .95rem;
  border-left: 3px solid;
  color: var(--tekst);
}

.melding-ok { background: var(--groen-zacht); border-color: var(--groen); }
.melding-fout { background: var(--rood-zacht); border-color: var(--rood); }

/* Wel gelukt, maar kijk er nog even naar. Oranje, want rood is hier uitsluitend
   voor iets dat NIET is gebeurd. */
.melding-let { background: var(--oranje-zacht); border-color: var(--oranje); }

/* Een tussenkopje binnen een sectie, voor als er twee soorten dingen in staan. */
.tussenkop {
  margin: 30px 0 8px;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tekst-vaag);
}

.blok > .tussenkop:first-of-type { margin-top: 4px; }

/* De eigen korting van een creator. Geen geel kader: dat is voor de link die hij
   moet delen, en dit is juist de code die hij voor zichzelf houdt. */
.eigen-korting .link-groot { color: var(--tekst); }

/* ---------- formulieren ---------- */

label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tekst-dun);
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  font: inherit;
  /* 16px voorkomt dat iOS bij focus inzoomt */
  font-size: 16px;
  color: var(--tekst);
  background: var(--vlak-op);
  border: 1px solid var(--lijn-op);
  border-radius: 7px;
  padding: 10px 12px;
}

input::placeholder, textarea::placeholder { color: var(--tekst-vaag); }

textarea { resize: vertical; min-height: 6em; }

/* Een keuzelijst tekent de browser standaard licht, en dat valt uit de toon op
   de donkere grond. Alleen de kleuren zetten is genoeg, de rest doet de browser. */
select { appearance: none; background-image: none; }
select option { background: var(--vlak-op); color: var(--tekst); }

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--geel);
  outline-offset: 2px;
}

input.mis, textarea.mis { border-color: var(--rood); }

.veldfout {
  display: block;
  color: var(--rood);
  font-size: .86rem;
  margin-top: 5px;
}

.hint { display: block; color: var(--tekst-vaag); font-size: .84rem; margin-top: 5px; }
.hint.blok { margin: -4px 0 14px; }

.rij-2, .rij-3 { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }
.rij-3 { grid-template-columns: 1fr 1fr 1fr; }
.half { max-width: 20rem; }

form h2 {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--lijn);
}

form h2:first-of-type { margin-top: 8px; }

/* LET OP: dit label is een flexbox, dus ELK element erin wordt een eigen kolom.
   Staat er opmaak in de tekst, zoals een <strong>, dan hoort de hele tekst in
   een <span class="vink-tekst"> te zitten. Zonder dat valt de zin uiteen in
   losse kolommen naast elkaar. */
.vink label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  color: var(--tekst);
  font-size: .95rem;
}

.vink-tekst { flex: 1; }

.vink.klein label { font-size: .88rem; margin-bottom: 10px; }
.vink input { margin-top: .28em; flex: none; accent-color: var(--geel); }

/* Botvanger. Weg uit beeld, maar niet display:none, want dan vullen sommige
   bots het juist wel in. */
.verstopt {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- geboortedatum in drie velden ---------- */

/* Bewust drie velden in plaats van <input type="date">: dat veld kiest zijn
   formaat op basis van de taal van de BROWSER, dus een bezoeker met een Engelse
   browser zag daar mm/dd/jjjj. Nu staat dag-maand-jaar vast. */

.datum { margin: 0 0 14px; }

.datum-label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tekst-dun);
  margin-bottom: 5px;
}

.datum-velden {
  display: grid;
  /* Jaar krijgt meer ruimte, dat zijn vier cijfers. */
  grid-template-columns: 4.5rem 4.5rem 6rem;
  gap: 10px;
}

.datum-velden label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--tekst-vaag);
  margin-bottom: 3px;
}

.datum-velden input { text-align: center; }

/* ---------- knoppen ---------- */

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

.knop {
  display: inline-block;
  font: inherit;
  font-size: .96rem;
  font-weight: 700;
  color: var(--grond);
  background: var(--geel);
  border: 1px solid var(--geel);
  border-radius: 7px;
  padding: 10px 20px;
  cursor: pointer;
  text-decoration: none;
}

.knop:hover { filter: brightness(1.08); }
.knop:active { transform: translateY(1px); }

.knop-stil {
  background: transparent;
  color: var(--tekst);
  border-color: var(--lijn-op);
}

.knop-stil:hover { border-color: var(--geel); color: var(--geel); filter: none; }

.acties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  border-top: 1px solid var(--lijn);
  padding-top: 18px;
  margin-top: 4px;
}

.actie-form .knoppen { margin-top: 12px; }

/* Staat het bovenaan in een kaart, dan hoort er geen scheidingslijn boven:
   er is dan niets om van te scheiden. */
.kaart > .acties:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---------- gegevenslijst ---------- */

.gegevens {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 6px 18px;
  margin: 0 0 4px;
  font-size: .94rem;
}

.gegevens dt {
  color: var(--tekst-vaag);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-top: .22em;
}

.gegevens dd { margin: 0; color: var(--tekst-dun); }
.vrije-tekst { white-space: normal; }

.pil {
  display: inline-block;
  font-size: .82rem;
  background: var(--vlak-op);
  border: 1px solid var(--lijn-op);
  border-radius: 99px;
  padding: 2px 10px;
  margin: 0 6px 6px 0;
  /* Zonder dit breekt de tekst binnen de ronding en wordt de pil een blob. */
  white-space: nowrap;
}

/* Een pil die naar het account van de creator wijst. Blijft eruitzien als een
   pil, maar laat bij aanwijzen zien dat er iets te klikken valt. */
a.pil-link {
  text-decoration: none;
  cursor: pointer;
}

a.pil-link:hover {
  border-color: var(--geel);
  color: var(--geel);
}

a.pil-link:focus-visible {
  outline: 2px solid var(--geel);
  outline-offset: 2px;
}

.pil-let-op {
  background: var(--oranje-zacht);
  border-color: var(--oranje);
  color: var(--oranje);
}

/* ---------- vakjes ---------- */

.vakjes {
  display: grid;
  /* Drie op een rij. Met auto-fit stonden er vijf naast elkaar en viel de zesde
     er alleen onder, en dat leest rommelig. */
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 820px) {
  .vakjes { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- kop en navigatie van een partnerpagina ---------- */

.partnerkop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 16px;
}

.partnerkop h1 { margin-bottom: 2px; }
.partnerkop .dun { font-size: .9rem; margin: 0; }

.paginanav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Geen lijn eronder: de lijn boven de eerste sectietitel doet dat werk al,
     en twee lijnen zo kort na elkaar werd rommelig. */
  margin-bottom: 26px;
}

.paginanav a {
  border: 1px solid var(--lijn-op);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--tekst-dun);
  text-decoration: none;
  white-space: nowrap;
}

.paginanav a:hover { border-color: var(--geel); color: var(--geel); }
.paginanav .teller { margin-left: 4px; }

/* Twee blokken naast elkaar op een breed scherm. Onder de 900px onder elkaar,
   want dan wordt een tabel of een formulier te smal om te lezen. */
.tweekolom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
  align-items: start;
}

@media (max-width: 900px) {
  .tweekolom { grid-template-columns: 1fr; }
}

.kruimels {
  font-size: .86rem;
  color: var(--tekst-vaag);
  margin: 0 0 12px;
}

/* ---------- tijdvak kiezen ---------- */

.periode {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.periode-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tekst-vaag);
  margin-right: 2px;
}

.periode-knop {
  border: 1px solid var(--lijn-op);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--tekst-dun);
  text-decoration: none;
  white-space: nowrap;
}

.periode-knop:hover {
  border-color: var(--geel);
  color: var(--geel);
}

.periode-knop:focus-visible {
  outline: 2px solid var(--geel);
  outline-offset: 2px;
}

/* Het gekozen tijdvak. Geel gevuld, dus in een oogopslag te zien welke aan staat
   ook zonder de tekst te lezen. */
.periode-knop.nu {
  border-color: var(--geel);
  background: var(--geel-zacht);
  color: var(--geel);
}

/* De pijlen naast de vaste keuzes. Ze lopen in de maat die is gekozen: per
   maand, per kwartaal of per jaar. */
.tijdvak-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--lijn);
}

.tijdvak-pijl {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--lijn-op);
  border-radius: 999px;
  color: var(--tekst-dun);
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
}

.tijdvak-pijl:hover { border-color: var(--geel); color: var(--geel); }

/* Uitgezet: geen link, en dat moet je ook zien. */
.tijdvak-pijl.uit { opacity: .3; }

.tijdvak-knop { min-width: 9.5rem; text-align: center; text-transform: capitalize; }

@media (max-width: 560px) {
  .periode-knop { padding: 5px 10px; font-size: .8rem; }
  /* De pijlen naast de vaste keuzes. Ze lopen in de maat die is gekozen: per
   maand, per kwartaal of per jaar. */
.tijdvak-nav { margin-left: 0; padding-left: 0; border-left: 0; }
  .tijdvak-knop { min-width: 8rem; }
}

.vakje {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vakje.nadruk { border-color: var(--geel); background: var(--geel-zacht); }

.vakje-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-vaag);
}

.vakje-waarde {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.vakje.nadruk .vakje-waarde { color: var(--geel); }
.vakje-hint { font-size: .8rem; color: var(--tekst-vaag); }

/* ---------- tabellen ---------- */

.scroll {
  overflow-x: auto;
  border: 1px solid var(--lijn);
  border-radius: 10px;
  background: var(--vlak);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: .92rem;
}

th {
  text-align: left;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tekst-vaag);
  background: var(--vlak-op);
  padding: 11px 14px;
  border-bottom: 1px solid var(--lijn);
  white-space: nowrap;
}

td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
  color: var(--tekst-dun);
  /* Datums en getallen mogen nooit over twee regels vallen. De tabel scrollt
     al binnen zijn eigen kader, dus breedte is hier geen probleem. */
  white-space: nowrap;
}

/* Kolommen met vrije tekst mogen wel afbreken. */
td.loop { white-space: normal; min-width: 12rem; }

tr:last-child td { border-bottom: 0; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

td.knip {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- link uitlichten ---------- */

.label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-vaag);
  margin-bottom: 4px;
}

.link-groot {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--tekst);
  background: var(--vlak-op);
  border: 1px solid var(--lijn-op);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-wrap: anywhere;
  margin-bottom: 8px;
}

/* ---------- voet ---------- */

.voet {
  border-top: 1px solid var(--lijn);
  padding: 20px;
  text-align: center;
}

.voet p { margin: 0; font-size: .82rem; color: var(--tekst-vaag); }

/* ---------- stappen in het aanmeldproces ---------- */

.stappen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 46rem;
  /* Links uitgelijnd, NIET gecentreerd. De kaarten eronder staan ook links in
     .vel (max 1000px), dus met margin: auto zou deze balk een stuk opschuiven
     ten opzichte van de kaart eronder. */
  margin: 0 0 18px;
  padding: 0;
}

.stap {
  font-size: .82rem;
  color: var(--tekst-vaag);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 3px 12px;
}

.stap.nu {
  color: var(--geel);
  border-color: var(--geel);
  background: var(--geel-zacht);
}

.stap.klaar { color: var(--tekst-dun); }
.stap.klaar::before { content: "\2713\00a0"; color: var(--groen); }

/* ---------- de contracttekst ----------
 *
 * Iets kleiner en met wat meer regelafstand dan de rest van het portaal: dit is
 * een lap tekst die echt gelezen moet worden, geen scherm om iets in te vullen.
 */

.kaart.contract {
  max-width: 46rem;
  font-size: .92rem;
  line-height: 1.75;
}

.kaart.contract p { color: var(--tekst-dun); }

.ct-titel {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -.01em;
}

.ct-onder {
  margin: 2px 0 22px;
  color: var(--tekst) !important;
  font-weight: 600;
}

.kaart.contract h3 {
  margin: 26px 0 8px;
  font-size: .95rem;
  color: var(--geel);
  border-bottom: 1px solid var(--lijn);
  padding-bottom: 5px;
}

.ct-regel { margin: 14px 0 2px; color: var(--tekst) !important; font-weight: 600; }

.ct-lijst { margin: 0 0 14px; padding-left: 20px; color: var(--tekst-dun); }
.ct-lijst li { margin-bottom: 6px; }

.ct-tekening {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}

.ct-tekening > div {
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--vlak-op);
}

.ct-tekening p { margin: 0 0 2px; }
.ct-partij { color: var(--tekst) !important; font-weight: 600; margin-bottom: 6px !important; }

.contract-tekst {
  margin: 0;
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--tekst-dun);
}

.code-lang {
  font-family: var(--mono);
  font-size: .76rem;
  overflow-wrap: anywhere;
}

/* ---------- video's van de creator ---------- */

.video-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}

/* Even breed als de laatste kolom van de rijen eronder, met de tekst gecentreerd.
   Anders staat 'Geboost' naast de raketjes in plaats van erboven. */
.video-kop .kolomnaam {
  flex: none;
  width: 4.6rem;
  text-align: center;
  font-size: .8rem;
}

.video-rij {
  display: grid;
  grid-template-columns: 1fr auto 4.6rem;
  gap: 8px 14px;
  align-items: center;
  border-top: 1px solid var(--lijn);
  padding: 11px 2px;
}

.video-naam { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.video-naam .dun { font-size: .84rem; }

.video-boost { display: grid; place-items: center; }

.raket {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--geel);
}

.raket svg { width: 20px; height: 20px; display: block; }

.knop-klein {
  padding: 5px 13px;
  font-size: .84rem;
  border-radius: 8px;
  background: none;
  border: 1px solid var(--lijn-op);
  color: var(--tekst);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.knop-klein:hover { border-color: var(--geel); color: var(--geel); filter: none; }

/* Uitklapbaar formulier. Zonder javascript, want dat staat hier niet toe. */
.uitklap {
  border: 1px solid var(--lijn);
  border-radius: 10px;
  margin-top: 16px;
  background: var(--vlak);
}

.uitklap > summary {
  cursor: pointer;
  padding: 13px 16px;
  font-weight: 600;
  color: var(--geel);
  list-style: none;
}

.uitklap > summary::-webkit-details-marker { display: none; }
.uitklap > summary::before { content: "+ "; font-weight: 700; }
.uitklap[open] > summary::before { content: "\2212 "; }
.uitklap[open] > summary { border-bottom: 1px solid var(--lijn); }
.uitklap form { padding: 16px; }

/* De dichtgeklapte lijst met al beoordeelde video's. De kaarten erin hebben zelf
   al een rand, dus die krijgen alleen lucht om zich heen. */
.keuringen-af > .kaart { margin: 14px; }

/* Twee uitklappers onder elkaar in dezelfde kaart hoeven niet allebei een grote
   marge boven zich: dan valt de kaart uit elkaar. */
.uitklap + .uitklap { margin-top: 8px; }
.kaart > .uitklap { background: var(--vlak-op); }

.leeg + .hint { margin-top: 14px; }

.pil-wacht { border-color: var(--lijn-op); color: var(--tekst-dun); }
.pil-ok { border-color: var(--groen); color: var(--groen); background: var(--groen-zacht); }
.pil-let { border-color: var(--oranje); color: var(--oranje); background: var(--oranje-zacht); }

@media (max-width: 700px) {
  .video-rij { grid-template-columns: 1fr auto 2.4rem; }
  .video-kop .kolomnaam { width: 2.4rem; font-size: .72rem; }
  .raket { width: 24px; height: 24px; }
}

/* Witregel tussen de laatste regel van het overzicht en de regel eronder, zodat
   die niet aan de tabel vastplakt. */
.hint.na-gegevens { margin-top: 18px; }

.code-veld input {
  max-width: 9rem;
  font-family: var(--mono);
  font-size: 1.25rem;
  letter-spacing: .35em;
  text-align: center;
}

/* ---------- afdrukken ----------
 *
 * Zodat een creator het contract via de browser kan opslaan als pdf. Zwart op
 * wit, en alles wat niet bij de tekst hoort blijft weg.
 */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .balk, .voet, .stappen, form, .melding, .hint { display: none !important; }
  .vel { padding: 0; max-width: none; }
  .kaart, .kaart.contract {
    max-width: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .kaart.contract p, .ct-lijst, .gegevens dd, .contract-tekst { color: #000; }
  .kaart.contract h3 { color: #000; border-bottom: 1px solid #999; }
  .ct-onder, .ct-regel, .ct-partij { color: #000 !important; }
  .ct-tekening > div { background: #fff; border: 1px solid #999; }
  h3 { page-break-after: avoid; }
  p, li { page-break-inside: avoid; }
}

/* ---------- telefoon ---------- */

@media (max-width: 700px) {
  .rij-2, .rij-3 { grid-template-columns: 1fr; }
  .gegevens { grid-template-columns: 1fr; gap: 2px 0; }
  .gegevens dd { margin-bottom: 10px; }
  .vel { padding: 24px 14px 56px; }
  /* Zelfde zijruimte als .vel, anders staat de merknaam in de balk 6px verder
     naar binnen dan de kaart eronder. Op een telefoon zie je dat meteen. */
  .balk-in { padding: 14px; }
  .kaart { padding: 18px 16px; }
  h1 { font-size: 1.5rem; }
  .knoppen .knop { width: 100%; text-align: center; }
  .ct-tekening { grid-template-columns: 1fr; }
  .kaart.contract { font-size: .88rem; }
}

/* Uploaden naar onze Drive. De balk tekent de browser standaard in zijn eigen
   kleuren; appearance: none plus eigen kleuren houdt hem in de huisstijl. */
input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--tekst-dun);
  background: var(--vlak-op);
  border: 1px dashed var(--lijn-op);
  border-radius: 7px;
  padding: 14px 12px;
}
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 700;
  color: var(--grond);
  background: var(--geel);
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
}
input[type="file"]:disabled { opacity: .6; }
.upload-voortgang { margin: 6px 0 16px; }
.upload-voortgang progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 5px;
  background: var(--vlak-op);
  overflow: hidden;
}
.upload-voortgang progress::-webkit-progress-bar { background: var(--vlak-op); border-radius: 5px; }
.upload-voortgang progress::-webkit-progress-value { background: var(--geel); border-radius: 5px; }
.upload-voortgang progress::-moz-progress-bar { background: var(--geel); border-radius: 5px; }
.knop:disabled { opacity: .55; cursor: default; filter: none; transform: none; }
[hidden] { display: none !important; }