/* Archief: kies de juiste persoon (scherm 16) en niet gevonden (scherm 17). Bij demo/assets/archiefkeuze.js.
   Ontwerp: canvas Archief-match en Archief-niet-gevonden. Voorouders op perkament, levenden wit. */
.ak{display:flex;flex-direction:column;gap:14px}
.ak h1{font-size:32px;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:6px 0 0}
.ak .mj-lead{font-size:17px;line-height:1.5;margin:8px 0 0}
.ak-terug{margin:0;font-size:15px}
.ak-terug a{color:var(--grijs)}
.ak-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,1fr);gap:40px;align-items:start}
.ak-links{display:flex;flex-direction:column;gap:18px;min-width:0}
.ak-jij{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;border:1px dashed var(--grijs-400);border-radius:14px;padding:12px 16px;font-size:15px;color:var(--grijs)}
.ak-jij b{color:var(--inkt)}
.ak-jij .mj-link{margin-left:auto;font-size:14px}
/* de lijst */
.ak-lijst{border:1px solid var(--grijs-200);border-radius:18px;overflow:hidden}
.ak-lkop,.ak-rij{display:grid;grid-template-columns:minmax(0,1.7fr) 70px minmax(0,1fr) minmax(0,.9fr) 118px;gap:12px;align-items:center;padding:10px 16px}
.ak-lkop{background:var(--zacht);font-size:13px;font-weight:700;color:var(--grijs);border-bottom:1px solid var(--lijn);padding-left:52px}
.ak-rij{position:relative;border-bottom:1px solid var(--grijs-100);font-size:15px;cursor:pointer;padding-left:52px}
.ak-rij:last-child{border-bottom:0}
.ak-rij:hover{background:var(--zacht)}
.ak-rij.sel{background:var(--kobalt-25);box-shadow:inset 4px 0 0 var(--kobalt)}
.ak-rij input{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;accent-color:var(--kobalt);margin:0}
.ak-rij input:focus-visible{outline:3px solid var(--kobalt-300);outline-offset:2px}
.ak-nm{display:flex;gap:10px;align-items:flex-start;min-width:0}
.ak-nm small{display:block;font-size:13px;color:var(--grijs);line-height:1.35;margin-top:2px}
.ak-nr{flex:none;width:22px;height:22px;border-radius:999px;background:var(--perk);color:var(--sepia);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
.ak-naam{font-family:'IM Fell English',Georgia,serif;font-size:18px;color:var(--galnoot);line-height:1.2}
.ak-c{min-width:0;overflow-wrap:anywhere}
.ak-ok{color:var(--groen);font-weight:800}
.ak-nee{color:var(--rood);font-weight:800}
.ak-vraag,.ak-grijs{color:var(--grijs-400);font-weight:700}
.ak-grijs{font-weight:400;font-size:14px}
.ak-score{display:inline-flex;gap:6px;align-items:center;justify-self:start;font-size:13px;font-weight:800;border-radius:999px;padding:3px 10px;white-space:nowrap}
.ak-score.goed{background:var(--mint);color:var(--groen)}
.ak-score.deels{background:#FEF0C7;color:#93370D}
.ak-score.zwak{background:var(--grijs-100);color:var(--grijs)}
.ak-bevestig{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ak-bevestig .mj-knop{min-height:52px;font-size:16px;padding:0 20px}
.ak-uitleg{font-size:14px;color:var(--grijs)}
.ak-melding{margin:0;font-size:15px;color:var(--groen);font-weight:600}
.ak-melding:empty{display:none}
/* staat hij er niet bij? */
.ak-niet{border:1px solid #FEDF89;background:#FFFAEB;border-radius:18px;padding:18px 20px}
.ak-niet h2{margin:0;font-size:20px;font-weight:800;color:var(--inkt)}
.ak-niet>p{margin:4px 0 14px;font-size:15px;line-height:1.5;color:var(--bruin-d)}
.ak-niet .mj-link{font-size:15px}
.ak-opties{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ak-optie{background:#fff;border:1px solid var(--grijs-200);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.ak-optie.eerst{border:2px solid var(--kobalt)}
.ak-optie b{font-size:16px}
.ak-optie span{font-size:14px;line-height:1.45;color:var(--grijs);flex:1}
.ak-optie .mj-knop,.ak-optie .mj-twee{min-height:44px;font-size:14px;width:100%;padding:0 12px}
.ak-redactie{margin:14px 0 0;font-size:15px}
.ak-meer{margin-top:14px;background:#fff;border:1px solid var(--grijs-200);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.ak-meer h3{margin:0;font-size:17px}
.ak-meer .mj-knop{min-height:48px;font-size:16px}
.ak-g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.ak-fout{margin:0;color:var(--rood);font-size:14px}
.ak-fout:empty{display:none}
/* rechts: de akte */
.ak-bewijs{border:1px solid var(--grijs-200);border-radius:18px;overflow:hidden;position:sticky;top:20px;background:#fff}
.ak-bkop{padding:14px 18px;border-bottom:1px solid var(--lijn);display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--grijs)}
.ak-scan{display:block;width:calc(100% - 36px);margin:18px;border:1px solid var(--perk-r);border-radius:4px}
.ak-scan.leeg{height:200px;background:#E9DCC0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--sepia);text-align:center;line-height:1.6;box-sizing:border-box}
.ak-trans{font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.55;color:var(--galnoot);margin:0 18px;background:var(--perk-l);border:1px solid var(--perk-r);border-radius:10px;padding:12px 14px}
.ak-feiten{list-style:none;margin:12px 18px 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.45;color:var(--grijs)}
.ak-feiten li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.ak-feiten b{color:var(--inkt)}
.ak-bron{font-size:13px;color:var(--grijs);margin:12px 18px 14px}
/* bevestigd / we zoeken */
.ak-klaar{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--mint-r);background:#F6FEF9;border-radius:18px;padding:22px 24px;max-width:860px}
.ak-klaar.zoekt{border-color:var(--kobalt-200);background:var(--kobalt-25)}
.ak-vink{flex:none;width:44px;height:44px;border-radius:999px;background:var(--groen);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px}
.ak-klaar.zoekt .ak-vink{background:var(--kobalt)}
.ak-klaar p:last-child{margin-bottom:0}
/* scherm 17 */
.ak-waarom{background:#FFFAEB;border:1px solid #FEDF89;border-radius:14px;padding:14px 16px;font-size:15px;line-height:1.5;color:var(--bruin-d)}
.ak-waarom ul{margin:6px 0 0;padding-left:20px}
.ak-zelf{margin-top:10px}
.ak-zelf summary{cursor:pointer;font-weight:700;color:var(--kobalt)}
.ak-zelf .ak-meer{margin-top:10px}
.ak-ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ak-trede{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;border:1px solid var(--grijs-200);border-radius:18px;padding:18px;background:#fff}
.ak-trede.eerst{border:2px solid var(--kobalt);background:var(--kobalt-25)}
.ak-trnr{width:40px;height:40px;border-radius:999px;background:var(--inkt);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.ak-trede.eerst .ak-trnr{background:var(--kobalt)}
.ak-trede h2{margin:0;font-size:20px;font-weight:800}
.ak-trede p{margin:4px 0 12px;font-size:15px;line-height:1.5;color:var(--grijs)}
.ak-trede .mj-veld{margin-bottom:12px}
.ak-trede .mj-vink{display:flex;gap:10px;align-items:center;font-size:15px;margin-bottom:12px}
.ak-trede .mj-vink input{width:22px;height:22px;accent-color:var(--inkt)}
.ak-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.ak-knoppen .mj-knop{min-height:52px;font-size:16px;padding:0 20px}
.ak-donker{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:14px;border:0;background:var(--inkt);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.ak-donker:hover{background:#273246}
.ak-ok{margin:8px 0 0;color:var(--groen);font-weight:600;font-size:15px}
.ak-ok:empty{display:none}
.ak-stil{font-size:14px;color:var(--grijs);margin:0}
/* stamboompagina als voorbeeld */
.ak-venster{display:flex;flex-direction:column;gap:14px;position:sticky;top:20px}
.ak-vkop{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--grijs)}
.ak-pagina{position:relative;aspect-ratio:210/297;width:76%;align-self:center;background:var(--perk-l);box-shadow:0 1px 2px rgba(16,24,40,.08),0 12px 32px rgba(16,24,40,.14);overflow:hidden;padding:12% 9%;box-sizing:border-box;font-family:'Source Serif 4',Georgia,serif;color:var(--galnoot);user-select:none}
.ak-pk{font-family:'Plus Jakarta Sans',sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--sepia)}
.ak-ptitel{font-family:'IM Fell English',Georgia,serif;font-size:20px;margin:6px 0 14px}
.ak-r{display:grid;gap:5px;margin-bottom:10px}
.ak-vak{border:1px solid var(--perk-r);border-radius:3px;background:var(--perk);padding:6px 4px;font-family:'Plus Jakarta Sans',sans-serif;font-size:9.5px;line-height:1.3;text-align:center;color:var(--galnoot);min-height:14px;overflow-wrap:anywhere}
.ak-vak.leeg{background:transparent;border-style:dashed;color:var(--sepia)}
.ak-vak.zoek{background:#FFFAEB;border:1.5px solid #B54708}
.ak-vak.nu{background:#fff;border:1.5px solid var(--inkt)}
.ak-wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.ak-wm .wm-in{transform:rotate(-30deg);display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.1;font-family:'Plus Jakarta Sans',sans-serif;color:#3a2614;white-space:nowrap}.ak-wm .wm-in img{width:40px;height:40px;filter:grayscale(1) brightness(.4)}.ak-wm .wm-in b{font-size:16px;font-weight:800}.ak-wm .wm-in i{font-style:normal;font-size:22px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.ak-legenda{font-size:14px;line-height:1.5;color:var(--grijs);text-align:center;margin:0}
/* verwijzing vanaf de voorouders, het archief en het personenpaneel */
.ak-naar{font-size:14px;font-weight:700;color:var(--kobalt);white-space:nowrap}
.vo-akten .ak-naar{align-self:center}
.ak-naar-knop{margin-top:8px;min-height:44px;font-size:15px}
.oz-onbekend .ak-naar{display:inline-block;margin-top:4px}
@media (max-width:1000px){
  .ak-main{grid-template-columns:1fr;gap:24px}
  .ak-bewijs,.ak-venster{position:static}
  /* telefoon en tablet: de akte direct onder de keuzeknoppen, niet pas onder "Staat hij er niet bij?" */
  .ak-main.kies{display:flex;flex-direction:column}
  .ak-main.kies .ak-links{display:contents}
  .ak-main.kies .ak-bewijs{order:1}
  .ak-main.kies .ak-niet{order:2}
  .ak-opties{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ak h1{font-size:26px}
  .ak-lkop{display:none}
  .ak-rij{grid-template-columns:1fr 1fr;gap:6px 12px;padding:14px 14px 14px 48px}
  .ak-nm{grid-column:1/-1}
  .ak-c::before{content:attr(data-l) ': ';font-size:12px;color:var(--grijs);font-weight:600}
  .ak-score{grid-column:1/-1}
  .ak-rij input{top:18px;transform:none}
  .ak-bevestig .mj-knop,.ak-bevestig .mj-twee{width:100%}
  .ak-g2{grid-template-columns:1fr}
  .ak-trede{grid-template-columns:1fr;gap:10px;padding:16px}
  .ak-knoppen .mj-knop,.ak-knoppen .mj-twee,.ak-donker{width:100%}
  .ak-pagina{width:92%}
  .ak-klaar{flex-direction:column;padding:18px}
}
/* Ons advies (release "De nieuwe /mijn/"): de bovenste kandidaat als die goed past */
.ak-advies{display:inline-block;margin:0 0 3px;padding:2px 8px;border-radius:999px;background:#ECFDF3;border:1px solid #ABEFC6;color:#067647;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ak-pp-kt .ak-advies{display:block;width:max-content}