/* Ludendo v3 · /privacy-en-veiligheid/. Alleen wat deze pagina extra nodig heeft; tokens, toestellen, dagbalk,
   momenten en de stappenmotor staan in /style.css. Schermen in em (zoals de s-klassen daar), de site in px.
   Waarom een eigen bestand: tegelijk werken er anderen aan style.css, zo zitten we elkaar niet in de weg. */

/* ============================================================ schermen: kleine bouwstenen */
.s-midden { text-align: center; }
.s-cijfer { font-style: normal; font-weight: 700; font-size: 1.25em; letter-spacing: -.01em; }
.s-afwijk--eerst { padding-top: 0; border-top: 0; }
.s-pijl { flex: none; width: .6em; height: .6em; border-top: 2px solid var(--s-grijs); border-right: 2px solid var(--s-grijs); transform: rotate(45deg); margin-right: .3em; }
.s-meerrij { padding-block: .35em; }
.s-meerrij .s-rij { border-top: 0; }

/* Logboek op de telefoon (opening): tijd links, de zin ernaast */
.s-logpaneel { gap: 0; padding-block: .5em; }
.s-logrij { display: grid; grid-template-columns: 2.9em minmax(0, 1fr); gap: .5em; padding: .7em 0; border-top: 1px solid var(--s-lijn); }
.s-logrij:first-child { border-top: 0; }
.s-logrij time { color: var(--s-grijs); font-size: .875em; font-weight: 600; padding-top: .05em; }
.s-logrij > span { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.s-logrij b { font-size: .875em; font-weight: 600; line-height: 1.3; }
.s-logrij small { color: var(--s-grijs); font-size: .8125em; }
.s-logrij .s-label { align-self: flex-start; }

/* 07:50: het inlogscherm ligt als eigen scherm over het beginscherm (stap 1 en 2) */
.s-dek { position: absolute; inset: 0; z-index: 6; background: var(--s-grond); padding: 4.4em 1.25em 2em; display: flex; flex-direction: column; gap: .9em; --weg: translateY(-1.2em); --d: 420ms; }
.s-inlogmerk { display: flex; flex-direction: column; align-items: flex-start; gap: .35em; margin-bottom: .6em; }
.s-inlogmerk .s-teken { width: 2.4em; height: 2.4em; margin-bottom: .4em; }
.s-inlogmerk b { font-size: 1.75em; letter-spacing: -.02em; line-height: 1.15; }
.s-inlogmerk small { color: var(--s-grijs); font-size: .875em; }
.s-inlogveld { display: flex; flex-direction: column; gap: .25em; padding: .7em .9em; border-radius: .875em; background: var(--s-paneel); border: 1px solid var(--s-lijn); }
.s-inlogveld small { color: var(--s-grijs); font-size: .8125em; font-weight: 600; }
.s-inlogveld span { font-size: .9375em; }
.s-dek > .s-knop { margin-top: .3em; }
.s-codeblad { padding-bottom: 2em; gap: .9em; align-content: start; --van: translateY(100%); --d: 520ms; --do: 120ms; }
.s-codeblad > *, .s-weigerblad > * { grid-area: auto; }
.s-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4em; }
.s-code span { display: grid; place-items: center; height: 2.6em; border-radius: .7em; background: var(--s-grond); border: 1px solid var(--s-lijn); font-size: 1.125em; font-weight: 700; }
.s-inlogstand { gap: .35em; }
.s-knoppen--twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-knoppen--twee .s-knop { padding: 0 .6em; }

/* 10:12: de rechtentabel vult het beheerscherm */
.s-rechtenpaneel, .s-logboekpaneel { flex: 1; gap: .8em; min-height: 0; }
.s-rechtenkop { display: flex; align-items: baseline; justify-content: space-between; gap: .4em 1em; flex-wrap: wrap; }
.s-tabel--rechten { font-size: .9375em; table-layout: fixed; }
.s-tabel--rechten th { white-space: normal; vertical-align: bottom; line-height: 1.2; hyphens: manual; }
.s-tabel--rechten th:first-child { width: 15%; }
.s-tabel--rechten td { padding: .5em .5em; line-height: 1.25; font-weight: 400; overflow-wrap: normal; }
.s-tabel--rechten td:first-child { font-weight: 600; }
.s-tabel--rechten td.nee { color: var(--s-grijs); }
.s-tabel--rechten tr { position: relative; }
.s-tabel--rechten tr.is-gekozen td { background: var(--s-accent-zacht); }
.s-tabel--rechten tr.is-gekozen td:first-child { border-radius: .5em 0 0 .5em; }
.s-tabel--rechten tr.is-gekozen td:last-child { border-radius: 0 .5em .5em 0; }
html.beweeg .toneel--rechten tr td { transition: background-color 480ms var(--zacht); }
/* Stap 2: de kolom van de mentor licht op; het paneel ligt rechts over de kolommen erna, niet over die van de mentor */
.toneel--rechten[data-stap="2"] .s-tabel--rechten :is(td, th):nth-child(5) { background: var(--s-accent-zacht); }
.toneel--rechten[data-stap="2"] .s-tabel--rechten th:nth-child(5) { color: var(--s-accent-tekst); border-radius: .5em .5em 0 0; }
.s-zijpaneel--rol { top: 4.4em; width: 17.5em; gap: .5em; }
.s-zijpaneel--rol .s-rij, .s-zijpaneel--log .s-rij { padding-block: .55em; }

/* 10:14: geen toegang */
.s-weigerblad { gap: .7em; padding-bottom: 2.4em; justify-items: start; }
.s-weigerblad .s-bladkop { justify-self: stretch; }
.s-slot { position: relative; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--s-rood-zacht); }
.s-slot::before { content: ""; position: absolute; left: 50%; top: .55em; width: .8em; height: .75em; margin-left: -.4em; border: .16em solid var(--s-rood); border-bottom: 0; border-radius: .45em .45em 0 0; box-sizing: border-box; }
.s-slot::after { content: ""; position: absolute; left: 50%; top: 1.2em; width: 1.25em; height: .95em; margin-left: -.625em; border-radius: .25em; background: var(--s-rood); }
.s-logregel { display: inline-flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: 999px; background: var(--s-label); font-size: .875em; font-weight: 600; }
.s-logregel::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--s-accent-tekst); }

/* 10:18: het logboek met het zijpaneel over Lotte */
.s-logboekpaneel .s-tabel--log { font-size: .9375em; }
.s-logboekpaneel .s-tabel--log td { padding-block: .55em; }
.s-zijpaneel--log .s-logregel { align-self: flex-start; font-size: .8125em; }
.s-logboekpaneel .s-tabel--log td:nth-child(3) .s-label { margin-left: .4em; }
.s-zijpaneel--log { top: 4.6em; width: 24em; gap: .5em; }

/* 16:00: wat er in staat, en exporteren */
.s-grid--gegevens { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; flex: 1; }
.s-grid--gegevens .s-rij .s-stand, .s-grid--gegevens .s-rij .s-label { flex: none; }
.s-grid--gegevens .s-export { gap: .7em; }
.s-grid--gegevens .s-export .s-knop { align-self: flex-start; }
/* Hier is oplichten geen waarschuwing: blauw in plaats van oranje */
.toneel--gegevens .lv-gloed { background: color-mix(in srgb, var(--s-accent) 12%, transparent); }

/* Smal (kaartvorm, < 640 px): de tabel houdt vier kolommen op leesbare grootte; het zijpaneel staat onderaan */
@media (max-width: 639px) {
  .s-tabel--rechten { font-size: 13px; table-layout: auto; }
  .s-tabel--rechten th:first-child { width: auto; }
  .s-tabel--rechten :is(td, th) { padding: 8px 4px; }
  .s-tabel--rechten :is(td, th):first-child { padding-left: 0; }
  .s-zijpaneel--rol, .s-zijpaneel--log { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; }
  .s-grid--gegevens .s-rij { flex-wrap: wrap; }
  .s-rechtenkop { flex-direction: column; }
  /* 16:00: per stap alleen het paneel dat erbij hoort, zodat het hele toestel in beeld past */
  html.beweeg .toneel--gegevens[data-stap="3"] .s-grid--gegevens > .s-paneel:first-child { display: none; }
  html.beweeg .toneel--gegevens:not([data-stap="3"]) .s-grid--gegevens > .s-export { display: none; }
}

/* ============================================================ de site: secties na de dag */
.beloftes { margin-top: 56px; }
.nog-raster { display: grid; gap: 48px 64px; margin-top: 48px; }
@media (min-width: 900px) { .nog-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nog-raster h3 { font-size: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); }
.nog-lijst { list-style: none; }
.nog-lijst li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--lijn); font-size: 16px; line-height: 1.5; }
/* Een open rondje: nog niet gedaan (zoals 'Gepland' en 'Idee' bij de labels, zonder kleur) */
.nog-lijst li::before { content: ""; position: absolute; left: 2px; top: calc(14px + (1.5em - 10px) / 2); width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--grijs); box-sizing: border-box; }
.nog-noot { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--grijs); max-width: 44em; }
.stukken-kop { margin-top: 80px; font-size: 22px; letter-spacing: -0.015em; }
.stukken { list-style: none; margin-top: 24px; border-top: 1px solid var(--lijn); max-width: 920px; }
.stukken li { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--lijn); }
.stukken li > span:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1 1 22em; }
.stukken b { font-size: 17px; font-weight: 600; }
.stukken small { font-size: 15px; color: var(--grijs); }
.stand { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--grijs); }
.stand::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--grijs); background: linear-gradient(90deg, var(--grijs) 50%, transparent 50%); box-sizing: border-box; }
.stand--nog::before { background: none; border-style: dashed; }