/*
 * DE LEEROMGEVING — het startscherm van de app.
 *
 * WAAROM DIT BESTAND LOSSTAAT VAN account.css. Daar staan de gedeelde
 * onderdelen van inloggen, profiel en "zo werkt leren hier": een kaart, een
 * knop, een veld. Dit scherm heeft een eigen indeling en die hoort niet in het
 * bestand dat drie andere pagina's ook lezen.
 *
 * DE OPDRACHT (eigenaar, 25-08-2026): "de hele indeling mag op de schop, het
 * moet er professioneel uitzien en aansluiten bij ons product en doelgroep".
 * Het product is oefenmateriaal voor theorie auto; de doelgroep zit op een
 * telefoon en wil slagen.
 *
 * VIER REGELS WAAR DIT ONTWERP OP RUST, en die je niet moet breken:
 *
 *   1. EEN SCHERM BEANTWOORDT EEN VRAAG: "wat doe ik nu?" Alles wat die vraag
 *      niet beantwoordt staat eronder of op een ander tabblad.
 *   2. EEN ACCENTKLEUR, EEN PLEK. Het amber zit op de hoofdknop en nergens
 *      anders. Stond het ook op de chips, de ring en de balkjes, dan wijst
 *      geen van vieren nog ergens naartoe - dat was precies wat er mis was.
 *   3. EEN VORMTAAL. Een radius, een randdikte, een binnenmaat. Het scherm had
 *      vier voortgangsmetaforen door elkaar (een ring, gevulde balkjes, pillen
 *      met getallen en een teller); dat leest als vier ontwerpers.
 *   4. MATERIAAL LAAT JE ZIEN. Wij verkopen oefenmateriaal, dus staan er
 *      beelden van onze eigen situaties op het startscherm en geen dashboard
 *      met nullen.
 *
 * GEEN STIJL IN DE HTML EN GEEN STIJL VANUIT CODE: de server stuurt
 * `style-src 'self'` mee en weigert een style-attribuut STIL - de pagina
 * rendert dan kaal zonder foutmelding. Alles wat per leerling verschilt gaat
 * daarom via een klasse of via het `src` van een <img>.
 */

/* ── de schil en de kopbalk ──────────────────────────────────────────── */

/*
 * 96px onderaan: de vaste tabbalk is 62 hoog en de veiligheidsmarge van een
 * telefoon met een streep onderin komt daar bovenop.
 */
.vel-tabs {
  padding-bottom: 96px;
}

.topbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 10px;
}

/* Het merk staat hier klein. Het is de weg terug naar de website en verder
   niets; de aandacht hoort naar de hoofdknop te gaan. */
.topbalk .site-merk-woordmerk {
  font-size: 16px;
}

.topbalk .site-merk-logo {
  width: 26px;
  height: 26px;
}

/* ── 1 · DE AFTELLING ────────────────────────────────────────────────
 *
 * HIER STOND EEN EIGEN KAART MET EEN GROOT CIJFER, en die is op 31-08-2026
 * opgegaan in de hoofdkaart. Het getal zelf blijft even belangrijk — het zegt
 * hoeveel tijd je hebt, en daar stuurt deze doelgroep op — maar het hoefde geen
 * eigen verdieping van 96 punten te hebben boven een kaart van 217. De
 * eigenaar: "de countdown timer en de Verder waar je was nemen teveel ruimte
 * in." Samen zijn ze nu 165 punten.
 *
 * Wat het plaatje in de kaart draagt staat hieronder bij .nu-chip. Zonder
 * datum is het een uitnodiging en geen mededeling; dat was het als losse kaart
 * ook, en dat blijft zo.
 */

/* ── 2 · DE HOOFDKAART ───────────────────────────────────────────────
 *
 * De enige plek op het scherm die het accent draagt. Hij zegt drie dingen en
 * meer niet: waar je naar kijkt, wat het is, en hoe lang het duurt.
 *
 * DE VERWACHTING ("20 vragen, ongeveer 10 minuten") IS NIEUW EN IS GEEN
 * VERSIERING. Nergens op het oude scherm stond wat er ging gebeuren als je op
 * de knop drukte. Wie niet weet of hij aan tien minuten of aan een uur begint,
 * begint niet - zeker niet op een telefoon tussen twee dingen door.
 *
 * HET BEELD IS ONS EIGEN MATERIAAL, geen voorraadfoto. Het staat als <img>
 * achter de tekst en niet als achtergrond in CSS, omdat het per leerling
 * verschilt en een stijl vanuit code hier stil geweigerd wordt.
 */

/* De maten zijn op 31-08-2026 krapper gezet, want deze kaart draagt nu ook de
   aftelling: 20/18/18 met een kop van 1,55rem gaf 191 punten, en de afspraak
   met de eigenaar was 165. */
.nu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 15px 16px 16px;
  border-radius: 18px;
  background: var(--tf-donker-vlak);
}

.nu-beeld {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  /* Dezelfde ronding als de kaart. Zonder deze regel laat de browser op een
     scherm met dubbele beeldpunten een lichte haarboog in de hoeken staan. */
  border-radius: inherit;
  object-fit: cover;
  opacity: 0.5;
}

/*
 * De sluier is een eigen vlak en geen doorzichtigheid op het beeld zelf. Zo
 * blijft de tekst leesbaar wat er ook achter staat: de linkerkant, waar de
 * woorden beginnen, is bijna dicht en rechts loopt hij weg zodat je nog ziet
 * dat er een situatie achter zit. Nagemeten op de donkerste en de lichtste van
 * de acht onderwerpbeelden.
 *
 * DE KLEUR VAN DE SLUIER IS OP 30-08-2026 MEEVERHUISD. Hij was warm bijna-zwart
 * en dat paste bij de oude beelden. De acht illustraties die er sinds punt 196
 * liggen zijn navy van rand tot rand; warm zwart daaroverheen maakt het vlak
 * grauw in plaats van donker. Dit is dezelfde navy als de sluier op de
 * onderwerppagina, zodat de twee schermen niet elk hun eigen zwart hebben.
 * Vaste waarden en geen tokens, om dezelfde reden als bij .okrt-beeld: hier
 * levert een BEELD de ondergrond en niet het thema.
 */
.nu-sluier {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(11, 35, 73, 0.96) 30%, rgba(11, 35, 73, 0.74) 72%, rgba(11, 35, 73, 0.5) 100%);
}

/* Het etiket links, de aftelling rechts. Twee dingen die allebei klein zijn en
   allebei bovenaan horen: wat dit is, en hoeveel tijd je nog hebt. */
.nu-kopbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nu-etiket {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tf-accent);
}

/*
 * DE AFTELLING ALS PLAATJE IN DE KAART — 31-08-2026, variant A.
 *
 * Vast lichtvlak en vaste lichte inkt: deze kaart is in beide standen donker,
 * dus mag hier niets in dat meeschakelt. Hij blijft aantikbaar en wijst naar
 * je profiel, want daar staat de datum; als losse kaart deed hij dat ook.
 *
 * Op een breed scherm draagt de zijbalk de aftelling al, en twee keer
 * hetzelfde getal op één scherm is precies waar dit ontwerp vanaf wilde.
 * Daarom staat hij daar niet; zie de regel bij .kol-weten verderop.
 */
.nu-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--tf-radius-pill);
  background: rgb(255 255 255 / 14%);
  color: var(--tf-donker-tekst);
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

.nu-chip:hover {
  background: rgb(255 255 255 / 22%);
}

/* Zonder datum is het een uitnodiging: dezelfde plek, een streepjesrand
   eromheen zodat je ziet dat er iets ontbreekt dat jij kunt invullen. */
.nu-chip[data-leeg="ja"] {
  background: transparent;
  border: 1px dashed rgb(255 255 255 / 45%);
  padding: 3px 10px;
}

.nu-kop {
  margin: 5px 0 0;
  font-family: var(--tf-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--tf-donker-tekst);
  text-wrap: balance;
}

.nu-sub {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--tf-donker-stil);
}

.nu-knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 13px;
}

.nu-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tf-hit-comfort);
  padding: 12px 22px;
  border-radius: var(--tf-radius-pill);
  background: var(--tf-accent-vlak, var(--tf-accent));
  color: var(--tf-accent-ink);
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
}

.nu-knop:hover {
  background: var(--tf-accent-strong);
}

/* HIER STONDEN "LIEVER ZELF KIEZEN" EN DE VORIGE UITSLAG. Allebei weg op
   31-08-2026: de eerste wees naar de acht onderwerpknoppen die er vlak onder
   staan, en de tweede is een terugblik op een scherm dat over nu gaat. Samen
   waren ze goed voor een derde van de hoogte van deze kaart. */

/* ── 3 · WAAR JE STAAT ───────────────────────────────────────────────
 *
 * Hier stonden een ring (0/8), twee regels eronder (0 van de 156) en een kaart
 * met drie balkjes (Kennis 32/205). Drie keer hetzelfde nieuws, in drie
 * vormen, en op dag een drie keer een nul. Het is nu een strook.
 *
 * DE ACHT SEGMENTEN ZIJN DE RING, PLAT GESLAGEN. De eigenaar heeft op
 * 21-08-2026 besloten dat dit onderwerpen telt en niet vragen, en dat blijft;
 * alleen de vorm is veranderd, want een ring van 92 bij 92 naast twee regels
 * tekst kost een kwart scherm voor een getal van twee cijfers.
 *
 * OP DAG EEN BLIJFT DIT BLOK WEG. Een leeg meetinstrument is een oordeel over
 * iemand die nog niets heeft kunnen doen. Dat wordt geregeld in
 * leeromgeving.js, niet hier.
 */

/* Op Vandaag komt de marge van de algemene regel; op het tabblad Onderwerpen
   staat deze strook los boven de lijst en heeft hij zijn eigen afstand nodig. */
#deel-onderwerpen .vooruit {
  margin-top: 22px;
}

.sectiekop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--tf-font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tf-muted);
}

.sectiekop a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tf-muted);
  text-transform: none;
}

.vooruitkaart {
  padding: 16px;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

/*
 * ACHT SEGMENTEN, EN ELK SEGMENT IS ZELF EEN BALKJE.
 *
 * De eerste versie was aan of uit: gevuld zodra een onderwerp helemaal af was.
 * Dat gaf een strook die weken achter elkaar volledig leeg blijft staan
 * terwijl er wel degelijk iets gebeurt - "af" is een hoge lat en dat hoort ook
 * zo. Een meter die niet beweegt terwijl jij wel beweegt, is een meter die
 * liegt over jouw inzet.
 *
 * Nu vult elk segment mee met hoe ver dat onderwerp is, en kleurt hij groen op
 * het moment dat hij af is. De vulbreedte gaat via de vulling-klassen, want de
 * CSP weigert een stijl vanuit code stil.
 */
/* De opmaak van de tegels staat onderaan dit blad, bij de aantekening over
   waarom het geen streepjes meer zijn. Hier stonden tot 30-08-2026 een
   flexrij met dunne balkjes en twee losse tekstregels; die zijn vervangen. */

/* ── 4 · VERDER OEFENEN ──────────────────────────────────────────────
 *
 * Dit waren drie pillen achter het woordje "Ook slim:" met een getal erin
 * ("Verkeerstekens 44 regels"). Pillen lezen als filters, niet als iets waar
 * je in kunt stappen, en het getal betekende niets voor een leerling.
 *
 * Het zijn nu kaarten met het beeld van het onderwerp. Dat is hetzelfde
 * materiaal dat op het tabblad Onderwerpen staat en dat is de bedoeling: wie
 * hier tikt en wie daar tikt komt op dezelfde plek uit.
 */

/* De afstand tot de vorige sectie staat sinds 31-08-2026 op één plek, bij
   .vandaag-kolommen. De opsomming die hier stond gold voor twee van de zeven
   secties en werd niet bijgewerkt toen er een achtste bij kwam. */

/*
 * EEN STROOK DIE OPZIJ SCHUIFT EN GEEN RASTER. Met drie kaarten in een raster
 * van twee kolommen staat de derde alleen op een regel, en dat leest als een
 * fout in plaats van als een derde optie. Een strook toont er twee helemaal en
 * de derde half; dat halve kaartje is precies het teken dat er meer is.
 */
.verderrij {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.verderrij::-webkit-scrollbar {
  display: none;
}

.verderkaart {
  position: relative;
  display: flex;
  width: 152px;
  flex: none;
  flex-direction: column;
  overflow: hidden;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
  color: var(--tf-ink);
  scroll-snap-align: start;
  text-decoration: none;
}

.verderkaart:hover {
  border-color: var(--tf-accent-line);
}

.verderkaart img {
  display: block;
  width: 100%;
  height: 74px;
  object-fit: cover;
  background: var(--tf-surface-sunken);
}

.verderkaart-tekst {
  padding: 10px 12px 12px;
}

/* Twee regels gereserveerd, ook als de naam er maar een nodig heeft. Anders
   staan de kaarten in de strook niet op dezelfde hoogte af te lopen, en dat
   is het soort onrust waar je niet de vinger op legt maar wel op afknapt. */
.verderkaart strong {
  display: block;
  min-height: 2.3em;
  font-size: 0.92rem;
  line-height: 1.15;
}

.verderkaart span {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--tf-muted);
}

/* ── 5 · DE VASTE INGANGEN ───────────────────────────────────────────
 *
 * Het oefenexamen zat drie tikken diep weggestopt onder "Meer", terwijl het de
 * enige plek in de app is die je vertelt of je zou slagen. Het staat nu op het
 * startscherm, met zijn norm erbij zodat je weet waar je ja tegen zegt.
 */

.ingang {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
  color: var(--tf-ink);
  text-decoration: none;
}

.ingang + .ingang {
  margin-top: 8px;
}

a.ingang:hover {
  border-color: var(--tf-accent-line);
}

.ingang-tekst {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.ingang-tekst strong {
  font-size: 0.95rem;
}

.ingang-tekst span {
  font-size: 0.8rem;
  color: var(--tf-muted);
}

.ingang-pijl {
  flex: none;
  color: var(--tf-muted);
}

.ingang[data-stand="bouw"] {
  border-style: dashed;
  background: none;
}

.ingang[data-stand="bouw"] .ingang-tekst strong {
  color: var(--tf-muted);
}

/* Wat er nog niet is heet zo, en is geen knop. Liever kaal dan dood. */
.bouwlabel {
  flex: none;
  align-self: center;
  padding: 3px 9px;
  border-radius: var(--tf-radius-pill);
  background: var(--tf-surface-sunken);
  color: var(--tf-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── het tabblad Onderwerpen: de onderdelen, uitgeklapt ──────────────────
 *
 * Punt 95, 26-08-2026. Hier stond een raster van acht kaarten met een beeld
 * erop, en daaronder een paneel dat openging als je er een aantikte. Wat je
 * wilde weten - hoeveel onderdelen heeft dit onderwerp en hoe ver ben ik per
 * onderdeel - zat achter die tik. Nu staat het er gewoon.
 *
 * Het beeld per onderwerp is hier weg. Acht illustraties boven acht lijsten
 * maken van dit scherm een folder; het beeld blijft waar het het meeste doet,
 * op de hoofdkaart van Vandaag.
 */

.odelen {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 22px;
}

.odeel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* De kop draagt het aantal onderdelen. Dat getal is de reden dat dit scherm
   bestaat: je hoort het niet te hoeven tellen. */
.odeelkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.odeelkop h3 {
  margin: 0;
  font-family: var(--tf-font-display);
  font-size: 1rem;
  line-height: 1.25;
}

.odeelmaat {
  flex: none;
  color: var(--tf-muted);
  font-size: 0.76rem;
  white-space: nowrap;
}

.orijen {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/*
 * TWEE KOLOMMEN: de tekening en de tekst. Toegevoegd 26-08-2026 op verzoek van
 * de eigenaar, met een schermafdruk van een concurrent als indicatie. Bij hen
 * zijn het gekleurde plaatjes in een cirkel; hier is het een lijntekening in
 * een zacht amber vlakje, want dit scherm heeft één accentkleur en die is van
 * de knop die je moet aantikken. Zie app/onderdeel-icoon.mjs.
 */
.orij {
  display: grid;
  width: 100%;
  min-height: var(--tf-hit);
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  padding: 9px 12px;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  gap: 11px;
  cursor: pointer;
}

.oicoon {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--tf-accent-tint);
  color: var(--tf-accent-strong);
}

.oicoon svg {
  display: block;
  width: 19px;
  height: 19px;
}

/* Een onderdeel dat af is: gevuld vlakje in de goedkleur. Dat is het enige
   groene op het scherm, en je ziet het van bovenaf aankomen. */
.orij-klaar .oicoon {
  background: var(--tf-good);
  color: var(--tf-surface);
}

/* "Overig" is een restgroep en geen onderwerp: drie puntjes in een kaal
   vlakje. Liever geen tekening dan een tekening die iets anders belooft. */
.orij-overig .oicoon {
  border: var(--tf-border) solid var(--tf-line);
  background: none;
  color: var(--tf-muted);
}

.otekst {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

button.orij:hover {
  border-color: var(--tf-accent-line);
}

.orij-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.orij b {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}

.orij-stand {
  flex: none;
  color: var(--tf-muted);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.orij-af {
  font-weight: 600;
  color: var(--tf-good-ink, var(--tf-good));
}

/* "Overig" is geen onderdeel maar een restgroep, en staat er dus rustiger bij.
   Hij blijft wel een knop: die vragen bestaan en zijn te oefenen. */
.orij-overig b {
  font-weight: 500;
  color: var(--tf-muted);
}

/* Een onderwerp achter de muur toont zijn onderdelen met hun aantal - je moet
   kunnen zien wat je mist - maar de rijen zijn geen knoppen. Niet grijs: grijs
   leest als kapot, en dit is het product. */
.odeel[data-stand="slot"] .orij {
  border-style: dashed;
  border-color: var(--tf-accent-line);
  cursor: default;
}

/* Achter het slot wordt het vlakje een omtrek: zichtbaar, en zichtbaar nog
   niet van jou. */
.odeel[data-stand="slot"] .oicoon {
  border: var(--tf-border) dashed var(--tf-line);
  background: none;
  color: var(--tf-muted);
}

.oslot {
  min-height: var(--tf-hit);
  display: flex;
  align-items: center;
  margin-top: 2px;
  color: var(--tf-accent-strong);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}

/* Een onderwerp zonder vragen is een bouwput: hij blijft staan zodat zichtbaar
   is waar de app leeg is, maar er valt niets in te delen. */
.odeel[data-stand="bouw"] h3 {
  color: var(--tf-muted);
}

/* ── de voortgangsbalkjes ────────────────────────────────────────────
 *
 * De breedte gaat via een klasse en niet via een stijl in de code: de CSP
 * weigert dat laatste stil. Twintig stappen van vijf procent is fijn genoeg
 * voor een balk van 150 pixels breed.
 */

.spoor {
  overflow: hidden;
  height: 6px;
  border-radius: 3px;
  background: var(--tf-track);
}

.spoor .vulling {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--tf-accent);
}

.spoor-dun {
  height: 4px;
}

.vulling-0 { width: 0; }
.vulling-5 { width: 5%; }
.vulling-10 { width: 10%; }
.vulling-15 { width: 15%; }
.vulling-20 { width: 20%; }
.vulling-25 { width: 25%; }
.vulling-30 { width: 30%; }
.vulling-35 { width: 35%; }
.vulling-40 { width: 40%; }
.vulling-45 { width: 45%; }
.vulling-50 { width: 50%; }
.vulling-55 { width: 55%; }
.vulling-60 { width: 60%; }
.vulling-65 { width: 65%; }
.vulling-70 { width: 70%; }
.vulling-75 { width: 75%; }
.vulling-80 { width: 80%; }
.vulling-85 { width: 85%; }
.vulling-90 { width: 90%; }
.vulling-95 { width: 95%; }
.vulling-100 { width: 100%; }

/* ── het tabblad Trainers ────────────────────────────────────────────── */

.trainerrij {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.trainer {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
  color: inherit;
  text-decoration: none;
}

a.trainer:hover {
  border-color: var(--tf-accent-line);
}

.trainer img {
  display: block;
  width: 100%;
  height: 82px;
  object-fit: cover;
}

.trainer[data-stand="bouw"] {
  border-style: dashed;
  background: none;
}

.trainer[data-stand="bouw"] img {
  opacity: 0.45;
}

.trainer-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
}

.trainer-tekst strong {
  font-size: 0.92rem;
}

.trainer-tekst > span {
  font-size: 0.78rem;
  color: var(--tf-muted);
}

.trainer-tekst .bouwlabel {
  align-self: flex-start;
  margin-top: 2px;
}

/* ── het tabblad Meer ────────────────────────────────────────────────── */

.profieltip {
  margin: 16px 0 0;
  font-size: 0.82rem;
}

/* ── uitleg die een tik ver ligt ─────────────────────────────────────── */

.uitlegknopje {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tf-muted);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.uitlegknopje:hover {
  color: var(--tf-ink);
}

.uitlegkaartje {
  margin: 10px 0 0;
  padding: 12px 14px;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface-warm);
  font-size: 0.85rem;
  color: var(--tf-ink-soft);
}

.uitlegkaartje p {
  margin: 0 0 8px;
}

.uitlegkaartje p:last-child {
  margin-bottom: 0;
}

/* ── de vaste balk onderaan ──────────────────────────────────────────
 *
 * VIJF KNOPPEN, en dat is een besluit van de eigenaar van 21-08-2026: Video's
 * krijgt een eigen tabblad met een eerlijke in-de-maak-tekst.
 *
 * Op 390 breed is vijf de bovengrens: elke knop houdt dan 78 pixels over en
 * "Onderwerpen" is het langste woord dat daar nog in past. Komt er ooit een
 * zesde bij, dan moet er een af — en dat is een vraag aan de eigenaar en geen
 * ontwerpkeuze die je hier alleen maakt.
 */

.tabbalk {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: var(--tf-border) solid var(--tf-line);
  background: var(--tf-bg);
}

.tab {
  display: flex;
  flex: 1;
  min-height: 62px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--tf-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-decoration: none;
}

.tab svg {
  display: block;
}

.tab[aria-current="page"] {
  color: var(--tf-ink);
}

.tab[aria-current="page"] svg {
  color: var(--tf-accent-strong);
}

.tab:focus-visible {
  outline-offset: -3px;
}

/* ── breder dan een telefoon ─────────────────────────────────────────
 *
 * Vanaf 761 breed is er ruimte voor twee kolommen en verhuist de tabbalk naar
 * boven. Dit stond op 700 en is op 29-08-2026 naar 761 gezet, de maat die
 * app/site/maten.css voor de hele app vastlegt; onder 760 klapt tokens.css het
 * hoofdmenu dicht, en een breekpunt dat daar niet mee samenvalt geeft een
 * strook breedtes waar de twee elkaar tegenspreken. Op een telefoon blijft alles zoals het is; dit scherm is voor een
 * telefoon ontworpen en niet voor een bureaublad dat toevallig ook bestaat.
 */

@media (min-width: 761px) {
  .vel-tabs {
    max-width: 720px;
    padding-bottom: 48px;
  }

  .tabbalk {
    position: sticky;
    top: 0;
    bottom: auto;
    margin-bottom: 14px;
    border-top: 0;
    border-bottom: var(--tf-border) solid var(--tf-line);
  }

  .tab {
    min-height: 52px;
    flex-direction: row;
    gap: 8px;
    font-size: 0.82rem;
  }

  .nu-kop {
    font-size: 1.8rem;
  }
}

/* ── de proefles: wat er achter een gratis account zit ───────────────────
 *
 * Toegevoegd 26-08-2026, punt 93. De leeromgeving is sindsdien de voordeur
 * van de app en staat voor iedereen open; wat er niet bij zit, hoort zichtbaar
 * te blijven met zijn aantal erbij. Dat is het verschil met "binnenkort":
 * binnenkort is een bouwput, dit is het product.
 *
 * Een gesloten kaart is met opzet NIET grijs en NIET doorzichtig. Grijs leest
 * als kapot; dit moet lezen als iets dat er wél is.
 */

.ingang[data-stand="slot"] {
  border-style: dashed;
  border-color: var(--tf-accent-line);
}

.ingang[data-stand="slot"] .ingang-tekst span {
  color: var(--tf-accent-strong);
}

/* De weg naar binnen rechtsboven, voor wie nog geen account heeft. Waar de
   letter van een ingelogde leerling staat, staat hier een woord; hij mag
   daarom breder zijn dan de bol en hij is geen cirkel. */
.avatar.avatar-uit {
  width: auto;
  padding: 0 12px;
  border-radius: var(--tf-radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* ── je bewaarde vragen ──────────────────────────────────────────────────
 *
 * Meegekomen van het kiesscherm van de oefenapp, dat op 26-08-2026 is
 * opgeheven. De vormgeving volgt die van daar (app/scherm.css), zodat het
 * dezelfde lijst blijft en niet een tweede die er net anders uitziet.
 */

.apartlijst {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.apartrij {
  display: flex;
  align-items: center;
  padding-top: 9px;
  border-top: var(--tf-border) solid var(--tf-line);
  gap: 10px;
}

.apartvraag {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--tf-ink-soft);
  font: 400 12.5px/1.4 var(--tf-font-ui);
}

/* Volle aanraakmaat, want dit is de enige knop die het merkje eraf haalt. */
.apartweg {
  min-height: var(--tf-hit);
  flex: none;
  padding: 8px 12px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-small);
  background: var(--tf-surface);
  color: var(--tf-ink);
  cursor: pointer;
  font: 500 12px var(--tf-font-ui);
}

/* De kop van de kaart met bewaarde vragen: dezelfde maat als elke andere
   kaartkop op dit scherm, zodat er geen tweede koptrap ontstaat. */
.kaartkop {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

/* ── voor wie hier voor het eerst is ─────────────────────────────────────
 *
 * Toegevoegd 26-08-2026. Het scherm van een nieuwe bezoeker was leeg, en dat
 * is geen ontwerpfout maar een gevolg: alles wat het vult gaat over voortgang.
 * Wat er dan hoort te staan is niet nog een meter, maar het antwoord op de
 * vraag die hij wél heeft.
 *
 * Rustig van vorm: er staat één accentvlak op dit scherm en dat is de
 * hoofdknop erboven. Dit blok mag daar niet mee concurreren.
 */

/* De marge komt van de algemene regel bij .vandaag-kolommen. */


.welkomkaart {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
  gap: 14px;
}

/* Genummerd, want het is een volgorde: dit gebeurt er als je begint. */
.welkomstappen {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-left: 20px;
  gap: 10px;
}

.welkomstappen li {
  color: var(--tf-ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.welkomstappen li::marker {
  color: var(--tf-accent-strong);
  font-weight: 700;
}

.welkomstappen strong {
  color: var(--tf-ink);
  font-weight: 600;
}

.welkomlink {
  min-height: var(--tf-hit);
  display: flex;
  align-items: center;
  border-top: var(--tf-border) solid var(--tf-line);
  padding-top: 12px;
  color: var(--tf-accent-strong);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════
 * DE COMPUTERINDELING — wens 161, mijlpaal 1, 29-08-2026
 *
 * WAT HIER MIS WAS. Dit scherm was op 390 gebouwd en had daarboven één
 * breekpunt op 700: de kolom werd 720 breed en de tabbalk verhuisde naar
 * boven. Op een computer bleef het daardoor een telefoon-app op een groot
 * scherm — de woorden van de eigenaar op 29-08-2026.
 *
 * DE MATEN KOMEN UIT app/site/maten.css EN WORDEN HIER NIET OPNIEUW BEDACHT.
 * Twee sprongen en niet meer:
 *
 *   761   vanaf tablet    één kolom wordt meerdere, tabbalk naar boven
 *   1024  vanaf computer  zijbalk links, tabbalk weg, twee kolommen
 *
 * WAAROM 761 EN NIET MEER 700. maten.css legt uit dat app/tokens.css het
 * hoofdmenu dichtklapt onder 760. Een breekpunt dat daar niet mee samenvalt
 * geeft een strook breedtes waar het menu al een balk is maar de pagina nog
 * een telefoonindeling heeft. Dit is dus geen derde breekpunt erbij maar het
 * bestaande op de afgesproken plek zetten.
 *
 * OP 390 VERANDERT ER NIETS. Dat is een acceptatiecriterium van de opdracht:
 * de zijbalk bestaat daar niet, de tabbalk staat onderaan, en het scherm is
 * wat het was.
 * ══════════════════════════════════════════════════════════════════════ */

/* De zijbalk bestaat pas vanaf 1024. Daaronder is hij er niet — niet
   verborgen met opacity of buiten beeld geschoven, maar weg. Een menu dat er
   staat maar onbereikbaar is, is een val voor wie met een schermlezer werkt. */
.zijbalk {
  display: none;
}

@media (min-width: 1024px) {
  /*
   * De schil wordt hier de indeling: zijbalk links, inhoud rechts. Dat gebeurt
   * op de body en niet op een extra omhulsel, omdat de tabbalk een broer van
   * .vel-tabs is en niet zijn kind — een omhulsel eromheen zou de html van het
   * hele scherm verbouwen voor een regel opmaak.
   */
  body {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
  }

  .zijbalk {
    display: flex;
    flex-direction: column;
    width: 236px;
    flex: 0 0 236px;
    padding: 20px 14px 16px;
    background: var(--tf-surface, #fff);
    border-right: var(--tf-border, 1px) solid var(--tf-line);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
  }

  .zijmerk {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 6px 20px;
    font-family: var(--tf-font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--tf-ink);
    text-decoration: none;
  }

  /* Het echte logo sinds 30-08-2026; hier stond een afgeleid vierkantje.
     Zie de aantekening in app/account/leeromgeving.css. */
  .zijmerk-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: block;
  }

  .zijmerk-groen {
    color: var(--tf-accent);
  }

  .zijnav {
    display: grid;
    gap: 2px;
  }

  .zijtab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--tf-ink-soft);
    font-weight: 500;
    font-size: 0.86rem;
    text-decoration: none;
  }

  .zijtab svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--tf-faint);
  }

  .zijtab:hover {
    background: var(--tf-surface-sunken);
  }

  .zijtab:focus-visible {
    outline: 2px solid var(--tf-accent);
    outline-offset: -2px;
  }

  .zijtab[aria-current="page"] {
    background: var(--tf-accent-tint);
    color: var(--tf-ink);
    font-weight: 600;
  }

  .zijtab[aria-current="page"] svg {
    color: var(--tf-accent);
  }

  /* De kop boven de tweede groep. Geen knop, dus geen tabindex en geen
     hoverstand — het is een opschrift. */
  .zijgroep {
    margin: 14px 0 6px;
    padding: 0 12px;
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tf-faint);
    font-weight: 600;
  }

  .zijvoet {
    margin-top: auto;
    padding-top: 16px;
    border-top: var(--tf-border, 1px) solid var(--tf-line-soft, var(--tf-line));
    display: grid;
    gap: 12px;
  }

  .zijaftel {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 0 4px;
    margin: 0;
  }

  .zijaftel strong {
    font-family: var(--tf-font-display);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--tf-ink);
  }

  .zijaftel span {
    font-size: 0.74rem;
    color: var(--tf-muted);
  }

  .zijvoortgang {
    padding: 0 4px;
  }

  .zijvoortgang-rij {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--tf-muted);
    margin: 0 0 6px;
  }

  .zijvoortgang-rij strong {
    color: var(--tf-ink);
  }

  .zijbaan {
    display: block;
    height: 7px;
    border-radius: 99px;
    background: var(--tf-track);
    overflow: hidden;
  }

  .zijbaan i {
    display: block;
    height: 100%;
    /* Geen width hier: die won het altijd van de .vulling-NN klasse die het
       script erop zet (0,1,1 tegen 0,1,0), dus de balk stond altijd op 0 -
       "laadt niet goed" op 31-08-2026. .segbaan i hiernaast doet het al goed
       door hier gewoon over te zwijgen. */
    background: var(--tf-accent);
    border-radius: 99px;
  }

  .zijvoortgang-noot {
    font-size: 0.7rem;
    color: var(--tf-faint);
    margin: 6px 0 0;
  }

  /*
   * De inhoud naast de zijbalk. De breedte is niet onbeperkt: maten.css legt
   * uit dat een leesregel van 1120 pixels ongeveer 150 tekens is en dat je oog
   * dan bij elke terugsprong de regel kwijtraakt.
   */
  .vel-tabs {
    flex: 1;
    min-width: 0;
    max-width: 1120px;
    /* 0 -> 0 auto, 31-08-2026: zonder auto bleef dit vlak plakken tegen de
       zijbalk en groeide alle rest van een breed scherm rechts dicht — dat is
       precies de klacht "voor mij is veel nog steeds erg links". .scherm in
       app/scherm.css doet dit al goed; hier stond het gewoon nooit. */
    margin: 0 auto;
    padding: 22px 26px 40px;
  }

  /* De tabbalk is hier weg: zijn acht opvolgers staan links. */
  .tabbalk {
    display: none;
  }

  /* Twee ingangen op het tabblad Meer bestaan alleen om Statistieken en
     Downloads op een telefoon bereikbaar te maken. Hier staan ze in de
     zijbalk, dus hier zijn ze dubbel. */
  .ingang-alleen-smal {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * VANDAAG IN TWEE KOLOMMEN — wens 161, mijlpaal 2, 29-08-2026
 *
 * Links wat je DOET, rechts wat je moet WETEN. Onder 1024 breed is dit één
 * kolom en staat alles onder elkaar in dezelfde volgorde; op een telefoon
 * verandert er dus niets.
 * ══════════════════════════════════════════════════════════════════════ */

/*
 * OP EEN TELEFOON IS DIT ÉÉN KOLOM VAN LOSSE SECTIES, EN DAT IS SINDS
 * 31-08-2026 OOK LETTERLIJK ZO.
 *
 * Twee dingen kwamen hier samen. De eigenaar zag dat "Of pak een onderwerp"
 * tegen de onderrand van de hoofdkaart plakte — "ogen erg slordig" — en hij
 * wilde de kaart Jouw volgende stap b&oacute;ven "Ook in de app" hebben. Het
 * eerste kwam doordat de afstand tussen secties met de hand per sectie was
 * opgeschreven (`.verder, .ingangen { margin-top: 22px }` en nog drie losse
 * regels); wie er een sectie bij zet, staat niet in die opsomming. Het tweede
 * kon niet, omdat de twee kolommen op een telefoon achter elkaar stonden en je
 * dus niets uit de rechterkolom tussen de linker kon zetten.
 *
 * `display: contents` op de twee kolommen lost allebei op: op een telefoon
 * bestaan de kolommen dan niet als vak, en zijn alle secties gewoon
 * broers en zussen in één rij. De gap geeft ze allemaal dezelfde afstand —
 * niemand kan er meer eentje vergeten — en met `order` bepaalt dit stijlblad
 * de volgorde, zonder dat er iets in de html verhuist. Op een breed scherm
 * gaan de kolommen weer aan en vervalt de volgorde vanzelf.
 *
 * gereedschap/controle-schermregels.mjs zakt als de gap of deze opzet
 * verdwijnt, of als een sectie op Vandaag alsnog zijn eigen marge meebrengt.
 */
.vandaag-kolommen {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.kol-doen,
.kol-weten {
  display: contents;
}

/* De volgorde op een telefoon. Wat je DOET eerst, dan de stap die wij
   voorstellen, dan wat er altijd is, en als laatste waar je staat. */
.nu { order: 1; }
#ozelf { order: 2; }
.welkom { order: 3; }
#omvang { order: 4; }
.verder { order: 5; }
.brengstrook { order: 6; }
.coach { order: 7; }
.ingangen { order: 8; }
.examenmeter { order: 9; }

@media (min-width: 1024px) {
  /* Twee kolommen: links wat je DOET, rechts wat je moet WETEN. Hier bestaan
     de kolommen dus weer als vak, en vervalt de volgorde van de telefoon. */
  .vandaag-kolommen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 18px;
  }

  .kol-doen {
    display: block;
  }

  .kol-weten {
    display: grid;
    gap: 12px;
    position: sticky;
    top: 22px;
  }

  .kol-doen > section,
  .kol-weten > section {
    order: 0;
  }

  /* In de linkerkolom staan de secties weer onder elkaar in de gewone stroom,
     dus daar doet de marge het werk in plaats van de gap. */
  .kol-doen > section + section {
    margin-top: 22px;
  }

  /* De aftelling staat hier onderin de zijbalk, dus in de kaart is hij dubbel.
     Twee keer hetzelfde getal op één scherm is precies waar dit ontwerp vanaf
     wilde.

     LET OP: alleen de GEVULDE aftelling gaat weg. De uitnodiging "zet je
     examendatum" blijft staan, want de zijbalk heeft daar geen tegenhanger
     voor — die toont pas iets zodra er een datum is. Beide verbergen betekende
     dat wie nog geen datum had, er op een computer ook nergens meer een kon
     invullen. */
  .nu-chip:not([data-leeg="ja"]) {
    display: none;
  }

  /*
   * DE TITEL VAN "HET EXAMEN VAN VANDAAG" BLIJFT HIER ONDER ELKAAR STAAN.
   *
   * .emkop schakelt vanaf 560 breed naar een rij (titel links, "50 vragen ·
   * 44 goed om te slagen" rechts) - prima op een telefoon of tablet die de
   * volle breedte heeft. In deze kolom is dat vlak vast 300px, min de padding
   * van .emkaart nog geen 270px, en het rechterstuk staat met opzet op
   * `white-space: nowrap`. De titel kreeg dus letterlijk geen ruimte meer en
   * brak woord voor woord af. Gemeld op 31-08-2026 als "onnodige enter" in de
   * titel.
   */
  .examenmeter .emkop {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /*
   * DE KOP "BEN JE ER KLAAR VOOR?" LIJNT UIT MET DE KAARTEN ERBOVEN EN ERONDER.
   *
   * .sectiekop staat elders altijd vlak tegen de rand - daar is dat goed, want
   * daar staat niets naast waarmee hij moet uitlijnen. Hier staat hij wél
   * tussen twee gevulde kaarten (.coach erboven, .emkaart eronder) die allebei
   * intern opvulling hebben, dus zonder eigen opvulling stond deze kop 15 tot
   * 16 pixels verder naar links dan de tekst in die kaarten. Gemeld op
   * 31-08-2026 als "uitlijning met blok erboven klopt niet".
   */
  .examenmeter .sectiekop {
    padding: 0 15px;
  }
}

/* ── de acht onderwerpen als knop ─────────────────────────────────────
 *
 * Eén tik en je zit in een ronde van dat onderwerp; geen tussenpagina, want
 * dat was de klacht van de eigenaar. De naam mag over twee regels en de hoogte
 * is daarom gelijkgetrokken, anders staan de balkjes op acht verschillende
 * hoogtes en leest de rij als rommel.
 */
.oknoppen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

@media (min-width: 761px) {
  .oknoppen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.oknop {
  display: flex;
  flex-direction: column;
  background: var(--tf-surface);
  border: var(--tf-border) solid var(--tf-line);
  border-radius: 12px;
  padding: 11px 12px 12px;
  text-decoration: none;
  color: inherit;
}

.oknop:hover {
  border-color: var(--tf-accent-line, var(--tf-accent));
}

.oknop:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

.oknop-naam {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 2.5em;
}

.oknop-baan {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: var(--tf-track);
  overflow: hidden;
  margin-top: 9px;
}

.oknop-baan i {
  display: block;
  height: 100%;
  background: var(--tf-accent);
}

.oknop-voet {
  display: block;
  font-size: 0.68rem;
  color: var(--tf-muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* ── het examen van vandaag ───────────────────────────────────────────
 *
 * Vijftig vakjes met een streep bij 44. De streep staat op 88 procent, want
 * 44 van 50 is 88 procent — dat is met opzet een verhouding en geen aantal
 * pixels, zodat hij op elke breedte op de goede plek blijft staan.
 *
 * WAT DIT WEL EN NIET ZEGT staat in het regelboek onder
 * waar-je-staat-telt-dekking-en-voorspelt-geen-uitslag. Het is een
 * dekkingsmeting; er staat nergens dat je zou slagen.
 */
.emkaart {
  /* .emkaart is sinds 31-08-2026 de <a> naar Statistieken en geen <div> meer;
     een link staat van zichzelf inline en zonder deze twee regels rendert hij
     dus niet meer als kaart. Zelfde recept als .okrt hiernaast. */
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--tf-surface);
  border: var(--tf-border) solid var(--tf-line);
  border-radius: 14px;
  padding: 14px 15px 15px;
}

.emkaart:hover {
  border-color: var(--tf-accent-line, var(--tf-accent));
}

.emkaart:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

/*
 * TITEL BOVEN, MATEN ERONDER — 31-08-2026.
 *
 * Dit was één rij met de titel links en "50 vragen · 44 goed om te slagen"
 * rechts, met `white-space: nowrap` op dat rechterstuk. Op telefoonbreedte
 * eiste dat rechterstuk zijn hele breedte op, brak de titel over twee regels
 * en hingen de maten ergens in dat gat. Onder elkaar leest het in één keer, en
 * op een breder scherm gaan ze vanzelf weer naast elkaar staan.
 */
.emkop {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 560px) {
  .emkop {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
}

.emkop h3 {
  font-family: var(--tf-font-display);
  font-size: 0.95rem;
  margin: 0;
}

.emrechts {
  font-size: 0.7rem;
  color: var(--tf-muted);
  white-space: nowrap;
}

.emsub {
  font-size: 0.76rem;
  color: var(--tf-muted);
  margin: 4px 0 0;
}

.emstrip {
  position: relative;
  margin-top: 14px;
  padding-top: 14px;
}

.emvakjes {
  display: flex;
  gap: 2px;
}

.emvakjes i {
  flex: 1 1 0;
  min-width: 0;
  height: 28px;
  border-radius: 2px;
  display: block;
}

.em-in { background: var(--tf-accent); }
.em-bezig { background: var(--tf-accent-line, #bfe8d2); }
.em-nieuw { background: var(--tf-track); }

.emlijn {
  position: absolute;
  top: 0;
  bottom: -4px;
  left: 88%;
  width: 2px;
  background: var(--tf-ink);
}

.emlijn span {
  position: absolute;
  top: -2px;
  left: 5px;
  /* De ouder is 2 punten breed; zonder dit breekt "44" in twee vieren
     onder elkaar. Gemeten 7 breed en 33 hoog. */
  white-space: nowrap;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--tf-ink);
}

.emgroot {
  font-family: var(--tf-font-display);
  font-size: 1rem;
  margin: 14px 0 0;
}

.emklein {
  font-size: 0.76rem;
  color: var(--tf-muted);
  margin: 3px 0 0;
}

.emlegenda {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.68rem;
  color: var(--tf-muted);
  margin-top: 11px;
}

.emlegenda span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.emlegenda em {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: block;
  font-style: normal;
}

/* ── de coachkaart ────────────────────────────────────────────────────
 *
 * Het enige donkere vlak op het scherm, en dat is met opzet: er staat één ding
 * dat je nu moet doen. Vijf mogelijke inhouden, de hoogste die past wint.
 */
/*
 * DEZE KAART IS ALTIJD DONKER, EN DAT MOET UIT DE VASTE KLEUREN KOMEN.
 *
 * Hier stond `background: var(--tf-ink)` met `color: var(--tf-canvas)`. Allebei
 * schakelen ze mee met de stand, en samen klappen ze dus om: in de donkere
 * stand werd deze kaart WIT terwijl de rest van het scherm donker is. De
 * eigenaar zag het op 31-08-2026 op zijn telefoon.
 *
 * Een vlak dat in beide standen donker hoort te zijn, heeft zijn eigen set
 * kleuren — --tf-donker-* — en die is er precies voor dit geval. Zie de
 * aantekening in app/tokens.css en de navy waarden in app/site/huisstijl.css.
 */
.coach {
  background: var(--tf-donker-vlak);
  border-radius: 14px;
  padding: 15px 16px 16px;
  color: var(--tf-donker-tekst);
}

.coach-et {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tf-donker-accent);
  font-weight: 600;
  margin-bottom: 7px;
}

.coach-kop {
  font-family: var(--tf-font-display);
  font-size: 1.05rem;
  margin: 0 0 5px;
  color: var(--tf-donker-tekst);
}

.coach-regel {
  font-size: 0.8rem;
  color: var(--tf-donker-stil);
  margin: 0 0 13px;
}

.coach-knop {
  display: block;
  text-align: center;
  background: var(--tf-accent-vlak, var(--tf-accent));
  color: var(--tf-accent-ink, #fff);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 11px;
  border-radius: 10px;
  text-decoration: none;
}

.coach-knop:focus-visible {
  outline: 2px solid var(--tf-donker-tekst);
  outline-offset: 2px;
}

/* De regel echte theorie. Vandaag komt hij uit de uitleg die al bij een vraag
   hoort; een NAAM voor een denkfout bestaat nog niet (punt 156). */
.coach-les {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.74rem;
  color: var(--tf-donker-stil);
  line-height: 1.45;
}

.coach-les strong {
  display: block;
  color: var(--tf-donker-tekst);
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── iemand meenemen ──────────────────────────────────────────────────
 *
 * Eén strook en geen blok. De eigenaar vond het aanbrengblok te prominent, en
 * hij heeft gelijk: dit is geen reden om de app te openen.
 */
.brengstrook {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--tf-accent-tint-soft, var(--tf-accent-tint));
  border: var(--tf-border) solid var(--tf-accent-line, var(--tf-line));
  border-radius: 12px;
  padding: 11px 14px;
}

.bstekst {
  flex: 1;
  min-width: 200px;
  font-size: 0.76rem;
  color: var(--tf-ink-soft);
  margin: 0;
}

.bstekst strong {
  display: block;
  color: var(--tf-ink);
  font-size: 0.8rem;
}

.bsknop {
  background: var(--tf-surface);
  border: 1.5px solid var(--tf-accent);
  color: var(--tf-accent-strong, var(--tf-accent));
  font-weight: 600;
  font-size: 0.76rem;
  padding: 8px 14px;
  border-radius: 9px;
  white-space: nowrap;
  text-decoration: none;
}

/* ── de demomelding ───────────────────────────────────────────────────
 *
 * Amber en niet groen: dit is geen bevestiging maar een waarschuwing. Wie hem
 * ziet, kijkt naar cijfers die nagebootst zijn.
 */
.demomelding {
  margin: 0 0 14px;
  padding: 9px 13px;
  border-radius: 10px;
  background: var(--tf-surface-warm, var(--tf-surface-sunken));
  border: var(--tf-border) solid var(--tf-outline, var(--tf-line));
  font-size: 0.76rem;
  color: var(--tf-ink-soft);
}

.demomelding strong {
  color: var(--tf-ink);
}

/* ══════════════════════════════════════════════════════════════════════
 * DE ONDERWERPKAARTEN — wens 161, mijlpaal 4, 29-08-2026
 *
 * Variant B van de ontwerpronde, met de redenregel van variant E. Dit is de
 * pagina waar mensen het vaakst komen, dus hij mag er goed uitzien; een
 * percentage alleen zegt niet waarom je ergens heen zou moeten.
 *
 * De onderdelen die hier al stonden blijven zichtbaar ín de kaart. Punt 95 van
 * 26-08-2026 vroeg daar juist om; ze een tik dieper stoppen zou dat besluit
 * stil omkeren.
 * ══════════════════════════════════════════════════════════════════════ */

/*
 * DE HELE KAART IS ÉÉN LINK, EN DAAROM MOET DE STREEP HIER UIT.
 *
 * Reparatie van 31-08-2026, na de eigenaar: "onderwerpen pagina oogt beetje
 * druk doordat er zoveel tekst onderstreept is." Dat was geen ontwerpkeuze.
 * Een <a> geeft zijn onderstreping door aan ALLES wat erin staat en een kind
 * kan hem niet weghalen; met acht kaarten van gemiddeld acht onderdelen stond
 * er zo een heel scherm gestreepte tekst. De echte tekstlinks houden hun
 * streep — die moeten er juist uit springen.
 */
.okrt {
  background: var(--tf-surface);
  border: var(--tf-border) solid var(--tf-line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  color: inherit;
  text-decoration: none;
}

/*
 * DE BAND BOVEN EEN ONDERWERPKAART.
 *
 * VASTE NAVY EN GEEN TOKEN, en dat is met opzet. De illustraties zijn zelf van
 * rand tot rand navy; zou dit vlak met de stand meedraaien, dan kreeg je in de
 * lichte stand een lichte rand om een donker plaatje. Hetzelfde argument als bij
 * de donkere pil boven een opname in scherm.css: waar een BEELD de ondergrond
 * levert, hoort het vlak eromheen bij dat beeld en niet bij het thema.
 *
 * En passend maken in plaats van uitsnijden. De illustraties zijn 1024 bij 384
 * en deze band is ongeveer 360 bij 96 - uitsnijden zou boven en onder samen 29
 * procent wegnemen, precies waar het symbool staat. Met object-fit: contain
 * past het hele symbool erin, en omdat het vlak dezelfde navy heeft is de naad
 * niet te zien.
 */
.okrt-beeld {
  position: relative;
  height: 96px;
  overflow: hidden;
  background: #0b2349;
}

.okrt-beeld img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Hoogstens één merkje per kaart; zie de aantekening in het script. */
.okrt-merk {
  position: absolute;
  top: 9px;
  left: 9px;
  /* Altijd donker: dit merkje ligt op de navy beeldband van de kaart. */
  background: var(--tf-donker-vlak);
  color: var(--tf-donker-tekst);
  /* Randje in het merkgroen, 31-08-2026: "nog niet begonnen" viel niet genoeg
     op tegen de navy beeldband erachter. Geen andere kleur — dat is het rode
     merkje ernaast al — alleen een dunne rand om hem net iets te laten
     opvallen. Opmaak, huisstijl, geen besluit. */
  border: 1.5px solid var(--tf-accent);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
}

/*
 * Het rode merkje draagt WITTE letters, en dan is --tf-bad te licht: wit op
 * #e04f4f haalt 3,9 en dat is onder de grens voor kleine tekst. De donkere
 * variant haalt 4,9 en leest nog steeds als hetzelfde rood. In de donkere
 * stand wijst -ink naar een lichte tint en staat er donkere inkt op; ook daar
 * klopt het dus.
 */
.okrt-merk-let {
  background: var(--tf-bad-ink, #c03a3a);
  /* Dit merkje is zelf al rood en dringend; het groene randje van hierboven
     hoort er niet doorheen te schijnen. */
  border-color: var(--tf-bad-ink, #c03a3a);
}

.okrt-lijf {
  padding: 12px 14px 14px;
}

.okrt-reden {
  margin: 0;
  font-size: 0.8rem;
  color: var(--tf-ink-soft);
}

.okrt-meet {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 4px;
}

.okrt-baan {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: var(--tf-track);
  overflow: hidden;
  display: block;
}

.okrt-baan i {
  display: block;
  height: 100%;
  background: var(--tf-accent);
}

.okrt-cijfer {
  font-size: 0.72rem;
  color: var(--tf-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.okrt-cijfer-let {
  color: var(--tf-bad-ink, #c03a3a);
  font-weight: 600;
}

/* Het bestaande onderwerpblok zit nu binnenin een kaart en hoeft zijn eigen
   rand en achtergrond niet meer. */
.okrt .odeel {
  border: 0;
  background: none;
  padding: 0;
  margin: 4px 0 0;
}

/* Op een breed scherm twee kaarten naast elkaar. Vier zou kunnen, maar dan
   passen de onderdelen eronder niet meer leesbaar. */
@media (min-width: 1024px) {
  .odelen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }

  .okrt {
    margin-bottom: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * DE PAGINA VAN ÉÉN ONDERWERP — wens 161, mijlpaal 4, 29-08-2026
 * ══════════════════════════════════════════════════════════════════════ */

.terugnaar {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.8rem;
  color: var(--tf-muted);
  text-decoration: none;
}

.terugnaar:hover { color: var(--tf-ink); text-decoration: underline; }

.detailkop {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 132px;
  display: flex;
  align-items: flex-end;
  /* Altijd donker: hier ligt de illustratie van het onderwerp onder, met
     witte tekst erop. Zie .exband, dezelfde reden. */
  background: var(--tf-donker-vlak);
}

.detailbeeld { position: absolute; inset: 0; }

.detailbeeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detailsluier {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 35, 73, 0.94), rgba(11, 35, 73, 0.35));
}

.detailtekst { position: relative; padding: 0 20px 15px; }

.detailtekst h2 {
  font-family: var(--tf-font-display);
  font-size: 1.3rem;
  margin: 0;
  color: var(--tf-donker-tekst);
}

.detailsub {
  font-size: 0.76rem;
  color: var(--tf-donker-stil);
  margin: 3px 0 0;
}

.detaildrie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.detaildrie div {
  background: var(--tf-surface-sunken);
  border-radius: 11px;
  padding: 11px 13px;
}

.detaildrie strong {
  display: block;
  font-family: var(--tf-font-display);
  font-size: 1.2rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.detaildrie .detail-let { color: var(--tf-bad-ink, #c03a3a); }

.detaildrie span {
  display: block;
  font-size: 0.68rem;
  color: var(--tf-muted);
  margin-top: 2px;
}

/* Het onderdelenblok staat hier zonder eigen omlijsting; de pagina is al de
   omlijsting. */
#deel-onderwerp .odeel {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}

.detailknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.detailknoppen .knop { flex: 1 1 auto; text-align: center; }

@media (min-width: 1024px) {
  .detailknoppen .knop { flex: 0 0 auto; }
}

/* ══════════════════════════════════════════════════════════════════════
 * DE ONBOARDING EN DE DOWNLOADS — wens 161, mijlpaal 7, 29-08-2026
 * ══════════════════════════════════════════════════════════════════════ */

/*
 * De wijzerlaag ligt over het scherm maar dekt het niet af: je moet kunnen zien
 * waar de tekst het over heeft. Vandaar een doorzichtige sluier en een kaartje
 * onderaan, waar op een telefoon je duim is.
 */
.wijzerlaag {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(11, 35, 73, 0.32);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

.wijzerkaart {
  background: var(--tf-surface);
  border-radius: 16px;
  padding: 18px 20px 20px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 34px rgba(11, 35, 73, 0.24);
}

.wijzertel {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* NIET --tf-accent-ink: dat is de inkt die op het GROENE vlak hoort en
     is in de lichte stand wit. Hier staat de tekst op een witte kaart. */
  color: var(--tf-accent-strong, var(--tf-accent));
  font-weight: 600;
}

.wijzerkop {
  font-family: var(--tf-font-display);
  font-size: 1.15rem;
  margin: 6px 0 4px;
}

.wijzertekst {
  font-size: 0.88rem;
  color: var(--tf-ink-soft);
  margin: 0;
}

.wijzerknoppen {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.wijzerknoppen .knop { flex: 1; text-align: center; }

/* Op een computer hoort hij niet onderaan te plakken; daar kijk je naar het
   midden van het scherm en niet naar je duim. */
@media (min-width: 1024px) {
  .wijzerlaag { align-items: center; }
}

/* ── de vier vellen ─────────────────────────────────────────────────── */

.vellen {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

@media (min-width: 761px) {
  .vellen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vel-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--tf-surface);
  border: var(--tf-border) solid var(--tf-line);
  border-radius: 12px;
  padding: 12px 14px;
}

/* Een blaadje met regels erop. Geen icoon uit een lettertype: dat valt terug op
   wat het apparaat toevallig heeft. */
.vel-blad {
  width: 28px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--tf-canvas, #fff);
  border: var(--tf-border) solid var(--tf-outline, var(--tf-line));
  position: relative;
}

.vel-blad::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 8px;
  height: 2px;
  background: var(--tf-accent);
  box-shadow: 0 6px 0 var(--tf-line), 0 12px 0 var(--tf-line), 0 18px 0 var(--tf-line);
}

.vel-tekst { flex: 1; min-width: 0; }

.vel-tekst strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
}

.vel-tekst span {
  display: block;
  font-size: 0.74rem;
  color: var(--tf-muted);
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════════════
 * DE OEFENEXAMENS — wens 161, mijlpaal 6, 29-08-2026
 * ══════════════════════════════════════════════════════════════════════ */

.exband {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 132px;
  display: flex;
  align-items: flex-end;
  /* Altijd donker: hieronder ligt een foto en daar staat witte tekst op. Het
     vlak hoort dus bij het beeld en niet bij de stand van de app. */
  background: var(--tf-donker-vlak);
  margin-bottom: 14px;
}

.exband-beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/*
 * DE SLUIER LOOPT VAN ONDER NAAR BOVEN, EN DAT IS EEN REPARATIE VAN 31-08-2026.
 *
 * Hij liep van links naar rechts: dicht bij de linkerrand en bijna doorzichtig
 * rechts. Op een computer klopt dat, want daar staat de tekst links en de foto
 * loopt rechts vrij. Op een telefoon breekt diezelfde regel over de hele
 * breedte, en dan eindigt hij precies op het lichtste stuk lucht. De eigenaar
 * las hem daar niet meer.
 *
 * Nu is de sluier het donkerst waar de tekst ligt — onderin, over de hele
 * breedte — en licht hij naar boven op, zodat je nog steeds ziet dat er een
 * weg achter staat.
 */
.exband-sluier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 35, 73, 0.3) 0%, rgba(11, 35, 73, 0.82) 52%, rgba(11, 35, 73, 0.95) 100%);
}

.exband-in {
  position: relative;
  width: 100%;
  padding: 0 20px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.exband-in h3 {
  font-family: var(--tf-font-display);
  font-size: 1.25rem;
  margin: 0;
  color: var(--tf-donker-tekst);
}

.exband-in p {
  font-size: 0.74rem;
  color: var(--tf-donker-stil);
  margin: 3px 0 0;
}

.exstat { display: flex; gap: 22px; }

.exstat strong {
  display: block;
  font-family: var(--tf-font-display);
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--tf-donker-tekst);
  font-variant-numeric: tabular-nums;
}

.exstat span {
  display: block;
  font-size: 0.66rem;
  color: var(--tf-donker-stil);
  margin-top: 2px;
}

.exrooster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 761px) { .exrooster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .exrooster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ex {
  background: var(--tf-surface);
  border: var(--tf-border) solid var(--tf-line);
  border-radius: 12px;
  padding: 11px 12px 12px;
  text-decoration: none;
  color: inherit;
  display: block;
}

/*
 * HET WOORD "EXAMEN" STOND TWINTIG KEER IN KAPITALEN ONDER ELKAAR.
 *
 * Kapitalen trekken aandacht, en twintig keer hetzelfde woord dat aandacht
 * trekt is ruis - dezelfde soort ruis als de negentien keer "Nog te doen" die
 * hier eerder stond. Het woord blijft (je moet weten wat je aanwijst), maar
 * niet meer in kapitalen, en het NUMMER krijgt het gewicht.
 */
.ex-nr {
  display: block;
  font-size: 0.7rem;
  color: var(--tf-muted);
  font-weight: 600;
}

.ex-score {
  font-family: var(--tf-font-display);
  font-size: 1.1rem;
  margin: 5px 0 1px;
  font-variant-numeric: tabular-nums;
}

.ex-staat { display: block; font-size: 0.68rem; color: var(--tf-muted); }

.ex-gehaald { border-color: var(--tf-accent-line, var(--tf-accent)); background: var(--tf-accent-tint-soft, var(--tf-accent-tint)); }
.ex-gehaald .ex-score { color: var(--tf-accent-strong, var(--tf-accent-ink)); }
.ex-gezakt .ex-score { color: var(--tf-bad-ink, #c03a3a); }
.ex-open .ex-score { color: var(--tf-faint); }

/* De eerstvolgende krijgt de nadruk; de rest is stil aanwezig. */
.ex-nu {
  border-color: var(--tf-ink);
  border-width: 1.5px;
}

.ex-nu .ex-staat { color: var(--tf-ink); font-weight: 600; }
.ex:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; }

/*
 * DE VAKJES OP SLOT — 31-08-2026, de verdeling van de eigenaar: één open, twee
 * met een gratis account, de rest met een betaald account.
 *
 * Ze zien er anders uit dan een vakje dat je kunt doen: een streepjesrand en
 * een vlak dat leeg blijft. Dat is het verschil dat ontbrak — de vakjes waren
 * allemaal gelijk en allemaal aanklikbaar, dus zei het raster niets. Het
 * slotje staat rechtsboven; de zin eronder staat alleen bij de eerste van een
 * soort.
 */
.ex-slot,
.ex-betaald {
  background: transparent;
  border-style: dashed;
  border-color: var(--tf-outline);
  color: var(--tf-muted);
  position: relative;
}

.ex-slot .ex-nr,
.ex-betaald .ex-nr {
  color: var(--tf-muted);
}

/* Het slotje zelf: een tekening en geen letterteken, want een emoji ziet er op
   elk apparaat anders uit en telt niet mee als tekst. */
.ex-slot::after,
.ex-betaald::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 11px;
  width: 13px;
  height: 11px;
  border-radius: 2px;
  background: currentcolor;
  opacity: 0.55;
}

.ex-slot::before,
.ex-betaald::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 14px;
  width: 7px;
  height: 8px;
  border: 1.5px solid currentcolor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  opacity: 0.55;
}

/* Het betaalde slot is stiller dan het gratis slot: dat eerste is voor later,
   het tweede is de stap die je vandaag kunt zetten. */
.ex-betaald {
  border-color: var(--tf-line);
  color: var(--tf-faint);
}

/*
 * DE RONDLEIDING OP EEN TELEFOON.
 *
 * Punt 194. Tot 30-08-2026 was dit op elk scherm hetzelfde zwevende kaartje,
 * gemaakt voor een computer en verkleind meegenomen. Op 390 breed werd het
 * een blokje midden op een pagina die eronder doorschemert, en dan is niet te
 * zien of het bij de pagina hoort of erover ligt.
 *
 * Op een telefoon vult het kaartje daarom het hele scherm: de tekening groot
 * bovenaan, de tekst in het midden, de knoppen onderaan waar je duim al ligt.
 * Vanaf 761 blijft het een kaart in het midden, want daar is een schermvullend
 * kaartje voor drie zinnen onbeschoft.
 */
.wijzerbeeld {
  display: block;
  margin: 0 auto 18px;
  width: 96px;
  height: 96px;
  color: var(--tf-ink-soft);
}

.wijzerbeeld svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 760px) {
  .wijzerlaag {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .wijzerkaart {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 32px 26px calc(32px + env(safe-area-inset-bottom));
    text-align: center;
  }

  /*
   * DE TEKENING PAKT DE HELFT VAN DE VRIJE RUIMTE.
   *
   * De knoppen hebben margin-top: auto en slokten daarmee ALLES op: op een
   * telefoon van 412 bij 805 stond er 298 punten niets tussen de laatste zin
   * en de eerste knop, met de tekening tegen de bovenrand. Gemeten door de
   * schermlens.
   *
   * Een tweede auto-marge hierboven verdeelt die ruimte in tweeën: de tekening
   * en de tekst komen in het midden te staan en de knoppen blijven onderaan
   * waar je duim al ligt.
   */
  .wijzerbeeld {
    width: 128px;
    height: 128px;
    margin-top: auto;
    margin-bottom: 26px;
  }

  .wijzerkop {
    font-size: 1.5rem;
  }

  .wijzertekst {
    max-width: 30ch;
    margin-inline: auto;
  }

  /* De knoppen onderaan, waar je duim al ligt, en onder elkaar: naast elkaar
     is "Overslaan" even zwaar als "Volgende", en dat is het niet. */
  .wijzerknoppen {
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 34px;
  }

  .wijzerknoppen .knop {
    width: 100%;
    justify-content: center;
  }
}

/*
 * DE RECHTERKANT VAN DE DEELSTROOK: de knop met daaronder hoe vaak je gedeeld
 * hebt. De teller staat er pas als er iets te tellen valt; een nul is hier
 * geen informatie maar een verwijt.
 */
.bsrechts {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.bsteller {
  margin: 0;
  font-size: 0.68rem;
  color: var(--tf-muted);
  font-variant-numeric: tabular-nums;
}

/*
 * HET LOGO IN DE ZIJBALK, en de balk bovenaan die daar dan weg mag.
 *
 * Ownerbesluit 30-08-2026. Op een computerscherm stonden er twee merken van
 * hetzelfde product tegelijk in beeld: het echte logo in de balk bovenaan en
 * een afgeleid vierkantje in de zijbalk. Nu draagt de zijbalk het echte logo
 * en verdwijnt de balk bovenaan.
 *
 * DE AVATAR VERDWIJNT DAARMEE OOK, en dat mag: de zijbalk heeft onderaan
 * "Mijn account" staan, dus de weg naar je profiel blijft er. Onder 1024
 * bestaat de zijbalk niet en blijft de balk bovenaan gewoon staan.
 */
@media (min-width: 1024px) {
  .topbalk {
    display: none;
  }

  .zijmerk-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: block;
  }
}

/*
 * DE ACHT TEGELS VAN "WAAR JE STAAT". Zie de aantekening in
 * leeromgeving.js bij toonVooruit voor waarom dit geen streepjes meer zijn.
 *
 * Vier per rij op een telefoon: op 390 breed is dat 78 punten per tegel, en
 * daar past "Verantwoord" nog leesbaar in twee regels op. Acht naast elkaar
 * zou 39 punten geven en dan past er geen enkele naam.
 */
.segmenten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.segment {
  position: relative;
  display: grid;
  gap: 4px;
  /* Krap gehouden: acht tegels met een naam kosten meer hoogte dan acht
     naamloze streepjes, en de eigenaar vond dit blok al te veel ruimte kosten.
     Gemeten op 390 breed: 50 punten per tegel werd 42, en het hele blok ging
     van 226 naar 194. */
  padding: 6px 5px 6px;
  border-radius: 8px;
  background: var(--tf-surface-sunken, var(--tf-track));
  color: var(--tf-ink-soft);
  text-decoration: none;
}

.segment:hover {
  color: var(--tf-ink);
}

.segbaan {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: var(--tf-track);
  overflow: hidden;
}

.segbaan i {
  display: block;
  height: 100%;
  background: var(--tf-accent);
}

.segnaam {
  font-size: 0.6rem;
  line-height: 1.2;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Een afgerond onderwerp: het vlak kleurt mee EN er komt een vinkje bij.
   Kleur alleen zou het verschil wegnemen voor wie groen en grijs niet uit
   elkaar ziet, en dat is een op de twaalf mannen. */
.segment.af {
  background: var(--tf-accent-tint);
  color: var(--tf-accent-strong);
}

.segaf {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 12px;
  height: 12px;
  color: var(--tf-accent-strong);
}

.segaf svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* De ene regel eronder, met de uitleg als klein knopje erachter in plaats
   van als knop over de volle breedte. */
.vooruit-regel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: var(--tf-ink-soft);
}

.vooruit-regel .uitlegknopje {
  margin: 0;
  padding: 0;
  width: auto;
}

/* Vanaf de tablet is er ruimte voor alle acht op één rij. */
@media (min-width: 761px) {
  .segmenten {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/*
 * DE REGEL DIE ZEGT DAT ER MEER IS, en de regel die zegt dat er niets meer
 * is. Ze staan allebei op de plek waar anders de vierde rij zou beginnen.
 */
.omeer {
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tf-accent-strong, var(--tf-accent));
}

.oafrij {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--tf-accent-tint);
  color: var(--tf-accent-strong);
  font-size: 0.8rem;
  font-weight: 600;
}

.oafrij svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/*
 * DRIE KOLOMMEN VANAF 1400 BREED.
 *
 * Ownerwens 30-08-2026: "Denk dat desktop ook wel 3 kolommen misschien wel
 * passen als scherm breed genoeg is, qua responsibiteit zou dat wel top zijn."
 *
 * WAAROM 1400 EN NIET 1280. De zijbalk is 236 breed en de kolom heeft links
 * en rechts marge. Op 1280 blijft er ongeveer 1000 over, en drie kaarten met
 * hun tussenruimte worden dan 325 breed - daar past "Doorsnijden militaire
 * colonnes" niet meer op één regel, en dat is de langste naam in de lijst.
 * Op 1400 wordt het 365 en dat haalt het net.
 *
 * Dit is een DERDE breekpunt, en de afspraak was er twee. Het mag hier omdat
 * het niets verplaatst: dezelfde kaarten in hetzelfde raster, alleen met een
 * kolom erbij. Zet er nooit een breekpunt bij dat wel iets verplaatst.
 */
@media (min-width: 1400px) {
  .odelen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* De zin die op de plek van de drie welkomstappen kwam; zie de aantekening
   in leeromgeving.html bij "Nieuw hier?". */
.welkomtekst {
  margin: 0 0 12px;
  color: var(--tf-ink-soft);
  font-size: 0.92rem;
}

/* De kop "Waar dit onderwerp uit bestaat" raakte de onderkant van de drie
   vakjes: gemeten tussenruimte nul. Twee blokken die elkaar raken lezen als
   één blok. */
#deel-onderwerp .detaildrie + .sectiekop {
  margin-top: 20px;
}