/* DataGrip · Eigen hulpmiddelen: het overzicht (projecten.html), HashMatch en GroeiWijzer
   Gedeeld door de drie pagina's, geladen na basis.css en pagina.css.
   Voorvoegsels: proj- (het overzicht en wat de drie pagina's delen), hm- (HashMatch), gw- (GroeiWijzer).
   Papier (het grijze blad, de witte strook, het rapport) is het enige dat Geist Mono draagt.
   Omlijnde kaders: alleen het klasoverzicht van GroeiWijzer. De rest ordent met haarlijnen.
   De paginakop is de standaardkop uit pagina.css: geen eigen maat voor de h1, de toelichting of de lucht.
   Voorbeelddata draagt het gedeelde merkje uit de huisstijl (.merkje), op een vaste plek (ronde 7, B22):
   in een venster (het klasoverzicht, het kaartje van een leerling) rechts in de balk,
   bij een papieren voorwerp of een figuur rechts eronder, op 8 pixels. */

/* ===== Gedeeld ===== */
/* de kop: de kopregel en de knoppen links, de toelichting rechts. Op smal: kop, toelichting, knoppen. */
.proj-kop-rij { display: grid; gap: clamp(16px, 2vw, 26px); }
.proj-kop-rij .lede { margin-top: 0; }
.proj-kop-rij .acties { margin-top: 4px; }
.lede strong { font-weight: 650; color: var(--bright); }
@media (min-width: 1000px) {
  .proj-kop-rij { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "titel lede" "acties lede"; column-gap: clamp(32px, 5vw, 80px); row-gap: clamp(22px, 2.4vw, 30px); align-items: start; }
  .proj-kop-rij--kaal { grid-template-areas: "titel lede"; }
  .proj-kop-rij .h1 { grid-area: titel; }
  .proj-kop-rij .lede { grid-area: lede; padding-top: .3em; }
  .proj-kop-rij .acties { grid-area: acties; margin-top: 0; }
}

/* de plek van het merkje Voorbeelddata bij een papieren voorwerp of een figuur: rechts eronder, op 8 pixels.
   Het merkje zelf (.merkje) komt uit de huisstijl en krijgt hier geen eigen maat, alleen de regelhoogte die het in
   het dashboard van de homepage ook heeft. Onder het beeld van HashMatch staat links op dezelfde regel de knop
   "Speel opnieuw af" (zie verderop). */
.proj-merk-onder, .hm-beeld-voet { display: flex; align-items: flex-start; justify-content: flex-end; gap: 6px 18px; margin-top: 8px; }
.hm-beeld-voet { justify-content: space-between; min-height: 24px; }
.hm-beeld-voet .merkje { margin-left: auto; }
:is(.proj-merk-onder, .hm-beeld-voet, .gw-proef-kop) .merkje { line-height: 1.35; }

/* een tekstlink naast of onder een knop is op een telefoon net zo goed te raken als de knop: minstens 44 pixels hoog */
.acties .link { padding-block: 10px; }

/* geen losse woorden op een laatste regel, ook in de rijen en de lijsten (alinea's regelt de huisstijl al) */
.proj-rijen dd, .proj-lijn-haltes li, .proj-index-wat, .hm-toep-uit { text-wrap: pretty; }

/* rijen met een haarlijn: links het begrip, rechts de zin */
.proj-rijen { border-top: 1px solid var(--line-mid); }
.proj-rijen > div { padding: 14px 0 16px; border-bottom: 1px solid var(--line-mid); }
.proj-rijen dt { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.012em; line-height: 1.35; color: var(--bright); }
.proj-rijen dd { margin: 3px 0 0; font-size: 1rem; line-height: 1.5; }
@media (min-width: 640px) {
  .proj-rijen > div { display: grid; grid-template-columns: minmax(0, 11.5em) minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 17px 0 19px; }
  .proj-rijen dd { margin: 0; }
}

/* de blokpijl van de flyer: staand op smal, liggend op breed */
.proj-pijl { display: grid; place-items: center; height: 40px; }
.proj-pijl svg { width: 22px; height: 26.5px; fill: var(--teal); transform: rotate(90deg); }

/* de oproep van de pagina: op het lichte vlak, direct onder de laatste inhoud. Links de vraag, rechts de zin en de knop. */
.proj-oproep-rij { display: grid; gap: 14px; }
.proj-oproep-rij p { max-width: 33em; }
.proj-oproep-rij .acties { margin-top: clamp(18px, 2.2vw, 26px); }
@media (min-width: 900px) {
  .proj-oproep-rij { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .proj-oproep-rij > div { padding-top: 8px; }
}

/* het andere hulpmiddel: een smalle band boven de voet. Bij meer hulpmiddelen komt er een rij bij. */
.proj-ander-rij { display: grid; gap: 8px 32px; }
.proj-ander-label { font-size: .875rem; font-weight: 600; color: var(--muted); }
.proj-ander h2 { margin-top: 2px; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--bright); }
.proj-ander-zin { max-width: 30em; font-size: 1rem; line-height: 1.5; }
.proj-ander-links { display: flex; flex-wrap: wrap; gap: 0 26px; }
.proj-ander-links .link { padding-block: 9px; font-weight: 600; white-space: nowrap; }
@media (min-width: 900px) {
  .proj-ander-rij { grid-template-columns: minmax(0, 3.2fr) minmax(0, 5.2fr) auto; column-gap: clamp(28px, 4vw, 64px); align-items: center; }
}


/* ===== HashMatch: het beeld =====
   Twee grijze bladen met adressen (blijven bij de eigen organisatie), per adres een draad naar een witte
   strook met codes, tussen de stroken de lijnen tussen gelijke codes, eronder de uitkomst tussen twee teal lijnen.
   Smal: de bladen boven, de stroken eronder. Vanaf 640 pixels eigen breedte ligt alles op een rij.
   Zonder data-stap staat het beeld in de eindtoestand. Het script zet data-stap op 0 tot en met 3.
   De uitkomst neemt pas ruimte in als hij er voor het eerst staat: dan groeit het beeld (zie "de vier toestanden"). */
.hm-podium > .wrap > .h2 { margin-bottom: clamp(20px, 2.8vw, 40px); }
/* "Speel opnieuw af" staat links onder het beeld, op de regel van het merkje. Het raakvlak is 44 pixels hoog,
   de regel zelf blijft zo hoog als het merkje: de marges trekken de knop terug. */
.hm-opnieuw { margin: -10px 0 -12px; padding: 12px 0; background: none; border: 0; font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.3; cursor: pointer; }

.hm-beeld { margin: 0; min-width: 0; container-type: inline-size; }
.hm-veld {
  --rijen: 5; --rij: 30px; --balk: 26px; --vlak: var(--bg); --dicht: scaleY(0);
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, .34fr) minmax(0, .34fr) minmax(0, 1fr);
}

.hm-zone { padding-bottom: 8px; font-size: .8125rem; line-height: 1.3; color: var(--muted); }
.hm-zone strong { display: block; font-size: .9375rem; font-weight: 650; letter-spacing: -0.01em; color: var(--bright); }
.hm-zone--a { grid-row: 1; grid-column: 1 / 3; }
.hm-zone--b { grid-row: 1; grid-column: 3 / 5; margin-left: 6px; }
.hm-zone--midden { grid-row: 3; grid-column: 1 / -1; position: relative; align-self: center; padding: 0; text-align: center; font-weight: 600; }
.hm-zone--midden::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--line-strong); }
.hm-zone--midden > span { position: relative; padding: 0 10px; background: var(--vlak); }
.hm-zone--midden .lang { display: none; }
.hm-grens { display: none; }

/* het grijze blad: het bestand zoals het bij de organisatie staat */
.hm-blad { grid-row: 2; min-width: 0; background: #c3c8c5; color: #35414a; font: 400 10.5px/1.2 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: -0.01em; }
.hm-blad--a { grid-column: 1 / 3; margin-right: 6px; }
.hm-blad--b { grid-column: 3 / 5; margin-left: 6px; }
.hm-blad-balk { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--balk); padding: 0 8px; background: #abb1ae; color: #27323a; white-space: nowrap; overflow: hidden; }
.hm-rijen li { position: relative; display: flex; align-items: center; height: var(--rij); white-space: nowrap; }
.hm-blad .hm-rijen li { border-top: 1px solid #a4aaa7; }
.hm-nr { flex: none; display: grid; place-items: center; align-self: stretch; width: 20px; background: #b5bab7; border-right: 1px solid #a4aaa7; color: #313c43; }
.hm-adres { position: relative; padding: 0 7px; overflow: hidden; }
.hm-blad li.is-match::before { content: ''; position: absolute; left: 23px; right: 3px; top: 4px; bottom: 4px; background: #9dd4cc; transform-origin: 0 50%; }
.hm-blad li.is-match .hm-adres { font-weight: 600; color: #14242a; }

/* de draad van adres naar code: smal een pijl omlaag per blad, breed een draad per rij */
.hm-draden { grid-row: 3; position: relative; height: 40px; }
.hm-draden--a { grid-column: 1; }
.hm-draden--b { grid-column: 4; }
.hm-draden i { display: none; }
.hm-draden i:first-child { display: block; position: absolute; left: 50%; top: 5px; bottom: 9px; width: 0; border-left: 1.5px solid var(--line-teal); transform-origin: 50% 0; }
.hm-draden i:first-child::after { content: ''; position: absolute; left: -5.25px; bottom: -6px; border-style: solid; border-width: 7px 4.5px 0; border-color: var(--line-teal) transparent transparent; }

/* de witte strook: alleen codes, het enige dat wordt vergeleken */
.hm-strook {
  --tand: 5px;
  grid-row: 4; min-width: 0; padding-bottom: 11px; background: #fff; color: #001620; text-align: center;
  font: 400 10.5px/1.2 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: -0.01em;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tand)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tand)) 100%;
}
.hm-strook--a { grid-column: 1; }
.hm-strook--b { grid-column: 4; }
.hm-strook-balk { display: grid; place-items: center; height: var(--balk); margin: 0 7px; border-bottom: 1px dashed currentColor; font-weight: 600; white-space: nowrap; }
.hm-strook .hm-rijen li { justify-content: center; }
.hm-code { position: relative; }
.hm-strook li.is-match::before { content: ''; position: absolute; left: 6px; right: 6px; top: 4px; bottom: 4px; background: #bfe9e4; transform-origin: 0 50%; }
.hm-strook li.is-match .hm-code { font-weight: 600; color: #075e59; }
.hm-strook li:not(.is-match) .hm-code { opacity: .6; }

/* tussen de stroken: een lijn per paar gelijke codes */
.hm-brug { grid-row: 4; grid-column: 2 / 4; position: relative; min-width: 0; margin-top: var(--balk); height: calc(var(--rijen) * var(--rij)); }
.hm-veeg, .hm-veeg-in { position: absolute; inset: 0; }
.hm-veeg { overflow: hidden; }
.hm-brug svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-brug line { stroke: var(--teal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hm-gelijk { position: absolute; left: 50%; top: var(--y); width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 1.5px solid var(--teal); border-radius: 50%; background: var(--vlak); color: var(--teal); font-size: 14px; font-weight: 700; line-height: 18px; text-align: center; }

/* de uitkomst staat vrij tussen twee teal lijnen, zoals het ene cijfer op de homepage */
.hm-uitkomst { position: relative; grid-row: 5; grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(14px, 5cqi, 32px); margin-top: 18px; padding-block: 12.5px 14.5px; scroll-margin-bottom: 10px; }
.hm-uitkomst::before, .hm-uitkomst::after { content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--line-teal); transform-origin: 0 50%; }
.hm-uitkomst::before { top: 0; }
.hm-uitkomst::after { bottom: 0; }
.hm-uitkomst p { display: grid; align-content: start; }
.hm-uitkomst strong { font-size: clamp(2.3rem, 11cqi, 3.2rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--bright); font-variant-numeric: tabular-nums; }
.hm-uitkomst p + p strong { color: var(--teal); }
.hm-uitkomst span { margin-top: 3px; font-size: .9375rem; line-height: 1.3; color: var(--text); }
/* de twee regels onder de cijfers breken op dezelfde plek af ("adressen" boven, de rest eronder) zolang ze niet
   allebei op een regel passen: zo staat er nooit een regel van een naast een van twee. Vanaf 860 pixels eigen
   breedte passen ze allebei en vervalt de afbreking. */
@container (min-width: 860px) { .hm-uitkomst br { display: none; } }
/* wat elke organisatie na afloop weet. Alleen op breed, naast de uitkomst. Smaller zegt de tekst van stap 3 dit al
   en blijft het beeld compact. */
.hm-weet { display: none; max-width: 16.5em; font-size: .875rem; line-height: 1.45; color: var(--text); text-wrap: balance; }
.hm-weet strong { color: var(--bright); }

@container (max-width: 319px) {
  .hm-nr { display: none; }
  .hm-blad li.is-match::before { left: 3px; }
  .hm-adres { padding: 0 6px; }
  .hm-blad, .hm-strook { font-size: 10px; }
}

@container (min-width: 640px) {
  .hm-veld {
    --rij: 34px; --balk: 28px; --dicht: scaleX(0);
    grid-template-columns: minmax(0, 1.2fr) 30px minmax(0, .7fr) minmax(56px, .8fr) minmax(0, .7fr) 30px minmax(0, 1.2fr);
  }
  .hm-zone { padding-bottom: 12px; }
  .hm-zone--a { grid-column: 1; }
  .hm-zone--b { grid-column: 7; margin-left: 0; }
  .hm-zone--midden { grid-row: 1; grid-column: 3 / 6; align-self: end; padding-bottom: 12px; font-weight: 400; }
  .hm-zone--midden::before { content: none; }
  .hm-zone--midden > span { padding: 0; background: none; }
  .hm-zone--midden .kort { display: none; }
  .hm-zone--midden .lang { display: block; }
  .hm-grens { display: block; grid-row: 1 / 3; justify-self: center; align-self: stretch; width: 0; border-left: 1.5px dashed var(--line-strong); }
  .hm-grens--a { grid-column: 2; }
  .hm-grens--b { grid-column: 6; }

  .hm-blad--a { grid-column: 1; margin: 0; }
  .hm-blad--b { grid-column: 7; margin: 0; }
  .hm-draden { grid-row: 2; display: grid; grid-template-rows: repeat(var(--rijen), var(--rij)); height: auto; margin-top: var(--balk); }
  .hm-draden--a { grid-column: 2; }
  .hm-draden--b { grid-column: 6; }
  .hm-draden i, .hm-draden i:first-child { display: block; position: relative; left: auto; top: auto; bottom: auto; align-self: center; width: auto; height: 0; border-left: 0; border-top: 1.5px solid var(--line-teal); transform-origin: 0 50%; }
  .hm-draden i::after, .hm-draden i:first-child::after { content: ''; position: absolute; left: auto; right: -1px; top: -4.75px; bottom: auto; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--line-teal); }
  .hm-draden--b i, .hm-draden--b i:first-child { transform-origin: 100% 50%; }
  .hm-draden--b i::after, .hm-draden--b i:first-child::after { right: auto; left: -1px; border-width: 4px 6px 4px 0; border-color: transparent var(--line-teal) transparent transparent; }
  .hm-strook { grid-row: 2; }
  .hm-strook--a { grid-column: 3; }
  .hm-strook--b { grid-column: 5; }
  .hm-brug { grid-row: 2; grid-column: 4; }
  .hm-uitkomst { grid-row: 3; grid-column: 3 / 6; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; margin-top: 20px; }
  .hm-uitkomst strong { font-size: clamp(2.3rem, 5cqi, 3.2rem); }
}
@container (min-width: 860px) {
  .hm-veld {
    --rij: 38px; --balk: 30px;
    grid-template-columns: minmax(0, 1.2fr) clamp(40px, 4.6cqi, 60px) minmax(0, .64fr) minmax(80px, 1fr) minmax(0, .64fr) clamp(40px, 4.6cqi, 60px) minmax(0, 1.2fr);
  }
  .hm-blad, .hm-strook { font-size: 12.5px; }
  .hm-strook { --tand: 6px; padding-bottom: 13px; }
  .hm-blad-balk { padding: 0 12px; }
  .hm-nr { width: 28px; }
  .hm-adres { padding: 0 12px; }
  .hm-blad li.is-match::before { left: 32px; right: 5px; top: 5px; bottom: 5px; }
  .hm-strook li.is-match::before { left: 10px; right: 10px; top: 5px; bottom: 5px; }
  .hm-gelijk { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 15px; line-height: 22px; }
  .hm-uitkomst { margin-top: 20px; padding-block: 13.5px 15.5px; column-gap: 28px; }
  .hm-weet { display: block; grid-row: 3; align-self: center; margin-top: 20px; font-size: .9375rem; }
  .hm-weet--a { grid-column: 1; }
  .hm-weet--b { grid-column: 7; }
}

/* de vier toestanden. Stap 0: alleen de bladen. 1: de codes. 2: de gelijke codes. 3: de uitkomst. */
.hm-rijen li:nth-child(1), .hm-draden i:nth-child(1) { --i: 0; }
.hm-rijen li:nth-child(2), .hm-draden i:nth-child(2) { --i: 1; }
.hm-rijen li:nth-child(3), .hm-draden i:nth-child(3) { --i: 2; }
.hm-rijen li:nth-child(4), .hm-draden i:nth-child(4) { --i: 3; }
.hm-rijen li:nth-child(5), .hm-draden i:nth-child(5) { --i: 4; }

.hm-veld[data-stap="0"] .hm-strook { opacity: 0; }
.hm-veld[data-stap="0"] .hm-strook .hm-code { opacity: 0; }
.hm-veld[data-stap="0"] .hm-draden i { transform: var(--dicht); }
.hm-veld[data-stap="1"] .hm-strook li:not(.is-match) .hm-code { opacity: 1; }
.hm-veld:is([data-stap="0"], [data-stap="1"]) .hm-veeg { transform: translateX(-101%); }
.hm-veld:is([data-stap="0"], [data-stap="1"]) .hm-veeg-in { transform: translateX(101%); }
.hm-veld:is([data-stap="0"], [data-stap="1"]) .hm-gelijk { opacity: 0; }
.hm-veld:is([data-stap="0"], [data-stap="1"]) .hm-strook li.is-match::before { transform: scaleX(0); }
.hm-veld:is([data-stap="0"], [data-stap="1"]) .hm-strook li.is-match .hm-code { font-weight: 400; color: inherit; }
/* de twee teal lijnen horen bij de uitkomst: ze tekenen zich pas in stap 3, zodat er in stap 1 en 2 geen leeg kader staat. */
.hm-veld:is([data-stap="0"], [data-stap="1"], [data-stap="2"]) :is(.hm-uitkomst p, .hm-weet) { opacity: 0; transform: translateY(8px); }
.hm-veld:is([data-stap="0"], [data-stap="1"], [data-stap="2"]) .hm-uitkomst::before,
.hm-veld:is([data-stap="0"], [data-stap="1"], [data-stap="2"]) .hm-uitkomst::after { transform: scaleX(0); }
.hm-veld:is([data-stap="0"], [data-stap="1"], [data-stap="2"]) .hm-blad li.is-match::before { transform: scaleX(0); }
.hm-veld:is([data-stap="0"], [data-stap="1"], [data-stap="2"]) .hm-blad li.is-match .hm-adres { font-weight: 400; color: inherit; }
/* Zolang de uitkomst er nog niet gestaan heeft, neemt hij ook geen ruimte in: het beeld groeit op het moment dat
   hij komt. De hoogte verspringt in een keer (er beweegt geen hoogte); wat onder het beeld staat glijdt mee, dat
   regelt het script met alleen transform. */
.hm-veld:not(.is-onthuld):is([data-stap="0"], [data-stap="1"], [data-stap="2"]) :is(.hm-uitkomst, .hm-weet) { height: 0; margin-top: 0; padding-block: 0; overflow: hidden; }
/* Heeft de uitkomst er eenmaal gestaan (is-onthuld), dan blijft hij staan. Wie terugkijkt naar stap 1 of 2 ziet hem
   gedimd, zoals de kop van een stap die nog niet bereikt is. Zo blijft er geen gat achter en verspringen de
   stapknoppen niet onder de muis. "Speel opnieuw af" begint weer bij het kleine beeld. */
.hm-veld.is-onthuld:is([data-stap="0"], [data-stap="1"], [data-stap="2"]) :is(.hm-uitkomst p, .hm-weet) { opacity: .36; transform: none; }
.hm-veld.is-onthuld:is([data-stap="0"], [data-stap="1"], [data-stap="2"]) .hm-uitkomst::before,
.hm-veld.is-onthuld:is([data-stap="0"], [data-stap="1"], [data-stap="2"]) .hm-uitkomst::after { transform: none; opacity: .45; }

.hm-veld.is-direct, .hm-veld.is-direct *, .hm-veld.is-direct *::before, .hm-veld.is-direct *::after { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .hm-strook { transition: opacity .3s ease-out; }
  .hm-code { transition: opacity .35s ease-out; transition-delay: calc(var(--i, 0) * .11s + .28s); }
  .hm-draden i { transition: transform .38s ease-out; transition-delay: calc(var(--i, 0) * .11s); }
  .hm-veeg, .hm-veeg-in { transition: transform .8s cubic-bezier(.45, .05, .35, 1) .25s; }
  .hm-gelijk { transition: opacity .3s ease-out .95s; }
  .hm-rijen li.is-match::before { transition: transform .45s ease-out; }
  .hm-strook li.is-match::before { transition-delay: .05s; }
  .hm-uitkomst::before, .hm-uitkomst::after { transition: transform .5s ease-out .1s, opacity .3s ease-out; }
  .hm-uitkomst p, .hm-weet { transition: opacity .45s ease-out .3s, transform .45s ease-out .3s; }
  .hm-uitkomst p + p { transition-delay: .5s; }
  /* stond de uitkomst er al (gedimd), dan licht hij zonder wachten weer op */
  .hm-veld.is-onthuld :is(.hm-uitkomst p, .hm-weet) { transition-duration: .3s; transition-delay: 0s; }
  .hm-veld[data-stap="2"] .hm-code { transition-delay: 0s; }
}

/* de drie stappen onder het beeld. Zonder script gewone koppen, met script knoppen die het beeld bedienen. */
.hm-stappen { display: grid; gap: 18px; margin-top: 24px; }
.hm-stap-kop { margin: 0; font: inherit; }
.hm-stap-in { display: block; width: 100%; padding: 12px 0 0; background: none; border: 0; border-top: 3px solid var(--teal); border-radius: 0; font: inherit; line-height: 1.3; text-align: left; color: var(--bright); }
button.hm-stap-in { cursor: pointer; }
.hm-stap-nr { margin-right: 4px; font-size: 1.2rem; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.hm-stap-naam { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.016em; }
.hm-stap-sub { display: block; margin-top: 1px; font-size: .9375rem; font-weight: 400; color: var(--muted); }
.hm-stap-tekst { margin-top: 8px; max-width: 31em; font-size: 1rem; line-height: 1.5; }
.is-interactief .hm-stappen li:not(.is-bereikt) .hm-stap-in { border-top-color: var(--line-mid); }
.is-interactief .hm-stappen li:not(.is-actief) .hm-stap-naam { color: var(--text); }

@media (max-width: 759px) {
  /* met script: de drie knoppen, dan het beeld, en direct daaronder de zin van de gekozen stap. Wie naar het beeld
     kijkt, leest de uitleg er meteen bij, ook als de uitkomst er in stap 3 onder komt te staan (ronde 7).
     Het vak van de zin is zo hoog als de langste van de drie: wat erna komt verspringt niet als je van stap wisselt. */
  .hm-uitleg.is-interactief { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 10.2fr) minmax(0, 9fr); column-gap: 8px; }
  .is-interactief .hm-stappen, .is-interactief .hm-stappen > li { display: contents; }
  /* de drie knoppen blijven onder de vaste kop hangen zolang het beeld in het scherm staat: wie naar de uitkomst
     onderaan kijkt, kan van daaruit een andere stap kiezen. De schaduw dicht de naden tussen de drie knoppen. */
  .is-interactief .hm-stap-kop { grid-row: 1; position: sticky; top: var(--kop-h); z-index: 3; padding-top: 8px; background: var(--bg); box-shadow: 0 0 0 4px var(--bg); }
  /* Wat zelf in de vaste balk staat, heeft geen ruimte voor de vaste kop nodig. */
  .is-interactief .hm-stap-kop button { scroll-margin-top: 0; }
  .is-interactief .hm-beeld { grid-row: 2; grid-column: 1 / -1; margin-top: 14px; }
  .is-interactief .hm-stap-tekst { grid-row: 3; grid-column: 1 / -1; margin-top: 12px; min-height: 6em; }
  .is-interactief .hm-stappen > li:not(.is-actief) .hm-stap-tekst { display: none; }
  .is-interactief .hm-stap-in { min-height: 48px; padding: 9px 0 6px; white-space: nowrap; }
  .is-interactief .hm-stappen li:not(.is-actief) .hm-stap-in { border-top-color: var(--line-mid); }
  .is-interactief .hm-stappen li:not(.is-actief) .hm-stap-naam { color: var(--muted); }
  .is-interactief .hm-stappen li.is-actief .hm-stap-naam { font-weight: 700; }
  .is-interactief .hm-stap-nr, .is-interactief .hm-stap-naam { font-size: 1rem; }
  .is-interactief .hm-stap-nr { margin-right: 1px; }
  .is-interactief .hm-stap-sub { display: none; }
}
@media (min-width: 412px) and (max-width: 759px) {
  .is-interactief .hm-stap-tekst { min-height: 4.5em; }
}
@media (max-width: 359px) {
  .hm-uitleg.is-interactief { column-gap: 6px; }
  .is-interactief .hm-stap-nr, .is-interactief .hm-stap-naam { font-size: .875rem; }
}
@media (min-width: 760px) {
  .hm-uitleg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3.4vw, 56px); }
  .hm-uitleg .hm-beeld { grid-row: 1; grid-column: 1 / -1; }
  .hm-stappen, .hm-stappen > li { display: contents; }
  .hm-stap-kop { grid-row: 2; margin-top: clamp(14px, 1.8vw, 24px); }
  .hm-stap-tekst { grid-row: 3; }
  .hm-stappen > li:nth-child(1) > * { grid-column: 1; }
  .hm-stappen > li:nth-child(2) > * { grid-column: 2; }
  .hm-stappen > li:nth-child(3) > * { grid-column: 3; }
  .hm-stap-in { padding-top: 14px; }
}

/* ===== HashMatch: waarom. Twee bestanden met een doorgehaalde lijn ertussen: de tegenhanger van het is-teken in het beeld ===== */
.hm-niet { display: flex; align-items: center; max-width: 27rem; margin-top: clamp(20px, 2.6vw, 30px); }
.hm-niet-lijn { position: relative; flex: 1; min-width: 44px; height: 0; border-top: 1.5px dashed var(--line-strong); }
.hm-niet-lijn i { position: absolute; left: 50%; top: 0; width: 26px; height: 26px; margin: -14px 0 0 -13px; border: 1.5px solid var(--bright); border-radius: 50%; background: var(--bg-raised); color: var(--bright); font-style: normal; font-size: 17px; font-weight: 600; line-height: 22px; text-align: center; }

/* ===== HashMatch: toepassingen als tabel van haarlijnen: lijst A, lijst B, wat je te weten komt ===== */
.hm-papier { display: inline-block; padding: 5px 9px 6px; background: #c3c8c5; color: #27323a; font: 400 12px/1.3 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: -0.01em; }
.hm-toep-kop { display: none; }
.hm-toep { border-top: 1px solid var(--line-mid); }
.hm-toep > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; padding: 18px 0 20px; border-bottom: 1px solid var(--line-mid); }
.hm-toep-naam { grid-column: 1 / -1; font-size: 1.2rem; font-weight: 650; letter-spacing: -0.016em; line-height: 1.3; color: var(--bright); text-wrap: balance; }
.hm-toep-lijst { display: grid; align-content: start; justify-items: start; gap: 4px; min-width: 0; }
.hm-toep-label { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.hm-toep-uit { grid-column: 1 / -1; font-size: 1rem; line-height: 1.5; }
.hm-toep-uit .hm-toep-label { display: block; margin-bottom: 1px; }
@media (min-width: 900px) {
  .hm-toep-kop, .hm-toep > li { display: grid; grid-template-columns: minmax(0, 2.7fr) minmax(0, 2.5fr) minmax(0, 2.5fr) minmax(0, 4.3fr); column-gap: clamp(20px, 2.6vw, 40px); }
  /* kolomkop klein en gedempt, zonder kleur (huisregel voor tabellen) */
  .hm-toep-kop { padding-bottom: 10px; font-size: .875rem; font-weight: 600; color: var(--muted); }
  .hm-toep > li { row-gap: 0; align-items: baseline; padding: 20px 0 22px; }
  .hm-toep-naam, .hm-toep-uit { grid-column: auto; }
  /* als tabel: de rijkop even groot als de cellen ernaast, net als .tabel in pagina.css */
  .hm-toep-naam { font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.5; }
  .hm-toep-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* in de smalle laatste kolom breken de regels gelijkmatig, zodat een zin niet op twee losse woorden eindigt */
  .hm-toep-uit { color: var(--bright); text-wrap: balance; }
}


/* ===== De kop met een beeld ernaast (HashMatch en GroeiWijzer) =====
   De tekstkolom houdt de standaardmaten van de paginakop. Waar het scherm breed genoeg is, is die kolom altijd zo
   breed als de langste kopregel: de kop staat dan op twee regels, zoals hij geschreven is, en het beeld krijgt de
   rest. Daaronder staat het beeld onder de tekst. */
.hm-kop-rij, .gw-kop-rij { display: grid; gap: clamp(26px, 3.4vw, 40px); }
.hm-kop-rij > *, .gw-kop-rij > * { min-width: 0; }
@media (min-width: 1000px) {
  .hm-kop-rij, .gw-kop-rij { column-gap: clamp(36px, 5vw, 72px); align-items: center; }
  .hm-kop-rij { grid-template-columns: minmax(min-content, 1fr) minmax(0, 31rem); }
  .hm-kop-rij .h1 .regel { white-space: nowrap; }
  /* GroeiWijzer heeft een langere tweede kopregel. Tot 1200 pixels blijft alleen de eerste regel heel (drie regels),
     daarboven allebei (twee regels). */
  .gw-kop-rij { grid-template-columns: minmax(min-content, 1fr) minmax(0, 33rem); }
  .gw-kop-rij .h1 .regel:nth-of-type(2) { white-space: nowrap; }
}
@media (min-width: 1200px) {
  .gw-kop-rij .h1 .regel { white-space: nowrap; }
}

/* ===== GroeiWijzer ===== */

/* het klasoverzicht: de dashboardtegel van de homepage, met een lijn per leerling en de conclusie in gewone taal */
.gw-overzicht { min-width: 0; overflow: hidden; background: var(--bg-raised); border: 1.5px solid var(--line-teal); border-radius: var(--radius); container-type: inline-size; font-size: 13px; line-height: 1.35; color: var(--text); }
.gw-ov-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.gw-ov-titel { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; color: var(--bright); }
.gw-ov-titel span { margin-left: 8px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
@container (max-width: 399px) {
  .gw-ov-balk { flex-wrap: nowrap; align-items: flex-start; }
  .gw-ov-titel span { display: block; margin-left: 0; }
  .gw-ov-balk .merkje { margin-top: 1px; }
}
.gw-ov-kop, .gw-ov-rijen li { display: grid; grid-template-columns: 5.4em minmax(40px, 1fr) 2.2em 4.3em; column-gap: 12px; align-items: center; padding: 0 16px; }
.gw-ov-kop { padding-block: 8px 6px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.gw-ov-kop > span:nth-child(3) { text-align: right; }
.gw-ov-as { display: flex; justify-content: space-between; margin-right: 8px; }
.gw-ov-rijen li { position: relative; height: 42px; border-bottom: 1px solid var(--line); }
.gw-ov-rijen li:last-child { border-bottom: 0; }
.gw-naam { font-weight: 500; color: var(--text); white-space: nowrap; }
.gw-vonk { position: relative; height: 28px; margin-right: 8px; }
.gw-vonk svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gw-vonk polyline { fill: none; stroke: var(--line-teal); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* een punt per les: een pad van lengte nul met ronde uiteinden blijft rond, hoe het vlak ook rekt */
.gw-vonk path { fill: none; stroke: var(--line-teal); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gw-vonk i { position: absolute; right: -4px; top: var(--y); width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--teal); }
.gw-gem { text-align: right; font-weight: 600; color: var(--bright); font-variant-numeric: tabular-nums; }
.gw-trend { color: var(--muted); white-space: nowrap; }
.gw-ov-rijen .gw-let-op { background: var(--bg); }
.gw-let-op .gw-naam, .gw-let-op .gw-trend { font-weight: 650; color: var(--bright); }
.gw-let-op .gw-vonk polyline, .gw-let-op .gw-vonk path { stroke: var(--bright); }
.gw-let-op .gw-vonk i { background: var(--bright); }
.gw-ov-voet { padding: 12px 16px 14px; border-top: 1px solid var(--line-mid); }
.gw-ov-voet span { display: block; font-size: 12px; color: var(--muted); }
.gw-ov-voet strong { display: block; margin-top: 2px; font-size: clamp(1rem, 4.6cqi, 1.25rem); font-weight: 650; letter-spacing: -0.018em; line-height: 1.3; color: var(--bright); text-wrap: balance; }
@container (min-width: 520px) {
  .gw-ov-balk, .gw-ov-voet { padding-inline: 20px; }
  .gw-ov-kop, .gw-ov-rijen li { grid-template-columns: 6.4em minmax(40px, 1fr) 3.4em 5.4em; column-gap: 20px; padding-inline: 20px; }
  .gw-ov-rijen li { height: 50px; }
  .gw-ov-rijen { font-size: 14px; }
  .gw-vonk { height: 36px; }
  .gw-ov-voet { padding-block: 14px 16px; }
}

/* het probleem: het grijze Excel-blad van de leerkracht, daarnaast de drie rijen */
.gw-probleem-rij { display: grid; gap: clamp(22px, 3.4vw, 32px); }
.gw-blad-wrap { min-width: 0; max-width: 30rem; }
.gw-blad { background: #c3c8c5; color: #35414a; font: 400 11.5px/1.25 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: -0.01em; }
.gw-blad-balk { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: #abb1ae; color: #27323a; white-space: nowrap; }
.gw-blad-balk span:first-child { overflow: hidden; text-overflow: ellipsis; }
.gw-blad-raster { display: grid; grid-template-columns: 24px minmax(0, 1.3fr) minmax(0, .62fr) minmax(0, .62fr) minmax(0, 1.26fr); }
.gw-blad-raster span { padding: 7px 8px; border-right: 1px solid #a4aaa7; border-bottom: 1px solid #a4aaa7; white-space: nowrap; overflow: hidden; }
.gw-blad-raster .hk { padding-inline: 0; background: #b5bab7; color: #313c43; text-align: center; }
.gw-blad-raster .g { text-align: right; }
.gw-blad-raster .vet { font-weight: 600; color: #222d35; }
.gw-blad-raster .is-fout { background: #b5bab7; color: #222d35; }
.gw-blad-voet { display: flex; align-items: center; gap: 2px; padding: 5px 10px 5px 24px; background: #abb1ae; white-space: nowrap; overflow: hidden; }
.gw-blad-tab { padding: 3px 9px; color: #2c373e; }
.gw-blad-tab--aan { background: #c3c8c5; color: #222d35; }
.gw-bijschrift { margin-top: 6px; font-size: .9375rem; line-height: 1.45; }
/* smal (320 pixels): de letter een stap kleiner en de cellen krapper, zodat de bestandsnaam en "zie schrift" heel blijven */
@media (max-width: 359px) {
  .gw-blad { font-size: 10.5px; }
  .gw-blad-balk { gap: 8px; padding-inline: 8px; }
  .gw-blad-raster { grid-template-columns: 20px minmax(0, 1.22fr) minmax(0, .66fr) minmax(0, .66fr) minmax(0, 1.36fr); }
  .gw-blad-raster span { padding-inline: 6px; }
  .gw-blad-voet { padding-left: 20px; }
}
.gw-bijschrift strong { display: block; margin-bottom: 2px; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.022em; line-height: 1.25; color: var(--bright); }
@media (min-width: 960px) {
  .gw-probleem-rij { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "blad kop" "blad rijen"; grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 96px); }
  .gw-probleem-rij .h2 { grid-area: kop; }
  .gw-probleem-rij .proj-rijen { grid-area: rijen; align-self: start; }
  .gw-blad-wrap { grid-area: blad; align-self: center; max-width: none; }
}

/* zo werkt het: een rechte teal lijn langs drie haltes die uitkomt bij het rapport op wit papier */
.gw-werking-rij { display: grid; gap: 8px; margin-top: clamp(26px, 4vw, 56px); }
.gw-route { position: relative; display: grid; gap: 26px; padding: 0 0 30px 34px; }
.gw-route::before { content: ''; position: absolute; left: 5.5px; top: 10px; bottom: 8px; width: 3px; background: var(--teal); }
.gw-route::after { content: ''; position: absolute; left: -1px; bottom: 0; border-style: solid; border-width: 11px 8px 0; border-color: var(--teal) transparent transparent; }
.gw-halte { position: relative; }
.gw-halte::before { content: ''; position: absolute; left: -34px; top: 5px; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--teal); }
.gw-halte:last-child::before { background: var(--teal); }
.gw-halte h3 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; color: var(--bright); }
.gw-halte p { margin-top: 4px; max-width: 30em; font-size: 1rem; line-height: 1.5; }
.gw-feiten { display: flex; flex-wrap: wrap; gap: 6px 30px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-mid); max-width: 30em; }
.gw-feiten li { display: grid; justify-items: start; }
.gw-feiten strong { font-size: 1.3rem; font-weight: 750; letter-spacing: -0.025em; line-height: 1.2; color: var(--bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gw-feiten span { font-size: .8125rem; line-height: 1.35; color: var(--muted); }
/* de twee waarden bij "Cijfers invoeren" zijn voorbeelddata uit de app, geen eigenschap van de app. Ze staan daarom
   niet op een haarlijn zoals de feiten ernaast, maar in het kader van het klasoverzicht, met het merkje rechtsboven. */
.gw-proef { margin-top: 12px; max-width: 30em; background: var(--bg-raised); border: 1.5px solid var(--line-teal); border-radius: var(--radius); }
.gw-proef-kop { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px clamp(9px, 4%, 12px); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--bright); white-space: nowrap; }
.gw-proef-in { display: flex; align-items: center; gap: 22px; padding: 9px clamp(9px, 4%, 12px) 11px; container-type: inline-size; }
.gw-proef .gw-vonk { flex: 1; min-width: 44px; height: 30px; margin-right: 4px; }
.gw-proef .gw-feiten { flex: none; flex-wrap: nowrap; gap: 22px; margin: 0; padding: 0; border: 0; max-width: none; }
/* in een smal kader (tablet, kleine laptop, 320 pixels) vervalt het lijntje en schuiven de twee waarden wat in */
@container (max-width: 247px) {
  .gw-proef .gw-vonk { display: none; }
  .gw-proef .gw-feiten { gap: 16px; }
}

.gw-rapport-wrap { width: min(100%, 20rem); }
.gw-rapport-wrap .gw-rapport { width: auto; }
.gw-rapport { width: min(100%, 20rem); padding: 18px 18px 16px; background: #fff; color: #001620; font: 400 12px/1.5 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: -0.01em; }
.gw-rapport-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11.5px; }
.gw-rapport-naam { margin-top: 3px; font-family: 'Inter', system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; color: #08080e; }
.gw-rapport-regels { margin-top: 11px; padding-top: 10px; border-top: 1px dashed currentColor; }
.gw-rapport-regels li { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.gw-rapport-regels i { flex: 1; min-width: 12px; border-bottom: 1.5px dotted currentColor; transform: translateY(-.28em); opacity: .5; }
.gw-rapport-regels span { white-space: nowrap; }
.gw-rapport-regels span:last-child { font-weight: 600; color: #0a6f69; }
.gw-rapport-lijn { position: relative; height: 56px; margin: 14px 4px 0 0; border-bottom: 1px solid #c9ced0; }
.gw-rapport-lijn svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gw-rapport-lijn polyline { fill: none; stroke: #0a6f69; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gw-rapport-lijn path { fill: none; stroke: #0a6f69; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gw-rapport-lijn i { position: absolute; right: -4px; top: var(--y); width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #0a6f69; }
.gw-rapport-as { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; opacity: .7; }
.gw-rapport-slot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed currentColor; font-size: 11.5px; white-space: nowrap; }
@media (min-width: 700px) and (max-width: 1099px) {
  /* in het smalle kaartje krijgt het merkje de smalle maat uit de huisstijl, zodat het binnen de marge blijft */
  .gw-proef-kop .merkje { font-size: 11px; padding-inline: 6px; }
}
@media (min-width: 700px) and (max-width: 999px) {
  /* tablet: de feiten staan rechts naast de stap in plaats van eronder */
  .gw-halte { display: grid; grid-template-columns: minmax(0, 1fr) 12.5rem; grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; }
  .gw-halte h3, .gw-halte p { grid-column: 1; }
  .gw-halte > .gw-feiten { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; margin-top: 4px; padding: 0 0 0 20px; border-top: 0; border-left: 1px solid var(--line-mid); }
  .gw-proef { grid-column: 2; grid-row: 1 / span 2; margin-top: 4px; }
}
@media (min-width: 1000px) {
  .gw-werking-rij { grid-template-columns: minmax(0, 1fr) clamp(250px, 21vw, 290px); gap: 0; align-items: start; }
  .gw-route { padding: 0; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
  .gw-route::before { left: 7px; right: 12px; top: 5.5px; bottom: auto; width: auto; height: 3px; }
  .gw-route::after { left: auto; right: 2px; bottom: auto; top: -1px; border-width: 8px 0 8px 11px; border-color: transparent transparent transparent var(--teal); }
  .gw-halte { display: flex; flex-direction: column; padding: 34px clamp(24px, 2.6vw, 40px) 0 0; }
  .gw-halte::before { left: 0; top: 0; }
  .gw-halte p { margin-bottom: 14px; }
  .gw-halte > .gw-feiten, .gw-proef { margin-top: auto; width: 100%; }
  .gw-rapport, .gw-rapport-wrap { width: auto; }
}

/* kenmerken op het lichte vlak: wat niet nodig is doorgestreept, daarnaast vier rijen */
.gw-kenmerken-rij { display: grid; gap: clamp(26px, 4vw, 44px); }
.gw-kenmerken-rij .h2 + p { margin-top: 16px; max-width: 28em; }
.gw-niet { margin-top: clamp(22px, 3vw, 36px); }
.gw-niet-label { font-size: .875rem; font-weight: 600; color: var(--muted); }
.gw-niet ul { display: flex; flex-wrap: wrap; gap: 0 clamp(12px, 1.4vw, 18px); margin-top: 4px; }
.gw-niet li { font-size: clamp(1.15rem, .95rem + .9vw, 1.7rem); font-weight: 750; letter-spacing: -0.028em; line-height: 1.3; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--teal); text-decoration-thickness: 3px; }
@media (min-width: 960px) {
  .gw-kenmerken-rij { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 7vw, 112px); align-items: start; }
}


/* ===== Eigen hulpmiddelen: het overzicht (projecten.html) ===== */
/* de index in de kop: een rij per hulpmiddel, geen kaarten. Twee rijen nu, vijf kan ook. */
.proj-index { margin-top: clamp(26px, 3.6vw, 48px); border-top: 1px solid var(--line-mid); }
.proj-index li { border-bottom: 1px solid var(--line-mid); }
/* de rijen springen naar het hulpmiddel op deze pagina. Geen pijltje omlaag (dat leest als uitklapper): de naam is de link. */
.proj-index a { display: grid; gap: 1px 24px; padding: 14px 0 15px; text-decoration: none; color: var(--text); }
.proj-index-naam { justify-self: start; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--bright); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.proj-index-wat { font-size: 1rem; line-height: 1.45; }
.proj-index-wie { font-size: .875rem; line-height: 1.45; color: var(--muted); }
/* R8:B02 hover alleen bij een muis */ @media (hover: hover) and (pointer: fine) { .proj-index a:hover .proj-index-naam { color: var(--teal); } }
@media (min-width: 860px) {
  .proj-index a { grid-template-columns: minmax(0, 2.4fr) minmax(0, 6fr) minmax(0, 3.2fr); align-items: baseline; padding-block: 17px 18px; }
}

/* een hulpmiddel: tekst en beeld naast elkaar, om en om gespiegeld */
.proj-stuk-rij { display: grid; gap: clamp(28px, 4.4vw, 48px); }
.proj-stuk-tekst { min-width: 0; }
.proj-stuk-beeld { min-width: 0; }
.proj-soort { margin-bottom: 8px; font-size: .9375rem; font-weight: 600; color: var(--teal); }
.proj-claim { margin-top: 12px; max-width: 20em; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); font-weight: 650; letter-spacing: -0.022em; line-height: 1.25; color: var(--bright); text-wrap: balance; }
.proj-claim + p { margin-top: 14px; max-width: 32em; }
.proj-tags { display: flex; flex-wrap: wrap; gap: 0 9px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-mid); max-width: 32em; font-size: .9375rem; color: var(--muted); }
.proj-tags li + li::before { content: '·'; margin-right: 9px; color: var(--line-strong); }
.proj-stuk-tekst .acties { margin-top: clamp(20px, 2.4vw, 28px); }
@media (min-width: 1000px) {
  .proj-stuk-rij { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5.6vw, 88px); align-items: center; }
  .proj-stuk--om .proj-stuk-rij { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .proj-stuk--om .proj-stuk-tekst { order: 2; }
}

/* het beeld bij HashMatch op het overzicht en in de kop van HashMatch: hetzelfde beeld, drie rijen, stil */
.hm-veld--drie { --rijen: 3; }
@container (min-width: 640px) and (max-width: 859px) {
  .proj-stuk .hm-veld { --rij: 42px; --balk: 30px; }
  .proj-stuk .hm-blad, .proj-stuk .hm-strook { font-size: 11px; }
}

/* het beeld bij GroeiWijzer op het overzicht: het klasoverzicht, de blokpijl, het rapport */
.proj-gw { display: grid; container-type: inline-size; }
.proj-gw-in { display: grid; justify-items: start; }
.proj-gw-in .gw-overzicht { justify-self: stretch; }
.proj-gw-in .proj-pijl { width: min(100%, 20rem); }
@container (min-width: 600px) {
  .proj-gw-in { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 15.5rem); align-items: center; }
  .proj-gw-in .proj-pijl { width: auto; height: auto; }
  .proj-gw-in .proj-pijl svg { width: 26px; height: 31.3px; transform: none; }
  .proj-gw-in .gw-rapport-wrap { position: relative; width: auto; justify-self: stretch; }
  .proj-gw-in .gw-rapport-wrap .proj-merk-onder { position: absolute; right: 0; top: 100%; }
}

/* dezelfde vakkennis: een lijn per hulpmiddel met dezelfde drie haltes als het platform */
.proj-lijnen-kop { display: none; }
.proj-lijnen { display: grid; gap: 30px; margin-top: clamp(26px, 4vw, 52px); }
.proj-lijn { display: grid; gap: 12px; }
.proj-lijn-naam h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--bright); }
.proj-lijn-naam p { font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.proj-lijn-naam .link { display: inline-block; margin-top: 0; padding-block: 10px; font-size: .9375rem; font-weight: 600; }
.proj-lijn-haltes { position: relative; display: grid; gap: 12px; padding: 0 0 18px 30px; }
.proj-lijn-haltes::before { content: ''; position: absolute; left: 5.75px; top: 10px; bottom: 8px; width: 1.5px; background: var(--teal); }
.proj-lijn-haltes::after { content: ''; position: absolute; left: 1px; bottom: 0; border-style: solid; border-width: 9px 5.5px 0; border-color: var(--teal) transparent transparent; }
.proj-lijn--platform .proj-lijn-haltes::before { left: 5px; width: 3px; }
.proj-lijn--platform .proj-lijn-haltes::after { left: -1.5px; border-width: 11px 8px 0; }
.proj-lijn-haltes li { position: relative; max-width: 30em; font-size: .9375rem; line-height: 1.45; color: var(--text); }
.proj-lijn-haltes li::before { content: ''; position: absolute; left: -30px; top: 4px; z-index: 1; width: 13px; height: 13px; border-radius: 50%; background: #f0ede6; border: 1.5px solid var(--teal); }
.proj-lijn--platform .proj-lijn-haltes li::before { background: var(--teal); }
.proj-lijn--platform .proj-lijn-haltes li { color: var(--bright); font-weight: 500; }
.proj-lijn-wat { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); }
@media (min-width: 900px) {
  .proj-lijnen-kop, .proj-lijn { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(0, 9.5fr); column-gap: clamp(24px, 3vw, 48px); }
  .proj-lijnen-kop { margin-top: clamp(26px, 4vw, 52px); padding-bottom: 12px; border-bottom: 1px solid var(--line-mid); font-size: .875rem; font-weight: 600; color: var(--muted); }
  .proj-lijnen-kop > span:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proj-lijnen { gap: 0; margin-top: 0; }
  .proj-lijn { row-gap: 0; padding: 26px 0 28px; border-bottom: 1px solid var(--line-mid); align-items: start; }
  .proj-lijn-naam { padding-right: 12px; }
  .proj-lijn-haltes { padding: 0; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
  .proj-lijn-haltes::before { left: 6px; right: 9px; top: 5.75px; bottom: auto; width: auto; height: 1.5px; }
  .proj-lijn-haltes::after { left: auto; right: 0; bottom: auto; top: 1px; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent var(--teal); }
  .proj-lijn--platform .proj-lijn-haltes::before { left: 6px; top: 5px; width: auto; height: 3px; }
  .proj-lijn--platform .proj-lijn-haltes::after { left: auto; top: -1.5px; border-width: 8px 0 8px 11px; }
  .proj-lijn-haltes li { padding: 26px 28px 0 0; font-size: 1rem; line-height: 1.5; }
  .proj-lijn-haltes li::before { left: 0; top: 0; }
  .proj-lijn-wat { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ══════════ Ronde 8 · eigen hulpmiddelen, HashMatch, GroeiWijzer (team 3) ══════════
   Elk blok hoort bij één voorstel en draagt zijn merkteken. Terugdraaien is het blok weghalen (en waar genoemd
   de html of p-projecten.js terugzetten). */

/* R8:A06 GroeiWijzer: de kop staat bovenaan, net als op de andere vervolgpagina's (op 1440 kruimelpad op y 159 in plaats
   van 186). Het klasoverzicht begint rechts op dezelfde hoogte als het kruimelpad, zoals het schema op HashMatch. */
@media (min-width: 1000px) { .gw-kop-rij { align-items: start; } }

/* R8:A11 de pijl tussen klasoverzicht en rapport: geen gevulde blokpijl meer, maar een lijnpijl van 1,5 px in teal,
   16 px breed, met de punt van de rechte lijn op de homepage. De nieuwe svg staat in projecten.html. */
.proj-pijl svg.proj-pijl-lijn { width: 16px; height: 10px; fill: none; color: var(--teal); transform: rotate(90deg); }
@container (min-width: 600px) {
  .proj-gw-in .proj-pijl svg.proj-pijl-lijn { width: 16px; height: 10px; transform: none; }
}

/* R8:B04 drukfeedback: een stap van HashMatch krijgt een vlak zodra de vinger landt (var(--druk) uit basis.css) */
button.hm-stap-in { transition: background-color var(--t-druk, 160ms) ease; }
button.hm-stap-in:active { background-color: var(--druk, var(--bg-raised)); transition-duration: 0ms; }

/* R8:B10 HashMatch laat zien dat het vanzelf doorloopt: tijdens het afspelen vult de lijn boven de actieve stap zich in het
   tempo van het afspelen (2,4 s per stap, linear: het is een tijdsbalk). Kiest iemand zelf een stap, dan stopt het
   afspelen en staat de lijn meteen vol. Bij minder beweging speelt er niets af, dus ook geen balk.
   p-projecten.js zet de klasse is-speelt. */
.hm-stap-in { position: relative; }
.hm-stap-in::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--teal); transform: scaleX(0); transform-origin: 0 50%; }
.is-speelt .hm-stappen li.is-actief .hm-stap-in { border-top-color: var(--line-mid); }
.is-speelt .hm-stappen li.is-actief .hm-stap-in::before { animation: hm-vul 2400ms linear both; }
@keyframes hm-vul { to { transform: none; } }

/* R8:D04 HashMatch op een telefoon: de tekening bovenaan weg. Dezelfde tekening komt twee schermen later terug bij
   "Zo werkt het", groter en in drie stappen (dezelfde keuze als het rustige blok op de homepage). */
@media (max-width: 759px) { .hm-poster { display: none; } }

/* R8:D14 Eigen hulpmiddelen op een telefoon: de lijst met de twee hulpmiddelen bovenaan weg; ze beginnen direct eronder.
   Vanaf 760, waar ze verder weg staan, blijft de lijst. */
@media (max-width: 759px) { .proj-index { display: none; } }

/* R8:D18 geen letters onder de 12 pixels in de schetsen op een telefoon: de adressen, codes en bestandsnamen in de
   HashMatch-tekening op 11,5 (was 10,5), het klasoverzicht op 12 (was 11 en 11,5). Het merkje Voorbeelddata staat op 12
   in basis.css (team 4, zelfde merkteken). De bestandsnaam in de balk van het blad (.hm-blad-balk) staat erbij, omdat het
   rapport "bestandsnamen" noemt. */
@media (max-width: 759px) {
  .hm-adres, .hm-code, .hm-nr, .hm-strook-balk, .hm-blad-balk, .hm-papier { font-size: 11.5px; }
  .gw-ov-kop, .gw-ov-as { font-size: 12px; }
}