/* Leesweergave van de rapportviewer op kansencheck.html en voorbeeldrapport.html.
   Alleen toegepast binnen de bestaande rapportscope; overige pagina's blijven gelijk.
   Maten, kleuren, radii en easing komen uit WEBSITE_VISUAL_AND_WRITING_STANDARD.md. */

.page-boek {
  --boek-navy: #04102A;
  --boek-navy-diep: #020A1C;
  --boek-navy-tussen: #071634;
  --boek-creme: #FBFAEF;
  --boek-azuur: #3FA9E8;
  --boek-messing: #C9A468;
  /* Zelfde waarden als de knoppen op de rest van de site, hier als eigen kopie
     zodat deze stylesheet niet van style.css afhangt. */
  --boek-vlak: #F4EFE2;
  --boek-vlak-hoog: #FBF6EA;
  --boek-inkt: #061127;
  --boek-keyline-brons: rgba(201, 164, 104, .40);
  --boek-keyline-brons-hoog: rgba(201, 164, 104, .78);
  --boek-keyline: rgba(251, 250, 239, .16);
  --boek-tekst: rgba(251, 250, 239, .78);
  --boek-tekst-stil: rgba(251, 250, 239, .52);
  --boek-easing: cubic-bezier(.22, 1, .36, 1);
  /* Wordt bij het laden door boek.js gemeten en overschreven. De waarde hier is
     alleen een veilige startwaarde zodat de pagina zonder JavaScript niet breekt. */
  --boek-chrome: 260px;
}

/* Eigen definitie, zodat deze pagina niet afhangt van een klasse die in
   style.css misschien anders heet. */
.page-boek .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- canvas ---------- */

.boek {
  background: var(--boek-navy-diep);
  padding-block: clamp(1.5rem, 3vw, 2.6rem) clamp(2rem, 4vw, 3.2rem);
  /* De navigatie staat vast bovenaan, dus een sprong naar #lezer moet daaronder
     uitkomen. boek.js meet de echte hoogte. */
  scroll-margin-top: calc(var(--boek-navhoogte, 74px) + 14px);
}

.boek-inner {
  /* Een bron voor de breedte, want het blad rekent zijn hoogte hieruit terug. */
  --boek-breedte: min(1220px, 90vw);
  width: var(--boek-breedte);
  margin-inline: auto;
}

.boek-intro,
.boek-balk {
  /* Even breed als het blad, zodat de teller en het spoor precies onder de
     paginarand beginnen in plaats van er net naast. */
  width: var(--boek-bladbreedte, 100%);
  margin-inline: auto;
}

.boek-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin-bottom: clamp(.9rem, 1.6vw, 1.4rem);
  color: var(--boek-tekst-stil);
  font-size: .9rem;
}

.boek-intro p { margin: 0; }

.boek-instructie--touch { display: none; }
.boek-draaihint { display: none; }

/* ---------- het blad ---------- */

.boek-blad {
  position: relative;
  aspect-ratio: 16 / 9;
  height: min(calc(100dvh - var(--boek-chrome)), calc(var(--boek-breedte) * 9 / 16));
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 3px;
  background: var(--boek-creme);
  box-shadow:
    0 1px 0 rgba(251, 250, 239, .22),
    0 26px 60px -24px rgba(2, 10, 28, .85),
    0 4px 14px -6px rgba(2, 10, 28, .5);
  outline: none;
}

/* Eerst de hoogte bepalen, dan de breedte laten volgen uit de verhouding. Andersom
   verliest aspect-ratio van een expliciete breedte en wordt het blad platgedrukt op
   een laag scherm zoals 1280 bij 575. */
@supports not (height: 100dvh) {
  .boek-blad { height: min(calc(100vh - var(--boek-chrome)), calc(var(--boek-breedte) * 9 / 16)); }
}

@media (max-width: 720px) and (orientation: portrait) {
  .boek:fullscreen .boek-draaihint,
  .boek[data-volledig-actief] .boek-draaihint {
    display: block;
    position: absolute;
    top: .7rem;
    left: 50%;
    z-index: 2;
    width: max-content;
    max-width: calc(100vw - 2rem);
    transform: translateX(-50%);
    color: var(--boek-tekst-stil);
    font-size: .76rem;
    line-height: 1.4;
    text-align: center;
  }
}

.boek-blad:focus-visible {
  box-shadow:
    0 0 0 2px var(--boek-azuur),
    0 26px 60px -24px rgba(2, 10, 28, .85);
}

.boek-blad img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s var(--boek-easing);
  pointer-events: none;
}

.boek-blad img[data-actief] {
  opacity: 1;
  visibility: visible;
}

/* ---------- klikzones ---------- */

.boek-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: var(--boek-navy);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .2s var(--boek-easing);
}

.boek-zone--terug { left: 0; justify-items: start; padding-left: clamp(.5rem, 1.4vw, 1.1rem); }
.boek-zone--verder { right: 0; justify-items: end; padding-right: clamp(.5rem, 1.4vw, 1.1rem); }

.boek-zone[disabled] { cursor: default; }
.boek-zone[disabled] .boek-pijl { opacity: .22; }

.boek-pijl {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(4, 16, 42, .07);
  backdrop-filter: none;
  transition: transform .2s var(--boek-easing), background .2s var(--boek-easing);
}

.boek-pijl svg { width: 1.05rem; height: 1.05rem; }

@media (hover: hover) and (pointer: fine) {
  .boek-blad:hover .boek-zone,
  .boek-zone:focus-visible { opacity: 1; }
  .boek-zone:hover .boek-pijl { background: rgba(4, 16, 42, .12); }
  .boek-zone--verder:hover .boek-pijl { transform: translateX(1px); }
  .boek-zone--terug:hover .boek-pijl { transform: translateX(-1px); }
}

@media (hover: none), (pointer: coarse) {
  .boek-zone { opacity: 1; }
  .boek-pijl { background: rgba(4, 16, 42, .1); }
}

.boek-zone:focus-visible { opacity: 1; outline: 2px solid var(--boek-azuur); outline-offset: -4px; }

/* ---------- besturing onder het blad ---------- */

.boek-balk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem 1.4rem;
  margin-top: clamp(.8rem, 1.5vw, 1.15rem);
  margin-inline: auto;
  color: var(--boek-tekst-stil);
  /* Een haarlijn scheidt de pagina van de bediening. Dezelfde fijne lijn die de
     rest van de site gebruikt om rust te maken zonder een kader te trekken. */
  border-top: 1px solid var(--boek-keyline);
  padding-top: clamp(.7rem, 1.2vw, 1rem);
}

/* De teller stond hier als "01 / 16" naast een spoor dat dezelfde zestien
   nummers al toont en de actieve pagina markeert. Twee keer hetzelfde zeggen is
   geen zorgvuldigheid maar ruis, en het grote cijfer trok de aandacht weg van
   het blad. Het element blijft staan: de lezer vult het nog en de aria-live
   melding leest het voor. Het wordt alleen niet meer getoond. */
.boek-teller {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.boek-hoofdstuk {
  grid-column: 1;
  grid-row: 1;
  min-width: 9.5rem;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: var(--boek-creme);
  font-family: var(--font-display, "Instrument Serif", Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Zelfde haarlijn als de eyebrow op de rest van de site. */
.boek-hoofdstuk::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  flex: none;
  background: linear-gradient(90deg, var(--boek-messing), transparent);
}

.boek-spoor {
  display: flex;
  gap: .08rem;
  flex: 0 1 auto;
  min-width: 8rem;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: center;
}

.boek-spoor li { display: flex; }

.boek-spoor button {
  position: relative;
  width: 2rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: rgba(251, 250, 239, .38);
  font: 400 .64rem/1 var(--font-body, Arial, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  transition: color .2s var(--boek-easing), background-color .2s var(--boek-easing),
              border-color .2s var(--boek-easing), box-shadow .2s var(--boek-easing),
              transform .2s var(--boek-easing);
}

.boek-spoor button:hover {
  color: var(--boek-creme);
  background: rgba(251, 250, 239, .05);
  border-color: rgba(233, 238, 246, .2);
}

/* De pagina waar je staat is een knop in dezelfde taal als de acties elders op
   de site: ivoor vlak, bronzen keyline, en net genoeg diepte om niet plat te zijn. */
.boek-spoor button[aria-current="true"] {
  color: var(--boek-inkt);
  font-weight: 600;
  background: var(--boek-vlak);
  border-color: var(--boek-keyline-brons);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset,
              0 2px 5px -2px rgba(0, 0, 0, .34),
              0 8px 16px -12px rgba(0, 0, 0, .55);
}

.boek-spoor button[aria-current="true"]:hover {
  background: var(--boek-vlak-hoog);
  border-color: var(--boek-keyline-brons-hoog);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
              0 4px 9px -3px rgba(0, 0, 0, .36),
              0 13px 24px -15px rgba(0, 0, 0, .6);
}
.boek-spoor button:focus-visible { outline: 2px solid var(--boek-azuur); outline-offset: 2px; }

/* Bladen die je gehad hebt krijgen een stille bronzen streep. Het spoor vult
   zich terwijl je leest, zodat zichtbaar is hoeveel er al achter je ligt en
   hoe dichtbij het einde is. Geen extra element in de balk, geen tekst, geen
   beweging. De pagina waar je staat heeft zijn eigen ivoren vlak en hoeft de
   streep niet. */
.boek-spoor button[data-gezien]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .26rem;
  width: .7rem;
  height: 1px;
  transform: translateX(-50%);
  background: var(--boek-messing);
  opacity: .5;
}

.boek-spoor button[aria-current="true"]::after { opacity: 0; }

.boek-acties {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-left: auto;
}

.boek-actie {
  border: 0;
  background: none;
  padding: 0;
  color: var(--boek-tekst);
  font: inherit;
  /* Een knop erft kapitalen en spatiëring niet vanzelf; de link ernaast wel.
     Zonder deze twee regels staan de twee acties in een andere stijl. */
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--boek-easing), border-color .2s var(--boek-easing);
}

.boek-actie { padding-bottom: .18rem; }
.boek-actie:hover { color: var(--boek-creme); border-bottom-color: var(--boek-messing); }
.boek-actie:focus-visible { outline: 2px solid var(--boek-azuur); outline-offset: 3px; }
.boek-actie svg { width: .88rem; height: .88rem; flex: none; opacity: .8; }

/* ---------- vervolgstap na het laatste blad ---------- */

.boek-slot {
  width: var(--boek-bladbreedte, 100%);
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1.5rem;
  border: 1px solid var(--boek-keyline-brons);
  border-radius: 9px;
  background: var(--boek-navy-tussen);
  box-shadow: var(--lift-1);
}

.boek-slot[hidden] { display: none; }

.boek-slot-kop {
  max-width: 31ch;
  margin: 0;
  color: var(--boek-creme);
  font-family: var(--font-display, "Instrument Serif", Georgia, serif);
  font-size: clamp(1.18rem, 2vw, 1.48rem);
  line-height: 1.22;
}

.boek-slot-acties {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
}

.boek-slot .btn {
  min-height: 46px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .boek-slot {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .boek-slot-kop { max-width: 25ch; }
  .boek-slot-acties {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .boek-slot .btn { width: 100%; }
}

/* In volledig scherm blijft het rapport zelf het enige visuele anker. Na
   sluiten staat de vervolgstap direct onder de lezer klaar. */
.boek:fullscreen .boek-slot,
.boek[data-volledig-actief] .boek-slot { display: none; }

/* ---------- volledig scherm ---------- */

html.boek-volledig-open,
html.boek-volledig-open body { overflow: hidden; }

.boek:fullscreen,
.boek[data-volledig-actief] {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  align-items: center;
  padding: clamp(.5rem, 1.4vw, 1rem);
  background: var(--boek-navy-diep);
  overflow: hidden;
}

.boek:fullscreen .boek-inner,
.boek[data-volledig-actief] .boek-inner {
  --boek-breedte: min(1720px, 98vw);
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
}

.boek:fullscreen .boek-blad,
.boek[data-volledig-actief] .boek-blad {
  grid-row: 1;
  width: min(100%, calc((100dvh - 4.4rem) * 16 / 9));
  height: auto;
  max-height: calc(100dvh - 4.4rem);
}

.boek:fullscreen .boek-intro,
.boek[data-volledig-actief] .boek-intro,
.boek:fullscreen .boek-hoofdstuk,
.boek[data-volledig-actief] .boek-hoofdstuk,
.boek:fullscreen .boek-acties .boek-actie[download],
.boek[data-volledig-actief] .boek-acties .boek-actie[download] { display: none; }

.boek:fullscreen .boek-balk,
.boek[data-volledig-actief] .boek-balk {
  grid-row: 2;
  width: min(100%, var(--boek-bladbreedte, 100%));
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  gap: .55rem;
  margin-top: .35rem;
  padding-top: .35rem;
}

.boek:fullscreen .boek-spoor,
.boek[data-volledig-actief] .boek-spoor {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding-block: 0;
}

.boek:fullscreen .boek-acties,
.boek[data-volledig-actief] .boek-acties {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  margin: 0;
}

.boek:fullscreen .boek-actie[data-volledig],
.boek[data-volledig-actief] .boek-actie[data-volledig] {
  min-height: 2.5rem;
  padding: .5rem .7rem;
  border: 1px solid var(--boek-keyline);
  border-radius: 9px;
  color: var(--boek-creme);
  white-space: nowrap;
}

@supports not (height: 100dvh) {
  .boek:fullscreen .boek-blad,
  .boek[data-volledig-actief] .boek-blad {
    width: min(100%, calc((100vh - 4.4rem) * 16 / 9));
    max-height: calc(100vh - 4.4rem);
  }
}

/* ---------- kleine schermen ---------- */

/* Op tablet en telefoon zijn de paginanummers echte bediening, geen miniatuur-
   typografie. De strook mag daarom horizontaal schuiven en houdt per pagina een
   betrouwbaar aanraakvlak. */
@media (max-width: 900px) {
  .boek-spoor {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: .22rem;
    padding: .2rem 0 .45rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }
  .boek-spoor li { flex: 0 0 auto; }
  .boek-spoor button {
    width: 2.5rem;
    min-width: 2.5rem;
    max-width: none;
    height: 2.5rem;
    border-radius: 7px;
    font-size: .7rem;
    letter-spacing: .06em;
    scroll-snap-align: center;
  }
}

@media (max-width: 720px) {
  .boek-inner { --boek-breedte: min(1220px, 94vw); }
  .boek-intro { font-size: .85rem; }
  .boek-instructie--pointer { display: none; }
  .boek-instructie--touch { display: block; }
  .boek-balk{ grid-template-columns:auto minmax(0,1fr); }
  .boek-hoofdstuk { order: 2; grid-column:1 / -1; grid-row:1; margin-left:0; min-width:0; text-align:left; }
  .boek-spoor { order: 3; grid-column:1 / -1; grid-row:2; }
  .boek-acties { order: 4; grid-column:1 / -1; grid-row:3; margin-left: 0; width: 100%; justify-content: space-between;
    /* Kapitalen met spatiëring zijn breder; op een smal scherm mogen de twee
       acties niet over twee regels vallen. */
    font-size: .62rem; letter-spacing: .1em; gap: .8rem; }
  .boek-actie { white-space: nowrap; }
  /* De haarlijn is een luxe op een breed scherm; hier kost hij leesbare breedte. */
  .boek-hoofdstuk::before { display: none; }
  .boek-hoofdstuk { gap: 0; }

  /* Een blad van 960 punt breed is op een telefoon niet te lezen. Dan is de PDF de
     eerlijke hoofdroute en blijft de lezer een voorproef. */
  .boek-acties .boek-actie[download] {
    border: 1px solid var(--boek-keyline);
    border-radius: 9px;
    padding: .6rem .95rem;
    color: var(--boek-creme);
  }
}

.boek-mobielhint {
  display: none;
  margin: 0;
  font-size: .82rem;
  color: var(--boek-tekst-stil);
}

@media (max-width: 720px) {
  .boek-mobielhint { display: block; }
}

@media (hover: none), (pointer: coarse) {
  .boek-instructie--pointer { display: none; }
  .boek-instructie--touch { display: block; }
}

/* Op een laag scherm is de hoogte de enige beperking. Dan geven we alle ruimte
   aan het blad in plaats van aan witruimte. */
/* Zeer smalle telefoons: de twee acties moeten naast elkaar blijven passen. */
@media (max-width: 400px) {
  .boek-acties { font-size: .56rem; letter-spacing: .07em; gap: .5rem; }
  .boek-actie svg { width: .78rem; height: .78rem; }
}

@media (max-height: 780px) {
  .boek { padding-block: 1rem 1.3rem; }
  .boek-intro { margin-bottom: .55rem; font-size: .84rem; }
  .boek-balk { margin-top: .6rem; }
}

@media (max-height: 700px) {
  /* Op een korte laptop gaat de leesbaarheid van het blad voor op de uitleg. */
  .boek-intro { display: none; }
}

@media (min-width: 721px) and (max-height: 700px) {
  /* Een laag desktopvenster mag verticaal scrollen. Het rapportblad blijft op
     leesbare breedte en wordt niet meer tot circa 700 bij 400 px gekrompen. */
  .boek-blad {
    width: var(--boek-breedte);
    height: calc(var(--boek-breedte) * 9 / 16);
  }
}

/* ---------- beweging uit ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-boek .boek-blad img,
  .page-boek .boek-zone,
  .page-boek .boek-pijl,
  .page-boek .boek-spoor button,
  .page-boek .boek-actie {
    transition: none !important;
  }
  .page-boek .boek-zone { opacity: 1; }
}

/* ---------- zonder JavaScript ---------- */

.page-boek .boek-fallback {
  padding: clamp(7rem, 14vh, 10rem) 0 clamp(4rem, 8vh, 6rem);
  min-height: 68svh;
}

.page-boek .boek-fallback h2 { margin: .8rem 0 1rem; }
.page-boek .boek-fallback p { max-width: 58ch; margin-bottom: 1.5rem; }

.page-boek .boek[data-zonder-js] .boek-blad {
  aspect-ratio: auto;
  height: auto;
  width: 100%;
  background: none;
  box-shadow: none;
}

.page-boek .boek[data-zonder-js] .boek-blad img {
  position: static;
  opacity: 1;
  visibility: visible;
  height: auto;
  margin-bottom: 1.25rem;
  border-radius: 3px;
  box-shadow: 0 18px 44px -22px rgba(2, 10, 28, .8);
}

.page-boek .boek[data-zonder-js] .boek-zone,
.page-boek .boek[data-zonder-js] .boek-balk { display: none; }

/* ---------- paginalint op bureaublad en in volledig scherm ---------- */

/* Dertig paginanummers passen niet op ieder bureaubladscherm naast elkaar,
   en in volledig scherm moeten ze ook nog naast de sluitknop. Gecentreerd
   liepen ze dan aan beide kanten uit beeld en schoof pagina 30 over de
   sluitknop. Nu schuift het lint en zet boek.js het actieve nummer in beeld.
   De automatische marges centreren het lint zolang het past;
   justify-content: center zou bij overloop de eerste nummers onbereikbaar
   maken. De negatieve marge heft de extra ruimte voor de knopschaduw op,
   zodat de maatvoering gelijk blijft wanneer alles past. */
@media (min-width: 901px) {
  .boek-spoor,
  .boek:fullscreen .boek-spoor,
  .boek[data-volledig-actief] .boek-spoor {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding-block: .2rem .45rem;
    margin-block: -.2rem -.45rem;
  }
  .boek-spoor::-webkit-scrollbar { display: none; }
  .boek-spoor li:first-child { margin-left: auto; }
  .boek-spoor li:last-child { margin-right: auto; }
}