/* Ludendo v3, /docent/: alleen wat deze pagina extra nodig heeft bovenop /style.css.
   Dezelfde vormtaal als /leerling/: rol-held, dagbalk, momenten met genummerde stappen en één groot toestel.
   Nieuw hier: het digibord als toestel, en de schermen Wie is er, Berichten, Nakijken en Je week (alles in em). */

/* ============================================================ opening: kop links, laptop rechts
   Een laptop heeft meer breedte nodig dan de telefoon van /leerling/: tot 1200 px onder elkaar, daarna 5 : 7.
   De letters in het scherm blijven minstens 12 px. */
@media (min-width: 960px) { .rol-held--docent .rol-held-in { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
@media (min-width: 1200px) { .rol-held--docent .rol-held-in { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 56px; } }
.rol-held--docent .toestel--laptop { max-width: 760px; }
@media (min-width: 640px) { .rol-held--docent .scherm--laptop { font-size: clamp(12px, 100cqi / 50, 14.5px); } }
.rol-held--docent h1 { font-size: clamp(40px, 3vw + 14px, 58px); }
.rol-held--docent .s-titel { font-size: 2.1em; }
.rol-held--docent .s-groot .s-knoppen { margin-top: .25em; }

/* ============================================================ het digibord
   Een groot scherm aan de muur: donkere rand, geen voet, de dia licht (zoals een projectie, ook in donker). */
.toestel--bord { width: 100%; max-width: 900px; margin-inline: auto; }
.toestel--bord .toestel-rand { border-radius: 16px; padding: 12px; }
.moment .toestel--bord { max-width: min(100%, 900px, calc((100svh - var(--kop-h) - var(--balk-h) - var(--buhne-rest)) * 1.62)); }
.toestel--bord::after { content: ""; display: block; width: 34%; height: 8px; margin: 10px auto 0; border-radius: 999px; background: var(--toestel); opacity: .55; }
.scherm--bord {
  aspect-ratio: 16 / 9; border-radius: 6px; background: #fbfaf7; color: #0e1424;
  font-size: max(12px, calc(100cqi / 46)); line-height: 1.35;
}
.dc-dias { position: absolute; inset: 0 0 3.6em; }
.dc-dia { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 2em; padding: 2em 2.6em; }
.dc-dia-tekst { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.dc-dia-tekst small { font-size: .875em; font-weight: 600; color: #556070; }
.dc-dia-tekst b { font-size: 2.5em; line-height: 1.08; letter-spacing: -.03em; }
.dc-dia-tekst p { font-size: 1.1875em; color: #3a4252; max-width: 22em; }
.toneel .dc-dia { --van: translateX(1.5em); --weg: translateX(-1.5em); --d: 420ms; }
.dc-kolf { width: 100%; height: auto; max-height: 100%; justify-self: center; overflow: visible; }
.dc-buret { fill: #eef1f5; stroke: #8a93a3; stroke-width: 2; }
.dc-glas { fill: rgba(205, 214, 228, .28); stroke: #8a93a3; stroke-width: 2.4; stroke-linejoin: round; }
.dc-vloeistof { fill: #dfe7f2; transition: fill 1400ms var(--zacht) 700ms; }
.dc-kolf--roze .dc-vloeistof { fill: #f0a3c6; }
html.beweeg .toneel--dc-bord[data-stap="1"] .dc-kolf--roze .dc-vloeistof { fill: #dfe7f2; transition: none; }
/* Scherm zwart: het bord is zwart, alleen de knoppen blijven staan */
.dc-zwart { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #05070c; border-radius: inherit; }
.dc-zwart span { color: #a3acbb; font-size: .9375em; font-weight: 600; transform: translateY(-1.2em); }
.toneel .dc-zwart { --d: 360ms; }
.dc-bordbalk { position: absolute; z-index: 3; left: .8em; right: .8em; bottom: .7em; display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .35em; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 16px -6px rgba(14, 20, 36, .3), 0 0 0 1px rgba(14, 20, 36, .08); }
.dc-bordknop { position: relative; display: inline-flex; align-items: center; height: 2.5em; padding: 0 1.2em; border-radius: 999px; background: #eef0f3; font-size: .9375em; font-weight: 600; white-space: nowrap; transition: background-color 240ms var(--zacht), color 240ms var(--zacht); }
.dc-bordknop--volgende { background: #1d4ed8; color: #fff; }
.dc-bordknop--zwart.is-aan { background: #0e1424; color: #fff; }
.dc-bordstand { font-size: .9375em; font-weight: 600; color: #556070; white-space: nowrap; margin-inline: auto; }
@media (max-width: 639px) {
  .toestel--bord .toestel-rand { padding: 8px; border-radius: 14px; }
  .scherm--bord { aspect-ratio: 3 / 2; }
  .dc-dia { grid-template-columns: minmax(0, 1fr) 5em; gap: 1em; padding: 1em 1.2em; }
  .dc-dia-tekst b { font-size: 1.9em; }
  .dc-dia-tekst p { font-size: 1.0625em; }
  .dc-breed { display: none; }
  .dc-bordknop { padding: 0 1em; }
}

/* De grijze tweede regel van een kop staat op zichzelf en verdeelt zich netjes (geen los woord op de laatste regel). */
main h2 .zacht { display: block; text-wrap: balance; }

/* ============================================================ 08:31 · Wie is er */
.dc-balk-begin { transform: scaleX(.04) !important; }
.dc-wie { gap: .8em; flex: 1; min-height: 0; padding-block: 1em; }
.dc-wie-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5em; }
.dc-wie-kop .s-meta { margin-top: .15em; }
.dc-telling { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2em 1em; font-size: .9375em; color: var(--s-grijs); white-space: nowrap; }
.dc-telling b { color: var(--s-tekst); font-weight: 700; }
.dc-namen { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); grid-auto-flow: column; gap: 0 1.25em; }
.dc-namen li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5em; min-height: 2.2em; padding: .2em .55em; border-bottom: 1px solid var(--s-lijn); font-size: .875em; }
.dc-namen .dc-anders { border-radius: .55em; border-bottom-color: transparent; background: var(--s-grond); font-weight: 600; }
.dc-namen .draad { font-size: .8125em; }
.dc-namen li > span:first-child { white-space: nowrap; }
.dc-afwezig { display: inline-block; padding: .2em .6em; border-radius: .5em; background: var(--s-rood-zacht); color: var(--s-rood); font-size: .8571em; font-weight: 600; white-space: nowrap; }
.dc-wie-voet { display: flex; align-items: center; gap: 1em; margin-top: auto; }
/* Op een telefoon past de zin niet naast de grote knop (anders één woord per regel): hij gaat eronder. */
@media (max-width: 479px) {
  .dc-wie-voet { flex-wrap: wrap; gap: .5em; }
  .dc-wie-voet .s-klein { flex-basis: 100%; }
}
.dc-alleen-smal { display: none; }

/* ============================================================ 12:15 · Berichten */
.dc-post { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); flex: 1; align-items: stretch; }
.dc-postkop { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.dc-rust { font-size: .8125em; color: var(--s-grijs); background: var(--s-grond); border-radius: .6em; padding: .45em .7em; }
.dc-postrij { margin-inline: -.6em; padding-inline: .6em; border-radius: .6em; transition: background-color 240ms var(--zacht); }
.dc-postrij.is-gekozen, .dc-lijst .s-rij.is-gekozen { background: var(--s-accent-zacht); border-top-color: transparent; }
.dc-postrij.is-gekozen + .s-rij, .dc-lijst .s-rij.is-gekozen + .s-rij { border-top-color: transparent; }
.dc-postrij b { display: flex; align-items: center; }
.dc-gesprek { gap: .8em; }
.dc-gesprekkop { display: flex; flex-direction: column; gap: .1em; padding-bottom: .7em; border-bottom: 1px solid var(--s-lijn); }
.dc-gesprekkop small { color: var(--s-grijs); font-size: .8125em; }
.dc-draad { align-self: flex-start; }
.dc-schrijf { display: flex; align-items: center; gap: .6em; margin-top: auto; }
.dc-schrijf .s-veld { flex: 1; }

/* ============================================================ 13:40 · Cijfers */
.dc-cijferkop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.dc-preview { width: 21em; gap: .55em; }
@media (min-width: 640px) { .dc-preview { top: 4.6em; } }
.dc-preview .s-groot-cijfer { margin: 0; }
.s-toast u { text-decoration: none; font-weight: 700; margin-left: .3em; }

/* ============================================================ 15:10 · Nakijken */
.dc-nakijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); flex: 1; align-items: stretch; }
.dc-lijst { gap: .3em; }
.dc-stand { display: flex; align-items: center; flex-wrap: wrap; gap: .4em 1.1em; padding: .4em 0 .5em; }
.dc-stand > span:not(.s-knop) { font-size: .875em; color: var(--s-grijs); }
.dc-stand b { font-size: 1.7em; color: var(--s-tekst); letter-spacing: -.02em; margin-right: .1em; }
.dc-stand .s-knop { margin-left: auto; }
.dc-lijst .s-rij { margin-inline: -.6em; padding: .5em .6em; border-radius: .6em; transition: background-color 240ms var(--zacht); }
.dc-verslag { gap: .7em; }
.dc-blad { position: relative; display: flex; flex-direction: column; gap: .5em; padding: 1em 1.2em 1.3em; border-radius: .7em; background: var(--s-grond); }
.dc-blad-kop { font-size: .8125em; font-weight: 700; margin-top: .2em; }
.dc-lijn { position: relative; display: block; height: .45em; border-radius: 999px; background: var(--s-lijn); }
.dc-lijn--kort { width: 58%; }
.dc-onder { background: color-mix(in srgb, var(--s-oranje) 40%, var(--s-lijn)); }
.dc-opmerking { position: absolute; right: 1em; bottom: .9em; max-width: 15em; padding: .5em .75em; border-radius: .7em .7em .7em .2em; background: var(--s-paneel); box-shadow: var(--s-schaduw), inset 3px 0 0 var(--s-oranje); font-size: .8125em; font-weight: 600; }
.dc-beoordeel { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: .6em; }
.dc-cijfervak, .dc-opmvak { display: flex; flex-direction: column; gap: .2em; padding: .55em .8em; border: 1px solid var(--s-lijn); border-radius: .75em; font-size: .875em; min-width: 0; }
.dc-cijfervak small, .dc-opmvak small { color: var(--s-grijs); font-size: .8571em; }
.dc-cijfervak b { font-size: 1.6em; letter-spacing: -.02em; line-height: 1.1; }
.dc-volgende { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: auto; }

/* ============================================================ 15:20 · Je week: agenda en studiewijzer */
.s-menu .is-actief.dc-niet { background: transparent; color: var(--s-grijs); }
.s-menu span { transition: background-color 240ms var(--zacht), color 240ms var(--zacht); }
.dc-agenda { grid-template-rows: auto minmax(0, 1fr); flex: 1; gap: .8em; }
.dc-agendakop { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.dc-agendakop b { font-size: 1.0625em; }
.dc-agenda .s-wles small { white-space: normal; overflow: visible; }
.s-wles.dc-afspraak { background: transparent; box-shadow: inset 0 0 0 1px var(--s-lijn); }
.dc-sw { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); flex: 1; align-items: start; }
.dc-swtabel .s-tabel td { padding-block: .45em; }
.dc-swtabel .s-tabel td small { display: block; margin: 0; white-space: nowrap; }
.dc-swtabel .s-tabel td:first-child { white-space: nowrap; width: 5.5em; }
.dc-swtabel .s-tabel td:not(:first-child) { font-weight: 400; }
.dc-swtabel tr.dc-geweest td { color: var(--s-grijs); }
.dc-swtabel tr.dc-nu td:first-child { color: var(--s-accent-tekst); }
.dc-swtabel tr.dc-vakantie td { color: var(--s-grijs); font-style: italic; }
.dc-plan { gap: .7em; }
.dc-plantekst { font-size: .9375em; line-height: 1.5; }
.dc-plan .s-knop { align-self: flex-start; }
.dc-schakel { display: flex; align-items: center; gap: .6em; font-size: .875em; font-weight: 600; }
.dc-knopje { position: relative; width: 2.3em; height: 1.3em; flex: none; border-radius: 999px; background: var(--s-label); transition: background-color 240ms var(--zacht); }
.dc-knopje::after { content: ""; position: absolute; left: .15em; top: .15em; width: 1em; height: 1em; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform 240ms var(--veer); }
.dc-knopje.is-aan { background: var(--s-accent); }
.dc-knopje.is-aan::after { transform: translateX(1em); }

/* ============================================================ 13:40 · Cijfers
   Smal (< 640 px): de opmerking krijgt geen eigen, te smalle kolom (die brak in vijf regels en liet de tabel
   herrekenen als de knop van tekst wisselde, waardoor naam en cijfer even over elkaar stonden). Elke rij is een
   vast raster: naam en cijfer op regel 1, de opmerking op regel 2 over de volle breedte. De kop "Opmerking" valt weg. */
@media (max-width: 639px) {
  #d1340 .s-tabel, #d1340 .s-tabel :is(thead, tbody) { display: block; width: 100%; }
  #d1340 .s-tabel tr { display: grid; grid-template-columns: minmax(0, 1fr) 3em; column-gap: .5em; border-bottom: 1px solid var(--s-lijn); }
  #d1340 .s-tabel tbody tr:last-child { border-bottom: 0; }
  #d1340 .s-tabel tr.alleen-groot { display: none; }
  #d1340 .s-tabel :is(th, td) { display: block; border-bottom: 0; }
  #d1340 .s-tabel :is(th, td):nth-child(2) { text-align: right; }
  #d1340 .s-tabel th:nth-child(3), #d1340 .s-tabel td:empty { display: none; }
  #d1340 .s-tabel td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; font-weight: 400; color: var(--s-grijs); }
}

/* ============================================================ Wat kan het verder: de telling per stand */
.telblok { display: flex; flex-wrap: wrap; gap: 12px 36px; margin-top: 32px; }
.telblok > div { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 8px; }
.telblok dd { margin: 0; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.telblok dt { font-size: 15px; color: var(--grijs); }

/* ============================================================ smal: de laptop wordt een leesbare kaart (zie style.css)
   Twee panelen naast elkaar passen dan niet: per stap staat alleen het paneel dat bij die stap hoort. */
@media (max-width: 639px) {
  .dc-wie-kop { flex-direction: column; gap: .5em; }
  .dc-telling { justify-content: flex-start; }
  .dc-namen { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .dc-alleen-smal { display: block; }
  .dc-cijferkop { flex-direction: column; }
  .dc-beoordeel { grid-template-columns: minmax(0, 1fr); }
  .dc-opmerking { position: static; margin-top: .4em; align-self: flex-start; }
  .dc-agendakop { flex-direction: column; align-items: flex-start; gap: .4em; }
  html.beweeg .toneel--dc-post[data-stap="1"] .dc-gesprek,
  html.beweeg .toneel--dc-post:not([data-stap="1"]) .dc-postvak,
  html.beweeg .toneel--dc-nakijk[data-stap="1"] .dc-verslag,
  html.beweeg .toneel--dc-nakijk:not([data-stap="1"]) .dc-lijst { display: none; }
  html:not(.beweeg) .dc-postvak, html:not(.beweeg) .dc-lijst { display: none; }
}
.dc-anders .draad { font-size: max(10px, .85em); }