/* De rechtszaak: leerlingenpagina (iPad Safari, staand en liggend). Huisstijl: creme, amber, slate; Alegreya + Inter. */
:root {
  --creme: #fffdf7; --creme-d: #f4ead8; --amber: #f59e0b; --amber-l: #fef3c7; --amber-d: #92400e;
  --slate: #0f172a; --slate-2: #334155;
  --rood: #b91c1c; --rood-l: #fee2e2; --groen: #15803d; --groen-l: #dcfce7; --blauw: #1d4ed8; --blauw-l: #dbeafe;
  --kop: 'Alegreya', Georgia, 'Times New Roman', serif;
  --tekst: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nav: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--creme); color: var(--slate); font-family: var(--tekst);
  font-size: 1.25rem; line-height: 1.5; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 4px solid var(--blauw); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--kop); font-weight: 800; line-height: 1.1; margin: 0; color: var(--slate); }
h1 { font-size: 2.4rem; margin: 0.2rem 0 0.8rem; outline: none; }
h2 { font-size: 1.7rem; margin: 1.4rem 0 0.5rem; }
h3 { font-size: 1.4rem; margin: 0.8rem 0 0.3rem; }
p { margin: 0 0 0.9rem; }
code { font-size: 1rem; background: var(--creme-d); padding: 0 0.3em; border-radius: 4px; }

/* ---------- bovenbalk ---------- */
.top {
  position: sticky; top: 0; z-index: 10; background: var(--slate); color: var(--creme-d);
  padding-top: env(safe-area-inset-top);
}
.top-rij {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 4px max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left));
  max-width: 980px; margin: 0 auto;
}
.top-icoon { width: 34px; height: 34px; color: var(--amber); flex: none; }
.top-titel { font-family: var(--kop); font-weight: 800; font-size: 1.5rem; flex: 1; }
.top-stap { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.top-opnieuw {
  min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: 12px; font-weight: 700; font-size: 1.15rem;
  background: transparent; border: 2px solid rgba(244, 234, 216, 0.4); color: var(--creme-d);
}
.top-opnieuw span { display: none; }
@media (min-width: 700px) { .top-opnieuw span { display: inline; } }
.voortgang { height: 8px; background: rgba(244, 234, 216, 0.18); }
.voortgang i { display: block; height: 100%; width: 0; background: var(--amber); transition: width 0.25s ease; }

/* ---------- inhoud ---------- */
main { max-width: 980px; margin: 0 auto; padding: 20px max(18px, env(safe-area-inset-right)) calc(var(--nav) + 36px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.stap { animation: opkomen 0.25s ease; }
@keyframes opkomen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stap { animation: none; } .voortgang i { transition: none; } }
.kicker { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber-d); }
.klein { font-size: 1.15rem; }
.grijs { color: var(--slate-2); }
.vet { font-weight: 700; }
.kop-icoon { width: 1.1em; height: 1.1em; vertical-align: -0.12em; margin-right: 0.3em; color: var(--amber-d); }

/* verhaalfragment (vertelstem) */
.verhaal {
  position: relative; margin: 0.6rem 0 1.2rem; padding: 18px 20px 6px 64px; border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, var(--creme-d), #f9f1e1); border-left: 8px solid var(--amber-d);
  font-family: var(--kop); font-style: italic; font-weight: 500; font-size: 1.45rem; line-height: 1.45;
}
.verhaal::before {
  content: '\201C'; position: absolute; left: 16px; top: -2px; font-size: 4rem; line-height: 1; color: var(--amber-d); opacity: 0.55; font-style: normal;
}
.verhaal p { margin: 0 0 0.9rem; }

.kaart { background: #fff; border: 3px solid var(--creme-d); border-radius: 16px; padding: 14px 20px; margin: 0 0 1rem; }
.kaart--amber { background: var(--amber-l); border-color: var(--amber); }
.kaart p:last-child, .kaart ul:last-child { margin-bottom: 0; }
ul.lijst { list-style: none; margin: 0.3rem 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.lijst li { position: relative; padding-left: 28px; }
ul.lijst li::before { content: ''; position: absolute; left: 4px; top: 0.6em; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); }

.rolbalk { display: inline-flex; align-items: center; gap: 10px; background: var(--slate); color: var(--creme); border-radius: 99px; padding: 6px 20px; margin: 0 0 1rem; font-size: 1.15rem; }
.rolbalk b { color: var(--amber); font-family: var(--kop); font-size: 1.5rem; text-transform: capitalize; }
.stelling-vraag { background: var(--slate); color: var(--creme); border-radius: 16px; padding: 18px 22px; font-family: var(--kop); font-size: 1.7rem; font-weight: 700; line-height: 1.25; margin: 0 0 1rem; }
.wissel { display: inline-block; background: var(--amber); color: var(--slate); font-weight: 800; border-radius: 12px; padding: 8px 18px; margin: 0 0 1rem; font-size: 1.3rem; }
.wissel-pijl { font-size: 1.6rem; margin-left: 6px; vertical-align: -0.1em; }
.hint { font-weight: 700; color: var(--amber-d); }

/* rolkeuze */
.rolkeuze { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1rem 0; }
@media (max-width: 640px) { .rolkeuze { grid-template-columns: 1fr; } }
.rolkaart { text-align: left; min-height: 150px; padding: 18px 22px; border-radius: 18px; background: #fff; border: 4px solid var(--creme-d); display: flex; flex-direction: column; gap: 8px; }
.rolkaart-naam { font-family: var(--kop); font-weight: 800; font-size: 2.1rem; color: var(--slate); }
.rolkaart-zin { font-size: 1.25rem; color: var(--slate-2); }
.rolkaart[aria-pressed="true"] { background: var(--amber-l); border-color: var(--amber); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25); }
.rolkaart[aria-pressed="true"] .rolkaart-naam::after { content: ' \2713'; color: var(--groen); }

/* rol-afhankelijke tekst */
body[data-rol="aanklager"] [data-voor="verdediger"],
body[data-rol="verdediger"] [data-voor="aanklager"],
body:not([data-rol]) [data-voor] { display: none; }
/* Samen één iPad: beide rollen tonen, met een label erboven */
body[data-samen][data-rol] [data-voor] { display: block; }
body[data-samen] [data-voor]::before { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-2); margin: 0 0 2px; }
body[data-samen] [data-voor="aanklager"]::before { content: 'Aanklager'; }
body[data-samen] [data-voor="verdediger"]::before { content: 'Verdediger'; }
body[data-samen] .rolbalk b { text-transform: none; font-size: 1.25rem; }
@media (min-width: 561px) { body[data-samen] .starter p { grid-column: 2; } body[data-samen] .starter-label { grid-row: span 2; } }
.rolkaart--samen { width: 100%; min-height: 0; margin: 0 0 1rem; }
.rolkaart--samen .rolkaart-naam { font-size: 1.6rem; }

/* papier-opdracht */
.papier { display: flex; gap: 14px; align-items: center; background: var(--amber-l); border: 3px dashed var(--amber-d); border-radius: 16px; padding: 12px 18px; margin: 0 0 1rem; }
.papier svg { width: 46px; height: 46px; flex: none; color: var(--amber-d); }
.papier p { margin: 0; }
.papier--groot { padding: 18px 22px; font-size: 1.3rem; }

/* tijdrij met timer */
.tijdrij { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: 0 0 1rem; }
.tijdrij > p { margin: 0; flex: 1; }
@media (max-width: 640px) { .tijdrij { flex-direction: column; align-items: stretch; } }
.timer { display: inline-flex; align-items: center; gap: 12px; background: var(--slate); color: var(--creme); border-radius: 16px; padding: 8px 10px 8px 18px; flex: none; justify-content: space-between; }
.timer-tijd { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 2.2rem; line-height: 1; min-width: 4.4ch; text-align: center; }
.timer-knoppen { display: flex; gap: 8px; }
.timer button { min-height: 48px; min-width: 76px; padding: 0 14px; border-radius: 12px; font-weight: 700; border: 2px solid var(--amber); background: var(--amber); color: var(--slate); }
.timer button.t-reset { background: transparent; color: var(--creme); border-color: rgba(244, 234, 216, 0.45); }
.timer.loopt .timer-tijd { color: #fbbf24; }
.timer.bijna .timer-tijd { color: #fca5a5; }
.timer.klaar { background: var(--rood); }

/* zinsstarters */
.starters { display: grid; gap: 10px; margin: 0 0 1rem; }
.starter { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; border: 3px solid; border-radius: 14px; padding: 10px 16px; }
.starter p { margin: 0; font-weight: 600; }
.starter-label { font-family: var(--kop); font-weight: 800; font-size: 1.7rem; line-height: 1; }
@media (max-width: 560px) { .starter { grid-template-columns: 1fr; gap: 4px; } }
.zie { background: var(--blauw-l); border-color: var(--blauw); } .zie .starter-label { color: var(--blauw); }
.koppel { background: var(--groen-l); border-color: var(--groen); } .koppel .starter-label { color: var(--groen); }
.leguit { background: var(--rood-l); border-color: var(--rood); } .leguit .starter-label { color: var(--rood); }
.starters-schakel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 0.8rem; }
.starters-kort { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 1rem; }
.m { font-family: var(--kop); font-weight: 800; font-size: 1.5rem; padding: 6px 18px; border-radius: 99px; border: 3px solid; }
.begrippen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.begrippen b { margin-right: 6px; }
.begrippen span { background: var(--creme-d); border-radius: 99px; padding: 4px 14px; font-weight: 600; }

/* bewijsstukken */
.bewijs { background: #fff; border: 3px solid var(--creme-d); border-radius: 18px; padding: 6px 20px 14px; margin: 0 0 1.2rem; }
.bewijs h2 { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0 10px; font-size: 1.55rem; }
.nr { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--amber); color: var(--slate); font-family: var(--kop); font-weight: 800; font-size: 1.7rem; display: flex; align-items: center; justify-content: center; margin-top: -2px; }
.bron { background: var(--creme); border-left: 8px solid var(--amber); border-radius: 0 14px 14px 0; padding: 10px 18px; margin: 0 0 0.6rem; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08); }
.bron q { display: block; font-family: var(--kop); font-size: 1.45rem; line-height: 1.35; quotes: none; margin: 4px 0 10px; }
.bron-verm, .uitleg { font-size: 1.15rem; color: var(--slate-2); }
.uitleg { background: var(--creme-d); border-radius: 12px; padding: 8px 14px; }
.beeld { margin: 0 0 0.8rem; }
.beeld-knop { display: block; width: 100%; padding: 0; border: 0; background: var(--creme-d); border-radius: 12px; overflow: hidden; position: relative; min-height: 48px; }
.beeld-knop::after { content: '\1F50D  Tik om te vergroten'; position: absolute; right: 10px; bottom: 10px; background: rgba(15, 23, 42, 0.78); color: #fff; border-radius: 99px; padding: 6px 14px; font-size: 1.05rem; font-weight: 600; pointer-events: none; }
.beeld-knop img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.beeld figcaption { font-size: 1.15rem; color: var(--slate-2); margin-top: 6px; line-height: 1.35; }
.beeld-leeg { text-align: center; border: 3px dashed var(--amber-d); border-radius: 12px; padding: 26px 18px; color: var(--amber-d); font-size: 1.3rem; background: var(--amber-l); }
.beeld-leeg strong { display: block; font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.beeld-leeg small { display: block; margin-top: 8px; font-size: 1.05rem; }

/* kruisverhoor */
.bezwaar { background: var(--rood-l); border: 3px solid var(--rood); border-radius: 16px; padding: 12px 20px 4px; margin: 0 0 1rem; }
.bezwaar > b { font-family: var(--kop); font-size: 1.7rem; color: var(--rood); }
.scoretabel { width: 100%; border-collapse: separate; border-spacing: 0 8px; margin: 0 0 1rem; }
.scoretabel th { text-align: left; font-size: 1.15rem; color: var(--slate-2); padding: 0 12px; }
.scoretabel td { padding: 10px 12px; background: #fff; }
.scoretabel td:first-child { font-family: var(--kop); font-weight: 800; font-size: 1.4rem; border: 3px solid; border-radius: 12px 0 0 12px; width: 110px; }
.scoretabel td:last-child { text-align: center; font-weight: 800; border-radius: 0 12px 12px 0; width: 56px; }
.scoretabel td:nth-child(2) { border-top: 3px solid var(--creme-d); border-bottom: 3px solid var(--creme-d); }
.scoretabel td:last-child { border: 3px solid var(--creme-d); border-left: 0; }
.scorekaart { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 1rem; }
@media (max-width: 640px) { .scorekaart { grid-template-columns: 1fr; } }
.sk-arg { background: #fff; border: 3px solid var(--slate); border-radius: 16px; padding: 12px 16px 16px; }
.sk-arg h3 { margin: 0 0 8px; }
.sk-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.sk-knop { min-height: 56px; border-radius: 12px; border: 3px solid var(--creme-d); background: var(--creme); font-weight: 700; }
.sk-knop[aria-pressed="true"] { color: #fff; border-color: transparent; }
.sk-knop[data-k="zie"][aria-pressed="true"] { background: var(--blauw); }
.sk-knop[data-k="koppel"][aria-pressed="true"] { background: var(--groen); }
.sk-knop[data-k="leguit"][aria-pressed="true"] { background: var(--rood); }
.sk-bezwaar { width: 100%; min-height: 56px; border-radius: 12px; border: 3px solid var(--rood); background: #fff; color: var(--rood); font-weight: 800; font-size: 1.25rem; }
.sk-bezwaar[aria-pressed="true"] { background: var(--rood); color: #fff; }
.sk-score { margin-top: 10px; font-weight: 800; font-size: 1.3rem; }
.sk-score output { font-family: var(--kop); font-size: 2rem; color: var(--amber-d); }
.sk-totaal { grid-column: 1 / -1; text-align: center; font-weight: 800; font-size: 1.3rem; }

/* voorbeelden */
.knop { min-height: 56px; padding: 0 24px; border-radius: 14px; border: 3px solid var(--amber); background: var(--amber); color: var(--slate); font-weight: 800; font-size: 1.25rem; margin: 0 0 1rem; }
.knop--groot { min-height: 68px; font-size: 1.4rem; width: 100%; max-width: 480px; display: block; }
.knop--licht { background: transparent; border-color: var(--slate-2); color: var(--slate-2); font-weight: 700; }
.keuzes { display: grid; gap: 14px; margin-top: 1rem; }
.onthul { animation: opkomen 0.25s ease; }
.vb-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 880px) { .vb-kolommen { grid-template-columns: 1fr; } }
.vb { border: 3px solid; border-radius: 16px; padding: 4px 18px 12px; }
.vb h2 { margin: 10px 0 4px; } .vb h2 small { font-family: var(--tekst); font-size: 1rem; font-weight: 600; }
.vb--voor { background: var(--groen-l); border-color: var(--groen); } .vb--voor > h2 { color: var(--groen); }
.vb--tegen { background: var(--rood-l); border-color: var(--rood); } .vb--tegen > h2 { color: var(--rood); }
.vb-arg { background: #fff; border-radius: 12px; padding: 4px 14px 8px; margin: 10px 0; }
.vb-arg p { margin: 0 0 8px; }
.vb-arg b.zie, .vb-arg b.koppel, .vb-arg b.leguit { background: none; border: 0; }
.vb-arg b.zie { color: var(--blauw); } .vb-arg b.koppel { color: var(--groen); } .vb-arg b.leguit { color: var(--rood); }
.ookgoed { font-size: 1.15rem; background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 8px 14px; margin: 0 0 8px; }
ol.vonnis { margin: 0 0 1rem; padding-left: 0; list-style: none; counter-reset: n; display: grid; gap: 10px; }
ol.vonnis li { counter-increment: n; position: relative; padding: 10px 16px 10px 64px; background: #fff; border: 3px solid var(--creme-d); border-radius: 14px; min-height: 56px; }
ol.vonnis li::before { content: counter(n); position: absolute; left: 14px; top: 10px; width: 36px; height: 36px; border-radius: 50%; background: var(--slate); color: var(--creme); font-weight: 800; display: flex; align-items: center; justify-content: center; }
ol.vonnis em { color: var(--amber-d); font-style: normal; font-weight: 700; white-space: nowrap; }

/* ---------- onderbalk ---------- */
.onder {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; gap: 14px; justify-content: center;
  padding: 12px max(18px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(255, 253, 247, 0.96); border-top: 3px solid var(--creme-d); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.nav-knop { min-height: 60px; border-radius: 16px; font-weight: 800; font-size: 1.35rem; border: 3px solid var(--slate); }
.nav-terug { flex: 0 1 190px; background: #fff; color: var(--slate); }
.nav-volgende { flex: 1 1 auto; max-width: 560px; background: var(--amber); border-color: var(--amber); color: var(--slate); }
.nav-knop:disabled { opacity: 0.4; cursor: default; }
.nav-knop[hidden] { display: none; }

/* ---------- foto vergroten ---------- */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, 0.94); display: flex; align-items: center; justify-content: center; padding: 70px 10px 10px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 6px; }
.lightbox-sluit { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; min-height: 52px; padding: 0 22px; border-radius: 14px; border: 3px solid var(--amber); background: var(--amber); color: var(--slate); font-weight: 800; font-size: 1.25rem; }

/* scoretabel: kleuren per stap (moet na de algemene td-regels) */
.scoretabel td.zie { background: var(--blauw-l); border-color: var(--blauw); color: var(--blauw); }
.scoretabel td.koppel { background: var(--groen-l); border-color: var(--groen); color: var(--groen); }
.scoretabel td.leguit { background: var(--rood-l); border-color: var(--rood); color: var(--rood); }
.begrippen span i { font-style: normal; font-weight: 400; }