/*
 * Brand Manager — het hele stijlblad.
 *
 * Eén bestand, geen framework, geen CDN. De tokens komen uit DESIGN.md ernaast; als je hier iets
 * verandert dat een token raakt, verander het daar mee. De regel die alles bij elkaar houdt:
 * chroom is neutraal, inhoud is gekleurd. Alle verzadiging op het scherm hoort bij een logo of
 * bij een handeling die je niet terug kunt draaien.
 */

:root {
  --blue: #2f73f0;
  --blue-deep: #1e56c4;
  --blue-wash: #eaf1fe;
  --navy: #0b1b3a;
  --navy-soft: #17294f;

  --ink: #0e1729;
  --ink-soft: #4a5568;
  --ink-faint: #6b7688;

  --line: #dde3ec;
  --line-soft: #eaeef4;
  --canvas: #f6f8fb;
  --surface: #ffffff;
  --sunk: #eef1f6;
  --bezel: #8b929e;

  --danger: #b42318;
  --danger-wash: #fdeceb;
  --warn: #a15c07;
  --warn-wash: #fdf3e2;
  --go: #1a7f4b;
  --go-wash: #e7f4ec;

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --s-xxs: 2px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 20px;
  --s-xl: 32px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --zweef: 0 8px 24px rgba(11, 27, 58, .14);
  --vlot: 140ms cubic-bezier(.22, 1, .36, 1);

  /* Benoemde stapelvolgorde, nooit een willekeurig getal. */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-dek: 300;
  --z-dialoog: 310;
  --z-melding: 400;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 .9375rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: .9375rem; }
p { margin: 0 0 var(--s-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-deep); text-decoration-color: color-mix(in srgb, var(--blue-deep) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

.mono { font-family: var(--mono); font-size: .8125rem; }
.zacht { color: var(--ink-faint); }
.klein { font-size: .8125rem; }
.getal { font-variant-numeric: tabular-nums; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-melding);
  background: var(--surface); padding: var(--s-sm) var(--s-md); border-radius: 0 0 var(--r-sm) 0;
}
.overslaan:focus { left: 0; }

/* ── de schil ─────────────────────────────────────────────────────────────────────────── */

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

.zijbalk {
  position: sticky; top: 0; align-self: start;
  display: flex; flex-direction: column; gap: var(--s-lg);
  height: 100vh; padding: var(--s-lg) var(--s-md);
  background: var(--navy); color: #c8d3e6; overflow-y: auto;
}

/* Het logo staat bóven de naam en boven het menu: dit is het huismerk, niet een pictogram
   naast een woord. Zelfde tekening als op de site (assets/logo.svg). */
.merk {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-sm);
  color: #fff; text-decoration: none; font-size: .9375rem; font-weight: 400;
  letter-spacing: -.01em; padding: 0 var(--s-sm);
}
.merk strong { font-weight: 700; }
.merk-logo { width: 44px; height: 44px; border-radius: 10px; display: block; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-beheer { margin-top: auto; padding-top: var(--s-md); border-top: 1px solid rgba(255, 255, 255, .1); }
.menu a {
  display: block; padding: 7px var(--s-sm); border-radius: var(--r-sm);
  color: #c8d3e6; text-decoration: none; font-size: .875rem;
  transition: background var(--vlot), color var(--vlot);
}
.menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu a.aan { background: var(--blue); color: #fff; font-weight: 600; }

.wie { display: flex; flex-direction: column; gap: 2px; padding: var(--s-sm); border-top: 1px solid rgba(255, 255, 255, .1); }
.wie-naam { color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; }
.wie-naam:hover { text-decoration: underline; }
.wie-rol { font-size: .75rem; color: #8fa3c4; }
.wie-uit {
  margin-top: var(--s-xs); align-self: start; padding: 0;
  background: none; border: 0; color: #8fa3c4; font: inherit; font-size: .75rem;
  text-decoration: underline; cursor: pointer;
}
.wie-uit:hover { color: #fff; }

/* Volle breedte. Een leesmaat van 1180px hoort bij lopende tekst; dit is een werkscherm waarin
   je tabellen en tegels naast elkaar wil hebben, en op een breed scherm is een halflege pagina
   verspilde ruimte. Wat wél een leesmaat houdt, houdt hem op zichzelf (zie .leeg p). */
.werkvlak { padding: var(--s-lg) var(--s-xl) var(--s-xl); min-width: 0; }

/* ── paginakop ────────────────────────────────────────────────────────────────────────── */

.paginakop { margin-bottom: var(--s-lg); }
.paginakop-rij { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-md); }
.paginakop-actie { display: flex; gap: var(--s-sm); flex: none; }
.paginakop-onder { margin-top: var(--s-md); }
.bijschrift { margin: var(--s-xs) 0 0; color: var(--ink-soft); font-size: .875rem; }
.terug {
  display: inline-block; margin-bottom: var(--s-xs);
  font-size: .8125rem; color: var(--ink-soft); text-decoration: none;
}
.terug::before { content: "← "; }
.terug:hover { color: var(--ink); }

/* ── meldingen ────────────────────────────────────────────────────────────────────────── */

.melding {
  margin: 0 0 var(--s-md); padding: var(--s-sm) var(--s-md);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: .875rem;
}
.melding-goed { border-color: color-mix(in srgb, var(--go) 35%, transparent); background: var(--go-wash); color: #0f5c35; }
.melding-let-op { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-wash); color: #7a4505; }
.melding-fout { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-wash); color: #8c1b12; }
.melding-info { background: var(--blue-wash); border-color: color-mix(in srgb, var(--blue) 25%, transparent); color: #16408c; }

/* ── knoppen ──────────────────────────────────────────────────────────────────────────── */

.knop, .knop-primair, .knop-gevaar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: .875rem; font-weight: 500; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--vlot), border-color var(--vlot), color var(--vlot);
}
.knop:hover { background: var(--sunk); border-color: #cfd7e3; }
.knop:active { background: #e4e9f1; }

.knop-primair { background: var(--blue); border-color: var(--blue); color: #fff; padding: 7px 14px; font-weight: 600; }
.knop-primair:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.knop-primair:active { background: #1a4aa8; }

.knop-gevaar { background: var(--danger); border-color: var(--danger); color: #fff; padding: 7px 14px; font-weight: 600; }
.knop-gevaar:hover { background: #9a1e14; border-color: #9a1e14; }

.knop-klein { padding: 4px 8px; font-size: .8125rem; }
.knop[disabled], .knop-primair[disabled], .knop-gevaar[disabled],
.knop[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.knop-rij { display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center; }

/* ── panelen ──────────────────────────────────────────────────────────────────────────── */

.paneel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: var(--s-lg);
}
.paneel > h2, .paneel-kop {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-md);
  margin: 0; padding: var(--s-md); border-bottom: 1px solid var(--line-soft);
  font-size: .9375rem;
}
.paneel-lijf { padding: var(--s-md); }
.paneel-lijf > :last-child { margin-bottom: 0; }

.rooster { display: grid; gap: var(--s-lg); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── tabellen ─────────────────────────────────────────────────────────────────────────── */

.tabelraam { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
table.lijst { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.lijst th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--s-sm) var(--s-md); text-align: left; white-space: nowrap;
  background: var(--sunk); color: var(--ink-soft);
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  border-bottom: 1px solid var(--line);
}
table.lijst td { padding: 7px var(--s-md); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.lijst tr:last-child td { border-bottom: 0; }
table.lijst tbody tr:hover { background: #f7f9fc; }
table.lijst tr.gekozen { background: var(--blue-wash); }
table.lijst td.getal, table.lijst th.getal { text-align: right; font-variant-numeric: tabular-nums; }
table.lijst td.krap { width: 1%; white-space: nowrap; }
table.lijst a.rij-link { color: var(--ink); font-weight: 600; text-decoration: none; }
table.lijst a.rij-link:hover { color: var(--blue-deep); text-decoration: underline; }

/* ── merktegel ──────────────────────────────────────────────────────────────────────────
 *
 * De vorm van de app en niet iets eigens: verhouding 1.62, de ronding van een kaart, en het
 * logo 8% van de rand af. Dat is geen opmaak maar de meetlat, want dit is waar je op
 * beoordeelt. `_app.webp` is het logo strak op zijn kleur, zonder marge eromheen: die marge
 * hoort hier, precies zoals de app hem tekent. Zonder dat staat een breed logo tegen de rand
 * en verdrinkt een hoog logo in zijn eigen kleur.
 *
 * De vorm zelf staat verderop bij de werkbank (.cat-tegel); hier alleen de lege variant.
 */

.cat-tegel-leeg {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: .75rem; background: var(--sunk) !important;
}

.tegelrooster { display: grid; gap: var(--s-md); grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.tegelkaart { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.tegelkaart .naam { font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.tegelkaart .id { font-family: var(--mono); font-size: .6875rem; color: var(--ink-faint); word-break: break-all; }
.tegelkaart:hover .naam { color: var(--blue-deep); }

/* ── badges ───────────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block; padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--sunk); color: var(--ink-soft);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.badge-go { background: var(--go-wash); color: #0f5c35; }
.badge-danger { background: var(--danger-wash); color: #8c1b12; }
.badge-warn { background: var(--warn-wash); color: #7a4505; }
.badge-blue { background: var(--blue-wash); color: #16408c; }

.staal { display: inline-flex; align-items: center; gap: 6px; }
.staal i { width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

/* ── formulieren ──────────────────────────────────────────────────────────────────────── */

.veld { display: flex; flex-direction: column; gap: var(--s-xs); margin-bottom: var(--s-md); }
.veld > label { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.veld .hulp { font-size: .8125rem; color: var(--ink-soft); }
.veld .fout { font-size: .8125rem; color: var(--danger); }

/* Elk invoerveld, ook een <input> zonder type-attribuut: dat is de standaardwaarde `text` en die
   viel bij een selector op type buiten de boot, met een vierkant browserveld als gevolg. De
   uitzonderingen hieronder moeten juist hun eigen vorm houden. */
.veld-vorm,
input:not([type]),
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="hidden"]),
select, textarea {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .875rem;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:hover, select:hover, textarea:hover { border-color: #cfd7e3; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue);
}
/* Aanvinken en kiezen blijven van het systeem, alleen in onze kleur. */
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--blue); }
input[type="file"] {
  width: 100%; font-size: .8125rem; color: var(--ink-soft);
  border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 6px 8px; background: var(--surface);
}
textarea { min-height: 96px; resize: vertical; font-family: var(--mono); font-size: .8125rem; line-height: 1.45; }
select { appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234a5568' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; }
/* De kleurkiezer is een staal, geen veld. Zonder deze regels tekent de browser een klein
   gekleurd blokje midden in een grijze knop, met een binnenmarge die per browser verschilt; naast
   de hexvelden en de stalen eronder valt dat uit de toon. Nu vult de kleur zijn eigen vlak. */
/* De kleurkiezer is een staal, geen veld.
 *
 * Het veld zelf tekenen we niet: browsers maken er hun eigen ding van (Chrome zet er tegenwoordig
 * een kleurenwieltje náást het staal, en op knopformaat geperst worden dat twee vlekjes). Het
 * label eromheen ís het staal en draagt de kleur; het veld ligt eroverheen, onzichtbaar, en vangt
 * de klik. Zo ziet het er overal hetzelfde uit als de stalen ernaast. */
.kleurstaal {
  position: relative; display: inline-block; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid rgba(0, 0, 0, .18); cursor: pointer; overflow: hidden;
}
.kleurstaal:hover { border-color: var(--ink-faint); }
.kleurveld:focus + .kleurstaal, .kleurstaal:has(+ .kleurveld:focus) { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Het veld zelf staat bewust niet ónder het staal maar erbuiten.
 *
 * Overlappen met `opacity: 0` ging uit van hoe de browser het veld tekent, en Chrome tekent er
 * tegenwoordig een kleurenwieltje ín. Zo blijft er niets te tekenen op de plek van het staal: het
 * veld staat buiten beeld en het label is er met `for` aan gekoppeld, dus een klik op het staal
 * opent gewoon de kiezer. */
.kleurveld {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* Een veld dat in een knoppenrij staat hoort niet de volle breedte te pakken. */
.knop-rij input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.knop-rij select { width: auto; }
.filters input:not([type="color"]), .filters select { width: auto; }
.filters input[type="search"] { width: 240px; }

.filters { display: flex; flex-wrap: wrap; gap: var(--s-sm); align-items: center; }
.filters input[type="search"] { width: 240px; }
.filters select, .filters input[type="text"] { width: auto; min-width: 130px; }

.vinkje { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; }
.vinkje input { width: auto; }

/* ── paginering ───────────────────────────────────────────────────────────────────────── */

.paginering { display: flex; align-items: center; gap: var(--s-xs); margin-top: var(--s-md); flex-wrap: wrap; }
.paginering-stand { margin-right: auto; color: var(--ink-soft); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.paginering a, .paginering-nu {
  min-width: 30px; padding: 4px 8px; border-radius: var(--r-sm); text-align: center;
  font-size: .8125rem; text-decoration: none;
}
.paginering a { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.paginering a:hover { background: var(--sunk); }
.paginering-nu { background: var(--blue); color: #fff; font-weight: 600; border: 1px solid var(--blue); }
.paginering-gat { color: var(--ink-faint); padding: 0 2px; }

/* ── lege staat ───────────────────────────────────────────────────────────────────────── */

.leeg {
  padding: var(--s-xl); text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.leeg h2 { margin-bottom: var(--s-sm); }
.leeg p { color: var(--ink-soft); max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ── bulkbalk ─────────────────────────────────────────────────────────────────────────── */

.bulkbalk {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-md); flex-wrap: wrap;
  margin-top: var(--s-md); padding: var(--s-md);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--zweef);
}
.bulkbalk .telling { font-weight: 600; }

/* ── dialoog ──────────────────────────────────────────────────────────────────────────── */

dialog {
  border: 0; border-radius: var(--r-md); padding: 0;
  max-width: 460px; width: calc(100% - 2rem);
  box-shadow: var(--zweef); color: var(--ink);
}
dialog::backdrop { background: rgba(11, 27, 58, .38); }
dialog .paneel-lijf { padding: var(--s-lg); }
dialog h2 { margin-bottom: var(--s-sm); }

/* ── inloggen ─────────────────────────────────────────────────────────────────────────── */

.inlograam {
  min-height: 100vh; display: grid; place-items: center; padding: var(--s-lg);
  background: var(--navy);
}
.inlogkaart {
  width: 100%; max-width: 360px; padding: var(--s-xl);
  background: var(--surface); border-radius: var(--r-lg);
}
.inlogkaart { text-align: center; }
.inlogkaart .merk { color: var(--ink); padding: 0; margin-bottom: var(--s-lg); align-items: center; }
.inlogkaart .merk { display: flex; }
.inlogkaart .merk-logo { width: 64px; height: 64px; border-radius: 14px; margin: 0 auto; }
.inlogkaart .veld { text-align: left; }
.inlogkaart .knop-primair { width: 100%; justify-content: center; margin-top: var(--s-sm); }

/* ── smal ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .raam { grid-template-columns: 1fr; }
  .zijbalk { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-sm); }
  .merk { flex-direction: row; align-items: center; }
  .merk-logo { width: 30px; height: 30px; border-radius: 7px; }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .menu-beheer { margin-top: 0; padding-top: 0; border-top: 0; }
  .wie { flex-direction: row; align-items: center; gap: var(--s-sm); border-top: 0; margin-left: auto; }
  .werkvlak { padding: var(--s-md); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ══ de werkbank ═══════════════════════════════════════════════════════════════════════════
 *
 * De merkpagina en de vectorbewerker. Deze klassen horen bij werkbank.js en zijn met opzet
 * hetzelfde gebleven als in de vorige tool: het gedrag is bewezen, alleen de schil eromheen is
 * nieuw. De paar hulpklassen onderaan (d-none, opacity-50) worden door dat script gezet.
 */

.cat-tegel {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1.62;
  /* Boven en onder krapper dan links en rechts. Procentuele binnenmarge rekent altijd aan de
     breedte, ook de verticale: 4% is daarmee op een tegel van 1.62 ongeveer een vijftiende
     van de hoogte. Een breed logo mag de volle breedte pakken; hoog gaat het toch niet. */
  padding: 4% 8%;
  border-radius: 12% / 19.5%;
  overflow: hidden; background: var(--sunk);
  box-shadow: 0 0 0 1px var(--bezel);
}
/* Ook een inline svg, want in de vectorbewerker staat de tekening zelf in de tegel en niet een
   plaatje ervan. Het svg-element draagt daarom bewust geen eigen breedte: het vak bepaalt de
   maat, en dezelfde tekening staat in drie vakken met elk een andere verhouding. */
.cat-tegel img, .cat-tegel > svg,
#werk > svg, #voorbeeldvlak > svg {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block; margin: auto;
}
/* Een vaste maat hoort op een wikkel en niet op de tegel zelf: procentuele padding rekent tegen
   de breedte van het omsluitende blok, niet tegen het element. */
.cat-tegelvak--klein { width: 100%; max-width: 168px; }
.cat-tegelvak--groot { width: 100%; max-width: 340px; }

/* Doorzichtige lagen op een ruit, anders zie je niet of iets wit is of niets. Dat verschil heeft
   in dit project een paar keer een "leeg" logo opgeleverd dat gewoon wit was. */
.cat-ruit {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #dee2e6 25%, transparent 25%, transparent 75%, #dee2e6 75%),
    linear-gradient(45deg, #dee2e6 25%, transparent 25%, transparent 75%, #dee2e6 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* Kleurstalen. De ring toont welke gekozen is, ook op een witte staal. */
.cat-staal {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid rgba(0, 0, 0, .18); padding: 0; cursor: pointer; flex: none;
}
.cat-staal.actief { outline: 3px solid var(--blue); outline-offset: 2px; }

/* De vectorbewerker: de tekening met een sleepbaar kader eroverheen. */
.cat-svgdoek { position: relative; display: inline-block; background: #fff; line-height: 0; }
.cat-svgdoek svg, .cat-svgdoek img { max-width: 100%; height: auto; display: block; }
.cat-kader {
  position: absolute; border: 2px dashed var(--blue);
  background: rgba(47, 115, 240, .08); cursor: move;
}
.cat-greep {
  position: absolute; width: 12px; height: 12px;
  background: #fff; border: 2px solid var(--blue); border-radius: 2px;
}

.plakvak {
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: var(--s-sm); text-align: center; cursor: copy;
  color: var(--ink-soft); font-size: .8125rem;
}
.plakvak.border-primary { border-color: var(--blue); background: var(--blue-wash); }

.mono.pad { word-break: break-all; }

/* Gezet door werkbank.js. */
.d-none { display: none !important; }
.opacity-50 { opacity: .5; }
.knop.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* De vlakkenbewerker: de lijst met paden en de kleine stalen eronder. De knoppen worden door
   vlakken.js gemaakt, dus ze staan hier en niet in de markup. Een vlak dat weggehaald is blijft
   in de lijst staan, doorgestreept: je moet kunnen zien wát je hebt weggehaald om het terug te
   kunnen zetten. */
.vlak-knop {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .8125rem;
  cursor: pointer;
}
.vlak-knop:hover { background: var(--sunk); border-color: #cfd7e3; }
.vlak-knop.uit { opacity: .55; text-decoration: line-through; }
.vlak-knop span { flex: none; }

.cat-staal-klein { width: 26px; height: 26px; }

.melding-fout-tekst { color: var(--danger); }
.melding-goed-tekst { color: var(--go); }
/* Een kopje binnen een paneel. Zonder dit staan er groepen onder elkaar die alle drie even
   belangrijk lijken: een tegel, wat uitleg, een rij staaltjes, nog een rij knoppen. Het kopje
   zegt waar een groep begint, de marge eronder houdt hem bij elkaar. */
.sectiekop {
  margin: 0 0 var(--s-xs); font-size: .8125rem; font-weight: 700;
  color: var(--ink); letter-spacing: 0;
}
.sectiekop + .klein { margin-bottom: var(--s-sm); }
.paneel-lijf > .knop-rij + .knop-rij { margin-top: var(--s-md); }
/* Het bijschrift boven een tegel. Twee tegels naast elkaar vragen om twee woorden die zeggen wat
   je ziet, op dezelfde regel en op dezelfde hoogte; de kleur erachter in mono, want die vergelijk
   je teken voor teken met het veld eronder. */
.tegelkop {
  display: flex; align-items: baseline; gap: var(--s-sm);
  margin-bottom: var(--s-xs);
  font-size: .8125rem; font-weight: 700; color: var(--ink);
}
.tegelkop .mono { font-weight: 400; color: var(--ink-soft); }