/* ============================================================================
   ANSIE — ontwerpstelsel

   Waar dit vandaan kom: die vraestel self. 'n Suid-Afrikaanse skoolblad het
   ink op papier, 'n rooi nasienpen, en punte regs in blokhakies. Daardie drie
   dinge is die HELE palet en die HELE struktuurgrammatika. Niks hier is
   versiering nie - elke kleur en elke lyn beteken iets.

   Reëls wat nie gebreek word nie:
     - Rooi (--nasien) is NET vir punte, krediete en foute. Nooit dekoratief.
     - Groen (--geslaag) is NET vir "klaar".
     - Monospace is NET vir data: punte, datums, grade, statuslabels.
     - Geen emoji as ikoon nie. Ikone is getekende SVG's, of niks.
   ============================================================================ */

:root{
  /* ---- kleur: vier werkers, elk met presies EEN taak */
  /* Reguit uit die logo geneem, nie andersom nie: die logo is die vaste
     bate, en 'n koppelvlak wat 'n ander navy gebruik lyk soos twee
     verskillende produkte langs mekaar. */
  --ink:#111845;          /* logo se sirkel */
  --ink-2:#0A0F2E;
  --ink-sag:#5A6478;
  --papier:#FCFBF8;
  --papier-2:#F3F1EA;
  --lyn:#E7E3DA;
  --nasien:#E93814;       /* logo se punt - oranjerooi, nie bloedrooi nie */
  --nasien-sag:#FDEDE8;
  --geslaag:#2F6B4F;
  --geslaag-sag:#EAF2ED;

  /* ---- ruimte: een skaal, oral */
  --v1:4px;  --v2:8px;  --v3:12px; --v4:16px;
  --v5:24px; --v6:32px; --v7:48px; --v8:64px;

  /* ---- tipografie */
  /* Archivo, nie Bricolage nie: Bricolage se letters het eienaardige
     stertjies en ongelyke breedtes wat "ontwerp" lees eerder as "duidelik".
     Archivo is 'n stewige grotesk met werklik swaar gewigte - gebou om
     groot en vet gelees te word, wat presies is wat 'n moeë ma op 'n foon
     nodig het. */
  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --lyf:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;

  --radius:12px;
  --radius-groot:16px;
}

/* Leesvriendelike lettertipe (sien /profiel en engine/layout.py). Val stil
   terug na die gewone stapel as die lêers nie teenwoordig is nie. */
body.disleksie{ --lyf:"OpenDyslexic",system-ui,sans-serif;
                --display:"OpenDyslexic",system-ui,sans-serif;
                letter-spacing:.01em; line-height:1.7; }

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--lyf);
  font-size:15px; line-height:1.55;
  color:var(--ink); background:var(--papier);
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ------------------------------------------------------------------- kop */
.kop{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--v3) var(--v5);
  background:var(--papier); border-bottom:1px solid var(--lyn);
}
.kop-logo{
  font-family:var(--display); font-weight:800; font-size:26px;
  letter-spacing:-.03em; color:var(--ink); text-decoration:none;
  line-height:1;
}
/* Op 'n wyer skerm is 26px klein teenoor die res van die bladsy. */
@media (min-width:620px){ .kop-logo{font-size:30px} }
/* Die punt is die nasienpen - die enigste rooi in die kop. Effens groter
   as die letters sodat dit lees soos 'n merk, nie soos leestekens nie. */
.kop-logo::after{content:"."; color:var(--nasien); font-size:1.15em}
.taal-wissel{
  font-family:var(--data); font-size:11px; font-weight:500; letter-spacing:.08em;
  color:var(--ink-sag); text-decoration:none;
  border:1px solid var(--lyn); border-radius:6px; padding:5px 9px;
}
.taal-wissel:hover{border-color:var(--ink-sag); color:var(--ink)}

.inhoud{max-width:480px; margin:0 auto; padding:var(--v5) var(--v5) 120px}

/* ----------------------------------------------------------- tipografie */
h1,h2,h3{font-family:var(--display); letter-spacing:-.022em; font-weight:700}
h1{font-size:24px; line-height:1.2}
h2{font-size:18px; line-height:1.3}
h3{font-size:15px}

/* Afdelingskop: klein, monospace, hoofletters - 'n ETIKET, nie 'n titel nie */
.afdeling-kop{
  font-family:var(--data); font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-sag);
  margin:var(--v6) 0 var(--v3);
}
.sub{color:var(--ink-sag); font-size:14.5px}
.klein-nota{color:var(--ink-sag); font-size:12.5px; margin-top:var(--v3)}
.data{font-family:var(--data); font-size:12px; letter-spacing:.02em; color:var(--ink-sag)}

/* --------------------------------------------------------------- knoppe */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--v2);
  width:100%; padding:16px 20px; border:none; cursor:pointer;
  font-family:var(--lyf); font-size:16px; font-weight:600;
  border-radius:var(--radius); text-decoration:none;
  transition:background .12s ease, transform .12s ease, border-color .12s ease;
}
.knop:active{transform:scale(.985)}
.knop:disabled{opacity:.4; cursor:not-allowed; transform:none}
.knop svg{width:18px; height:18px; flex:none}

.knop-primêr{background:var(--ink); color:var(--papier)}
.knop-primêr:hover{background:var(--ink-2)}
.knop-sekondêr{background:transparent; color:var(--ink); border:1.5px solid var(--lyn)}
.knop-sekondêr:hover{border-color:var(--ink-sag)}
.knop-donker{background:var(--ink); color:var(--papier)}
.knop-whatsapp{background:#1F8F4E; color:#fff}
.knop-whatsapp:hover{background:#186F3D}
.knop-waarskuwing{background:transparent; color:var(--nasien); border:1.5px solid var(--nasien)}
.knop-waarskuwing:hover{background:var(--nasien-sag)}
.knop-groot{padding:18px; font-size:16.5px}
.knop-vas-onder{position:sticky; top:64px; z-index:5; margin-bottom:var(--v5)}

.skakel-onderaan{
  display:block; text-align:center; margin-top:var(--v5);
  color:var(--ink-sag); text-decoration:none; font-size:13.5px;
}
.skakel-onderaan:hover{color:var(--ink)}

/* --------------------------------------------- krediet: die held-element
   Sy vra elke keer dieselfde vraag: hoeveel oplaaie het ek oor? Dus die
   grootste syfer op die skerm, geskryf soos 'n onderwyser 'n punt in die
   kantlyn skryf - met die sirkel van 'n nasienpen om dit. */
.krediet{
  display:flex; align-items:flex-start; gap:var(--v6);
  padding-bottom:var(--v5); margin-bottom:var(--v5);
  border-bottom:1px solid var(--lyn);
}
.krediet-telling{
  font-family:var(--display); font-weight:800;
  font-size:58px; line-height:1; letter-spacing:-.04em;
  color:var(--nasien); position:relative; flex:none;
  min-width:62px; text-align:center; padding:6px 0;
}
.krediet-telling::after{
  content:""; position:absolute; inset:-6px -10px;
  border:2px solid var(--nasien); border-radius:50%;
  transform:rotate(-4deg); opacity:.3;
}
.krediet-teks{padding-top:var(--v1)}
.krediet-teks h1{font-size:18px; margin-bottom:2px}
.krediet-teks p{font-size:13.5px; color:var(--ink-sag)}
.krediet-teks a{color:var(--ink); text-decoration:underline; text-underline-offset:2px}

/* ------------------------------------------------------------- kinders
   Nie dekoratiewe avatars nie - 'n KEUSE. Sy kies vir wie sy oplaai. */
.kinders-ry{display:flex; gap:var(--v2); flex-wrap:wrap; margin-bottom:var(--v2)}
.kind-kaartjie{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 14px 9px 9px; background:transparent;
  border:1.5px solid var(--lyn); border-radius:999px; cursor:pointer;
  font-family:var(--lyf); font-size:14px; color:var(--ink); text-decoration:none;
  transition:border-color .12s ease, background .12s ease;
}
.kind-kaartjie:hover{border-color:var(--ink-sag)}
.kind-kaartjie[aria-pressed="true"]{border-color:var(--ink); background:var(--papier-2)}
.kind-avatar{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--papier);
  font-family:var(--display); font-weight:700; font-size:13px;
}
.kind-naam{font-weight:500}
.kind-graad{font-family:var(--data); font-size:11px; color:var(--ink-sag)}
.kind-byvoeg{border-style:dashed; color:var(--ink-sag); padding:9px 15px}

/* -------------------------------------------------------------- oplaaie
   Elke ry is 'n vraestel. Punte regs in blokhakies, presies soos op die
   egte ding. Die lyn onder elke ry is die eksamenblad se liniaal-lyn. */
.oplaai-lys{list-style:none}
.oplaai-ry{border-bottom:1px solid var(--lyn)}
.oplaai-ry > a{
  display:grid; grid-template-columns:1fr auto; gap:3px var(--v4);
  align-items:center; padding:var(--v4) 2px;
  text-decoration:none; color:inherit; transition:background .12s ease;
}
.oplaai-ry > a:hover{background:var(--papier-2)}
.oplaai-naam{font-size:15px; font-weight:500; letter-spacing:-.005em}
.oplaai-meta{grid-column:1; font-family:var(--data); font-size:11.5px; color:var(--ink-sag)}
.oplaai-naam{grid-column:1}
.oplaai-punte{
  grid-column:2; grid-row:1/3;
  font-family:var(--data); font-size:15px; font-weight:600;
  color:var(--nasien); white-space:nowrap; justify-self:end;
}
.oplaai-status{
  grid-column:2; grid-row:1/3; justify-self:end;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--data); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-sag);
}
.status-klaar,.status-gereed{color:var(--geslaag)}
.spinner{
  width:13px; height:13px; border:1.5px solid var(--lyn);
  border-top-color:var(--ink); border-radius:50%;
  animation:draai .8s linear infinite;
}
@keyframes draai{to{transform:rotate(360deg)}}

/* --------------------------------------------------------------- kaarte */
.kaart{
  background:var(--papier-2); border:1px solid var(--lyn);
  border-radius:var(--radius-groot); padding:var(--v5); margin:var(--v4) 0;
}
.kaart-plat{background:transparent}
.waarskuwing{background:var(--nasien-sag); border-color:#F0D5D2}
.leë-toestand{text-align:center; padding:var(--v6) var(--v5)}
.leë-toestand h2{margin-bottom:var(--v2)}
.leë-toestand p{color:var(--ink-sag); font-size:14px; margin-bottom:var(--v4)}
.intekening-kaart h3{margin-bottom:var(--v2)}

/* Nooi-blok: rooi omdat dit oor KREDIETE gaan, nie omdat dit vrolik is */
.krediet-banier,.nooi-blok{
  display:flex; align-items:center; justify-content:space-between; gap:var(--v4);
  background:var(--nasien-sag); border-radius:var(--radius-groot);
  padding:var(--v4) var(--v5); margin:var(--v5) 0;
  color:#7A2C27; text-decoration:none; font-size:13.5px;
}
.krediet-banier strong,.nooi-blok strong{font-weight:600}
.nooi-blok a{
  flex:none; color:var(--nasien); font-weight:600; text-decoration:none;
  border-bottom:1.5px solid currentColor;
}

/* ---------------------------------------------------------------- velde */
.veld-etiket{
  display:block; font-family:var(--data); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-sag);
  margin:var(--v5) 0 var(--v2);
}
.veld{
  width:100%; padding:14px; font-size:16px;   /* 16px = geen iOS-inzoem nie */
  font-family:var(--lyf); color:var(--ink);
  background:var(--papier); border:1.5px solid var(--lyn);
  border-radius:var(--radius); transition:border-color .12s ease;
}
.veld:focus{outline:none; border-color:var(--ink)}
.veld::placeholder{color:var(--ink-sag); opacity:.7}
.vorm-vinnig .veld{margin-bottom:var(--v2)}
select.veld{appearance:auto}

/* Knoppie-groep: 'n keuse uit 'n VASTE lys. Daar is doelbewus nêrens 'n
   vrye-teks opdragveld in Ansie nie - sien engine/master_prompt.py. */
.knoppie-groep{display:flex; gap:var(--v2); flex-wrap:wrap}
.knoppie{
  padding:10px 16px; background:transparent; cursor:pointer;
  border:1.5px solid var(--lyn); border-radius:999px;
  font-family:var(--lyf); font-size:14px; color:var(--ink);
  transition:border-color .12s ease, background .12s ease;
}
.knoppie:hover{border-color:var(--ink-sag)}
.knoppie.aktief,.knoppie[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--papier);
}

/* ------------------------------------------------------------ boodskappe */
.fout-boodskap{
  background:var(--nasien-sag); border-left:3px solid var(--nasien);
  border-radius:var(--radius); padding:var(--v3) var(--v4);
  color:#7A2C27; font-size:14px; margin:var(--v4) 0;
}
.sukses-boodskap{
  background:var(--geslaag-sag); border-left:3px solid var(--geslaag);
  border-radius:var(--radius); padding:var(--v3) var(--v4);
  color:#1E4A36; font-size:14px; margin:var(--v4) 0;
}

/* --------------------------------------------------------------- lêers */
.lêer-lys{border-top:1px solid var(--lyn); margin:var(--v5) 0}
.lêer-ry{
  display:flex; align-items:center; gap:var(--v3);
  padding:var(--v4) 2px; border-bottom:1px solid var(--lyn);
  text-decoration:none; color:inherit; transition:background .12s ease;
}
.lêer-ry:hover{background:var(--papier-2)}
.lêer-ikoon{width:18px; height:18px; color:var(--ink-sag); flex:none}
.lêer-ry span:nth-child(2){flex:1; font-weight:500; font-size:14.5px}
.lêer-aksie{
  font-family:var(--data); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-sag);
}

/* --------------------------------------------------------------- skerms */
.welkom-skerm{text-align:center; padding-top:var(--v7)}
.welkom-skerm h1{font-size:28px; margin-bottom:var(--v3)}
.welkom-skerm .sub{margin-bottom:var(--v6)}
.welkom-ikoon{display:none}          /* was 'n emoji - vervang deur tipografie */
.gereed-skerm{text-align:center; padding-top:var(--v6)}
.gereed-skerm h2{margin-bottom:var(--v2)}
.gereed-ikoon{display:none}

/* -------------------------------------------------------- toeganklikheid */
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* ------------------------------------------------------- filters + versamelings
   Sy FILTREER, sy liasseer nie. Die verstek is altyd "Alles", sodat sy
   nooit iets moet kies om haar eie werk te sien nie. */
.lys-kop{
  display:flex; align-items:center; justify-content:space-between;
  /* Die h2 hierbinne dra style="margin:0" om die flex-uitleg netjies te
     hou; die spasie moet dus HIER wees, anders sit die opskrif vasgedruk
     teen die kind-kaartjies bo hom. */
  margin:var(--v6) 0 var(--v3);
}
.teks-knop{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--lyf); font-size:13px; font-weight:500; color:var(--ink-sag);
}
.teks-knop:hover{color:var(--ink)}

.filters{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--v4)}
.filter{
  padding:6px 12px; border:1px solid var(--lyn); border-radius:999px;
  font-family:var(--data); font-size:11px; letter-spacing:.04em;
  color:var(--ink-sag); text-decoration:none; white-space:nowrap;
  transition:border-color .12s ease, color .12s ease;
}
.filter:hover{border-color:var(--ink-sag); color:var(--ink)}
.filter.aktief{background:var(--ink); border-color:var(--ink); color:var(--papier)}

.versamelings{display:flex; gap:var(--v2); flex-wrap:wrap; margin-bottom:var(--v3)}
.versameling{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 15px; border:1.5px solid var(--lyn); border-radius:var(--radius);
  font-family:var(--lyf); font-size:13.5px; color:var(--ink);
  text-decoration:none; background:transparent; cursor:pointer;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.versameling svg{width:16px; height:16px; color:var(--ink-sag)}
.versameling.aktief{border-color:var(--ink); background:var(--papier-2)}
.versameling.nuut{border-style:dashed; color:var(--ink-sag); padding:10px 16px}
/* Sleepteiken: die enigste plek waar iets in die koppelvlak "oopgaan" */
.versameling.teiken{
  border-color:var(--nasien); background:var(--nasien-sag);
  transform:scale(1.04);
}

/* --------------------------------------------------------------- sleep
   Pointer Events, nie HTML5 drag-and-drop nie - daardie API doen NIKS op
   'n raakskerm, en Ansie is 'n foon-app. Sien static/js/skuif.js. */
body.sleep-aktief{user-select:none; -webkit-user-select:none; touch-action:none}
.oplaai-ry.word-gesleep{opacity:.32}
.oplaai-ry.besig{opacity:.5; pointer-events:none}
.sleep-spook{
  position:fixed; z-index:100; pointer-events:none; list-style:none;
  background:var(--papier); border:1.5px solid var(--ink);
  border-radius:var(--radius); padding:var(--v3) var(--v4);
  box-shadow:0 8px 24px rgba(22,35,63,.18); transform:rotate(-1.5deg);
}
.sleep-spook .oplaai-status,.sleep-spook .ry-kieslys,
.sleep-spook .skuif-kieslys{display:none}

/* Kieslys: die tweede pad na dieselfde skuif */
.oplaai-ry{position:relative}
/* Elke ding wat regs op die ry sit, kry sy eie ruimte. Voorheen het die
   kieslysknoppie bo-op die statusmerkie gesit omdat albei absoluut
   geplaas is; nou kom die aflaai-knoppie ook by. */
.oplaai-ry:has(.ry-kieslys) > a{padding-right:30px}
.oplaai-ry:has(.ry-aflaai) > a{padding-right:44px}
.oplaai-ry:has(.ry-aflaai):has(.ry-kieslys) > a{padding-right:76px}

/* Aflaai reguit uit die lys - een tik in plaas van drie. */
.ry-aflaai{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:grid; place-items:center;
  width:44px; height:44px;          /* volle duim-teiken, nie net die ikoon */
  color:var(--ink-sag); border-radius:10px;
  transition:color .12s ease, background .12s ease;
}
.ry-aflaai svg{width:18px; height:18px}
.ry-aflaai:hover{color:var(--ink); background:var(--papier-2)}
.oplaai-ry:has(.ry-kieslys) .ry-aflaai{right:32px}
.ry-kieslys{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:8px 10px;
  color:var(--ink-sag); font-size:15px; letter-spacing:1px; line-height:1;
}
.ry-kieslys:hover{color:var(--ink)}
.skuif-kieslys{
  position:absolute; right:0; top:calc(50% + 18px); z-index:30;
  min-width:170px; padding:6px;
  background:var(--papier); border:1px solid var(--lyn);
  border-radius:var(--radius); box-shadow:0 8px 24px rgba(22,35,63,.14);
}
.skuif-kieslys button{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:9px 11px; background:none; border:none; border-radius:8px;
  font-family:var(--lyf); font-size:13.5px; color:var(--ink);
}
.skuif-kieslys button:hover{background:var(--papier-2)}
.skuif-kieslys button:last-child{color:var(--ink-sag); border-top:1px solid var(--lyn); margin-top:4px}

/* ============================================================ LANDINGSBLAD */
.landing{padding-bottom:var(--v7)}

.held{padding:var(--v6) 0 var(--v7); border-bottom:1px solid var(--lyn)}
.eyebrow{
  font-family:var(--data); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--nasien);
  margin-bottom:var(--v3);
}
.held h1{font-size:31px; line-height:1.1; font-weight:800; letter-spacing:-.03em; margin-bottom:var(--v3)}
.held-sub{font-size:16px; color:var(--ink-sag); margin-bottom:var(--v5)}

/* Grense-blok: die enigste plek waar Ansie s\00ea wat sy NIE doen nie. Dit is
   'n beskrywing van engine/master_prompt.py se eerste re\00eal, nie bemarking. */
.grense{padding:var(--v6) 0; border-bottom:1px solid var(--lyn)}
.grense h2{font-size:20px; margin-bottom:var(--v4)}
.grense-lys{list-style:none}
.grense-lys li{
  display:grid; grid-template-columns:auto 1fr; gap:var(--v3);
  align-items:start; padding:var(--v3) 0; font-size:14.5px; line-height:1.55;
}
.grens-nee,.grens-ja{
  font-family:var(--data); font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 9px; border-radius:999px;
  margin-top:2px; white-space:nowrap;
}
.grens-nee{background:var(--nasien-sag); color:var(--nasien)}
.grens-ja{background:var(--geslaag-sag); color:var(--geslaag)}

.vir-wie-blok,.tyd-blok,.hoe-werk-dit,.kry-blok{
  padding:var(--v6) 0; border-bottom:1px solid var(--lyn);
}
.wie-lys{list-style:none}
.wie-lys li{
  padding:var(--v3) 0 var(--v3) var(--v4); font-size:14.5px;
  border-left:2px solid var(--lyn); margin-bottom:var(--v2);
}

/* Tyd-tabel: die vergelyking is 'n SKATTING en word so gemerk. */
/* table-layout:fixed - sonder dit het die "Met Ansie"-kolom by die regterkant
   van 'n 430px-skerm afgeloop en was "oplaai" afgesny. */
.tyd-tabel{width:100%; table-layout:fixed; border-collapse:collapse; font-size:13.5px}
.tyd-tabel th:first-child,.tyd-tabel td:first-child{width:52%; padding-right:8px}
.tyd-tabel th:nth-child(2),.tyd-tabel td:nth-child(2){width:26%}
.tyd-tabel th:nth-child(3),.tyd-tabel td:nth-child(3){width:22%}
.tyd-tabel th{
  font-family:var(--data); font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-sag); text-align:left;
  padding:0 0 var(--v2); border-bottom:1px solid var(--lyn);
}
.tyd-tabel th:not(:first-child),.tyd-tabel td:not(:first-child){text-align:right}
.tyd-tabel td{padding:11px 0; border-bottom:1px solid var(--lyn)}
.tyd-syfer{font-family:var(--data); font-size:12px; color:var(--ink-sag)}
.tyd-ansie{font-family:var(--data); font-size:12px; color:var(--geslaag)}
.tyd-tabel tfoot td{
  font-weight:600; border-bottom:none; border-top:2px solid var(--ink);
  padding-top:var(--v3);
}
.tyd-tabel tfoot .tyd-syfer{color:var(--ink); font-weight:600}
.tyd-tabel tfoot .tyd-ansie{color:var(--geslaag); font-weight:600}

/* Genommerde stappe: dit IS 'n volgorde, dus is nommers hier eerlik. */
.stappe{list-style:none; counter-reset:none}
.stappe li{
  display:grid; grid-template-columns:auto 1fr; gap:var(--v4);
  align-items:baseline; padding:var(--v3) 0;
}
.stap-nr{
  font-family:var(--data); font-size:12px; font-weight:600;
  color:var(--nasien); letter-spacing:.05em;
}
.stappe p{font-size:14.5px}

.kry-lys dt{
  font-family:var(--display); font-weight:700; font-size:15px;
  margin-top:var(--v4);
}
.kry-lys dd{color:var(--ink-sag); font-size:14px; line-height:1.55; margin-top:2px}

.gebou-deur{
  padding:var(--v6) 0; text-align:center; font-size:13.5px;
  color:var(--ink-sag); font-style:italic;
}
.begin-blok{
  background:var(--papier-2); border:1px solid var(--lyn);
  border-radius:var(--radius-groot); padding:var(--v6) var(--v5); text-align:center;
}
.begin-blok h2{font-size:19px; margin-bottom:var(--v2)}
.begin-blok .knop{margin-bottom:var(--v2)}

/* ------------------------------------------------- afbakening + vergelyking */
.afbakening,.skandeer,.vergelyk,.ki-blok,.disleksie-blok{
  padding:var(--v6) 0; border-bottom:1px solid var(--lyn);
}
.afbakening h2,.vergelyk h2,.ki-blok h2{font-size:20px; margin-bottom:var(--v3)}
.afbakening p,.ki-blok p,.disleksie-blok p{font-size:14.5px; margin-bottom:var(--v3)}
.groot-lyn{font-size:16.5px !important; color:var(--ink); font-weight:500}
.skandeer-ry{padding:var(--v3) 0 var(--v3) var(--v4); border-left:2px solid var(--lyn); margin-bottom:var(--v3)}
.skandeer-ry h3{font-size:14.5px; margin-bottom:4px}
.skandeer-ry p{font-size:13.5px; color:var(--ink-sag); line-height:1.55}

.vgl-tabel{width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px}
.vgl-tabel th{
  font-family:var(--data); font-size:9.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-sag); text-align:center;
  padding:0 2px var(--v2); vertical-align:bottom; border-bottom:1px solid var(--lyn);
}
.vgl-tabel th:first-child,.vgl-tabel td:first-child{width:40%; text-align:left}
.vgl-tabel td{padding:10px 2px; border-bottom:1px solid var(--lyn); text-align:center}
.vgl-naam{font-family:var(--lyf); font-size:12.5px; line-height:1.35; padding-right:6px !important}
/* Merkies pleks van woorde: 'n mens skandeer 'n kolom simbole in 'n oogwink,
   waar 'n kolom teks gelees moet word. Die halfsirkel dra die nuanse wat 'n
   blote merkie sou weggooi. */
.vgl-tabel .m{width:17px; height:17px; vertical-align:middle}
.m-ja{color:var(--geslaag)}
.m-nee{color:var(--nasien); opacity:.75}
.m-half{color:var(--ink-sag)}
.vgl-sleutel{
  display:flex; gap:7px; align-items:flex-start; margin-top:var(--v3);
  font-size:12px; color:var(--ink-sag);
}
.vgl-sleutel .m{width:14px; height:14px; flex:none; margin-top:2px}
.vgl-sleutel span{display:flex; gap:7px; align-items:flex-start}
.vgl-tabel .kol-ansie{background:var(--geslaag-sag)}
.vgl-tabel th.kol-ansie{color:var(--geslaag); border-radius:6px 6px 0 0}

/* --------------------------------------------------------------- voorstelle */
.voorstel-blok{
  margin-top:var(--v6); padding:var(--v4) var(--v5);
  background:var(--papier-2); border:1px solid var(--lyn);
  border-radius:var(--radius-groot);
}
.voorstel-blok summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--v3);
  cursor:pointer; list-style:none; font-family:var(--display);
  font-weight:700; font-size:15px;
}
.voorstel-blok summary::-webkit-details-marker{display:none}
.voorstel-blok summary svg{width:16px; height:16px; color:var(--ink-sag); transition:transform .15s ease}
.voorstel-blok[open] summary{margin-bottom:var(--v3)}
.voorstel-blok[open] summary svg{transform:rotate(180deg)}
.voorstel-blok textarea.veld{margin:var(--v3) 0; resize:vertical; line-height:1.5}
.voorstel-blok .knop{width:auto; padding:11px 22px}
.tussen-cta{margin:var(--v6) 0 0}

/* ---------------------------------------------------------- heldbeeld */
.held-beeld{display:block; margin:var(--v5) 0 0}
.held-beeld img{
  display:block; width:100%; height:auto;
  /* object-fit as laaste vangnet: al kry 'n bron ooit die verkeerde
     verhouding, word die beeld gesny eerder as uitgerek. 'n Gesnyde foto
     lyk soos 'n keuse; 'n uitgerekte een lyk soos 'n fout. */
  object-fit:cover;
  border-radius:var(--radius-groot);
  box-shadow:0 1px 2px rgba(22,35,63,.06), 0 10px 30px rgba(22,35,63,.10);
}
.eerlik{
  font-size:13.5px; line-height:1.55; color:var(--ink-sag);
  border-left:2px solid var(--lyn); padding:2px 0 2px var(--v3);
  margin-bottom:var(--v4);
}

/* ------------------------------------------------------------- foutbladsy */
.fout-skerm{text-align:center; padding-top:var(--v8)}
.fout-kode{
  font-family:var(--data); font-size:12px; font-weight:600;
  letter-spacing:.16em; color:var(--nasien); margin-bottom:var(--v3);
}
.fout-skerm h1{font-size:24px; margin-bottom:var(--v2)}
.fout-skerm .sub{margin-bottom:var(--v6)}

/* ------------------------------------------------------------ kinders (profiel) */
.kind-kaart{padding:var(--v4) var(--v5)}
.kind-vorm .veld{margin-bottom:var(--v2)}
.kind-ry{display:flex; gap:var(--v2)}
.kind-ry select{flex:0 0 40%}
.kind-ry input{flex:1}
.kind-knoppe{display:flex; align-items:center; gap:var(--v4); margin-top:var(--v2)}
.kind-knoppe .knop{width:auto; padding:10px 20px}
.verwyder-kind{color:var(--nasien)}
.kind-byvoeg-kaart summary{
  cursor:pointer; list-style:none; font-family:var(--display);
  font-weight:700; font-size:15px; color:var(--ink-sag);
}
.kind-byvoeg-kaart summary::-webkit-details-marker{display:none}
.kind-byvoeg-kaart[open] summary{margin-bottom:var(--v3); color:var(--ink)}

/* ------------------------------------------------------ oplaai-voorskou
   Daar was GEEN styl vir hierdie ry nie, dus het elke foto op sy natuurlike
   grootte gerender - 'n 12MP-foonfoto is dan skermhoog, en by 20 bladsye
   moet sy verby 'n halwe kilometer beeld rol om by die knoppie te kom.
   'n Rooster van klein duimnaels wys haar wat sy gekies het sonder om die
   bladsy te oorheers. */
.voorskou-ry{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));
  gap:var(--v2);
  margin:var(--v4) 0;
}
.voorskou-ry:empty{display:none}
.voorskou-ry img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:8px; border:1px solid var(--lyn);
  background:var(--papier-2);
}
/* Bladsynommer op elke duimnael: by 20 bladsye moet sy kan sien WATTER een
   ontbreek as sy een oorgeslaan het. */
.voorskou-item{position:relative}
.voorskou-nr{
  position:absolute; left:4px; bottom:4px;
  font-family:var(--data); font-size:10px; font-weight:600;
  background:rgba(17,24,69,.82); color:var(--papier);
  padding:1px 5px; border-radius:4px;
}
.voorskou-telling{
  font-family:var(--data); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-sag); margin-top:var(--v2);
}

/* ----------------------------------------------------- wenke voor oplaai
   Vooraf, nie agterna nie. engine/kwaliteit.py vang 'n wasige foto en keer
   dat dit haar 'n krediet kos - maar teen daardie tyd het sy reeds twintig
   bladsye afgeneem. Vier reëls hier spaar daardie hele rondte. */
.wenke-blok{
  background:var(--papier-2); border:1px solid var(--lyn);
  border-radius:var(--radius); padding:var(--v3) var(--v4);
  margin-bottom:var(--v4);
}
.wenke-kop{
  font-family:var(--data); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-sag);
  margin-bottom:var(--v2);
}
.wenke-lys{list-style:none; margin:0}
.wenke-lys li{
  position:relative; padding-left:var(--v4); margin-bottom:5px;
  font-size:13.5px; line-height:1.5;
}
.wenke-lys li:last-child{margin-bottom:0}
.wenke-lys li::before{
  content:""; position:absolute; left:2px; top:8px;
  width:5px; height:5px; border-radius:50%; background:var(--nasien);
}

/* -------------------------------------------------------- opneem-sone
   Nog 'n blok wat GEEN styl gehad het nie: die SVG-pyltjie het geen
   breedte gehad nie, en 'n SVG sonder afmetings vul die hele houer -
   dus 'n pyl van 300px. Dieselfde fout as die voorskou-beelde. */
.opneem-sone{
  border:1.5px dashed var(--lyn); border-radius:var(--radius-groot);
  padding:var(--v6) var(--v5); text-align:center; cursor:pointer;
  background:var(--papier);
  transition:border-color .12s ease, background .12s ease;
}
.opneem-sone:hover{border-color:var(--ink-sag); background:var(--papier-2)}
.opneem-sone > p{font-size:15px; font-weight:500; margin-top:var(--v2)}
.opneem-sone .klein-nota{margin-top:var(--v2)}
.opneem-ikoon{
  width:34px; height:34px; color:var(--ink-sag);
  display:block; margin:0 auto;
}
/* Sodra sy bladsye gekies het, is die groot pyltjie klaar - dan wil sy
   die duimnaels sien, nie 'n uitnodiging om weer te kies nie. */
.opneem-sone:has(.voorskou-ry:not(:empty)) .opneem-ikoon{width:24px; height:24px}

/* ------------------------------------------------------------- vordering
   Vir 'n wag van 30-120 sekondes. Die balk is 'n skatting en hy weet dit:
   hy kruip nooit verby 92% voordat die antwoord werklik terug is nie. */
.besig-skerm{padding:var(--v6) 0; text-align:left}
.vordering-baan{
  height:6px; background:var(--papier-2); border-radius:999px;
  overflow:hidden; margin-bottom:var(--v5);
}
.vordering-balk{
  height:100%; width:0; border-radius:999px;
  background:var(--nasien); transition:width .3s linear;
}
.stap-lys{list-style:none; counter-reset:none}
.stap-lys li{
  display:flex; align-items:center; gap:var(--v3);
  padding:9px 0; font-size:14.5px; color:var(--ink-sag);
  transition:color .2s ease;
}
.stap-merk{
  flex:none; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--lyn); position:relative;
}
.stap-lys li.besig{color:var(--ink); font-weight:500}
.stap-lys li.besig .stap-merk{
  border-color:var(--nasien);
  border-top-color:transparent; animation:draai .8s linear infinite;
}
.stap-lys li.klaar{color:var(--ink-sag)}
.stap-lys li.klaar .stap-merk{background:var(--geslaag); border-color:var(--geslaag)}
.stap-lys li.klaar .stap-merk::after{
  content:""; position:absolute; left:3.5px; top:1px;
  width:4px; height:8px; border:solid var(--papier);
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
.wagsirkel{display:none}
.stroom-deel{
  font-size:14px; color:var(--ink); font-weight:500;
  margin-top:var(--v3);
}
/* Bly-op-die-bladsy: 'n waarskuwing, nie 'n terloopse nota nie. Op 'n foon
   is oorskakel na 'n ander program die maklikste manier om die oplaai te
   verloor - dus kry dit die nasienpen se kleur. */
.bly-hier{
  margin-top:var(--v4); padding:var(--v3) var(--v4);
  background:var(--nasien-sag); border-left:3px solid var(--nasien);
  border-radius:var(--radius); font-size:13px; line-height:1.5; color:#7A2C27;
}