/* ceeme-stappen.css — "WAT ÉÉN METING IS", VIER STAPPEN NAAST HUN BEWIJSSTUK.
   ================================================================================================
   De inhoud staat in lib/vierstappen.js; hier staat alleen hoe het zich gedraagt.

   ── De vorm ───────────────────────────────────────────────────────────────────────────────────
   Elke stap is een rij van twee kolommen: links het woord, rechts het ding. De rij is bijna een
   schermhoogte hoog en het bewijsstuk staat op position:sticky. Terwijl je door de tekst van stap
   twee scrollt, blijft het antwoord met zijn bronnen naast je staan; zodra stap drie begint, schuift
   het weg en neemt de bevinding het over.

   Dat is de vorm van de eerste Mistral-pagina — één kolom die beweegt, één die blijft — en het werkt
   omdat het je per keer één ding laat bekijken in plaats van vier vakjes tegelijk.

   ── Waarom hier geen JavaScript staat ─────────────────────────────────────────────────────────
   Er is er geen nodig. position:sticky binnen een grid-cel doet het hele effect, de browser regelt
   het op de compositor, en er is niets dat kan falen. Onder 900px valt het vanzelf terug op één
   kolom met het bewijsstuk onder zijn stap — in dezelfde volgorde, want dat is de volgorde in de
   HTML. Een crawler leest alle vier de stappen én alle vier de bewijsstukken als gewone tekst.

   Eén accent: amber #C6892B. */

.cmp-st { padding: 88px 0 40px }
.st-wrap { max-width: 880px; margin: 0 auto; padding: 0 24px }

.st-boven { font-family: "Space Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #A8721F; margin: 0 0 10px }
.cmp-st h2 { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.08; margin: 0 0 8px; color: #17170F }

/* ── De lijst ─────────────────────────────────────────────────────────────────────────────────── */
.st-lijst { list-style: none; margin: 26px auto 0; padding: 0 24px; max-width: 1120px }

.st-stap { display: grid; gap: 30px; padding: 0 0 56px }

/* ── Het woord ────────────────────────────────────────────────────────────────────────────────── */
.st-woord { max-width: 46ch }
.st-n { display: block; font-family: "Space Mono", ui-monospace, monospace; font-size: 12px;
  font-weight: 700; letter-spacing: .1em; color: #C6892B; margin: 0 0 8px }
.st-woord h3 { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(22px, 3vw, 32px); line-height: 1.15; margin: 0 0 12px; color: #17170F }
.st-woord p { color: #5A564F; line-height: 1.7; margin: 0; font-size: 16.5px }

/* ── Het bewijsstuk ───────────────────────────────────────────────────────────────────────────
   Wit paneel met een fijne rand. Bewust géén nagemaakt browservenster met drie bolletjes: dit is
   geen schermafbeelding van een product, het is het gegeven zelf. Een venster eromheen zou
   suggereren dat je naar een interface kijkt, en dat is precies de illusie die we niet willen. */
.st-bewijs { margin: 0; background: #fff; border: 1px solid rgba(34, 30, 24, .12);
  border-radius: 14px; padding: 20px 22px 16px }

/* Het labeltje boven elk onderdeel. Klein, monospace, amber — hetzelfde teken als "in het kort"
   elders op de site, zodat je het herkent als "dit is een veld, geen zin". */
.st-cue { display: block; font-family: "Space Mono", ui-monospace, monospace; font-size: 10px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A8721F;
  margin: 0 0 8px }
.st-cue + * { margin-top: 0 }
* + .st-cue { margin-top: 18px }

/* De prompt en het adres: monospace, want dat zijn ze ook. Amberstreep ervoor in plaats van een
   grijs blok eromheen — het is een regel die verstuurd wordt, geen codevoorbeeld om te kopiëren. */
.st-mono { font-family: "Space Mono", ui-monospace, monospace; font-size: 14px; line-height: 1.55;
  color: #17170F; margin: 0; padding-left: 14px; border-left: 2px solid #C6892B;
  overflow-wrap: anywhere }

.st-tekst { color: #3A3A31; line-height: 1.65; margin: 0; font-size: 14.5px }
/* De gemarkeerde woorden zijn de bevinding zelf: "de goedkope optie". Onderstreping in amber in
   plaats van een gele highlighter — die leest als een fout, en dit is geen fout maar een kadering. */
.st-tekst mark { background: none; color: #17170F; font-weight: 600;
  box-shadow: inset 0 -.5em 0 rgba(198, 137, 43, .22) }

/* De bronnen. Dit lijstje is het hele verschil met een tracking-tool, dus het krijgt ruimte. */
.st-bron { list-style: none; margin: 0; padding: 0 }
.st-bron li { font-family: "Space Mono", ui-monospace, monospace; font-size: 12.5px; color: #5A564F;
  padding: 7px 0; border-bottom: 1px solid rgba(34, 30, 24, .07); overflow-wrap: anywhere }
.st-bron li:last-child { border-bottom: 0 }

/* De velden van een bevinding, als echte <dl>. Dezelfde vorm die we klanten aanraden voor hun eigen
   definities — dus gebruiken we hem hier ook. */
.st-veld { display: grid; grid-template-columns: minmax(72px, auto) 1fr; gap: 0 16px; margin: 0 }
.st-veld dt { font-family: "Space Mono", ui-monospace, monospace; font-size: 11.5px; color: #A8721F;
  padding: 7px 0; border-top: 1px solid rgba(34, 30, 24, .07) }
.st-veld dd { margin: 0; font-size: 13.5px; color: #17170F; line-height: 1.45; padding: 7px 0;
  border-top: 1px solid rgba(34, 30, 24, .07) }
.st-veld dt:first-of-type, .st-veld dt:first-of-type + dd { border-top: 0 }

.st-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0 }
.st-meta li { font-family: "Space Mono", ui-monospace, monospace; font-size: 10.5px; color: #83837A;
  background: #F6F2E9; border-radius: 999px; padding: 5px 10px }
.st-meta b { color: #17170F; font-weight: 700 }

/* Het label "voorbeeld". Klein en grijs, maar het staat er, en op elke kaart. Verzinnen mag niet,
   illustreren wel — zolang je het verschil opschrijft. */
.st-bewijs figcaption { margin: 16px 0 0; padding-top: 12px; font-size: 11.5px; color: #83837A;
  line-height: 1.5; border-top: 1px solid rgba(34, 30, 24, .07) }

/* ── Het slot ─────────────────────────────────────────────────────────────────────────────────
   Njusja's zin, en de enige zin in het blok die geen stap is. Daarom staat hij los, groter, met de
   amberstreep ervoor: hij is de conclusie van de vier erboven. */
.st-slot { max-width: 880px; margin: 8px auto 0; padding: 22px 24px 0;
  font-family: "Manrope", system-ui, sans-serif; font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.5; font-weight: 600; color: #17170F }
.st-slot { border-top: 1px solid rgba(34, 30, 24, .1) }

/* ── Twee kolommen, en het plakken ────────────────────────────────────────────────────────────
   Pas vanaf 900px. Daaronder is er geen ruimte voor twee kolommen en zou plakken betekenen dat het
   bewijsstuk het halve scherm blokkeert terwijl je de tekst leest.

   De hoogte van een rij is min-height:72vh. Dat getal is de dosering: te laag en het bewijsstuk
   plakt niet lang genoeg om op te vallen, te hoog en je zit lang te scrollen door een lege kolom.
   Bij 72vh blijft elk stuk ongeveer één volle schermbeweging staan.

   top:16vh houdt het paneel onder de plakkende kop en ongeveer op ooghoogte. */
@media (min-width: 900px) {
  .st-stap { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; min-height: 72vh }
  .st-woord { position: sticky; top: 22vh; padding-top: 4px }
  .st-bewijs { position: sticky; top: 16vh }
}

/* Met beweging uitgezet gaat het plakken eruit. Sticky is technisch geen animatie, maar het effect
   is beweging die je niet zelf veroorzaakt, en dat is precies waar die instelling over gaat.
   Wat overblijft: vier stappen met hun bewijsstuk ernaast, stil. Niets is weg. */
@media (prefers-reduced-motion: reduce) {
  .st-woord, .st-bewijs { position: static }
  .st-stap { min-height: 0 }
}

/* ══ Het afspelen ════════════════════════════════════════════════════════════════════════════════
   De regie staat in ceeme-stappen.js. Hier alleen de twee toestanden van een stukje tekst.

   Let op wat er NIET staat: nergens in dit bestand wordt iets standaard verborgen. `st-uit` wordt
   door JavaScript gezet, vlak vóór het afspelen. Zonder JavaScript komt die klasse er nooit en staat
   elk bewijsstuk gewoon compleet op de pagina. Dat is de hele reden dat het zo geregeld is: een
   pagina die zijn inhoud pas toont als er een script draait, is voor een AI een lege pagina — en
   dat is precies wat wij klanten afraden. */
.st-stuk { display: inline }
.st-uit { opacity: 0 }
/* 260ms is lang voor één teken en kort voor een woord. Dat is met opzet: de tekens komen zo snel na
   elkaar dat hun vervagingen overlappen, en dat geeft het zachte aanzwellen van een cursor die
   typt in plaats van een reeks losse flitsjes. */
.st-aan { opacity: 1; transition: opacity 260ms ease }
/* De bronnen, de velden en de labels schuiven een paar pixels mee omhoog. Bij een regel tekst zou
   dat rommelig zijn; bij een blok is het precies genoeg om te zien dat hij aankomt. */
.st-bron li.st-uit, .st-veld dt.st-uit, .st-veld dd.st-uit, .st-meta li.st-uit {
  transform: translateY(6px);
}
.st-bron li.st-aan, .st-veld dt.st-aan, .st-veld dd.st-aan, .st-meta li.st-aan {
  transform: none; transition: opacity 300ms ease, transform 300ms cubic-bezier(.16, 1, .3, 1);
}

/* De cursor. Hij staat alleen achter de regel die op dat moment getypt wordt en verdwijnt zodra ze
   af is — een cursor die blijft knipperen in een tekst die klaar is, suggereert dat er nog iets
   komt. Amber, 1.5px, dezelfde streep als links van de prompt. */
.st-mono.st-caret::after {
  content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px;
  vertical-align: text-bottom; background: #C6892B; animation: st-knipper 900ms steps(2) infinite;
}
@keyframes st-knipper { 50% { opacity: 0 } }

/* Zolang een stuk speelt, staat de hoogte al vast: alle tekst is er, alleen onzichtbaar. Er springt
   dus niets. Dat is het voordeel van opacity boven een echte typemachine die tekens toevoegt. */