/* AAIIU beheer.
   Het menu blijft het diepe groen van de moskee; het werkblad ernaast is licht,
   want daar staan tabellen, formulieren en grafieken en die lezen op wit nu
   eenmaal rustiger. Alles met de hand: geen framework, geen bouwstap. */

:root {
  /* het menu */
  --zij: #0d2621;
  --zij-op: #12332c;
  --zij-lijn: rgba(210, 232, 221, .16);
  --zij-inkt: #f4ecd8;
  --zij-dof: rgba(244, 236, 216, .58);

  /* het werkblad */
  --grond: #f4f2ea;
  --vlak: #ffffff;
  --vlak-2: #faf8f2;
  --lijn: #e4e0d4;
  --lijn-sterk: #d2ccbb;
  --inkt: #17231e;
  --inkt-2: #4f5c55;
  --inkt-3: #7d887f;

  --goud: #e1b646;
  --goud-diep: #8a6400;
  --groen: #1c5e4f;

  /* kleuren die gegevens dragen. De statuskleuren staan vast en gaan altijd
     samen met een vorm en een woord, nooit kleur alleen: rood en groen zijn
     voor een deel van de lezers niet uit elkaar te houden. */
  --ok: #0ca30c;
  --let-op: #fab219;
  --erg: #d03b3b;
  --serie-1: #2a78d6;
  --serie-1-zacht: #cde2fb;

  /* Vlakken en randen die een stand aangeven. Als token, want in het donkere
     thema hebben ze andere waarden nodig dan een lichtere tint van hetzelfde. */
  --ok-vlak: #f4fbf4;   --ok-lijn: #c7e7c7;   --ok-inkt: #14650f;
  --let-vlak: #fffaee;  --let-lijn: #f0dda6;  --let-inkt: #7a5300;
  --erg-vlak: #fff5f4;  --erg-lijn: #f0c3c3;  --erg-inkt: #93231f;
  --weg-vlak: #fdf3f3;
  --code-inkt: #1c5e4f;
  /* Rood als vlak (een staaf, een balkje) blijft de statuskleur; rood als tekst
     heeft een eigen waarde nodig, want op een donkere ondergrond haalt de
     statuskleur geen 4,5:1. */
  --erg-tekst: #b3261e;

  --radius: 14px;
  --schaduw: 0 1px 2px rgba(23, 35, 30, .05), 0 8px 24px rgba(23, 35, 30, .05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--grond);
  color: var(--inkt);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--goud-diep); }
.laden { padding: 40px; color: var(--inkt-3); }

/* ----------------------------------------------------------------- inloggen */

.inlog-wrap {
  min-height: 100vh;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 90% 0%, rgba(225, 182, 70, .16), transparent 55%), var(--zij);
}
.inlog {
  width: min(420px, 100%);
  padding: 28px 26px 24px;
  border-radius: 22px;
  background: var(--zij-op);
  border: 1px solid var(--zij-lijn);
  color: var(--zij-inkt);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.inlog h1 { margin: 0 0 4px; font-size: 22px; }
.inlog .onder { margin: 0 0 22px; color: var(--zij-dof); font-size: 14px; }
.inlog .veld > label { color: var(--zij-dof); }
/* Met [type] erbij, anders wint de algemene veldstijl verderop in dit bestand
   (even specifiek, maar die staat later) en zijn de velden wit op groen. */
.inlog input[type] {
  background: rgba(255, 255, 255, .07);
  border-color: var(--zij-lijn);
  color: var(--zij-inkt);
}
.inlog input[type]:focus { border-color: var(--goud); box-shadow: 0 0 0 3px rgba(225, 182, 70, .25); }
.inlog input[type]::placeholder { color: rgba(244, 236, 216, .4); }
.inlog .vink { color: var(--zij-inkt); }
.inlog .fout { color: #ffb4ac; }

/* ------------------------------------------------------------------ raamwerk */

.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

.zij {
  background: var(--zij);
  color: var(--zij-inkt);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* De kop van het menu: het merk, en op een telefoon de knop ernaast. */
.balk { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.menuknop { display: none; }
.menuknop svg { width: 22px; height: 22px; flex: none; }
.menuknop .kruis { display: none; }
.zij.open .menuknop .strepen { display: none; }
.zij.open .menuknop .kruis { display: block; }

.merk { display: flex; align-items: center; gap: 11px; padding: 4px 10px 20px; }
.merk b { font-size: 16px; letter-spacing: .02em; display: block; }
.merk small { display: block; font-size: 12px; color: var(--zij-dof); }
.merk svg { width: 34px; height: 34px; flex: none; }

.zij nav { display: flex; flex-direction: column; gap: 2px; }
.zij a {
  display: block; padding: 10px 12px; border-radius: 10px;
  color: var(--zij-inkt); text-decoration: none; font-size: 14.5px;
}
.zij a:hover { background: rgba(255, 255, 255, .06); }
.zij a[aria-current="page"] { background: rgba(225, 182, 70, .18); color: var(--goud); font-weight: 600; }

.zij .voet { margin-top: auto; padding: 14px 12px 0; font-size: 12.5px; color: var(--zij-dof); }
.zij .voet b { display: block; color: var(--zij-inkt); font-size: 14px; font-weight: 600; }

.hoofd { padding: 26px 30px 64px; max-width: 1240px; width: 100%; }

.kop { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; }
.kop h1 { margin: 0; font-size: 26px; letter-spacing: -.015em; }
.kop p { margin: 0; color: var(--inkt-3); font-size: 14px; }

/* -------------------------------------------------------------------- kaart */

.kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  margin: 0 0 16px;
  box-shadow: var(--schaduw);
}
.kaart > h2 { margin: 0 0 4px; font-size: 15px; letter-spacing: .01em; }
.kaart > h2 + .uitleg { margin: 0 0 14px; }
.uitleg { color: var(--inkt-3); font-size: 13.5px; margin: 0 0 12px; }
.kaartkop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kaartkop h2 { margin: 0 0 10px; font-size: 15px; }
.kaartkop .bij { color: var(--inkt-3); font-size: 12.5px; }

/* --------------------------------------------------------------- kerngetallen */

.raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0 0 16px; }

.tegel {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 15px 16px 14px;
  box-shadow: var(--schaduw);
  position: relative;
}
.tegel b { display: block; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tegel span { display: block; color: var(--inkt-3); font-size: 13px; margin-top: 5px; }
.tegel .bij { display: block; margin-top: 8px; font-size: 12.5px; color: var(--inkt-2); }
.tegel.let-op { border-color: var(--let-lijn); background: linear-gradient(180deg, var(--let-vlak), var(--vlak)); }
.tegel.erg { border-color: var(--erg-lijn); background: linear-gradient(180deg, var(--erg-vlak), var(--vlak)); }
.tegel.ok { border-color: var(--ok-lijn); background: linear-gradient(180deg, var(--ok-vlak), var(--vlak)); }

/* ------------------------------------------------------------------ grafieken */

/* Staafjes per dag. Dunne marks, 4px ronde uiteinden aan de basislijn, 2px lucht
   ertussen, en de waarde alleen bij de uitschieters in plaats van boven elke
   staaf. */
.kolommen { display: flex; align-items: flex-end; gap: 2px; height: 132px; margin: 6px 0 0; }
.kolom { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; position: relative; }
.kolom i {
  display: block; min-height: 2px; border-radius: 4px 4px 0 0;
  background: var(--serie-1); transition: filter .12s;
}
.kolom.leeg i { background: var(--serie-1-zacht); }
.kolom:hover i { filter: brightness(1.15); }
.kolom-as { display: flex; gap: 2px; margin-top: 7px; }
.kolom-as span { flex: 1 1 0; text-align: center; font-size: 10.5px; color: var(--inkt-3); overflow: hidden; white-space: nowrap; }

/* Liggende staven: naam, baan, getal. De baan toont de grens als streepje. */
.staven { display: flex; flex-direction: column; gap: 9px; }
.staaf { display: grid; grid-template-columns: minmax(90px, 1.2fr) 3fr auto; gap: 12px; align-items: center; font-size: 13.5px; }
.staaf .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staaf .baan { position: relative; height: 12px; background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 7px; }
.staaf .vul { position: absolute; inset: 1px auto 1px 1px; border-radius: 6px; min-width: 4px; background: var(--serie-1); }
.staaf .vul.ok { background: var(--ok); }
.staaf .vul.let-op { background: var(--let-op); }
.staaf .vul.erg { background: var(--erg); }
.staaf .grens { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--inkt-3); border-radius: 2px; }
.staaf .waarde { font-variant-numeric: tabular-nums; color: var(--inkt-2); white-space: nowrap; }

/* Eén balk met de verdeling erin. Elk deel heeft een eigen kleur én een eigen
   vorm en woord in de legenda, want kleur alleen is niet voor iedereen te
   onderscheiden. */
.verdeling { display: flex; gap: 2px; height: 14px; margin: 4px 0 12px; }
.verdeling i { display: block; border-radius: 4px; min-width: 4px; }
.verdeling i.ok { background: var(--ok); }
.verdeling i.let-op { background: var(--let-op); }
.verdeling i.erg { background: var(--erg); }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--inkt-2); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda .vorm { font-size: 11px; line-height: 1; }
.legenda .vorm.ok { color: var(--ok); }
.legenda .vorm.let-op { color: var(--let-op); }
.legenda .vorm.erg { color: var(--erg); }
.legenda b { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- velden */

.veld { margin: 0 0 13px; }
.veld > label { display: block; font-size: 13px; color: var(--inkt-2); margin: 0 0 5px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=search], input[type=datetime-local],
select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  color: var(--inkt); background: var(--vlak);
  border: 1px solid var(--lijn-sterk); border-radius: 10px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--goud-diep); box-shadow: 0 0 0 3px rgba(225, 182, 70, .22); }
textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
select { appearance: none; }
input::placeholder, textarea::placeholder { color: var(--inkt-3); }

.rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.rij > * { flex: 1 1 170px; }
.rij > .smal { flex: 0 0 auto; }

.vink { display: flex; align-items: center; gap: 10px; margin: 0 0 11px; font-size: 14px; cursor: pointer; }
.vink input { width: 18px; height: 18px; accent-color: var(--groen); flex: none; }

/* ------------------------------------------------------------------- knoppen */

button, .knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 8px 15px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--inkt); background: var(--vlak);
  border: 1px solid var(--lijn-sterk); border-radius: 10px;
  cursor: pointer; text-decoration: none;
}
button:hover { background: var(--vlak-2); border-color: var(--inkt-3); }
button:disabled { opacity: .5; cursor: default; }
button.primair { background: linear-gradient(180deg, #f2d27e, #e8b84b); color: #2a2003; border-color: #d9a92f; }
button.primair:hover { filter: brightness(1.04); }
button.weg { color: var(--erg-tekst); border-color: var(--erg-lijn); }
button.weg:hover { background: var(--weg-vlak); border-color: var(--erg); }
button.klein { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.knoprij { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }

/* ------------------------------------------------------------------ tabellen */

.tabelwrap { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--inkt-3); font-weight: 700; padding: 0 10px 8px; white-space: nowrap;
}
td { padding: 10px; border-top: 1px solid var(--lijn); vertical-align: top; }
tr.let-op td { background: var(--let-vlak); }
tr.uit td { color: var(--inkt-3); }
td .sub { display: block; color: var(--inkt-3); font-size: 12.5px; }
td.acties { white-space: nowrap; text-align: right; }
td.acties button { margin-left: 6px; }
code.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
  letter-spacing: .06em; color: var(--code-inkt); background: var(--vlak-2);
  border: 1px solid var(--lijn); border-radius: 6px; padding: 1px 6px;
}

.merkje {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--vlak-2); color: var(--inkt-2); border: 1px solid var(--lijn);
}
.merkje.ok { background: var(--ok-vlak); color: var(--ok-inkt); border-color: var(--ok-lijn); }
.merkje.let-op { background: var(--let-vlak); color: var(--let-inkt); border-color: var(--let-lijn); }
.merkje.uit { background: var(--erg-vlak); color: var(--erg-inkt); border-color: var(--erg-lijn); }

.fout { color: var(--erg-tekst); font-size: 13.5px; margin: 8px 0 0; min-height: 1px; }
.leegmelding { color: var(--inkt-3); font-size: 14px; padding: 10px 2px; }

.lijstje { list-style: none; margin: 0; padding: 0; }
.lijstje li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--lijn); }
.lijstje li:first-child { border-top: 0; }
.lijstje .wanneer { flex: 0 0 118px; color: var(--inkt-3); font-size: 13px; }
.lijstje .wat strong { display: block; font-size: 14px; }
.lijstje .wat span { display: block; color: var(--inkt-3); font-size: 13px; }

/* --------------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); z-index: 90;
  max-width: 90vw; padding: 11px 20px; border-radius: 999px; font-size: 14px;
  color: var(--zij-inkt); background: var(--groen); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none;
}
.toast.zien { opacity: 1; transform: translate(-50%, 0); }
.toast[hidden] { display: none; }
.toast.mis { background: #8f2f26; }

/* ------------------------------------------------------------------ CMS-lijst */

.tekstrij { border-top: 1px solid var(--lijn); padding: 12px 0; }
.tekstrij:first-of-type { border-top: 0; }
.tekstrij .waar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 7px; }
.tekstrij .waar code { font-size: 11.5px; color: var(--inkt-3); background: none; border: 0; padding: 0; }
.tekstrij textarea { min-height: 62px; }
.tekstrij .knoprij { margin-top: 8px; }
.groepkop {
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  margin: 22px 0 2px; padding: 0 2px;
}
.groepkop h3 { margin: 0; font-size: 14px; }
.groepkop span { color: var(--inkt-3); font-size: 12.5px; }
.voorbeeld { width: 100%; height: 460px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak); }

/* ------------------------------------------------------------------ smal scherm */

@media (max-width: 880px) {
  .shell { grid-template-columns: 1fr; }

  /* Het menu is hier een balk bovenaan die blijft plakken bij het scrollen. Wat
     eronder hoort komt pas in beeld als je hem opent; anders sta je op een
     telefoon eerst naar een scherm vol menu te kijken. */
  .zij {
    position: sticky; top: 0; z-index: 40; height: auto;
    padding: 10px 14px; gap: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  }
  .zij .merk { padding: 0; }
  .zij .merk svg { width: 28px; height: 28px; }

  .menuknop {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 8px 13px; border-radius: 999px;
    color: var(--zij-inkt); background: rgba(255, 255, 255, .07);
    border: 1px solid var(--zij-lijn); font-size: 14px; font-weight: 600;
  }
  .menuknop:hover { background: rgba(255, 255, 255, .12); }

  .zij nav, .zij .voet { display: none; }
  .zij.open nav {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 4px; margin-top: 12px;
  }
  .zij.open nav a { padding: 12px; }
  .zij.open .voet {
    display: block; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--zij-lijn);
  }

  .hoofd { padding: 18px 14px 60px; }
  .kop h1 { font-size: 22px; }
  .staaf { grid-template-columns: 1fr auto; }
  .staaf .baan { grid-column: 1 / -1; }
}

/* De tooltip bij een staaf. Eén element voor de hele pagina. */
.viz-tip {
  position: absolute; z-index: 80; transform: translate(-50%, -100%);
  padding: 5px 10px; border-radius: 8px; font-size: 12.5px; white-space: nowrap;
  color: var(--zij-inkt); background: var(--zij); box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  pointer-events: none;
}
.viz-tip[hidden] { display: none; }

/* Twee panelen naast elkaar op een breed scherm, onder elkaar op een smal. */
.duo { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; }
.duo > .kaart { margin: 0; }
@media (max-width: 980px) { .duo { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- venster met de pagina */

.tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.tabs button { border-radius: 999px; }
.tabs button[aria-pressed="true"] {
  background: var(--groen); color: var(--zij-inkt); border-color: var(--groen);
}

.werkbalk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.werkbalk .scheiding { width: 1px; height: 24px; background: var(--lijn); margin: 0 4px; }
.werkbalk button[aria-pressed="true"] {
  background: var(--groen); color: var(--zij-inkt); border-color: var(--groen);
}

.frame-wrap {
  background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 12px;
  padding: 14px; display: flex; justify-content: center; overflow: auto;
}
.frame-wrap iframe {
  width: 100%; height: 660px; border: 0; border-radius: 8px; background: var(--vlak);
  box-shadow: 0 2px 14px rgba(23, 35, 30, .12);
}
.frame-wrap.telefoon iframe {
  width: 390px; max-width: 100%; height: 780px; border-radius: 26px;
  border: 8px solid #101a16; box-shadow: 0 10px 30px rgba(23, 35, 30, .28);
}
.frame-wrap.tablet iframe { width: 834px; max-width: 100%; height: 720px; }

/* Kop boven een blok binnen een scherm dat meerdere onderwerpen bundelt. */
.sectiekop {
  margin: 4px 2px 10px; font-size: 13px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--inkt-3);
}
.sectiekop + div > .kaart:first-child, .sectiekop + div > .raster:first-child { margin-top: 0; }

/* Een Android-toestel heeft rechtere hoeken en een smallere rand dan een
   iPhone; genoeg om te zien welke weergave je voor je hebt. */
.frame-wrap.telefoon.android iframe {
  width: 412px; height: 800px; border-radius: 16px; border-width: 6px; border-color: #1c1c1c;
}

/* ==========================================================================
   DONKER THEMA

   Eén laag met andere waarden voor dezelfde tokens; de rest van dit bestand
   verandert niet mee. Welk thema er geldt zet index.html al vóór het eerste
   schilderen, uit wat je zelf koos en anders uit de instelling van je toestel.

   De kleuren die gegevens dragen zijn niet zomaar omgedraaid: de statuskleuren
   blijven dezelfde vier (ze halen op deze ondergrond alle drie ruim 3:1) en de
   staafkleur is de donkere stap van dezelfde blauwe reeks. Vorm en woord staan
   er nog steeds bij, dus ook zonder kleur is te lezen wat er staat.
   ========================================================================== */

:root[data-thema="donker"] {
  --zij: #08150f;
  --zij-op: #0f2419;
  --zij-lijn: rgba(210, 232, 221, .14);

  --grond: #0e1a16;
  --vlak: #16241f;
  --vlak-2: #1c2f28;
  --lijn: rgba(214, 236, 225, .13);
  --lijn-sterk: rgba(214, 236, 225, .26);
  --inkt: #eaf1ec;
  --inkt-2: #b9c6bf;
  --inkt-3: #8b9a92;

  --goud-diep: #e8c46a;
  --groen: #2c6a58;
  --schaduw: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .32);

  --serie-1: #3987e5;
  --serie-1-zacht: #24405f;

  --ok-vlak: #14301f;   --ok-lijn: #2c5a3a;   --ok-inkt: #86d69a;
  --let-vlak: #33290f;  --let-lijn: #6a5624;  --let-inkt: #f3c95e;
  --erg-vlak: #33191a;  --erg-lijn: #6b3232;  --erg-inkt: #ef9d97;
  --weg-vlak: #33191a;
  --code-inkt: #e8c46a;
  --erg-tekst: #ef9d97;

  color-scheme: dark;
}

/* Op een donker werkblad lijkt het menu erin over te lopen; een randje houdt de
   twee uit elkaar. */
:root[data-thema="donker"] .zij { border-right: 1px solid var(--lijn); }
@media (max-width: 880px) {
  :root[data-thema="donker"] .zij { border-right: 0; border-bottom: 1px solid var(--lijn); }
}

/* Het venster met de site erin houdt zijn eigen achtergrond; een lichte rand
   eromheen zou als een witte lijst om een donkere pagina staan. */
:root[data-thema="donker"] .frame-wrap { background: #0a1410; }

/* De knop om te wisselen: net iets rustiger dan de andere knoppen in het menu. */
.thema-knop { width: 100%; justify-content: flex-start; gap: 9px; }
.thema-knop span:first-child { font-size: 14px; line-height: 1; }

/* ---------------------------------------------------- tabellen op een telefoon

   Vier of vijf kolommen passen niet op een telefoon; dan wordt het schuiven en
   priegelen. Met `stapel` wordt elke rij daar een kaartje met de velden onder
   elkaar. De kolomkoppen vallen weg: elk veld draagt zijn eigen tekst al bij
   zich. */

@media (max-width: 720px) {
  table.stapel, table.stapel tbody, table.stapel tr, table.stapel td { display: block; width: 100%; }
  table.stapel thead { display: none; }
  /* Zonder deze regel wint `display:block` hierboven van het hidden-attribuut en
     staat het wachtwoordvak bij elk account open. */
  table.stapel tr[hidden] { display: none; }
  table.stapel tr {
    border: 1px solid var(--lijn); border-radius: 12px;
    padding: 12px 13px; margin: 0 0 10px; background: var(--vlak-2);
  }
  table.stapel tr.let-op { background: var(--let-vlak); }
  table.stapel tr.ww-rij { background: none; border-style: dashed; }
  table.stapel td { border-top: 0; padding: 5px 0; }
  table.stapel td:empty { display: none; }
  table.stapel td.acties { text-align: left; padding-top: 8px; }
  table.stapel td.acties button { margin: 0 8px 8px 0; }
  /* De vinkjes met rechten onder elkaar in plaats van in een rij die alle
     kanten op breekt. */
  table.stapel .rij { flex-direction: column; align-items: stretch; gap: 2px; }
  /* In een kolom slaat de flex-basis van 170px op de hoogte, en dan staat er een
     gat tussen het veld en de knop eronder. */
  table.stapel .rij > * { flex: 0 0 auto; }
  table.stapel .vink.smal { flex: 1 1 auto; }
  .tabelwrap { margin: 0; }
}