:root {
  /* Kleuren en lettertype komen uit huisstijl.css (eerst geladen). */
  --nacht: var(--ww-nacht);
  --kaart: var(--ww-vlak);
  --kaart-hover: var(--ww-vlak);
  --lijn: var(--ww-lijn);
  --tekst: var(--ww-tekst);
  --gedempt: var(--ww-gedempt);
  --amber: var(--ww-amber);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--ww-font);
  color: var(--tekst);
  background: var(--ww-achtergrond);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 16px;
}

header.kop, main > header { margin-bottom: 32px; }

h1 {
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere; /* een lange titel (een e-mailadres) breekt af op een gsm */
}

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.tegel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--kaart);
  box-shadow: 0 1px 2px rgba(16, 29, 54, 0.05);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.tegel:hover {
  transform: translateY(-3px);
  background: var(--kaart-hover);
  border-color: var(--amber);
  box-shadow: 0 10px 30px -16px rgba(16, 29, 54, 0.35);
}

.tegel:focus-visible {
  outline: 2px solid var(--ww-focus);
  outline-offset: 0;
  box-shadow: var(--ww-focus-rand);
  transition: none; /* de focusrand meteen tonen, niet laten infaden */
}

.icoon {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 14px;
}

/* Het getal op een tegel (src/teller.js): een rode bol op het icoon, en
   dezelfde boodschap voluit onder de tekst, voor wie de bol niet ziet. */
.icoonvak { position: relative; display: block; }
.teller {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 2px solid var(--kaart);
  border-radius: 12px;
  background: var(--ww-rood);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.nieuw {
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ww-rood);
}

.tekst { display: flex; flex-direction: column; min-width: 0; }

.naam {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.omschrijving {
  margin-top: 3px;
  font-size: 14px;
  color: var(--gedempt);
}

.adres {
  margin-top: 10px;
  font-family: var(--ww-mono);
  font-size: 12px;
  color: var(--gedempt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pijl {
  font-size: 20px;
  color: var(--gedempt);
  transition: transform 0.18s ease, color 0.18s ease;
}
.tegel:hover .pijl { transform: translateX(4px); color: var(--nacht); }

footer {
  padding: 24px 16px 32px;
  text-align: center;
  font-size: 12px;
  color: var(--gedempt);
}
footer a { color: inherit; }

/* Leestekst, zoals /privacy */
main.tekst { max-width: 640px; }
main.tekst h2 { font-size: 17px; margin: 28px 0 8px; }
main.tekst p, main.tekst li { line-height: 1.5; }
main.tekst ul { padding-left: 20px; margin: 0; }
main.tekst li { margin: 6px 0; }

@media (max-width: 400px) {
  .tegels { grid-template-columns: 1fr; }
  .tegel { padding: 18px; gap: 14px; }
  .icoon { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .tegel, .pijl { transition: none; }
  .tegel:hover { transform: none; }
}

/* ---------- Portaal: login, startpagina met gebruiker, beheer ---------- */

a { color: var(--ww-blauw); }
/* Focusrand op links (HUISSTIJL.md, "Focus"); in de kopband regelt huisstijl.css het. */
main a:focus-visible, footer a:focus-visible {
  outline: 2px solid var(--ww-focus);
  outline-offset: 0;
  box-shadow: var(--ww-focus-rand);
}

main.smal { max-width: 440px; padding-top: 10vh; }
/* Beheer gebruikt de volledige breedte, met de rand van de kopband
 * (HUISSTIJL.md, "Paginabreedte"). Startpagina en Privacy blijven gecentreerd. */
body.breed main { max-width: none; padding: 48px 24px; }
@media (max-width: 600px) { body.breed main { padding: 40px 16px; } }
@media (max-width: 360px) { body.breed main { padding: 40px 12px; } }
/* Binnen die breedte: leesbare regels, velden niet breder dan nodig. */
body.breed p.klein { max-width: 72ch; }
body.breed textarea { max-width: 900px; }

.kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}


button, .knop {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  border: 1px solid var(--nacht);
  border-radius: 10px;
  background: var(--nacht);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .knop:hover { background: var(--ww-nacht-2); }
button:focus-visible, .knop:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.tabs a:focus-visible, nav.filter a:focus-visible, .tabelvak:focus-visible {
  outline: 2px solid var(--ww-focus);
  outline-offset: 0;
  box-shadow: var(--ww-focus-rand);
}
.knop.zacht {
  background: var(--ww-vlak);
  color: var(--tekst);
  border-color: var(--ww-veldrand);
}
.knop.zacht:hover { background: var(--ww-hover); }
/* Aan/uit-knoppen even breed, zodat ze niet verspringen (HUISSTIJL.md, "Knoppen"). */
.knop.schakel { width: 140px; text-align: center; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.knoppen .knop { min-width: 140px; text-align: center; }

button.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ww-blauw);
  font-weight: 500;
  font-size: 14px;
  text-decoration: underline;
}

.melding {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--kaart);
}
.melding.fout { border-color: var(--ww-rood-rand); background: var(--ww-rood-licht); }

.klein { font-size: 13px; color: var(--gedempt); }

form.dev { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--lijn); display: grid; gap: 12px; }

label { display: grid; gap: 6px; font-size: 14px; color: var(--gedempt); }
label.vink { display: flex; align-items: center; gap: 8px; }
input[type="text"], input[type="email"], input[type="url"], select, textarea {
  font: inherit;
  font-size: 15px;
  padding: 9px 12px;
  border: 1px solid var(--ww-veldrand);
  border-radius: 10px;
  background: var(--ww-vlak);
  color: var(--tekst);
  min-width: 0;
}
textarea { width: 100%; font-family: var(--ww-mono); font-size: 13px; margin-bottom: 12px; }
form.rij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
p.klein + form.rij { margin-top: 14px; }
form.tegeltekst { margin-bottom: 14px; }
p.klein + form.tegeltekst { margin-top: 18px; }
form.tegeltekst label { flex: 0 1 480px; }
form.tegeltekst .hint { flex-basis: 100%; margin-top: -6px; }
form.manifest label { margin: 14px 0 6px; }

h2 { margin: 40px 0 14px; font-size: 19px; font-weight: 650; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a {
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--gedempt);
  text-decoration: none;
  font-size: 14px;
}
.tabs a:hover { color: var(--tekst); }
.tabs a[aria-current="page"] { background: var(--nacht); color: #fff; }

/* Tabellen: vaste breedte per kolom (HUISSTIJL.md, "Tabellen en filters"), zodat
 * de kolommen niet verspringen als er een lange naam of een lang logregel bij
 * komt, of als je een andere gebruiker opent. Breedte per kolomkop via een
 * klasse op de th; kolommen zonder klasse delen wat overblijft gelijk.
 * Lange tekst loopt door op een volgende regel (overflow-wrap), een kolomkop
 * wordt afgekapt met "…" en heeft de volledige naam in title. */
table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 16px; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lijn); vertical-align: top; overflow-wrap: anywhere; }
th { color: var(--gedempt); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* De eerste cel van een rij (naam) is een rijkop voor schermlezers, maar ziet
 * eruit als een gewone cel. */
th[scope="row"] { color: var(--tekst); font-weight: 400; font-size: 14px; white-space: normal; overflow: visible; text-overflow: clip; }
td select { width: 100%; max-width: 360px; }
/* Een tabel staat los op de pagina: de tekst van de eerste kolom op de lijn van
 * de titel erboven (HUISSTIJL.md, "Uitlijning"). Niet in de handleiding, daar
 * staan tabellen op een kaart. */
main:not(.hl) :is(th, td):first-child { padding-left: 0; }

/* Gebruikers: Gebruiker en Functie vast en dicht bij elkaar, Functie apart van
 * de applicaties met een lijn rechts. De app-kolommen delen de rest gelijk;
 * een rol breekt nooit, dus de tabel wordt nooit smaller dan de langste rol
 * ("Applicatiebeheerder", ongeveer 159px met de rand) per app-kolom nodig heeft
 * (apps-N = aantal apps). 160px, zodat vijf apps passen op 1366px. */
th.kol-gebruiker { width: 230px; }
th.kol-functie { width: 180px; }
th.kol-actie { width: 100px; }
th.functie, td.functie { border-right: 1px solid var(--ww-veldrand); }
table.gebruikers td:not(:first-child) { overflow-wrap: normal; white-space: nowrap; }
table.apps-1 { min-width: calc(510px + 1 * 160px); }
table.apps-2 { min-width: calc(510px + 2 * 160px); }
table.apps-3 { min-width: calc(510px + 3 * 160px); }
table.apps-4 { min-width: calc(510px + 4 * 160px); }
table.apps-5 { min-width: calc(510px + 5 * 160px); }
table.apps-6 { min-width: calc(510px + 6 * 160px); }
table.apps-7 { min-width: calc(510px + 7 * 160px); }
table.apps-8 { min-width: calc(510px + 8 * 160px); }
/* Gebruiker bewerken, Toegang */
th.kol-applicatie { width: 240px; }
@media (max-width: 600px) { th.kol-applicatie { width: 45%; } }
/* Links */
th.kol-link { width: 360px; }
/* Smaller dan ±900px: Link smaller, zodat Functies niet afgekapt wordt. */
@media (max-width: 900px) { th.kol-link { width: 240px; } }
th.kol-volgorde { width: 120px; }
/* Links per categorie in Beheer: een tussenkop per categorie */
tr.cattussen th { padding: 22px 12px 8px; color: var(--tekst); font-size: 14px; font-weight: 650; border-bottom: 1px solid var(--ww-veldrand); }
@media (max-width: 600px) { table.stapel tr.cattussen th { display: block; padding: 18px 0 6px; } }
table.categorieen { max-width: 760px; }
form.categorie-nieuw { display: flex; gap: 10px; max-width: 760px; margin-top: 4px; }
form.categorie-nieuw label { flex: 0 1 480px; }
form.categorie-nieuw input { width: 100%; }
div.met-nr { display: flex; gap: 12px; }
div.met-nr .nr { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--ww-lijn); color: var(--tekst); font-size: 13px; font-weight: 600; display: grid; place-items: center; }
span.pijlen { display: flex; gap: 6px; }
.catkop span.pijlen, .links.ordenen span.pijlen { gap: 4px; }
form.pijl { display: contents; }
button.pijl { min-width: 36px; min-height: 36px; padding: 0; font-size: 16px; background: var(--kaart); color: var(--tekst); border: 1px solid var(--ww-veldrand); }
button.pijl:hover { background: var(--ww-hover); }
button.pijl:disabled { color: var(--ww-veldrand); background: transparent; cursor: default; }
nav.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
nav.filter .klein { margin-right: 6px; }
nav.filter a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ww-veldrand); color: var(--tekst); text-decoration: none; font-size: 14px; }
nav.filter a:hover { background: var(--ww-hover); }
nav.filter a[aria-current="page"] { background: var(--nacht); border-color: var(--nacht); color: #fff; }
/* Applicaties */
th.kol-app { width: 34%; }
th.kol-aantal { width: 110px; }
th.kol-schakel { width: 160px; }
/* Logboek */
th.kol-tijd { width: 112px; }
th.kol-wie { width: 22%; }
th.kol-actie-log { width: 170px; }
th.kol-doel { width: 20%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Gsm: een brede tabel (table.stapel) wordt per rij een blok, met de kolomnaam
 * (data-label) voor elke waarde. Zo hoeft niemand horizontaal te scrollen. De
 * eerste cel (naam) staat zonder label bovenaan. */
@media (max-width: 600px) {
  table.stapel thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  }
  table.stapel, table.stapel tbody, table.stapel tr, table.stapel td, table.stapel th[scope="row"] { display: block; width: 100%; }
  table.stapel tr { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
  table.stapel td, table.stapel th[scope="row"] { border: 0; padding: 3px 0; }
  table.stapel td[data-label] { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  table.stapel td[data-label]::before { content: attr(data-label); color: var(--gedempt); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.stapel td[data-label]:empty { display: none; }
  table.stapel { min-width: 0; }
  table.stapel td.functie { border-right: 0; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--lijn); }
  table.gebruikers td:not(:first-child) { white-space: normal; }
}
/* Uitgeschakeld of gedeactiveerd: gedempte tekst, de status staat er ook in
 * woorden bij. Geen opacity: die trok ook links en knoppen onder 4,5:1 (P3). */
tr.inactief th, tr.inactief td:not(.waarschuwing) { color: var(--gedempt); }
td.waarschuwing { color: var(--ww-amber-tekst); }
td.waarschuwing .klein { display: block; white-space: normal; }
code { font-family: var(--ww-mono); font-size: 12px; word-break: break-all; }
body.breed main { overflow-x: auto; position: relative; }
/* Een brede tabel scrolt in zijn eigen vak, en een .sr-only erin blijft
 * binnen dat vak in plaats van de pagina te verbreden (P7). */
.tabelvak { overflow-x: auto; position: relative; margin-bottom: 16px; }
.tabelvak > table { margin-bottom: 0; }

img.icoon { object-fit: cover; }
.icoon.leeg {
  display: grid;
  place-items: center;
  background: var(--nacht);
  color: var(--ww-amber);
  font-weight: 700;
  font-size: 22px;
}

/* Nuttige links in mappen (sinds 18 oktober 2026): op de startpagina de
 * hoofdmappen als kaarten, kleiner dan een tegel, met een zoekveld erboven.
 * Elke map heeft een eigen pagina met links een boom, zoals de bladwijzers
 * van de browser. */
.nuttig .kopregel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 48px 0 14px; }
.nuttig .kopregel h2 { margin: 0; }
.nuttig .kopregel a { font-size: 14px; }
.nuttig .kopregel .acties { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }

/* Het mapje: oranje enkel als vulling, de rand donker genoeg op wit (1.4.11). */
.mapicoon { width: 22px; height: 22px; flex: none; fill: var(--ww-amber-licht); stroke: var(--ww-amber-tekst); stroke-width: 1.4; }

.zoeklinks { display: flex; gap: 8px; margin: 0 0 16px; }
.zoeklinks input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 9px 12px; border: 1px solid var(--ww-veldrand); border-radius: 10px; background: var(--ww-vlak); color: var(--tekst); }
.zoeklinks input:focus-visible { outline: 2px solid var(--ww-focus); outline-offset: 1px; box-shadow: var(--ww-focus-rand); }
.zoekresultaat:not(:empty) { margin-bottom: 24px; }
.zoekresultaat > p { margin-bottom: 8px; }

.mapkaarten { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 12px; }
.mapkaarten li { display: flex; min-width: 0; }
.mapkaarten a, .mapkaarten .kaart { position: relative; flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 12px 14px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); color: var(--tekst); text-decoration: none; transition: border-color 0.18s ease; }
.mapkaarten a:hover { border-color: var(--amber); }
.mapkaarten a:focus-visible, ul.lijst > li > a:focus-visible, .zijboom a:focus-visible { outline: 2px solid var(--ww-focus); outline-offset: 0; box-shadow: var(--ww-focus-rand); }
.mapkaarten .mapicoon { width: 28px; height: 28px; }
.mapkaarten .tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mapkaarten .naam { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.mapkaarten .klein { font-size: 13px; color: var(--gedempt); }
.mapkaarten .pijl, ul.lijst .pijl { color: var(--gedempt); font-size: 22px; line-height: 1; }
@media (max-width: 600px) { .mapkaarten { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mapkaarten a { transition: none; } }

/* Een lijst mappen en links onder elkaar, zoals in de bladwijzers. */
ul.lijst { list-style: none; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
ul.lijst > li + li { border-top: 1px solid var(--lijn); }
ul.lijst > li > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 52px; color: var(--tekst); text-decoration: none; }
ul.lijst > li > a:hover { background: var(--ww-hover); }
ul.lijst .tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
ul.lijst .naam { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
ul.lijst .omschrijving { font-size: 13px; color: var(--gedempt); overflow-wrap: anywhere; }
ul.lijst .adres { font-size: 12px; color: var(--gedempt); font-family: var(--ww-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.lijst .uit { color: var(--gedempt); font-size: 16px; }
.favicoon { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; background: #E8EDF7; color: var(--nacht); font-size: 12px; font-weight: 700; }
ul.lijst li.met-knop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-right: 14px; }
ul.lijst li.met-knop > .tekst { padding: 10px 0 10px 14px; flex: 1 1 200px; }
ul.lijst li.met-knop form, ul.lijst .knoppen { margin: 0; gap: 8px; }
@media (max-width: 600px) { ul.lijst li.met-knop { padding: 0 14px 10px 0; } ul.lijst li.met-knop > form, ul.lijst li.met-knop > .knoppen { margin-left: 48px; } }
.wacht ul.lijst { border-left: 4px solid var(--amber); }
.wacht h2 { display: flex; align-items: baseline; gap: 8px; font-size: 17px; margin: 0 0 4px; }
.wacht h2 .aantal { font-size: 13px; font-weight: 500; color: var(--gedempt); }
.wacht > p.klein { margin-bottom: 8px; }

/* De pagina van een map: boom links, inhoud rechts. Op een gsm valt de boom
 * weg; het pad bovenaan brengt je terug. */
.mapweergave { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
body.breed main.mapweergave { max-width: 1200px; margin: 0 auto; overflow-x: visible; }
.mapinhoud { min-width: 0; max-width: 820px; }
.mapinhoud > header { margin-bottom: 20px; }
.mapinhoud h1, .mapkop h2 { display: flex; align-items: center; gap: 12px; }
.mapinhoud h1 .mapicoon { width: 36px; height: 36px; }
.mapinhoud header .klein { margin: 6px 0 12px; }
.zijboom { position: sticky; top: 16px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 12px 8px; }
.zijkop { font-size: 13px; font-weight: 650; color: var(--gedempt); padding: 0 8px 6px; }
.zijkop a { color: inherit; }
.zijboom ul { list-style: none; }
.zijboom ul ul { margin-left: 18px; }
.zijboom a { display: flex; align-items: center; gap: 6px; padding: 6px 8px; min-height: 32px; border-radius: 8px; color: var(--tekst); text-decoration: none; font-size: 14px; }
.zijboom a:hover { background: var(--ww-hover); }
.zijboom a[aria-current="page"] { background: #E8EDF7; font-weight: 650; box-shadow: inset 3px 0 0 var(--nacht); }
.zijboom .pijltje { width: 12px; flex: none; color: var(--gedempt); font-size: 12px; }
.zijboom .mapicoon { width: 18px; height: 18px; }
.zijboom > p:last-child { padding: 10px 8px 2px; }
.kruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; margin-bottom: 12px; }
.kruimels li + li::before { content: "›"; content: "›" / ""; color: var(--gedempt); margin-right: 4px; }
.kruimels [aria-current] { color: var(--gedempt); }
details.eigen { margin-top: 8px; }
@media (max-width: 800px) {
  .mapweergave { grid-template-columns: 1fr; gap: 0; }
  .mapweergave .zijboom { display: none; }
  .mapinhoud h1 .mapicoon { width: 28px; height: 28px; }
}

/* Nakijken van een link: smal, zoals een formulier. */
main.map { max-width: 760px; }
main.map .terug, main > p.terug { margin: 0 0 12px; font-size: 14px; }
main.map header .uitleg { margin: 8px 0 18px; }

/* Beheer, Links: wat op een beheerder wacht, met een amberen rand links. */
.te-keuren .knoppen { margin: 0; gap: 8px; }
.te-keuren .knoppen form { margin: 0; }
.te-keuren table th[scope="row"] { border-left: 4px solid var(--amber); padding-left: 10px; }
@media (min-width: 601px) {
  .te-keuren td:last-child { width: 1%; white-space: nowrap; }
  .te-keuren .knoppen { flex-wrap: nowrap; justify-content: flex-end; }
}
@media (max-width: 600px) { .te-keuren .knoppen { margin-top: 8px; } }
.te-keuren { margin-bottom: 28px; }
.te-keuren h2 { display: flex; align-items: baseline; gap: 8px; }
.te-keuren h2 .aantal { font-size: 13px; font-weight: 500; color: var(--gedempt); }
.mapweergave.beheer { grid-template-columns: 280px minmax(0, 1fr); }
.mapweergave.beheer .mapinhoud { max-width: 900px; }
.mapkop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.mapkop h2 { margin: 0; font-size: 24px; }
.knoppen.rij { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.maplijst .metico { display: flex; align-items: center; gap: 10px; }
.maplijst .pijlen { display: inline-flex; gap: 4px; }

/* Volgorde aanpassen: de hoofdmappen met greep en pijltjes. */
.ordenbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 16px; border-radius: var(--radius); background: var(--kaart); border: 1px solid var(--lijn); }
.ordenbalk p { flex: 1 1 280px; margin: 0; font-size: 14px; color: var(--gedempt); }
.ordenbalk form { display: contents; }
.mapkaarten.ordenen { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.mapkaarten.ordenen li { cursor: grab; }
.mapkaarten.ordenen .kaart { padding-left: 38px; border-style: dashed; }
.mapkaarten.ordenen .greep { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gedempt); font-size: 16px; letter-spacing: -3px; }
.mapkaarten.ordenen .pijlen { display: inline-flex; gap: 4px; }
.mapkaarten.ordenen li.sleept .kaart { opacity: 0.5; border-style: solid; border-color: var(--ww-nacht); }
@media (max-width: 400px) { .mapkaarten.ordenen { grid-template-columns: 1fr; } }

/* Beheer, Links */
p.uitleg { max-width: 72ch; margin-bottom: 18px; }
.linkform { display: grid; gap: 14px; max-width: 480px; }
.linkform input[type="text"], .linkform input[type="url"] { width: 100%; }
fieldset.functies { border: 0; display: grid; gap: 8px; }
fieldset.functies legend { font-size: 14px; color: var(--gedempt); margin-bottom: 8px; }
fieldset.functies label.vink { color: var(--tekst); font-size: 15px; }
.linkform .knoppen { margin-top: 4px; }
form.rij + p.klein { margin-top: 12px; }
p.klein + p.klein { margin-top: 6px; }
.linkform select { width: 100%; max-width: none; }
/* Op een gsm een groter vinkje (P22). */
@media (max-width: 600px) { input[type="checkbox"] { width: 20px; height: 20px; } }

/* Bevestigen voor iets dat niet terug te draaien is (formulieren.js): een
 * smalle kaart in het midden. */
dialog.bevestig { margin: auto; width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--kaart); color: var(--tekst); box-shadow: 0 10px 30px -16px rgba(16, 29, 54, 0.35); }
dialog.bevestig::backdrop { background: rgba(16, 29, 54, 0.45); }
dialog.bevestig h2 { margin: 0 0 8px; font-size: 19px; }
dialog.bevestig p { font-size: 15px; line-height: 1.5; color: var(--tekst); }
dialog.bevestig .knoppen { margin-top: 20px; }

/* Handleiding (handleiding.css): de inhoud links blijft staan bij het scrollen,
 * en dat kan niet binnen een main die zelf horizontaal scrolt. */
body.breed main.hl { overflow: visible; }

/* Een blok dat open- en dichtklapt (Link toevoegen op de pagina van een map). */
details.toevoegen { border: 1px solid var(--lijn); border-radius: 10px; padding: 4px 16px; margin: 0 0 24px; background: var(--kaart); }
details.toevoegen[open] { padding-bottom: 16px; }
details.toevoegen > summary { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; font-weight: 650; list-style: none; cursor: pointer; }
details.toevoegen > summary::-webkit-details-marker { display: none; }
/* Het pijltje is versiering: lege alt-tekst, zodat het niet voorgelezen wordt (P17). */
details.toevoegen > summary::before { content: "▾"; content: "▾" / ""; color: var(--gedempt); width: 14px; }
details.toevoegen:not([open]) > summary::before { content: "▸"; content: "▸" / ""; }
details.toevoegen > summary:focus-visible { outline: 2px solid var(--ww-focus); outline-offset: 2px; box-shadow: var(--ww-focus-rand); border-radius: 6px; }