/* ==========================================================================
   Dactylo · 4ORLO — opmaak
   Huisstijl van de lespagina's (Dalton-kleuren, Atkinson Hyperlegible en
   Montserrat). Geen externe bestanden: de lettertypes staan in assets/fonts.
   ========================================================================== */

@font-face { font-family: "Atkinson"; src: url("../assets/fonts/atkinson-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../assets/fonts/atkinson-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../assets/fonts/atkinson-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* Atkinson tekent de nul met een schuine streep (lijkt op Ø). Cijfers daarom uit een systeemlettertype. */
@font-face { font-family: "Atkinson"; src: local("Segoe UI"), local("SegoeUI"), local("Arial"), local("Helvetica"), local("Roboto"); font-weight: 400; unicode-range: U+0030-0039; }
@font-face { font-family: "Atkinson"; src: local("Segoe UI Bold"), local("SegoeUI-Bold"), local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"); font-weight: 700; unicode-range: U+0030-0039; }
@font-face { font-family: "Montserrat"; src: url("../assets/fonts/montserrat-heavy.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }

:root {
  --navy: #3C51A0;
  --navy-deep: #2A3973;
  --peri: #A7B1DE;
  --peri-soft: #EEF0F9;
  --blush: #FCD6CF;
  --paper: #FFFFFF;
  --bg: #F4F5F9;
  --ink: #1D2340;
  --muted: #545B78;
  --line: #E1E3EC;
  --ok: #1F7A55;
  --ok-soft: #EAF6F0;
  --warn: #A0372A;
  --warn-soft: #FDF1EE;
  --tip: #8A5A00;
  --tip-soft: #FFF7E3;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(29, 35, 64, .05), 0 6px 20px rgba(29, 35, 64, .06);
  --body: "Atkinson", "Segoe UI", Arial, sans-serif;
  --head: "Montserrat", "Segoe UI", Arial, sans-serif;

  /* vingerkleuren op het toetsenbord */
  --f-lp: #F6D4E3; --f-lr: #FBE3C2; --f-lm: #FFF2B8; --f-lw: #D6F0D8;
  --f-rw: #CFEAF6; --f-rm: #DCDDF8; --f-rr: #EADCF5; --f-rp: #F9DCD5; --f-duim: #E6E8EF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--bg); }
h1, h2, h3 { font-family: var(--head); color: var(--navy-deep); line-height: 1.2; margin: 0; }
p { margin: 0 0 .7rem; }
[hidden] { display: none !important; }

/* ---------- kop ---------- */
.top { background: var(--paper); border-bottom: 1px solid var(--line); }
.top-in { max-width: 1120px; margin: 0 auto; padding: .7rem 16px; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.brand { display: flex; align-items: center; gap: .8rem; margin-right: auto; }
.logo { height: 40px; width: auto; }
.brand h1 { font-size: 1.25rem; font-weight: 900; }
.brand .sub { margin: 0; color: var(--muted); font-size: .9rem; }
.test-kies { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--navy-deep); }
.test-kies select { font: inherit; font-weight: 400; padding: .35rem .6rem; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.nav { display: flex; flex-wrap: wrap; gap: .3rem; }
.nav-knop { font: inherit; font-weight: 700; font-size: .95rem; border: 0; background: transparent; color: var(--muted); padding: .45rem .8rem; border-radius: 99px; cursor: pointer; }
.nav-knop:hover { background: var(--peri-soft); color: var(--navy-deep); }
.nav-knop.actief { background: var(--navy); color: #fff; }

.banner { max-width: 1120px; margin: .8rem auto 0; padding: .6rem 1rem; border-radius: var(--radius-sm); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.banner.warn { background: var(--warn-soft); color: var(--warn); border: 1px solid #F1C9C0; }
.banner.tip { background: var(--tip-soft); color: var(--tip); border: 1px solid #F1DFAE; }
.banner.klein { margin: .6rem 0 0; }
.wrap > .banner, body > .banner { margin-left: auto; margin-right: auto; width: calc(100% - 32px); }

/* ---------- algemeen ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 1.2rem 16px 3rem; }
.view { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem 1.6rem; }
.view h2 { font-size: 1.5rem; font-weight: 900; }
.view-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.kicker { font-weight: 700; color: var(--navy); margin: 0 0 .2rem; }
.hint { color: var(--muted); font-size: .95rem; }
.blok-titel { font-size: 1.1rem; font-weight: 800; margin: 1.4rem 0 .6rem; }

.btn { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none;
  background: var(--paper); color: var(--navy-deep); border: 2px solid var(--line); border-radius: 99px; padding: .5rem 1.1rem; }
.btn:hover { border-color: var(--peri); }
.btn:focus-visible, .nav-knop:focus-visible, .tab:focus-visible, .leerling:focus-visible, .link:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.btn-primair { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primair:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-klein { font-size: .85rem; padding: .3rem .8rem; }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1.2rem; }
.knoppen.links { justify-content: flex-start; }

.tabs { display: inline-flex; background: var(--peri-soft); border-radius: 99px; padding: .25rem; gap: .2rem; }
.tab { font: inherit; font-weight: 700; border: 0; background: transparent; color: var(--navy-deep); padding: .4rem 1rem; border-radius: 99px; cursor: pointer; }
.tab.actief { background: var(--navy); color: #fff; }

/* ---------- leerlingen ---------- */
.leerling-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; margin-top: .8rem; }
.leerling { text-align: left; font: inherit; cursor: pointer; background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.leerling:hover { border-color: var(--navy); background: var(--peri-soft); }
.leerling-naam { font-weight: 700; color: var(--ink); }
.leerling-status { font-size: .88rem; color: var(--muted); }
.leerling.getest { border-color: #BFE3D0; background: var(--ok-soft); }
.leerling.getest .leerling-status { color: var(--ok); font-weight: 700; }
.leeg { margin-top: 1rem; padding: 1.2rem; border: 2px dashed var(--line); border-radius: var(--radius-sm); text-align: center; }

/* ---------- test ---------- */
.test-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.test-kop h2 { font-size: 1.8rem; }
#test-naam { color: var(--navy); }
.klok { text-align: right; line-height: 1; }
.klok-tijd { font-family: var(--head); font-weight: 900; font-size: 2.4rem; color: var(--navy-deep); display: block; }
.klok-label { font-size: .85rem; color: var(--muted); }
.balk { height: 8px; background: var(--peri-soft); border-radius: 99px; margin: .8rem 0 1rem; overflow: hidden; }
.balk-vul { height: 100%; width: 0; background: var(--navy); border-radius: 99px; transition: width .1s linear; }
.instructie { background: var(--peri-soft); border-radius: var(--radius-sm); padding: .7rem 1rem; margin-bottom: 1rem; }
.instructie ol { margin: 0; padding-left: 1.3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .2rem 1.6rem; }

.tekst-box { border: 2px solid var(--line); border-radius: var(--radius); padding: .6rem 1rem; background: #FBFBFD; }
.tekst { position: relative; font-size: 2.1rem; line-height: 3.2rem; height: 9.6rem; overflow: hidden; letter-spacing: .08em; color: #8A90A8; }
.woord { display: inline-block; white-space: nowrap; }
.teken { display: inline-block; min-width: .55em; text-align: center; border-radius: 6px; }
.teken.spatie { width: .9em; }
.teken.ok { color: var(--ok); }
.teken.nu { background: var(--peri-soft); color: var(--navy-deep); box-shadow: inset 0 -4px 0 var(--navy); font-weight: 700; }
.teken.fout { animation: fout .35s; background: var(--warn-soft); box-shadow: inset 0 -4px 0 var(--warn); color: var(--warn); }
@keyframes fout { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.toetsenbord { max-width: 100%; overflow: hidden; padding: .4rem; margin: .8rem auto 0; display: flex; flex-direction: column; gap: .35rem; align-items: center; user-select: none; }
.kb-rij { display: flex; gap: .35rem; }
.kb-rij-1 { margin-left: 1.4rem; }
.kb-rij-2 { margin-left: -1.2rem; }
.kb-toets { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: 8px; font-weight: 700; font-size: 1.15rem; color: var(--ink); border: 1px solid rgba(29, 35, 64, .12); border-bottom-width: 3px; position: relative; }
.kb-spatie { width: 16rem; font-size: .9rem; color: var(--muted); }
.kb-uit { opacity: .35; }
.kb-streep::after { content: ""; position: absolute; bottom: .45rem; width: .9rem; height: 2px; background: var(--ink); border-radius: 2px; opacity: .6; }
.kb-nu { outline: 3px solid var(--navy); outline-offset: 2px; transform: translateY(-2px); opacity: 1; }
.v-lp { background: var(--f-lp); } .v-lr { background: var(--f-lr); } .v-lm { background: var(--f-lm); } .v-lw { background: var(--f-lw); }
.v-rw { background: var(--f-rw); } .v-rm { background: var(--f-rm); } .v-rr { background: var(--f-rr); } .v-rp { background: var(--f-rp); } .v-duim { background: var(--f-duim); }
.volgende { text-align: center; margin: .7rem 0 0; color: var(--muted); }
.volgende strong { color: var(--navy-deep); font-size: 1.1rem; }
.schakel { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); cursor: pointer; }

/* ---------- beoordeling ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; margin: 1rem 0 .6rem; }
.stat { background: var(--peri-soft); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.stat p { margin: 0; }
.stat-titel { font-weight: 700; color: var(--navy); font-size: .9rem; }
.stat-waarde { font-family: var(--head); font-weight: 900; font-size: 2rem; color: var(--navy-deep); line-height: 1.15; }
.stat-onder { color: var(--muted); font-size: .9rem; }
.stat-punten { margin-top: .35rem !important; font-size: .88rem; font-weight: 700; color: var(--ink); }
.vragen { display: grid; gap: .6rem; }
.vraag { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem 1rem .8rem; margin: 0; }
.vraag legend { font-weight: 700; padding: 0 .3rem; }
.opties { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.optie { position: relative; cursor: pointer; }
.optie input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.optie span { display: inline-block; padding: .4rem 1rem; border: 2px solid var(--line); border-radius: 99px; font-weight: 700; color: var(--navy-deep); background: var(--paper); }
.optie:hover span { border-color: var(--peri); }
.optie input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.optie input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.opmerking { display: block; margin-top: 1rem; }
.opmerking span { display: block; font-weight: 700; margin-bottom: .3rem; }
textarea { width: 100%; font: inherit; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: var(--radius-sm); resize: vertical; background: var(--paper); color: var(--ink); }
textarea:focus { outline: none; border-color: var(--navy); }
.totaal { margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--ok-soft); border: 1px solid #BFE3D0; }
.totaal-rij { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; color: var(--ok); font-weight: 700; }
.totaal-punt { font-family: var(--head); font-size: 1.4rem; color: var(--navy-deep); margin: .3rem 0 0; }
.totaal-punt strong { font-size: 2.6rem; font-weight: 900; }
.totaal .hint { margin: .2rem 0 0; }

/* ---------- resultaten ---------- */
.tabel-wrap { overflow-x: auto; margin-top: .6rem; }
.tabel { width: 100%; border-collapse: collapse; font-size: .97rem; }
.tabel th { text-align: left; font-size: .85rem; color: var(--muted); font-weight: 700; padding: .45rem .6rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
.tabel td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabel .getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel .sterk { font-weight: 700; color: var(--navy-deep); }
.tabel tr.niet-getest .link { color: var(--muted); }
.tabel tfoot td { font-weight: 700; border-bottom: 0; color: var(--navy-deep); }
.tabel.klein { font-size: .92rem; margin-bottom: .6rem; }
.link { font: inherit; border: 0; background: none; padding: 0; color: var(--navy); font-weight: 700; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.export { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.export .knoppen { margin-top: .4rem; margin-bottom: .6rem; }

/* ---------- gegevens ---------- */
.klaslijsten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: .8rem; }
.klaslijst-titel { display: block; font-weight: 700; color: var(--navy-deep); margin-bottom: .3rem; }
.privacy { margin-top: 1.6rem; border-top: 1px solid var(--line); }

/* ---------- Google ---------- */
body:not(.google-aan) .met-google { display: none !important; }
body.google-aan .zonder-google { display: none !important; }
.google { display: flex; align-items: center; gap: .6rem; }
.google-status { font-size: .88rem; color: var(--ok); font-weight: 700; max-width: 22rem; }
.google-status.fout { color: var(--warn); }
.stappen { margin: .2rem 0 0; padding-left: 1.3rem; }
.stappen li { margin-bottom: .3rem; }
.cr-ok { color: var(--ok); font-weight: 700; white-space: nowrap; }
.cr-nog { color: var(--tip); font-weight: 700; white-space: nowrap; }
details.andere-export, details.zonder-google-blok { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem 1rem; }
details.andere-export summary, details.zonder-google-blok summary { cursor: pointer; font-weight: 700; color: var(--navy-deep); }
details[open] > summary { margin-bottom: .5rem; }
#classroom-klassen p { margin: 0 0 .2rem; }
#classroom-info a { color: var(--navy); font-weight: 700; }

/* ---------- detail en melding ---------- */
.detail { border: 0; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(29, 35, 64, .3); padding: 1.2rem 1.4rem; width: min(760px, calc(100% - 32px)); max-height: 85vh; }
.detail::backdrop { background: rgba(29, 35, 64, .45); }
.detail-kop { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.detail h2 { font-size: 1.3rem; }
.opm-rij td { border-bottom: 1px solid var(--line); padding-top: 0; }
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 1rem); background: var(--navy-deep); color: #fff; padding: .7rem 1.2rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100% - 32px); z-index: 10; }
.toast.zichtbaar { opacity: 1; transform: translate(-50%, 0); }

/* laptop met een laag scherm (1366x768 met de werkbalk van de browser): de hele test zonder scrollen */
@media (max-height: 820px) {
  .view { padding: 1rem 1.3rem 1.1rem; }
  .test-kop h2 { font-size: 1.5rem; }
  .klok-tijd { font-size: 2rem; }
  .balk { margin: .5rem 0 .7rem; }
  .instructie { padding: .45rem .9rem; margin-bottom: .6rem; font-size: .95rem; }
  .tekst { font-size: 1.85rem; line-height: 2.8rem; height: 8.4rem; }
  .tekst-box { padding: .4rem 1rem; }
  .toetsenbord { margin-top: .4rem; }
  .kb-toets { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }
  .kb-spatie { width: 14rem; }
  .volgende { margin-top: .3rem; }
  #v-test .knoppen { margin-top: .6rem; }
}

@media (max-width: 720px) {
  .view { padding: 1rem; }
  .tekst { font-size: 1.6rem; line-height: 2.6rem; height: 7.8rem; }
  .toetsenbord, .kb-rij { gap: .2rem; }
  .kb-toets { width: 1.6rem; height: 2.2rem; font-size: .95rem; }
  .kb-rij-1 { margin-left: .6rem; }
  .kb-rij-2 { margin-left: -.5rem; }
  .kb-spatie { width: 9rem; }
  .test-kop h2 { font-size: 1.4rem; }
}