/* Leeromgeving: vakken-, niveau- en reekspagina's (aanvulling op style.css)

   De vaktegels zijn opgezet als vakjes uit het periodiek systeem: een groot
   symbool linksboven (Na, Sk, Bi …), de naam eronder. Dat is het ene
   opvallende element van de startpagina; de rest blijft rustig. */

.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15.5rem,100%),1fr));gap:var(--space-s);margin:var(--space-m) 0 var(--space-s)}

.tile{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;align-content:start;gap:.3rem;text-decoration:none;
  border:1.5px solid var(--navy);border-radius:var(--r-s);padding:var(--space-s);background:var(--white);min-height:15rem;
  transition:background .15s ease,border-color .15s ease}
.tile:hover{background:var(--blue-wash)}

/* het element-symbool */
.tile .big{font-family:var(--font-math);font-size:clamp(3rem,2.5rem + 2.2vw,4.25rem);font-weight:600;line-height:.9;color:var(--navy);letter-spacing:-.01em;margin-bottom:var(--space-2xs)}
.tile h3{margin:0;font-size:var(--step-1);color:var(--navy)}
.tile p{margin:0;color:var(--muted);font-size:var(--step-n1);line-height:1.45}
.tile .go{margin-top:var(--space-xs);color:var(--navy);font-weight:720;font-size:var(--step-n1)}

/* rechtsboven: aantal niveaus/lessen, zoals het atoomnummer */
.tile .badge{position:absolute;top:var(--space-s);right:var(--space-s);font-size:var(--step-n1);font-weight:700;letter-spacing:0;text-transform:none;
  padding:0;background:none;border:0;color:var(--blue-dark);font-variant-numeric:tabular-nums}

/* het vak met lessen: donker, zoals een gemarkeerd element */
.tile.dark{background:var(--strong);border-color:var(--navy)}
.tile.dark:hover{background:var(--strong-2)}
.tile.dark .big{color:var(--blue)}
.tile.dark h3{color:#fff}
.tile.dark p{color:rgba(255,255,255,.78)}
.tile.dark .go{color:#8fd3f5}
.tile.dark .badge{color:#8fd3f5}

/* nog leeg: gestippelde rand, gedempt */
.tile.soon{border-style:dashed;border-color:#b7c6d3;background:var(--white)}
.tile.soon:hover{background:var(--mist)}
.tile.soon .big{color:#b7c6d3}
.tile.soon h3{color:var(--navy)}
.tile.soon .badge{color:var(--muted)}
.tile.soon .go{color:var(--muted);font-weight:600}

/* reekstegel zonder symbool */
.tile.no-big{grid-template-rows:auto auto 1fr auto auto;min-height:0}
.tile.no-big .badge{position:static;justify-self:start;margin-bottom:.2rem}
.tile.no-big h3{font-size:var(--step-2)}

.tile .progress{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;margin-top:var(--space-xs);font-size:var(--step-n1);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.tile .progress div{height:6px;background:var(--mist-2);border-radius:99px;overflow:hidden}
.tile .progress i{display:block;height:100%;width:0;background:var(--blue);border-radius:inherit}
.tile.dark .progress{color:rgba(255,255,255,.78)}
.tile.dark .progress div{background:rgba(255,255,255,.16)}

.empty-state{margin:var(--space-m) 0;border-left:3px solid var(--sand);padding:var(--space-2xs) 0 var(--space-2xs) var(--space-s);max-width:var(--measure)}
.empty-state h2{margin:0 0 .3rem;font-size:var(--step-2)}
.empty-state p{margin:0;color:var(--text)}
.empty-state a{color:var(--navy);font-weight:720;text-decoration-color:var(--blue);text-underline-offset:.2em}

.lessons a.sub{padding-left:1.4rem}
.lessons a.sub::before{content:"";position:absolute;left:.6rem;top:50%;width:.45rem;height:1px;background:var(--muted)}
.lessons .none{padding:.45rem .6rem;font-size:var(--step-n1);color:var(--muted);font-style:italic}
.lessons a .lvl{font-weight:700}
.lessons a.active .lvl{color:var(--navy)}

@media (max-width:600px){
  .tile{min-height:0;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:var(--space-s);align-items:start;padding:var(--space-xs) var(--space-s)}
  .tile .big{grid-row:1 / span 3;font-size:2.4rem;margin:0;min-width:3.6rem;white-space:nowrap}
  .tile h3,.tile p,.tile .go,.tile .progress{grid-column:2}
  .tile .go{margin-top:.25rem}
  /* aantal klassen boven de titel i.p.v. rechtsboven: lange labels ('5 havo, 5 vwo') liepen over de titel */
  .tile .badge{position:static;grid-column:2;justify-self:start}
  .tile:has(.badge) .big{grid-row:1 / span 4}
  .tile.no-big{grid-template-columns:1fr}
  .tile.no-big h3,.tile.no-big p,.tile.no-big .go,.tile.no-big .progress,.tile.no-big .badge{grid-column:1}
}

/* startpagina: laatst toegevoegde of bijgewerkte lessen */
.recent{margin-top:var(--space-xl)}
.recent h2{margin:0 0 var(--space-2xs);font-size:var(--step-2)}
.recent .lesson-list{margin-top:0}
.recent .lesson-list a{grid-template-columns:3.4rem 1fr auto}
.recent .st time{font-variant-numeric:tabular-nums}
.recent .lesson-list a.is-read small::after{content:" · gelezen ✓";color:var(--blue-dark);font-weight:700}
@media (max-width:600px){
  .recent .lesson-list a{grid-template-columns:2.8rem 1fr}
}

/* materiaal: pdf's zoals nakijkboekjes */
.materiaal{margin-top:var(--space-l)}
.materiaal h2{margin:0 0 var(--space-xs);font-size:var(--step-2)}
.download-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-xs);max-width:calc(var(--measure) + 4rem)}
.download{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-s);align-items:center;text-decoration:none;
  border:1.5px solid var(--navy);border-radius:var(--r-s);padding:var(--space-s);background:var(--white);transition:background .15s ease}
.download:hover{background:var(--blue-wash)}
.file-ico{position:relative;width:3rem;height:3.8rem;display:grid;place-items:end center;padding-bottom:.5rem;
  background:var(--strong);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.04em;
  clip-path:polygon(0 0,70% 0,100% 22%,100% 100%,0 100%)}
.file-ico::before{content:"";position:absolute;top:0;right:0;width:30%;height:22%;background:var(--blue)}
.dl-body{display:grid;gap:.15rem;min-width:0}
.dl-body small{color:var(--blue-dark);font-weight:700;font-size:var(--step-n1)}
.dl-body strong{color:var(--navy);font-size:var(--step-1);line-height:1.25}
.dl-text{color:var(--muted);font-size:var(--step-n1);line-height:1.45}
.download .go{align-self:center;min-height:var(--tap);display:inline-flex;align-items:center;padding:0 1rem;border-radius:var(--r-m);
  background:var(--strong);color:#fff;font-weight:720;font-size:var(--step-n1);white-space:nowrap}
@media (max-width:600px){
  .download{grid-template-columns:auto 1fr;padding:var(--space-xs)}
  .file-ico{width:2.6rem;height:3.3rem;align-self:start}
  .download .go{grid-column:1 / -1;justify-content:center}
}

/* ===== Twee routes: per vak of per klas ===== */
.route{margin-top:var(--space-l)}
.route h2,.klas-sectie>h2{margin:0 0 var(--space-xs);font-size:var(--step-2)}
.route+.route{margin-top:var(--space-m)}
.hero+.route{margin-top:var(--space-m)}

/* klastegel: licht, zodat hij naast de donkere vaktegels herkenbaar anders is */
.tile.klas{min-height:0;background:var(--white);border-color:var(--navy)}
.tile.klas .big{font-family:var(--font-text);font-weight:800;letter-spacing:-.04em;color:var(--blue)}
.tile.klas:hover{background:var(--blue-wash)}
.klas-grid{grid-template-columns:repeat(auto-fill,minmax(min(12.5rem,100%),1fr))}

/* menu: kopjes 'Per vak' en 'Per klas' */
.nav-kop{margin:var(--space-s) .6rem .2rem;font-size:var(--step-n1);font-weight:700;color:var(--blue-dark)}

/* snel springen naar een klas of vak op dezelfde pagina */
.sprong{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--space-s)}
.sprong a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 1rem;border:1.5px solid var(--navy);border-radius:999px;
  text-decoration:none;color:var(--navy);font-weight:700;font-size:var(--step-n1)}
.sprong a:hover{background:var(--blue-wash)}

.klas-sectie{margin-top:var(--space-l);scroll-margin-top:calc(var(--topbar) + 1rem)}
.klas-sectie>h2 small{font-size:var(--step-0);font-weight:600;color:var(--muted);margin-left:.4rem}

/* ===== Hoofdstuk met zijn lessen: één klik naar de les ===== */
.hfd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr));gap:var(--space-s);margin-top:var(--space-xs)}
.hfd{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--white);overflow:hidden}
.hfd-kop{display:grid;grid-template-columns:auto 1fr;gap:var(--space-xs);align-items:start;padding:var(--space-s);
  background:var(--strong);color:#fff;text-decoration:none}
a.hfd-kop:hover{background:var(--strong-2)}
.hfd-kop .big{font-family:var(--font-math);font-size:var(--step-5);line-height:.85;color:var(--blue);font-weight:600;min-width:1.4ch}
.hfd-titel{display:block;font-size:var(--step-1);font-weight:700;line-height:1.2;color:#fff}
.hfd-tekst{display:block;margin-top:.3rem;font-size:var(--step-n1);line-height:1.45;color:rgba(255,255,255,.8)}
.hfd-lessen{list-style:none;margin:0;padding:.3rem 0;flex:1}
.hfd-lessen a{display:grid;grid-template-columns:3.1rem 1fr auto;gap:.5rem;align-items:baseline;min-height:var(--tap);
  padding:.55rem var(--space-s);text-decoration:none;color:var(--text);font-size:var(--step-n1);line-height:1.35}
.hfd-lessen li+li a{border-top:1px solid var(--line-soft)}
.hfd-lessen a:hover{background:var(--blue-wash);color:var(--navy)}
.hfd-lessen .nr{font-weight:700;color:var(--blue-dark);font-variant-numeric:tabular-nums}
.hfd-lessen .t{color:var(--navy);font-weight:600}
.hfd-lessen a.is-read::after{content:"✓";color:var(--blue-dark);font-weight:800}
.hfd-meer{display:flex;align-items:center;min-height:var(--tap);padding:.4rem var(--space-s);border-top:1.5px solid var(--line);
  text-decoration:none;color:var(--navy);font-weight:700;font-size:var(--step-n1)}
.hfd-meer::after{content:"→";margin-left:.4rem;color:var(--blue)}
.hfd-meer:hover{background:var(--mist)}
.reeks-extra{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:var(--space-xs) 0 0;font-size:var(--step-n1)}
.reeks-extra a{color:var(--navy);font-weight:700;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:.2em}
.klas-sectie .download-list,.content-wrap>.download-list{margin-top:var(--space-s)}

@media (max-width:600px){
  .tile.klas{grid-template-columns:auto 1fr}
  .hfd-kop{padding:var(--space-xs) var(--space-s)}
  .hfd-lessen a{grid-template-columns:2.9rem 1fr auto}
  .klas-grid{grid-template-columns:1fr 1fr}
  .klas-grid .tile.klas{grid-template-columns:1fr;grid-template-rows:auto}
  .klas-grid .tile.klas .big{grid-row:auto;font-size:2rem}
  .klas-grid .tile.klas h3,.klas-grid .tile.klas p,.klas-grid .tile.klas .go{grid-column:1}
  .klas-grid .tile.klas p{display:none}
}

/* ===== Hoofdstuk: paragrafen standaard dichtgeklapt ===== */
.hfd-label{display:block;font-size:var(--step-n1);font-weight:700;color:#8fd3f5;margin-bottom:.1rem}
.par-lijst{flex:1;padding:.2rem 0}
.par{border-top:1px solid var(--line-soft)}
.par:first-child{border-top:0}
.par>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2.6rem 1fr auto 1rem;gap:.5rem;align-items:center;
  min-height:var(--tap);padding:.55rem var(--space-s);font-size:var(--step-n1);line-height:1.35}
.par>summary::-webkit-details-marker{display:none}
.par>summary::after{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;justify-self:end}
.par[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.par>summary:hover{background:var(--mist)}
.par>summary .nr{font-weight:800;color:var(--blue-dark);font-variant-numeric:tabular-nums}
.par>summary .t{font-weight:700;color:var(--navy)}
.par>summary .aantal{color:var(--muted);font-weight:600;white-space:nowrap;font-size:var(--step-n2)}
.par>summary .aantal.klaar{color:var(--blue-dark)}
.par>ol{list-style:none;margin:0;padding:0 0 .35rem;background:var(--mist)}
.par>ol a{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.5rem;align-items:baseline;min-height:var(--tap);
  padding:.5rem var(--space-s) .5rem calc(var(--space-s) + .9rem);text-decoration:none;color:var(--text);font-size:var(--step-n1);line-height:1.35}
.par>ol a:hover{background:var(--blue-wash);color:var(--navy)}
.par>ol .nr{color:var(--blue-dark);font-weight:700;font-variant-numeric:tabular-nums}
.par>ol .t{color:var(--navy);font-weight:600}
.par>ol a.is-read::after{content:"✓";color:var(--blue-dark);font-weight:800}

/* ===== Startpagina: laatste lessen per hoofdstuk, dichtgeklapt ===== */
.recent-groep{border:1.5px solid var(--line);border-radius:var(--r-m);margin-top:var(--space-2xs);background:var(--white);max-width:calc(var(--measure) + 4rem)}
.recent-groep>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto 1rem;gap:var(--space-xs);align-items:center;
  min-height:var(--tap);padding:var(--space-xs) var(--space-s)}
.recent-groep>summary::-webkit-details-marker{display:none}
.recent-groep>summary::after{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;justify-self:end}
.recent-groep[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.recent-groep>summary:hover{background:var(--mist)}
.rg-titel{display:grid;gap:.05rem}
.rg-titel strong{color:var(--navy);font-size:var(--step-0)}
.rg-titel small{color:var(--muted);font-size:var(--step-n1)}
.rg-info{color:var(--blue-dark);font-weight:700;font-size:var(--step-n1);white-space:nowrap}
.recent-groep .lesson-list{margin:0;border-top:1px solid var(--line)}
.recent-groep .lesson-list a{padding-left:var(--space-s);padding-right:var(--space-s)}
.recent-groep .lesson-list li:last-child a{border-bottom:0}
@media (max-width:600px){
  .recent-groep>summary{grid-template-columns:1fr 1rem}
  .rg-info{grid-column:1;grid-row:2;font-weight:600}
  .recent-groep>summary::after{grid-column:2;grid-row:1 / span 2}
  .par>summary{grid-template-columns:2.4rem 1fr 1rem}
  .par>summary .aantal{grid-column:2;grid-row:2;margin-top:-.2rem}
  .par>summary::after{grid-column:3;grid-row:1 / span 2}
}
.recent-groep .lesson-list strong{font-size:var(--step-n1);font-weight:700}
.recent-groep .lesson-list a{padding-top:.55rem;padding-bottom:.55rem}
@media (max-width:600px){.recent-groep .lesson-list .st{font-size:var(--step-n2)}}
/* paragraaf met één les: directe link in dezelfde stijl */
a.par-link{display:grid;grid-template-columns:2.6rem 1fr 1rem;gap:.5rem;align-items:center;min-height:var(--tap);padding:.55rem var(--space-s);
  font-size:var(--step-n1);line-height:1.35;text-decoration:none;border-top:1px solid var(--line-soft)}
.par-lijst>a.par-link:first-child{border-top:0}
a.par-link:hover{background:var(--mist)}
a.par-link .nr{font-weight:800;color:var(--blue-dark);font-variant-numeric:tabular-nums}
a.par-link .t{font-weight:700;color:var(--navy)}
a.par-link::after{content:"→";color:var(--blue);justify-self:end}
a.par-link.is-read::after{content:"✓";color:var(--blue-dark);font-weight:800}
@media (max-width:600px){a.par-link{grid-template-columns:2.4rem 1fr 1rem}}
.recent-groep>summary::after,.par>summary::after{align-self:center;flex:none}

/* startpagina: elke regel gaat meteen naar het hoofdstuk */
.recent-lijst{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2xs);max-width:calc(var(--measure) + 4rem)}
a.recent-groep{display:grid;grid-template-columns:1fr auto 1rem;gap:var(--space-xs);align-items:center;margin:0;
  min-height:var(--tap);padding:var(--space-xs) var(--space-s);text-decoration:none;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--white)}
a.recent-groep:hover{border-color:var(--navy);background:var(--blue-wash)}
a.recent-groep::after{content:"→";color:var(--blue);font-weight:700;justify-self:end}
a.recent-groep .rg-info{display:grid;justify-items:end;gap:.05rem}
a.recent-groep .rg-info small{color:var(--muted);font-weight:600;font-size:var(--step-n2)}
@media (max-width:600px){
  a.recent-groep{grid-template-columns:1fr 1rem}
  a.recent-groep .rg-info{grid-column:1;grid-row:2;justify-items:start;display:flex;gap:.5rem;align-items:baseline}
  a.recent-groep::after{grid-column:2;grid-row:1 / span 2}
}
/* niveaupagina: alleen de hoofdstuktegels */
a.hfd-tegel{border-radius:var(--r-m);min-height:9rem;align-content:start}

/* ===== Lessen of uitwerkingen: label op de tegel en uitleg erboven ===== */
.hfd-soort{display:inline-flex;align-items:center;gap:.35rem;width:max-content;margin-bottom:.45rem;padding:.12rem .6rem .12rem .45rem;
  border-radius:999px;font-size:var(--step-n1);font-weight:720;line-height:1.5}
.hfd-soort svg{width:16px;height:16px;flex:none}
.hfd-aantal{display:block;margin-top:.6rem;font-size:var(--step-n1);font-weight:720}
.soort-lessen .hfd-soort{background:rgba(255,255,255,.13);color:#bfe6fa}
.hfd-tegel.soort-lessen .hfd-aantal{color:#8fd3f5}
.hfd-tegel.soort-uitwerkingen{background:var(--blue-wash);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
a.hfd-tegel.soort-uitwerkingen:hover{background:var(--mist-2)}
.hfd-tegel.soort-uitwerkingen .big{color:var(--navy)}
.hfd-tegel.soort-uitwerkingen .hfd-label{color:var(--blue-dark)}
.hfd-tegel.soort-uitwerkingen .hfd-titel{color:var(--navy)}
.hfd-tegel.soort-uitwerkingen .hfd-tekst{color:var(--text)}
.hfd-tegel.soort-uitwerkingen .hfd-aantal{color:var(--navy)}
.soort-uitwerkingen .hfd-soort{background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.soort-uitleg{list-style:none;margin:var(--space-s) 0 0;padding:0;display:grid;gap:.55rem;max-width:calc(var(--measure) + 6rem)}
.soort-uitleg li{display:grid;grid-template-columns:9.5rem 1fr;gap:.8rem;align-items:baseline;font-size:var(--step-n1);color:var(--text);line-height:1.45}
.soort-uitleg .hfd-soort{margin:0}
.soort-uitleg .soort-lessen .hfd-soort{background:var(--strong);color:#fff}
@media (max-width:600px){.soort-uitleg li{grid-template-columns:1fr;gap:.25rem}}

/* donker: uitwerkingen net als in de lichte modus een lichte tegel (cyaan), lessen blijven donker */
[data-thema="donker"] .hfd-tegel.soort-uitwerkingen{background:#9fd3ef;box-shadow:inset 0 0 0 1.5px #d4eefc}
[data-thema="donker"] a.hfd-tegel.soort-uitwerkingen:hover{background:#b5def4}
[data-thema="donker"] .hfd-tegel.soort-uitwerkingen .big,
[data-thema="donker"] .hfd-tegel.soort-uitwerkingen .hfd-titel,
[data-thema="donker"] .hfd-tegel.soort-uitwerkingen .hfd-aantal{color:#062a4a}
[data-thema="donker"] .hfd-tegel.soort-uitwerkingen .hfd-label{color:#0f5a85}
[data-thema="donker"] .hfd-tegel.soort-uitwerkingen .hfd-tekst{color:#14324d}
[data-thema="donker"] .hfd-tegel.soort-uitwerkingen .hfd-soort{background:#062a4a;color:#e8f6fe;box-shadow:none}

[data-thema="donker"] .soort-uitleg .soort-uitwerkingen .hfd-soort{background:#9fd3ef;color:#062a4a;box-shadow:none}
/* klastegel: de klas zelf is de kop ('5 havo'), geen afkorting erboven */
.tile.klas h3{font-size:var(--step-3);font-weight:800;letter-spacing:-.025em;color:var(--navy);line-height:1.1}
@media (max-width:600px){.klas-grid .tile.klas h3{font-size:1.5rem}}