/* De andere kant van de tafel: opmaak van de schermen en van de afdruk.
   Alle kleuren, maten en het lettertype komen uit tokens.css. */

/* Basis -------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
img { display: block; }

:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
h1:focus, .app:focus { outline: none; box-shadow: none; }

/* Paginakop en -voet ------------------------------------------------------- */

.paginakop {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-8) var(--space-6);
}

.logo { display: inline-block; line-height: 0; }
.logo img { height: 32px; width: auto; }
.logo-donker { display: none; }

@media (prefers-color-scheme: dark) {
  .logo-licht { display: none; }
  .logo-donker { display: block; }
}

.app {
  flex: 1 0 auto;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-16);
}

.paginavoet {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-8) var(--space-8);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.paginavoet p { margin-bottom: var(--space-2); }

.verantwoording summary {
  display: inline-block;
  cursor: pointer;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.verantwoording summary::-webkit-details-marker { display: none; }
.verantwoording summary:hover { color: var(--ink); }
.verantwoording[open] summary { margin-bottom: var(--space-3); }

.bronnen {
  max-width: 640px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.bronnen p { margin-bottom: var(--space-2); }
.bronnen ul { margin: 0 0 var(--space-2); padding-left: var(--space-4); list-style: disc; }
.bronnen-kop { font-weight: 600; color: var(--ink); }

.app[data-scherm="blad"] ~ .paginavoet .verantwoording { display: none; }

/* Tekststijlen ------------------------------------------------------------- */

.display {
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.title {
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (min-width: 720px) {
  .display { font-size: 56px; line-height: 60px; }
  .title { font-size: 36px; line-height: 44px; }
}

.heading { font-size: 24px; line-height: 32px; font-weight: 700; }
.subheading { font-size: 19px; line-height: 28px; font-weight: 600; }
.klein { font-size: 14px; line-height: 22px; }
.gedempt { color: var(--ink-muted); }
.meta { font-size: 14px; line-height: 22px; font-style: italic; color: var(--ink-muted); }

.label {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Het ene accentmoment per scherm: een petrol haarlijn met een label. */
.kop-regel {
  padding-top: var(--space-2);
  border-top: 1px solid var(--accent);
  color: var(--accent-strong);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Zwarte balk: het hoofdstukniveau uit de documentstijl. */
.kop-balk {
  margin: var(--space-12) 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h2, .bladvraag, .blad-ipivo { scroll-margin-top: var(--space-4); }

/* Neutrale tussenkop: label met een haarlijn. */
.kop-lijn {
  margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--ink);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scherm > .kop-regel { margin-bottom: var(--space-6); }
.scherm > h1 { margin-bottom: var(--space-6); }
.scherm > p { max-width: 640px; margin-bottom: var(--space-4); }
.scherm > p.kop-regel { max-width: none; }
.inleiding { font-size: 19px; line-height: 28px; }

.melding { max-width: 640px; }

/* De tafel: twee kanten, één lijn ------------------------------------------ */

.tafel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
.tafel-lijn { flex: 1 1 auto; min-width: var(--space-8); height: 0; border-top: 1px solid var(--ink); }
.tafel .label { flex: none; }

/* Knoppen ------------------------------------------------------------------ */

.knop {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--ink);
  border-radius: var(--radius-none);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang);
}
.knop:hover, .knop.is-gekozen { background: var(--accent-strong); border-color: var(--accent-strong); }

.knop--stil { background: var(--surface); color: var(--ink); }
.knop--stil:hover, .knop--stil.is-gekozen { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.knoppenrij { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.knoppenrij .knop { margin-top: 0; }

/* Start --------------------------------------------------------------------- */

.scherm--start { padding-top: var(--space-8); }
.scherm--start .knop { margin-top: var(--space-6); }
.scherm--start .bijzin { margin-top: var(--space-6); }

/* Uw rol -------------------------------------------------------------------- */

.kv {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  max-width: 640px;
}
.kv dt { color: var(--ink-muted); }
.kv .meta { display: block; margin-top: var(--space-1); }

.regels { max-width: 640px; counter-reset: regel; }
.regels li {
  position: relative;
  margin-bottom: var(--space-2);
  padding-left: var(--space-8);
  counter-increment: regel;
}
.regels li::before {
  content: counter(regel);
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* Het gesprek --------------------------------------------------------------- */

.gesprekskop { position: sticky; top: 0; z-index: 2; background: var(--surface); }

.gespreksbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 13px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gespreksbalk-tijd { display: flex; gap: var(--space-4); font-variant-numeric: tabular-nums; }

.tijdlijn {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-1);
  padding: var(--space-1) 0 var(--space-2);
}
.tijdlijn li {
  height: 4px;
  background: var(--ink);
  transition: background-color var(--overgang);
}
.tijdlijn li.is-op { background: var(--line); }

.scherm--gesprek > h1 { margin: var(--space-4) 0 var(--space-6); }

.verslagkop, .wissel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  column-gap: var(--space-8);
}
.verslagkop { padding-bottom: var(--space-2); border-bottom: 1px solid var(--ink); color: var(--ink-muted); }

.wissel { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 64px; }
.wissel-vraag { font-weight: 600; }
.wissel-antwoord { min-height: 26px; }
.wissel-antwoord.is-nieuw, .wissel.is-nieuw .wissel-vraag { animation: verschijn var(--overgang) ease-out both; }

.verslag-leeg { padding: var(--space-4) 0; color: var(--ink-muted); }

@keyframes verschijn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.keuzes { margin-top: var(--space-8); }
.keuzes--twee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-8);
  align-items: start;
}
.keuzes:not(.keuzes--twee) .keuzelijst { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.keuzes.is-nieuw { animation: verschijn var(--overgang) ease-out both; }

.keuzegroep { margin-bottom: var(--space-6); }
.keuzegroep-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-4);
  margin: 0 0 var(--space-3);
}
.keuzegroep-kop.kop-lijn { margin-top: 0; }
.keuzegroep-bijzin {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-muted);
}

.keuzelijst { display: grid; gap: var(--space-2); }
.keuzelijst li { display: flex; }

.keuze {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ink);
  border-radius: var(--radius-none);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--overgang), color var(--overgang);
}
.keuze:hover { background: var(--surface-subtle); }
.keuze.is-gekozen { background: var(--ink); color: var(--on-ink); }

.keuze-thema {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.keuze.is-gekozen .keuze-thema { color: inherit; }
.keuze-vraag { display: block; font-weight: 600; }

/* Het oordeel --------------------------------------------------------------- */

.oordeelvraag { margin-bottom: var(--space-6); }
.oordelen { display: grid; gap: var(--space-2); max-width: 640px; }
.oordeel .keuze-vraag { font-size: 19px; line-height: 28px; }
.oordeel-uitleg { display: block; }

.teruglezen { margin-top: var(--space-12); }
.teruglezen summary {
  display: inline-block;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.teruglezen summary::-webkit-details-marker { display: none; }
.teruglezen[open] summary { margin-bottom: var(--space-4); }

/* Wat u hoorde -------------------------------------------------------------- */

.merk {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ink);
  vertical-align: -1px;
}
.merk--aantoonbaar { background: var(--ink); }
.merk--vertrouwen { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.merk--open { background: transparent; }

.legenda {
  display: grid;
  gap: var(--space-2);
  max-width: 640px;
  margin-top: var(--space-6);
}
.legenda li { display: grid; grid-template-columns: 12px 9.5em 1fr; column-gap: var(--space-3); align-items: baseline; }
.legenda-naam { font-weight: 600; }
.legenda-telling { display: block; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-muted); }

.lezing {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  column-gap: var(--space-8);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.lezing-vraag { font-weight: 600; }
.lezing-kenmerk { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
.lezing-kenmerk .label { letter-spacing: 0.08em; }

.mijn-lezing { max-width: 640px; }
.mijn-lezing p { margin-bottom: var(--space-4); }
.les { font-size: 19px; line-height: 28px; font-weight: 600; }

/* De spiegel ---------------------------------------------------------------- */

.spiegelvraag { padding: var(--space-4) 0 var(--space-6); border-bottom: 1px solid var(--line); }
.spiegelvraag:first-of-type { border-top: 1px solid var(--ink); }
.spiegelvraag-vraag { margin-bottom: var(--space-3); font-weight: 600; }

.opties { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.optie { position: relative; display: block; cursor: pointer; }
.optie input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.optie-tekst {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ink);
  background: var(--surface);
  transition: background-color var(--overgang), color var(--overgang);
}
.optie-tekst::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
}
.optie:hover .optie-tekst { background: var(--surface-subtle); }
.optie input:checked + .optie-tekst { background: var(--ink); color: var(--on-ink); }
.optie input:checked + .optie-tekst::before { background: currentColor; }
.optie input:focus-visible + .optie-tekst { box-shadow: var(--focus-ring); }

/* Het vragenblad ------------------------------------------------------------ */

.blad-kop { padding-bottom: var(--space-6); border-bottom: 1px solid var(--ink); }
.blad-kop .label { margin-bottom: var(--space-3); color: var(--ink-muted); }
.blad-kop h1 { margin-bottom: var(--space-2); }
.blad > .inleiding { max-width: 640px; margin: var(--space-6) 0 var(--space-8); }

.bladvraag { margin-bottom: var(--space-8); }
.bladvraag-vraag { max-width: 640px; margin: var(--space-2) 0 var(--space-4); }
.bladvraag .kv { max-width: none; grid-template-columns: 12em 1fr; }

.blad-ipivo p, .blad-slot { max-width: 640px; }
.blad-ipivo p { margin-bottom: var(--space-2); }
.blad-slot { margin-top: var(--space-6); }
.blad .knoppenrij { margin-bottom: var(--space-12); }

/* Smalle schermen ----------------------------------------------------------- */

@media (max-width: 640px) {
  .paginakop, .app, .paginavoet { padding-left: var(--space-4); padding-right: var(--space-4); }
  .verslagkop { display: none; }
  .wissel, .lezing { grid-template-columns: 1fr; row-gap: var(--space-2); }
  .keuzes--twee, .keuzes:not(.keuzes--twee) .keuzelijst { grid-template-columns: 1fr; }
  .verslag { border-top: 1px solid var(--ink); }
  .kv, .bladvraag .kv { grid-template-columns: 1fr; row-gap: 0; }
  .kv dd { margin-bottom: var(--space-3); }
  .legenda li { grid-template-columns: 12px 1fr; }
  .legenda-uitleg { grid-column: 2; }
  .tafel { gap: var(--space-2); }
  .tafel .label { font-size: 11px; letter-spacing: 0.08em; }
}

/* Wie minder beweging wil --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Afdrukken ----------------------------------------------------------------- */

@page { margin: 18mm 18mm 16mm; }

@media print {
  body { display: block; min-height: 0; font-size: 11pt; line-height: 16pt; }
  .geen-afdruk, .paginavoet { display: none !important; }
  .paginakop, .app { max-width: none; padding: 0; }
  .paginakop { margin-bottom: 10mm; }
  .logo-licht { display: block !important; }
  .logo-donker { display: none !important; }
  .title { font-size: 22pt; line-height: 27pt; }
  .inleiding, .subheading { font-size: 13pt; line-height: 18pt; }
  .bladvraag { break-inside: avoid; margin-bottom: 7mm; }
  .blad-ipivo, .blad-bronnen, .blad-slot { break-inside: avoid; }
  .kop-balk, .gespreksbalk { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}