/* ============================================================
   Huiswerk-Leerlingen - vormgeving
   Warme, rustige kleuren: pastelgroen met herfsttinten.
   ============================================================ */

:root {
  /* Papier en inkt. Warm papier als ondergrond, diepe inktgroene
     accenten, messing als goudtoon. */
  --achtergrond:   #f6f2ea;
  --achtergrond-2: #ebe4d6;
  --vlak:          #fffdf8;
  --rand:          #e1d8c7;
  --tekst:         #23312f;
  --tekst-zacht:   #79746a;

  --diep:          #16332f;
  --diep-2:        #1f4a44;
  --kop-verloop:   linear-gradient(155deg, #122b28 0%, #1f4a44 55%, #2a5c50 100%);

  /* De groene knoppen en accenten. */
  --groen:         #23625a;
  --groen-donker:  #1a4d47;
  --groen-zacht:   #e3ece8;
  --groen-tekst:   #ffffff;

  /* Messing: het goudje voor labels en lijnen. */
  --herfst:        #b98b31;
  --herfst-zacht:  #f6eeda;
  --nieuw:         #a67c2b;
  --nieuw-vlak:    #f8f0dc;

  --rood:          #a04a37;
  --rood-zacht:    #f5e3dd;

  /* Notenbalklijnen over de donkere kopbalk. */
  --notenbalk:     rgba(214, 178, 106, .17);
  --plaat-dekking: .2;

  --bol-docent-vlak:  #e3ece8;
  --bol-docent-rand:  #a9c4bd;
  --bol-docent-tekst: #1c4f48;
  --bol-leerling-vlak:  #f7ecdc;
  --bol-leerling-rand:  #dfc294;
  --bol-leerling-tekst: #8a5c22;

  --schaduw: 0 1px 2px rgba(35, 49, 47, .05), 0 6px 18px rgba(35, 49, 47, .07);
  --radius: 14px;
}

/* De donkere kleuren. Ze gelden als het apparaat op donker staat, en
   als de leerling zelf "altijd donker" heeft gekozen. Kiest hij
   "altijd licht", dan blijven ze uit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="licht"]) {
    --achtergrond:   #14201e;
    --achtergrond-2: #1c2b28;
    --vlak:          #1b2926;
    --rand:          #2e403c;
    --tekst:         #e9e5db;
    --tekst-zacht:   #9aa39d;

    --diep:          #0e1f1d;
    --diep-2:        #173934;
    --kop-verloop:   linear-gradient(155deg, #0d1f1d 0%, #173934 55%, #1d4740 100%);

    --groen:         #57998c;
    --groen-donker:  #4a8578;
    --groen-zacht:   #23352f;
    --groen-tekst:   #0f1c1a;

    --herfst:        #d3a761;
    --herfst-zacht:  #2f2a1e;
    --nieuw:         #d9ad5c;
    --nieuw-vlak:    #322a1b;

    --rood:          #cd7a63;
    --rood-zacht:    #33211c;

    --notenbalk:     rgba(214, 178, 106, .13);
    --plaat-dekking: .28;

    --bol-docent-vlak:  #1f3a35;
    --bol-docent-rand:  #3d675e;
    --bol-docent-tekst: #a8cfc5;
    --bol-leerling-vlak:  #33291d;
    --bol-leerling-rand:  #6b5330;
    --bol-leerling-tekst: #e3bd83;

    --schaduw: none;
  }
}

:root[data-modus="donker"] {
    --achtergrond:   #14201e;
    --achtergrond-2: #1c2b28;
    --vlak:          #1b2926;
    --rand:          #2e403c;
    --tekst:         #e9e5db;
    --tekst-zacht:   #9aa39d;

    --diep:          #0e1f1d;
    --diep-2:        #173934;
    --kop-verloop:   linear-gradient(155deg, #0d1f1d 0%, #173934 55%, #1d4740 100%);

    --groen:         #57998c;
    --groen-donker:  #4a8578;
    --groen-zacht:   #23352f;
    --groen-tekst:   #0f1c1a;

    --herfst:        #d3a761;
    --herfst-zacht:  #2f2a1e;
    --nieuw:         #d9ad5c;
    --nieuw-vlak:    #322a1b;

    --rood:          #cd7a63;
    --rood-zacht:    #33211c;

    --notenbalk:     rgba(214, 178, 106, .13);
    --plaat-dekking: .28;

    --bol-docent-vlak:  #1f3a35;
    --bol-docent-rand:  #3d675e;
    --bol-docent-tekst: #a8cfc5;
    --bol-leerling-vlak:  #33291d;
    --bol-leerling-rand:  #6b5330;
    --bol-leerling-tekst: #e3bd83;

    --schaduw: none;
}

* { box-sizing: border-box; }

/* Verborgen is verborgen - moet boven alle display-regels staan. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* De noten op de achtergrond steken bewust over de rand. Zonder dit
     zou je daardoor opzij kunnen schuiven. */
  overflow-x: hidden;
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--achtergrond);
  color: var(--tekst);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.55rem; margin: 0 0 .2rem; letter-spacing: -.015em; }
h2 { font-size: 1.1rem; margin: 0; }
h3 { font-size: 1rem; margin: 0 0 .2rem; }

.sub   { margin: 0; color: var(--tekst-zacht); font-size: .9rem; }
.hint  { color: var(--tekst-zacht); font-weight: 400; font-size: .78rem; }
.tekst-midden { text-align: center; }

/* ---------- Schermen ---------- */
.scherm {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
.scherm.midden {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: none;
}

/* ---------- Kaart ---------- */
.kaart {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 1.6rem;
  width: 100%;
}
.kaart.smal { max-width: 400px; }

/* ---------- Rolkeuze: twee bolletjes ---------- */

/* Een heel zachte pastelgloed achter de bolletjes, zodat het witte
   scherm niet kaal aanvoelt. */
#view-rol {
  position: relative;
  background-color: var(--vlak);
  background-image:
    radial-gradient(42rem 26rem at 22% 38%, var(--groen-zacht) 0%, transparent 62%),
    radial-gradient(42rem 26rem at 78% 62%, var(--herfst-zacht) 0%, transparent 62%);
}

/* Een band met notenbalklijnen achter de bolletjes, die naar boven en
   naar onderen uitvloeit. Genoeg om het op te merken, niet meer. */
#view-rol::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--tekst) 7%, transparent) 0 1px,
    transparent 1px 17px
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 44%, #000 56%, transparent 70%);
  mask-image: linear-gradient(to bottom, transparent 30%, #000 44%, #000 56%, transparent 70%);
}

/* De bolletjes staan boven die lijnen. */
.rolkeuze { position: relative; }

.rolkeuze {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 10vw, 14rem);
}

.rolknop {
  font: inherit;
  width: clamp(9rem, 34vw, 14rem);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  border: 2px solid var(--rand);
  background: var(--vlak);
  color: var(--tekst);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--schaduw);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* De tekening: achter de tekst, flauw, en niet aanklikbaar. */
.rolknop-plaat {
  position: absolute;
  width: 76%;
  height: 76%;
  opacity: var(--plaat-dekking);
  pointer-events: none;
  transition: opacity .2s ease;
}
.rolknop:hover .rolknop-plaat,
.rolknop:focus-visible .rolknop-plaat { opacity: calc(var(--plaat-dekking) + .07); }

/* Iets groter zodra je erover gaat met de muis. */
.rolknop:hover  { transform: scale(1.07); }
.rolknop:focus-visible { transform: scale(1.07); outline: none; }
.rolknop:active { transform: scale(1.02); }

.rolknop[data-rol="docent"] {
  background: var(--bol-docent-vlak);
  border-color: var(--bol-docent-rand);
  color: var(--bol-docent-tekst);
}
.rolknop[data-rol="leerling"] {
  background: var(--bol-leerling-vlak);
  border-color: var(--bol-leerling-rand);
  color: var(--bol-leerling-tekst);
}

.rolknop-titel {
  position: relative;
  font-weight: 700;
  font-size: clamp(1.05rem, 3.4vw, 1.45rem);
  letter-spacing: -.01em;
}

/* Wie liever geen bewegende beelden ziet, krijgt ze ook niet. */
@media (prefers-reduced-motion: reduce) {
  .rolknop, .rolknop-plaat { transition: none; }
  .rolknop:hover, .rolknop:focus-visible, .rolknop:active { transform: none; }
}

/* ---------- Formulieren ---------- */
form { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.2rem; }

label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .85rem;
  font-weight: 600;
}
label.kort { max-width: 220px; }

input, select, textarea {
  font: inherit;
  font-weight: 400;
  padding: .6rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--achtergrond);
  color: var(--tekst);
  min-width: 0;
  width: 100%;
}
textarea { resize: vertical; }

/* Rondjes en vinkjes zijn geen invulvakken: die houden hun eigen kleine
   maat, zodat de tekst er netjes naast past. */
input[type="radio"],
input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  accent-color: var(--groen);
  cursor: pointer;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--groen);
  outline-offset: 1px;
  border-color: transparent;
}
input[type="file"] { padding: .5rem; background: var(--achtergrond-2); cursor: pointer; }

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .9rem;
  align-items: end;
}
/* De invulvakjes zakken naar de onderkant van hun vakje, zodat ze
   allemaal op één lijn staan - ook als het ene label langer is dan
   het andere. */
.raster label { height: 100%; }
.raster label > input,
.raster label > select,
.raster label > textarea { margin-top: auto; }
.knoppenrij { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ---------- Knoppen ---------- */
.knop {
  font: inherit;
  font-weight: 650;
  padding: .62rem 1.15rem;
  border: none;
  border-radius: 9px;
  background: var(--groen);
  color: var(--groen-tekst);
  cursor: pointer;
  transition: background .15s;
}
.knop:hover { background: var(--groen-donker); }
.knop:disabled { opacity: .5; cursor: default; }
.knop.klein { padding: .45rem .85rem; font-size: .85rem; }

.knop-stil {
  font: inherit;
  font-size: .85rem;
  padding: .45rem .85rem;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--vlak);
  color: var(--tekst-zacht);
  cursor: pointer;
  white-space: nowrap;
}
.knop-stil:hover { color: var(--tekst); border-color: var(--tekst-zacht); }

.link {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--groen-donker);
  cursor: pointer;
  text-decoration: underline;
}

.terug {
  font: inherit;
  font-size: .85rem;
  background: none;
  border: none;
  padding: 0 0 .8rem;
  color: var(--tekst-zacht);
  cursor: pointer;
  align-self: flex-start;
}
.terug:hover { color: var(--tekst); }

.wissel { margin: 1.2rem 0 0; font-size: .85rem; color: var(--tekst-zacht); text-align: center; }

/* ---------- Balk bovenaan ---------- */
.balk {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.rij-tussen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ---------- Tabbladen ---------- */
.tabs {
  display: flex;
  gap: .3rem;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 1.4rem;
}
.tab {
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  padding: .55rem .95rem;
  border: none;
  border-bottom: 2.5px solid transparent;
  background: none;
  color: var(--tekst-zacht);
  cursor: pointer;
  margin-bottom: -1px;
}
.tab.actief { color: var(--tekst); border-bottom-color: var(--groen); }
.teller {
  display: inline-block;
  min-width: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--herfst);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

/* ---------- Lijsten ---------- */
.lijst { display: flex; flex-direction: column; gap: .6rem; }

.item {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 1rem 1.15rem;
}

.item-knop {
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.item-knop:hover { border-color: var(--groen); background: var(--groen-zacht); }

.leerling-naam { font-weight: 700; font-size: 1rem; }
.leerling-regel { font-size: .82rem; color: var(--tekst-zacht); margin-top: .1rem; }
.pijl { color: var(--tekst-zacht); font-size: 1.1rem; flex: 0 0 auto; }

.kop-rij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.datum { font-size: .8rem; color: var(--tekst-zacht); white-space: nowrap; }

.inleverchip {
  font-size: .78rem;
  font-weight: 600;
  padding: .12rem .6rem;
  border-radius: 999px;
  background: var(--herfst-zacht);
  color: var(--herfst);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.omschrijving { margin: .5rem 0 0; white-space: pre-wrap; word-break: break-word; }

.badge-nieuw {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--nieuw-vlak);
  color: var(--nieuw);
  border: 1px solid currentColor;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ---------- Bestanden ---------- */
.bestanden { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; }

.bestand {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--herfst-zacht);
  color: var(--tekst);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
}
.bestand:hover { border-color: var(--herfst); }
.bestand .icoon { flex: 0 0 auto; font-size: 1rem; }
.bestand .naam { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bestand .maat { flex: 0 0 auto; font-weight: 400; font-size: .78rem; color: var(--tekst-zacht); }
.bestand .stip {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--nieuw);
}

.bestandenlijst {
  list-style: none;
  margin: -.4rem 0 0;
  padding: 0;
  font-size: .84rem;
  color: var(--tekst-zacht);
}
.bestandenlijst li { padding: .12rem 0; }

.acties { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }

.verwijder {
  font: inherit;
  font-size: .8rem;
  background: none;
  border: 1px solid transparent;
  color: var(--tekst-zacht);
  cursor: pointer;
  padding: .25rem .55rem;
  border-radius: 7px;
}
.verwijder:hover { color: var(--rood); background: var(--rood-zacht); }
.verwijder.bevestig { color: var(--rood); background: var(--rood-zacht); border-color: currentColor; }

/* ---------- Meldingen ---------- */
.melding-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .75rem 1rem;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 11px;
}
.melding-icoon { flex: 0 0 auto; }
.melding-tekst { flex: 1 1 auto; font-size: .9rem; }
.melding-tijd { font-size: .78rem; color: var(--tekst-zacht); margin-top: .05rem; }

/* ---------- Overig ---------- */
.leeg {
  text-align: center;
  color: var(--tekst-zacht);
  margin-top: 2.5rem;
  font-size: .9rem;
}

.toast {
  position: fixed;
  bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(90vw, 440px);
  padding: .7rem 1.05rem;
  border-radius: 11px;
  font-size: .88rem;
  font-weight: 500;
  box-shadow: 0 10px 28px rgba(80, 60, 35, .2);
  background: var(--rood-zacht);
  color: var(--rood);
  border: 1px solid currentColor;
}
.toast.goed { background: var(--groen-zacht); color: var(--groen-donker); }

@media (max-width: 560px) {
  .balk, .rij-tussen { flex-direction: column; align-items: stretch; }
  .scherm { padding: 1.5rem 1rem 3rem; }
}


/* ============================================================
   Docentscherm: over de volle breedte, met kleur
   ============================================================ */

.scherm.vol { max-width: none; padding: 0; }

/* ---------- Gekleurde kopbalk ---------- */
.app-kop {
  position: relative;
  color: #fff;
  padding: 1.5rem 1.25rem 0;
  /* Fijne horizontale lijnen als een notenbalk, over het donkere verloop. */
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--notenbalk) 0 1px,
      transparent 1px 13px
    ),
    var(--kop-verloop);
  background-position: 0 .6rem, 0 0;
}
.app-kop-binnen { position: relative; }
.app-kop-binnen { max-width: 1240px; margin: 0 auto; }
.app-kop-rij {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.1rem;
}
.app-kop h1 { color: #fff; }
.sub-licht { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .88); }

.knop-licht {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .48rem .95rem;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.knop-licht:hover { background: rgba(255, 255, 255, .28); border-color: #fff; }

.terug-licht {
  font: inherit;
  font-size: .85rem;
  padding: 0 0 .6rem;
  border: none;
  background: none;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
}
.terug-licht:hover { color: #fff; }

/* Tabbladen staan in de gekleurde balk. */
.app-kop .tabs { border-bottom: none; margin-bottom: 0; gap: .2rem; }
.app-kop .tab {
  color: rgba(255, 255, 255, .78);
  border-bottom-width: 3px;
  margin-bottom: 0;
}
.app-kop .tab:hover { color: #fff; }
.app-kop .tab.actief { color: #fff; border-bottom-color: #fff; }

.app-kop .teller { background: #fff; color: #a8452c; }

.app-inhoud {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.7rem 1.25rem 4rem;
}

/* ---------- Leerlingen als tegels ---------- */
.kaartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}

/* Elke leerling heeft een eigen kleur; die staat in --accent. */
.kleur-groen  { --accent: #2c6b62; }  /* petrol    */
.kleur-herfst { --accent: #b5613f; }  /* terracotta */
.kleur-klei   { --accent: #8a5a7d; }  /* pruim     */
.kleur-mos    { --accent: #6a763c; }  /* olijf     */
.kleur-roos   { --accent: #3f6382; }  /* staalblauw */
.kleur-zand   { --accent: #a8802a; }  /* messing   */

.leerlingkaart {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 1.1rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 9%, var(--vlak));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--vlak));
  transition: transform .15s ease, box-shadow .15s ease;
}
.leerlingkaart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(80, 60, 35, .10);
}

.leerlingkaart-kop { display: flex; align-items: center; gap: .7rem; }
.rondje {
  flex: 0 0 auto;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
}
.leerlingkaart-namen { min-width: 0; }
.leerlingkaart-naam {
  font-weight: 700;
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}
.leerlingkaart-regel {
  font-size: .82rem;
  color: var(--tekst-zacht);
  overflow-wrap: anywhere;
}

.pillenrij { display: flex; flex-wrap: wrap; gap: .35rem; }
.pil {
  font-size: .74rem;
  font-weight: 650;
  padding: .16rem .6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, var(--vlak));
  color: color-mix(in srgb, var(--accent) 70%, var(--tekst));
}
.pil-stil { background: var(--achtergrond-2); color: var(--tekst-zacht); }

.leerlingkaart-voet { margin-top: auto; padding-top: .2rem; }
.leerlingkaart .knop { background: var(--accent); width: 100%; }
.leerlingkaart .knop:hover { filter: brightness(.92); }

.aantal-bij {
  font-size: .8rem;
  font-weight: 700;
  color: var(--tekst-zacht);
  background: var(--achtergrond-2);
  border-radius: 999px;
  padding: .1rem .55rem;
  vertical-align: middle;
}

/* ---------- Meldingen die nog niet gezien waren ---------- */
.melding-nieuw {
  border-color: var(--nieuw);
  background: var(--nieuw-vlak);
}
.nieuw-stip {
  align-self: center;
  flex: 0 0 auto;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--nieuw);
  background: var(--vlak);
  border-radius: 999px;
  padding: .12rem .5rem;
}

/* ---------- Leerling verwijderen ---------- */
.gevaarzone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--rood) 35%, var(--vlak));
  border-radius: var(--radius);
  background: var(--rood-zacht);
}
.gevaarzone .sub { margin-top: .15rem; max-width: 46ch; }
.knop-gevaar {
  font: inherit;
  font-weight: 650;
  padding: .55rem 1.1rem;
  border: none;
  border-radius: 9px;
  background: var(--rood);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.knop-gevaar:hover { filter: brightness(.92); }

@media (max-width: 640px) {
  .gevaarzone { flex-direction: column; align-items: flex-start; }
}

/* ---------- Kopje boven de meldingen van één dag ---------- */
.dagkop {
  margin: 1.4rem 0 .1rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-zacht);
}
.dagkop:first-child { margin-top: .2rem; }


/* ============================================================
   Leerlingaccounts, vinkjes, links en aanpassen
   ============================================================ */

/* ---------- Rij in de accountlijst ---------- */
.accountrij {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: .5rem .9rem .5rem .5rem;
}
.accountrij-open {
  font: inherit;
  color: inherit;
  flex: 1 1 16rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem;
  border: none;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.accountrij-open:hover { background: var(--achtergrond-2); }
.accountrij-namen { min-width: 0; flex: 1 1 auto; }
.accountrij-naam {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.accountrij-regel { font-size: .82rem; color: var(--tekst-zacht); overflow-wrap: anywhere; }
.accountrij-knoppen { display: flex; gap: .4rem; flex-wrap: wrap; }

.rondje.klein { width: 2.2rem; height: 2.2rem; font-size: .75rem; }

.slotje {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--rood-zacht);
  color: var(--rood);
}
.slotje.tijdelijk { background: var(--nieuw-vlak); color: var(--nieuw); }

/* ---------- Vinkjeslijst: voor wie is het huiswerk? ---------- */
.vinkvak {
  margin: 0;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--achtergrond-2);
}
.vinkvak legend {
  padding: 0 .4rem;
  font-size: .85rem;
  font-weight: 700;
}
.vinkjes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: .35rem .8rem;
}
.vinkje {
  display: flex;
  flex-direction: row;   /* anders erft hij de kolomrichting van het formulier */
  align-items: center;
  gap: .5rem;
  padding: .3rem .45rem;
  border-radius: 8px;
  font-size: .9rem;
  cursor: pointer;
}
.vinkje:hover { background: var(--vlak); }

/* ---------- Links invoeren ---------- */
.linkvak { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.linkvak-kop { font-size: .85rem; font-weight: 700; }
.linkrijen { display: flex; flex-direction: column; gap: .45rem; width: 100%; }
.linkrij { display: flex; flex-direction: row; gap: .4rem; align-items: center; }
.linkrij input {
  font: inherit;
  font-size: .9rem;
  padding: .5rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--vlak);
  color: var(--tekst);
  min-width: 0;
}
.link-adres { flex: 2 1 12rem; }
.link-titel { flex: 1 1 8rem; }
.link-weg {
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--vlak);
  color: var(--tekst-zacht);
  cursor: pointer;
}
.link-weg:hover { color: var(--rood); border-color: var(--rood); }

/* ---------- Links zoals de leerling ze ziet ---------- */
.linkenlijst { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.linkchip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--achtergrond-2);
  color: var(--tekst);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
  transition: border-color .15s, background .15s;
}
.linkchip:hover { border-color: var(--groen); background: var(--groen-zacht); }
.linkchip .naam { overflow-wrap: anywhere; }

/* ---------- Huiswerk aanpassen ---------- */
.aanpasvak {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 1rem 1.1rem 1.2rem;
  border: 1px dashed var(--rand);
  border-radius: 12px;
  background: var(--achtergrond-2);
}
.aanpasvak h4 { margin: 0; font-size: .95rem; }
.aanpasvak label { display: flex; flex-direction: column; gap: .3rem; width: 100%; font-size: .85rem; font-weight: 600; }
.aanpasvak label.kort { max-width: 14rem; }
.aanpasvak textarea, .aanpasvak input[type="date"], .aanpasvak input[type="file"] {
  font: inherit;
  padding: .55rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--vlak);
  color: var(--tekst);
  width: 100%;
}
.aanpas-bestanden { display: flex; flex-direction: column; gap: .35rem; width: 100%; }
.aanpas-bestand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--vlak);
  font-size: .88rem;
}
.aanpas-bestand .naam { flex: 1 1 auto; overflow-wrap: anywhere; }
.aanpas-bestand .maat { color: var(--tekst-zacht); font-size: .78rem; }
.aanpas-bestand.gaat-weg {
  opacity: .55;
  border-style: dashed;
  border-color: var(--rood);
}
.aanpas-bestand.gaat-weg .naam { text-decoration: line-through; }

/* ---------- Melding: account op slot ---------- */
.melding-slot { border-color: var(--rood); background: var(--rood-zacht); }
.melding-slot .knop { margin-top: .5rem; }


/* ---------- Bestanden die je hebt uitgekozen ---------- */
.bestandenlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.gekozen-bestand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--vlak);
  font-size: .88rem;
}
.gekozen-bestand .naam { flex: 1 1 auto; overflow-wrap: anywhere; }
.gekozen-bestand .maat { color: var(--tekst-zacht); font-size: .78rem; }

/* ---------- Datum boven de huiswerkkaarten ---------- */
.huiswerk-datum {
  margin: 1.6rem 0 .2rem;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-zacht);
}
.huiswerk-datum:first-child { margin-top: 0; }
.kop-links { display: flex; align-items: center; gap: .5rem; }

/* ---------- Blokkeren: lichter rood dan verwijderen ---------- */
.knop-blokkeer {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem .85rem;
  border: 1px solid color-mix(in srgb, var(--rood) 45%, var(--vlak));
  border-radius: 9px;
  background: var(--rood-zacht);
  color: color-mix(in srgb, var(--rood) 80%, var(--tekst));
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.knop-blokkeer:hover {
  background: color-mix(in srgb, var(--rood) 22%, var(--vlak));
  border-color: var(--rood);
}
.knop-gevaar.klein { padding: .45rem .85rem; font-size: .85rem; }

/* ---------- Het bevestigingsvenster ---------- */
#vraagvenster {
  width: min(30rem, calc(100vw - 2.5rem));
  padding: 1.5rem 1.6rem 1.4rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--vlak);
  color: var(--tekst);
  box-shadow: 0 12px 40px rgba(20, 32, 30, .28);
}
#vraagvenster::backdrop { background: rgba(20, 32, 30, .45); }
#vraagvenster h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
#vraagvenster .knoppenrij { margin-top: 1.2rem; }


/* ============================================================
   Het scherm van de leerling
   ============================================================ */

/* Een eigen kleur voor de kopbalk, zodat een leerling meteen ziet
   dat hij in zijn eigen deel zit. Warmer dan die van de docent. */
.app-kop-leerling {
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--notenbalk) 0 1px,
      transparent 1px 13px
    ),
    linear-gradient(150deg, #3a2a18 0%, #6d4a24 48%, #a0702f 100%);
}

/* Het huiswerk staat in twee kolommen: links wat er nu speelt, rechts
   een smalle kolom met wat er binnenkort verdwijnt. */
.huiswerk-kolommen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 62rem) {
  .huiswerk-kolommen.met-zijkolom { grid-template-columns: 3fr 1fr; gap: 1.8rem; }
}

/* De hoofdkolom: bij de leerling naast elkaar, bij de docent onder elkaar. */
.huiswerk-hoofd { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.lijst-leerling .huiswerk-hoofd {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}
.lijst-leerling .huiswerk-hoofd > .item { flex: 1 1 21rem; min-width: 0; }
.lijst-leerling .huiswerk-hoofd > .huiswerk-datum { flex: 1 1 100%; }

/* De smalle kolom rechts. */
.huiswerk-zijkolom {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-width: 0;
}
.huiswerk-zijkolom .item { padding: .9rem 1rem; }
.lijst-leerling .huiswerk-zijkolom .item { padding-left: 1.3rem; }

/* Elke opdracht krijgt een streep in messing aan de zijkant. */
.lijst-leerling .item {
  position: relative;
  overflow: hidden;
  padding-left: 1.5rem;
}
.lijst-leerling .item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--eigen);
}
/* Een opdracht die nog nieuw is valt extra op. */
.lijst-leerling .item:has(.badge-nieuw) {
  border-color: color-mix(in srgb, var(--nieuw) 45%, var(--vlak));
  background:
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--nieuw) 7%, transparent) 0 1px,
      transparent 1px 15px
    ),
    var(--nieuw-vlak);
}

@media (max-width: 640px) {
  .lijst-leerling .item { padding-left: 1.2rem; }
}

/* ============================================================
   Huiswerk groot in beeld (voor de leerling)
   ============================================================ */

/* De kaart laat merken dat je erop kunt klikken. */
.item-open { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.item-open:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(35, 49, 47, .12);
}
.item-open:focus-visible {
  outline: 2.5px solid var(--groen);
  outline-offset: 3px;
}
/* Bestanden en links binnen de kaart blijven gewoon links. */
.item-open a { cursor: pointer; }

.grootvenster {
  width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow: auto;
  padding: 2.4rem 2.2rem 2.2rem;
  border: 1px solid var(--rand);
  border-radius: 18px;
  background: var(--vlak);
  color: var(--tekst);
  box-shadow: 0 18px 60px rgba(20, 32, 30, .34);
  /* Fijne notenbalklijnen op de achtergrond, net als op het beginscherm. */
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--tekst) 4%, transparent) 0 1px,
    transparent 1px 17px
  );
}
.grootvenster::backdrop { background: rgba(20, 32, 30, .52); }

.venster-sluit {
  position: absolute;
  top: .8rem;
  right: 1rem;
  font-size: 1.7rem;
  line-height: 1;
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--tekst-zacht);
  cursor: pointer;
}
.venster-sluit:hover { background: var(--achtergrond-2); color: var(--tekst); }

.groot-datum {
  margin: 0 0 .6rem;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-zacht);
}
.groot-chip { margin-bottom: 1rem; }

/* Hier gaat het om: de opdracht zelf, groot en rustig leesbaar. */
.groot-omschrijving {
  margin: .4rem 0 1.6rem;
  font-size: 1.45rem;
  line-height: 1.5;
  font-weight: 500;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.groot-kopje {
  margin: 0 0 .6rem;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-zacht);
}
.groot-lijst { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.6rem; }

.groot-knop {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.1rem;
  border: 1.5px solid var(--rand);
  border-radius: 12px;
  background: var(--achtergrond-2);
  color: var(--tekst);
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 600;
  transition: border-color .15s, background .15s, transform .15s;
}
.groot-knop:hover {
  border-color: var(--groen);
  background: var(--groen-zacht);
  transform: translateX(2px);
}
.groot-knop .icoon { font-size: 1.3rem; }
.groot-knop .naam { flex: 1 1 auto; overflow-wrap: anywhere; }
.groot-knop .maat { font-size: .82rem; font-weight: 500; color: var(--tekst-zacht); }

@media (max-width: 640px) {
  .grootvenster { padding: 2.2rem 1.2rem 1.4rem; }
  .groot-omschrijving { font-size: 1.2rem; }
}

/* ============================================================
   Muzikale achtergrond
   ============================================================ */

/* Elk scherm heeft een laag met noten en instrumenten die wegvallen
   in de achtergrond. Ze staan achter alles en vangen geen klikken. */
.scherm { position: relative; }

.muzieklaag {
  /* Vast aan het venster: de tekeningen blijven staan terwijl de lijst
     eronder langsschuift, en ze staan altijd op dezelfde plek in beeld. */
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--tekst);
  /* Hoe sterk de tekeningen doorkomen. In donkere modus mag dat meer,
     want daar vallen lichte lijnen sneller weg. */
  --doorkomen: .72;
  opacity: var(--doorkomen);
  /* Naar de randen toe vervagen, zodat er niets abrupt afgesneden
     lijkt en de tekst in het midden rustig leesbaar blijft. */
  -webkit-mask-image: radial-gradient(120% 95% at 50% 45%, #000 25%, rgba(0,0,0,.35) 65%, transparent 100%);
  mask-image: radial-gradient(120% 95% at 50% 45%, #000 25%, rgba(0,0,0,.35) 65%, transparent 100%);
}
/* Elke noot of elk instrument staat op zijn eigen plek, in procenten
   van het scherm, zodat het op elk formaat klopt. */
.muzieklaag .mz {
  position: absolute;
  display: block;
  fill: currentColor;
  overflow: visible;
}

/* De inhoud staat er altijd bovenop. */
.scherm > .kaart,
.scherm > .app-kop,
.scherm > .app-inhoud,
.scherm > .rolkeuze,
.scherm > .lijst,
.scherm > .leeg { position: relative; z-index: 1; }

/* Op het beginscherm mogen ze iets warmer van kleur zijn. */
.muziek-rol   { color: var(--herfst); }
.muziek-login { color: var(--groen); }

/* Bij de docent groen, bij de leerling messing - dezelfde tweedeling
   als in de kopbalken. */
.muziek-docent, .muziek-detail { color: var(--groen); --doorkomen: 1; }
.muziek-leerling { color: var(--eigen); --doorkomen: .95; }

/* In donkere modus zijn dezelfde dekkingen te flauw om nog iets te
   zien, dus daar mag het net iets sterker. */
@media (prefers-color-scheme: dark) {
  .muzieklaag { --doorkomen: 1; }
}

/* Op een smal scherm zou het te druk worden naast de tekst. */
@media (max-width: 560px) {
  .muzieklaag { --doorkomen: .5; }
}

/* ============================================================
   Rooster
   ============================================================ */

/* ---------- De week kiezen ---------- */
.weekbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--vlak);
}
.weekbalk-midden { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.weekbalk-midden strong { font-size: 1rem; }

/* ---------- De zeven dagen ---------- */
.rooster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: .7rem;
  align-items: start;
}

.roosterdag {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-height: 8rem;
  padding: .7rem .6rem .6rem;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--vlak);
}
/* Vandaag springt eruit. */
.roosterdag.vandaag {
  border-color: var(--groen);
  box-shadow: inset 0 0 0 1px var(--groen);
  background: var(--groen-zacht);
}
.roosterdag-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rand);
}
.roosterdag-naam { font-weight: 700; font-size: .85rem; text-transform: capitalize; }
.roosterdag-datum { font-size: .75rem; color: var(--tekst-zacht); }
.roosterdag-leeg { margin: .3rem 0; color: var(--tekst-zacht); font-size: .85rem; text-align: center; }

/* Het plusje verschijnt pas als je over de dag gaat. */
.roosterdag-plus {
  font: inherit;
  font-size: 1rem;
  margin-top: auto;
  padding: .2rem;
  border: 1px dashed var(--rand);
  border-radius: 8px;
  background: none;
  color: var(--tekst-zacht);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, border-color .15s;
}
.roosterdag:hover .roosterdag-plus,
.roosterdag-plus:focus-visible { opacity: 1; }
.roosterdag-plus:hover { color: var(--groen); border-color: var(--groen); }

/* ---------- Eén les in het rooster ---------- */
.lesblok {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--vlak));
  border-left: 4px solid var(--accent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 12%, var(--vlak));
  color: var(--tekst);
  text-align: left;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.lesblok:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(35, 49, 47, .1); }
.lesblok-tijd { font-weight: 700; font-size: .82rem; color: color-mix(in srgb, var(--accent) 75%, var(--tekst)); }
.lesblok-naam { font-weight: 650; font-size: .88rem; overflow-wrap: anywhere; }
.lesblok-regel { display: flex; flex-direction: column; font-size: .74rem; color: var(--tekst-zacht); }
.lesblok-plek { overflow-wrap: anywhere; }
.lesblok-af {
  align-self: flex-start;
  margin-top: .2rem;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--rood-zacht);
  color: var(--rood);
}
.lesblok.afgelast { opacity: .6; }
.lesblok.afgelast .lesblok-naam,
.lesblok.afgelast .lesblok-tijd { text-decoration: line-through; }

/* ---------- Het formulier ---------- */
.herhaalvak {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: flex-start;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--achtergrond-2);
}
.herhaalvak > div { width: 100%; display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.keuzerij { display: flex; flex-direction: row; flex-wrap: wrap; gap: .3rem .9rem; }
.keuze {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;   /* anders breekt "Om de week" over drie regels */
}
.keuze > input { flex: 0 0 auto; }

.botsing {
  margin: 0;
  padding: .65rem .85rem;
  border: 1px solid color-mix(in srgb, var(--nieuw) 45%, var(--vlak));
  border-radius: 9px;
  background: var(--nieuw-vlak);
  color: color-mix(in srgb, var(--nieuw) 80%, var(--tekst));
  font-size: .85rem;
  font-weight: 600;
}

.lesacties {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
}

select {
  font: inherit;
  padding: .6rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--vlak);
  color: var(--tekst);
}

/* ============================================================
   Het rooster zoals de leerling het ziet
   ============================================================ */

.volgende-les {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-bottom: 1.6rem;
  padding: 1.3rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--eigen) 35%, var(--vlak));
  background:
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--eigen) 7%, transparent) 0 1px,
      transparent 1px 15px
    ),
    color-mix(in srgb, var(--eigen) 10%, var(--vlak));
}
.volgende-label {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--eigen) 80%, var(--tekst));
}
.volgende-wanneer { font-size: 1.35rem; line-height: 1.3; }
.volgende-waar { font-size: .88rem; color: var(--tekst-zacht); }

/* ---------- Het rooster van de leerling: compacte rijen ---------- */
.maandkop {
  margin: 1.6rem 0 .5rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tekst-zacht);
}
.maandkop:first-child { margin-top: 0; }

#mijn-rooster { gap: .35rem; }

.lesrij {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .55rem .9rem .55rem .55rem;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--vlak);
}

/* Het datumblokje links: dag en nummer onder elkaar. */
.lesrij-datum {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  padding: .3rem 0 .35rem;
  border-radius: 8px;
  background: var(--achtergrond-2);
  line-height: 1.1;
}
.lesrij-dag {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tekst-zacht);
}
.lesrij-nummer { font-size: 1.1rem; }

.lesrij-midden { flex: 1 1 auto; min-width: 0; }
.lesrij-boven {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}
.lesrij-tijd {
  font-weight: 700;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
.lesrij-titel { font-size: .92rem; color: var(--tekst-zacht); }
.lesrij-plek { font-size: .8rem; color: var(--tekst-zacht); overflow-wrap: anywhere; }
.lesrij-notitie {
  margin-top: .35rem;
  padding: .4rem .6rem;
  border-radius: 8px;
  background: var(--achtergrond-2);
  font-size: .83rem;
}
.lesrij.afgelast { opacity: .6; }
.lesrij.afgelast .lesrij-tijd,
.lesrij.afgelast .lesrij-titel { text-decoration: line-through; }


@media (max-width: 640px) {
  .weekbalk { flex-direction: column; }
  .volgende-wanneer { font-size: 1.15rem; }
}

/* ============================================================
   Welkomzin, uitloggen en eigen kleuren
   ============================================================ */

/* De naam in een sierlijke letter. Deze staan al op de meeste Macs,
   iPhones en Windows-computers; is er geen enkele, dan valt hij terug
   op een gewone schuine letter. */
.welkomzin {
  margin: 0;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
}
.sierlijk {
  font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script",
               "Brush Script MT", "Lucida Handwriting", cursive;
  font-weight: 600;
  font-size: 1.35em;
  letter-spacing: .01em;
  /* Iets lucht tussen "Welkom" en de naam. De sierlijke letter begint
     krap aan zijn linkerkant, dus die ruimte zetten we er zelf bij. */
  margin-left: .16em;
  padding: 0 .06em;
}
.welkomstaart { font-weight: 500; }

.app-kop .tabs { flex-wrap: wrap; }

/* Op een smal scherm blijft hij rechtsboven staan, maar dan alleen
   het tekentje. Dat scheelt ruimte voor de welkomzin, die anders naast
   de menuknop over vier regels wordt uitgesmeerd. */
@media (max-width: 34rem) {
  .merk-klein-naam { display: none; }
}

/* ---------- De kleuren die de leerling kan kiezen ---------- */
:root {
  --kop-brons:      linear-gradient(150deg, #3a2a18 0%, #6d4a24 48%, #a0702f 100%);
  --kop-petrol:     linear-gradient(150deg, #10302c 0%, #1d514a 48%, #2b7167 100%);
  --kop-nacht:      linear-gradient(150deg, #131c33 0%, #23345c 48%, #34508a 100%);
  --kop-pruim:      linear-gradient(150deg, #2c1a2e 0%, #4d2c50 48%, #75456f 100%);
  --kop-terracotta: linear-gradient(150deg, #3a1d16 0%, #6d3524 48%, #a55437 100%);
  --kop-mos:        linear-gradient(150deg, #1e2614 0%, #3c4a22 48%, #5e7034 100%);
  --kop-oceaan:     linear-gradient(150deg, #0e2830 0%, #17454f 48%, #226a76 100%);
  --kop-framboos:   linear-gradient(150deg, #33141f 0%, #5e2438 48%, #8d3a54 100%);

  /* Bij elk verloop hoort één egale kleur, voor het streepje langs het
     huiswerk en andere kleine accenten. Brons is de standaard. */
  --eigen: #a0702f;
}

:root[data-kleur="petrol"]     { --eigen: #2b7167; }
:root[data-kleur="nacht"]      { --eigen: #3a5896; }
:root[data-kleur="pruim"]      { --eigen: #7d4a77; }
:root[data-kleur="terracotta"] { --eigen: #a55437; }
:root[data-kleur="mos"]        { --eigen: #61743a; }
:root[data-kleur="oceaan"]     { --eigen: #22707d; }
:root[data-kleur="framboos"]   { --eigen: #943d59; }

.app-kop-leerling { background-image:
  repeating-linear-gradient(to bottom, var(--notenbalk) 0 1px, transparent 1px 13px),
  var(--kop-brons); }

:root[data-kleur="petrol"]     .app-kop-leerling { background-image:
  repeating-linear-gradient(to bottom, var(--notenbalk) 0 1px, transparent 1px 13px), var(--kop-petrol); }
:root[data-kleur="nacht"]      .app-kop-leerling { background-image:
  repeating-linear-gradient(to bottom, var(--notenbalk) 0 1px, transparent 1px 13px), var(--kop-nacht); }
:root[data-kleur="pruim"]      .app-kop-leerling { background-image:
  repeating-linear-gradient(to bottom, var(--notenbalk) 0 1px, transparent 1px 13px), var(--kop-pruim); }
:root[data-kleur="terracotta"] .app-kop-leerling { background-image:
  repeating-linear-gradient(to bottom, var(--notenbalk) 0 1px, transparent 1px 13px), var(--kop-terracotta); }
:root[data-kleur="mos"]        .app-kop-leerling { background-image:
  repeating-linear-gradient(to bottom, var(--notenbalk) 0 1px, transparent 1px 13px), var(--kop-mos); }
:root[data-kleur="oceaan"]     .app-kop-leerling { background-image:
  repeating-linear-gradient(to bottom, var(--notenbalk) 0 1px, transparent 1px 13px), var(--kop-oceaan); }
:root[data-kleur="framboos"]   .app-kop-leerling { background-image:
  repeating-linear-gradient(to bottom, var(--notenbalk) 0 1px, transparent 1px 13px), var(--kop-framboos); }

/* ---------- Tekstgrootte ---------- */
:root[data-tekst="groot"]  { font-size: 112.5%; }
:root[data-tekst="extra"]  { font-size: 125%; }

/* ---------- Noten op de achtergrond uit ---------- */
:root[data-patroon="uit"] .muzieklaag { display: none; }

/* ---------- Het tabblad met de instellingen ---------- */
.instelvak { margin-bottom: 1rem; }
.instelvak h3 { margin-bottom: .1rem; }
.instelvak .keuzerij { margin-top: .9rem; }

.kleurkeuze {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  gap: .6rem;
  margin-top: 1rem;
}
.kleurbol {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: .8rem .5rem .6rem;
  border: 2px solid var(--rand);
  border-radius: 12px;
  background: var(--vlak);
  color: var(--tekst);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.kleurbol::before {
  content: '';
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-image: var(--bol);
}
.kleurbol:hover { transform: translateY(-2px); }
.kleurbol.gekozen { border-color: var(--tekst); }
.kleurbol.gekozen::after { content: '✓ gekozen'; font-size: .7rem; font-weight: 700; color: var(--tekst-zacht); }
.kleurbol-naam { font-size: .82rem; font-weight: 650; }

.kleurbol-brons      { --bol: var(--kop-brons); }
.kleurbol-petrol     { --bol: var(--kop-petrol); }
.kleurbol-nacht      { --bol: var(--kop-nacht); }
.kleurbol-pruim      { --bol: var(--kop-pruim); }
.kleurbol-terracotta { --bol: var(--kop-terracotta); }
.kleurbol-mos        { --bol: var(--kop-mos); }
.kleurbol-oceaan     { --bol: var(--kop-oceaan); }
.kleurbol-framboos   { --bol: var(--kop-framboos); }

/* ============================================================
   Rooster en formulier: de laatste bijstellingen
   ============================================================ */

/* De hele week naast elkaar op een breed scherm. */
@media (min-width: 60rem) {
  .rooster { grid-template-columns: repeat(7, 1fr); }
}

/* "Voor wie": de namen onder elkaar in een omkaderde lijst. */
.keuzelijst {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  max-height: 13rem;
  overflow-y: auto;
  padding: .4rem;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--vlak);
}
.keuzelijst .vinkje { padding: .45rem .55rem; border-radius: 8px; }
.keuzelijst .vinkje:hover { background: var(--achtergrond-2); }
.keuzelijst .vinkje:has(input:checked) {
  background: var(--groen-zacht);
  font-weight: 700;
}
.vinkje-naam { overflow-wrap: anywhere; }

/* De drie herhaalkeuzes even breed en netjes onder elkaar uitgelijnd. */
.keuzerij-gelijk {
  display: grid;
  grid-template-columns: repeat(3, minmax(8.5rem, 11rem));
  justify-content: start;
  gap: .4rem .5rem;
  width: 100%;
}
@media (max-width: 34rem) {
  .keuzerij-gelijk { grid-template-columns: 1fr; }
}

/* "Herhalen" staat als kopje boven het vak, niet erin. */
#herhaalvak {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: flex-start;
}
#herhaal-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  align-items: flex-start;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--achtergrond-2);
}

/* Het huiswerk van de leerling mag het scherm net zo goed vullen
   als het rooster. */


/* ============================================================
   Stipjes en merktekens voor de leerling
   ============================================================ */

/* Het bolletje met het uitroepteken in een tabblad. */
.stip-uitroep {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: .1rem;
  border-radius: 50%;
  background: #fff;
  color: #a8452c;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}

/* Korte samenvatting boven het rooster. */
.rooster-nieuws {
  margin: 0 0 1rem;
  padding: .6rem .9rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--nieuw) 40%, var(--vlak));
  background: var(--nieuw-vlak);
  color: color-mix(in srgb, var(--nieuw) 80%, var(--tekst));
  font-size: .87rem;
  font-weight: 600;
}

/* Een nieuwe les valt op met een warme tint, een gewijzigde met een
   koelere. Zo zie je meteen het verschil. */
.lesrij-nieuw {
  border-color: color-mix(in srgb, var(--nieuw) 50%, var(--vlak));
  background: var(--nieuw-vlak);
}
.lesrij-nieuw .lesrij-datum { background: color-mix(in srgb, var(--nieuw) 22%, var(--vlak)); }

.lesrij-gewijzigd {
  border-color: color-mix(in srgb, var(--groen) 45%, var(--vlak));
  background: var(--groen-zacht);
}
.lesrij-gewijzigd .lesrij-datum { background: color-mix(in srgb, var(--groen) 20%, var(--vlak)); }

.lesmerk {
  flex: 0 0 auto;
  align-self: center;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--vlak);
}
.lesmerk-nieuw     { color: var(--nieuw); }
.lesmerk-gewijzigd { color: var(--groen-donker); }

/* ============================================================
   Metronoom
   ============================================================ */

/* Het knopje in het uitvergrote huiswerk, links van het kruisje. */
.metronoom-open {
  position: absolute;
  top: .95rem;
  right: 3.6rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  padding: .35rem .75rem .35rem .55rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--achtergrond-2);
  color: var(--tekst);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.metronoom-open:hover { border-color: var(--groen); background: var(--groen-zacht); }
.metronoom-icoon { display: flex; color: var(--groen); }

/* Het venster zelf: zweeft boven de pagina en is te verslepen. Staat
   het huiswerk groot in beeld, dan hangt hij daarbinnen; hij blijft
   vast staan ten opzichte van het scherm. */
.metronoom {
  position: fixed;
  top: 6rem;
  left: 2rem;
  margin: 0;
  z-index: 60;
  width: 15.5rem;
  color: var(--tekst);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 0 1rem 1rem;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: var(--vlak);
  box-shadow: 0 14px 40px rgba(20, 32, 30, .3);
  user-select: none;
}
.metronoom.sleept { cursor: grabbing; box-shadow: 0 20px 50px rgba(20, 32, 30, .38); }
.metronoom.loopt { border-color: var(--groen); }

/* De balk waaraan je hem versleept. */
.metronoom-kop {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0 -1rem;
  padding: .55rem 1rem .5rem;
  border-bottom: 1px solid var(--rand);
  border-radius: 13px 13px 0 0;
  background: var(--achtergrond-2);
  cursor: grab;
}
.metronoom-kop:active { cursor: grabbing; }
.metronoom-titel { font-size: .85rem; font-weight: 700; }
.metronoom-sluit {
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--tekst-zacht);
  cursor: pointer;
}
.metronoom-sluit:hover { background: var(--rand); color: var(--tekst); }

/* De bolletjes die met de tel meelopen. */
.metronoom-tel {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: .35rem;
  min-height: 1.1rem;
  padding-top: .3rem;
}
.telbol {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--rand);
  transition: transform .06s, background .06s;
}
.telbol-accent { width: .85rem; height: .85rem; }
.telbol-half   { width: .72rem; height: .72rem; }
.telbol.nu               { background: var(--groen); transform: scale(1.25); }
.telbol-accent.nu        { background: var(--nieuw); }
.telbol-half.nu          { background: var(--herfst); }

/* Het tempo. */
.metronoom-tempo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.metronoom-getal { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.metronoom-getal strong { font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.metronoom-getal span { font-size: .7rem; color: var(--tekst-zacht); }
.metronoom-stap {
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  border: 1px solid var(--rand);
  border-radius: 50%;
  background: var(--achtergrond-2);
  color: var(--tekst);
  cursor: pointer;
}
.metronoom-stap:hover { border-color: var(--groen); color: var(--groen-donker); }

#tempo-schuif { width: 100%; padding: 0; border: none; background: none; accent-color: var(--groen); cursor: pointer; }

/* De maatsoort. */
.metronoom-maat { display: flex; flex-direction: row; gap: .3rem; }
.maatknop {
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  flex: 1 1 0;
  padding: .4rem 0;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--vlak);
  color: var(--tekst-zacht);
  cursor: pointer;
}
.maatknop:hover { border-color: var(--groen); }
.maatknop.actief { background: var(--groen); border-color: var(--groen); color: var(--groen-tekst); }

.metronoom-start { width: 100%; }

@media (max-width: 34rem) {
  .metronoom { width: min(14rem, calc(100vw - 2rem)); }
  .metronoom-open span:last-child { display: none; }
  .metronoom-open { right: 3.2rem; padding: .35rem .5rem; }
}


/* ---------- Eén les groot in beeld ---------- */
.groot-regels { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1.5rem; }
.groot-regel {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: .8rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rand);
}
.groot-regel:last-child { border-bottom: none; }
.groot-regel dt {
  flex: 0 0 7rem;
  margin: 0;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tekst-zacht);
}
.groot-regel dd { margin: 0; flex: 1 1 auto; font-size: 1.05rem; overflow-wrap: anywhere; }
.groot-regel dd strong { font-size: 1.15rem; }

.groot-notitie {
  margin: 0 0 1.4rem;
  padding: .9rem 1.1rem;
  border-radius: 12px;
  background: var(--achtergrond-2);
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.groot-melding {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}
.groot-melding-af     { background: var(--rood-zacht); color: var(--rood); }
.groot-melding-nieuw  { background: var(--nieuw-vlak); color: var(--nieuw); }
.groot-melding-wijzig { background: var(--groen-zacht); color: var(--groen-donker); }

@media (max-width: 34rem) {
  .groot-regel { flex-direction: column; gap: .15rem; }
  .groot-regel dt { flex: 0 0 auto; }
}

/* De lesregel laat merken dat je erop kunt klikken. */
.lesrij-open { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.lesrij-open:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(35, 49, 47, .1); }
.lesrij-open:focus-visible { outline: 2.5px solid var(--groen); outline-offset: 3px; }


/* ============================================================
   Het merk: Tutoplan
   ============================================================ */

/* Op het beginscherm: beeldmerk boven, naam eronder, met een notenbalk
   die naar de zijkanten uitvloeit. */
.merk {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin-bottom: clamp(1.6rem, 4.5vw, 3rem);
  color: var(--tekst);
}
.merk-teken {
  width: clamp(3.2rem, 9vw, 4.4rem);
  height: auto;
  fill: currentColor;
}
/* Zo breed als de naam zelf, zodat de notenbalk eronder klopt. */
.merk-woordvak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  width: fit-content;
}
.merk-naam {
  margin: 0;
  font-size: clamp(2.2rem, 7.5vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1;
}
.merk-balk {
  /* Net iets breder dan de naam, dat oogt rustiger dan strak gelijk. */
  width: 116%;
  margin-left: -8%;
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

/* In de gekleurde balk: beeldmerk en naam naast elkaar. */
.merk-klein {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .45rem;
  color: #fff;
}
.merk-klein-teken {
  width: clamp(1.5rem, 3.6vw, 1.95rem);
  height: auto;
  fill: currentColor;
  flex: 0 0 auto;
}
.merk-klein-naam {
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- Tabbalk: wat rechts hoort te staan ---------- */
.tab-rechts { margin-left: auto; }

/* Op een smal scherm is er geen ruimte om iets naar rechts te duwen.
   Dan lopen ze gewoon achter elkaar door en breken ze netjes af. */
@media (max-width: 62rem) {
  .tab-rechts { margin-left: 0; }
}
.tab-uitloggen { opacity: .8; }
.tab-uitloggen:hover { opacity: 1; }





/* ============================================================
   Rondleiding
   ============================================================ */

.rondleiding {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

/* Het gat: een doorzichtig vlak met een enorme schaduw eromheen. Zo
   licht precies één ding op en verdwijnt de rest naar de achtergrond. */
.rondleiding-gat {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(16, 26, 24, .62);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
  pointer-events: none;
}

.rondleiding-ballon {
  position: fixed;
  z-index: 81;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.1rem 1.2rem 1.1rem;
  border-radius: 14px;
  background: var(--vlak);
  color: var(--tekst);
  box-shadow: 0 16px 44px rgba(16, 26, 24, .4);
  pointer-events: auto;
}
.rondleiding-ballon h3 { margin: 0; font-size: 1.05rem; }
.rondleiding-ballon p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--tekst-zacht); }
.rondleiding-stap {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--groen);
}
.rondleiding-knoppen {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .7rem;
}

/* Het pijltje dat naar het aangewezen ding wijst. */
.rondleiding-pijl {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  margin-left: -9px;
}
.rondleiding-pijl.omhoog {
  top: -9px;
  border-bottom: 9px solid var(--vlak);
}
.rondleiding-pijl.omlaag {
  bottom: -9px;
  border-top: 9px solid var(--vlak);
}

/* ---------- Feedback ---------- */
.feedback-dank {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  border-radius: 10px;
  background: var(--groen-zacht);
  color: var(--groen-donker);
  font-weight: 600;
  font-size: .9rem;
}
.melding-feedback { border-color: var(--groen); background: var(--groen-zacht); }
.feedback-bericht {
  margin: .5rem 0 0;
  padding: .6rem .8rem;
  border-left: 3px solid var(--groen);
  border-radius: 0 8px 8px 0;
  background: var(--vlak);
  font-size: .9rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Uitleg onder de kop bij Leerlingaccounts. */
.accounts-uitleg { margin: -.4rem 0 1.1rem; }

/* ============================================================
   Huiswerk dat binnenkort verdwijnt
   ============================================================ */

.wegblok-kop {
  padding: .9rem 1rem;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--rood) 40%, var(--vlak));
  background: color-mix(in srgb, var(--rood) 6%, var(--vlak));
}
.wegblok-titel {
  margin: 0 0 .25rem;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rood);
}
.wegblok-uitleg {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--tekst-zacht);
}

/* De opdracht zelf krijgt een duidelijke waarschuwingskleur. Deze weegt
   zwaarder dan het gele "Nieuw!"-jasje, vandaar de sterkere selectors. */
.item.bijna-weg,
.lijst-leerling .item.bijna-weg,
.lijst-leerling .item.bijna-weg:has(.badge-nieuw) {
  border-color: var(--rood);
  background: var(--rood-zacht);
}
.lijst-leerling .item.bijna-weg::before,
.lijst-leerling .item.bijna-weg:has(.badge-nieuw)::before { background: var(--rood); }

.wegmerk {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: .15rem .5rem;
  margin: -.15rem 0 .75rem;
  /* Ruim aan de zijkanten: bij een ronde vorm loopt de tekst anders
     tegen de bocht aan. Breekt de tekst over twee regels, dan is een
     zachte hoek rustiger dan een volledig ronde. */
  padding: .5rem 1.15rem;
  border-radius: 14px;
  background: var(--rood);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}
.wegmerk-datum { font-weight: 500; opacity: .8; }

/* De vraag om een opdracht opnieuw te krijgen. */
.terugvraag { margin-top: .8rem; }
.terugvraag .knop-stil {
  border-color: color-mix(in srgb, var(--rood) 40%, var(--vlak));
  color: color-mix(in srgb, var(--rood) 80%, var(--tekst));
  background: var(--vlak);
  white-space: normal;
  text-align: left;
}
.terugvraag .knop-stil:hover { border-color: var(--rood); color: var(--rood); }
.terugvraag .knop-stil.gevraagd,
.terugvraag .knop-stil:disabled {
  border-color: var(--rand);
  color: var(--tekst-zacht);
  cursor: default;
  opacity: 1;
}
.melding-verzoek { border-color: var(--nieuw); background: var(--nieuw-vlak); }
.melding-verzoek .feedback-bericht { border-left-color: var(--nieuw); }

/* ============================================================
   Telefoon: alles groot genoeg voor een vinger
   ============================================================ */
@media (pointer: coarse), (max-width: 34rem) {
  /* Een vinger heeft ongeveer 44 pixels nodig om betrouwbaar te raken.
     Rondjes en vinkjes zelf blijven klein, maar het label eromheen
     wordt een ruim aanraakvlak. */
  .keuze {
    min-height: 2.75rem;
    padding: .35rem .1rem;
  }
  .keuze > input,
  .vinkje > input {
    width: 1.3rem;
    height: 1.3rem;
  }
  .vinkje { min-height: 2.75rem; }

  /* Links en knoppen in het huiswerk. */
  .linkchip,
  .groot-knop,
  .knop-stil,
  .maatknop { min-height: 2.75rem; }
  .linkchip { padding: .6rem 1rem; }

  /* Het kruisje van een venster is een klein doel; maak het ruimer. */
  .venster-sluit { width: 2.9rem; height: 2.9rem; }
  .metronoom-sluit { width: 2.4rem; height: 2.4rem; }
  .link-weg { width: 2.6rem; height: 2.6rem; }

  /* Invoervelden: iOS zoomt in als de tekst kleiner is dan 16px. */
  input, select, textarea { font-size: 1rem; }

  /* De kleine knoppen mogen op een telefoon wat forser. */
  .knop.klein,
  .knop-blokkeer,
  .knop-gevaar.klein,
  .accountrij-open,
  .tab { min-height: 2.75rem; }
  .knop.klein { padding: .6rem 1rem; }

  /* Zonder muis is er geen hover: het plusje om iets in te plannen
     moet dus gewoon altijd te zien zijn. */
  .roosterdag-plus {
    opacity: 1;
    min-height: 2.5rem;
    border-style: solid;
    color: var(--groen-donker);
  }
}


/* ============================================================
   Telefoon: het menu met drie streepjes
   ============================================================ */

/* Op een breed scherm staan de tabbladen gewoon naast elkaar en is deze
   knop nergens voor nodig. Op een telefoon past die rij niet meer, dus
   verhuizen de tabbladen naar een venstertje dat je open- en dichtklapt. */
.menuknop {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
}
.menuknop:hover { background: rgba(255, 255, 255, .24); border-color: #fff; }

.menustreep {
  display: block;
  width: 1.3rem;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .2s ease, opacity .2s ease;
}

/* Staat het menu open, dan worden de drie streepjes een kruisje. */
.menuknop.open .menustreep:nth-child(1) { transform: translateY(.44rem) rotate(45deg); }
.menuknop.open .menustreep:nth-child(2) { opacity: 0; }
.menuknop.open .menustreep:nth-child(3) { transform: translateY(-.44rem) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .menustreep { transition: none; }
}

@media (max-width: 46rem) {
  .menuknop { display: flex; }

  /* Het uitklapvenster zelf: de tabbladen onder elkaar, binnen de
     gekleurde kopbalk. Dichtgeklapt is hij nul hoog en niet bereikbaar. */
  .app-kop .tabs {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .15rem;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    border-top: 0 solid rgba(255, 255, 255, .22);
    transition: max-height .28s ease, padding .28s ease, visibility .28s;
  }
  .app-kop .tabs.open {
    max-height: 32rem;
    padding: .6rem 0 .9rem;
    visibility: visible;
    border-top-width: 1px;
  }

  /* Elk tabblad wordt een brede regel waar je makkelijk op tikt. */
  .app-kop .tabs .tab {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-align: left;
    font-size: 1.02rem;
    padding: .8rem .9rem;
    border-bottom: none;
    border-left: 3px solid transparent;
    border-radius: 0 10px 10px 0;
  }
  .app-kop .tabs .tab.actief {
    border-bottom-color: transparent;
    border-left-color: #fff;
    background: rgba(255, 255, 255, .16);
  }

  /* Uitloggen hoort niet bij de rest: die zetten we onderaan, met een
     lijntje ertussen. */
  .app-kop .tabs .tab-uitloggen {
    margin-top: .6rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .25);
    border-left-color: transparent;
    border-radius: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .app-kop .tabs { transition: none; }
  }
}


/* ============================================================
   Telefoon: het beginscherm staat wat hoger in beeld
   ============================================================ */

/* Op een groot scherm staat het beginscherm precies in het midden. Op
   een telefoon is dat onhandig: je kijkt naar beneden en het
   toetsenbord duwt de invulvelden weg. Daarom begint het hoger. */
@media (max-width: 46rem) {
  .scherm.midden {
    min-height: 100svh;
    justify-content: flex-start;
    padding-top: clamp(1.75rem, 7vh, 4rem);
  }
}