/* =====================================================================
   BTSessie — die siklus-enjin se voorkoms: die vrou se les-prototipe
   (deploy/siklus-01/les-prototipe.html) VERBATIM oorgedra, geskoop onder
   #sessieOv sodat dit as 'n vol-skerm oorleg binne die app leef.
   Kleure/fonte/komponente is háár ontwerpstelsel — nie die app s'n nie.
   ===================================================================== */
#sessieOv{
  --diep:#123B34; --staal:#6E8A8C; --kryt:#ECEFEA;
  --brons:#D9A441; --roes:#9E4A32; --ink:#101A18;
  --papier:#F7F8F5;
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --lees:'Literata',Georgia,serif;
  --data:'IBM Plex Mono',ui-monospace,monospace;
  position:fixed; inset:0; z-index:1200; overflow-y:auto; overscroll-behavior:contain;
  background:var(--diep); color:var(--ink); font-family:var(--lees); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
#sessieOv *{box-sizing:border-box}
#sessieOv .ses-close{position:fixed;top:10px;right:12px;z-index:40;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(236,239,234,.3);background:rgba(16,26,24,.55);
  color:var(--kryt);font-size:17px;cursor:pointer;font-family:var(--disp)}
#sessieOv .ses-close:hover{background:rgba(16,26,24,.85)}

/* ---- kluisstrook: die handtekening-element ---- */
#sessieOv .kluise{position:sticky;top:0;z-index:20;background:var(--diep);
  padding:14px 56px 12px 16px;display:flex;gap:6px;justify-content:center;
  border-bottom:1px solid rgba(236,239,234,.14)}
#sessieOv .deur{width:46px;height:56px;border-radius:3px;background:var(--staal);
  border:1px solid rgba(16,26,24,.35);position:relative;cursor:default;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
  font-family:var(--data);font-size:11px;color:var(--diep);
  transform-origin:left center;transition:transform .5s cubic-bezier(.2,.7,.3,1),background .3s,opacity .3s;
  perspective:400px}
#sessieOv .deur::before{content:'';position:absolute;right:5px;top:50%;width:5px;height:5px;
  border-radius:50%;background:var(--brons);transform:translateY(-50%)}
#sessieOv .deur.klaar{transform:rotateY(-58deg);opacity:.42}
#sessieOv .deur.nou{background:var(--kryt);box-shadow:0 0 0 2px var(--brons)}
#sessieOv .deur.wag{opacity:.4}

/* ---- blad ---- */
#sessieOv .blad{max-width:700px;margin:0 auto;padding:0 18px 120px}
#sessieOv .kaart{background:var(--papier);border-radius:2px;padding:30px 30px 34px;margin-top:22px;
  box-shadow:0 1px 0 rgba(16,26,24,.2)}
#sessieOv .eyebrow{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--staal);margin:0 0 6px}
#sessieOv h1{font-family:var(--disp);font-weight:800;font-size:clamp(26px,5vw,38px);line-height:1.05;
  margin:0 0 4px;letter-spacing:-.02em;color:var(--ink)}
#sessieOv h2{font-family:var(--disp);font-weight:700;font-size:21px;margin:0 0 14px;letter-spacing:-.01em;color:var(--ink)}
#sessieOv h3{font-family:var(--disp);font-weight:700;font-size:15px;margin:22px 0 8px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--staal)}
#sessieOv p{margin:0 0 14px}
#sessieOv .lei{color:#40534F;font-size:15px}

/* ---- ankerteks ---- */
#sessieOv .teks{font-size:18.5px;line-height:1.78;max-width:34em}
#sessieOv .teks p{margin:0 0 17px;position:relative;padding-left:34px}
#sessieOv .teks p::before{content:attr(data-n);position:absolute;left:0;top:4px;font-family:var(--data);
  font-size:11px;color:var(--staal);width:22px;text-align:right}
#sessieOv .teks p.luister-nou{background:rgba(217,164,65,.14);border-radius:2px}
#sessieOv .parasay{position:absolute;left:-2px;top:24px;background:none;border:0;cursor:pointer;
  font-size:12px;opacity:.5;padding:2px}
#sessieOv .parasay:hover{opacity:1}
#sessieOv .glos{border-bottom:1.5px dotted var(--brons);cursor:pointer;background:none;border-left:0;
  border-right:0;border-top:0;font:inherit;color:inherit;padding:0}
#sessieOv .glos:hover,#sessieOv .glos:focus-visible{background:rgba(217,164,65,.22)}
.glosbal{position:fixed;background:#101A18;color:#ECEFEA;padding:9px 13px;border-radius:3px;
  font-family:'Literata',Georgia,serif;font-size:14px;max-width:270px;z-index:1300;box-shadow:0 6px 20px rgba(0,0,0,.3)}

/* ---- kontroles ---- */
#sessieOv button{font:inherit;cursor:pointer}
#sessieOv .knop{font-family:var(--disp);font-weight:700;font-size:15px;background:var(--diep);color:var(--kryt);
  border:0;border-radius:2px;padding:12px 24px;letter-spacing:.01em}
#sessieOv .knop:hover{background:#1B564C}
#sessieOv .knop[disabled]{opacity:.35;cursor:not-allowed}
#sessieOv .knop.sag{background:transparent;color:var(--diep);box-shadow:inset 0 0 0 1.5px var(--staal)}
#sessieOv .opsie{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid #D4DAD6;
  border-radius:2px;padding:12px 15px;margin:0 0 8px;font-family:var(--lees);font-size:16px;color:var(--ink)}
#sessieOv .opsie:hover{border-color:var(--staal)}
#sessieOv .opsie.gekies{border-color:var(--diep);background:var(--kryt)}
#sessieOv .opsie.reg{border-color:#2F7D5F;background:#E8F3ED}
#sessieOv .opsie.verkeerd{border-color:var(--roes);background:#F7EAE6}
#sessieOv input[type=text]{font-family:var(--lees);font-size:17px;padding:11px 13px;border:1.5px solid #D4DAD6;
  border-radius:2px;width:100%;max-width:300px;background:#fff;color:var(--ink)}
#sessieOv input[type=text]:focus{outline:2px solid var(--brons);outline-offset:1px;border-color:var(--staal)}
#sessieOv .chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
#sessieOv .chip{font-family:var(--lees);font-size:15px;background:#fff;border:1.5px solid #D4DAD6;
  border-radius:2px;padding:8px 13px;color:var(--ink)}
#sessieOv .chip:hover{border-color:var(--staal)}
#sessieOv .chip.op{background:var(--kryt);border-color:var(--diep)}

/* ---- terugvoer ---- */
#sessieOv .tv{border-left:3px solid var(--staal);padding:11px 14px;margin:12px 0 0;font-size:15px;background:#fff}
#sessieOv .tv.reg{border-color:#2F7D5F}
#sessieOv .tv.verkeerd{border-color:var(--roes)}
#sessieOv .tv.spel{border-color:var(--brons)}
#sessieOv .tv strong{font-family:var(--disp)}

/* ---- meting ---- */
#sessieOv .meting{font-family:var(--data);font-size:12.5px;background:var(--ink);color:#BFCBC7;
  border-radius:2px;padding:20px 22px;margin-top:22px;line-height:1.75}
#sessieOv .meting h3{color:var(--brons);margin-top:0}
#sessieOv .meting b{color:var(--kryt);font-weight:500}
#sessieOv .meting summary{cursor:pointer;font-family:var(--disp);color:var(--brons);
  text-transform:uppercase;letter-spacing:.06em;font-size:13px}
#sessieOv .ry{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dotted rgba(191,203,199,.2);
  padding:3px 0}
#sessieOv .oor{color:var(--roes)}
#sessieOv .binne{color:#6FBF95}

/* ---- voetstuk ---- */
#sessieOv .voet{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:var(--kryt);
  padding:11px 18px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--data);font-size:12px;z-index:1230}
#sessieOv .vorder{height:2px;background:var(--brons);position:absolute;top:0;left:0;transition:width .3s}

#sessieOv .woordkaart{background:#fff;border:1.5px solid #D4DAD6;border-left:3px solid var(--brons);
  padding:15px 17px;margin:0 0 10px;border-radius:2px}
#sessieOv .woordkaart .w{font-family:var(--disp);font-weight:700;font-size:19px}
#sessieOv .woordkaart .e{font-family:var(--data);font-size:12px;color:var(--staal);text-transform:uppercase;
  letter-spacing:.08em;margin-left:8px}
#sessieOv .woordkaart .d{margin:6px 0 0;font-size:15px}
#sessieOv .woordkaart .v{margin:7px 0 0;font-size:14.5px;color:#4A5C58;font-style:italic}
#sessieOv .woordkaart .wsay{background:none;border:0;font-size:15px;margin-left:6px;cursor:pointer;opacity:.6}
#sessieOv .woordkaart .wsay:hover{opacity:1}
#sessieOv ol.volgorde{padding-left:0;list-style:none;counter-reset:v}
#sessieOv ol.volgorde li{counter-increment:v;background:#fff;border:1.5px solid #D4DAD6;border-radius:2px;
  padding:11px 14px 11px 42px;margin:0 0 7px;position:relative;font-size:15.5px}
#sessieOv ol.volgorde li::before{content:counter(v);position:absolute;left:14px;font-family:var(--data);
  color:var(--staal);font-size:13px}
#sessieOv .pasry{display:flex;gap:8px;align-items:center;margin:0 0 8px;flex-wrap:wrap}
#sessieOv .pasry .l{flex:0 0 145px;font-family:var(--disp);font-weight:700;font-size:15px}
#sessieOv textarea{width:100%;min-height:88px;font-family:var(--lees);font-size:16px;padding:11px;
  border:1.5px solid #D4DAD6;border-radius:2px;background:#fff;color:var(--ink)}
@media (prefers-reduced-motion:reduce){#sessieOv *{transition:none!important;animation:none!important}}
@media (max-width:560px){#sessieOv .kaart{padding:22px 18px 26px}#sessieOv .deur{width:38px;height:48px}}

/* ---- Sproutie binne die sessie-oorleg: bly vas op die skerm terwyl die les rol ---- */
#sessieOv .sp-fab, #sessieOv .sp-panel, #sessieOv .sp-hintbubble { position: fixed; }