/* /ict/ (v3): alleen wat deze pagina nodig heeft bovenop style.css. De opbouw is die van /leerling/: rol-held,
   momenten met stappen en één groot toestel, daarna Wat kan het verder. Alle maten in de schermen in em, zoals in
   style.css, zodat de letters met het toestel meegroeien. Kleuren alleen uit de tokens: zo klopt licht en donker. */

/* ---------- Opening: dezelfde kolommen als /leerling/, maar een laptop in plaats van een telefoon. Met 100cqi/60
   (zoals in een moment) werd de tekst in deze smallere kolom 8 px; nu minstens 12 px, en het scherm groeit mee. */
.ict-held-beeld .toestel--laptop { max-width: 640px; }
@media (min-width: 640px) {
  .ict-held-beeld .scherm--laptop { aspect-ratio: auto; font-size: clamp(12px, 100cqi / 42, 14px); }
}
.ict-grid--held { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ---------- Laptopschermen van de momenten: twee kolommen, bovenaan uitgelijnd */
.ict-grid { flex: 1; align-items: start; align-content: start; }
.ict-grid--zomer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ict-grid--koppel { grid-template-columns: minmax(0, 1fr) 19em; }
.ict-grid--inlees { grid-template-columns: 18.5em minmax(0, 1fr); }
.ict-grid--rechten { grid-template-columns: 17em minmax(0, 1fr); }
.ict-grid--log { grid-template-columns: minmax(0, 1fr) 18em; }
.ict-grid--export { grid-template-columns: minmax(0, 1fr) 16em; }
.ict-tussenkop { margin-top: .5em; }
.ict-grid .s-rij { padding: .6em 0; }
.ict-grid .s-rij .s-label { flex: none; }
.ict-actie { display: flex; align-items: center; gap: .9em; margin-top: .25em; }

/* Augustus: Aanbevolen wordt gekozen (stap 3). Zonder JS staat het eindbeeld er meteen. */
.ict-segment { max-width: 22em; }
.ict-segment .ict-keuze { transition: background-color 240ms var(--zacht), color 240ms var(--zacht); }
.ict-segment .ict-keuze.is-actief, html:not(.js) .ict-segment .ict-keuze { background: var(--s-donker); color: var(--s-op-donker); }

/* 07:50 inloggen: het scherm van de school, dan de code, dan binnen */
.ict-schoolkop { display: flex; align-items: center; gap: .75em; margin-top: .25em; }
.ict-schoolkop > span:last-child { display: flex; flex-direction: column; gap: .1em; }
.ict-schoolkop small { color: var(--s-grijs); font-size: .8125em; }
.ict-schoolkop b { font-size: 1.75em; letter-spacing: -.02em; line-height: 1.15; }
.ict-schoolteken { width: 2.6em; height: 2.6em; border-radius: .7em; display: grid; place-items: center; flex: none; background: var(--s-donker); color: var(--s-op-donker); font-weight: 700; font-size: .875em; letter-spacing: .02em; }
.ict-inlogkeus { gap: .6em; }
.ict-codeblad { padding-bottom: 2em; }
.ict-codeblad-in { display: flex; flex-direction: column; gap: .7em; }
.ict-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4em; margin: .3em 0 .1em; }
.ict-code span { display: grid; place-items: center; height: 2.6em; border-radius: .7em; background: var(--s-grond); box-shadow: inset 0 0 0 1px var(--s-lijn); font-size: 1.25em; font-weight: 700; }
.ict-binnen { position: absolute; inset: 0; z-index: 6; padding: 3.6em 1.125em 5.5em; background: var(--s-grond); display: flex; flex-direction: column; gap: .875em; }
.ict-sessie { text-align: center; }

/* 10:05 inlezen: vier tegels op een rij, de knop en de nieuwe ouders */
.ict-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; }
.ict-tegels .s-tegel { padding: .7em .75em; }
.ict-tegels .s-tegel b { font-size: 1.75em; }
.ict-uitleg { margin-top: .2em; }
.ict-nieuwe-ouders { margin-top: .2em; }

/* 11:40 wie mag wat: een rol met zijn rechten in woorden */
.ict-persoon { display: flex; align-items: center; gap: .7em; }
.ict-persoon > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ict-persoon b { font-size: 1.0625em; }
.ict-persoon small { color: var(--s-grijs); font-size: .8125em; }
.ict-avatar { width: 2.6em; height: 2.6em; background: var(--s-accent-zacht); color: var(--s-accent-tekst); }
.ict-recht { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: .3em 1em; flex-wrap: wrap; padding: .55em .5em; margin: 0 -.5em; border-radius: .6em; border-top: 1px solid var(--s-lijn); font-size: .9375em; }
.ict-recht b { font-weight: 600; }
.ict-recht span { color: var(--s-grijs); font-size: .9333em; }
.ict-recht--nee span { color: var(--s-rood); font-weight: 600; }
.ict-geweigerd { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-top: .3em; padding: .7em .85em; border-radius: .875em; background: var(--s-rood-zacht); font-size: .875em; }
.ict-geweigerd > span:first-child { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.ict-geweigerd b { color: var(--s-rood); }
.ict-geweigerd .s-label { flex: none; }

/* 16:00 logboek: het zoekveld wordt gevuld */
.ict-zoek { color: var(--s-tekst); font-weight: 600; }

/* 16:05 exporteren: negen tabellen, die bij de export een vinkje krijgen */
.ict-tabellen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; margin-top: .2em; }
.ict-tabel { position: relative; display: flex; flex-direction: column; gap: .05em; padding: .55em .7em .55em 2.2em; border-radius: .75em; background: var(--s-grond); font-size: .8125em; color: var(--s-grijs); }
.ict-tabel b { color: var(--s-tekst); font-size: 1.15em; }
.ict-tabel::before { content: ""; position: absolute; left: .7em; top: .8em; width: 1.05em; height: 1.05em; border-radius: 50%; border: 2px solid var(--s-lijn); background: var(--s-paneel); box-sizing: border-box; transition: background-color 240ms var(--zacht), border-color 240ms var(--zacht); }
.ict-tabel::after { content: ""; position: absolute; left: 1.08em; top: .98em; width: .26em; height: .5em; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 240ms var(--veer); }
.ict-tabel.is-mee::before, html:not(.js) .ict-tabel::before { background: var(--s-accent); border-color: var(--s-accent); }
.ict-tabel.is-mee::after, html:not(.js) .ict-tabel::after { transform: rotate(45deg) scale(1); }
.ict-voortgang { max-width: 16em; }
.ict-voortgang i { transform: none; width: 100%; border-radius: inherit; }
html.beweeg .toneel .ict-voortgang i.lv-nog { transform: scaleX(0); }

/* ---------- Smal (kaartvorm, < 640 px): een uitsnede van het scherm op 14 px, liever dan alles op 8 px.
   Waar twee panelen samen te hoog worden, toont de telefoon per stap het paneel dat die stap vertelt. */
@media (max-width: 639px) {
  .ict-grid--held .s-paneel:not(.kern) { display: none; }
  .ict-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ict-tegels .s-tegel b { font-size: 24px; }
  .ict-tabellen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ict-actie { flex-wrap: wrap; }
  .ict-voortgang { flex-basis: 100%; max-width: none; }
  .ict-geweigerd { flex-direction: column; align-items: flex-start; }
  html.beweeg .toneel--zomer:not([data-stap="1"]) .ict-jaar,
  html.beweeg .toneel--zomer[data-stap="1"] .ict-regels,
  html.beweeg .toneel--rechten:not([data-stap="1"]) .ict-account,
  html.beweeg .toneel--rechten[data-stap="1"] .ict-rol,
  html.beweeg .toneel--logboek[data-stap="1"] .ict-zoekpaneel,
  html.beweeg .toneel--logboek:not([data-stap="1"]) .ict-logpaneel,
  html.beweeg .toneel--export:not([data-stap="3"]) .ict-eerder,
  html.beweeg .toneel--export[data-stap="3"] .ict-alles { display: none; }
}

/* ---------- Wat kan het verder: de telling per stand, rustig op één regel */
.telblok { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 32px; max-width: 920px; }
.telblok > div { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 8px; }
.telblok dt { font-size: 15px; color: var(--grijs); }
.telblok dd { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.telblok [data-soort="gebouwd"] dd { color: var(--accent-tekst); }

/* ---------- Wat nog niet echt gekoppeld is: een lijst met haarlijnen, naam links en uitleg rechts */
.ict-eerlijk { margin-top: 48px; max-width: 920px; border-top: 1px solid var(--lijn); }
.ict-eerlijk > div { display: grid; gap: 4px 32px; padding: 20px 0; border-bottom: 1px solid var(--lijn); }
.ict-eerlijk dt { font-weight: 600; font-size: 17px; }
.ict-eerlijk dd { margin: 0; color: var(--grijs); }
@media (min-width: 760px) { .ict-eerlijk > div { grid-template-columns: 13em minmax(0, 1fr); } }

/* Inlezen (10:05) op de telefoon: in stap 1 de twee bestanden die stap 1 noemt, daarna de controle. Nooit een kaart
   met alleen een knop. De tegels staan onder elkaar per twee, met het getal in zijn geheel. */
@media (max-width: 639px) {
  html.beweeg .toneel--inlezen[data-stap="1"] .ict-verandert, html.beweeg .toneel--inlezen:not([data-stap="1"]) .ict-bestanden { display: none; }
  html.beweeg .toneel--inlezen:not([data-stap="1"]) .ict-verandert { animation: lv-op 480ms var(--zacht) both; }
  .ict-tegels .s-tegel { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; }
}
/* Inloggen (07:50): het inlogscherm staat in het midden van de telefoon, zoals een echt inlogscherm */
[data-scherm="inloggen"] .scherm { justify-content: center; padding-bottom: 3.6em; }
[data-scherm="inloggen"] .ict-schoolkop { margin-bottom: .5em; }
.ict-geweigerd small, .ict-geweigerd .s-label { font-size: max(10px, .85em); }