/* =============================================================================
   COMPONENT-SUBDOMEIN — pagina-styling
   Hero-concept: het prototyping-canvas (selectie-handles, maatlijnen,
   props-paneel). Uitsluitend semantische design-system-tokens (README §8.1);
   het oker-accent komt automatisch via data-site="component".
   ============================================================================= */

/* ── HERO: je stáát in de design-tool ─────────────────────────────────────
   Het viewport ís het canvas: linialen langs de randen, live cursor-
   positie, en de kop is zelf een geselecteerde type-laag met échte
   resize-handles (component.js). Het props-paneel dokt aan de
   viewportrand en stuurt de laag aan. */
.canvas-hero {
  position: relative;
  overflow: hidden;
}
/* Dot-grid zoals een design-tool-canvas */
.canvas-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    color-mix(in srgb, var(--color-line-strong) 45%, transparent) 1px,
    transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 95% 90% at 55% 42%, black 25%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 55% 42%, black 25%, transparent 82%);
  pointer-events: none;
}

/* Linialen — tool-chrome langs de canvasranden. Ticks via twee herhalende
   gradients (grote tick per 100px, kleine per 10px); de cijfers zet
   component.js erin. Alleen zichtbaar op desktop mét JS. */
.canvas-ruler {
  position: absolute;
  display: none;
  color: var(--color-text-muted);
  font: var(--text-code-weight) var(--text-badge-size)/1 var(--text-code-family);
  pointer-events: none;
  z-index: 2;
}
@media (min-width: 1024px) {
  html.js .canvas-ruler { display: block; }
}
.canvas-ruler--x {
  top: 0;
  left: 0;
  right: 0;
  height: var(--space-m);
  border-bottom: var(--border-thin) solid var(--color-line);
  background-image:
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--color-line-strong) 70%, transparent) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--color-line-strong) 35%, transparent) 0 1px, transparent 1px 10px);
  background-size: 100% 100%, 100% var(--space-2xs);
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}
.canvas-ruler--y {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--space-m);
  border-right: var(--border-thin) solid var(--color-line);
  background-image:
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--color-line-strong) 70%, transparent) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--color-line-strong) 35%, transparent) 0 1px, transparent 1px 10px);
  background-size: 100% 100%, var(--space-2xs) 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
}
.canvas-ruler__num { position: absolute; }
.canvas-ruler--x .canvas-ruler__num { top: var(--space-3xs); translate: var(--space-3xs) 0; }
.canvas-ruler--y .canvas-ruler__num {
  left: var(--space-3xs);
  writing-mode: vertical-rl;
  translate: 0 var(--space-3xs);
}

/* Live cursorpositie — rechtsboven op het canvas, mono */
.canvas-pos {
  position: absolute;
  top: var(--space-l);
  right: var(--container-gutter);
  z-index: 2;
  color: var(--color-text-accent);
}

.canvas-hero__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  align-items: flex-start;
  padding-block: var(--space-l) var(--space-m);
}
@media (min-width: 1024px) {
  /* ruimte voor het gedokte paneel rechts en de liniaal links */
  .canvas-hero__stage { padding-right: 280px; padding-left: var(--space-m); }
}
.canvas-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: flex-start;
}
.canvas-hero__copy .text-lead { max-width: var(--container-text); }
.canvas-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.canvas-hero__copy .text-spec { display: flex; flex-wrap: wrap; gap: var(--space-m); }

/* ── De geselecteerde type-laag (de kop zelf) ────────────────────────────── */
.layer {
  position: relative;
  max-width: 100%;
  border: var(--border-thick) solid var(--color-line-accent);
  border-radius: var(--radius-s);
  padding: var(--space-s) var(--space-m);
  user-select: none;              /* geen tekstselectie tijdens het slepen */
  -webkit-user-select: none;
  animation: layer-select var(--duration-slow) var(--ease-out) both;
}
@keyframes layer-select {
  from { opacity: 0; scale: 0.97; }
  to   { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .layer { animation: none; }
}
.layer__title { min-width: 0; }
.layer__title em { font-style: italic; color: var(--color-text-accent); }
.layer__title.is-italic { font-style: italic; }
.layer__title.is-accent { color: var(--color-text-accent); }
.layer__title.is-accent em { color: inherit; }
.layer__label {
  position: absolute;
  top: calc(-1 * var(--space-m) - var(--space-3xs));
  left: 0;
  color: var(--color-text-accent);
  white-space: nowrap;
}
.layer__handle {
  position: absolute;
  width: var(--space-2xs);
  height: var(--space-2xs);
  background: var(--color-bg);
  border: var(--border-thick) solid var(--color-line-accent);
  border-radius: var(--radius-s);
  touch-action: none;   /* pointer-resize — geen scroll-conflict */
  display: none;        /* alleen desktop + JS (hieronder) */
}
@media (min-width: 1024px) {
  html.js .layer__handle { display: block; }
}
/* Grotere onzichtbare klikzone dan de 8px-stip zelf */
.layer__handle::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--space-xs));
}
.layer__handle--nw, .layer__handle--se { cursor: nwse-resize; }
.layer__handle--ne, .layer__handle--sw { cursor: nesw-resize; }
.layer__handle--n,  .layer__handle--s  { cursor: ns-resize; }
.layer__handle--w,  .layer__handle--e  { cursor: ew-resize; }
.layer__handle--nw { top: calc(-1 * var(--space-3xs) - 1px); left: calc(-1 * var(--space-3xs) - 1px); }
.layer__handle--n  { top: calc(-1 * var(--space-3xs) - 1px); left: 50%; translate: -50% 0; }
.layer__handle--ne { top: calc(-1 * var(--space-3xs) - 1px); right: calc(-1 * var(--space-3xs) - 1px); }
.layer__handle--w  { top: 50%; left: calc(-1 * var(--space-3xs) - 1px); translate: 0 -50%; }
.layer__handle--e  { top: 50%; right: calc(-1 * var(--space-3xs) - 1px); translate: 0 -50%; }
.layer__handle--sw { bottom: calc(-1 * var(--space-3xs) - 1px); left: calc(-1 * var(--space-3xs) - 1px); }
.layer__handle--s  { bottom: calc(-1 * var(--space-3xs) - 1px); left: 50%; translate: -50% 0; }
.layer__handle--se { bottom: calc(-1 * var(--space-3xs) - 1px); right: calc(-1 * var(--space-3xs) - 1px); }

/* Maatlijn onder de laag: de échte gerenderde maat (component.js) */
.layer__measure {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--space-l));
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text-accent);
}
.layer__measure i {
  flex: 1;
  height: var(--border-thin);
  background: var(--color-line-accent);
}
.layer__measure .text-spec { color: var(--color-text-accent); }

/* ── Props-paneel, gedokt aan de viewportrand als echt tool-paneel ──────── */
.tool-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  background: var(--color-bg-raised);
  border: var(--border-thin) solid var(--color-line);
  box-shadow: var(--shadow-l);
  padding: var(--space-s);
  z-index: 3;
}
@media (min-width: 1024px) {
  .tool-panel {
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    width: 250px;
    border-right: 0;
    border-radius: var(--radius-l) 0 0 var(--radius-l);
  }
}
@media (max-width: 1023.98px) {
  /* Mobiel geen tool-chrome: handles bestaan daar niet en het paneel zou
     de hero uit de viewport duwen (harde regel: hero past in 100svh). */
  .tool-panel { display: none; }
}
.tool-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.tool-panel__prop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: var(--size-control-m);
  margin-inline: calc(-1 * var(--space-2xs));
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.tool-panel__prop:hover { background: var(--color-hover-overlay); }
.tool-panel__prop:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 0;
}
.tool-panel__prop .badge { pointer-events: none; }   /* klik altijd op de knop zelf */
.tool-panel__hint { padding-top: var(--space-2xs); }
@media (max-width: 1023.98px) {
  .tool-panel__hint { display: none; }   /* handles bestaan mobiel niet */
}

/* Mobiel: compacter — de hero hoort in één viewport te passen. */
@media (max-width: 1023.98px) {
  .canvas-hero__stage { padding-block: var(--space-s); gap: var(--space-m); }
  .canvas-hero__copy { gap: var(--space-xs); }
  .canvas-hero__copy .text-lead {
    font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--text-body-family);
  }
  .canvas-hero__copy .text-spec { display: none; }
  .layer { padding: var(--space-2xs) var(--space-xs); }
  .layer__measure { display: none; }
}

/* De visual-stempel (.specimen__visual) komt uit het design system
   (§ATELIER-MATERIAAL) — gepromoveerd, hier geen lokale kopie meer. */

/* ── Component-kaarten ────────────────────────────────────────────────────── */
.comp-card__frame {
  display: block;
  background: var(--color-bg-sunken);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-m);
  overflow: hidden;
}
.comp-card__frame img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: var(--space-xs);
}
.comp-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: auto;               /* knoppen altijd onderaan de kaart */
}
.figma-mark { width: var(--size-icon-s); height: var(--size-icon-s); }
/* Icoon-tegel als link (uitgelicht op home) — zelfde artefact-gedrag */
a.icon-tile { color: inherit; }

/* De hele kaart is de copy-knop (verzoek Ruud 2026-07-08): zelfde
   oppak-hover als de icoon-tegels + focus-ring (role="button"). */
.comp-card {
  cursor: pointer;
}
.comp-card:hover,
.comp-card:focus-within {
  rotate: 0deg;
  translate: 0 calc(var(--space-2xs) - var(--space-s));
  box-shadow: var(--shadow-artefact-lift);
}
.comp-card:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .comp-card:hover, .comp-card:focus-within { rotate: var(--tilt, 0deg); translate: 0 0; }
}
/* Copy-affordance onderaan de kaart; kleurt mee bij hover */
.comp-card__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: auto;
  transition: color var(--duration-fast) var(--ease-out);
}
.comp-card:hover .comp-card__hint { color: var(--color-text-accent); }

/* "Gekopieerd"-flits midden op een kaart/tegel (component.js: flashCard) */
.copy-flash {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  margin-inline: auto;
  width: fit-content;
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-bg-accent);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-l);
  font: var(--text-badge-weight) var(--text-badge-size)/var(--text-badge-line) var(--text-badge-family);
  pointer-events: none;
  z-index: 3;
}
.copy-flash svg { width: var(--size-icon-s); height: var(--size-icon-s); }

/* ── Iconen-grid & tegels ─────────────────────────────────────────────────── */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: var(--space-s);
}
/* Artefact-materiaal i.p.v. "lijntje + corner radius" (creatieve overhaul).
   De tegel is een wrapper (div) met daarin de open-knop en een snelkopie-
   overlay — een knop mag geen knop bevatten. */
.icon-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s);
  background-color: var(--color-bg-raised);
  background-image: linear-gradient(155deg, transparent 55%, var(--tint-paper));
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-artefact);
  cursor: pointer;   /* de hele tegel kopieert (role="button") */
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.icon-tile:hover,
.icon-tile:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-artefact-lift);
}
.icon-tile:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}
/* Snelkopie-overlay in de hoek — verschijnt bij hover/focus (touch: altijd) */
.icon-tile__quick {
  position: absolute;
  top: var(--space-3xs);
  right: var(--space-3xs);
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .icon-tile__quick { opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
  .icon-tile:hover .icon-tile__quick,
  .icon-tile:focus-within .icon-tile__quick { opacity: 1; }
}
.icon-tile__art {
  display: grid;
  place-items: center;
  width: var(--space-2xl);
  height: var(--space-2xl);
  color: var(--color-icon);
}
.icon-tile__art svg { width: var(--size-icon-xl); height: var(--size-icon-xl); }
.icon-tile template { display: none; }

/* ── Weergave-toolbar boven een bibliotheek-grid ───────────────────────────
   Op icons.php: stijl/maat/kleur/achtergrond voor het hele overzicht.
   Op components.php: alleen achtergrond. Was .icon-toolbar (icoon-specifiek
   genoemd); hernoemd toen components.php hem ook nodig kreeg — promotieregel
   (verzoek Ruud 2026-07-08: previewachtergrond op beide bibliotheekpagina's). */
.library-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  padding: var(--space-s);
  background: var(--color-bg-raised);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-l);
}
.library-toolbar__set {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
/* In een chip-groep HUGT álles (feedback Ruud 2026-07-08: geen mix van
   chip-hoogte en controlhoogte): ook de eigen-maat-input en de kleurstaal
   krijgen de chip-maat. */
.library-toolbar__custom { display: inline-flex; }
.library-toolbar__custom .form-field__input {
  width: 5.5em;
  height: auto;
  min-height: 0;
  padding-block: var(--space-3xs);
  border-radius: var(--radius-full);
  font-size: var(--text-nav-size);
  text-align: center;
}
/* Kleurkiezer als rond staal op chip-maat — óók het kleurvlak zelf rond */
.icon-swatch {
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
  padding: var(--space-3xs);
  border: var(--border-thin) solid var(--color-line-strong);
  border-radius: var(--radius-full);
  background: var(--color-bg-sunken);
  cursor: pointer;
}
.icon-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.icon-swatch::-webkit-color-swatch { border: 0; border-radius: var(--radius-full); }
.icon-swatch::-moz-color-swatch { border: 0; border-radius: var(--radius-full); }

/* ── Preview-achtergrond: automatisch (volgt het sitethema, standaard) of
   handmatig geforceerd naar licht/donker — LOS van het sitethema zelf
   (verzoek Ruud 2026-07-08: een licht component is soms onzichtbaar tegen
   een licht sitethema). component.js zet data-preview-theme op <body>;
   "auto" laat het attribuut gewoon weg, dan gelden de normale thema-tokens
   hierboven ongewijzigd. Gebruikt de vaste (theme-onafhankelijke) tokens uit
   tokens.css — bewust GEEN --color-bg-sunken/--color-icon, want die
   veranderen zelf mee met [data-theme] en zouden de override tenietdoen. */
body[data-preview-theme="light"] .comp-card__frame {
  background: var(--color-preview-surface-light);
}
body[data-preview-theme="dark"] .comp-card__frame {
  background: var(--color-preview-surface-dark);
}
body[data-preview-theme="light"] .icon-tile {
  background-color: var(--color-preview-surface-light);
  background-image: none;
}
body[data-preview-theme="dark"] .icon-tile {
  background-color: var(--color-preview-surface-dark);
  background-image: none;
}
body[data-preview-theme="light"] .icon-tile__art,
body[data-preview-theme="light"] .icon-tile .text-caption { color: var(--color-preview-ink-light); }
body[data-preview-theme="dark"] .icon-tile__art,
body[data-preview-theme="dark"] .icon-tile .text-caption { color: var(--color-preview-ink-dark); }

/* ── DETAILPAGINA'S (component.php / icon.php) ────────────────────────────
   Specimen-blad: links het artefact (preview/varianten + acties), rechts
   het spec-paneel met álle databasevelden. Beheerformulier eronder. */
.detail-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
}
/* Compacte pagina-maat: geen display-kop en kleinere gaps dan de standaard
   .page, zodat de preview zonder scrollen in beeld staat. De padding volgt
   gewoon de .page-tokens (correctie Ruud 2026-07-07: nooit per pagina een
   eigen paddingmaat verzinnen). */
.detail-page {
  gap: var(--space-xl);
}
.detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: start;
}
@media (min-width: 1024px) {
  .detail-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
.detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.detail-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.detail-head h1 {
  font: var(--text-h2-weight) var(--text-h2-size)/var(--text-h2-line) var(--text-h2-family);
  letter-spacing: var(--text-h2-tracking);
}
.detail-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
}
.detail-head .text-body-s { max-width: var(--container-text); }
.detail-badges { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.detail-preview { padding: var(--space-m); }
.detail-preview .comp-card__frame img { aspect-ratio: auto; max-height: min(56svh, 520px); }
.detail-spec { padding: var(--space-m); }
.spec-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
}
.spec-list > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-s);
  align-items: baseline;
  padding-bottom: var(--space-2xs);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.spec-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-list dd { margin: 0; overflow-wrap: anywhere; }

.detail-toggles { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.detail-form { max-width: 960px; gap: var(--space-l); }
/* (veld-grids gebruiken sinds DS v2.13.0 de gedeelde .form-grid met
   subgrid-uitlijning — de oude .detail-form__grid is vervallen) */

/* Beheer-blokken: elk onderwerp op zijn eigen genummerde kaart — geen brei
   van losse velden (verzoek Ruud 2026-07-07). De kaart komt uit het DS
   (card--artefact); hier alleen de fieldset-eigenaardigheden. */
.beheer-blok {
  gap: var(--space-m);
  margin: 0;
  padding: var(--space-l);
  min-width: 0;   /* fieldset krimpt anders niet binnen een flex/grid-ouder */
}
.beheer-blok__titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-2xs);
  border-bottom: var(--border-thin) solid var(--color-line);
  width: 100%;
}
.detail-form__copydata {
  font: var(--text-code-weight) var(--text-code-size)/var(--text-code-line) var(--text-code-family);
  overflow-wrap: anywhere;
}
/* .detail-danger (gevarenzone) is gepromoveerd naar het design system
   (components.css) toen account. (gebruikersbeheer) hem ook nodig kreeg —
   promotieregel, geen lokale kopie meer. */

/* Icoon-varianten op de detailpagina */
.icon-variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-m);
  padding-top: var(--space-s);   /* lucht voor de geplakte labels */
}
.icon-variant { align-items: center; gap: var(--space-s); padding: var(--space-l) var(--space-m) var(--space-m); }
.icon-variant__art {
  display: grid;
  place-items: center;
  width: 100%;
  padding: var(--space-m);
  background: var(--color-bg-sunken);
  border-radius: var(--radius-m);
  color: var(--color-icon);
}
.icon-variant__art svg { width: var(--space-3xl); height: var(--space-3xl); }
.icon-variant template { display: none; }

/* Admin-schakelaars op de bibliotheekkaarten: icon-chips als overlay in de
   hoek — pas zichtbaar bij hover/focus (verzoek Ruud 2026-07-07: niet
   permanent in beeld). Zonder hover (touch) staan ze er gewoon. */
.comp-card { position: relative; }
.comp-card__admin {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  display: flex;
  gap: var(--space-3xs);
  z-index: 2;
}
.comp-card__admin form { display: contents; }
@media (hover: hover) and (pointer: fine) {
  .comp-card__admin { opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
  .comp-card:hover .comp-card__admin,
  .comp-card:focus-within .comp-card__admin { opacity: 1; }
}

/* De bibliotheekgrid heeft een WISSELEND aantal resultaten (zoeken/
   filteren) — anders dan de vaste kaartensets elders die het gedeelde
   .card-grid (auto-fit) gebruikt. Met auto-fit rekken 1-2 resultaten op tot
   de volle breedte; auto-fill houdt de kolommen op hun normale kaartbreedte
   en laat de rest van de rij gewoon leeg (verzoek Ruud 2026-07-08). */
#libraryGrid.card-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

/* ── Bibliotheek-kop: titel links, nieuw-knop rechtsboven — geen lead ───── */
.library-head {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s);
  max-width: none;
}
/* Categoriebeheer-link onderaan het categorie-menu */
.library-sidebar__beheer {
  justify-content: flex-start;
  margin-top: var(--space-xs);
  padding-inline: var(--space-xs);
  font-size: var(--text-nav-size);
}

/* ── CATEGORIEBEHEER — compacte bewerkbare rijen ────────────────────────── */
.cat-list {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  max-width: 900px;
}
.cat-list__cols,
.cat-list__row {
  display: grid;
  grid-template-columns: var(--size-icon-l) minmax(0, 1fr) 110px auto;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-2xs) var(--space-s);
}
/* Sleepgreep: volgorde = verslepen (component.js doet de FLIP-animatie) */
.cat-list__grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-muted, var(--color-text-muted));
  cursor: grab;
}
.cat-list__grip svg { width: var(--size-icon-m); height: var(--size-icon-m); }
.cat-list__row[draggable="true"]:active .cat-list__grip { cursor: grabbing; }
/* De rij die je vasthebt: licht op, iets doorzichtig — de opening in de
   lijst laat precies zien waar hij landt. */
.cat-list__row.is-sleep {
  opacity: 0.45;
  background: var(--color-bg-accent-soft);
  outline: var(--border-thin) dashed var(--color-line-accent);
  outline-offset: calc(-1 * var(--border-thin));
}
.cat-list__leeg { padding: var(--space-s); }
.cat-list__cols {
  min-height: var(--size-control-s);
  border-bottom: var(--border-thin) solid var(--color-line);
  background: var(--color-bg-sunken);
  letter-spacing: 0.04em;
}
.cat-list__row { border-bottom: var(--border-thin) solid var(--color-line); }
.cat-list__row:last-child { border-bottom: 0; }
.cat-list__row--nieuw { background: var(--color-bg-sunken); }
.cat-list__acties { display: flex; gap: var(--space-2xs); }
@media (max-width: 767.98px) {
  .cat-list__cols { display: none; }
  .cat-list__row { grid-template-columns: 1fr; }
}

/* ── CONTACT — "dien een verzoek in op het canvas" ────────────────────────
   Zelfde vormtaal als de hero: de kop als (statisch) geselecteerde type-
   laag, het formulier als artefact-kaart met een eigenschappen-paneel
   ernaast. De statische varianten tonen geen sleep-gedrag. */
.contact-canvas-head { max-width: none; }
.contact-canvas-head .layer--static {
  align-self: flex-start;
  animation: none;
  user-select: text;
  -webkit-user-select: text;
}
.contact-canvas-head .layer--static .layer__handle { cursor: default; }
@media (min-width: 1024px) {
  html.js .contact-canvas-head .layer--static .layer__handle { display: block; }
}
.contact-canvas-head .layer--static h1 em {
  font-style: italic;
  color: var(--color-text-accent);
}
.contact-canvas-head .text-lead { max-width: var(--container-text); }

.contact-canvas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-canvas { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}
.contact-canvas__form { padding: var(--space-l); }
.contact-canvas__fields { max-width: none; }   /* de kaart bepaalt de breedte */
/* Het paneel is hier informatief (geen gedokte tool): gewoon in de flow,
   ook op mobiel zichtbaar. */
.tool-panel--static {
  position: static;
  translate: none;
  width: auto;
  border-right: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-l);
}
@media (max-width: 1023.98px) {
  .tool-panel--static { display: flex; }
  .tool-panel--static .tool-panel__hint { display: block; }
}
.tool-panel__prop--info { cursor: default; }
.tool-panel__prop--info:hover { background: transparent; }

/* ── CTA-kaart (gedeeld CTA-component van dit domein) ─────────────────────── */
.cta-card {
  align-items: flex-start;
  gap: var(--space-m);
  max-width: var(--container-text);
  padding: var(--space-2xl);
}

/* ── Diversen ─────────────────────────────────────────────────────────────── */
/* .cta-strip en .is-hidden zijn gepromoveerd naar design-system/components.css
   (tweede gebruiker: account. — promotieregel README §fase 2). */
.entry-card { gap: var(--space-s); }
.nav-link--external { color: var(--color-text-muted); }