/* De AI-scan. Alleen wat scan.html (en straks de uitkomstpagina) nodig heeft
   en nergens anders staat. Alle waarden komen uit huisstijl.css, via evai.css.

   Handwerk, niet gegenereerd: bevries.py raakt dit bestand niet aan. Alles
   heeft as- ervoor (AI-scan), zodat het niet botst met de scan- van de oude
   rekenhulp die nog in evai.css staat. */

/* Proef 13 oktober: de kop vet. Newsreader is een variabel font, maar
   fonts.css meldt alleen 300 en 400. Deze eigen naam geeft de scan het hele
   bereik van hetzelfde bestand, zonder dat de rest van de site verandert. */
@font-face{font-family:'Newsreader Kop';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/newsreader-latin.woff2) format('woff2')}

/* ---------- de kop: tekst links, de hele foto rechts, op donker ----------
   Zelfde opbouw als de sectorpagina's met kopstijl: naast. */
.as-kop.banner{display:block;min-height:0;background:var(--mahonie);color:var(--inkt-donker);
  padding:calc(var(--balk-hoogte) + var(--ruimte-9)) 0 var(--ruimte-9)}
.as-kop.banner::after{display:none}
.as-kop-in{max-width:1320px;margin:0 auto;padding:0 var(--wrap-lucht);display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--ruimte-8) clamp(40px,5vw,80px);align-items:start}
/* Ritme: lead en knop 32 uit elkaar, de kleine regel hoort bij de knop (12). */
.as-kop-tekst{display:grid;gap:var(--ruimte-6);justify-items:start}
.as-kop h1{grid-column:1/-1;margin:0;font-family:'Newsreader Kop',var(--f-display);font-weight:600;
  font-size:var(--t-kop);line-height:1.04;letter-spacing:var(--ls-kop)}
.as-kop h1 span{display:block;text-wrap:balance}
.as-kop h1 .as-kop-amber{color:var(--acc-donker)}
.as-kop .as-lead{margin:0;max-width:40ch;font-size:var(--t-groot);line-height:var(--lh-lead)}
.as-kop .as-fijn{margin:calc(var(--ruimte-3) - var(--ruimte-6)) 0 0;font-size:var(--t-klein);color:var(--gedempt-donker)}
.as-kop .knop{background:var(--inkt-donker);color:var(--inkt-licht);border-color:var(--inkt-donker)}
.as-foto{margin:0;justify-self:end;width:100%;max-width:420px}
.as-foto img{display:block;width:100%;height:auto;max-height:72vh;object-fit:cover;object-position:50% 40%;border-radius:var(--r-vlak)}
/* Het lege web, in plaats van de foto (13 oktober). Zie assets/scan-kop-web.js. */
.as-web{margin:0;justify-self:end;width:100%;max-width:600px;display:flex;flex-direction:column;gap:0}
.as-web-svg{display:block;width:100%;height:auto;overflow:visible}
.as-web-onder{font-size:var(--t-klein);color:var(--gedempt-donker);text-align:center;max-width:34ch;align-self:center}
.as-web-ring{fill:none;stroke:var(--inkt-donker);stroke-opacity:.08;stroke-width:var(--lijn-dikte)}
.as-web-ring.buiten{stroke:var(--acc-donker);stroke-opacity:.35}
.as-web-as{stroke:var(--inkt-donker);stroke-opacity:.06;stroke-width:var(--lijn-dikte)}
.as-web-halo{fill:var(--acc-donker);opacity:.22}
.as-web-vorm{fill:var(--acc-donker);fill-opacity:.12;stroke:var(--acc-donker);stroke-width:var(--rand-fout)}
.as-web-stip{fill:var(--inkt-donker)}
/* Bovenmarge = de hoogte van het label boven het web, zodat dat label gelijk
   begint met de tekst links. */
.as-web-vlak{position:relative;order:-1;margin:calc(var(--ruimte-6) + var(--ruimte-1)) 18% var(--ruimte-8)}
.as-web-label{position:absolute;margin:0;display:grid;gap:2px;width:max-content;max-width:19ch}
.as-web-label.rechts{transform:translateY(-50%)}
.as-web-label.links{transform:translate(-100%,-50%);text-align:right}
.as-web-label.boven{transform:translate(-50%,-100%);text-align:center;max-width:none}
.as-web-label.onder{transform:translate(0,0)}
.as-web-label.links.onder{transform:translate(-100%,0)}
.as-web-naam{font-family:var(--f-display);font-weight:var(--disp-w);font-size:var(--t-titel);letter-spacing:var(--ls-titel);line-height:var(--lh-titel);color:var(--inkt-donker)}
.as-web-vr{font-family:var(--sans);font-size:var(--t-klein);letter-spacing:var(--ls-klein);line-height:1.35;color:var(--gedempt-donker)}
.as-web-lijst{display:none;list-style:none;margin:0;padding:0;gap:var(--ruimte-3)}
.as-web-lijst li{display:grid;gap:2px}
.as-web-vraag{font-family:var(--f-display);font-weight:var(--disp-w);font-size:var(--t-sub);letter-spacing:var(--ls-titel);fill:var(--inkt-donker)}
/* Tablet en kleine laptop: tekst en web onder elkaar, het web in het midden. */
@media(max-width:1100px){
  .as-kop-in{grid-template-columns:1fr;row-gap:var(--ruimte-7)}
  .as-web-vlak{margin-inline:22%}
  .as-kop-tekst{max-width:40rem;padding-top:0}
  .as-web{justify-self:center;max-width:640px}}
@media(max-width:760px){
  .as-kop.banner{padding:calc(var(--balk-hoogte) + var(--ruimte-7)) 0 var(--ruimte-8)}
  .as-kop-in{row-gap:var(--ruimte-6)}
  .as-web{justify-self:center;max-width:none;margin:0}
  .as-web-vlak{margin:var(--ruimte-6) 25% var(--ruimte-5)}
  .as-web-label .as-web-naam{font-size:var(--t-klein)}
  .as-web-label .as-web-vr{display:none}
  .as-web-onder{display:none}
  .as-kop-in{grid-template-columns:1fr}
  .as-foto{order:-1;justify-self:start;max-width:none}
  .as-foto img{max-height:52vh;object-position:50% 35%}}

/* ---------- de scan zelf: één vraag per scherm ---------- */
.as-scan{background:var(--papier);color:var(--inkt-licht);
  padding:clamp(56px,8vw,112px) 0 clamp(88px,12vw,150px);scroll-margin-top:72px}
.as-scan-in{max-width:860px;margin:0 auto;padding:0 var(--wrap-lucht)}

/* De voortgang: een haarlijn die volloopt in inkt. */
.as-voortgang{height:2px;background:var(--lijn-licht);border-radius:var(--r-streep);overflow:hidden;
  margin-bottom:clamp(40px,6vw,72px)}
.as-voortgang span{display:block;height:100%;width:0;background:var(--inkt-licht);
  transition:width var(--duur-schakel) var(--soepel)}

.as-scherm{display:grid;gap:clamp(20px,2.6vw,32px)}
.as-scherm[hidden]{display:none}
.as-scherm.komt{animation:as-op var(--duur-schakel) var(--soepel) both}
@keyframes as-op{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.as-vraag{margin:0;font-family:var(--f-display);font-weight:var(--disp-w);
  font-size:var(--t-sub);line-height:1.12;letter-spacing:var(--ls-titel);text-wrap:balance;outline:none}
.as-sub{margin:-8px 0 0;font-size:var(--t-tekst);line-height:var(--lh-tekst);color:var(--gedempt-licht);max-width:56ch}

/* Keuzes onder elkaar, de hele breedte. Gekozen: een inktrand en een stip. */
.as-keuzes{display:grid;gap:10px}
.as-keuze{font:inherit;font-size:var(--t-tekst);text-align:left;color:var(--inkt-licht);
  background:var(--papier-2);border:1px solid var(--lijn-licht);border-radius:var(--r-veld);
  padding:18px 56px 18px 22px;cursor:pointer;position:relative;
  transition:border-color var(--duur-tik) var(--zacht),box-shadow var(--duur-tik) var(--zacht)}
.as-keuze::after{content:"";position:absolute;right:22px;top:50%;width:14px;height:14px;margin-top:-7px;
  border:1px solid var(--rand-licht);border-radius:var(--r-rond);
  transition:background var(--duur-tik) var(--zacht),border-color var(--duur-tik) var(--zacht)}
.as-keuzes.meer .as-keuze::after{border-radius:4px}
.as-keuze:hover{border-color:var(--rand-licht)}
.as-keuze[aria-pressed="true"]{border-color:var(--inkt-licht);box-shadow:inset 0 0 0 .5px var(--inkt-licht)}
.as-keuze[aria-pressed="true"]::after{background:var(--inkt-licht);border-color:var(--inkt-licht)}
.as-keuze:focus-visible,.as-seg button:focus-visible,.as-veld input:focus-visible,.as-veld textarea:focus-visible{
  outline:2px solid var(--inkt-licht);outline-offset:2px}

/* Een raster: per regel een eigen kaartje. Het nummer erboven, zoals de
   genummerde koppen op de sectorpagina's, en de knoppen eronder over de hele
   breedte, zodat ze groot genoeg zijn om zonder mikken te raken. */
.as-raster{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.as-stelling{display:grid;gap:14px;background:var(--papier-2);border:1px solid var(--lijn-licht);
  border-radius:var(--r-veld);padding:clamp(18px,2.2vw,24px) clamp(18px,2.4vw,28px);scroll-margin:96px 0;
  transition:border-color var(--duur-schakel) var(--zacht)}
.as-stelling.klaar{border-color:var(--rand-licht)}
.as-nr{font-family:var(--label-f);font-size:var(--t-label);letter-spacing:var(--label-ls);color:var(--gedempt-licht)}
.as-stelling p{margin:-6px 0 0;font-size:var(--t-groot);line-height:1.45;max-width:58ch}
.as-seg{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
.as-seg button{font:inherit;font-size:var(--t-klein);color:var(--inkt-licht);background:var(--papier);
  border:1px solid var(--rand-licht);border-radius:var(--r-pil);padding:12px 10px;cursor:pointer;
  transition:background var(--duur-tik) var(--zacht),color var(--duur-tik) var(--zacht),border-color var(--duur-tik) var(--zacht)}
.as-seg button:hover{border-color:var(--inkt-licht)}
.as-seg button[aria-pressed="true"]{background:var(--inkt-licht);border-color:var(--inkt-licht);color:var(--papier)}
@media(max-width:620px){.as-seg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-seg:has(button:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .as-seg button{font-size:var(--t-fijn);padding:12px 4px;white-space:nowrap}}

/* Velden. */
.as-velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 20px}
.as-veld{display:grid;gap:8px}
.as-veld label{font-size:var(--t-klein);color:var(--gedempt-licht)}
.as-veld input,.as-veld textarea{font:inherit;font-size:var(--t-tekst);color:var(--inkt-licht);width:100%;
  background:var(--papier-2);border:1px solid var(--rand-licht);border-radius:var(--r-veld);padding:14px 16px}
.as-veld textarea{min-height:120px;resize:vertical;line-height:var(--lh-tekst)}
.as-veld input[aria-invalid="true"]{border:var(--rand-fout) solid var(--fout-licht)}
.as-fout{margin:0;font-size:var(--t-fijn);color:var(--fout-licht)}
.as-fout:empty{display:none}
.as-klein{margin:0;font-size:var(--t-fijn);line-height:1.5;color:var(--gedempt-licht);max-width:60ch}
.as-klein a{color:inherit}

/* De schuif bij vraag 12: het getal groot, in de koppenletter. */
.as-schuif{display:grid;gap:14px;max-width:560px}
.as-schuif output{font-family:var(--f-display);font-size:var(--t-cijfer);line-height:1;letter-spacing:var(--ls-kop)}
.as-schuif output small{font-family:var(--sans);font-size:var(--t-tekst);letter-spacing:0;color:var(--gedempt-licht);margin-left:10px}
.as-schuif input{width:100%;accent-color:var(--inkt-licht)}
.as-schuif .as-uiteinden{display:flex;justify-content:space-between;font-size:var(--t-fijn);color:var(--gedempt-licht)}

/* De maanden bij "iets nieuws lanceren": een raster van twaalf. */
.as-keuzes.maanden{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.as-keuzes.maanden .as-keuze{padding:14px 40px 14px 18px}
.as-keuzes.maanden .as-keuze::after{right:16px}

/* Onderaan: terug, waar je bent, verder. */
.as-onder{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(36px,5vw,56px);padding-top:22px;border-top:1px solid var(--lijn-licht)}
.as-terug{font:inherit;font-size:var(--t-klein);color:var(--inkt-licht);background:none;border:0;padding:8px 0;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.as-terug[hidden]{visibility:hidden;display:inline}
.as-waar{font-family:var(--label-f);font-size:var(--t-label);letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--gedempt-licht)}
.as-scan .as-verder{cursor:pointer;background:var(--inkt-licht);color:var(--papier);border-color:var(--inkt-licht)}
.as-scan .as-verder:disabled{opacity:.3;cursor:not-allowed}
@media(max-width:560px){.as-waar{order:-1;width:100%}}

@media(prefers-reduced-motion:reduce){
  .as-scherm.komt{animation:none}
  .as-voortgang span,.as-keuze,.as-seg button{transition:none}}